---
version: alpha
name: Dezeen
description: Monochrome editorial system for the world's most influential architecture and design magazine — ink-black canvas, pure white type, orange hover flashes, zero decoration.

colors:
  # Canvas / surface
  background: "#ffffff"
  surface: "#000000"
  surface-alt: "#f3f3f3"    # light section backgrounds, off-white panels

  # Text / ink
  ink: "#000000"
  on-background: "#000000"
  on-surface: "#ffffff"

  # Brand accent
  primary: "#ff7617"        # orange — link hovers, section labels, key CTA strokes
  on-primary: "#ffffff"
  primary-container: "#ffe5cc"  # was rgba(255,118,23,0.15) — Google format requires hex

  # Interaction states
  text-hover: "#ff7617"     # link hover color on white canvas
  focus-ring: "#ff7617"     # orange focus ring for keyboard navigation
  focus-tint: "#ffe5cc"     # was rgba(255,118,23,0.15) — Google format requires hex

  # Neutrals
  ink-secondary: "#757575"  # bylines, datelines, captions
  ink-muted: "#999999"      # disabled, placeholder text

  # Borders
  border: "#d8d8d8"         # subtle dividers, card borders
  border-strong: "#000000"  # strong rule, header underlines

  # Link states
  link-default: "#556e9b"   # un-hovered link blue (navigation, article links)
  link-hover: "#ff7617"     # orange — universal hover

  # Shadow tints (rare — Dezeen is almost entirely flat)
  shadow-soft: "#e5e5e5"    # was #0000001a (alpha) — flattened rgba(0,0,0,0.10) over white canvas

  # Awards accent
  awards-gold: "#faa61a"    # Dezeen Awards branding color

typography:
  display-hero:
    fontFamily: "StandardCT, Montserrat, ui-sans-serif, system-ui, sans-serif"
    fontSize: 48px
    fontWeight: 700
    lineHeight: 1.08
    letterSpacing: -0.5px
  display:
    fontFamily: "StandardCT, Montserrat, ui-sans-serif, system-ui, sans-serif"
    fontSize: 34px
    fontWeight: 700
    lineHeight: 1.15
    letterSpacing: -0.25px
  heading-section:
    fontFamily: "StandardCT, Montserrat, ui-sans-serif, system-ui, sans-serif"
    fontSize: 27px
    fontWeight: 700
    lineHeight: 1.25
    letterSpacing: 0px
  heading-sub:
    fontFamily: "StandardCT, Montserrat, ui-sans-serif, system-ui, sans-serif"
    fontSize: 19px
    fontWeight: 700
    lineHeight: 1.25
    letterSpacing: 0px
  article-headline:
    fontFamily: "StandardCT, Montserrat, ui-sans-serif, system-ui, sans-serif"
    fontSize: 18.9px
    fontWeight: 700
    lineHeight: 1.38
    letterSpacing: 0px
  body-large:
    fontFamily: "Chronicle Text G1 A, Chronicle Text G1 B, Georgia, serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0px
  body:
    fontFamily: "Chronicle Text G1 A, Chronicle Text G1 B, Georgia, serif"
    fontSize: 16.2px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  nav-link:
    fontFamily: "StandardCT, Montserrat, ui-sans-serif, system-ui, sans-serif"
    fontSize: 13px
    fontWeight: 700
    lineHeight: 1.0
    letterSpacing: 0.5px
  button-ui:
    fontFamily: "StandardCT, Montserrat, ui-sans-serif, system-ui, sans-serif"
    fontSize: 13px
    fontWeight: 700
    lineHeight: 1.0
    letterSpacing: 0.3px
  caption:
    fontFamily: "Chronicle Text G1 A, Chronicle Text G1 B, Georgia, serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0px
  label:
    fontFamily: "StandardCT, Montserrat, ui-sans-serif, system-ui, sans-serif"
    fontSize: 11px
    fontWeight: 700
    lineHeight: 1.0
    letterSpacing: 1px

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

