---
title: "Monocle design system"
variant: extended
source: https://monocle.com/
captured_at: 2026-10-12
theme: light
industry: media
generator: Design DNA (https://four.wiralomi.com/style/monocle-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Monocle · Design System

> A considered, print-inspired window on the world.

**Theme:** light · **Industry:** media · **Source:** https://monocle.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Monocle’s homepage pairs a restrained editorial framework with photography-led reporting, radio, shop, and city-guide content. Fine rules, confident serif headlines, and occasional colour blocks bring magazine character to a dense, varied feed.

## North star

Treat the homepage like a carefully edited magazine: let typography, imagery, and fine rules organize content while interface colour stays selective.

## Overview

The page is built on a white canvas, with near-black type and hairline grey dividers establishing a crisp, print-like editorial frame. Plantin carries most reading: large story headlines, descriptions, captions and category headings feel literary without becoming ornate. Helvetica Neue provides the practical counterpoint for navigation and bold uppercase controls. Content alternates between tightly composed multi-column feeds, image-led story cards, product rows and open white intervals. Most colour comes from photography and illustrated assets rather than interface chrome. Sky cyan marks City Guides cards; warm ivory distinguishes Events; saturated yellow is reserved for radio actions and select campaign artwork. A large centered masthead and compact navigation create a recognizable opening, while recurring section labels, thin rules and consistent card boundaries help readers scan a long homepage. The black footer closes the page as a distinct, information-dense band.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Editorial Ink | `#000000` | `--color-editorial-ink` | brand | Primary headlines, body text, masthead, footer canvas, dark controls, and high-contrast editorial structure. |
| Paper White | `#ffffff` | `--color-paper-white` | surface | Main page canvas, open space around stories, and text on dark radio and footer surfaces. |
| Guide Cyan | `#64d5ff` | `--color-guide-cyan` | accent | Distinctive backgrounds for Monocle City Guides cards; a content-category colour, not a general page background. |
| Caption Grey | `#6e6e6e` | `--color-caption-grey` | neutral | Muted supporting text and restrained secondary information alongside stories and media. |
| Radio Yellow | `#ffc500` | `--color-radio-yellow` | accent | Listen Live radio call-to-action and small audio accents; use sparingly against black. |
| Event Ivory | `#fdfcf3` | `--color-event-ivory` | surface | Warm ivory background for the Events section, setting it apart from the white editorial feed. |
| Link Blue | `#0000ee` | `--color-link-blue` | semantic | Measured link accent; keep isolated and subordinate to the page’s predominantly black link treatment. |
| Soft Cream | `#fdfbe4` | `--color-soft-cream` | surface | Pale warm section surface appearing in limited campaign or signup areas, not the main canvas. |
| Rule Grey | `#d9d9d9` | `--color-rule-grey` | neutral | Thin dividers and subtle boundaries between columns, cards, and footer information. |
| Radio Charcoal | `#2a2929` | `--color-radio-charcoal` | surface | Dark radio card surface; use for media-module contrast rather than as the main footer black. |
| Navigation Grey | `#b3b3b3` | `--color-navigation-grey` | neutral | Muted navigation and footer labels on dark surfaces, preserving legibility without competing with headlines. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Paper White) · `--color-surface` → `#64d5ff` (Guide Cyan) · `--color-surface-2` → `#fdfcf3` (Event Ivory) · `--color-surface-3` → `#000000` (Editorial Ink) · `--color-surface-4` → `#fdfbe4` (Soft Cream) · `--color-text` → `#000000` (Editorial Ink) · `--color-text-muted` → `#ffffff` (Paper White) · `--color-text-subtle` → `#6e6e6e` (Caption Grey) · `--color-border` → `#d9d9d9` (Rule Grey) · `--color-accent` → `#64d5ff` (Guide Cyan) · `--color-accent-2` → `#ffc500` (Radio Yellow) · `--color-accent-3` → `#0000ee` (Link Blue) · `--color-on-accent` → `#000000` (Editorial Ink)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#64d5ff` | 12.5:1 | AAA |
| `#000000` | `#fdfcf3` | 20.39:1 | AAA |
| `#ffffff` | `#64d5ff` | 1.68:1 | fail |
| `#ffffff` | `#fdfcf3` | 1.03:1 | fail |
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#6e6e6e` | `#ffffff` | 5.1:1 | AA |
| `#6e6e6e` | `#64d5ff` | 3.04:1 | AA-large |
| `#6e6e6e` | `#fdfcf3` | 4.95:1 | AA |
| `#6e6e6e` | `#000000` | 4.12:1 | AA-large |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Plantin | `--font-body` | webfont | 400 | Editorial headlines, article copy, captions, category titles, and selected display labels. | Libre Baskerville |
| Helvetica Neue | `--font-helvetica-neue` | webfont | 400, 700 | Navigation, bold story subheads, button labels, and compact utility text. | Inter |

