Components

Card

Cards use a white background, hairline border, and no box-shadow by default. Depth comes from the border, not shadows. Do not nest cards inside cards.

Examples

Standard card — 14px radius

14 agents

Last run 2h ago

Feature card — 24px radius

AI Orchestration

Route tasks to specialized models

Dark card — inside dark section

$24,890

Monthly usage

Radius scale

RoleRadiusUse

Compact card / input8–12pxDense product lists, inline panels

Standard card12–16pxMost cards, menus, modals

Feature card24–32pxLanding page feature sections

XL container40pxHero showcase containers

Rules

Background: #ffffff. Dark cards (#282b31) are only used inside deliberate dark sections (#0a0b0d).
Border: 1px solid rgba(10,11,13,0.08). Always present on light surfaces.
No box-shadow on standard cards. Shadows are reserved for dialogs, menus, and floating overlays.
Never nest a card inside another card.
Do not make every section a card — use section rhythm (light/dark alternation) instead.