Demo

Tokens first: how a design system survives the third redesign

Colors, type and spacing as named values make a redesign a change of values, not a hunt through templates.

Reading time

1 minute
Abstract composition in muted tones

Most websites are redesigned every four to five years. The content stays, the look changes, and every time someone searches through templates for hard-coded colors. A design system that starts with tokens turns that search into an edit of one file.

Name the role, not the value

A token called accent survives a new brand color. A token called green does not. Leitvia names its colors after their job: surface, ink, accent, stroke. A style variation swaps the values and every pattern follows.

  • Colors by role: surface, surface alternate, ink, ink muted, accent, stroke
  • A fluid type scale from meta text to display headings
  • Spacing steps from xs to xxl, used for every section padding

What stays fixed

Some decisions are not tokens: line length, the order of headings, the contrast between text and background. They are rules, and rules are checked, not styled. That is why every Leitvia release runs an accessibility test on every pattern before it ships.