- **Plantin:** Regular-weight serif dominates; preserve natural sentence case for stories and uppercase treatment for selected section labels.
- **Helvetica Neue:** Use regular for navigation and bold for controls; uppercase buttons and navigation remain clean, compact, and untracked.

### Type scale — Minor Third (ratio ≈ 1.17, base 20px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 32px | 400 | 1.2 | 0 | — | Plantin | Primary masthead and prominent lead-story headline. |
| h2 | 28px | 400 | 1.25 | 0 | uppercase | Plantin | Uppercase editorial section headings. |
| h3 | 24px | 700 | 1.25 | 0 | — | Helvetica Neue | Bold sans-serif story or module subheadings. |
| body | 20px | 400 | 1.25 | 0 | — | Plantin | Article descriptions and primary editorial reading text. |
| caption | 18px | 400 | 1.44 | 0 | — | Plantin | Image captions, supporting notes, and secondary story details. |
| button | 16px | 700 | 1.5 | 0 | uppercase | Helvetica Neue | Bold uppercase radio and utility calls to action. |
| nav | 16px | 400 | 1 | 0 | — | Helvetica Neue | Top-level section navigation and utility links. |
| link | 20px | 400 | 1.25 | 0 | — | Plantin | Story titles and editorial links within content cards. |

## Spacing & layout

- Base unit **4px**, density **compact**.
- Scale (most used values): 4, 8, 12, 16, 32 px.
- Section rhythm 32px · element gap 4px · card padding 16px · max content width 1296px.

A centered content frame reaches a measured maximum width of 1296px, with compact, modular spacing. The masthead spans the frame above a horizontal navigation row; the lead area then uses a strong editorial column alongside smaller story and radio columns. Lower modules shift among four-column story rows and denser multi-column grids. Thin rules define section starts and card edges. White space varies deliberately: tight within content cards, more generous around masthead and section transitions. The overall effect is information-rich but orderly.

## Shape & elevation

- Radius: button `50%` · card `8px` · xs `8px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.25s ease-in` on interactive elements.

The interface is predominantly flat, with no measured shadow system. Fine grey rules separate content columns and section boundaries; cards rely on image edges, spacing, and occasional measured rounded corners rather than raised surfaces. Keep layering restrained: dark radio panels and coloured guide cards provide contrast through fill, not shadow.

## Imagery

Photography is the dominant content visual: editorial portraits, places, objects, architecture, and product images appear in consistently cropped cards. Images retain natural colour and are not covered by heavy filters or decorative frames. Illustrated portraits and drawings appear in selected editorial and newsletter modules, giving variety without changing the page’s print-oriented tone. Radio and magazine artwork can carry brighter colours inside their own modules.

## Components

### Masthead and section navigation

Large centered Monocle wordmark framed by thin horizontal rules, with small editorial identity blocks at the sides and a compact, centered sans-serif section menu.

### Lead editorial feed

Large Plantin story headline and summary sit beside image-led secondary stories and a radio module; organize the area into clearly ruled columns.

### Radio module

