Elevation is expressed through shadows, communicating the z-position of surfaces. Norbielink uses five elevation levels, plus two brand-tinted shadow variants for interactive elements.
0
Level 0
No shadow
border only
border only
1
Level 1
0 1px 3px
rgba(0,0,0,.08)
rgba(0,0,0,.08)
2
Level 2
0 4px 16px
rgba(0,0,0,.12)
rgba(0,0,0,.12)
3
Level 3
0 8px 32px
rgba(0,0,0,.18)
rgba(0,0,0,.18)
4
Level 4
0 16px 48px
rgba(0,0,0,.24)
rgba(0,0,0,.24)
Elevation levels
Each level corresponds to a specific UI context. Never skip levels — progression should always be sequential.
| Level | Token | Shadow value | Used for |
|---|---|---|---|
| Level 0 | elevation.0 |
none + 1px border |
Flat surfaces, input fields in outlined style |
| Level 1 | elevation.1 |
0 1px 3px rgba(0,0,0,.08) |
Cards, tiles, data table, icon containers |
| Level 2 | elevation.2 |
0 4px 16px rgba(0,0,0,.12) |
Dropdown menus, popovers, search results |
| Level 3 | elevation.3 |
0 8px 32px rgba(0,0,0,.18) |
Modals, dialogs, side sheets |
| Level 4 | elevation.4 |
0 16px 48px rgba(0,0,0,.24) |
Full-page overlays, tooltips at high z |
Brand-tinted shadows
Interactive elements use coloured shadows to reinforce brand identity. Only used on primary action buttons and active nav elements.
+ Start a Quote
Primary Button Shadow
0 4px 14px rgba(166,20,195,0.25)
elevation.primary
+ Start a Quote
Dark Mode Button Shadow
0 4px 14px rgba(166,20,195,0.35)
elevation.primary-dark
Marketplace
Active Nav Glow
0 0 8px rgba(166,20,195,0.4)
elevation.nav-active
Dark mode elevation
In dark mode, elevation is expressed primarily through surface color lightness rather than shadow depth. Shadows use lower opacity.
0
Background
#0F1120
1
Surface
#191D35
2
Surface Raised
#27272a