---
category: Surfaces
---

A card is `--surface` at `--r-card` with `--ring-card` — a 1px 6% ring plus a soft
1–2px drop, no border property, and never the lit shadow, which belongs to controls.
The title is `--t-h3` at `--weight-display`; meta sits right-aligned in `--ink-mute`.
Body copy holds `--measure-body`.

Cards do not hover, do not nest, and never paint a `--machine-*` token.

```tsx
<Card title="Web analytics" meta="live">…</Card>
```