Elevation & Shadows
Elevation is built from an 8-step shadow scale, mapped one-to-one to the LUSTER Figma Semantic Effects variables, and composed into four section elevation modes — Flat, Subtle, Default and Raised.
Elevation Modes
Four composed elevation modes from the LUSTER Figma Component Shadow collection (section/shadow), each built from an offset and blur on the shadow scale and rendered to scale. Shadow colour is applied at the surface level (not tokenised in Figma).
| Mode | Token | Shadow Value | Composition (X · Y · Blur) |
|---|---|---|---|
| Flat | --shadowFlat | none | x shadow/none · y shadow/none · blur shadow/none |
| Subtle | --shadowSubtle | 0 2px 4px | x shadow/none · y shadow/sm · blur shadow/lg |
| Default | --shadowDefault | 0 4px 8px | x shadow/none · y shadow/lg · blur shadow/xlg |
| Raised | --shadowRaised | 0 8px 16px | x shadow/none · y shadow/xlg · blur shadow/3xlg |
Shadow Scale
The eight-step magnitude ramp the elevation modes draw from, mapped one-to-one to the LUSTER Figma Semantic Effects scale (shadow). Values are the offset / blur size in px.
| Token | Value | Figma Variable | Use Case |
|---|---|---|---|
| --shadowNone | 0 | shadow/none | No elevation, flat surfaces |
| --shadowSm | 2 | shadow/sm | Hairline lift (Subtle offset) |
| --shadowLg | 4 | shadow/lg | Subtle blur, Default offset |
| --shadowXlg | 8 | shadow/xlg | Default blur, Raised offset |
| --shadow2xlg | 12 | shadow/2xlg | Raised surfaces |
| --shadow3xlg | 16 | shadow/3xlg | Raised blur, overlays |
| --shadow4xlg | 20 | shadow/4xlg | Popovers, dropdowns |
| --shadow5xlg | 28 | shadow/5xlg | Modals, dialogs |
Usage Guidelines
Use elevation tokens for all shadows — never hardcode values.
Raise elevation on hover to signal interactivity.
Don't rely on shadows alone for separation — use cards and borders.
Don't stack multiple shadows on a single element.