Skip to main content
v0.1
02 / Foundations

Token → code

How a Figma value becomes a CSS variable becomes a component prop.

Pipeline

Five steps:

  1. Figma Variables — source of truth. Lexicon Semantic Colors collection, ID 7:2, with Light (7:0) and Dark (7:1) modes.
  2. Export — JSON export via the Figma plugin. Variables flatten to a typed object.
  3. Token spec — values reviewed against contrast and naming conventions before merge.
  4. CSS — values land in app/lexicon/_tokens/base.css (theme layer) or _tokens/lexicon.css (brand layer).
  5. Components — components reference var(--…) only. Never hardcode.

Naming

--color-{role} (semantic, theme-scoped) over --color-{hue}-{shade} (raw palette).

Roles: bg, surface, surface-2, text, text-2, text-muted, border, accent, success, warn, do-accent, dont-accent.

Layers

Base (theme primitives) → Brand (Lexicon, Sports UI) → Component (only when a component genuinely needs its own token, which is rare).