01 / Shared DNA

Theme playground

Select a preset here and every UI primitive route inherits the same dashboard-root token skin. Individual token edits stay scoped to the playground until promoted.

Production answer

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

Primary CTAReview Theme playground states
Generative search brief

Theme playground: Select a preset here and every UI primitive route inherits the same dashboard-root token skin. Individual token edits stay scoped to the playground until promoted.

Shared DNA contract

Themes inherit before they override

This route is the cascade proof for completed Shared DNA work. It does not replace Foundations, Surfaces, Typography, or Icons. It shows which upstream rules are consumed, which token sources are authoritative, and where the local playground is intentionally scoped.

Foundations

Token base

Canvas, accent, text, focus, spacing, radius, motion, and icon scale still originate in the shared .dashboard token block.

  • --primitive-canvas
  • --primitive-red
  • --primitive-space-*
Surfaces

Material recipes

Panel, border, carbon weave, metallic red clearcoat, amber hover, chrome edge, and recessed depth remain derived from surface rules.

  • --primitive-panel
  • --primitive-metallic-red
  • --primitive-chrome-edge
Typography

Role-safe type

Theme presets can swap approved font stacks, but type roles, line-height, tracking, and dense-table scale stay owned by Typography.

  • --primitive-font-display
  • --primitive-font-body
  • --primitive-text-sm
Icons

Icon material boundary

Theming exposes icon foreground proof while supplier marks and Carbon and Red wells keep the icon route's sizing, stroke, and plate rules.

  • --primitive-icon-obsidian
  • --primitive-icon-stroke
  • supplier plates
Theme source reconciliation

Four sources, one cascade boundary

The CSS variable block remains the base source. The control catalog and style profiles are existing Source of Truth systems. Theming uses a dashboard-root preset scope for route-wide skins, with local editors reserved for proof and handoff snapshots.

CSS variable basesrc/app/ui-primitives/ui-primitives.module.css

The .dashboard scope owns the full --primitive-* contract, with light and dark palettes switched by html[data-primitive-theme].

179 catalogued controls
Theme control catalogsrc/app/ui-primitives/builder/theme-catalog

The 00 Theme control route reads this metadata for labels, groups, levels, and controllable surfaces. Theming references it as the canonical control inventory.

Source route, not a duplicate list
Style profilessrc/app/ui-primitives/builder/theme/profiles

The 00 Style picker applies token-override profiles through ThemeProvider. This page documents that boundary instead of forking profile persistence.

5 approved profiles
Scoped playgroundsrc/app/ui-primitives/components/theming/theme-tokens.ts

Theme presets now persist through the dashboard-root primitive shell, while local token editors remain wrapper-scoped for safe inspection and export snapshots.

6 presets / 19 tokens
Theme presetMufflermen Classic

Default Oak Flats palette — red / amber / teal on obsidian.

mufflermen-classicStyle profileCarbon Pro

Machined carbon-fibre surfaces, metallic-black panels, metallic-red CTAs with amber hover, and chrome hairlines.

carbon-pro
Theme presetClassic Glass

Attached classic light-glass workshop skin — dark shell, chrome frost, red signal.

classic-glassStyle profileGlass Garage

Frosted layered transparency — translucent glass panels, soft hairlines, floating shadows, red/yellow accents glowing through the frost.

glass-garage
Theme presetPerformance Teal

Teal-forward dyno-shop palette — cooler surfaces, electric accents.

performance-tealStyle profileMotorsport

Aggressive race livery — deep matte carbon, hard red/amber accent lines, sharp edges, and snappy reactive motion.

motorsport
Theme presetHeritage Cream

Warm cream and oxblood — period-correct heritage muffler shop.

heritage-creamStyle profileClean Light

Premium light mode — airy panels, crisp hairlines, restrained shadows, and disciplined red/amber accents on a pale editorial canvas.

clean-light
Theme presetBrutalist Mono

Concrete greys with a single acid yellow accent.

brutalist-monoStyle profileNeo Workshop

Neumorphic soft-extruded controls — raised and pressed surfaces sculpted from dual-light inset shadows, strong contrast, quiet red/amber accents.

neo-workshop
Theme presetGlacier

Icy cyan, cobalt and chrome — clinical and bright.

glacierStyle profileClean Light

Premium light mode — airy panels, crisp hairlines, restrained shadows, and disciplined red/amber accents on a pale editorial canvas.

clean-light
Foundations6 tokens

Root color and scale tokens inherited before this route adds scoped overrides.

  • canvas
  • body
  • red
  • amber
  • teal
  • green
Surfaces5 tokens

Panel, line, red depth, and material treatment consumed by the preview.

  • panel
  • panel-strong
  • line
  • line-strong
  • red-dark
Typography7 tokens

Approved font stacks and text emphasis tokens without rewriting type roles.

  • muted
  • text-strong
  • font-display
  • font-display-alt
  • font-body
  • font-mono
  • font-mono-techno
Icons1 tokens

Icon foreground token proof while source-backed logo rules remain protected.

  • icon-obsidian
Theme workbench

Themes and style profiles live here

Theme presets, token controls, inspectors, exports, and style-profile overlays are now gathered under the Theming section. The sidebar no longer splits theme control and style profiles into separate source-truth destinations.

Global token editorTheme control panel

179 catalogued token controls grouped by level and category.

Profile overlayStyle profiles

5 profile overlays for material, radius, shadow, fields, focus, and motion.

Theme presetsPreset cards

6 approved palette and type presets that drive the dashboard-root shell.

InspectionToken inspector

Scoped proof surface for inspecting inherited and overridden --primitive-* values.

HandoffExport snapshots

Promotion handoff for the current preset and local controller override state.

How it works

Preset cards persist a ThemePresetId and the shared .dashboard root applies the typed --primitive-* variables for every route. Local colour and font pickers still write only to their controller wrapper, so experiments do not overwrite the global shell.

Primitive route

Token colour picker — tune individual colour tokens with native colour and CSS-value inputs. Inspect primitive states

Cascade preview

Every primitive, one root

Each tile below reads from the same `--primitive-*` tokens scoped on the controller wrapper. Re-skin once, every primitive responds.

Hero

Oak Flats workshop

Production-floor primitives styled by the token cascade. Tap a preset to see the whole subtree re-paint.

Active bookings+8%
42
Last 14 days
Workshop load-3%
78%
Trend$182,400Revenue this monthMonthly revenue trendTrend over 13 samples ranging from 12.0 to 52.0.
Crew
Capacity
Hoist utilisation 68 percentRadial meter at 68 percent.68%Hoists
3 of 4 hoists in use
Throughput

Job pipeline

Diag complete
Diagnostic completion
Parts staged
Parts staged
Final QA
Final QA