myClerkBook Design System
Typography
Headings — Outfit
H1 — The quick brown fox
H2 — The quick brown fox
H3 — The quick brown fox
H4 — The quick brown fox
H5 — The quick brown fox
Body — Geist
Large — 18px / Manage your finances clearly.
Base — 16px / Track income and expenses across currencies.
Small — 14px / Last updated 2 minutes ago.
XSmall — 12px / Caption or helper text for form fields.
Financial Amounts — tabular-nums
$12,450.00
+$3,200.00
-$890.50
Balance as of Apr 3, 2026
Monospace — Geist Mono
TXN-2026-04-03-00421
REF: 8f3a-b12c-449d
Colors
Brand
Surface
Semantic
Status
Chart Palette
Form Elements
Text Input States
Must start with TXN-
Textarea
Optional. Visible only to you.
Select
Checkbox & Radio
Checkbox
Radio Group
Switch
Custom Inputs
Badges & Chips
Base Badge Variants
Transaction Status
Plan Tiers
Category Chips (dismissible)
Currency Chips
Notification Dots
Cards
Summary Cards
Total Income
$12,450.00
Total Expenses
$8,320.50
Net Balance
$4,129.50
Transaction Cards
Freelance — Acme Corp
Netflix Subscription
Rent Payment
Side Project Revenue
Group Cards
Shopping & Dining
24 transactions
$1,840.50
Household
8 transactions
$2,100.00
Plan Cards
- 1 dashboard
- 50 transactions/mo
- Basic reports
- Unlimited dashboards
- Unlimited transactions
- Advanced analytics
- Multi-currency
- Everything in Premium
- AI document parsing
- Smart categorization
- Forecasting
Notification Cards
New income recorded
$3,200.00 from Acme Corp was added to your dashboard.
Document parsed successfully
Receipt #4421 was parsed. 3 transactions detected.
Empty State Card
No transactions yet
Add your first transaction to start tracking your finances.
Onboarding Task Cards
Complete your profile
Add your name and profile photo.
Create a dashboard
Set up your first financial dashboard.
Add your first transaction
Record an income or expense to get started.
Modals & Overlays
Interactive — click to open
Dropdowns & Menus
Dropdown Menus
Context Menu (right-click)
Command Palette
Command Palette
Search for a command to run...
Tables & Lists
| Vendor | Category | Date | Amount | Status | |
|---|---|---|---|---|---|
| Acme Corp | Consulting | Apr 1 | +$3200.00 | Income | |
| Netflix | Entertainment | Mar 31 | -$89.99 | Expense | |
| Whole Foods | Groceries | Mar 30 | -$142.30 | Expense | |
| Side Project | Freelance | Mar 28 | +$720.00 | Income | |
| Electric Co. | Utilities | Mar 25 | -$95.00 | Expense | |
Feedback & Status
Toasts (Sonner)
Inline Alerts
Progress
Skeleton
Spinners
Charts & Data
Income
$12,450.00
Expenses
$8,320.50
Net
+$4,129.50
$4,320
Total
Notifications
Notification Settings Modal
Notification Cards
New income recorded
$3,200.00 from Acme Corp was added to your Q1 dashboard.
Budget alert
You've reached 80% of your dining budget for March.
Document parsed
Receipt_March.pdf was parsed — 7 transactions detected.
Onboarding
Welcome Banner
Stepper (interactive)
Setup Checklist
Complete your profile
Add your name and profile photo.
Create a dashboard
Set up your first financial dashboard.
Add your first transaction
Record an income or expense to get started.
Upload a receipt
Use AI document parsing to extract transactions.
Tour Tooltip (interactive)
Dark Mode
Theme Toggle
Token Comparison
Light
Card surface
bg-card
Dark
Card surface
bg-card