beamwind design system preset using a semantic naming scheme
npm install @beamwind/preset-system> beamwind design system preset using a semantic naming scheme
> Read the docs |
> API |
> Change Log
---
> This is a only a preset. @beamwind/system provides a ready to use bw export.
---
@beamwind/preset-system tries to follow a semantic naming approach by using a common _language_ to reduce the guess work. A small set of well known design tokens hopefully prevents magic values or ambiguous names. This creates a taxonomy of tokenized variables used by system adopters and library’s components. The more predictably the model is catalogued, the easier it is to apply, maintain, and endure.
As with all systems, one of the most important things are reasoning. Why use this color instead of that color? Thinking color systems instead of color palettes can benefit everyone involved in choosing and using color as part of a UI. It allows designers to focus on the more complex problems — no more procrastinating on design choices. This enables developers to create a simpler more logical codebase.
- Installation
- Usage
- Colors
- Spacing
- Typography
- Scales
- Acknowledgements
- Contribute
- License
``sh`
npm install @beamwind/preset-system
> Please refer to the main documentation for further information.
`js
import { setup } from '@beamwind/core'
import system from '@beamwind/preset-system'
setup(
system({
colors: {
// Override any color - the tones should be defined here
},
}),
)
`
See preset-system/src/theme.ts and core/src/theme.ts for the set values.
Naming colors is one of the most challenging parts of a color system. Many systems try to map color tones to their relative lightness, but this can be problematic because it creates a very loose mental model. Other systems will try to name colors based on use or hierarchy and those are equally problematic.
Applying a systematic approach to colors will help stay organized and give reasoning behind how and when to use certain colors. But most importantly, it will allow to easily apply a new color scheme to the design. _Dark Mode_ will only be a few color tweaks away, once everything is put into the system.
The color names are designed to have a strong correlation with the tone of voice being used.
> Internally @beamwind/colors is used to generate _states_, "_on_" and _surface_ colors for a _tone_.
- primary - is the color displayed most frequently across screens and componentssecondary
- - provides more ways to accent and distinguish certain screens and component parts
Secondary colors are best for:
- Floating action buttons
- Selection controls, like sliders and switches
- Highlighting selected text
- Progress bars
- Links and headlines
- critical - Super important. You need to see this.caution
- - You should be aware something is happening or mid-way through a process. Could be a risk or an item that needs to be acted upon.positive
- - Good vibes & new things! Wants to get the user to act on something or be aware something good happened.neutral
- - Subtle information or details historic in nature. Often already actioned & in the past. No priority required due to the lack of importance or change.info
- - Guidance & advice. Generally from the UI or business. Functional, calm and non urgent.promote
- - Things we wish to make prominent and give more visibility to. Typically used to highlight features, updates or marketing messages.
> refines the used tone - primary-hover or primary-active
- hover - applies when a pointing device interacts with an element without necessarily activating itfocus
- - applies when an element is in a state that is ready to be interacted with, i.e. it has the :focus of the input device.active
- - applies during the period in which the element is being activated. For example, if using a mouse 🐭, it would be the time between when the mouse button is clicked and when it is released.disabled
- - usually in form controls and buttonsselected
- - indicate selected a value.
> provide accessible contrast to their base color - on-primary or on-primary-active
Whenever elements, such as text or icons, appear in front of surfaces, those elements should use colors designed to be clear and legible against the colors behind them. When a color appears "_on_" top of a primary color, it’s called an "_on primary color_". They are labelled using the original color category (such as primary color) with the prefix on-.
"_On_" colors are primarily applied to text, iconography, and strokes. Sometimes, they are applied to surfaces.
> The bg- directive adds a color CSS declaration if a corresponding on-* color is found.
> affect surfaces of components, such as cards, sheets, and menus
- surface - primary backgroundsheet
- - for accented backgroundspanel
- - for cardsmenu
- - for dropouts
beamwind provides a standard white space scale using common design terms:
- none, base, xs, sm, md, lg, xl, 2xl, 3xl, px, auto
Assign values to the scale (h1 — h6)
- h1: Typically used for headings on main screensh2
- : Subheadings, such as for container headersh3
- : Supplementary content such as numerical values or calloutsh4
- : Axis labels, supporting contenth5
- : Supporting content, such as card containersh6
- : Supporting content, such as labelsp`: Body copy
-
https://v5.getbootstrap.com/docs/5.0/extend/approach/#z-index-scales
- Braid Design System / Tones
- Material Design / The color system
- Dark Mode — Working with Color Systems
- Speccing Colors in Design Systems
- The light and the dark side: creating a UI colour system in 3 steps
- Light & Dark Color Modes in Design Systems
Thanks for being willing to contribute!
> This project is free and open-source, so if you think this project can help you or anyone else, you may star it on GitHub. Feel free to open an issue if you have any idea, question, or you've found a bug.
Working on your first Pull Request? You can learn how from this _free_ series How to Contribute to an Open Source Project on GitHub
We are following the Conventional Commits convention.
 Kenoxa GmbH