Foundations
Elevation
Elevation is the relative distance between two surfaces along the z-axis.
Distance
The degree of elevation difference between surfaces is expressed using shadows.
8Bit Loot uses hard outline shadows only, no blur.
Default Elevations
All elements have default values for elevation at rest and dynamic elevation offsets. Certain components are placed at higher elevations than others, establishing a consistent elevation order across all components.
Breakpoints
For best results, use sparingly.
| Size | Mobile | Tablet | Desktop |
|---|---|---|---|
| sm | 4 | 4 | 4 |
| md | 4 | 6 | 6 |
| lg | 6 | 8 | 8 |
sm
Mobile
4px
Tablet
4px
Desktop
4px
md
Breakpoints
4px
Padding
6px
Margin
6px
Desktop
Breakpoints
6px
Padding
8px
Margin
8px
Small
Static Content:
Light Mode
Dark Mode
Active/Hover Content:
Light Mode
Dark Mode
Medium
Static Content:
Light Mode
Dark Mode
Active/Hover Content:
Light Mode
Dark Mode
Large
Static Content:
Light Mode
Dark Mode
Active/Hover Content:
Light Mode
Dark Mode