Meridian, a grid-native design system

Problem

Two themes, three palettes, zero agreement

The product had accumulated hex values the way old houses accumulate paint layers. Dark mode was a separate palette maintained by hand, spacing was whatever the last person typed, and nothing lined up with anything else on the page.

Approach

Primitives, tokens, utilities — in that order

I rebuilt the palette as nine painter pigments expressed in OKLCH, sharing a single ramp of lightness steps. Semantic tokens map those primitives to roles — surface, text, action, state — with dark mode as overrides on one class rather than a parallel palette. A baseline grid with minor and major cells drives every margin, gap, and card height.

Outcome

Theme changes went from a week of QA to a token diff. New screens compose from semantic utilities instead of raw values, and the grid made alignment reviews obsolete — if it renders, it's aligned.