Foundations
Elevation & Shadows
Shadows are warm, layered and quiet. Elevation communicates interactivity and layer changes — never decoration. Cards use CSS filter: drop-shadow() so shadows wrap irregular shapes.
Shadow tokens, live
--shadow-sm
--shadow
--shadow-menu
Token reference
| Token / Figma style | Definition | Usage |
|---|---|---|
--shadowFigma: Selected card or tag | drop-shadow(0 2px 4px -2px rgba(0,0,0,.10)) drop-shadow(0 4px 6px -1px rgba(0,0,0,.10)) | Resting cards, selected chips |
--shadow-sm | drop-shadow(0 1px 3px rgba(0,0,0,.07)) | Top bar, small buttons |
--shadow-menuFigma: Menu shadow | drop-shadow(0 12px 32px rgba(216,135,59,.12)) | Floating menus, FAB — warm orange-tinted |
(Figma) bottom card | 0 −8px 32px rgba(0,0,0,.05) + background blur 24 | Sheets rising from the bottom edge |
The elevation ladder
| Level | Surface | z-index |
|---|---|---|
| 0 | Canvas | — |
| 1 | Card · --shadow | — |
| 2 | Sticky top bar · --shadow-sm | 100 |
| 3 | Profile drawer | 400 / 401 |
| 4 | Full-screen log pages | 600 |
| 5 | Sheets, overlays, toasts | above 600 |
Excluded — purple-tinted nav shadow
The Figma effect style
Bottom nav shadow carries a purple tint (#6E3BD814) — a Tuluna legacy artifact. It is excluded from the system. For elevated menus use --shadow-menu, which is warm orange-tinted (#D8873B1F).