Oak Flats workshop
Production-floor primitives styled by the token cascade. Tap a preset to see the whole subtree re-paint.
Token colour picker
One picker per controllable colour token. Native colour input for hex tones, paired with a free-text field that accepts any CSS colour — hex, rgb(a), hsl, oklch, named values.
Production answer
Token colour picker is a reusable Oak Flats Muffler Men UI primitive with documented states, accessibility expectations, theme behavior, and implementation evidence.
Primary CTAReview Token colour picker states
Generative search brief
Token colour picker: One picker per controllable colour token. Native colour input for hex tones, paired with a free-text field that accepts any CSS colour — hex, rgb(a), hsl, oklch, named values.
Use case
Drop in to a designer review and tune the brand red live. The text input keeps non-hex CSS values (rgba, oklch) intact so authors are not forced into hex.
Outer surface and page background base.
Default raised panel fill inherited by surface primitives.
Higher-contrast panel for modal, hero, and overlay shells.
Default divider and panel border.
Emphasised border on interactive and selected surfaces.
Default body copy colour.
Captions, meta, and supporting labels.
Primary brand accent that feeds metallic red paint.
Pressed and depth tone for the primary accent.
Warning, attention, and hot-state accent.
Information, HUD, focus, and diagnostic accent.
Success, ready, and online accent.
Every primitive, one root
Each tile below reads from the same `--primitive-*` tokens scoped on the controller wrapper. Re-skin once, every primitive responds.
42
78%
Job pipeline
Diag complete
Diagnostic completion
Parts staged
Parts staged
Final QA
Final QA