Surfaces & elevation

Five levels

Sunkenz 0

A recessed group — the segmented track, the layers list, an icon tile. Sunken is the one people get wrong: a GROUP of things is recessed, not raised.

Flatz 0

A card at rest. Border only, no shadow — the border is what says where it ends.

Raisedz 10

A segmented control's selected thumb, a chip floating over the map.

Overlayz 40

Popovers, menus, dropdowns. The first level that genuinely floats.

Modalz 60

Dialogs. The only level allowed to dim what is behind it.

--gd-elevation-sunkennonea recessed group — segmented track, layer list

--gd-elevation-flatnonea card at rest: border only, no shadow

--gd-elevation-raisedvar(--gd-shadow-sm)a segmented thumb, a raised tile

--gd-elevation-floatvar(--gd-shadow-float)map chrome — lighter than overlay, so tools do not read as modal over the cartography

--gd-elevation-overlayvar(--gd-shadow-md)popovers, menus, dropdowns

--gd-elevation-toastvar(--gd-shadow-lg)toasts

--gd-elevation-modalvar(--gd-shadow-xl)dialogs

Interaction states

Hover and pressed are SURFACE changes, not shadow changes. A list row darkens; it does not lift. That keeps rows quiet in a long list and stops the panel shimmering as the pointer crosses it.

Rest — surfaceHovered — surface-hoverPressed — surface-pressedSelected — surface-selected