Use a dark charcoal or black panel, white Plantin labels, and a saturated yellow Listen Live action with black uppercase sans-serif text.

### Story cards

Pair editorial photography with small uppercase category labels, Plantin headlines, concise copy, and discreet metadata; separate adjacent cards with fine rules.

### City Guide cards

Use measured Guide Cyan #64d5ff as a flat card background with black text and restrained, magazine-like city labels.

### Section headers

Set prominent editorial section titles in uppercase Plantin and anchor content groups with thin grey or black rules.

### Dark footer

Close with a full black band, white Monocle identity, compact navigation columns, muted secondary labels, and yellow subscription emphasis.

### Measured component styles

- **Primary button** (“LISTEN LIVE”): background #ffc500 · text #000000 · border 1px solid · radius 0px · padding 0px 16px · 700 13px Helvetica Neue · uppercase
- **Secondary button** (“VIEW FULL PROGRAMME”): background #000000 · text #ffffff · border 1px solid #ffffff · radius 0px · padding 0px 16px · 700 13px Helvetica Neue · uppercase
- **Link** (“MONOCLE RADIO”): transparent background · text #ffffff · radius 0px · padding 0px · 400 20px Plantin · uppercase
- **Card** (“MONOCLE CITY GUIDES Amsterdam”): background #64d5ff · text #000000 · radius 8px · padding 16px · 400 16px Plantin
- **Navigation item** (“Affairs”): transparent background · text #b3b3b3 · radius 0px · padding 0px · 400 16px Helvetica Neue

## Do

- Keep the canvas white and the editorial hierarchy high contrast.
- Use Plantin-style serif typography for stories and long-form copy.
- Reserve Helvetica Neue-style sans serif for navigation and controls.
- Separate content groups with thin, understated rules.
- Use bright colour only for specific content modules and actions.
- Let photography remain natural and lead the card composition.

## Don't

- Do not turn every section into a coloured panel.
- Do not add shadows or decorative gradients.
- Do not replace fine rules with heavy card borders.
- Do not make navigation louder than editorial headlines.
- Do not use rounded, app-like UI styling across the page.
- Do not apply tinted overlays to editorial photography.

## Agent prompt

