Elevation
Glass on the page, a lift under the pointer, and five shadows and seven layers for what floats above.
Things sit at three heights. Cards are glass on the page. A clickable card lifts a little under the pointer. Menus, drawers and dialogs float above, each with its shadow and its layer, so what opened last is always on top.
On the page: glass
Cards, panels and empty states are frosted glass over a soft background, never flat white boxes. Glass carries its own soft shadow, a rim of light along the top and a blur of whatever is behind it.
Recent intros
A glass card over the page background.
- Use Card. It is glass (
liquid-glass, a 24px blur), and so are page banners and empty states. - The top bar is glass too, drawn by the app's shell with
glass-chrome, so it blurs the page scrolling under it. - Glass clips what's inside it. Menus, tips and hover cards open outside it (the package puts them at the end of the page), so they're never cut off.
The page background
Three layers, drawn once by the app's shell: a dot grid (bg-dot-grid), a light grain (bg-noise) and soft color glows (bg-glow-patches). The glows stay absolute, never fixed: a fixed layer makes Safari drop the top bar's blur.
Shadows
Five shadows, each a token with a light and a dark value (dark ones are stronger, so they still show on a dark page). Components set them; a screen never writes one.
--shadow-dropdownTips and hover cards: small things next to what you pointed at--shadow-cardA clickable card rising under the pointer--shadow-menuMenus, filter popovers, toasts--shadow-drawerSide drawers; cast to the left, away from the screen's edge--shadow-dialogDialogs, confirmations and the bottom sheet, over a dimmed pageLayers
What floats above what. Each kind of thing has one layer, so a menu opened from a drawer sits over it, and a toast shows over a dialog.
| Layer | What sits there | Set by |
|---|---|---|
| 0–10 | The page: cards, sticky table headers inside their card | z-10 at most |
| 30 | Bars that stick inside the page, like a page banner | PageBanner |
| 50 | The top bar and the bottom tabs | the app's shell |
| 60 | Drawers, opened from the page | Drawer |
| 80 | Menus, tips, hover cards, bottom sheets: they open from anything, drawers included | ActionMenu, FilterPill, InfoHint, HoverCard, BottomSheet |
| 90 | Dialogs and confirmations: they block everything under them | Dialog, ConfirmDialog |
| 100 | Toasts: a result must show over whatever caused it | Toast |
Using elevation
Glass on the page, never glass in glass
Meetings
Leah Okonkwo, 10:00 AM
Priya Natarajan, 2:30 PM
Meetings
- Never a plain white card (
bg-white,bg-[var(--surface-primary)]): it looks flat against the background. - Never a raw shadow (
shadow-lg,shadow-[0_8px_24px…]). Floating components bring theirs; a card's lift comes from Card'shref. - Never a raw layer (
z-50,z-[999]). Components bring theirs; inside a page, nothing goes abovez-10. - A clickable card lifts 2px with a soft shadow; buttons don't lift, they press (scale to 98%).
- Only one thing blocks the page at a time: a dialog dims everything under it. Drawers dim the page but leave the top bar.
Rules
Glass, once
Cards, panels, empty states and the navigation are frosted glass over the page background, never flat white boxes. A glass card never sits inside another glass card: inside a card, group things with dividers or a light bordered box.