Components · Extended
Stat Cards
A label, a large numeral, and an optional trend indicator — the summary-tile pattern every dashboard surface needs. Built from this system's confirmed --shadow-card elevation and semantic success/error tokens, extended because Instagram's own product doesn't expose a KPI-summary surface to evidence.
Live
Four-up grid, the most common density
Trend colour reuses the system's existing --ig-success and --ig-error tokens — no new colour is introduced for 'good' vs 'bad' movement.
Accounts reached
284.1K
Engagement rate
6.2%
New followers
1,204
Profile visits
9,842
Spec
Token reuse
Card surface
rgb(--ig-elevated-background), border 1px solid rgb(--ig-separator), --radius-lg
Elevation
--shadow-card — the same confirmed token used for editorial cards, applied here at rest (no hover-lift; stat cards are not interactive)
Padding
var(--space-5) — 24px, matching other card-shaped surfaces in this system
Label
system-12.5, --fw-medium, --ig-secondary-text, sentence case (see Voice & Writing)
Value
system-28–32, --fw-bold, --ig-primary-text, tabular-nums — abbreviated per Voice & Writing's number rules (1.2M, not 1,200,000)
Positive trend
rgb(--ig-success) icon + text — up arrow
Negative trend
rgb(--ig-error) icon + text — down arrow
Flat trend
rgb(--ig-secondary-text), horizontal dash icon — avoid implying movement that didn't happen
Comparison text
system-11.5, --ig-tertiary-text — always states the comparison window explicitly
.stat-card {
background: rgb(var(--ig-elevated-background));
border: 1px solid rgb(var(--ig-separator));
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
padding: var(--space-5);
}
.stat-card__label {
font-size: 12.5px;
font-weight: var(--fw-medium);
color: rgb(var(--ig-secondary-text));
margin-bottom: var(--space-2);
}
.stat-card__value {
font-size: 30px;
font-weight: var(--fw-bold);
font-variant-numeric: tabular-nums;
color: rgb(var(--ig-primary-text));
}
.stat-card__delta[data-trend="up"] { color: rgb(var(--ig-success)); }
.stat-card__delta[data-trend="down"] { color: rgb(var(--ig-error)); }
.stat-card__delta[data-trend="flat"] { color: rgb(var(--ig-secondary-text)); }Do
- Always pair colour with an icon — The up/down arrow (or flat dash) carries the meaning independently of colour — this keeps trend direction legible for colourblind users, consistent with this system's accessibility standard.
- State the comparison window explicitly — '+12.4% vs last 7 days', never a bare percentage — an unscoped delta is ambiguous and erodes trust in the number.
- Abbreviate large values the same way the rest of the system does — 1.2M, 284.1K — see Voice & Writing's number formatting rules. A dashboard with its own number format reads as inconsistent.
- Use tabular-nums on the value — Keeps digit widths consistent so a row of stat cards doesn't visually jitter as values update in real time.
Don’t
- Don't make stat cards interactive by default — They're a summary surface, not a button — if a card needs to be clickable (drill into detail), add a clear affordance rather than relying on the whole card being a silent link.
- Don't invent a third trend colour — Up is --ig-success, down is --ig-error, flat is neutral grey — exactly the two semantic tokens already confirmed elsewhere in this system, no new colour.
- Don't omit the flat state — A 0% delta still needs an explicit, neutral treatment — don't silently hide the trend indicator when nothing changed.