WIRED

---
version: alpha
name: "WIRED Editorial"
description: "WIRED's design system is a high-contrast, editorially-driven monochrome framework built around a proprietary type system (Breve Text, WIRED Mono, WiredDisplay, Apercu) and a near-zero chromatic palette. Black (#000000) dominates at 2961 hits, anchoring text, borders, icons, and interactive states. White (#ffffff) provides the primary surface. Accent color is used sparingly. only #057dbc appears as a brand blue for subscribe CTAs. The layout uses a structured multi-column story grid with tight 8px base spacing, flat surfaces with no box shadows, and minimal border-radius (4px standard). Typography is the primary differentiator: editorial body uses Breve Text at 19px, section labels use WIRED Mono in uppercase with tracked letterspacing, and display headlines use WiredDisplay. The overall aesthetic is authoritative, information-dense, and read-flow-first."
colors:
  dark-gray: "#333333"
  subtle-surface: "#f3f3f3"
  surface-white: "#ffffff"
  wired-blue: "#057dbc"
  charcoal-text: "#1a1a1a"
  ink-black: "#000000"
  mid-gray: "#757575"
  slate-gray: "#4a5568"
  light-border: "#e5e5e5"
  muted-gray: "#999999"
typography:
  editorial-body-core:
    fontFamily: "Breve Text, helvetica, sans-serif"
    fontSize: "19px"
    fontWeight: "400"
    lineHeight: "28px"
    letterSpacing: "0.1px"
  section-label-rubric:
    fontFamily: "WIRED Mono"
    fontSize: "12px"
    fontWeight: "400"
    lineHeight: "16px"
    letterSpacing: "1.1px"
  section-label-bold:
    fontFamily: "WIRED Mono"
    fontSize: "12px"
    fontWeight: "700"
    lineHeight: "16px"
    letterSpacing: "1.2px"
  display-headline:
    fontFamily: "WiredDisplay"
    fontSize: "26px"
    fontWeight: "400"
    lineHeight: "28.08px"
  ui-label-bold:
    fontFamily: "Apercu, helvetica, sans-serif"
    fontSize: "16px"
    fontWeight: "700"
    lineHeight: "18px"
    letterSpacing: "0.3px"
  card-headline:
    fontFamily: "Apercu, helvetica, sans-serif"
    fontSize: "17px"
    fontWeight: "700"
    lineHeight: "22px"
    letterSpacing: "-0.1px"
  large-card-headline:
    fontFamily: "Apercu, helvetica, sans-serif"
    fontSize: "20px"
    fontWeight: "700"
    lineHeight: "24px"
    letterSpacing: "-0.3px"
  consent-ui-body:
    fontFamily: "Inter"
    fontSize: "14px"
    fontWeight: "400"
    lineHeight: "19.6px"
    letterSpacing: "0.1px"
  wired-mono-medium:
    fontFamily: "WIRED Mono"
    fontSize: "13px"
    fontWeight: "400"
    lineHeight: "16px"
    letterSpacing: "0.9px"
  proxima-nova-label:
    fontFamily: "Proxima Nova"
    fontSize: "12px"
    fontWeight: "400"
    lineHeight: "16px"
rounded:
  radius-sm: "4px"
  radius-md: "6px"
  radius-lg: "12px"
spacing:
  spacing-1: "2px"
  spacing-2: "4px"
  spacing-3: "6px"
  spacing-4: "7px"
  spacing-5: "8px"
  spacing-6: "10px"
  spacing-7: "12px"
  spacing-8: "14.1px"
  spacing-9: "16px"
  spacing-10: "24px"
  spacing-11: "32px"
  spacing-12: "40px"
  spacing-13: "48px"
  spacing-14: "64px"
  spacing-15: "120px"
---

## Overview