rounded:
  none: 0px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-surface}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 10px 20px
  button-primary-hover:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 10px 20px
  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    border: "2px solid {colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 9px 20px
  button-secondary-hover:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-surface}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 9px 20px

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

  card-category-label:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-surface}"
    typography: "{typography.label}"
    rounded: "{rounded.none}"
    padding: 4px 8px
  card-category-label-hover:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label}"
    rounded: "{rounded.none}"
    padding: 4px 8px

  input:
    backgroundColor: "{colors.surface-alt}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 0px 5px
    border: "none"
  input-focus:
    backgroundColor: "{colors.surface-alt}"
    textColor: "{colors.ink}"
    border: "2px solid {colors.ink}"
    outline: "none"

  nav-primary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: 12px 0px
  nav-link-default:
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
  nav-link-hover:
    textColor: "{colors.primary}"
    textDecoration: "none"

  story-tile:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 0px
  story-tile-headline-hover:
    textColor: "{colors.primary}"

  tag:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-surface}"
    typography: "{typography.label}"
    rounded: "{rounded.none}"
    padding: 3px 8px
  tag-hover:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.none}"
    padding: 3px 8px

  footer:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-surface}"
    typography: "{typography.caption}"
    padding: 40px 24px
---

# Dezeen Design System

## Overview

Dezeen's homepage is one of the cleanest editorial environments in digital media: a pure white canvas that functions like a very expensive sheet of photographic paper, with near-black ink for every text element and virtually no color until an interaction fires. The dominant canvas is `{colors.background}` — a commitment so total it can read as antiseptic until you notice how precisely it frames each image. Architecture and design photography provides all the color the page will ever have; the chrome makes zero demands on the eye.

The signature graphic decision is how discipline breaks on hover. Almost everything on rest — headlines, category labels, thumbnail overlays, pagination handles — flips to a single shade of pure signal orange (`{colors.primary}`). The transition happens in 0.2 seconds with the default `ease` curve, producing a quality that's less like a website state change and more like a neon detail in a black-and-white film. It's loud, it's unapologetic, and it's exactly right for a publication that is itself in the business of drawing attention to things worth looking at.

Typography splits across two families with complementary roles. StandardCT — Dezeen's custom sans, closest in spirit to Montserrat but with slightly tighter metrics — carries everything that reads as editorial furniture: headlines, section labels, navigation, buttons. Chronicle Text G1, a Hoefler & Co. serif, handles body copy and captions, lending long-form articles an old-paper legibility that balances the otherwise ruthless modernism of the page. The combination reads as intelligent, confident, and faintly European — consistent with the publication's positioning as the global authority on architecture and design.

**Key Characteristics:**
- Absolute monochrome canvas: `{colors.background}` white and `{colors.ink}` black are the only resting-state colors
- Single orange accent (`{colors.primary}`) deployed exclusively on hover and selected states — never decorative
- Zero border-radius anywhere: images, buttons, inputs, labels all meet at 90-degree corners
- Custom sans (StandardCT) for display and UI; Chronicle Text G1 serif for editorial reading text
- Density without cramping: 9.45px vertical rhythm in the grid, 30px between major blocks
- Image-forward layout: full-width thumbnails with inline overlays replace traditional cards
- 3px top-rule border (`{colors.border-strong}`) used as a section separator — the barest structural element
- Section labels live inside small black rectangles with uppercase white StandardCT — instantly scannable
- Navigation typography runs at 13px / 700 weight with 0.5px tracking — tight, editorial, legible
- Awards sub-brand gets its own gold (`{colors.awards-gold}`) without disturbing the primary palette
- No gradients, no shadows on editorial tiles — every surface is perfectly flat
- Link hover: `{colors.link-hover}` orange — applied universally from navigation to inline body links

## Colors

### Primary (Canvas & Ink)
- **Pure White** (`{colors.background}`): The entire editorial canvas. Treat as an absolute — never tint, never off-white sections unless using `{colors.surface-alt}`.
- **Pure Black** (`{colors.ink}`): All headline type, body links at rest, navigation text, section rules, button fills, footer background.

### Brand Accent
- **Dezeen Orange** (`{colors.primary}`): The single interactive signal across the entire site. Fires on link hover, headline hover, category-label hover, and tag hover. Nowhere at rest. This discipline is what gives it its force — use it only on hover/focus/active states.

### Text States
- **Secondary Text** (`{colors.ink-secondary}`): Bylines, datelines, metadata. Never used for headlines.
- **Muted Text** (`{colors.ink-muted}`): Disabled states, placeholder text.
- **Link Default** (`{colors.link-default}`): Mild steel blue for un-hovered navigational links (inherited from WordPress defaults, coexists with the black headline style).
- **Link Hover** (`{colors.link-hover}`): Orange — same as `{colors.primary}`.

### Borders & Dividers
- **Soft Border** (`{colors.border}`): Subtle section dividers and input borders.
- **Strong Border** (`{colors.border-strong}`): 3px top-rule separators on section headings and modules.

