Card
A surface with a border and tokenised padding. Deliberately thin — the moment a card starts owning a header, a footer and a media slot, every consumer fights its assumptions instead of composing.
Surfaces
Default sits on --bg-surface. Elevated moves to --bg-elevated and adds a shadow, for things that float above the page rather than sit in it.
Default
Sits in the page.
Elevated
Floats above it.
As a metric tile
Padding comes from --pad-card, a density token. Switch to Compact and all three tighten at once.
Total cost
$1,284.06
Runs 24h
5,880
Success rate
98.2%
Why it stays thin
Card is a box with a border, a radius and padding — all three from tokens. Composition is left to the consumer because card layouts vary more than almost anything else in a product, and a Card with fifteen props is harder to use than a div.