Wilson’s design language is Forensic Noir — a financial investigator’s terminal. Clean, precise, confident, a bit cinematic. Case files meet modern interfaces.
- Editorial precision — Every element earns its place. No decoration.
- Utilitarian confidence — Tools that look like they work.
- Cinematic restraint — The drama is in the data, not the chrome.
- Investigator’s clarity — Information hierarchy is everything.
- Not Swiss/International — Too neutral, too corporate.
- Not cyberpunk/hacker — Chaos undermines trust.
- Not fintech-pastel — No rounded-corner cards with gradients.
- Not brutalist — Direct, not hostile.
Trust + Edge. A bank’s reliability with an investigator’s sharpness.
| Token | Hex | Role |
|---|
money | #22c55e | Primary. Actions, confirmations, headings. |
money-light | #86efac | Highlights, selected items, links |
ledger | #e5e7eb | Primary body text |
ink | #9ca3af | Secondary text, metadata |
carbon | #374151 | Borders, separators |
slate | #1f2937 | Panels, cards |
void | #111827 | Page background |
| Token | Hex | Role |
|---|
alert | #ef4444 | Errors, anomalies, overspending |
caution | #f59e0b | Warnings, approaching limits |
lead | #06b6d4 | Info callouts, hyperlinks |
- Green is money. Use for anything the user should act on.
- Signal colors are semantic only. Never decorative.
- Dark by default.
void background, ledger text.
- Muted is most of the UI.
ink and carbon carry the bulk.
| Element | Font | Weight |
|---|
| Display/hero | Space Grotesk | 700 |
| Headlines | Space Grotesk | 600 |
| Body | Inter | 400 |
| Code/data | JetBrains Mono | 400 |
| Captions | Inter | 400 |
- No all-caps body text. Uppercase for tiny labels only.
- Left-aligned everything. Center only hero headlines.
- Numbers are first-class — currency and counts should be prominent.
- Monospace for money — amounts always in JetBrains Mono.
| Principle | Example |
|---|
| Direct, not decorative | ”You spent $340 on dining” not “Your dining expenditure totaled approximately $340” |
| Active voice always | ”Cancel this subscription” not “This subscription could be cancelled” |
| Financial verbs | Audit, track, reconcile, flag, surface, follow |
| Dry humor, sparingly | In thinking verbs and empty states. Never in error messages. |
| No jargon | ”You’re spending more than you earn” not “Negative cash flow detected” |
| Respect the mess | Never judgmental about spending. Matter-of-fact. |
- Headlines: Imperative or declarative. “Follow the money.”
- CTAs: Short verb phrases. “Get started.” “Import transactions.”
- Error messages: Say what happened, then what to do.
- Empty states: Brief, useful.
- Marketing copy: Lead with the pain.
- TypeScript strict mode
- ESM modules (
import/export, no require)
- Zod for runtime validation
- Descriptive variable names over comments
@/* path alias for imports- Bun test runner for tests