Serif-Forward Literary

---
name: serif-literary
description: Apply the Serif-Forward Literary visual design system when building or restyling websites and UI. Use whenever the user asks to build, theme, restyle, or "make it look like" Serif-Forward Literary, mentions literary serif, bookish design, longform serif, or describes warm paper background, serif for both headings and body, 19–21px text sizes — 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
---

# Serif-Forward Literary Design System

Reading-first serif elegance on warm paper: 19–21px text serif with 1.7 leading on a 680px measure, serif headings in the same voice, oldstyle figures and real ligatures, a muted sepia link color, and drop caps. A well-made book rendered in the browser.

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 Serif-Forward Literary.
- Restyling existing UI to this aesthetic.
- The user names the style, an alias (literary serif, bookish design, longform serif, modern literary magazine, substack serif), or describes its traits: warm paper background; serif for both headings and body; 19–21px text sizes; oldstyle figures and ligatures; drop caps and footnotes; muted sepia links.

## Design tokens

### Color palette

- Warm paper ground: `#faf8f3` (--color-bg)
- Slightly deeper panels for asides and footnote blocks: `#f3f0e8` (--color-surface)
- Warm ink: `#1d1b18` (--color-text)
- Bylines, dates, folios, footnote numbers: `#6b6459` (--color-text-muted)
- Muted sepia for links and small caps accents: `#8a5a2c` (--color-accent)
- Hairline warm rules under headers and around asides: `#e6e1d5` (--color-border)

### Typography

- Display / headings: Newsreader (fallback: Georgia, Times New Roman, serif) (ideal: Tiempos Headline, premium — use Newsreader as the free substitute)
- Body: Newsreader (fallback: Georgia, Times New Roman, serif) (ideal: Tiempos Text, premium — use Newsreader as the free substitute)
- Type scale: 1.25 ratio, base 20px — computed steps: 20px / 25px / 31px / 39px / 49px / 61px (body / h5 / h4 / h3 / h2 / h1; scale further for display sizes)
- Headings: weight 500, line-height 1.2, letter-spacing 0
- Body: line-height 1.7, letter-spacing 0

### Spacing, radius, border

- Spacing scale (px): 4, 8, 16, 24, 40, 64, 96 — Book-like: indented or single-line paragraph spacing, 64–96px between essay sections, and margins that keep the 680px measure centered and calm.
- Border radius: none 0px — Books have no rounded corners.
- Border treatment: 1px solid #e6e1d5 — Warm hairlines: under the site header, above footnotes, around occasional asides. Never boxes around prose.

### Shadows

- none: `none` — Flat like a printed page — hierarchy comes from the serif scale, italics, and spacing

### Layout

- Max content width: 680px
- Single 680px column; section breaks marked by a centered fleuron or asterism (⁂) rather than rules
- Footnotes as margin sidenotes at wide viewports, collapsing to end-of-text at narrow
- Chapter/essay openers get small-caps first line plus drop cap
- Poetry and block quotes indented and set slightly smaller with tighter measure

### Effects

- font-feature-settings for oldstyle figures ('onum') and discretionary ligatures ('dlig')
- Drop caps via initial-letter with sepia coloring
- Asterism or fleuron section dividers
- hyphens: auto with a hanging-punctuation first line

### Motion

- Easing: ease; durations 120ms / 250ms / 400ms
- Nearly motionless; links deepen from sepia toward ink on hover
- Sidenotes fade in when their reference is hovered
- No scroll effects — pages, not performances

## CSS variables (drop-in)

```css
:root {
  --color-bg: #faf8f3;
  --color-surface: #f3f0e8;
  --color-text: #1d1b18;
  --color-text-muted: #6b6459;
  --color-accent: #8a5a2c;
  --color-border: #e6e1d5;
  --radius-none: 0px;
  --border-default: 1px solid #e6e1d5;
  --font-display: Newsreader, Georgia, "Times New Roman", serif;
  --font-body: Newsreader, Georgia, "Times New Roman", serif;
  --text-base: 20px;
  --leading-heading: 1.2;
  --leading-body: 1.7;
  --tracking-heading: 0;
  --tracking-body: 0;
  --ease: ease;
  --duration-fast: 120ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;
}
```

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

## Component recipes

- **Nav:** A small centered masthead: journal name in 22px serif small caps, hairline below, issue/date line in 14px muted; no persistent sticky bar
- **Hero:** Essay opener: title at 34px/500, author line in small caps with sepia name, publication date in muted, then the small-caps-plus-drop-cap first paragraph
- **Card:** Table-of-contents entry: serif title at 22px, author in small caps, one-line excerpt in italic — separated by whitespace and an occasional asterism, never boxed
- **Button (primary):** Subscribe: ink-filled rectangle with paper-colored small-caps label, square corners — used once per page at most
- **Button (secondary):** Sepia text link with underline; underline color shifts to ink on hover
- **Form fields:** Paper-toned input with 1px warm border and serif input text; focus deepens the border to sepia

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

A page of continuous serif prose on warm paper (#faf8f3) with true typographic finish — oldstyle figures, discretionary ligatures, italic emphasis, a three-line drop cap — reading like a hardcover page, not a website. Spend boldness here; keep everything else quiet.

## Do

- Turn on real typographic features: oldstyle figures, ligatures, true small caps, proper quotes and dashes
- Keep both headings and body in the serif family — the single warm voice is the style
- Use italics, small caps, and indentation for emphasis instead of weight and color
- Honor book conventions: asterism section breaks, footnotes, first-line treatments

## Don't

- No sans-serif anywhere in the reading surface (system sans may survive only in form controls)
- Don't use cool grays or pure white — warmth is the difference between a book and a screen
- No cards, shadows, or interface chrome around prose
- Don't let the measure drift past ~75 characters even on wide screens

## Accessibility notes

- Ink #1d1b18 on paper #faf8f3 passes AAA; sepia links #8a5a2c pass AA (~5.5:1) and stay underlined so color is never the only cue
- 20px base with 1.7 leading is comfortably above minimums, but hyphenation plus justification can hurt dyslexic readers — prefer ragged-right below 600px widths
- Sidenote/footnote hover reveals need focus and touch equivalents, and footnote links need descriptive aria-labels

## Reference sites

- The Paris Review: https://www.theparisreview.org
- The New Yorker: https://www.newyorker.com
- Substack: https://substack.com

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

Install this skill

unzip serif-literary.zip -d ~/.claude/skills/

npx shadcn add https://claude-design-skills.convoke.software/r/serif-literary.json

Settings → Capabilities → Skills → Upload skill → serif-literary.zip