Card
shadcn/ui card on DESIGN.md tokens. Surface on a hairline, 8px radius, no shadow. Padding follows the density token; the title is a real h3. The footer is the one place a card takes a second fill. A first- or last-child image sits flush against the card's edge, so it takes rounded-nested on its outer corners instead of a hardcoded radius, keeping its curve concentric with the card's own.
<Card>
<CardHeader>
<CardTitle>Pricing 24 pallets of shampoo</CardTitle>
<CardDescription>3,840 units, best before 03/2027</CardDescription>
<CardAction><TaskStateBadge state="running" /></CardAction>
</CardHeader>
<CardContent>…</CardContent>
<CardFooter><Button size="sm">Open lot</Button></CardFooter>
</Card>Anatomy
Lot card — grid
The marketplace card in the browse grid: cover (4:3, flush with the card edge, cover-cropped) on top, title link over the whole card, a three-line teaser, the units line at text-lg, date fact over availability in muted, the pills, and the price closing the card at the right with published, location and the urgency-coloured auction end beneath it.
Lot card — list
The same lot as a row on desktop: cover (4:3, flush with the card edge, cover-cropped) · facts with unit count and lot price at text-lg and the product-type date fact beside availability · a right column with the per-unit price and published on top and location beside the auction end at the bottom, coloured by urgency (today red, ≤3 days amber, later muted). Below md it stacks: cover beside title, availability and units line; teaser; price and pills; published, location and the end date as a footer.
Lot card — seller row
The same three-track row on the seller's own list (/lots/our-lots): a 144px 4:3 cover, the title over the units | price line and the last-changed time, then the per-unit price above the sale-form and lifecycle pills. The checkbox is a sibling of the card, never inside it — the card is one link into the editor, and a control nested in an anchor is invalid HTML that would navigate on click. A selected row reads as a quiet choice card: surface-1 fill and a border-strong edge around checkbox and card together, with padding so that edge never lands on the card's own hairline.
Status cards
variant = info · success · warning · danger · hold. Surface and hairline as always, plus a 3px bar on the left running from the status colour's strong tier at the top to its base at the bottom; the footer's primary action is the matching status button with an icon, ending on the right. Carrying the depth shadow stack while it is tuned (shadow-depth-tint), cast in the status colour instead of ink.
Depth (experiment)
The shadow-depth token under tuning: two ink shadows and a glow in the card's own surface colour; status cards above cast shadow-depth-tint, the same stack in their status colour. Flat card on the left for comparison.
Media card
A flush first-child image takes the card's radius (8px) minus the card's own zero padding at that edge — rounded-nested, not a hardcoded corner. The bottom corners square off against the header below, and the card clips (overflow-hidden).
Shampoo 400 ml, 24 pallets
The cover photo's top corners match the card's, not their own.
Top corners round to 8px, concentric with the card; bottom corners are square.
Compact region
Inside data-density=compact: 16px padding, description 13px; content keeps text-base (15px) and the heading is unchanged.