Theme control panel
Adjust any of the 179 central design tokens — grouped by control level and category — and watch the live preview re-theme. Edits write CSS custom properties through the theme provider, never component hardcodes.
Theme control panel is a reusable Oak Flats Muffler Men UI primitive with documented states, accessibility expectations, theme behavior, and implementation evidence.
Theme control panel: Adjust any of the 179 central design tokens — grouped by control level and category — and watch the live preview re-theme. Edits write CSS custom properties through the theme provider, never component hardcodes.
Token control panel
Edit a central design token and the whole subtree re-themes. Every change writes a --primitive-* custom property through the theme provider — never a component hardcode.
Edit a `--primitive-*` token once and re-theme the entire system. Writes to the dashboard root.
Base background color behind the whole dashboard.
- Canvas background
- Everything
Primary brand red used for CTAs, accents, and meters.
- Buttons
- Meters / progress
- Controls
- Everything
Deep red used for the bottom of metallic-red gradients and hovers.
- Buttons
- Everything
Gold/amber accent used for highlights and the hover button state.
- Buttons
- Meters / progress
- Everything
Cool accent / focus-ring source and meter mid-stop.
- Meters / progress
- Focus rings
- Everything
Positive / success accent.
- Everything
Default body / paragraph text color.
- Text
Secondary / muted text and labels.
- Text
High-contrast headings and emphasized text.
- Text
Text color when sitting on a red/amber accent fill.
- Buttons
- Text
Translucent panel surface (cards, popovers).
- Panels
- Cards
More opaque panel surface for elevated layers.
- Panels
- Cards
Tertiary translucent surface tint.
- Panels
Hover tint applied over surfaces.
- Panels
- Controls
Default 1px border / divider color.
- Panels
- Cards
- Form fields
- Navigation
Stronger border for emphasized edges.
- Panels
- Buttons
Faintest divider for low-emphasis splits.
- Panels
Inset / recessed dark fill (wells, tracks).
- Controls
- Form fields
Dim scrim behind modals / drawers.
- Overlays / scrims
Darken layer over imagery for legible captions.
- Media overlays
- Overlays / scrims
Background fill for code blocks.
- Code blocks
Foreground text color in code blocks.
- Code blocks
Empty-track color behind meters / progress bars.
- Meters / progress