Foundations · Tokens

Elevation

Shadows are tinted with ink, never neutral grey — so lift feels warm and on-brand. Five levels, used sparingly. Most of the system sits flat; elevation earns attention.

--elevation-0

Flat — on-page content, dividers by hairline only.

--elevation-1

Resting cards, subtle lift off the bone background.

--elevation-2

Raised cards, popovers, hover states.

--elevation-3

Dropdowns, menus, floating panels.

--elevation-4

Modals and dialogs — the top of the stack.

Z-index scale

Stacking order is tokenized too — never hand-pick a magic z-index.

--z-base0

--z-dropdown40

--z-sticky40

--z-overlay50

--z-modal50

--z-toast60

--z-tooltip70