Skip to content

Direction 04 / 06

Editorial.

Literary, considered, slow. Warm paper, near-black ink, an oxblood red pencil, hairline rules.

light-firstNewsreader · IBM Plex Monoradius 0.125remupdated 16 Sept 2026

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

Scheme

Example · The Margin

Essay · 14 minute read

Why the best tools feel slower than they are.

On latency, anticipation and the small pauses that make software feel considered rather than rushed.

SubscribeBrowse the archive

The Margin

Issue 38 · Autumn

readybrand↵

Type

Display Newsreader 400, text Newsreader, mono IBM Plex Mono. SIL OFL 1.1.

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: dark --fg on --surface-hover 12.66:1 Lc90

light

bg #fcf9f3

Surfaces

  • bg98.3% 0.008 85
  • bg-subtle96.4% 0.011 85
  • surface99.3% 0.004 85
  • surface-raised99.6% 0.003 85
  • surface-hover94.4% 0.013 85

Text

  • fg21% 0.015 60
  • fg-muted45% 0.02 65
  • fg-subtle53.5% 0.02 70

Lines

  • line-subtle25% 0.02 60 / 0.09
  • line25% 0.02 60 / 0.16
  • line-strong22% 0.02 60 / 0.7
  • line-focus47% 0.15 22

Brand

  • brand46% 0.15 22
  • brand-hover41% 0.14 22
  • brand-subtle94.5% 0.025 30
  • brand-line76% 0.08 25
  • brand-text46% 0.15 22

Status

  • success47% 0.1 150
  • warning49% 0.1 70
  • danger50% 0.19 32

dark

bg #13100d

Surfaces

  • bg17.5% 0.008 70
  • bg-subtle20% 0.009 70
  • surface21% 0.009 70
  • surface-raised24% 0.01 70
  • surface-hover26% 0.011 70

Text

  • fg93% 0.012 85
  • fg-muted78.5% 0.015 80
  • fg-subtle62.5% 0.015 75

Lines

  • line-subtle95% 0.02 85 / 0.08
  • line95% 0.02 85 / 0.13
  • line-strong95% 0.02 85 / 0.6
  • line-focus72% 0.12 28

Brand

  • brand52% 0.15 24
  • brand-hover48% 0.14 24
  • brand-subtle27% 0.05 25
  • brand-line46% 0.1 25
  • brand-text80% 0.1 28

Status

  • success79% 0.11 150
  • warning80% 0.11 80
  • danger79% 0.123 35

Depth, radius, motion

Elevation

shadow-1
shadow-2
shadow-3

Radius · knob 0.125rem

sm
lg
xl
2xl

Motion · hover to play

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

fast 150ms · base 250ms

slow 400ms · slower 600ms

When to use it

Use for
publications, essays, research, studios, premium brands, long-form docs
Avoid for
dense data apps, dashboards
Signature
body 17-19px/1.65 in 65ch columns; structure from 1px rules (border-line-strong for section heads) not boxes; mono uppercase kickers and bylines; underlined links (decoration-brand-line, underline-offset-4); italic decks; drop caps; grain on paper.
Don't
cards, pills, icon grids, sans headlines, gradients, bouncy or scaling motion.

Install

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

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

All directions · View as Markdown