---
version: alpha
name: Deptford
description: Longform editorial storytelling on a warm paper canvas — a large serif display voice, generous measure, hairline rules, and restrained ink with a single oxblood accent. Reading is the interface; chrome recedes so the essay and its archival imagery lead.
colors:
  # Canvas + ink
  background: "#f6f2ea"
  surface: "#fffdf8"
  surface-soft: "#efe9dd"
  ink: "#1c1a17"
  ink-secondary: "#4a463f"
  ink-muted: "#7a746a"

  # Accent — oxblood / archival red, used sparingly
  primary: "#8a2b22"
  primary-hover: "#6e2019"
  accent-soft: "#f0dfd8"

  # Lines + structure
  border: "#d9d1c2"
  rule: "#ccc2b0"

  # On-color
  on-primary: "#fffdf8"
  on-ink: "#f6f2ea"

  # Interactive
  link: "#8a2b22"
  link-hover: "#6e2019"
  focus-ring: "#8a2b22"
  selection: "#e7d9c8"

typography:
  display-hero:
    fontFamily: "Playfair Display, Georgia, serif"
    fontSize: 64px
    fontWeight: 700
    lineHeight: 1.05
    letterSpacing: -1px
  chapter-number:
    fontFamily: "Spectral, Georgia, serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 3px
  section-heading:
    fontFamily: "Playfair Display, Georgia, serif"
    fontSize: 40px
    fontWeight: 700
    lineHeight: 1.15
    letterSpacing: -0.5px
  sub-heading:
    fontFamily: "Playfair Display, Georgia, serif"
    fontSize: 28px
    fontWeight: 600
    lineHeight: 1.25
    letterSpacing: -0.25px
  lede:
    fontFamily: "Spectral, Georgia, serif"
    fontSize: 22px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body:
    fontFamily: "Spectral, Georgia, serif"
    fontSize: 19px
    fontWeight: 400
    lineHeight: 1.75
    letterSpacing: 0px
  body-small:
    fontFamily: "Spectral, Georgia, serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  pull-quote:
    fontFamily: "Playfair Display, Georgia, serif"
    fontSize: 30px
    fontWeight: 500
    lineHeight: 1.35
    letterSpacing: -0.25px
  caption:
    fontFamily: "Spectral, Georgia, serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.45
    letterSpacing: 0.2px
  label:
    fontFamily: "IBM Plex Mono, ui-monospace, Menlo, monospace"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: 1.5px
  button-ui:
    fontFamily: "IBM Plex Mono, ui-monospace, Menlo, monospace"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 1px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 40px
  2xl: 64px
  3xl: 96px
  4xl: 144px

rounded:
  none: 0px
  xs: 2px
  sm: 4px
  md: 6px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.xs}"
    padding: 12px 22px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.xs}"
    padding: 12px 22px
  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.xs}"
    padding: 12px 22px
    borderColor: "{colors.border}"
  chapter-tag:
    backgroundColor: "{colors.accent-soft}"
    textColor: "{colors.primary}"
    typography: "{typography.label}"
    rounded: "{rounded.xs}"
    padding: 4px 10px
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.sm}"
    padding: 28px
    borderColor: "{colors.border}"
  pull-quote-block:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.pull-quote}"
    rounded: "{rounded.none}"
    padding: 8px 28px
    borderColor: "{colors.primary}"
  figure-caption:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink-muted}"
    typography: "{typography.caption}"
    padding: 8px 0px
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.label}"
    padding: 18px 32px
    borderColor: "{colors.rule}"
  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body-small}"
    rounded: "{rounded.xs}"
    padding: 10px 14px
    borderColor: "{colors.border}"
  input-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.xs}"
    padding: 10px 14px
    borderColor: "{colors.focus-ring}"
  link-inline:
    textColor: "{colors.link}"
    typography: "{typography.body}"
  compare-slider:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.label}"
    rounded: "{rounded.none}"
    borderColor: "{colors.ink}"
