SystemPrimitive · Live
Build
ofm-7f4e21Channel
ofm/primitives@mainLatency
14 msUplink
--:--:--OFM // Design System
REV.012 · CLUSTER 04SourceTruthShared DNAFor Every App.
The 00 and 01 routes are the canonical design-system DNA for every Oak Flats Mufflermen build. Source of truth owns evidence, QA, production and theme control; Shared DNA owns the atomic components, material rules, icon language and app shells.
Coverage94.2+1.8%
Variants236+12 new
A11yAA·AAA98.7%
Bundle118kb-4.2kb
Tokens412+9
Drift0.4%stable
Atomic route contract26 DNA routes
00Source of truth
The governing DNA for every page
These routes define evidence, telemetry, QA, production, theme control and agent handoff. Future app surfaces start here before consuming Shared DNA primitives.
00.01
Overview
Entry board for every primitive family, route group, source route, and active build standard.
/ui-primitivesAtomic outputs
- Group map
- route index
- coverage summary
Proof
- Dashboard renders
- sidebar route exists
- overview links to 00/01
00.02
Telemetry
Operational signal language for health, coverage, live state, and confidence readouts.
/ui-primitives/telemetryAtomic outputs
- gauges
- signal bars
- status tiles
Proof
- Telemetry page
- hero stripe
- route health checks
00.03
Audit
Current-state inspection layer for primitive coverage, gaps, and stale surface detection.
/ui-primitives/auditAtomic outputs
- audit rows
- status pills
- coverage cards
Proof
- Audit route
- gap states
- old route removal checks
00.04
Agent guide
Agent handoff contract for how future pages consume tokens, primitives, copy, and file structure.
/ui-primitives/implementationAtomic outputs
- implementation cards
- code samples
- agent rules
Proof
- Agent guide route
- source files listed
- token usage notes
00.05
QA matrix
Repeatable responsive, accessibility, theme, Lighthouse, and asset verification matrix.
/ui-primitives/qaAtomic outputs
- viewport matrix
- theme gates
- a11y checklist
Proof
- QA route
- nine viewport targets
- light/dark checks
00.06
Production
Release gate for promoted primitives, known gaps, deployment proof, and production handoff.
/ui-primitives/productionAtomic outputs
- release gates
- coverage matrix
- handoff states
Proof
- Production route
- build checks
- browser verification
00Audit
Current primitive coverage
The existing website already has strong visual primitives, but several reusable application states were invisible before this board.
Covered
Global marketing buttons
.btn, .btn-red, .btn-chrome, .btn-ghostUsed across the homepage, SEO pages, CMS shell, and quote CTAs.
Covered
Base UI component primitives
Button, Badge, Card, Dialog, Field, Input, Select, Sheet, TabsReusable TSX primitives exist, but were missing a visible inspection board.
Covered
Site surfaces
.glass, .neumo, .seo-card, .route-panel, .review-cardBrand surfaces exist in global CSS and are now mirrored as dashboard samples.
Covered
Parts lookup workflow
search field, category filter, result card, empty stateThe production catalogue flow already contains strong domain primitives.
Added
Feedback primitives
dialog and sheet components, no visible toast or skeleton boardSnackbar, progress, skeleton, and alert states are defined on this dashboard.
Added
Domain-specific primitives
service cards and parts cards exist, quote/job primitives were implicitQuote intake, vehicle fitment, booking slot, job status, and handover tiles are now inspectable.
00Telemetry
Cluster readouts and signal integrity
Inspection surface for live design-system health: coverage gauge, channel signals, and OBD-style tiles that mirror how the workshop reads vehicle telemetry.
Workshop telemetry
Coverage94%
Latency14.0ms
Boost1.8 bar
Diagnostic tiles
Channel integrity
Token sync
Asset cache
Render budget
Render bus
01Surface map
Expanded primitive families on this local board
The stale `localhost:3000` board was hiding most of the current worktree. This surface exposes every active primitive family, including the newer CRM and KYC flows, so review starts from the real local state.
00 / Source of truth06
Source of truth
Telemetry dashboard, audit grid, and at-a-glance health.
+2 more routes01 / Shared DNA20
Shared DNA
Tokens, type, material, spacing, and motion.
+16 more routes02 / Website system06
Website system
10 production form patterns — contact, booking, quote, survey.
+2 more routes03 / Parts system03
Parts system
Cart, checkout, order, shipping, payments, gift cards for parts flows.
04 / Workshop management06
Workshop management
Quoting, parts, service, fitment, and job primitives.
+2 more routes05 / Hermes dashboards02
Hermes dashboards
Workshop manager, front desk, parts, customer, executive.
06 / Muffler Pulse02
Muffler Pulse
Bell, popover, channel matrix, rule builder, previews.
07 / CMS primitives09
CMS primitives
Verification, sanctions, tax info, beneficial owners.
+5 more routes08 / Agent UI primitives17
Agent UI primitives
Human-to-human messaging — conversations, threads, reactions.
+13 more routes09 / Marketing assets05
Marketing assets
Hero loops, ambient backgrounds, and player primitives.
+1 more routes10 / Lab01
Lab
One-off, unique, non-reusable experiments before graduation.
01Foundations
Foundations of every primitive
This is the first Shared DNA route. Every later section must consume these source layers before it adds variants, examples, or app-specific composition.
Foundation first, then build every primitive from the same source.
Foundations define the non-negotiable source: tokens, material recipes, type roles, focus states, icon treatment, and responsive shells. Surfaces, typography, icons, theming, actions, forms, selection, navigation, feedback, overlays, data display, search, file browsers, motion, desktop shells, and mobile shells all build from this layer.
01.01First shared route20Shared DNA routes0Orphan style rules
The missing core DNA is now explicit
Foundations remains the source route, but these four boards define the practical build basis that every later primitive needs: skeleton, layout, sizing, and full-section composition.
01.02
Wireframes
Page, section, card, control, table, overlay, and mobile skeletons.
slot anatomywireframesresponsive skeletons
01.03Layouts
Gutters, max widths, split ratios, rails, bands, stacks, and collapse rules.
split ratiospage rhythmrail/band patterns
01.04Sizing
Named sizes for buttons, icon tools, pills, cards, rows, fields, wells, and media.
control scalecard scalemedia scale
01.05Section patterns
Full-section taxonomy for heroes, proof, dashboards, products, forms, media, and states.
section taxonomypromotion gateslibrary boundary
Every Shared DNA primitive starts here
Foundations is the source section. The routes below can add variants and implementation examples only after they inherit a Foundation token, material, motion, focus, icon, or responsive shell rule.
Wireframes
Anatomy layer for page, section, card, control, table, overlay, and mobile skeletons before downstream visual styling.
page skeletons / slot anatomy / responsive wireframesLayouts
Structural layout layer for gutters, max widths, split ratios, rails, bands, stacks, spacing rhythm, and responsive collapse rules.
split ratios / rail/band/stack layouts / spacing rulesSizing
Component sizing layer for buttons, icon buttons, pills, badges, cards, rows, fields, icon wells, and media frames.
size token table / control scales / usage matrixSection patterns
Full-section taxonomy for hero, proof, feature, process, pricing, FAQ, CTA, footer, dashboard, workshop, product, form, media, state, and utility sections.
section taxonomy / promotion gates / BlockManifest-compatible guidanceSurfaces
Material grammar that consumes Foundations tokens to produce carbon, glass, chrome, panel, card, recessed, raised, pressed, selected, media, and recovery shell states.
card primitive contract / material trace / surface families / state matrixTypography
Atomic type roles inherited from Foundations for display, heading, body, mono, label, caption, numeric, controls, dense tables, and motion-safe kinetic text.
Foundation token inheritance / type role components / contained kinetic textIcons
Production Carbon & Red icon language, supplier-logo treatment, and downstream sizing, stroke, well, label, hover, focus, and reduced-motion rules.
Carbon & Red card and glyph wells / source-backed supplier logo plates / usage rulesTheming
Single theme and style-profile governance section. Foundations stay the source, theme presets set palette and typography, style profiles set material/radius/shadow/action/field/focus/motion treatment, and local editors remain scoped until promoted.
token source ledger / dashboard-root presets / style-profile bridge / theme control entrypoint / scoped token editors / theme export snapshotsActions
Command and CTA layer that promotes the red primary button as the default approval CTA, defines theme-matched alternatives, and treats site, ActionButton, liquid, metal, segmented, toolbar, icon, destructive, shadcn, size, and pill buttons as token-driven adapters.
red CTA / theme alternatives / small/medium/large buttons / button pills / ActionButton taxonomy / icon tools / segmented controls / toolbar actions / destructive commandsForms
Input grammar that consumes Wireframes, Layouts, Sizing, Surfaces, Typography, Actions, Selection, and Feedback before rendering labels, hints, fields, selects, errors, validation, and submit states.
label/hint/error roles / field/select anatomy / submit rail / validation states / form family atlasSelection
Choice states for tabs, chips, badges, toggles, radios, checkboxes, active rows, and selected cards.
tabs / chips / togglesNavigation
Movement model for sidebars, breadcrumbs, command bars, context rails, menus, and mobile navigation.
breadcrumbs / menus / railsFeedback
User response layer for alerts, toast, progress, empty, loading, success, warning, and fault states.
toasts / alerts / progressOverlays
Temporary focus surfaces for dialogs, sheets, command palettes, lightboxes, wizards, and blocking flows.
dialogs / sheets / menusData display
Structured information layer for tables, KPI cards, activity feeds, kanban, pricing, and dense dashboards.
tables / KPI cards / feedsSearch
Findability layer for global search, inline search, filters, active facets, result rows, and analytics.
search fields / filters / resultsFile browser
Asset and document navigation layer for trees, grid/list views, preview panes, upload, and selection.
tree / file rows / preview paneMotion
Motion semantics for reveal, stagger, magnetic, tilt, parallax, morph, scroll, and reduced-motion paths.
motion contracts / reveal states / reduced motionMobile shell
Responsive app shell primitives for top bars, bottom nav, drawers, action sheets, FABs, and modal sheets.
phone shell / bottom nav / action sheetToken Registry
Colour, type, spacing, radius, depth, focus, icon, and motion values live in the global `--primitive-*` layer before any route adds local composition.
SurfacesTypographyThemingActions
Material Recipes
Carbon fibre, metallic red, chrome edge, glass, and recessed fields are recipes. Chrome is a highlight rail, not a full-card finish.
SurfacesOverlaysData displayFile browser
Type Roles
Display, heading, body, mono, label, caption, numeric, and control text roles are fixed before page composition.
TypographySearchNavigationFeedback
Responsive Shells
Desktop, tablet, and mobile shells share gutters, tap targets, page headers, route contracts, and overflow rules.
NavigationOverlaysMobile shellForms
Atomic variables that downstream sections must consume
These rows are the custody layer for source values. Downstream sections can alias them into components, but should not fork the raw visual decisions.
Colour Channels
The minimum semantic palette every primitive consumes before custom state colour.
--primitive-canvas#050508--primitive-panelrgba(16,16,22,.82)--primitive-text-strong#ffffff--primitive-red#e62028--primitive-amber#ffc14f--primitive-teal#40bcffType Roles
Fluid only where hierarchy needs it; UI chrome stays predictable and compact.
--primitive-displayclamp(3rem, 1rem + 7vw, 7.5rem)--primitive-h1clamp(2.25rem, 1.2rem + 4vw, 4rem)--primitive-text-base0.9375rem--primitive-text-2xs0.625rem--primitive-font-displayOswald / Anton--primitive-font-monotechnical monoSpace + Radius
A 4px base with small radii keeps the product dense, mechanical, and repeatable.
--primitive-space-14px--primitive-space-416px--primitive-space-832px--primitive-radius-sm4px--primitive-radius-md8px--primitive-radius-lg12pxMotion + Focus
Short interaction motion, visible focus, and reduced-motion exits are part of the foundation.
--primitive-duration-fast150ms--primitive-duration-normal240ms--primitive-ease-outcubic-bezier(.16,1,.3,1)--primitive-focus-ring#40bcff--primitive-focus-shadow0 0 0 3px--primitive-icon-stroke1.75Shell rules are inherited with the tokens
Responsive behavior is not a cleanup pass. It is part of the Foundation contract consumed by navigation, forms, overlays, data display, file browser, search, and the mobile shell route.
Desktop workbench
Wide layouts use route headers, source boards, dense grids, and rails with stable gutters and no hidden dependency context.
page headersource boardside raildata grid
Tablet stack
Two-column grids collapse before content squeezes. Cards keep token rows, icon wells, and state labels readable.
two-up cardswrapped chipsscroll-safe tablescompact panels
Mobile shell
Everything stacks to one column, code and token values wrap, icon tiles shrink, and tap targets stay at control scale.
single columnwrapped codebottom actionsmodal sheets
Carbon Weave
Base material for premium cards, icon wells, and command surfaces.
Metallic Red
Primary command finish; hover can shift to metallic amber, never flat orange.
Chrome Edge
Used as a bevel, separator, or highlight band. Never promoted into an entire card skin.
Obsidian Glass
Route headers, overlays, tool panels, and data-dense cards.
Rules every next section inherits
Source before surface
New primitives must declare token, material, type, state, and responsive shell usage before visual variants.
all 01 sectionsNo orphan styling
Avoid raw colour, random radius, and one-off shadows when an existing foundation token covers the same job.
CSS modulesResponsive from origin
Desktop shell, tablet shell, and mobile shell rules must be part of the primitive contract, not a later patch.
navigation + shell pagesPremium icon parity
If an icon enters a component, its size, well, label, and hover state must match the Carbon & Red standard.
icons + actionsChrome restraint
Chrome may frame, divide, or catch light. It must not become a high-glare card body or wash out readable content.
materials + cardsInheritance trace
Every Shared DNA route should be able to point back to the Foundation token family or material recipe it consumes.
all downstream pagesForms system / Source of truth
Every form family has a home.
This atlas promotes the existing gallery forms into the canonical board, fills the missing operational families, and gives every consuming route a stable pattern anchor.
- Total families
- 23
- Full demos reused
- 10
- Compact demos added
- 13
- Intent types
- 10
Fields inherit the foundation before demos render
Forms now expose the atomic grammar downstream pages must consume: labels, hints, fields, selects, errors, submit rails, validation states, and the exact Shared DNA routes they depend on.
01WireframesForm sections inherit page, card, control-row, overlay, and mobile anatomy.02LayoutsField grids, sticky metadata, two-column panels, and mobile stacks follow the approved splits.03SizingFields, rows, icon wells, buttons, chips, and cards use named component-size tokens.04SurfacesForm panels, field wells, focus surfaces, and success/error rows inherit material recipes.05ActionsSubmit, reset, upload, save, verify, and queue commands use the canonical action layer.06SelectionRadio cards, chips, toggles, select menus, and active filters share choice-state taxonomy.07FeedbackValidation, pending, success, warning, and fault responses use one feedback language.
Label
Every control has a visible label or fieldset legend before the control surface.
--primitive-text-2xs / --primitive-font-monolabel text, legend, group labelHint
Helper text is connected with aria-describedby and never replaces an error.
--primitive-body / --primitive-mutedhint text, format note, privacy noteField
Text, email, password, textarea, date, and search controls inherit field height, radius, focus, and recessed surface.
--primitive-size-field-mdinput, textarea, field wrapperSelect
Menus, radio groups, chips, toggles, and native selects use one choice-state grammar.
--primitive-size-field-mdselect, radio cards, chips, togglesError
Invalid states reserve message space, expose role or aria-invalid semantics, and keep focus visible.
--primitive-red / --primitive-focus-ringerror row, invalid border, status copySubmit
Submit and reset actions use Actions DNA for sizing, disabled state, destructive state, and success transition.
--primitive-size-command-smsubmit rail, reset command, local success status01
Field anatomy
Label, control, hint, error, and command slots stay present across every form family.
Hint connected with aria-describedby.
Validation message occupies a reserved slot.
02
State grammar
Validation and submission states use Feedback, Surfaces, Actions, and Selection tokens.
IdleSurfacesField surface is recessed and readable before interaction.
FocusSurfacesFocus ring uses the shared focus token and does not shift layout.
FilledSelectionFilled controls keep label, value, and helper text visible.
InvalidFeedbackError copy appears in the reserved message slot.
SubmittingActionsSubmit command owns pending feedback and keeps secondary actions available when safe.
SuccessFeedbackSuccess state is local to the demo unless a production route wires a real endpoint.
03
Pattern inventory
Every live demo is mapped to a domain, intent, field list, consumer routes, and state list.
23canonical families
10gallery demos reused
13compact demos added
Where each form belongs
Domains match the UI primitives board: public website, workshop, parts, commerce, CMS, operations, governance, agent surfaces, and marketing.
Website
- ContactCapture
- Quote requestCapture
- FeedbackSurvey
Workshop
- BookingSchedule
- Vehicle intakeCapture
- Quote authoringCompose
- CalendarSchedule
Parts
- Search filterSearch
Commerce
CMS
Operations
- Supplier opsUpload
- RosterSchedule
Governance
- ComplianceVerify
- Access rulesAuthorize
Agent
Marketing
- NewsletterCapture
- SurveySurvey
- Email builderCompose
Canonical patterns
All demos stay local to the board. They submit to component state only, so they can be exercised without touching production APIs or CMS data.
01Gallery canonical
Workshop contact
Name, email, phone, subject, message, attachment slot, and consent.
Open full route02Gallery canonical
Newsletter signup
Compact email capture with success state and unsubscribe promise.
Open full route03Gallery canonical
Workshop booking
Rego, date picker, slot selection, drop-off mode, callback, and confirmation.
Open full route04Gallery canonical
Vehicle intake
Rego lookup, make/model/year, engine, body, fuel, photo tray, and notes.
Open full route05Gallery canonical
Quote request wizard
Three-step vehicle, service multi-select, contact, and audience flow.
Open full route06Gallery canonical
Address capture
Country, street autocomplete, suburb, state, postcode, and delivery override.
Open full route07Gallery canonical
Search and filter
Keyword, price range, category, vehicle, supplier toggle, and sort menu.
Open full route08Gallery canonical
File upload
Drop zone, file list, progress, type/size validation, remove, and submit.
Open full route09Gallery canonical
Feedback and review
Star rating, category, title, message, photo attachment, and anonymity toggle.
Open full route10Gallery canonical
Survey and NPS
Recommendation scale, multi-select improvements, ranked list, notes, and slider.
Open full route11Atlas compact
Auth and security
Login, password, OTP, recovery, session trust, and security consent.
12Atlas compact
Account and team settings
Profile, team invite, role, bay assignment, notification preference, and save state.
13Atlas compact
Billing, payment, and tax
Card details, billing address, ABN, invoice contact, tax toggle, and receipt email.
14Atlas compact
Quote authoring and signature
Line item editing, discount, terms, signer, signature method, and acceptance.
15Atlas compact
Calendar scheduling
Date range, time, recurrence, bay, technician, and conflict check.
16Atlas compact
Compliance, KYC, and consent
Identity evidence, declaration, consent, data request, policy version, and signoff.
17Atlas compact
Supplier operations
Catalog upload, SKU creation, order acknowledgement, invoice, and compliance cert.
18Atlas compact
Roster and workshop ops
Time off, shift swap, technician profile, bay assignment, and training signoff.
19Atlas compact
Builder, editor, and admin rules
Field builder, validation rules, conditional logic, workflow variables, and admin query filters.
20Atlas compact
Support and comment composer
Reply body, internal note, macro picker, mention picker, priority, and resolve toggle.
21Atlas compact
Commerce checkout
Customer, shipping, delivery, payment method, order notes, and terms acceptance.
22Atlas compact
Notifications and permissions
Notification channel rules, quiet hours, role scope, access request, and approval reason.
23Atlas compact
Email campaign builder
Subject, preheader, audience, personalization token, test recipient, and send check.
04Selection
Tabs, badges, chips, toggles, and checked states
Selection primitives are standardized for route filtering, job status flags, and shop-floor workflows.
Tabs
Keyboard-readyShared job summary with vehicle, service, and quote state.
Badges
Status flagsBookedFitment OKAwaiting photosSupplier issueDraft
Check and radio rows
FormsToggle chips
Filter rail05Surfaces
Cards, panels, lists, tables, and empty states
Surfaces stay compact and scannable so the brand effect does not overpower parts, services, or operational status.
Dense list
01Leak inspection
02Bracket repair
03Tip alignment
04Handover call
Spec table
PipeMaterialStatus
3 inchStainlessApproved
2.5 inchMild steelQuote
No matching parts
Shorten the part number, vehicle model, supplier, or category filter.
07Feedback
Dialog, sheet, alerts, snackbar, progress, and skeletons
These were the main missing visible primitives from the current website audit.
Dialog and sheet
InteractiveAccordion disclosure
Content statesUnderside, rear tip angle, current muffler, and engine bay shots.
Supplier media exception
Placeholder image is approved only after supplier outreach is logged.
Quote savedDraft is ready for customer confirmation.
Production readiness82%
08Workshop UX
Domain primitives for Oak Flats Mufflermen
These are the last 20 percent from the video: reusable components specific to this workshop, not generic SaaS controls.
Quote path
5 steps- 1Vehicle details
- 2Sound target
- 3Fitment check
- 4Quote approval
- 5Workshop slot
Custom exhaust
Mandrel bends / stainless / tuned sound
Muffler repair
Rattle, leak, bracket, hanger, weld
Extractors
Headers / collectors / clearance check
Manta 3 inch stainless system
Manta / Complete systems / RRP $1,289.00
Real imageFitment note
Next slot
Tue 8:30 AMDrop off for inspection, quote lock, and weld bay allocation.
09Production
Coverage matrix and release gates
This matrix turns the dashboard into an audit surface: every primitive family has a current source, a reusable target, and a production gate.
Primitive matrix
FamilyPrimitivesCurrent sourceGate
FoundationsColour, type, spacing, radius, elevation, material, motionglobals.css, mufflermen.css, dashboard tokensReadable with shaders off and reduced motion enabled
ActionsPrimary, secondary, chrome, ghost, icon, destructive, disabledglobal .btn classes, Base UI Button, and the ui-primitives button familyStable 44px targets, focus ring, hover, press, disabled states
FormsInput, textarea, field group, error, select, checkbox, radiosrc/components/ui plus parts lookup controlsLabels, descriptions, aria-invalid, keyboard operation
SelectionTabs, badges, filter chips, checked rows, segmented controlBadge, Tabs, current parts filters, dashboard samplesSelected state is visible without relying only on colour
SurfacesCard, panel, list, table, media stub, empty state.glass, .neumo, .seo-card, route-panel, CardCompact, non-nested, scannable, no text collision
NavigationLeft rail, top nav, breadcrumb, command bar, context railhomepage nav, SEO nav, dashboard railWorks as app shell and public-site navigation pattern
FeedbackDialog, sheet, alert, snackbar, progress, skeleton, disclosureDialog, Sheet, Accordion and dashboard-only samplesInteractive primitives are keyboard accessible and visible
Workshop UXQuote path, service card, parts card, job slot, fitment notehomepage, SEO pages, parts lookup, dashboard domain samplesReusable across service, parts, location, and quote surfaces
Release gates
Production standard- 01 No generic landing-page wrapper; the first screen is the primitives product surface.
- 02 All current website primitive sources are named in the audit matrix.
- 03 Base UI primitives and global Mufflermen CSS primitives are both represented.
- 04 Domain-specific workshop primitives exist beside generic UI primitives.
- 05 Responsive layout has desktop and mobile evidence, including no clipped headline text.
- 06 Motion is decorative only, has reduced-motion CSS, and does not carry meaning.
- 07 The route is noindex and can be inspected without changing customer-facing pages.
- 08 Lint, TypeScript, build, and live route checks must pass before calling complete.
10Sandbox
Experiment lane before production rollout
Sandbox primitives isolate uncertain presentation choices without destabilizing the current homepage, SEO pages, or parts catalogue.
Live quote amount
Test animated estimate ranges without changing production price cards.
From$680inspection required
Compliance marker
Trial ADR/legal sound flags for performance services and handover notes.
Legal noteNoise, clearance, and emissions reviewed.
Customer update
Prototype SMS/email message states before wiring delivery automation.
Photo receivedWe can quote this from the current underbody shot.