Skip to content

Direction 01 / 06

Precision.

Calm, exact, fast. Engineered near-black UI, hairlines, one electric indigo signal.

dark-firstGeist · Geist Monoradius 0.375remupdated 16 Sept 2026

Everything inside this frame is rendered in Precision: its fonts, radius, motion and palette.

Scheme

Example · Relay

Changelog · v4.2

Infrastructure changes you can review like code. Plans, diffs and rollbacks in one place.

Relay turns every Terraform plan into a readable diff with an owner, a blast radius and a one-click rollback.

Start a workspaceRead the docs

Relay

relay plan --env production

readybrand↵

Type

Display Geist 500, text Geist, mono Geist Mono. SIL OFL 1.1, ~51KB latin woff2 total.

text-display-lg

Aa Bb 0123

text-display-sm

Measure twice, ship once

text-2xl

Section heading at reading size

text-md

Body copy runs at sixteen pixels with a comfortable measure and pretty wrapping.

text-sm

Interface text: buttons, navigation, table cells.

label-mono

Label · 11px · tracked

font-mono

const lcp = 1180; // ms

Palette

Semantic tokens in OKLCH, a separate scale per scheme. Contrast gate: 66 checks passed, 0 failed.

tightest: light --fg on --surface-hover 15.83:1 Lc96

light

bg #fcfcfe

Surfaces

  • bg99.2% 0.002 275
  • bg-subtle97.4% 0.003 275
  • surface100% 0 0
  • surface-raised100% 0 0
  • surface-hover95.4% 0.005 275

Text

  • fg20% 0.008 275
  • fg-muted47% 0.012 275
  • fg-subtle54.5% 0.012 275

Lines

  • line-subtle22% 0.01 275 / 0.07
  • line22% 0.01 275 / 0.11
  • line-strong22% 0.01 275 / 0.2
  • line-focus55% 0.19 272

Brand

  • brand54.5% 0.19 272
  • brand-hover50.5% 0.18 272
  • brand-subtle95.5% 0.021 272
  • brand-line80% 0.09 272
  • brand-text50% 0.17 272

Status

  • success50% 0.12 152
  • warning52% 0.11 70
  • danger52% 0.18 27

dark

bg #0a0a0b

Surfaces

  • bg14.5% 0.003 275
  • bg-subtle16.8% 0.004 275
  • surface18.2% 0.005 275
  • surface-raised21.5% 0.006 275
  • surface-hover23.5% 0.007 275

Text

  • fg96% 0.003 275
  • fg-muted78.5% 0.009 275
  • fg-subtle61% 0.01 275

Lines

  • line-subtle100% 0 0 / 0.06
  • line100% 0 0 / 0.09
  • line-strong100% 0 0 / 0.17
  • line-focus68% 0.15 273

Brand

  • brand56% 0.19 272
  • brand-hover52% 0.18 272
  • brand-subtle25% 0.06 272
  • brand-line44% 0.12 272
  • brand-text80% 0.1 274

Status

  • success79% 0.14 152
  • warning82% 0.13 80
  • danger79% 0.121 27

Depth, radius, motion

Elevation

shadow-1
shadow-2
shadow-3

Radius · knob 0.375rem

sm
lg
xl
2xl

Motion · hover to play

cubic-bezier(0.23, 1, 0.32, 1)

fast 100ms · base 150ms

slow 200ms · slower 450ms

When to use it

Use for
dev tools, AI/infra products, pro SaaS, technical launch pages
Avoid for
playful consumer brands, long-form reading
Signature
display weight 500 at -0.04em; 11px uppercase mono labels (label-mono) as the UI voice; 1px white-alpha hairlines; depth from lighter surfaces + inset top highlight, not drop shadows; 6px radius; kbd chips; brand on <=2% of pixels (CTA, focus, active, links).
Don't
gradients on buttons, rounded-full buttons, serif, illustrations, glass, second accent.

Install

One import after the base, plus the fonts. Every component keeps working.

packages/tokens/css/directions/precision.css
css
/* src/app/globals.css */
@import "tailwindcss";
@import "@void/tokens/base.css";
@import "@void/tokens/directions/precision.css";
ts
// src/app/layout.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" });

All directions · View as Markdown