# Monocle · Design system migration spec

> Source: https://monocle.com  ·  Curated by OpenDesign  ·  en

> Monocle is an excellent example of a premium editorial brand that leverages restraint and high-quality typography to convey a sense of global sophistication.

## 1. Identity DNA

The Monocle design system is a high-end international magazine distilled into a digital format. It operates on a principle of rigorous restraint, where every element serves a clear editorial purpose.

**One-liner:** A refined editorial platform for global affairs, culture, and lifestyle.
**Keywords:** Editorial · Global Affairs · Lifestyle · Curated · Premium
**Analogy:** A high-end international magazine distilled into a digital format.

## 2. Color

The palette is a study in high-contrast clarity: a stark foundation of pure black and white, punctuated by a single vibrant yellow for primary action. Muted grays provide subtle structural hierarchy without competing for attention.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-soft` | `#F8F8F8` | card background |
| `--ink` | `#000000` | body text |
| `--ink-soft` | `#141414` | secondary text |
| `--muted` | `#6E6E6E` | placeholder |
| `--muted-soft` | `#B3B3B3` | weak hint |
| `--accent` | `#FFC500` | single accent |
| `--line` | `rgba(0,0,0,0.1)` | divider |

**Color principle:** High-contrast black and white with a single vibrant yellow accent and muted grays for structure.

The guiding principle is absolute focus: the accent yellow exists solely to direct the eye to the most important interactive element.

## 3. Typography

Typography establishes a voice of authoritative sophistication, pairing transitional-serif fonts for prominent mastheads and headers with clean grotesque-sans for body text. This combination creates a clear hierarchy, with uppercase treatments defining navigational zones.

- **Display:** transitional-serif
- **Body:** grotesque-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 96px | 1.0 | 400 | -0.5px | Main masthead and major section headers |
| h1 | 48px | 1.1 | 700 | -0.25px | Primary article titles |
| h2 | 24px | 1.2 | 700 | 0px | Section headings like TRAVEL, RETAIL |
| body | 16px | 1.5 | 400 | 0px | Main article body text |
| caption | 13px | 1.4 | 400 | 0.1px | Captions and small metadata |

**Type rules:**
- Use uppercase for all-caps navigation and secondary section links.
- Strictly maintain high contrast between black text and white backgrounds.
- Keep the masthead centered and prominent with a large serif font.

## 4. Spacing

Layout rhythm is governed by a consistent 4px grid, providing a reliable foundation for all spacing decisions.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 80 / 96 px
- **Rhythm:** Consistent 4px grid with generous whitespace for editorial clarity.

## 5. Surfaces

Surfaces are defined by thin, 1px borders and a precise shadow system that creates a subtle, layered depth. The primary background is a clean, uninterrupted white, allowing content to be the focal point.

- **Radius:** sm 4px · md 8px · lg 12px · pill 999px
- **Shadows:**
  - 0px 0px 0px 1px #D9D9D9
  - 0px 30px 70px 0px rgba(0,0,0,0.3)
- **Borders:** Thin 1px black or gray borders used for structural separation and buttons.

## 6. Layout

The layout skeleton is a structured 12-column grid, anchored by a fixed, centered top navigation bar. Generous vertical whitespace separates editorial sections, reinforcing a calm, curated reading experience.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** A structured 12-column grid with a fixed, centered top navigation bar.

## 7. Motion & Interaction

Motion is minimal and purposeful, using subtle background-color changes and transforms on interactive elements. All transitions follow a smooth 0.25s timing, providing immediate but refined feedback.

- **Durations:** micro 220ms · small 250ms · medium 400ms
- **Easing:** `ease-in`
- **Patterns:**
  - Subtle background-color and transform transitions on interactive elements.
  - Linear slide or fade transitions for UI state changes.

- **Hover:** Subtle background-color changes or transform shifts on buttons and links.
- **Click:** Immediate visual response with cursor pointer states.
- **Transition:** All interactive elements use smooth 0.25s transitions.
- **Keyboard:** Standard tab-based navigation supported.

## 8. Voice & Don'ts

The editorial voice is direct, globally minded, and sophisticated, mirroring the clarity of the visual system. Language is functional and authoritative, with headlines often in all-caps to denote categorical importance.

- **Tone:** Authoritative, sophisticated, and globally minded.
- **Headline style:** Direct, informative, and often in all-caps for category navigation.
- **CTA style:** Bold, clear, and functional, using high-contrast yellow for primary actions like 'SUBSCRIBE'.
- **Avoid:** Avoid overly casual language or excessive exclamation points. / Avoid cluttering the interface with too many competing visual elements. / Avoid using low-contrast colors that compromise readability.

### Don'ts
- ❌ Don't use primary colors like red, blue, or green — screenshot shows yellow as the sole high-chroma accent.
- ❌ Don't use rounded, pill-shaped buttons everywhere — screenshot shows rectangular or slightly rounded buttons (4px radius).
- ❌ Don't use decorative script or handwriting fonts — screenshot shows structured transitional-serifs and clean sans-serifs.
- ❌ Don't leave the background dark or colored — screenshot shows a clean white background (#FFFFFF) for the main content area.
- ❌ Don't hide the primary navigation — screenshot shows persistent top-level links for MAGAZINE, RADIO, SHOP.
- ❌ Don't use complex gradients for backgrounds — screenshot shows solid white or simple transparent-to-white gradients.

The system deliberately avoids decorative flair, secondary accent colors, and low-contrast elements that would compromise its core tenets of readability and premium curation.

## System Prompt (paste into AI tool)

```
Monocle is a refined editorial platform focusing on global affairs, culture, and lifestyle. It uses a high-contrast palette of pure black (#000000) on white (#FFFFFF) with a single vibrant yellow (#FFC500) as the primary accent. The typography relies heavily on transitional-serif fonts for headers and mastheads, paired with clean grotesque-sans for body text. Critical design rules include: never use low-contrast grays for primary text, always maintain generous whitespace to preserve the premium editorial feel, and strictly adhere to the two-color-plus-yellow palette. Avoid using overly decorative fonts, cluttered layouts, or any secondary accent colors that would distract from the curated content.
```
