Recently opened
Project budget — 142 line items across 8 cost categories.
Edited 11 February
Components
Card.
A surface container built on the elevation tokens. On the paper-white canvas a card is defined by a hairline border and a radius — never a drop shadow alone. Shadow is reserved for things that genuinely float (drawers, dialogs, popovers).
Anatomy
A header, a body, and an optional footer for actions.
Background
var(--surface)Border
1px solid var(--line)Radius
var(--radius-3)Section divider
1px solid var(--hairline)Body padding
16px 18pxResting vs. interactive
A static card stays flat. A clickable card lifts on hover with --shadow-card.
Resting
Border only — the default.
Interactive (hover)
Lifts when the whole card is a link or button.
Do & don't
Do — a hairline border carries the edge on the canvas.
Don't — a heavy shadow on a resting card reads as floating.