Relative color syntax, and the end of generated variants
You can now derive a hover state from a token in CSS itself. No build step, no generated values, no drift between the two.
Tag
design systems
7 articles on design systems.
Color as a system, not a list
A design system's color layer fails in a predictable way: it starts as a palette, accumulates one-off values under deadline, and ends as 200 hex codes nobody can safely change. The defence is to separate the two kinds of token. Primitive tokens name colors — blue-600. Semantic tokens name jobs — surface-raised, text-muted, border-strong. Components reference only the second kind.
That indirection is what makes a theme swap possible. If a button reaches for blue-600, retheming means editing every component. If it reaches for action-bg, retheming means editing one map. It is also what makes dark mode tractable, since the semantic layer is exactly the set of relationships that has to hold in both themes.
Generate the primitive ramps rather than hand-picking them. A ramp built in OKLCH with lightness marching evenly and chroma following a curve will have consistent steps across every hue, which is the property that makes *-600 mean the same thing for blue and for yellow.
All 7 articles
Warm grays, cool grays, and why pure gray looks dead
A gray with no hue in it is the one color that never appears in the physical world. Add a trace of chroma and the whole interface changes.
Brand color is not product color
The color from the logo was chosen for a context where nothing sits on top of it. Then somebody made it a button.
Elevation without shadows
Shadow is the absence of light. On a dark background there is barely any light to remove, so depth has to come from somewhere else.
Semantic tokens and the rebrand that broke everything
A story about --blue-500, told as a cautionary tale, with the two-layer token structure that prevents it.
Building a color ramp that survives contact with real UI
One brand color is not a palette. Here is how the 50–950 scale works, why the ends always look washed out, and which step you should actually be using for text.
Dark mode is not an inversion
filter: invert(1) takes about four seconds and produces a theme where your brand blue has turned orange. Here is what a real dark theme requires.
Tools for design systems
- Design Token ExporterOne background, exported to eight formats.
- Tailwind Palette GeneratorA full 50–950 ramp from one brand color.
- CSS Variables GeneratorA themed :root block, light and dark, ready to paste.
- Palette AnalyzerPaste a palette. Find out what is wrong with it.
- Surface System GeneratorOne background in, a full elevation stack out.