Theo — Design System
One mark, two voices. Theo is drawn once — a monoline elf in a speech-bubble frame, an uptrend line breaking through it — and everything in this system is built to sit next to that mark without fighting it.
Sampled directly from the source file: background #FCF7F4, line work #000000. These are fixed brand constants, not design choices — see §2.
Theo has always had two jobs that pull in different directions, and the mark makes that literal: a hand-drawn, winking, monochrome mascot — warm, approachable, a little mischievous — carrying a precise, ruthless internal ledger. Two documents already prove the ledger half works: Theo's Book (a plain-English glossary for a novice investor) and Theo's Ledger (a verbatim decision-transparency report). This system doesn't replace either — it names what they were already doing, gives the mark a home next to them, and extends both to the surfaces they haven't reached yet: a website, slides, marketing.
Warm cream, true black line art, one confident accent color, rounded geometric type. The mark's own ground. Used for: the website's marketing surfaces, slide decks, anywhere Theo is being introduced.
Cool sage-tinted paper, a serif for reading, monospace for data, sharp edges. The documentary voice already proven twice. Used for: the trade blog, position write-ups, anything Theo is being audited.
This page performs the switch rather than just describing it — notice the ground change under your feet at the end of every major section.
One source asset today: the full lockup (icon + wordmark) on its native cream. Everything below is usage guidance built from that one file — the icon-only crop is a reference crop of the same asset, not a separate approved file, until a vector version exists.
Twelve tokens. Two are fixed constants sampled from the mark itself and never change with theme; the rest are the ledger palette, already live in production, with light and dark values.
Four faces, four jobs — not four choices made for variety. Each one answers a different question: what is this mark saying, what is this document arguing, what is this interface asking you to do, what is this number.
An 8px grid throughout. Radius is deliberate, not uniform: sharp for documents (the ledger register reads as precise because its edges are), rounded-square for brand surfaces — borrowed directly from the mark's own speech-bubble frame, not a default.
| token | value | use |
|---|---|---|
--space-1 | 4px | tight inline gaps |
--space-2 | 8px | base unit |
--space-3 | 16px | component padding |
--space-4 | 24px | card padding |
--space-6 | 48px | section rhythm |
--radius-doc | 4px | ledger cards, tables, callouts |
--radius-pill | 999px | badges, buttons |
--radius-brand | 14–22px | brand surfaces — the mark's own frame radius |
--shadow | used once, on raised brand cards only — the ledger register stays flat |
Live in production today (Theo's Ledger, Theo's Book), collected here as the shared vocabulary.
Position pos_20260828_SPY… opened at 17:34:00Z
One table to settle every "which font" question.
| surface | display face | register |
|---|---|---|
| Website hero / nav | Fredoka | Brand |
| Slide deck titles | Fredoka | Brand |
| Social / launch graphics | Fredoka | Brand |
| Trade blog, position write-ups | Fraunces | Ledger |
| Docs, reports, this page's body | Fraunces | Ledger |
| App UI, forms, buttons | Public Sans | Either |
| Tickers, timestamps, code, IDs | IBM Plex Mono | Either |
Three surfaces, same system.
Not just whether it made money. A profit on a wrong thesis never moves its confidence — only an explicable one does.
"The driver is causal and dated, not chart shape. Fed funds futures flipped intraday to price a September hike as more likely than a hold…"