WIRED's design system is a high-contrast, editorially-driven monochrome framework built around a proprietary type system (Breve Text, WIRED Mono, WiredDisplay, Apercu) and a near-zero chromatic palette. Black (#000000) dominates at 2961 hits, anchoring text, borders, icons, and interactive states. White (#ffffff) provides the primary surface. Accent color is used sparingly. only #057dbc appears as a brand blue for subscribe CTAs. The layout uses a structured multi-column story grid with tight 8px base spacing, flat surfaces with no box shadows, and minimal border-radius (4px standard). Typography is the primary differentiator: editorial body uses Breve Text at 19px, section labels use WIRED Mono in uppercase with tracked letterspacing, and display headlines use WiredDisplay. The overall aesthetic is authoritative, information-dense, and read-flow-first.

**Signature traits:**
- Dual typeface system: Pairs Breve Text, helvetica, sans-serif and WIRED Mono across the type hierarchy.

## Colors

The palette uses 10 validated color tokens across 1 theme profile. Semantic roles stay attached to observed usage so generation agents can choose accents without inventing new color meaning.

**Semantic naming:**
- **action-text** maps to `ink-black`: Role "text" is grounded by usage context "Primary text, icons, borders, nav links, logo — dominant at 2961 hits across all zones".
- **surface-background** maps to `surface-white`: Role "background" is grounded by usage context "Page background, card surfaces, nav spacer background — 420 hits".
- **content-text** maps to `charcoal-text`: Role "text" is grounded by usage context "Subtle body text and secondary text — 128 hits".
- **surface-border** maps to `muted-gray`: Role "border" is grounded by usage context "Input borders, navigation overlay surface, subtle dividers — 38 hits".

