Elevation

Borders over shadows. The exposed mechanism aesthetic means structure is visible through borders, not implied through shadows. Shadows are reserved for elements that float above the page plane.

Elevation Levels

FLAT / NONE

No elevation. No border, no shadow. Used when the surface itself is enough.

elevation: none
BORDER (DEFAULT)

1px solid border. The default for cards, inputs, dividers. Visible structure.

--elevation-border
BORDER STRONG

Emphasized border. Active state, focus, hover on interactive elements.

--elevation-border-strong
RAISED

Subtle warm shadow. Dropdowns, popovers, tooltips. Barely there — just enough to float.

--elevation-raised
OVERLAY

Full warm shadow. Modals, command palettes, drawers. Clearly floating above the page.

--elevation-overlay

Philosophy: Borders > Shadows

PAGE STRUCTURE = BORDERS
Card content
Card content

Borders show how the page is structured. The mechanism is exposed — you can see where one element ends and another begins.

FLOATING ELEMENTS = SHADOWS
Page content below
Floating dropdown

Shadows indicate that an element floats above the page plane. Reserved for modals, dropdowns, and popovers.

Token Reference

TOKEN VALUE USAGE
--elevation-border 1px solid var(--color-border) Cards, inputs, dividers
--elevation-border-strong 1px solid var(--color-border-strong) Active state, focus, emphasis
--elevation-raised 0 1px 3px rgba(44,40,37,.08), ... Dropdowns, popovers
--elevation-overlay 0 4px 16px rgba(44,40,37,.12), ... Modals, command palettes

KEY RULE

Shadows are always warm — rgba(44, 40, 37, ...) — never cold gray. This maintains the aged-paper warmth even for floating elements. If it is part of the page structure, use a border. If it floats above the page, use a shadow.