Traits matrix
A small set of global option buckets. Each value resolves to a design token, and every primitive taps only the traits that make sense for it — so a change to a token flows everywhere at once.
Tone
Semantic colour intent — which hue a control speaks in. Neutral is the warm ramp, not a cool grey.
Emphasis
How loud the fill reads, from a solid call-to-action down to text-only. Outline, Ghost and Plain still carry the tone.
Size
Control size. The enum is global; each component narrows the subset it accepts.
Shape
Corner treatment, resolved to a radius token. Circle also squares the control to equal width and height.
Width
Inline natural width versus a full-width block that fills its container.
Elevation
How high a surface floats — the shadow tier it casts. Flat rests on the page; Overlay owns the screen.
Density
The spacing dial — comfortable for breathing room, compact to tighten the same content.
- Property details
- Correspondence
- Preferences
- Property details
- Correspondence
- Preferences
On surface
The ground a control sits on. It recolours see-through controls so they read on a coloured band instead of vanishing — distinct from tone, which sets the hue.
Behavioural traits
These have no visual value set — they change how a control behaves or what it renders as. They apply broadly, so they stay out of the matrix.
- state
- Interaction and status flags — disabled, loading, selected, invalid (plus rest, hover, active, focus).
- as
- The element a control renders as — button, anchor, label + input, or span.
- breakpoint
- A container-query threshold for responsive collapse — list rows, mobile full-bleed overlays.
- flush
- Drops a surface's internal padding so tables and lists sit edge-to-edge.
Primitive × trait matrix
Which primitive taps which appearance trait. A check means the primitive exposes that trait; a blank means it doesn't.
| Primitive | Tone | Emphasis | Size | Density | Shape | Elevation | Width | On surface |
|---|---|---|---|---|---|---|---|---|
| Button | ||||||||
| Link | ||||||||
| MenuItem | ||||||||
| Choice | ||||||||
| Checkbox | ||||||||
| Toggle | ||||||||
| Field / Input | ||||||||
| Badge | ||||||||
| Avatar | ||||||||
| Icon | ||||||||
| Metric | ||||||||
| Card / Surface | ||||||||
| Overlay | ||||||||
| Alert | ||||||||
| Toast | ||||||||
| EmptyState | ||||||||
| Spinner | ||||||||
| Skeleton | ||||||||
| Stepper | ||||||||
| Text/Value atoms |