Foundation

Elevation

Restrained shadows and borders for Concrete surfaces.

Prefer hairlines first; add shadow only when a surface must separate from its plane.
foundation
DOM renderImage render
ElevationDefault
Surface separationFive elevation steps
Base planeborder onlyhairline
Raised tileresting cardshadow-1
Popoveranchored layershadow-2
Overlaymodal surfaceshadow-3
Lifted shellrare emphasisshadow-4

Playground

Foundation examples are token specimens. The route stays registry-led so every foundation can be rendered, linked, and screenshotted through the same catalog surface.

Loading playground

Rendered matrix

Every state maps to the same foundation render route through the state query param.

Default

Border-first elevation steps from hairline to rare lifted shells.
Surface separationFive elevation steps
Base planeborder onlyhairline
Raised tileresting cardshadow-1
Popoveranchored layershadow-2
Overlaymodal surfaceshadow-3
Lifted shellrare emphasisshadow-4
Render state

Stack

Layered planes show when elevation should replace heavier borders.
Nested surface rhythmProduct stack
Command outputHairlines handle structure. Shadow only separates floating affordances.
Render state

Public contract

The public prop table is generated from item metadata and schema-backed controls.
NameTypeDefaultDescription