Elevation
Multi-layer shadows calibrated per theme — and why most cards have none.
Shadows are multi-layer and calibrated per theme. Deep in dark (contrast comes from light), very subtle in light.
--shadow-xssubtle depth, raised buttons--shadow-smraised buttons--shadow-mdfloating cards--shadow-lgpopovers, modals--shadow-popcontext menus, detached/* dark */
--shadow-xs: 0 1px 0 rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.3);
--shadow-sm: 0 1px 2px rgba(0,0,0,.3), 0 2px 8px rgba(0,0,0,.2);
--shadow-md: 0 2px 4px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.3);
--shadow-lg: 0 4px 8px rgba(0,0,0,.3), 0 24px 48px rgba(0,0,0,.35);
--shadow-pop: 0 8px 32px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.3);
/* light: same structures, .04–.12 opacities */| Level | Usage |
|---|---|
xs / sm | Subtle depth, raised buttons |
md | Floating cards |
lg | Popovers (wallet, settings), modals |
pop | Context menus, very detached elements |
Depth without shadow
Most in-page cards have no shadow at all. They read via bg-[var(--surface)] border border-border. Shadow is reserved for floating layers.
This is the single easiest rule to break, because a shadow "looks nicer" in isolation. In aggregate it destroys the layering language: if a static card and a popover both cast a shadow, the shadow stops meaning "this floats above the page".
A few cards add a near-invisible shadow-[0_1px_2px_rgba(0,0,0,.035)] — that is the ceiling for
anything that does not float.
Frosted glass
Floating surfaces combine a translucent fill with a backdrop filter:
background: rgba(20, 20, 22, 0.92); /* dark */
backdrop-filter: blur(28px) saturate(1.6);
box-shadow: var(--shadow-lg);
border: .5px solid var(--border);Used by popovers (wallet, settings), the navbar, and the context menu. saturate(1.6) is what
keeps the colour behind the glass from going grey — blur alone desaturates.
Decision table
Ask one question: does this element float above the page, or is it part of it?
| Element | Floats? | Shadow |
|---|---|---|
| Panel, card, table container | no | none |
| Sticky topbar | no (in-flow) | none — separation via translucency + blur |
| Dropdown, popover | yes | --shadow-lg |
| Modal panel | yes | --shadow-lg |
| Context menu | yes | --shadow-pop |
| Toast | yes | --shadow-pop |
| Raised button | borderline | --shadow-xs at most |