Card
Flat container for grouped content. Cards don't own their colour — they read the scheme of whatever section they sit inside, so the same Card renders differently on white / light / heavy / dark.
Standard
Header, content, footer. Flat surface — no shadow, no elevation.
Free returns
30 days, any reason.
Schemes
The same Card rendered inside four scheme scopes. Set the scheme once on a SectionShell (or any wrapper with data-scheme=…) and every descendant — cards, buttons, badges, text — re-resolves against the palette.
Pure white canvas. Cards sit on white with a faint border.
Free returns
30 days, any reason.
Sand canvas (brand-100). Cards are white to pop off the page.
Free returns
30 days, any reason.
Tinted canvas (brand-200). Cards are sand, one step lighter.
Free returns
30 days, any reason.
Deep forest (brand-900). Cards are brand-800, text flips to brand-50.
Free returns
30 days, any reason.
Outline variant
Transparent fill with border only. Useful inside empty states and whenever you want the card to read flush with the page behind it.
Pro tip
Pair outline cards with a tinted SectionShell for a subtle grouping effect.
Padding scale
padding controls the root vertical rhythm. Header / content / footer keep their own px; this only shifts py.
padding=sm
padding=md
padding=lg
With metadata
Title plus inline Badge. Keep the badge tight against the title; it is metadata, not a callout.
Runner v2
BestsellerForest, lime, bone.