Azimuth — paper-and-ink design system.
A neutral, editorial visual language extracted from Road to Berlin and made product-agnostic. Tokens, type, icons, and fonts — no JS runtime, no framework lock-in.
Principles
- Quiet by default. One signal accent, ink-on-paper neutrals, hairline borders. The data is the hero.
- Editorial typography. Geist for sans, JetBrains Mono for numerics and labels. Tight tracking on headlines, generous tracking on eyebrows.
- 4 px rhythm. Spacing scale is a 4-pixel base. Radii are 4 / 14 / 999.
- Two themes, one surface.
prefers-color-scheme with a [data-theme] override. Tokens resolve at the root. - Tokens, not classes. Consume
var(--_) in your own CSS. Utility classes are a thin convenience layer.
What’s in the box
tokens.css
Single source of truth — color, type, spacing, motion
src/styles.css
Component class layer (.az-*)
Button
4 variants · 3 sizes
Pill
Mono caps · hairline border
StatTile
Eyebrow · data · reveal
Icon
16 SVG icons · 24 pt grid
Geist
Variable sans, 100–900
JetBrains Mono
Variable mono, 100–900