GET STARTED/OVERVIEW
GET STARTED

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