Editorial Minimalism

---
name: editorial-minimalism
description: Apply the Editorial Minimalism visual design system when building or restyling websites and UI. Use whenever the user asks to build, theme, restyle, or "make it look like" Editorial Minimalism, mentions reading-first design, essay layout, minimal editorial, or describes 680px reading measure, serif body with sans UI chrome, 1.7 body leading — even if they don't name the style explicitly. Do NOT use for non-visual tasks or when another named design system is requested.
license: MIT
---

# Editorial Minimalism Design System

Magazine restraint distilled to a single reading column: pure white ground, 18–20px serif body on a 680px measure, sans-serif UI chrome, one understated link color, drop caps and pull quotes as the only ornament. Built for essays, not browsing.

Apply this system holistically: colors, type, spacing, radius, borders, shadows, and motion together produce the look. Token values are representative interpretations of the aesthetic, not an official spec. When in doubt, match the reference sites listed at the end.

## When to use

- Building a new page or component that should read as Editorial Minimalism.
- Restyling existing UI to this aesthetic.
- The user names the style, an alias (reading-first design, essay layout, minimal editorial, medium style, longform minimal), or describes its traits: 680px reading measure; serif body with sans UI chrome; 1.7 body leading; drop caps and pull quotes; hanging punctuation; single link accent.

## Design tokens

### Color palette

- Pure white reading ground: `#ffffff` (--color-bg)
- Body ink: `#1a1a1a` (--color-text)
- Bylines, dates, captions, reading time: `#666666` (--color-text-muted)
- Links and the single interactive color: `#1f5aa8` (--color-accent)
- Hairline separators between articles and around block quotes: `#e8e8e8` (--color-border)

### Typography

- Display / headings: Spectral (fallback: Georgia, Times New Roman, serif)
- Body: Spectral (fallback: Georgia, Times New Roman, serif)
- Type scale: 1.2 ratio, base 19px — computed steps: 19px / 23px / 27px / 33px / 39px / 47px (body / h5 / h4 / h3 / h2 / h1; scale further for display sizes)
- Headings: weight 600, line-height 1.25, letter-spacing -0.01em
- Body: line-height 1.7, letter-spacing 0

### Spacing, radius, border

- Spacing scale (px): 4, 8, 12, 16, 24, 32, 48, 80 — Comfortable reading rhythm: paragraph spacing at one line-height, section breaks at 48–80px; the measure, not the margins, defines the page.
- Border radius: none 0px — Square everywhere; images and quotes sit flush like print.
- Border treatment: 1px solid #e8e8e8 — Hairlines only — a rule above the footer, a left rule on block quotes. Never boxes around prose.

### Shadows

- none: `none` — Flat like a printed essay; hierarchy comes from type scale and the single column's rhythm

### Layout

- Max content width: 680px
- One centered 680px column for everything — title, prose, images
- Images may break the measure to ~880px for emphasis, never full-bleed walls
- Pull quotes set at 1.5x body size with a hairline left rule
- Metadata (byline, date, reading time) in 13px sans-serif system UI above the fold

### Effects

- Drop cap on the opening paragraph (initial-letter, 3 lines)
- Hanging punctuation on quotes (hanging-punctuation: first)
- Sidenotes/footnotes in the margin at wide viewports, inline at narrow

### Motion

- Easing: ease-out; durations 100ms / 200ms / 350ms
- Essentially static — only link underlines and a reading-progress bar animate
- Images fade in on load; no scroll choreography that interrupts reading

## CSS variables (drop-in)

```css
:root {
  --color-bg: #ffffff;
  --color-text: #1a1a1a;
  --color-text-muted: #666666;
  --color-accent: #1f5aa8;
  --color-border: #e8e8e8;
  --radius-none: 0px;
  --border-default: 1px solid #e8e8e8;
  --font-display: Spectral, Georgia, "Times New Roman", serif;
  --font-body: Spectral, Georgia, "Times New Roman", serif;
  --text-base: 19px;
  --leading-heading: 1.25;
  --leading-body: 1.7;
  --tracking-heading: -0.01em;
  --tracking-body: 0;
  --ease: ease-out;
  --duration-fast: 100ms;
  --duration-base: 200ms;
  --duration-slow: 350ms;
}
```

Google Fonts: `<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Spectral:wght@400;600&display=swap" rel="stylesheet">`

## Component recipes

- **Nav:** Minimal 13px sans-serif chrome (system-ui/Inter): small wordmark left, two links right, no border until scrolled; it should vanish from awareness while reading
- **Hero:** Article opening: 40px/600 serif title, 22px/400 serif standfirst in #666, byline row in 13px sans, then the drop-cap first paragraph — no hero image required
- **Card:** Article listing: hairline top border, serif title at 24px, one-line excerpt, sans metadata row; whitespace does the framing
- **Button (primary):** Rare — subscribe action only: #1a1a1a fill, white 15px sans label, square corners
- **Button (secondary):** Accent-colored text link with underline; the style prefers links to buttons
- **Form fields:** Bottom-border-only input (1px #e8e8e8), serif input text; focus shifts the rule to the accent blue

Where this spec is silent (footers, responsive breakpoints, empty states), derive the treatment from the tokens above and the Do/Don't rules — never fall back to generic defaults. Every interactive element needs a visible keyboard focus state consistent with the style (use the accent color or the border treatment, not the browser default).

## Signature element

The 680px single column itself: serif prose at 19px/1.7 with hanging punctuation and a three-line drop cap, framed by white margins and a whisper-quiet sans interface that disappears while you read. Spend boldness here; keep everything else quiet.

## Do

- Hold the 680px measure ruthlessly — roughly 65–75 characters per line at 19px
- Set UI chrome (nav, metadata, buttons) in a small sans so the serif belongs to the author's words alone
- Use one accent color for links and nothing else
- Invest in micro-typography: hanging punctuation, real quotes, em dashes, drop caps

## Don't

- No sidebars, related-content rails, or anything competing with the column
- Don't set headings in a second display family — the body serif at 600 weight is the headline voice
- No shadows, cards, or elevation around prose
- Don't let images go full-bleed; this is a column, not a magazine spread

## Accessibility notes

- #1a1a1a on white passes AAA; #666666 passes AA (~5.7:1); link blue #1f5aa8 passes AA (~6.8:1)
- Links must remain underlined — color alone is insufficient, especially at this restrained palette
- Drop caps need aria-safe markup (span with aria-hidden + visually-hidden full word) so screen readers don't split the first word

## Reference sites

- Medium: https://medium.com
- iA: https://ia.net
- Craig Mod: https://craigmod.com

For the exhaustive machine-readable spec, see references/tokens.md and tokens.json in this skill folder.

Install this skill

unzip editorial-minimalism.zip -d ~/.claude/skills/

npx shadcn add https://claude-design-skills.convoke.software/r/editorial-minimalism.json

Settings → Capabilities → Skills → Upload skill → editorial-minimalism.zip