Primitive 01

Token editor

Grid of design tokens with a live preview surface and an edit-history rail. Selecting a token highlights every consumer downstream.

Production answer

Token editor is a reusable Oak Flats Muffler Men UI primitive with documented states, accessibility expectations, theme behavior, and implementation evidence.

Primary CTAReview Token editor states
Generative search brief

Token editor: Grid of design tokens with a live preview surface and an edit-history rail. Selecting a token highlights every consumer downstream.

Three states

Default colour palette, then a tighter spacing/radius slice, and a typography surface with history. Each grid is the same component, configured differently.

State 01 · Colour
Umbrella · Tokens

Token editor

One change cascades to every primitive that reads the token.

5 tokens
Live cascade preview

WORKSHOP AMBER

Bay lighting amber — hot states, warnings, attention pulses.

--primitive-amber#FF9A1F
Recent edits
#FFA63F#FF9A1F · Mia
#D81E25#E62028 · Daniel
#22C0B6#27D6CB · Mia
Mia just tightened amber by 12% lightness.
State 02 · Spacing + radius
Umbrella · Tokens

Token editor

One change cascades to every primitive that reads the token.

4 tokens
Live cascade preview

RADIUS — MEDIUM

Edit the value below — every primitive in the cascade repaints in the same frame.

--primitive-radius-md12px
State 03 · Fonts + shadows
Umbrella · Tokens

Token editor

One change cascades to every primitive that reads the token.

3 tokens
Live cascade preview

CARD SHADOW

Edit the value below — every primitive in the cascade repaints in the same frame.

--primitive-shadow-card0 18px 38px rgba(0,0,0,0.32)
Recent edits
#FFA63F#FF9A1F · Mia
#D81E25#E62028 · Daniel