---
version: alpha
name: Monocle
description: A print magazine that wandered onto the web with its serif intact — Plantin set in confident uppercase, a single saturated Monocle yellow reserved for the subscribe button, and a salmon news-banner up top, all riding a clean white page that reads like a freshly-pressed broadsheet.

colors:
  # Surface / canvas
  background: "#ffffff"         # the paper-white page
  surface: "#f5f5f5"            # muted section bands, ad slots
  surface-dark: "#141414"       # footer + inverted blocks

  # Ink / text
  ink: "#141414"                # near-black serif headlines and body
  ink-secondary: "#6e6e6e"      # bylines, kickers, supporting copy
  ink-muted: "#b3b3b3"          # captions, metadata, disabled
  on-dark: "#ffffff"            # text on the dark footer and inverted blocks

  # Brand accent — the singular Monocle yellow
  primary: "#ffc500"            # the subscribe button, brand flags, highlights
  primary-hover: "#e6b100"      # pressed/hover on the yellow CTA
  on-primary: "#141414"         # near-black text on yellow (yellow never carries white)

  # Secondary editorial accent — the news salmon/red
  accent-salmon: "#f07060"      # promo banner ground, alert flashes
  accent-red: "#b11602"         # section flags, "breaking" emphasis

  # Borders
  border: "#d9d9d9"             # hairline rules between stories
  border-strong: "#141414"      # heavy editorial rules under mastheads

  # Shadow tint (opaque approximation for the elevation table)
  shadow-soft: "#141414"        # was rgba(20,20,20,0.12) — Google format requires hex

typography:
  masthead:
    fontFamily: "Plantin, ItalicAmpersand, Book Antiqua, Georgia, Times New Roman, serif"
    fontSize: 40px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 3px
  display:
    fontFamily: "Plantin, ItalicAmpersand, Book Antiqua, Georgia, Times New Roman, serif"
    fontSize: 33.6px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0px
  heading:
    fontFamily: "Plantin, ItalicAmpersand, Book Antiqua, Georgia, Times New Roman, serif"
    fontSize: 32px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0px
  heading-sub:
    fontFamily: "Plantin, ItalicAmpersand, Book Antiqua, Georgia, Times New Roman, serif"
    fontSize: 28px
    fontWeight: 400
    lineHeight: 1.25
    letterSpacing: 0px
  headline-sans:
    fontFamily: "Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 24px
    fontWeight: 700
    lineHeight: 1.25
    letterSpacing: 0px
  body:
    fontFamily: "Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  body-serif:
    fontFamily: "Plantin, Book Antiqua, Georgia, Times New Roman, serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0px
  kicker:
    fontFamily: "Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 700
    lineHeight: 1.3
    letterSpacing: 1px
  caption:
    fontFamily: "Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0px
  button-ui:
    fontFamily: "Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 700
    lineHeight: 1.0
    letterSpacing: 0.5px

spacing:
  xs: 5px
  sm: 7.5px
  md: 15px
  lg: 20px
  xl: 30px
  2xl: 40px
  3xl: 53px
  4xl: 60px

rounded:
  none: 0px
  sm: 2px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 10px 18px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"

  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 10px 18px
  button-secondary-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"

  card:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 20px

  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 10px 12px
  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.kicker}"
    padding: 12px 20px

  link:
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    padding: 0px
  link-hover:
    textColor: "{colors.accent-red}"

  kicker-label:
    textColor: "{colors.ink-secondary}"
    typography: "{typography.kicker}"
    padding: 0px

  promo-banner:
    backgroundColor: "{colors.accent-salmon}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 15px 20px

  badge:
    backgroundColor: "{colors.accent-red}"
    textColor: "{colors.on-dark}"
    typography: "{typography.kicker}"
    rounded: "{rounded.none}"
    padding: 3px 8px
---

# Monocle Design System

## Overview

Monocle's site behaves like a magazine that refuses to admit it left the printing press. The single most distinctive move is that everything important is set in **Plantin** — a warm, bookish old-style serif (`{typography.masthead}`) — and the brand wordmark sits dead-center at the top of the page in spaced-out capitals, exactly the way it does on the cover of the physical issue. There is no logotype gimmick, no animated hero, no gradient. Just the word MONOCLE in serif caps over a clean white page (`{colors.background}`), flanked by a "currently being edited in London" line on the left and a hand-drawn dog mascot on the right. It is unapologetically editorial.

The color story is disciplined to the point of austerity. The page is white, the type is a near-black ink (`{colors.ink}`), and the only saturated color allowed to do real work is **Monocle yellow** (`{colors.primary}`) — and it is spent almost exclusively on the SUBSCRIBE button. That restraint is what makes the yellow read as a brand stamp rather than decoration: when you see that specific saturated yellow, you know it's Monocle. A second editorial accent, a warm **salmon** (`{colors.accent-salmon}`), shows up only as the ground of the top promo banner ("A timely take on watchmaking, architecture and urbanism"), and a deeper **red** (`{colors.accent-red}`) flags breaking sections. Everything else is grayscale.

