Directions · 6 tastes
Six directions. One set of tokens.
A direction is one CSS file over the shared base: fonts, radius, display weight and tracking, motion durations, and a light and dark palette checked for WCAG and APCA contrast. Components only use semantic tokens, so switching direction never touches a component.
01dark-first · r 0.375rem
Calm, exact, fast.
- bg
- surface
- line-strong
- fg-muted
- fg
- brand
02dark-first · r 0rem
Raw, fast, honest.
- bg
- surface
- line-strong
- fg-muted
- fg
- brand
03light + dark · r 0.375rem
Trustworthy, dense, data-first.
- bg
- surface
- line-strong
- fg-muted
- fg
- brand
04light-first · r 0.125rem
Literary, considered, slow.
- bg
- surface
- line-strong
- fg-muted
- fg
- brand
05light-first · r 0rem
Rational, confident, poster-like.
- bg
- surface
- line-strong
- fg-muted
- fg
- brand
06light-first · r 0.625rem
Approachable and calm, like a well-made notebook app.
- bg
- surface
- line-strong
- fg-muted
- fg
- brand
Compare
| Direction | Scheme | Display | Mono | Radius | Use for | Avoid |
|---|---|---|---|---|---|---|
| Precision | dark | Geist 500 | Geist Mono | 0.375rem | dev tools, AI/infra products, pro SaaS, technical launch pages | playful consumer brands, long-form reading |
| Terminal | dark | Geist Mono 600 | Geist Mono | 0rem | CLIs, dev infra, hacker tools, hackathons, developer launch pages | mainstream or non-technical audiences, long reading |
| Instrument | system | IBM Plex Sans 600 | IBM Plex Mono | 0.375rem | analytics, admin, finance, ops consoles, internal tools, docs for data products | marketing landing pages, big-type storytelling |
| Editorial | light | Newsreader 400 | IBM Plex Mono | 0.125rem | publications, essays, research, studios, premium brands, long-form docs | dense data apps, dashboards |
| Swiss | light | Schibsted Grotesk 700 | JetBrains Mono | 0rem | agencies, architecture, type/design tools, events, portfolios, data journalism | friendly consumer onboarding, soft brands |
| Warm | light | Bricolage Grotesque 600 | JetBrains Mono | 0.625rem | consumer SaaS, productivity/notes, education, health, community | security/infra, luxury, dense data |