Cards & surfaces that hold one figure.
BalanceCard
Available and current are two different numbers and the card shows both when they diverge. Conflating them is the most consequential copy error in consumer banking UI.
Current $43,961.50
KpiCard · KpiRow · StatCard
polarity is required with no default — up is not assumed good. basis is required too: never a bare “+5.3%” with nothing to compare against.
vs. Aug 2026
vs. Aug 2026
Up is bad. The colour follows the meaning, not the sign.
vs. Aug 2026
Not a monetary figure — renders as n/a rather than $0.00.
vs. Aug 2026
AccountCard
A connection that needs re-authentication says so and offers the remedy. A silent stale balance is worse than no balance.
First Republic
Business checkingaccount ending 4417
Mercury
Savingsaccount ending 9021
Brex
Cardaccount ending 0038
GoalCard · InvoiceCard · SubscriptionCard
Components never do arithmetic. Progress, aging bucket and annualised amount are all computed by the caller and passed in.
Northwind Traders
INV-204149 days overdue · due 12 Aug 2026
Contoso Ltd
INV-2088Due 20 Oct 2026
Datadog
Next 1 Oct 2026
38,400 US Dollar / year
monthly
AWS Enterprise Support
Next 14 Feb 2027
18,000 US Dollar / year
annual
card ending 4242
John Doe
04/29
AnomalyCard · RunwayCard
An anomaly without its baseline is noise. A runway figure without its burn assumption and zero-date is a guess — projections are drawn dashed, never solid.
AWS spend, unusual increase
53.7% above the trailing average, driven by a new us-east-2 cluster provisioned on 4 Sep. Above the $1,000.00 materiality threshold, so it requires a disposition.
11.4months
Cash 42,184 US Dollar · burn 3,700 US Dollar/mo · zero 12 Sep 2027
CashCalendar
Inflow and outflow are shown separately per day. A netted single figure hides the day a large receipt and a large payment happen to cancel.
- 1 Sep 2026, net $0.00
- 2 Sep 2026, net ($3,100.00)
- 3 Sep 2026, net $4,200.00
- 4 Sep 2026, net $0.00
- 5 Sep 2026, net ($8,900.00)
- 6 Sep 2026, net $12,400.00
- 7 Sep 2026, net $0.00
- 8 Sep 2026, net $0.00
- 9 Sep 2026, net ($3,100.00)
- 10 Sep 2026, net $4,200.00
- 11 Sep 2026, net $0.00
- 12 Sep 2026, net ($8,900.00)
- 13 Sep 2026, net $12,400.00
- 14 Sep 2026, net $0.00
- 15 Sep 2026, net $0.00
- 16 Sep 2026, net ($3,100.00)
- 17 Sep 2026, net $4,200.00
- 18 Sep 2026, net $0.00
- 19 Sep 2026, net ($8,900.00)
- 20 Sep 2026, net $12,400.00
- 21 Sep 2026, net $0.00
- 22 Sep 2026, net $0.00
- 23 Sep 2026, net ($3,100.00)
- 24 Sep 2026, net $4,200.00
- 25 Sep 2026, net $0.00
- 26 Sep 2026, net ($8,900.00)
- 27 Sep 2026, net $12,400.00
- 28 Sep 2026, net $0.00
- 29 Sep 2026, net $0.00
- 30 Sep 2026, net ($3,100.00)
Card · DashboardShell · DashboardTile
The base surface. Border at rest, shadow only when floating; 24px radius, 24px inset, and a nested radius of outer minus gap.
Treasury
Acme Holdings · consolidated · USD · accrual
A tile spanning two columns
A plain Card, composed