Structurally the page is a grid of stories separated by hairline rules (`{colors.border}`), with kickers ("TRAVEL & RESTAURANTS") set in tight uppercase Helvetica (`{typography.kicker}`) above serif headlines. The pairing is the whole personality: Plantin serif for the things you read, Helvetica Neue (`{typography.body}`) for the navigation, kickers, and UI furniture. Corners are square — there is essentially no border-radius anywhere except the pill on a tracking dot — which reinforces the newsprint feel. The result is calm, confident, and slightly aristocratic: a global-affairs broadsheet rendered in pixels.

**Key Characteristics:**
- Centered serif masthead in spaced capitals (`{typography.masthead}`, 3px tracking) — the print cover, on the web
- **Plantin** old-style serif carries every headline, display line, and long-form body (`{typography.display}`, `{typography.body-serif}`)
- **Helvetica Neue** runs the chrome: nav, kickers, captions, button labels (`{typography.kicker}`)
- The page is white (`{colors.background}`) with near-black ink (`{colors.ink}`) — pure broadsheet contrast
- A single saturated **Monocle yellow** (`{colors.primary}`) reserved almost entirely for the SUBSCRIBE button
- **Salmon** (`{colors.accent-salmon}`) used only as the top promo-banner ground; **red** (`{colors.accent-red}`) for breaking flags
- Square corners everywhere (`{rounded.none}`) — radius is not part of the language
- Hairline rules (`{colors.border}`), not boxes or shadows, divide the story grid
- Uppercase kickers (`{typography.kicker}`) sit above serif headlines, classic newspaper deck structure
- No gradients, no drop shadows, no rounded cards — the flatness is the editorial signal
- A dark footer block (`{colors.surface-dark}`) inverts to white text, the only major tonal flip
- Yellow always carries near-black text (`{colors.on-primary}`), never white — preserve legibility on the bright accent

## Colors

### Surface & Canvas
- **Paper White** (`{colors.background}`): The dominant page. Stories, nav, and hero all sit on it.
- **Muted Gray** (`{colors.surface}`): Section bands and advertising slots — a barely-there step off white.
- **Ink Black Surface** (`{colors.surface-dark}`): The footer and any inverted block.

### Ink / Text
- **Near-Black** (`{colors.ink}`): Serif headlines and body — a true newsprint black, not pure `#000`.
- **Mid Gray** (`{colors.ink-secondary}`): Bylines, kickers, and supporting copy.
- **Muted Gray** (`{colors.ink-muted}`): Captions, metadata, disabled states.

### Brand Accent
- **Monocle Yellow** (`{colors.primary}`): The singular brand color, spent on the SUBSCRIBE button and brand flags. Always paired with near-black text (`{colors.on-primary}`). Hover deepens to `{colors.primary-hover}`.

### Editorial Accents
- **Salmon** (`{colors.accent-salmon}`): The top promo-banner ground — a warm, attention-grabbing flash used sparingly.
- **Editorial Red** (`{colors.accent-red}`): Section flags, breaking-news badges, and link-hover emphasis.

### Borders & Shadow Tint
- **Hairline** (`{colors.border}`): The rules between stories — the primary structural device.
- **Strong Rule** (`{colors.border-strong}`): Heavy black rules under mastheads and section heads.
- **Shadow Soft** (`{colors.shadow-soft}`): Opaque stand-in for the rare soft shadow (originally rgba — flattened for the Google spec).

## Typography

### Font Family
- **Primary (editorial)**: `Plantin` — a humanist old-style serif, with fallbacks `Book Antiqua, Georgia, Times New Roman, serif`. Carries the masthead, all headlines, and long-form body.
- **Secondary (UI / chrome)**: `Helvetica Neue` with fallbacks `Helvetica, Arial, sans-serif`. Runs navigation, kickers, captions, and button labels.
- **Tracking**: the masthead and large uppercase display use generous positive tracking (3px on the masthead); body and serif copy sit at 0.

### Hierarchy

The full type scale lives in the `typography:` token block. Reference tokens directly.

| Token | Use |
|---|---|
| `masthead` | 40px / Plantin / 3px tracking / uppercase — the centered MONOCLE wordmark |
| `display` | 33.6px / Plantin / uppercase — major feature display lines |
| `heading` | 32px / Plantin — story headlines |
| `heading-sub` | 28px / Plantin — sub-section heads |
| `headline-sans` | 24px / Helvetica Neue / 700 — sans headlines for UI modules |
| `body` | 16px / Helvetica Neue — standard UI and short copy |
| `body-serif` | 18px / Plantin — long-form article body |
| `kicker` | 12px / Helvetica Neue / 700 / uppercase / 1px — the deck above headlines |
| `caption` | 13px / Helvetica Neue — captions and metadata |
| `button-ui` | 13px / Helvetica Neue / 700 — button and CTA labels |

