FoundationUsable
Shadows
Solid elevation without blur.
System statusUsable
Three levels: 2px for small pieces, 4px for controls, 6px for panels. Dark ink in light mode and light ink in dark mode keep solid elevation visible.
Current state
Decisions that already exist and can be observed in the product.
Shadows offset right and down, without blur or spread.
Button hover reduces 4px to 2px; pressing reduces to zero. Informational cards have no hover by default.
Control
2pxRaised
4pxPanel
6pxCurrent tokens
Values present today; documenting them does not make every value final.
| Token | Value | Current use |
|---|---|---|
| --shadow-color | #1a1a1a | Elevation and shadow color |
| --shadow-compact | 2px 2px 0 var(--shadow-color) | Elevation and shadow color |
| --shadow-press | 4px 4px 0 var(--shadow-color) | Elevation and shadow color |
| --shadow-panel | 6px 6px 0 var(--shadow-color) | Elevation and shadow color |
What is missing
Gaps that prevent this foundation from being a stable rule.
There are no open gaps in the current scope of this foundation.
Next decisions
Recommended order for turning findings into a stable foundation.
- 01
Do not mix soft shadows into this system. Use shadow-compact, shadow-press or shadow-panel.