One source, every surface.

Tokens are the primitives every component reads from. They resolve in three tiers — raw ramps become semantic roles become component values — so one change propagates everywhere, audited across light and dark.

Tier 1 · Primitives

The ramps

Eight warm-editorial ramps × ten steps. The raw material — never used directly in components.

terracotta · obsidian · parchment …

→

Tier 2 · Semantic

The roles

Role tokens + status anchors. --accent, --bg-canvas, --fg-primary — what design and engineers actually reference.

--accent → terracotta-500 --bg-canvas → parchment-500

→

Tier 3 · Component

The surface

Components bind only to semantic roles, plus derived intent tokens for status surfaces. No hard-coded color, ever.

Button · uses --accent Banner · uses intent

80PRIMITIVES · 8 × 10

22SEMANTIC ROLES

5STATUS ANCHORS

30INTENT TOKENS

2LAYERS · MODE × SCHEME

Mode

Light / dark, via next-themes. Every role resolves a value per mode.

Color scheme

Lumos is one scheme on the two-layer generator — switchable, regression-locked against the theme matrix.

Rotate your phone for a larger view. Tap the slide to open it full size and zoom.

8.5 × 11 · Portrait