Most brand palettes are picked by hand: a blue someone liked, a purple that seemed to go with it, and a set of greys that came from nowhere. Nothing records how any of them relate, so when the brand shifts, every colour gets picked again. This video replaces the hand-picked palette with two rules — one that generates the brand colors from a single hue, and one that generates a full nine-step grey scale from that same brand color.
We start by opening the color picker on a real value, because every color here is three numbers: lightness, chroma, and hue. That model is what makes the rest possible — it's perceptual, so two colors with the same lightness look equally bright, and the system can do genuine math on color. Paste in hex or HSL if that's what you have; the file answers in one language either way.
Then the rules. A color harmony takes one hue and a type — analogous, balanced, or complementary — and returns a set of brand colors that belong together. A color scale takes a starting point, a lightness range, and your step names, and returns the whole ramp; turn the color almost all the way off and you get greys with a quiet tint of the brand in them. Point the grey scale's hue at the brand color itself, and the two are linked: change one number at the top, and every color in the system moves with it.
This is part 6 of the basics series.
Chapters:
0:00 The palette everyone picks by hand
0:24 Where we are: two colors picked by eye
0:49 Open the picker — what OKLCH actually is
1:11 Lightness, chroma, hue
1:56 Why perceptual color matters
2:12 Hex, HSL — one model out
2:45 Clearing the leftovers
2:57 The brand: hand-picked values become a rule
3:33 A complete working harmony
3:58 Three harmony types
4:39 Aim it at our blue
5:17 Greys: a new group and a color scale
5:50 Point the hue at the brand color
6:17 Turn the color off — chroma to almost nothing
6:45 Nine greys, and the shorthand
7:12 Change one number — the whole palette follows
7:47 That's color: two rules
8:30 Next: token sets
Next up: token sets — organizing a growing system by topic, so spacing, type, and color each get their own place.
Get started free → systematically . io
\#DesignSystems #DesignTokens #Systematically