How to Build a Design System From a Single Brand Color

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.