One tokenized source of truth across the app, marketing site, and onboarding. Implemented as CSS variables / Tailwind theme tokens — so Figma, design, and code stay in sync, and developer handoff is a token reference, not a redraw.
A serif for character, a tight sans for the interface, a mono for anything that reads as data or a sensor value — the mono is what makes the product feel instrument-grade.
| Family | Role | Sample |
|---|---|---|
| Fraunces | Display, headings, big numbers | Calm tracks the scoreboard |
| Inter Tight | UI, body, labels | Interface and reading text |
| Geist Mono | Data, metrics, technical | HRV 68ms · CALM 78% |
| Token | Size | Use |
|---|---|---|
| display | clamp(2.6–5rem) | Hero / section headers (Fraunces) |
| h2 | 1.9–2.9rem | Section titles |
| title | 1.05–1.25rem | Card / module titles |
| body | 1rem / 1.7lh | Paragraphs |
| label | 10–11px · .2em tracking · upper | Mono labels / eyebrows |
Three signal colors carry meaning everywhere: red is brand & alert, green is calm & winning, blue is the neutral action. Neutrals build the dark, focused surface stack the product lives on.
Six base components carry most of the surface area. Each ships with rest, hover, focus, and active states already tokenized.
Motion serves comprehension or it doesn't ship. Every animation has a reduced-motion fallback that resolves to the rest state, so the product remains fully usable without it.
Use mono for any number a player reads as data. Keep the home screen glanceable; push density to detail pages. Let green mean calm/win and red mean alert/loss, consistently.
Don’t use the signal colors decoratively. Don’t stack heavy shadows — reach for glass. Don’t introduce a fourth typeface or off-token spacing.
The earliest components lived in Figma as one-off styles — Neue Montreal type, hard-coded gradients. The intent was already right (blue = action, green = connected); maturing it into tokens is what made it scale across three surfaces.