--- title: "The six directions (craft)" description: "Pick exactly one. Each direction file sets the same semantic roles (light + dark), so components never change when the direction does." canonical: https://void-design.vercel.app/docs/craft/directions lastModified: 2026-09-16 --- # The six directions Pick exactly one. Each direction file sets the same semantic roles (light + dark), so components never change when the direction does. Source of truth: `packages/tokens/css/directions/.css` (template copy: `src/styles/void/directions/.css`). Read its header comment before building: it lists fonts, signature and don'ts. ## Switching or installing a direction ```css /* src/app/globals.css — order matters */ @import "tailwindcss"; @import "../styles/void/base.css"; @import "../styles/void/directions/editorial.css"; /* exactly one */ ``` ```tsx // src/app/layout.tsx — variable names MUST match the var() hooks in the direction file import { Newsreader, IBM_Plex_Mono } from "next/font/google"; const serif = Newsreader({ subsets: ["latin"], variable: "--font-newsreader", display: "swap", style: ["normal", "italic"] }); const mono = IBM_Plex_Mono({ subsets: ["latin"], weight: ["400", "500"], variable: "--font-plex-mono", display: "swap" }); // ``` Then set `direction: "editorial"` in `src/site.config.ts` (theme-color, OG image and manifest read it) and `theme.default` to the direction's scheme. ## Knobs each direction sets | Knob | precision | editorial | swiss | warm | terminal | instrument | |---|---|---|---|---|---|---| | `--radius` | 6px | 2px | 0 | 10px | 0 | 6px | | `--weight-display` / `--weight-heading` | 500 / 500 | 400 / 450 | 700 / 700 | 600 / 600 | 600 / 600 | 600 / 600 | | `--tracking-display` (× base tracking) | 1 | 0.35 | 0.9 | 0.6 | 1.1 | 0.5 | | `--label-tracking` | 0.08em | 0.1em | 0.06em | 0.06em | 0.12em | 0.06em | | durations fast / base / slow / slower | 100/150/200/450 | 150/250/400/600 | 0/100/150/300 | 150/220/320/500 | 60/100/150/300 | 100/150/200/300 | | `--grain-opacity` light / dark | 0 / 0.035 | 0.045 / 0.06 | 0 / 0 | 0.03 / 0.05 | 0 / 0.04 | 0 / 0 | | brand (light) | indigo `oklch(54.5% .19 272)` | oxblood `oklch(46% .15 22)` | signal red `oklch(56.5% .22 29)` | clay `oklch(55% .155 40)` | amber `oklch(80% .165 72)` (dark text on solids) | blue `oklch(53% .17 255)` | | default scheme | dark | light | light | light | dark | system | | extra | — | — | `--ease-out: linear` | — | — | `--section-y` 40→72px, `--container-page` 90rem | Serif and geometric faces need less negative tracking, which is why editorial is 0.35× and terminal 1.1×. --- ## precision — calm, exact, fast - **Use:** dev tools, AI/infra products, pro SaaS, technical launch pages. **Avoid:** playful consumer, long-form reading. - **Measured references:** Linear (Inter 510, −0.022em, #08090a, rgba(255,255,255,.08) hairlines, 8px radius), Vercel (Geist 400, −0.06em, ring-as-border, blue on 2 elements), Raycast. - **Fonts:** Geist (display 500, UI 13px) + Geist Mono (labels, IDs, kbd). ~51 KB. ```tsx import { Geist, Geist_Mono } from "next/font/google"; const sans = Geist({ subsets: ["latin"], variable: "--font-geist-sans", display: "swap" }); const mono = Geist_Mono({ subsets: ["latin"], variable: "--font-geist-mono", display: "swap" }); ``` - **Signature details:** `label-mono` as the UI voice; 1px white-alpha hairlines; depth from lighter surfaces and inset top highlight; `Kbd` chips; two-tone H2s; a real product UI (or honest DOM mock) as the hero visual; brand on ≤ 2% of pixels. - **Don't:** gradient buttons, pill buttons everywhere, serif, illustrations, glass cards, a second accent. ```tsx

``` ## editorial — literary, considered, slow - **Use:** publications, essays, research, studios, premium brands, long-form docs. **Avoid:** dense data apps. - **Measured references:** Anthropic (ivory #faf9f5, serif body 20px, clay accent on 1 element, split hero), Granola (serif display 86px at 0.93 leading, −0.02em, sections 112–160px), Paco (1.75 body leading, serif italic emphasis). - **Fonts:** Newsreader (opsz axis: display and text from one file; italic for decks) + IBM Plex Mono (kickers, bylines). Snippet at top of this file. - **Signature details:** body `text-lg` (17–19px) at 1.6–1.65 in `max-w-prose`; structure from rules (`border-t border-line-strong` on section heads) not boxes; mono uppercase kickers; always-underlined links (`TextLink`, `decoration-brand-line underline-offset-4`); italic deck under the H1; drop cap (`first-letter:float-left first-letter:mr-2 first-letter:text-[3.6em] first-letter:leading-[0.8]`); grain on paper. - **Don't:** cards, pills, icon grids, sans headlines, gradients, scaling or bouncy motion. Danger shares the red family with the brand: pair it with an icon and text. ```tsx

Essay · 14 min read

The quiet economics of maintenance

Why the cheapest code is the code you already understand, and what it costs to forget that.

