Design kit
Clean, not overwhelming, opinionated. One typeface, one accent, plenty of room. Hierarchy comes from size and space — not heavy weights or extra colour.
Principles
- Monospace voice. One typeface everywhere — it reads precise, technical, and calm.
- One accent. A single green, used sparingly — links, labels, the line that matters. Everything else is ink on paper.
- Hairlines and air. Thin borders, white cards on warm paper, generous whitespace. No gradients, no shadows, no clutter.
- Size and space over weight. Regular and medium carry the text; semibold marks headings and labels, with bold reserved for subsection headings. Scale and spacing still do most of the hierarchy.
- Drafting-paper framing. Dashed hairlines frame the text column and divide sections; figures get corner brackets. Corners stay square — buttons and cards included. Structure you can feel, not decoration.
- Plainspoken and precise. Short, declarative sentences in plain English — no hype, no jargon, no exclamation marks. Always speak to "you," and never call Felix "it." Calm, confident, opinionated: say what's true and let the words stand.
Logomark
Top-right and bottom-left corner brackets framing a single focus square — the drafting-paper frame distilled to a mark, drawn entirely in the green accent. It always pairs to the left of the "Felix" wordmark.
- One colour throughout — brackets and focus square are the same green accent. Never recolour it or split it into two tones.
- Square corners, square line caps. No rounding, no gradient, no container tile.
- The favicon zooms in — tighter padding, heavier stroke, a single colour — so it stays legible at 16px and lifts to the brighter green on dark tabs.
- Keep clear space around the mark at least the length of a bracket arm; set it tight to the wordmark but never overlapping.
Up is green with brackets top-right + bottom-left (the "/" diagonal); down is red with brackets top-left + bottom-right (the "\" diagonal). The diagonal carries the meaning, colour reinforces it — so always pair the mark with a signed value, since at small sizes colour does most of the work.
Colour
Typography
JetBrains Mono — regular (400) and medium (500) for text, semibold (600) for headings and labels, bold (700) for subsection headings. System monospace as fallback.
Components
One complete picture
Every account in a single, daily-updated net-worth view.