Metric card design
A recipe for building beautiful, scannable metric cards that surface key data at a glance.
Active users
12,847
↑ 8.2%
Revenue
$48.2k
↑ 3.1%
Churn
2.4%
↓ 0.3%
Structure
Each card follows a strict vertical rhythm: label, value, delta. The label uses uppercase tracking for hierarchy. The value is the hero — large, bold, brand-colored. The delta provides instant directional context with semantic color.
Color tokens
- violet #8B5CF6 — primary metric value
- pink #F472B6 — secondary metric value
- emerald-400 — positive delta
- red-400 — negative delta
Spacing
Cards sit in a responsive grid. Internal padding is p-5 (20px). The gap between label and value is mt-2 (8px). Delta sits mt-1 (4px) below the value for tight visual grouping.