### Semantic
- **Awards Gold** (`{colors.awards-gold}`): Dezeen Awards brand identity only — not a general accent.
- **Focus Ring** (`{colors.focus-ring}`): Orange, matching the hover accent for accessibility.

## Typography

### Font Family
- **Primary (Display/UI)**: `StandardCT` — Dezeen's proprietary typeface. Closest Google substitute: `Montserrat` (weight 700). Used for all headlines, labels, navigation, and buttons.
- **Secondary (Editorial Body)**: `Chronicle Text G1 A` with fallback `Chronicle Text G1 B` (Hoefler & Co., self-hosted). Closest substitute: `Lora` or `Source Serif 4`. Used for article body, captions, long-form reading.
- **OpenType Features**: `"calt" 0, "kern", "liga" 0` — contextual alternates disabled, ligatures disabled, kerning enabled. Dezeen explicitly turns off ligatures for headline clarity.

### Hierarchy

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

| Token | Use |
|---|---|
| `display-hero` | 48px section hero headlines, feature story titles |
| `display` | 34px grid section headings |
| `heading-section` | 27px module titles |
| `heading-sub` | 19px sub-section labels |
| `article-headline` | 18.9px standard story headline in the grid |
| `body-large` | 18px article lead paragraph |
| `body` | 16.2px article body, story decks |
| `nav-link` | 13px / 700 navigation and section tab labels |
| `button-ui` | 13px / 700 button and CTA text |
| `caption` | 13px Chronicle Text G1 photo captions, timestamps |
| `label` | 11px / 700 uppercase category labels inside black pills |

### Principles
- **Two families, two registers.** StandardCT handles everything structural and navigational; Chronicle Text G1 handles everything you read at length. They never trade roles.
- **Bold is the only weight.** StandardCT appears almost exclusively at weight 700 across all sizes — the variation is in size, not weight. This produces a bold-only typographic register that suits a publication about things built to last.
- **No display lightness.** Unlike editorial peers who use thin or extralight display type, Dezeen goes heavier at larger sizes. The 48px display header is still 700. The confidence is blunt, not refined.
- **Serif is for reading, sans is for scanning.** Chronicle Text G1 only appears at body/caption sizes. Every headline, regardless of size, is StandardCT.
- **Letter-spacing is minimal** — labels get 0.5–1px for uppercase legibility; display headlines stay at 0px or slightly negative.

## Layout

### Spacing System
The complete spacing scale lives in the `spacing:` token block above. Base unit is 8px (standard scale) with a notable sub-unit at 9.45px for editorial row rhythm (consistent with a ~21px cap-height grid).

Dezeen's spacing reads as measured and purposeful — not as generous as magazine peers like Monocle, not as dense as tabloid news. Editorial blocks sit 30px apart vertically; within a story grid, thumbnail gutters are 20–26px; nav items are separated by 9–13px.

### Grid & Container
- Max content width: approximately 1480px at the widest breakpoint (header outer edge)
- Inner content: steps down through 1200px → 1170px → 1062px as viewport narrows
- Column structure: 4-column editorial grid at desktop; collapses to 2-column at 992px; single column at 600px
- Key lateral padding: ~30px on desktop, ~20px at tablet, ~15px at mobile

### Whitespace Philosophy
- Whitespace is functional, not expressive — Dezeen is not trying to feel "airy" or "premium" in a whitespace-luxury sense. It uses space to protect image edges and let headlines breathe between sections.
- The most generous whitespace is around photography; the tightest is in navigation and the search/filter bar.
- No padding inside story tiles — images bleed to the grid gutter, headlines start immediately below.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow, no border | All editorial tiles, images, story cards |
| Subtle (Level 1) | 1px `{colors.border}` top-rule | Section separator |
| Section Rule (Level 2) | 3px solid `{colors.border-strong}` top-rule | Major module separator |
| Label Block (Level 3) | Solid `{colors.ink}` fill rectangle | Category labels, section pills |
| Inverted (Level 4) | Full `{colors.ink}` zone | Footer, nav overlays |
| Focus Ring | 3px `{colors.focus-ring}` outline | Keyboard focus state |

**Shadow Philosophy**: Dezeen uses zero box-shadows on editorial surfaces. The only shadows in the extraction are noise-level artifacts (a single low-confidence overlay shadow). The entire depth hierarchy is expressed through fill color and rule weight — editorial ink is the only "elevation system" this site recognizes. If you feel the urge to add a `box-shadow: 0 2px 8px rgba(0,0,0,0.1)` to a story card, resist. That choice would immediately read as "something other than Dezeen."

