Elevations
Introduction
All surfaces, and components, have elevation values. The distance from the front of one surface to the front of another is measured along the z-axis using shadows.
| Name | Class | |
|---|---|---|
| Small | Small Drop Shadow |
shadow-sm |
| Default | Default Drop Shadow |
shadow |
| Medium | Medium Drop Shadow |
shadow-md |
| Large | Large Drop Shadow |
shadow-lg |
| Extra large | Extra large Drop Shadow |
shadow-xl |
| Extra extra | Extra extra Drop Shadow |
shadow-2xl |
Elevation hierarchy
All elements have default values for resting elevation and dynamic elevation offsets. Certain components are positioned at higher elevations than others, establishing a consistent elevation order across all components. For example, dialogs always appear in front of all other components.
The following table lists default values for resting elevation and dynamic elevation offsets.
| Component | Level | Value |
|---|---|---|
| Control switch | Level 1 | shadow-sm |
| Panel raised | Level 2 | shadow-md |
| Dropdown container | Level 3 | shadow-lg |
| Modal Dialog | Level 4 | shadow-2xl |
| Panel sheet | Level 4 | shadow-2xl |
Figma Tokens
Nova uses design tokens with Figma Tokens, a plugin for Figma allowing you to define and use design tokens in Figma. You can store your design tokens in JSON, sync them with a sync provider such as GitHub and define tokens even for properties that have no native support yet in Figma, such as borderRadius or spacing.