Carbon base
--primitive-carbon-weaveBase material for premium cards, icon wells, command bars, and dense panels.
Icons / actions / proof cardsSurface materials and shells
The second Shared DNA route: material recipes, panel depth, state surfaces, dense rows, proof cards, and responsive shell containers that inherit directly from Foundations.
Production answer
Surface materials and shells is a reusable Oak Flats Muffler Men UI primitive with documented states, accessibility expectations, theme behavior, and implementation evidence.
Primary CTAReview Surface materials and shells states
Generative search brief
Surface materials and shells: The second Shared DNA route: material recipes, panel depth, state surfaces, dense rows, proof cards, and responsive shell containers that inherit directly from Foundations.
Shared DNA / Cards
Card primitives cover every surface level
Cards inherit the same material tokens as panels and buttons: shell, radius, border, elevation, focus, density, media frame, and selected/pressed states. Domain cards can specialize content, but they must map back to this contract.
Foundation trace
Surfaces consume the root material system
These are not decorative cards. Each surface family maps back to Foundations, then becomes the source material for typography, actions, forms, overlays, data display, search, file browsers, motion, and responsive shells. Carbon weave, metallic red, chrome edge, panel depth, and control states all stay traceable.
Clearcoat red
--primitive-metallic-redFoundation paint token becomes deeper ruby bodywork with clearcoat and controlled reflection.
Actions / selected states / approvalsChrome edge
--primitive-chrome-edgeRestrained trim line for highlights and edges, never a full blue-glare card fill.
Glass / dividers / proof cardsPanel stack
--primitive-panel / --primitive-panel-strongDefault shell depth for route headers, workbenches, overlays, and data boards.
Overlays / data display / searchControl depth
--primitive-control-surface / --primitive-shadow-insetInteractive rows, tabs, buttons, raised states, and pressed states stay on shared depth rules.
Navigation / mobile shellsWorkbench / production use
Choose the right shell for the job
Each surface below uses the live primitive component and inherits the Foundations material tokens. Carbon carries density, metallic red carries priority, and chrome appears only as a restrained edge highlight.
- Surface families
- 3activeglass/m3/neuo
- State coverage
- 6states+empty
- Min row height
- 44pxtouch-safe
- Theme parity
- 2modeschecked
Glass job shell
Use for live operational panels over the workshop canvas.
Active bayHoist 03 · VF SS cat-back
Required proof4 photos before handover
Action slot
Metallic red approval panel
Use deep clearcoat paint for modal-adjacent approvals and queue priority.
Fitment checkedADR note attachedNoise target logged
Approval readiness82%
Pressed control tile
Use Foundation inset depth only when selection has operational meaning.
State matrix
Surface states that need proof
| State | Primitive | Check | Token |
|---|---|---|---|
| Default | GlassSurface | Layered job shell with status and action slots. | --primitive-panel |
| Raised | MaterialSurface | Elevation change keeps dense copy readable. | --primitive-surface-2 |
| Pressed | NeuoSurface | Inset treatment is reserved for selected or armed controls. | --primitive-shadow-inset |
| Empty | Card + Button | No-data copy pairs one recovery action with one evidence hint. | --primitive-control-surface |
| Success | StatusBadge | Positive state uses token green, not custom ad-hoc color. | --primitive-green |
| Blocked | Badge destructive | Fault state remains obvious in dark and light modes. | --primitive-red |
Anatomy
Slots, controls, evidence
Header, state badge, body evidence, metric band, and one primary action are the default surface contract.
No matching proof media
Try bay, rego, technician, or delivery-date filters.
Evidence / reusable card shell