### Text Scale
- **Charcoal Text** (#1a1a1a): Subtle body text and secondary text — 128 hits. Role: text. {authored: rgb(26, 26, 26), space: rgb}
- **Ink Black** (#000000): Primary text, icons, borders, nav links, logo — dominant at 2961 hits across all zones. Role: text. {authored: rgb(0, 0, 0), space: rgb, alpha: 0.25}
- **Mid Gray** (#757575): Disabled icons, hover/pressed brand action states, subtle borders — 112 hits. Role: text. {authored: rgb(117, 117, 117), space: rgb}
- **Slate Gray** (#4a5568): Consent overlay text, secondary UI text — 101 hits (Fides overlay). Role: text. {authored: rgb(74, 85, 104), space: rgb}

### Interactive
- **Light Border** (#e5e5e5): Story borders, dividers, sub-navigation borders — 30 hits. Role: border. {authored: rgb(229, 229, 229), space: rgb}
- **Muted Gray** (#999999): Input borders, navigation overlay surface, subtle dividers — 38 hits. Role: border. {authored: rgb(153, 153, 153), space: rgb, alpha: 0.8}

### Surface & Shadows
- **Dark Gray** (#333333): Rubric card surface, section label text — 83 hits. Role: background. {authored: rgb(51, 51, 51), space: rgb}
- **Subtle Surface** (#f3f3f3): Navigation elevated surface, subtle background, placeholder — 16 hits. Role: background. {authored: rgb(243, 243, 243), space: rgb}
- **Surface White** (#ffffff): Page background, card surfaces, nav spacer background — 420 hits. Role: background. {authored: rgb(255, 255, 255), space: rgb}
- **WIRED Blue** (#057dbc): Subscribe CTA button — 2 hits, visually prominent in header. Role: background. {authored: rgb(5, 125, 188), space: rgb}

## Typography

Typography uses Breve Text, helvetica, sans-serif, WIRED Mono, WiredDisplay, Apercu, helvetica, sans-serif, Inter, Proxima Nova across extracted hierarchy roles. Keep hierarchy mapped to these token rows before adding decorative type styles.

Mixes Breve Text, helvetica, sans-serif and WIRED Mono and WiredDisplay and Apercu, helvetica, sans-serif and Inter and Proxima Nova for visual contrast. Weight range spans regular, bold. Sizes range from 12px to 26px.

### Font Roles
- **Headline Font**: Breve Text
- **Body Font**: Breve Text

### Type Scale Evidence
| Role | Font | Size | Weight | Line Height | Letter Spacing | Stack / Features | Notes |
|------|------|------|--------|-------------|----------------|------------------|-------|
| Primary article body text — dominant at 1117 hits | Breve Text, helvetica, sans-serif | 19px | 400 | 28px | 0.1px | Breve Text, helvetica, sans-serif | Extracted token |
| Section labels, category tags, rubric text — 120 hits with tracked uppercase | WIRED Mono | 12px | 400 | 16px | 1.1px | WIRED Mono, Monaco, Courier New, Courier, monospace | Extracted token |
| Bold section labels, emphasized category tags — 50 hits | WIRED Mono | 12px | 700 | 16px | 1.2px | WIRED Mono, Monaco, Courier New, Courier, monospace | Extracted token |
| Feature display headlines — 49 hits | WiredDisplay | 26px | 400 | 28.08px | normal | WiredDisplay, helvetica, sans-serif | Extracted token |
| Navigation items, UI labels — 46 hits | Apercu, helvetica, sans-serif | 16px | 700 | 18px | 0.3px | Apercu, helvetica, sans-serif | Extracted token |
| Story card headlines — 27 hits | Apercu, helvetica, sans-serif | 17px | 700 | 22px | -0.1px | Apercu, helvetica, sans-serif | Extracted token |
| Larger story card headlines — 22 hits | Apercu, helvetica, sans-serif | 20px | 700 | 24px | -0.3px | Apercu, helvetica, sans-serif | Extracted token |
| Consent overlay body text, secondary UI — 39 hits | Inter | 14px | 400 | 19.6px | 0.1px | Inter, sans-serif | Extracted token |
| Medium-size mono labels — 37 hits | WIRED Mono | 13px | 400 | 16px | 0.9px | WIRED Mono, Monaco, Courier New, Courier, monospace | Extracted token |
| Small UI labels — 55 hits | Proxima Nova | 12px | 400 | 16px | normal | Proxima Nova, Helvetica, sans-serif | Extracted token |

## Layout

Responsive system uses 4 breakpoint tier(s): mobile, tablet, desktop, wide.

This system uses a 8px base grid with scale values 2, 4, 6, 8, 10, 12, 16, 24, 32, 40, 48, 64, 120.

### Responsive Strategy
- **mobile (0-1600px)**: Constrain layout for small viewports and prioritize vertical stacking.
- **tablet (768-1024px)**: Increase spacing and column structure for medium-width viewports.
- **desktop (1024-1600px)**: Expand layout density and horizontal composition for wide viewports.
- **wide (>= 1600px)**: Stretch composition with generous gutters and wider layout spans.

### Spacing System
| Token | Value | Px | Notes |
|------|-------|----|-------|
| spacing-1 | 2px | 2 | Extracted spacing token |
| spacing-2 | 4px | 4 | Extracted spacing token |
| spacing-3 | 6px | 6 | Extracted spacing token |
| spacing-4 | 7px | 7 | Extracted spacing token |
| spacing-5 | 8px | 8 | Extracted spacing token |
| spacing-6 | 10px | 10 | Extracted spacing token |
| spacing-7 | 12px | 12 | Extracted spacing token |
| spacing-8 | 14.1px | 14.1 | Extracted spacing token |
| spacing-9 | 16px | 16 | Mapped to --grid-gap |
| spacing-10 | 24px | 24 | Extracted spacing token |
| spacing-11 | 32px | 32 | Extracted spacing token |
| spacing-12 | 40px | 40 | Extracted spacing token |
| spacing-13 | 48px | 48 | Extracted spacing token |
| spacing-14 | 64px | 64 | Extracted spacing token |
| spacing-15 | 120px | 120 | Extracted spacing token |

## Elevation & Depth

Keep depth flat unless validated shadow or interaction evidence appears in the extraction payload. Do not invent shadows beyond this evidence boundary.

### Shadow Evidence
| Shadow Token | Layers | Details |
|--------------|--------|---------|
| n/a | 0 | No validated shadow payload |

### Interaction Signals
| Theme | Signal | Evidence |
|-------|--------|----------|
| Light | outline-style | solid |
| Light | outline-color | rgb(0, 0, 0) ; rgb(255, 255, 255) ; rgb(26, 26, 26) |
| Light | outline-width | 3px ; 2px |
| Light | outline-offset | 0px |
| Light | transform | matrix(1, 0, 0, 1, -1275, -200) ; matrix(1, 0, 0, 1, 0, 0) ; matrix(1, 0, 0, 1, 1275, 200) |

## Shapes

Shape language maps directly to rounded tokens. Keep component corners consistent with the role mapping below before introducing bespoke geometry.

### Radius Roles
| Token | Value | Px | Role Mapping |
|------|-------|----|--------------|
| radius-sm | 4px | 4 | Subtle corner |
| radius-md | 6px | 6 | Subtle corner |
| radius-lg | 12px | 12 | Control corner |

### Geometry Evidence
| Radius Token | Shape | Units |
|--------------|-------|-------|
| radius-sm | 4px | px |
| radius-md | 6px | px |
| radius-lg | 12px | px |

## Components

(none detected)

## Do's and Don'ts

Guardrails protect Dual typeface system without adding unsupported visual claims.

| Do | Don't |
|----|---------|
| Do maintain consistent spacing using the base grid | Don't make unsupported claims about absent visual features |
| Do maintain WCAG AA contrast ratios (4.5:1 for normal text) | Don't mix rounded and sharp corners in the same view |
| Do use the primary color only for the single most important action per screen |  |
| Do verify evidence before writing new design-system guidance |  |

## Responsive Evidence

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <= 375px | (max-width: 375px) |
| Mobile | <= 425px | (max-width: 425px) |
| Mobile | <= 480px | (max-width: 480px) |
| Mobile | <= 569px | only screen and (max-device-width: 667px), screen and (max-width: 569px) |
| Mobile | <= 599px | only screen and (max-device-width: 667px), screen and (max-width: 599px) |
| Mobile | <= 767px | (max-width: 767px) |
| Breakpoint 7 | <= 768px | (max-width: 768px) |
| Breakpoint 8 | <= 1023px | (max-width: 1023px) |
| Breakpoint 9 | <= 1024px | (max-width: 1024px) |
| Breakpoint 10 | <= 1280px | (max-width: 1280px) |
| Breakpoint 11 | <= 1600px | (max-width: 1600px) |
| Mobile | 0-319px | (min-width: 0px) and (max-width: 319px) |
| Mobile | >= 0px | (min-width: 0px) |
| Mobile | 320-767px | (min-width: 320px) and (max-width: 767px) |
| Mobile | 320-768px | (min-width: 320px) and (max-width: 768px) |
| Mobile | >= 320px | (min-width: 320px) |
| Mobile | >= 480px | (min-width: 480px) |
| Mobile | >= 570px | only screen and (min-width: 570px) |
| Tablet | 768-1023px | (min-width: 768px) and (max-width: 1023px) |
| Tablet | 768-1024px | only screen and (min-width: 768px) and (max-width: 1024px) |

## Agent Prompt Guide

### Example Component Prompts
- Create button component using validated primary color role and spacing tokens.
- Create card component with mapped radius role and evidence-backed elevation.
- Create form input component using inferred typography hierarchy and border roles.

### Iteration Guide
1. Start with extracted palette and typography roles only.
2. Map spacing and radius directly from token tables before visual polish.
3. Apply component patterns one section at a time and compare against source intent.
4. Keep elevation claims tied to explicit evidence in output.
5. Iterate with smallest diffs and re-check section hierarchy after each change.