Chapter 1 — Foundation · Section 02
Surfaces & Elevation
Depth through tonal layering, not shadows. Each tier is a distinct tone value from the neutral palette (hue ~224°, chroma 2). The minimum step between a component and its container is 2 tiers — single-tier shifts are imperceptible on most monitors and fail WCAG 1.4.11. The stack adapts to the current theme automatically.
Surface Stack
Toggle the theme in the sidebar — the stack below updates automatically because every background is a design-system token, not a hardcoded value.
bg-surface-container-lowest
Deepest inset · wells, input fields
bg-surface-container-low
Sidebar · secondary panels, navigation
bg-surface-container
Standard cards · rest state
bg-surface
← PAGE BACKGROUND
bg-surface-container-high
Hover state · popovers, tooltips
bg-surface-container-highest
Floating modals · dropdowns
Hover State Architecture
Cards must jump minimum 2 tiers on hover for perceptible distinction. Transition: duration-standard ease-standard (300ms). Never use spring or bounce.
Rest
Starting tier
Hover
+5 tiers (preferred)
Active
−1 tier from rest
| State | Token |
|---|---|
| Rest | bg-surface-container-low |
| Hover (minimum valid) | bg-surface-container-high |
| Hover (preferred) | bg-surface-container-highest |
| Active / pressed | bg-surface-container |
Nesting Rules
Valid — 2+ tier gap
bg-surface (page)
bg-surface-container (card) — 2 tiers ✓
Invalid — 1 tier (imperceptible)
bg-surface (page)
bg-surface-container-low — 1 tier only ✗
Ghost Border Fallback
When a 2-tier tonal step still does not achieve 3:1 boundary contrast, supplement with a ghost border. This is an accessibility safety net — never use solid opaque borders for section separation.
No ghost border (standard)
Card without border
bg-surface-containerWith ghost border fallback
Card with ghost border
border border-outline-variant/15