---

# Deptford Design System

## Overview

Deptford is a longform editorial microsite where the essay is the product. Each chapter (e.g. `001/fingerprint`) is a self-contained reading experience laid over a warm, paper-toned canvas (`{colors.background}`) rather than the cold pure-white of a SaaS marketing page. The effect is bookish and archival — the page reads like a finely set print feature that happened to gain hyperlinks and an interactive comparison slider. Chrome is almost absent; the interface is the act of reading.

The voice is carried entirely by type. A high-contrast serif display face (Playfair Display here, standing in for a Didone-style editorial headline) handles the hero, section heads, and pull quotes, while a refined text serif (Spectral) sets the body at a generous 19px with luxurious 1.75 line-height and a narrow measure. A monospaced face (IBM Plex Mono) appears only in small structural roles — chapter labels, nav, captions of metadata — providing a subtle "archival catalog" counterpoint to the literary serifs.

Color is deliberately quiet. Near-black warm ink (`{colors.ink}`) on warm paper, with a single oxblood/archival-red accent (`{colors.primary}`) reserved for links, the active chapter marker, and the rule beside pull quotes. There are no gradients, no shadows of consequence, and no decorative UI color. Structure comes from hairline rules (`{colors.rule}`) and whitespace, the way it does on a well-set page.

**Key Characteristics:**
- Warm paper canvas (`{colors.background}`) instead of pure white — bookish, archival
- High-contrast serif display (Playfair Display) for hero, heads, and pull quotes
- Refined text serif (Spectral) for body at 19px / 1.75 line-height, narrow measure
- Monospace (IBM Plex Mono) only for labels, nav, and metadata — the "catalog" voice
- A single oxblood accent (`{colors.primary}`) for links, active markers, quote rules
- Hairline rules and whitespace do all the structural work — minimal borders, no heavy shadow
- Near-zero corner rounding — flat, print-like rectangles
- Archival imagery (river.svg, historical photographs) framed with thin captions and a compare slider

## Colors

### Canvas & Ink
- **Paper** (`{colors.background}`): The warm off-white page canvas everything sits on.
- **Surface** (`{colors.surface}`): Slightly brighter card/figure surface, a shade above the canvas.
- **Surface Soft** (`{colors.surface-soft}`): Muted band for set-apart sections.
- **Ink** (`{colors.ink}`): Warm near-black for headlines and body text.
- **Ink Secondary** (`{colors.ink-secondary}`): Quieter body and intro text.
- **Ink Muted** (`{colors.ink-muted}`): Captions, metadata, timestamps.

### Accent
- **Oxblood** (`{colors.primary}`): Links, active chapter marker, pull-quote rule, primary CTA. The only saturated color in the system; used sparingly.
- **Oxblood Hover** (`{colors.primary-hover}`): Darker on hover/press.
- **Accent Soft** (`{colors.accent-soft}`): Tinted background for chapter tags.

### Lines & Structure
- **Border** (`{colors.border}`): Card and figure outlines, input borders.
- **Rule** (`{colors.rule}`): Hairline section dividers and nav underline.

### Interactive
- **Link** (`{colors.link}`): Inline link color (oxblood), underlined.
- **Selection** (`{colors.selection}`): Warm text-selection highlight.
- **Focus Ring** (`{colors.focus-ring}`): Keyboard focus outline.

## Typography

### Font Family
- **Display / Headings**: `Playfair Display`, fallback `Georgia, serif` — high-contrast Didone editorial voice.
- **Body / Text serif**: `Spectral`, fallback `Georgia, serif` — calm, readable long-form face.
- **Labels / Mono**: `IBM Plex Mono`, fallback `ui-monospace, Menlo, monospace` — archival catalog labels.

### Hierarchy

The complete type scale lives in the `typography:` token block above. Reference tokens directly (`{typography.display-hero}`, `{typography.body}`, etc.).

