---
title: "Terminal direction"
description: "Terminal: Raw, fast, honest. Graphite black, monospace everything, one phosphor-amber signal, hard edges."
canonical: https://void-design.vercel.app/directions/terminal
lastModified: 2026-09-16
---

# Terminal

Raw, fast, honest. Graphite black, monospace everything, one phosphor-amber signal, hard edges.

direction 02/06 · dark-first · Geist Mono · radius 0rem

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

## Type

Display Geist Mono 600, text Geist Mono, mono Geist Mono (SIL OFL 1.1, ~23KB latin woff2). 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.50:1 Lc93.

| Token | Light | Dark |
| --- | --- | --- |
| --bg | oklch(98.6% 0.004 90) | oklch(13.5% 0 0) |
| --bg-subtle | oklch(96.4% 0.005 90) | oklch(15.5% 0 0) |
| --surface | oklch(100% 0 0) | oklch(17% 0 0) |
| --surface-raised | oklch(100% 0 0) | oklch(20.5% 0 0) |
| --surface-hover | oklch(94% 0.006 90) | oklch(22.5% 0 0) |
| --surface-active | oklch(91% 0.008 90) | oklch(26% 0 0) |
| --line | oklch(80% 0.006 90) | oklch(32% 0 0) |
| --line-subtle | oklch(90% 0.005 90) | oklch(24% 0 0) |
| --line-strong | oklch(20% 0.01 80) | oklch(52% 0 0) |
| --line-focus | oklch(52% 0.12 62) | oklch(80% 0.165 72) |
| --fg | oklch(19% 0.01 80) | oklch(94% 0.008 85) |
| --fg-muted | oklch(44% 0.01 80) | oklch(78.5% 0.008 85) |
| --fg-subtle | oklch(53.5% 0.01 80) | oklch(60.5% 0.006 85) |
| --fg-faint | oklch(63% 0.01 80) | oklch(49% 0.006 85) |
| --fg-on-brand | oklch(18% 0.02 60) | oklch(18% 0.02 60) |
| --brand | oklch(80% 0.165 72) | oklch(80% 0.165 72) |
| --brand-hover | oklch(84% 0.148 78) | oklch(85% 0.144 80) |
| --brand-subtle | oklch(95.5% 0.045 85) | oklch(24% 0.045 70) |
| --brand-line | oklch(72% 0.14 70) | oklch(50% 0.11 70) |
| --brand-text | oklch(49% 0.11 62) | oklch(82% 0.15 75) |
| --success | oklch(48% 0.12 150) | oklch(78% 0.17 150) |
| --success-subtle | oklch(95.5% 0.04 150) | oklch(24% 0.05 150) |
| --warning | oklch(50% 0.1 98) | oklch(88% 0.16 98) |
| --warning-subtle | oklch(96% 0.06 100) | oklch(26% 0.05 98) |
| --danger | oklch(51% 0.19 28) | oklch(79% 0.121 28) |
| --danger-subtle | oklch(95.5% 0.022 28) | oklch(25% 0.07 28) |
| --grain-opacity | 0 | 0.04 |

## Depth, radius, motion

Elevation shadow-1, shadow-2, shadow-3. Radius knob 0rem: rounded-sm, rounded-lg, rounded-xl, rounded-2xl. Motion cubic-bezier(0.23, 1, 0.32, 1); fast 60ms · base 100ms · slow 150ms · slower 300ms.

## When to use it

- **Use for:** CLIs, dev infra, hacker tools, hackathons, developer launch pages
- **Avoid:** mainstream or non-technical audiences, long reading
- **Token file:** `packages/tokens/css/directions/terminal.css`

## Signature

`$`/`>` prompts in brand-text; bracketed actions `[ deploy ]`; hard offset shadow on ONE focal element (shadow-3); solid 1px borders (not alpha); amber solids take dark text; warning is a yellower hue so "pending" never reads as the CTA; box-drawing dividers; tabular timestamps.

## Don't

rounded corners, soft shadows, gradients, serif, emoji, glass, typewriter headlines.

## Install

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

```ts
import { Geist_Mono } from "next/font/google";
const mono = Geist_Mono({ subsets: ["latin"], variable: "--font-geist-mono", display: "swap" });
Alt: JetBrains_Mono (variable "--font-geist-mono" works too; ~40KB).
```