Build a new editorial homepage in Monocle’s restrained, print-inspired style. Use Paper White (#ffffff) as the main canvas and Editorial Ink (#000000) for headlines, copy, and strong rules. Set story headlines and reading text in a Plantin-like serif; use a clean Helvetica Neue-like sans serif for navigation and bold uppercase controls. Organize content in a centered frame with a prominent masthead, compact horizontal navigation, and varied editorial columns. Use natural, tightly cropped photography, fine grey dividers, and concise metadata to keep a dense feed scannable. Apply Guide Cyan (#64d5ff) only to city-guide content, Event Ivory (#fdfcf3) to a distinct event block, and Radio Yellow (#ffc500) sparingly for audio actions. Keep surfaces flat, spacing compact, and the footer black.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | navigation | Centered wordmark with small identity and newsletter cues arranged across one horizontal band. | brand recognition, newsletter discovery | large centered masthead, thin horizontal rule, small side illustrations |
| 2 | content-feed | Lead story and image column sit beside secondary stories and a dedicated radio sidebar. | editorial discovery, radio listening | multi-column story feed, image-led cards, dark radio panel, yellow audio CTA |
| 3 | content-feed | Compact multi-column row of radio and programme cards on a dark band. | browse programmes, open episode | dark section surface, horizontal card row, media artwork |
| 4 | announcement | Centered, wide campaign banner separated from surrounding editorial sections. | campaign awareness, magazine promotion | horizontal banner, bright campaign artwork |
| 5 | content-feed | Four editorial columns with image, headline, excerpt, and compact metadata. | scan across topics, read story | four-column grid, image-led cards, fine separators |
| 6 | team | Horizontal roster of illustrated staff portraits with names and job titles. | discover contributors, browse profiles | portrait row, compact identity captions |
| 7 | category-nav | Horizontal set of cyan city cards followed by a brief supporting line. | browse destinations, discover guide series | cyan cards, city labels, horizontal carousel |
| 8 | content-feed | Editorial stories arranged in a broad row of image, headline, and summary modules. | browse by topic, read related stories | section labels, editorial imagery, multi-column layout |
| 9 | product-grid | Horizontal product cards with large photography and compact product names and prices. | browse merchandise, view product | product photography, price labels, carousel affordance |
| 10 | content-feed | Partner features in a horizontal row, divided by fine vertical rules. | explore partner stories, visit feature | editorial cards, thin separators, partner labels |
| 11 | product-grid | Book covers displayed in a compact horizontal product grid with titles and prices. | browse books, view book details | cover-led cards, compact metadata, carousel affordance |
| 12 | content-feed | Multi-column long-read cards with prominent images, category labels, and read-time metadata. | discover long reads, compare topics | editorial image cards, thin dividers, reading-time labels |
| 13 | other | Warm ivory section with centered heading and paired event descriptions and images. | discover events, open event details | Event Ivory background, centered section title, paired text and images |
| 14 | newsletter | Illustration and signup copy arranged side by side with a compact form. | newsletter signup, enter email | illustrated artwork, editorial heading, form fields and controls |
| 15 | footer | Full-width black footer with brand block and several compact navigation columns. | explore site sections, subscribe or share | black background, white brand mark, muted link columns, yellow subscription action |

## Source CSS custom properties (selected)

```css
--wp-block-synced-color: #7a00df;
--wp-block-synced-color--rgb: 122,0,223;
--wp-bound-block-color: #7a00df;
--wp-editor-canvas-background: #ddd;
--wp-admin-theme-color: #007cba;
--wp-admin-theme-color--rgb: 0,124,186;
--wp-admin-theme-color-darker-10: #006ba1;
--wp-admin-theme-color-darker-10--rgb: 0,107,160.5;
--wp-admin-theme-color-darker-20: #005a87;
--wp-admin-theme-color-darker-20--rgb: 0,90,135;
--wp-admin-border-width-focus: 2px;
--wp--preset--font-size--normal: 16px;
--wp--preset--font-size--huge: 42px;
--wp--preset--color--primary: #ffffff;
--wp--preset--color--inverted: #000000;
--wp--preset--color--neutral: #fdfcf3;
--wp--preset--color--grey: #e7e7e7;
--wp--preset--font-size--small: 14px;
--wp--preset--font-size--medium: 18px;
--wp--preset--font-size--large: 23px;
--wp--preset--font-family--plantin: Plantin, ItalicAmpersand, "Book Antiqua", Georgia, "Times New Roman", serif;
--wp--preset--font-family--helvetica-neue: "Helvetica Neue", Helvetica, Arial, sans-serif;
--wp--preset--font-family--monocons: "monocons", "Helvetica Neue", Helvetica, Arial, sans-serif;
--wp--preset--text-shadow--light: 0.05em 0.05em 0.1em rgba(0, 0, 0, 0.3);
--wp--preset--text-shadow--strong: 0.1em 0.1em 0.25em rgba(0, 0, 0, 0.5);
--wp--preset--spacing--20: 0.44rem;
--wp--preset--spacing--30: 0.67rem;
--wp--preset--spacing--40: 1rem;
--wp--preset--spacing--50: 1.5rem;
--wp--preset--spacing--60: 2.25rem;
--wp--preset--spacing--70: 3.38rem;
--wp--preset--spacing--80: 5.06rem;
--wp--preset--spacing--xs: 0.25rem;
--wp--preset--spacing--sm: 0.5rem;
--wp--preset--spacing--md: 1rem;
--wp--preset--spacing--lg: 1.5rem;
--wp--preset--spacing--xl: 2rem;
--wp--preset--spacing--xxl: 3rem;
--wp--preset--spacing--xxxl: 4rem;
--wp--preset--spacing--xxxxl: 5rem;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/monocle-com