How to Build a Design System From a Single Brand Color
A repeatable recipe for turning one HEX into a 12-step OKLCH ramp, semantic tokens, dark mode, and dev-ready exports - in under ten minutes.
Step 1: Pick a brand color you actually want to live with
Avoid grabbing the first color that "feels right". Throw three candidates into our Palette Visualizer and check how each looks on a fake landing page, dashboard and mobile mock. The winner is the one that survives every context.
Step 2: Generate a 12-step OKLCH ramp
Drop the brand color into Design System. The tool sweeps the lightness axis from L=0.97 to L=0.12 while keeping chroma proportional. You get the equivalent of Tailwind's 50 -> 950 scale, but tuned to your brand instead of pre-baked.
Step 3: Define semantic tokens
Map ramp steps to semantic roles:
--text-primary-> step 950--text-muted-> step 600--surface-> step 50--surface-raised-> step 100--brand-> step 500--brand-hover-> step 600--border-> step 200
Semantic names survive rebrands. Numeric scales do not.
Step 4: Mirror for dark mode
Reverse the ramp. --text-primary becomes step 50 in dark mode; --surface becomes step 950. OKLCH lightness is perceptually uniform, so the mirror "feels" balanced without manual nudging.
Step 5: Audit contrast
Run every text-on-surface pair through the Contrast Checker. Anything below 4.5:1 (body) or 3:1 (large) needs adjustment. The 12-step OKLCH ramp typically passes the first time.
Step 6: Export
Use our Design Tokens exporter to ship the tokens as W3C DTCG, Style Dictionary, Tailwind config, SCSS or plain CSS variables. Engineers get the same source of truth, no copy-paste drift.
Total time: under ten minutes. Total cost: zero.