Surfaces & Elevation
Layered surface system for visual depth. In dark mode, higher elevation = lighter surface ('lit from front' model).
Surface Elevation
Status Tokens
The 200-Step Pattern
The signature pattern that creates subtle depth: bg → border spans ~3 steps, bg → text spans ~9 steps.
The "200-step gradient" pattern: background at step 2, border at step 5 (3 steps apart), text at step 11 (9 steps from bg). This creates subtle depth with clear readability.
Subtle depth with clear readability across light and dark modes.
Subtle depth with clear readability across light and dark modes.
Subtle depth with clear readability across light and dark modes.
Subtle depth with clear readability across light and dark modes.
Subtle depth with clear readability across light and dark modes.
Subtle depth with clear readability across light and dark modes.