A design system with mostly variables
How far will we get with just variables in our design system?
Variables and some classes for typographic styles/hierarchy.
- Units
- Font stacks
- Colours
- Spacing
- Line thicknesses
- Typographic heading levels
- Typographic styles for emphasis, italic, strong emphasis and bold.
Can we start with this, and no layout? Then upgrade?
Design systems – MOC
Colours
I started by defining single colours, --blue, then branching out in either direction --blue-light, --blue-light-2, --blue-dark etc.
This quickly proved to be fairly suboptimal, and I’ve found that there are almost always cases where you need more choices.
Defining colours in the design system should always be done using a palette range.
--blue-50, --blue-100, --blue-200, --blue-300, etc… until --blue-950…
This gives us a range of 12 colours to work with in the blue colour palette.
You might not (and maybe should not) use them all at once, but having them there gives us a fair amount of scope to for instance increase legibility with small type by using a higher contrast colour to the given background.
By defining these colours from the beginning, the graphic designer is in a way more in charge of the colour palette than if they had only defined 3 shades of blue.
As a developer, you can refer to the existing palette rather than resort to sorcery to make up more suitable shades.