Elevation
Four levels, and they are semantic rather than decorative: a shadow says what floats above what. A dropdown is above a card, a modal is above the page — the level follows the layer, not the taste of the moment.
- Elevation is declared in each theme separately. A translucent dark shadow gives nothing on a dark background — the surface loses one of its two channels of lift, and the page reads as one flat sheet.
Elevation
| Token | Value |
|---|---|
--gr-shadow-0--gr-shadow-0 | none |
--gr-shadow-1--gr-shadow-1 | 0 1px 2px rgba(15, 23, 42, 0.08) |
--gr-shadow-2--gr-shadow-2 | 0 8px 24px rgba(15, 23, 42, 0.14) |
--gr-shadow-3--gr-shadow-3 | 0 16px 48px rgba(15, 23, 42, 0.20) |
Role descriptions ship with the package in Russian and are not shown here yet. Translating them is a decision of its own — see ADR-0003.
Source: @feugene/granularity 0.41.0, tokens/*.json