---
title: "Precision direction"
description: "Precision: Calm, exact, fast. Engineered near-black UI, hairlines, one electric indigo signal."
canonical: https://void-design.vercel.app/directions/precision
lastModified: 2026-09-16
---

# Precision

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

direction 01/06 · dark-first · Geist · Geist Mono · radius 0.375rem

Everything below the page header is rendered in Precision: its fonts, radius, motion and palette, with a switch between its light and dark schemes.

## Type

Display Geist 500, text Geist, mono Geist Mono (SIL OFL 1.1, ~51KB latin woff2 total). The scale is closed: text-display-lg, text-display-sm, text-2xl, text-md, text-sm, label-mono, font-mono.

## 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.

| Token | Light | Dark |
| --- | --- | --- |
| --bg | oklch(99.2% 0.002 275) | oklch(14.5% 0.003 275) |
| --bg-subtle | oklch(97.4% 0.003 275) | oklch(16.8% 0.004 275) |
| --surface | oklch(100% 0 0) | oklch(18.2% 0.005 275) |
| --surface-raised | oklch(100% 0 0) | oklch(21.5% 0.006 275) |
| --surface-hover | oklch(95.4% 0.005 275) | oklch(23.5% 0.007 275) |
| --surface-active | oklch(92.8% 0.007 275) | oklch(26.5% 0.008 275) |
| --line | oklch(22% 0.01 275 / 0.11) | oklch(100% 0 0 / 0.09) |
| --line-subtle | oklch(22% 0.01 275 / 0.07) | oklch(100% 0 0 / 0.06) |
| --line-strong | oklch(22% 0.01 275 / 0.2) | oklch(100% 0 0 / 0.17) |
| --line-focus | oklch(55% 0.19 272) | oklch(68% 0.15 273) |
| --fg | oklch(20% 0.008 275) | oklch(96% 0.003 275) |
| --fg-muted | oklch(47% 0.012 275) | oklch(78.5% 0.009 275) |
| --fg-subtle | oklch(54.5% 0.012 275) | oklch(61% 0.01 275) |
| --fg-faint | oklch(64% 0.012 275) | oklch(49.5% 0.01 275) |
| --fg-on-brand | oklch(100% 0 0) | oklch(100% 0 0) |
| --brand | oklch(54.5% 0.19 272) | oklch(56% 0.19 272) |
| --brand-hover | oklch(50.5% 0.18 272) | oklch(52% 0.18 272) |
| --brand-subtle | oklch(95.5% 0.021 272) | oklch(25% 0.06 272) |
| --brand-line | oklch(80% 0.09 272) | oklch(44% 0.12 272) |
| --brand-text | oklch(50% 0.17 272) | oklch(80% 0.1 274) |
| --success | oklch(50% 0.12 152) | oklch(79% 0.14 152) |
| --success-subtle | oklch(96% 0.03 152) | oklch(24% 0.045 152) |
| --warning | oklch(52% 0.11 70) | oklch(82% 0.13 80) |
| --warning-subtle | oklch(96.5% 0.036 85) | oklch(25% 0.045 75) |
| --danger | oklch(52% 0.18 27) | oklch(79% 0.121 27) |
| --danger-subtle | oklch(96% 0.019 27) | oklch(25% 0.06 27) |
| --grain-opacity | 0 | 0.035 |

## Depth, radius, motion

Elevation shadow-1, shadow-2, shadow-3. Radius knob 0.375rem: rounded-sm, rounded-lg, rounded-xl, rounded-2xl. Motion 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:** playful consumer brands, long-form reading
- **Token file:** `packages/tokens/css/directions/precision.css`

## 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

```css
@import "tailwindcss";
@import "@void/tokens/base.css";
@import "@void/tokens/directions/precision.css";
```

```ts
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" });
```