Design system
Every token, component, and state in the product. Figures on this page are specimens for design review, not financial data. See the dashboard mockup →
Color
Neutral ramp — 11 steps, warm gray
0
#ffffff
#ffffff
50
#faf9f7
#faf9f7
100
#f2f0ec
#f2f0ec
200
#e6e3dd
#e6e3dd
300
#d3cfc7
#d3cfc7
400
#aba69c
#aba69c
500
#837e74
#837e74
600
#5f5b53
#5f5b53
700
#46433c
#46433c
800
#2e2c27
#2e2c27
900
#1c1b18
#1c1b18
Primary & accent
--primary-500
#0f5d4d
Fir — the one action color
--primary-600
#0d5245
Hover
--primary-700
#0a4237
Active
--primary-50
#edf4f1
Subtle background
--accent-500
#b3801f
Gold — rare highlights only
Financial state — color is always paired with sign, weight, or icon
+$1,240.00
Positive
Money in. Green-teal, plus sign.
−$382.50
Negative
Money out. Brick, minus sign, heavier weight.
$95.00 ?
Uncertain
Needs a look. Ochre, question mark.
Typography
Verdict — 36px Schibsted Grotesk 500, −2%
You're okay. You kept $4,210 more than you spent.
Display — 28px
Profit & Loss, last 90 days
Title — 22px
8 transactions need a look
Body — 15px IBM Plex Sans 400
Cash basis. Transfers between your own accounts are excluded from profit, and you can always see where every number came from.
Caption — 13px
As of Aug 18, 9:41 AM
Tabular figures — columns align on the decimal
$1,111,111.11
$8,400.00
$72.05
$940,203.99
Spacing & radii
4
8
12
16
24
32
48
64
4px base. Cards round at 14px, controls at 8px, pills fully.
Buttons
primary
Hover darkens one step; focus shows the blue ring; disabled at 45%.
secondary
Hover darkens one step; focus shows the blue ring; disabled at 45%.
ghost
Hover darkens one step; focus shows the blue ring; disabled at 45%.
danger
Hover darkens one step; focus shows the blue ring; disabled at 45%.
Transaction status & amounts
AutoConfirmedUncertainUncategorized
+$1,240.00−$382.50+$4,210.00−$4,210.00
Form controls
Data table
| Date | Merchant | Category | Amount | Status |
|---|---|---|---|---|
| Aug 15 | Stripe payout | Sales & Services | +$4,821.00 | Auto |
| Aug 14 | Adobe | Software & Subscriptions | −$59.99 | Confirmed |
| Aug 13 | SQ *COFFEE CO | Meals & Entertainment | −$14.50 | Uncertain |
| Aug 12 | ACH TRNSFR 8842 | Uncategorized | −$1,200.00 | Uncategorized |