## Shapes

The complete radius scale lives in the `rounded:` token block above.

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Every image, button, input, label, category pill, navigation — the absolute default |
| `pill` | 9999px | Reserved for round icon buttons and social share circles only |

Dezeen's shape language is binary: sharp rectangle or full circle, nothing between. The only curved elements on the entire homepage are the circular social media icon buttons in the footer. Every editorial element — thumbnails, CTA buttons, search inputs, category labels, even the inline alert/newsletter forms — meets at 90 degrees. Introducing 4px, 8px, or 12px radius anywhere on an editorial surface is a category error.

## Components

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

### Button variants
- **`button-primary`** — Black fill, white StandardCT label, square corners. The definitive "Subscribe" or "See more" treatment. Hover flips to orange (`button-primary-hover`).
- **`button-secondary`** — White fill, 2px black border. Inverts to black on hover. Used for secondary actions alongside a primary black button.
- **`button-primary-hover` / `button-secondary-hover`** — Orange or inverted state. 0.2s ease.

### Cards
- **`card`** — A flat container with no background decoration. Story tiles sit on white with no chrome. The visual "card" is just image + label + headline stack.
- **`card-category-label`** — Black pill (0 radius) with white uppercase label. Sits as an overlay on the image bottom-left or above the headline. On hover: flips to `{colors.primary}` orange.

### Inputs
- **`input`** — Square corners, light gray fill (`{colors.surface-alt}`), no visible border at rest. Focus adds a 2px solid black border — strongly printerly, no glow ring.

### Tags
- **`tag`** — Black rectangle, white uppercase StandardCT 11px / 1px tracking. Always linked; hover → orange.

### Navigation
- **`nav-primary`** — Sticky top nav on white. StandardCT 13px / 700. Active section underlined or labeled. On scroll: a 3px `{colors.border-strong}` underline appears at the header bottom edge.
- All nav links rest at `{colors.ink}` or `{colors.link-default}`, uniformly hover to `{colors.primary}` orange.

## Do's and Don'ts

### Do
- Use `{colors.primary}` orange exclusively for hover and active states — never as a resting fill color on any editorial surface
- Set all border-radius to `{rounded.none}` (0px) on editorial elements — images, buttons, inputs, labels
- Use `{typography.display-hero}` and `{typography.heading-section}` only from StandardCT at weight 700 — never light or regular weights for headlines
- Pair Chronicle Text G1 with StandardCT as the two-family system — do not introduce a third typeface
- Apply the 3px solid `{colors.border-strong}` top rule when introducing a new major module or section
- Keep story tiles bare: image flush to grid gutter, category label overlay, headline beneath. No shadow, no card chrome.
- Use `{colors.awards-gold}` only within Dezeen Awards contexts — never as a substitute for the primary orange accent
- Test every hover state; the `{colors.primary}` → `{colors.ink}` → `{colors.primary}` cycle must be 0.2s ease

### Don't
- Don't add border-radius to story tile images, thumbnails, buttons, or any editorial UI element — it destroys the system's signature look
- Don't use `{colors.primary}` orange as a fill color at rest on headlines, labels, or backgrounds — it belongs only to interaction states
- Don't deploy gradient backgrounds — the only gradients allowed are inside photography
- Don't add `box-shadow` to cards or story tiles — Dezeen elevation is rule-weight only
- Don't use weights lighter than 700 for StandardCT headlines — the bold-only register is intentional
- Don't replace Chronicle Text G1 with a sans-serif for body copy — the serif/sans split is the reading comfort system
- Don't let category labels become rounded pills — `{rounded.none}` is the non-negotiable shape rule
- Don't introduce inline link colors other than `{colors.link-default}` at rest and `{colors.link-hover}` on hover

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <375px | Single-column, minimal outer padding |
| Mobile | 375px–599px | Single-column, 15px outer margins |
| Mobile Large | 600px–767px | 2-column grid begins, navigation collapses |
| Tablet | 768px–991px | 2-column grid, condensed nav |
| Tablet Large | 992px–1061px | 3-column grid, full nav visible |
| Desktop | 1062px–1199px | 4-column grid, full sidebar visible |
| Wide Desktop | 1200px–1479px | Max 4-column grid, generous lateral margins |
| Ultrawide | ≥1480px | Content capped; outer margins expand |

