Containers & surfaces
In review
The planes content lives on. Every surface either lifts off the ground or recedes into it. One consistent light source decides which.
Lift vs recede
Section titled “Lift vs recede”- Cards lift: a clear luminance step above a darker ground + drop shadow + top catch-light.
- Panels / wells recede: darker + inner shadow (the same move that defines a field).
- Ground is the darkest layer. Lift comes from the luminance gap, not from making a card light-gray (see Elevation & depth).
Elevation ladder
Section titled “Elevation ladder”Depth is ordered, not arbitrary. Pick a tier, don’t tune a shadow by hand:
- L1: resting card / panel on the canvas.
- L2: raised card, hover, popover.
- L3: sheet, drawer, dialog.
- L4: transient overlay (tooltip, menu) above everything.
Material & shape
Section titled “Material & shape”- Depth = neutral (or tinted-black) shadow + top catch-light, never a glow or colored shadow (see Design laws).
- Card radius 16, control radius 12. Surfaces read softer than the controls inside them.
Components
Section titled “Components”| Component | Status |
|---|---|
| Card | ⚠ in review |
| Panel / well | ▢ queued |
| Bottom sheet | ▢ queued |
| Dialog / modal | ▢ queued |
| Popover | ▢ queued |
| Tooltip | ▢ queued |
| Accordion / expander | ▢ queued |
| Drawer / side panel | ▢ queued |
| Divider | ▢ queued |
| App shell / scaffold | ▢ queued |