Elevation | Arcadia Design

Depth

Depth is a short ladder of neutral surfaces drawn by hairlines; nothing lifts and nothing catches light.

The surfaces and their values are on Colors. In flow, everything is outline-only. Overlays add depth by blur rather than by black: a dialog's backdrop blurs the page by--backdrop-blur (8px) under a light scrim, and chrome that content scrolls under is glass (--glass with --glass-blur, 12px).

Shadows

Only floating things cast a shadow, and it is long and soft.

An open menu.

A dialog, set down over the page.

1 queued

Also check the empty state.

Reply

A tray docked to the composer.

Rename the route

Fix the flaky test

Onboarding copy

The active row: a flat pill, no lift.

Switch and segmented thumbs.

Jump to latest

A small floating pill.

At night the step comes from the surface and its edge.

Token	Use	Edge
	Menus, popovers, hover cards, tooltips and toasts.	Float edge
	Dialogs and confirm dialogs: longer and deeper, because they sit highest.	Float edge
	Trays docked to a composer.	Float edge
	Small floating pills, such as a jump-to-latest button.	Hairline
	Switch knobs and small segmented thumbs: none at night, a contact line by day.	None
	Nothing in flow casts a shadow: none in both themes, kept so a product can compose it.	None

Float edge

--float-edge is 1px of ink, 10% at night and 7% by day, around every floating surface. There is no edge light.

A popup's top-left corner at 8×. On the night page a shadow all but vanishes, so the edge carries the surface; it steps up under increased contrast.

Popups and trays draw the edge inside, above the content (.ui-popup::after), so it survives clipping and scrolling; dialogs use a border.

Stacking

Eight z-index steps. A positioner carries the stacking context, so the z-index lives there and not on the popup.

Token	Use	Value
	Overlay scrollbars and hairlines drawn above content.
	Sticky headers.
	The narrow-window drawer's scrim.
	The narrow-window drawer.
	The dialog backdrop and viewport.
	Menus, popovers and hover cards.
	The toast viewport.
	Tooltips, above everything.