### Touch Targets
- Navigation links: minimum 44px tap height via generous vertical padding
- Category tags and labels: minimum 32px height (tight but acceptable for secondary nav)
- Story tile touch targets: the full image + headline block is the tap target

### Collapsing Strategy
- Navigation collapses to a hamburger below 768px; section tabs become a horizontal scroll strip
- 4-column grid → 3-column at 992px → 2-column at 765px → 1-column at 600px
- Hero images remain full-width at all breakpoints; only padding shrinks
- Section labels stay visible at all breakpoints but reduce in font-size from 13px to 11px on mobile

### Image Behavior
- All images are fluid-width (100% of their column) with a consistent aspect ratio maintained by the grid
- 16:9 for feature stories; 3:2 and 4:3 for grid tiles; 1:1 for author/brand thumbnails
- No lazy-load blur-up effects — images appear at once or not at all (no gradual reveal)
- Alt text is required; caption StandardCT labels appear as overlays or beneath the image

---

## Agent Prompt Guide

### Quick Color Reference
- Background: `{colors.background}`
- Text: `{colors.ink}`
- Brand accent (hover only): `{colors.primary}`
- Secondary text: `{colors.ink-secondary}`
- Border: `{colors.border}`
- Strong rule: `{colors.border-strong}`
- CTA fill: `{colors.ink}`

### Example Component Prompts

- "Build a Dezeen-style story tile using `{colors.background}` canvas, a full-width image with `border-radius: 0`, a black category label (`{colors.ink}` fill, `{colors.on-surface}` text, `{typography.label}` font, `{rounded.none}` corners) overlaid at image bottom-left, and a headline in `{typography.article-headline}` below. On headline hover, change text color to `{colors.primary}` with a 0.2s ease transition."
- "Create a Dezeen navigation bar: `{colors.background}` background, site logo left-aligned, navigation links in `{typography.nav-link}` at `{colors.ink}`, hover state `{colors.primary}`, 12px vertical padding. Add a 3px solid `{colors.border-strong}` bottom border that appears on scroll."
- "Design a Dezeen-style primary CTA button: `{colors.ink}` background, `{colors.on-surface}` label in `{typography.button-ui}`, `{rounded.none}` corners, 10px 20px padding. On hover: background becomes `{colors.primary}`, transition 0.2s ease."
- "Build a Dezeen search input: `{colors.surface-alt}` background, no border at rest, `{rounded.none}` corners, `{typography.body}` placeholder in `{colors.ink-muted}`. On focus: add 2px solid `{colors.border-strong}` outline."
- "Create a Dezeen-style section separator: 3px solid `{colors.border-strong}` top border, section heading in `{typography.heading-section}` StandardCT 700, with a small black label pill (`{components.card-category-label}`) to the left of the heading text."
- "Generate a Dezeen article page footer zone: `{colors.ink}` background, `{colors.on-surface}` links in `{typography.caption}`, 40px 24px padding. Newsletter subscribe form with a `{colors.background}` input and black submit button using `{components.button-primary}`."

### Iteration Guide

1. **Start with the canvas.** Set `background-color: {colors.background}` globally. Commit to pure white. Do not introduce surface tints until you are deliberately departing from Dezeen's editorial style.
2. **Apply orange only on interaction.** Every hover, focus, and active state on editorial elements uses `{colors.primary}`. Never use it as a fill at rest. The discipline of keeping orange off-resting-state is the system's key tension.
3. **Lock border-radius to zero.** Before writing any component, set `border-radius: 0` as a project-level reset. Explicitly allow `{rounded.pill}` only for icon circles.
4. **Use StandardCT at 700 for all headings.** If StandardCT is unavailable, substitute Montserrat 700. Do not fall back to a generic sans at regular weight — the bold register is load-bearing.
5. **Follow the color hierarchy for type.** `{colors.ink}` for headlines and primary labels; `{colors.ink-secondary}` for bylines and metadata; `{colors.on-surface}` for white text on black fills; `{colors.ink-muted}` only for disabled/placeholder.
6. **Elevate with rules, not shadows.** Use 3px `{colors.border-strong}` top rules to separate major sections. Resist adding box-shadows; the flat rule is the entire depth system.
7. **Photography is the chromatic content.** The chrome must stay colorless at rest so image color reads clearly. Do not add tinted overlays, color-washed surfaces, or branded background fills behind editorial images.

---

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