The first Shared DNA route: source tokens, material recipes, typography roles, icon treatment, motion, focus, and responsive shell rules that every downstream primitive must consume.
Foundations of every primitive is a reusable Oak Flats Muffler Men UI primitive with documented states, accessibility expectations, theme behavior, and implementation evidence.
Foundations of every primitive: The first Shared DNA route: source tokens, material recipes, typography roles, icon treatment, motion, focus, and responsive shell rules that every downstream primitive must consume.
This is the first Shared DNA route. Every later section must consume these source layers before it adds variants, examples, or app-specific composition.
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.
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.
Page, section, card, control, table, overlay, and mobile skeletons.
Gutters, max widths, split ratios, rails, bands, stacks, and collapse rules.
Named sizes for buttons, icon tools, pills, cards, rows, fields, wells, and media.
Full-section taxonomy for heroes, proof, dashboards, products, forms, media, and states.
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.
Anatomy layer for page, section, card, control, table, overlay, and mobile skeletons before downstream visual styling.
page skeletons / slot anatomy / responsive wireframesStructural layout layer for gutters, max widths, split ratios, rails, bands, stacks, spacing rhythm, and responsive collapse rules.
split ratios / rail/band/stack layouts / spacing rulesComponent sizing layer for buttons, icon buttons, pills, badges, cards, rows, fields, icon wells, and media frames.
size token table / control scales / usage matrixFull-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 guidanceMaterial 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 matrixAtomic 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 textProduction 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 rulesSingle 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 snapshotsCommand 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 commandsInput 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 atlasChoice states for tabs, chips, badges, toggles, radios, checkboxes, active rows, and selected cards.
tabs / chips / togglesMovement model for sidebars, breadcrumbs, command bars, context rails, menus, and mobile navigation.
breadcrumbs / menus / railsUser response layer for alerts, toast, progress, empty, loading, success, warning, and fault states.
toasts / alerts / progressTemporary focus surfaces for dialogs, sheets, command palettes, lightboxes, wizards, and blocking flows.
dialogs / sheets / menusStructured information layer for tables, KPI cards, activity feeds, kanban, pricing, and dense dashboards.
tables / KPI cards / feedsFindability layer for global search, inline search, filters, active facets, result rows, and analytics.
search fields / filters / resultsAsset and document navigation layer for trees, grid/list views, preview panes, upload, and selection.
tree / file rows / preview paneMotion semantics for reveal, stagger, magnetic, tilt, parallax, morph, scroll, and reduced-motion paths.
motion contracts / reveal states / reduced motionResponsive app shell primitives for top bars, bottom nav, drawers, action sheets, FABs, and modal sheets.
phone shell / bottom nav / action sheetColour, type, spacing, radius, depth, focus, icon, and motion values live in the global `--primitive-*` layer before any route adds local composition.
Carbon fibre, metallic red, chrome edge, glass, and recessed fields are recipes. Chrome is a highlight rail, not a full-card finish.
Display, heading, body, mono, label, caption, numeric, and control text roles are fixed before page composition.
Desktop, tablet, and mobile shells share gutters, tap targets, page headers, route contracts, and overflow rules.
These rows are the custody layer for source values. Downstream sections can alias them into components, but should not fork the raw visual decisions.
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#40bcffFluid 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 monoA 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-lg12pxShort 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.75Responsive 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.
Wide layouts use route headers, source boards, dense grids, and rails with stable gutters and no hidden dependency context.
Two-column grids collapse before content squeezes. Cards keep token rows, icon wells, and state labels readable.
Everything stacks to one column, code and token values wrap, icon tiles shrink, and tap targets stay at control scale.
Base material for premium cards, icon wells, and command surfaces.
Primary command finish; hover can shift to metallic amber, never flat orange.
Used as a bevel, separator, or highlight band. Never promoted into an entire card skin.
Route headers, overlays, tool panels, and data-dense cards.
New primitives must declare token, material, type, state, and responsive shell usage before visual variants.
all 01 sectionsAvoid raw colour, random radius, and one-off shadows when an existing foundation token covers the same job.
CSS modulesDesktop shell, tablet shell, and mobile shell rules must be part of the primitive contract, not a later patch.
navigation + shell pagesIf an icon enters a component, its size, well, label, and hover state must match the Carbon & Red standard.
icons + actionsChrome may frame, divide, or catch light. It must not become a high-glare card body or wash out readable content.
materials + cardsEvery Shared DNA route should be able to point back to the Foundation token family or material recipe it consumes.
all downstream pages