### Principles
- **Serif reads, sans labels**: Plantin for everything you read at length; Helvetica Neue for the furniture around it.
- **Caps for authority**: the masthead and display lines are uppercase with positive tracking — the print-cover gesture.
- **Weight, not size, for sans hierarchy**: Helvetica modules lean on 700 vs 400 rather than dramatic size jumps.
- **No light weights**: the system stays at regular and bold — it never gets airy or thin.

## Layout

### Spacing System
The full scale is in the `spacing:` token block. Base rhythm is loosely 5px-derived (5 / 7.5 / 15 / 30), echoing a print column measure rather than an 8px software grid. Generous vertical gaps (`{spacing.3xl}`–`{spacing.4xl}`) separate major editorial bands; story internals stay tight (`{spacing.sm}`–`{spacing.md}`).

### Grid & Container
- Wide, multi-column story grid — the homepage reads like a front page with several decks side by side
- Centered masthead with flanking columns (editor's note left, mascot/intelligence right)
- Stories separated by full-width hairline rules rather than card chrome

### Whitespace Philosophy
- **White is the page, not a device**: whitespace functions like the margins of a printed broadsheet
- **Rules over boxes**: separation comes from hairlines (`{colors.border}`), never from shadows or fills
- **Dense but calm**: a lot of content per screen, kept legible by strict alignment and the serif/sans split

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Nearly the entire page — stories, nav, hero |
| Rule (Level 1) | 1px `{colors.border}` hairline | Story dividers and section rules |
| Strong Rule (Level 2) | 1px–2px `{colors.border-strong}` | Heavy rules under mastheads and section heads |
| Soft (Level 3, rare) | `0 2px 8px` at ~12% ink (`{colors.shadow-soft}`) | The occasional floating promo card or overlay |

**Shadow Philosophy**: Monocle is essentially shadowless. It is a print object translated to screen, so depth is communicated the way a newspaper does it — with rules, weight, and whitespace, not elevation. The rare soft shadow appears only on a true overlay (a cookie dialog, a promo card). If you find yourself reaching for a drop shadow on page content, you've left the Monocle language.

## Shapes

The full radius scale is in the `rounded:` token block.

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Everything — buttons, cards, inputs, banners, images |
| `sm` | 2px | A single subtle softening (e.g. a small dialog corner) |
| `pill` | 9999px | Only a tracking/status dot — never a button |

The system is effectively binary toward square: corners are sharp. This squareness is load-bearing — it's what makes the page read as printed rather than as software. Do not round buttons or cards.

## Components

The complete component spec lives in the `components:` token block.

### Buttons
- **`button-primary`** — Monocle yellow (`{colors.primary}`) fill, near-black text, square corners, bold Helvetica label. This is the SUBSCRIBE button and almost the only place yellow appears. Hover deepens to `{colors.primary-hover}`.
- **`button-secondary`** — White fill, near-black text, square. The quieter "read more / shop" action.

### Cards
- **`card`** — White surface, square corners, no shadow. "Cards" are really story blocks separated by hairlines, not floating panels.

### Inputs
- **`input`** — White fill, square, hairline border. **`input-focus`** stays minimal — a darkened border, no glow.

### Navigation
- **`nav-bar`** — White, uppercase Helvetica labels (`{typography.kicker}`), sits under the centered masthead. AFFAIRS · BUSINESS · CULTURE · DESIGN — newspaper section nav.

### Editorial Elements
- **`promo-banner`** — Salmon (`{colors.accent-salmon}`) ground, near-black text, full-width at the very top. The only place salmon appears.
- **`kicker-label`** — Uppercase Helvetica deck (`{typography.kicker}`) above serif headlines.
- **`badge`** — Red (`{colors.accent-red}`) flag with white text for breaking/section emphasis.
- **`link`** — Near-black, no underline; hover shifts to editorial red (`{colors.accent-red}`).

## Do's and Don'ts

### Do
- Set headlines and long-form body in **Plantin** serif (`{typography.heading}`, `{typography.body-serif}`) — it's the brand's voice
- Use **Helvetica Neue** for nav, kickers, captions, and buttons (`{typography.kicker}`) — the sans/serif split is the signature
- Reserve **Monocle yellow** (`{colors.primary}`) almost entirely for the SUBSCRIBE button, with near-black text
- Center the masthead in spaced uppercase serif (`{typography.masthead}`) — it's the print cover translated
- Separate content with hairline rules (`{colors.border}`), never with shadows or rounded cards
- Keep corners square (`{rounded.none}`) on everything — buttons, cards, inputs, images
- Use salmon (`{colors.accent-salmon}`) only as the top promo-banner ground
- Stack uppercase kickers (`{typography.kicker}`) above serif headlines for the newspaper deck

### Don't
- Don't make yellow a general-purpose color — it's the subscribe stamp, not a fill for every CTA
- Don't round buttons or cards — squareness is what makes Monocle read as print
- Don't add drop shadows to page content — the system is shadowless; use rules and weight
- Don't set headlines in a sans — Plantin serif is non-negotiable for editorial text
- Don't introduce gradients, glows, or animated heros — the calm flatness is the message
- Don't put white text on the yellow — yellow always carries near-black (`{colors.on-primary}`)
- Don't reach for thin or light weights — the system lives at regular and bold

---

## Responsive Behavior

### Breakpoints
*(Monocle's layout reflows across a dense multi-column print grid; the stops below reflect its observed behavior.)*

| Name | Width | Key Changes |
|---|---|---|
| Mobile | <640px | Single story column; masthead shrinks but stays centered; nav collapses to a menu; promo banner stacks |
| Tablet | 640–1023px | Two-column story grid; section nav wraps; serif display scales down |
| Desktop | 1024–1279px | Full multi-column front-page grid; masthead flanked by editor note + mascot |
| Large | ≥1280px | Wide centered measure; generous column gutters; full editorial density |

### Touch Targets
- Nav and SUBSCRIBE button keep comfortable tap height (~40px) despite small label type
- Kicker and caption type stay at 12–13px; tap rows in story lists carry extra vertical padding

### Collapsing Strategy
- **Navigation**: full section bar → menu toggle on mobile; SUBSCRIBE persists
- **Masthead**: stays centered, scales down; flanking columns drop on mobile
- **Grid**: multi-column front page collapses to a single serif story stream
- **Spacing**: editorial band gaps compress from `{spacing.4xl}` toward `{spacing.xl}`

### Image Behavior
- Photography runs square-cornered, edge-to-edge within its column, no rounding or shadow
- Images reflow as grid children; aspect ratios are preserved as the column narrows

---

## Agent Prompt Guide

### Quick Color Reference
- Background: Paper White (`{colors.background}`)
- Text: Near-Black (`{colors.ink}`)
- Brand accent: Monocle Yellow (`{colors.primary}`) — subscribe button only
- Secondary text: Mid Gray (`{colors.ink-secondary}`)
- Border: Hairline (`{colors.border}`)
- Promo flash: Salmon (`{colors.accent-salmon}`)

### Example Component Prompts

- "Create a centered masthead: the word MONOCLE in Plantin serif (`{typography.masthead}`), uppercase, 3px letter-spacing, near-black (`{colors.ink}`) on white (`{colors.background}`), with a thin editor's note column on the left in 12px uppercase Helvetica (`{typography.kicker}`)"
- "Build the SUBSCRIBE button: Monocle yellow (`{colors.primary}`) fill, near-black (`{colors.on-primary}`) bold Helvetica label (`{typography.button-ui}`), square corners (`{rounded.none}`), 10px 18px padding; hover deepens to `{colors.primary-hover}`"
- "Lay out a story block: an uppercase kicker (`{typography.kicker}`, `{colors.ink-secondary}`) like 'TRAVEL & RESTAURANTS', a Plantin serif headline (`{typography.heading}`), then 18px Plantin body (`{typography.body-serif}`), separated from the next story by a 1px `{colors.border}` hairline rule — no card, no shadow"
- "Create the top promo banner: full-width salmon (`{colors.accent-salmon}`) ground, near-black body text (`{typography.body}`), square corners, with a small square yellow (`{colors.primary}`) inline CTA"
- "Design the section nav: white bar (`{colors.background}`), uppercase Helvetica labels (`{typography.kicker}`) — AFFAIRS · BUSINESS · CULTURE · DESIGN — square, no rounding, hairline rule beneath"

### Iteration Guide

1. Start on paper white (`{colors.background}`) with near-black ink (`{colors.ink}`). If you reached for a gradient or tinted background, stop — Monocle is flat white.
2. Set anything you'd actually read in **Plantin** serif. UI furniture (nav, kickers, buttons) goes in Helvetica Neue.
3. Square every corner (`{rounded.none}`). If a button or card is rounded, it's no longer Monocle.
4. Spend yellow (`{colors.primary}`) only on the subscribe action, with near-black text. Salmon is the top banner; red flags breaking sections.
5. Separate content with hairline rules (`{colors.border}`), never with shadows.
6. Stack an uppercase kicker above each serif headline — the newspaper deck structure.
7. Keep weights at regular and bold; never go thin. The page should feel like a freshly-pressed broadsheet.

---

## 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 Monocle. Brand names and trademarks belong to their respective owners.