| Token | Use |
|---|---|
| `display-hero` | Chapter title — billboard serif impact |
| `chapter-number` | Tracked-out mono-ish chapter index (001) |
| `section-heading` | Major section titles within the essay |
| `sub-heading` | Sub-sections |
| `lede` | Opening intro paragraph, larger serif |
| `body` | Standard reading text, 19px serif |
| `body-small` | Secondary copy, UI text |
| `pull-quote` | Set-apart serif quotations |
| `caption` | Figure captions, metadata |
| `label` | Tracked-out mono labels, nav, tags |
| `button-ui` | Buttons, compare-slider handle text |

### Principles
- **Type is the design**: nearly all hierarchy comes from font, size, weight, and measure — not color or boxes.
- **Two serifs, one mono**: display serif announces, text serif reads, mono labels and indexes.
- **Generous measure and leading**: body at 1.75 line-height on a narrow column maximizes reading comfort.
- **Tracking by role**: tight negative tracking on display serif; wide positive tracking on mono labels.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. The reading column is narrow; vertical rhythm is generous, with large gaps (`{spacing.3xl}`–`{spacing.4xl}`) between chapter sections.

### Grid & Container
- Single centered reading column, roughly 38–44rem (~640–700px) for body measure.
- Full-bleed and wide figures break out beyond the text column for archival imagery.
- Hero is a single centered column with a tracked chapter number above the serif title.
- Hairline rules (`{colors.rule}`) separate front matter, body, and footer.

### Whitespace Philosophy
- **Page-like calm**: massive vertical breathing room between sections; the canvas is meant to feel like an open book.
- **Imagery as punctuation**: archival figures and the compare slider interrupt the column, each with a thin muted caption.
- **No decorative chrome**: separation comes from rules and space, never from background blocks of color.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Pull quotes, sliders, full-bleed figures |
| `xs` | 2px | Buttons, tags, inputs |
| `sm` | 4px | Cards |
| `md` | 6px | Larger framed media |
| `pill` | 9999px | Rare — small dot markers only |

Corners stay nearly flat throughout; the system reads as set type on paper, not soft product UI.

## Components

The full component spec lives in the `components:` token block above. Reference tokens directly (`{components.button-primary}`, `{components.pull-quote-block}`).

### Buttons
- **`button-primary`** — Oxblood fill, paper-toned text, tracked mono label, 2px radius.
- **`button-secondary`** — Surface fill with hairline border, ink text.

### Tags & Labels
- **`chapter-tag`** — Soft oxblood tint, oxblood mono label, used for chapter index markers.

### Reading Components
- **`pull-quote-block`** — Set-apart serif quotation with a left oxblood rule (`borderColor: {colors.primary}`).
- **`figure-caption`** — Muted serif caption beneath archival imagery.
- **`compare-slider`** — Interactive before/after comparison (fingerprint imagery) with a thin ink handle and mono "Slide to compare" label.

### Cards
- **`card`** — Brighter surface, hairline border, generous padding for set-apart blocks.

### Navigation
- **`nav-bar`** — Quiet paper bar with mono labels and a hairline rule underneath.

### Inputs
- **`input`** — Surface fill, hairline border; focus swaps the border to oxblood (`{colors.focus-ring}`).

## Do's and Don'ts

### Do
- Keep the canvas warm paper (`{colors.background}`), never pure white
- Lead with the serif display voice; let type carry the hierarchy
- Reserve oxblood (`{colors.primary}`) for links, active markers, and quote rules
- Use hairline rules and whitespace for structure
- Set body at generous line-height on a narrow measure
- Track mono labels wide; track display serif tight

### Don't
- Don't introduce a second accent color or any gradient
- Don't add heavy shadows or soft rounded "card" UI — keep it flat and print-like
- Don't widen the body column past comfortable reading measure
- Don't use the mono face for running text — labels and metadata only
- Don't color UI chrome decoratively; oxblood is functional, not ornamental

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Deptford. Brand names and trademarks belong to their respective owners.