``` ## swiss — rational, confident, poster-like - **Use:** agencies, architecture, type/design tools, events, portfolios, data journalism. **Avoid:** soft consumer brands. - **Measured references:** basement.studio (one weight 600 at 0.90 leading, −0.04em, one #ff4d00 accent + selection, radius 0), hellohello (one weight, size-only hierarchy, numbered editorial lists with hairlines), PlanetScale (0 radius, logo table). - **Fonts:** Schibsted Grotesk (700 display, 400 body) + JetBrains Mono (indices "01 —", captions). ```tsx import { Schibsted_Grotesk, JetBrains_Mono } from "next/font/google"; const sans = Schibsted_Grotesk({ subsets: ["latin"], variable: "--font-schibsted", display: "swap" }); const mono = JetBrains_Mono({ subsets: ["latin"], variable: "--font-jetbrains-mono", display: "swap" }); ``` - **Signature details:** 12-col grid with label col-span-3 / content col-span-9; flush left, ragged right; `border-line` is full-contrast ink here; numbered sections; huge size contrast (text-sm next to text-display-xl); hover = invert (`hover:bg-fg hover:text-bg`); radius 0; linear, near-instant motion. - **Don't:** shadows, any rounding, centered body, more than 2 weights, decorative icons. ```tsx

01 — Studio

We design buildings that age in public.

Forty-one projects across nine cities since 2011. Housing, libraries, one bridge.

``` ## warm — approachable, tactile, human - **Use:** consumer SaaS, productivity/notes, education, health, community. **Avoid:** security/infra, luxury, dense data. - **Measured references:** Cursor (warm #f7f7f4, fg at 60/50/40%), Family (40–72px device radii, 1s out-expo reveals), Granola (olive accent, positive small-size tracking). - **Fonts:** Bricolage Grotesque (display ≥ 32px only; never request extra axes: 40 → 128 KB) + Figtree (UI/body) + JetBrains Mono (`preload: false`). ```tsx import { Bricolage_Grotesque, Figtree, JetBrains_Mono } from "next/font/google"; const display = Bricolage_Grotesque({ subsets: ["latin"], variable: "--font-bricolage", display: "swap" }); const sans = Figtree({ subsets: ["latin"], variable: "--font-figtree", display: "swap" }); const mono = JetBrains_Mono({ subsets: ["latin"], variable: "--font-jetbrains-mono", display: "swap", preload: false }); ``` - **Signature details:** cards `surface-card` on `bg-bg-subtle` with 24px padding; `bg-brand-subtle text-brand-text` callouts; sentence case; `ease-spring` for panels, `ease-spring-bouncy` only for success moments; grain on hero; one illustration style (duotone brand + fg) if any. - **Don't:** neon, pure grays, sharp corners, 3D blobs, heavy shadows, Poppins/Nunito. ```tsx

Notes that write the follow-up for you.

Granular enough for a 1:1, calm enough for a Monday. Works offline.

{/* real note UI */}

``` ## terminal — raw, fast, honest - **Use:** CLIs, dev infra, hacker tools, hackathons, developer launch pages. **Avoid:** mainstream audiences, long reading. - **Measured references:** PlanetScale (system mono, 0 fonts, 1.7 MB page), the owner's DevEx landing (boot-log hero, amber at 1–2% coverage, tmux status line). - **Fonts:** Geist Mono only (~23 KB). Alt: JetBrains Mono under the same variable name. ```tsx import { Geist_Mono } from "next/font/google"; const mono = Geist_Mono({ subsets: ["latin"], variable: "--font-geist-mono", display: "swap" }); ``` - **Signature details:** `$`/`>` prompts in `text-brand-text`; bracketed actions `[ deploy ]`; hard offset shadow (`shadow-3`) on one focal element; solid 1px borders; amber solids take dark text (`text-fg-on-brand` handles it); warning is yellower so "pending" never reads as the CTA; box-drawing dividers; tabular timestamps; a blinking block caret in CSS `steps(1)`. - **Don't:** rounded corners, soft shadows, gradients, serif, emoji, glass, typewriter headlines (type the log, not the H1). ```tsx

acme/cli · v3.2.0 · MIT

Ship infra from a single YAML file.

$ curl -fsSL acme.sh | sh

✓ installed acme 3.2.0 in 4.1s

``` ## instrument — dense, data-first - **Use:** analytics, admin, finance, ops consoles, internal tools, docs for data products. **Avoid:** marketing landing pages with big type. - **Measured references:** Attio (14px w500 workhorse, 0.95 display leading, navy-tinted shadows, blue-tinted neutrals), Supabase (oklch tokens, 14px w450). - **Fonts:** IBM Plex Sans + IBM Plex Mono (weights 400/500). ```tsx import { IBM_Plex_Sans, IBM_Plex_Mono } from "next/font/google"; const sans = IBM_Plex_Sans({ subsets: ["latin"], variable: "--font-plex-sans", display: "swap" }); const mono = IBM_Plex_Mono({ subsets: ["latin"], weight: ["400", "500"], variable: "--font-plex-mono", display: "swap" }); ``` - **Signature details:** 13–14px UI; 36px table rows; sticky table header on `bg-bg-subtle`; right-aligned `tabular-nums slashed-zero`; delta chips `Badge tone="success"`; panels split by `border-line-subtle`; shadows only on floating layers; filters in the URL; `section-y` is compact (40→72px). - **Don't:** hero-size type, decorative gradients, scroll reveals, a second accent in chrome (charts use a separate palette). ```tsx

Revenue

Updated 09:41 UTC

{/* KPI tiles: bg-bg p-4 */} ``` ## Blending rule Never blend two directions. If the brief pulls two ways, pick the one matching the **audience** and borrow at most one detail from the other as a documented override in `globals.css` (for example editorial's italic deck inside precision). More than one override means you picked the wrong direction.