---
title: "Editorial direction"
description: "Editorial: Literary, considered, slow. Warm paper, near-black ink, an oxblood red pencil, hairline rules."
canonical: https://void-design.vercel.app/directions/editorial
lastModified: 2026-09-16
---

# Editorial

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

direction 04/06 · light-first · Newsreader · IBM Plex Mono · radius 0.125rem

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

## Type

Display Newsreader 400, text Newsreader, mono IBM Plex Mono (SIL OFL 1.1). 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: dark --fg on --surface-hover 12.66:1 Lc90.

| Token | Light | Dark |
| --- | --- | --- |
| --bg | oklch(98.3% 0.008 85) | oklch(17.5% 0.008 70) |
| --bg-subtle | oklch(96.4% 0.011 85) | oklch(20% 0.009 70) |
| --surface | oklch(99.3% 0.004 85) | oklch(21% 0.009 70) |
| --surface-raised | oklch(99.6% 0.003 85) | oklch(24% 0.01 70) |
| --surface-hover | oklch(94.4% 0.013 85) | oklch(26% 0.011 70) |
| --surface-active | oklch(92% 0.015 85) | oklch(29% 0.012 70) |
| --line | oklch(25% 0.02 60 / 0.16) | oklch(95% 0.02 85 / 0.13) |
| --line-subtle | oklch(25% 0.02 60 / 0.09) | oklch(95% 0.02 85 / 0.08) |
| --line-strong | oklch(22% 0.02 60 / 0.7) | oklch(95% 0.02 85 / 0.6) |
| --line-focus | oklch(47% 0.15 22) | oklch(72% 0.12 28) |
| --fg | oklch(21% 0.015 60) | oklch(93% 0.012 85) |
| --fg-muted | oklch(45% 0.02 65) | oklch(78.5% 0.015 80) |
| --fg-subtle | oklch(53.5% 0.02 70) | oklch(62.5% 0.015 75) |
| --fg-faint | oklch(63% 0.02 70) | oklch(51% 0.015 75) |
| --fg-on-brand | oklch(98.5% 0.008 85) | oklch(98.5% 0.008 85) |
| --brand | oklch(46% 0.15 22) | oklch(52% 0.15 24) |
| --brand-hover | oklch(41% 0.14 22) | oklch(48% 0.14 24) |
| --brand-subtle | oklch(94.5% 0.025 30) | oklch(27% 0.05 25) |
| --brand-line | oklch(76% 0.08 25) | oklch(46% 0.1 25) |
| --brand-text | oklch(46% 0.15 22) | oklch(80% 0.1 28) |
| --success | oklch(47% 0.1 150) | oklch(79% 0.11 150) |
| --success-subtle | oklch(95% 0.03 150) | oklch(26% 0.04 150) |
| --warning | oklch(49% 0.1 70) | oklch(80% 0.11 80) |
| --warning-subtle | oklch(95% 0.04 85) | oklch(27% 0.045 75) |
| --danger | oklch(50% 0.19 32) | oklch(79% 0.123 35) |
| --danger-subtle | oklch(95% 0.025 32) | oklch(27% 0.06 35) |
| --grain-opacity | 0.045 | 0.06 |

## Depth, radius, motion

Elevation shadow-1, shadow-2, shadow-3. Radius knob 0.125rem: rounded-sm, rounded-lg, rounded-xl, rounded-2xl. Motion 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:** dense data apps, dashboards
- **Token file:** `packages/tokens/css/directions/editorial.css`

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

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

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