Skip to content

Direction 02 / 06

Terminal.

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

dark-firstGeist Monoradius 0remupdated 16 Sept 2026

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

Scheme

Example · tailcut

[ v0.9 ] open source

Logs, cut to the lines that matter.

tailcut streams logs from every container and folds repeated lines, so a 40,000-line incident reads in one screen.

[ install ]view source

tailcut

curl -fsSL tailcut.sh | sh

readybrand↵

Type

Display Geist Mono 600, text Geist Mono, mono Geist Mono. SIL OFL 1.1, ~23KB latin woff2.

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.50:1 Lc93

light

bg #fbfaf7

Surfaces

  • bg98.6% 0.004 90
  • bg-subtle96.4% 0.005 90
  • surface100% 0 0
  • surface-raised100% 0 0
  • surface-hover94% 0.006 90

Text

  • fg19% 0.01 80
  • fg-muted44% 0.01 80
  • fg-subtle53.5% 0.01 80

Lines

  • line-subtle90% 0.005 90
  • line80% 0.006 90
  • line-strong20% 0.01 80
  • line-focus52% 0.12 62

Brand

  • brand80% 0.165 72
  • brand-hover84% 0.148 78
  • brand-subtle95.5% 0.045 85
  • brand-line72% 0.14 70
  • brand-text49% 0.11 62

Status

  • success48% 0.12 150
  • warning50% 0.1 98
  • danger51% 0.19 28

dark

bg #080808

Surfaces

  • bg13.5% 0 0
  • bg-subtle15.5% 0 0
  • surface17% 0 0
  • surface-raised20.5% 0 0
  • surface-hover22.5% 0 0

Text

  • fg94% 0.008 85
  • fg-muted78.5% 0.008 85
  • fg-subtle60.5% 0.006 85

Lines

  • line-subtle24% 0 0
  • line32% 0 0
  • line-strong52% 0 0
  • line-focus80% 0.165 72

Brand

  • brand80% 0.165 72
  • brand-hover85% 0.144 80
  • brand-subtle24% 0.045 70
  • brand-line50% 0.11 70
  • brand-text82% 0.15 75

Status

  • success78% 0.17 150
  • warning88% 0.16 98
  • danger79% 0.121 28

Depth, radius, motion

Elevation

shadow-1
shadow-2
shadow-3

Radius · knob 0rem

sm
lg
xl
2xl

Motion · hover to play

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 for
mainstream or non-technical audiences, long reading
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

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

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

All directions · View as Markdown