Elevation
Four levels of depth, expressed with borders, layered shadows and — in dark mode — lighter surfaces. Depth communicates what belongs to what, and what's temporary.
Elevation tells people how things relate. Content sits on the page; menus float above the thing that opened them; dialogs interrupt everything. prfct has four levels and components choose one by role.
0. Flat
Page content, inline elements.
1. Raised
Cards, buttons with a border, inputs.
2. Floating
Menus, popovers, tooltips, select lists.
3. Modal
Dialogs, sheets, command palette.
Raised · card
Border + a whisper of shadow.
Floating · menu
Lifted above content it belongs to.
Modal · dialog
Above everything; the page waits.
Levels
Floating and modal surfaces also carry a hairline ring-edge: a translucent outline that defines the edge on any background, where a shadow alone can disappear.
Shadows
Each shadow is built from two or three layers — a tight contact shadow and a soft ambient one — and tinted with the neutral hue so it sits naturally on the surface rather than looking gray and pasted on.
Dark mode
Shadows are nearly invisible on dark backgrounds, so dark mode expresses elevation with lighter surfaces and edges instead: cards use gray-2 on a gray-1 page, popovers add a brighter hairline ring, and the raised shadow is removed entirely. The semantic shadow-raised token handles this for you.
Guidelines
- Elevation is not emphasis. Don't add shadows to make something look important; use hierarchy and color for that.
- Don't stack levels arbitrarily. A floating surface belongs to its trigger; a modal belongs to the page. Only tooltips float above a toast.
- Prefer borders at level 1. A 1px border does more for structure than a shadow, and works in every mode.