Token rows
A short list of token rows (swatch, name, value) on the Orbit Burger surface. Rows with a from value show the change as from → value in Nova and carry a dashed outline in action-bg: the changed token is the mass everything else orbits.
Three rows, two edited
Light
- Colors.Surface.DefaultVoid.900
- Colors.Brand.PrimaryNova.500 → 600
- Radius.Card8 → 24
Graphite
- Colors.Surface.DefaultVoid.900
- Colors.Brand.PrimaryNova.500 → 600
- Radius.Card8 → 24
Story: /stories/token-rows/default/
Guidelines
Section titled “Guidelines”- Three rows at most; the page tells a story, not a diff.
- The swatch is the colour itself, or the radius drawn as a cornered square (
sm/lg). - Rows are 18 px apart so the outlines (4 px offset) have air; on phones the type drops to 12 px so name and value never crowd each other.
- Surface and text come from the example’s tokens; only the outline is the design system’s.
Tokens used
Section titled “Tokens used”Read from the component’s source:
--action-bg--colors-brand-primary--colors-surface-default--colors-surface-raised--colors-text-default--colors-text-muted--font-mono--nova-400--space-3--space-4--stroke-redline--type-meta-size