Generated from system/tokens.css by scripts/build-token-specimen.mjs. Components use the semantic tokens; primitives are the palette behind them. Switch the theme to see the dark values. Every text and control pair here passes WCAG AA in both themes (scripts/check-contrast.mjs).
Surface
surface-canvas
surface-default
surface-raised
surface-sunken
surface-hover
surface-hover-control
surface-current
surface-selected
surface-disabled
surface-inverse
surface-inverse-hover
surface-inverse-active
surface-chrome
surface-chrome-hover
surface-chrome-selected
surface-chrome-field
surface-sidebar
surface-sidebar-hover
surface-group
surface-header
surface-tooltip
surface-tint
surface-tint-hover
surface-tint-active
surface-scrim
Content
Aacontent-primary
Aacontent-secondary
Aacontent-tertiary
Aacontent-disabled
Aacontent-inverse
Aacontent-on-chrome
Aacontent-on-chrome-muted
Aacontent-on-accent
Aacontent-on-brand
Aacontent-on-primary
Aacontent-link
Aacontent-section
Aacontent-on-avatar
Line
line-subtle
line-default
line-strong
line-card
line-input
line-input-hover
line-focus
line-chrome
line-sidebar
Action
action-primary
action-brand
action-brand-hover
action-accent
action-accent-hover
action-accent-subtle
action-secondary-edge
action-secondary-edge-bottom
action-secondary-hover
action-ghost-hover
action-ghost-active
action-danger
action-danger-hover
Feedback
feedback-neutral-surface
feedback-neutral-content
feedback-success-surface
feedback-success-content
feedback-warning-surface
feedback-warning-content
feedback-danger-surface
feedback-danger-content
feedback-danger-solid
feedback-info-surface
feedback-info-content
feedback-danger-on-inverse
feedback-danger-on-chrome
feedback-success-accent
feedback-warning-accent
feedback-danger-accent
feedback-info-accent
Status
status-lead-surface
status-lead-content
status-lead-dot
status-draft-surface
status-draft-content
status-draft-dot
status-pending-surface
status-pending-content
status-pending-dot
status-booked-surface
status-booked-content
status-booked-dot
status-in-progress-surface
status-in-progress-content
status-in-progress-dot
status-active-surface
status-active-content
status-active-dot
status-outstanding-surface
status-outstanding-content
status-outstanding-dot
status-draft-mark
status-pending-mark
status-in-progress-mark
Control
control-on
control-off
control-knob
control-selected
control-check
Focus
focus-ring
Type roles
Every text style is one of these (D6). Line heights sit on the 4px grid.
| .text-display | Kitchen remodel estimate |
| .text-title-page | Kitchen remodel estimate |
| .text-title-section | Kitchen remodel estimate |
| .text-title-card | Kitchen remodel estimate |
| .text-body-lg | Kitchen remodel estimate |
| .text-body | Kitchen remodel estimate |
| .text-body-strong | Kitchen remodel estimate |
| .text-label | Kitchen remodel estimate |
| .text-caption | Kitchen remodel estimate |
| .text-caption-strong | Kitchen remodel estimate |
| .text-amount-hero | $2,973,344.19 |
Spacing
4px grid (D2). 2px is for optical nudges only, never layout.
| --space-0 | |
| --space-px | |
| --space-0-5 | |
| --space-1 | |
| --space-2 | |
| --space-3 | |
| --space-4 | |
| --space-5 | |
| --space-6 | |
| --space-8 | |
| --space-10 | |
| --space-12 | |
| --space-16 | |
| --space-20 |
Radius and depth
radius-2xs
radius-xs
radius-sm
radius-md
radius-lg
radius-xl
radius-full
shadow-raised
shadow-overlay
shadow-popover
Nested corners share a centre (D35): inside a rounded corner, the inner radius is the outer minus the gap, the gap the same across and down. The insets are those gaps, from the outer edge.
inset-card: card 16, control 8
inset-menu: menu 12, row 4
Sizing, layers and motion
| --control-height-sm | |
| --control-height-md | |
| --control-height-lg | |
| --touch-target-min | |
| --shell-top-bar-height | |
| --shell-rail-width | |
| --shell-rail-expanded-width | |
| --shell-sidebar-width | |
| --shell-bottom-bar-height | |
| --shell-top-control-height | |
| --shell-rail-item-size | |
| --shell-sidebar-header-height | |
| --shell-nav-item-height | |
| --content-max-width | |
| --content-max-width-wide | |
| --content-max-width-reading | |
| --z-base | |
| --z-raised | |
| --z-sticky | |
| --z-shell | |
| --z-scrim | |
| --z-modal | |
| --z-popover | |
| --z-toast | |
| --z-tooltip | |
| --duration-instant | |
| --duration-fast | |
| --duration-medium | |
| --ease-standard | |
| --ease-out |
Primitives
The palette. Never used directly in components.
level-yellow
level-yellow
black
black
flame-white
flame-white
cement
100
200
300
400
500
700
800
900
950
night-700
night-800
night-900
blue-print
100
200
300
400
500
600
700
800
900
950
pitch-black
100
200
300
400
500
600
700
800
900
950
night-900
night-950
cool-gray
100
200
300
400
500
600
700
800
900
950
deep-red
100
200
300
400
500
600
700
800
900
950
orange
100
200
300
400
500
600
700
800
900
950
yellow
100
200
300
400
500
600
700
800
900
950
matcha
100
200
300
400
500
600
700
800
900
950
green
100
200
300
400
500
600
700
800
900
950
blue
100
200
300
400
500
600
700
800
900
950
purple
100
200
300
400
500
600
700
800
900
raspberry
100
500
700
800
teal
100
500
800
cyan
100
500
800
avatar
1
2
3
4
5
6
7
8