WIRED

---
version: alpha
name: "WIRED Editorial"
description: "Typography baseline relies on WiredDisplay for hero/feature article headline — large display serif."
colors:
  subtle-surface: "#f3f3f3"
  white: "#ffffff"
  wired-blue: "#057dbc"
  black: "#000000"
  dark-gray: "#333333"
  mid-gray: "#757575"
  near-black: "#1a1a1a"
  slate: "#4a5568"
  hairline-border: "#e5e5e5"
  light-gray-text: "#999999"
typography:
  hero-display:
    fontFamily: "WiredDisplay"
    fontSize: "50.64px"
    fontWeight: "400"
    lineHeight: "47.0952px"
    letterSpacing: "-0.5px"
  article-headline:
    fontFamily: "WiredDisplay"
    fontSize: "26px"
    fontWeight: "400"
    lineHeight: "28.08px"
  body-text:
    fontFamily: "BreveText"
    fontSize: "19px"
    fontWeight: "400"
    lineHeight: "28px"
    letterSpacing: "0.108px"
  body-small:
    fontFamily: "BreveText"
    fontSize: "16px"
    fontWeight: "400"
    lineHeight: "24px"
    letterSpacing: "0.09px"
  mono-label:
    fontFamily: "WiredMono"
    fontSize: "12px"
    fontWeight: "400"
    lineHeight: "16px"
    letterSpacing: "1.1px"
  mono-label-bold:
    fontFamily: "WiredMono"
    fontSize: "12px"
    fontWeight: "700"
    lineHeight: "15.96px"
    letterSpacing: "1.2px"
  mono-medium:
    fontFamily: "WiredMono"
    fontSize: "13px"
    fontWeight: "400"
    lineHeight: "16px"
    letterSpacing: "0.92px"
  ui-heading-large:
    fontFamily: "Apercu"
    fontSize: "20px"
    fontWeight: "700"
    lineHeight: "24px"
    letterSpacing: "-0.28px"
  ui-heading:
    fontFamily: "Apercu"
    fontSize: "17px"
    fontWeight: "700"
    lineHeight: "22px"
    letterSpacing: "-0.144px"
  ui-label:
    fontFamily: "Apercu"
    fontSize: "16px"
    fontWeight: "700"
    lineHeight: "20px"
    letterSpacing: "0.3px"
  ui-body:
    fontFamily: "Apercu"
    fontSize: "14px"
    fontWeight: "400"
    lineHeight: "18px"
    letterSpacing: "0.4px"
  utility-text:
    fontFamily: "ProximaNova"
    fontSize: "12px"
    fontWeight: "400"
    lineHeight: "16px"
rounded:
  radius-sm: "4px"
  radius-md: "6px"
  radius-lg: "12px"
spacing:
  space-1: "4px"
  space-2: "8px"
  space-3: "10px"
  space-4: "12px"
  space-5: "14.1px"
  space-6: "16px"
  space-7: "24px"
  space-8: "32px"
  space-9: "40px"
  space-10: "48px"
  space-11: "64px"
  space-12: "120px"
---

## Overview

Typography baseline relies on WiredDisplay for hero/feature article headline — large display serif.

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

**Signature traits:**
- Core token rhythm: Token evidence indicates consistent color, spacing, and radius rhythm across visible UI.

## 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 `black`: Role "text" is grounded by usage context "Primary text, headings, nav links, icons, action defaults".
- **surface-text** maps to `dark-gray`: Role "text" is grounded by usage context "Dek text, image captions, rubric card surface".
- **border-border** maps to `light-gray-text`: Role "border" is grounded by usage context "Input borders, navigation overlay, secondary metadata".
- **surface-background** maps to `white`: Role "background" is grounded by usage context "Page surface, card backgrounds, navigation surface".

### Text Scale
- **Black** (#000000): Primary text, headings, nav links, icons, action defaults. Role: text. {authored: rgb(0, 0, 0), space: rgb, alpha: 0.25}
- **Dark Gray** (#333333): Dek text, image captions, rubric card surface. Role: text. {authored: rgb(51, 51, 51), space: rgb}
- **Mid Gray** (#757575): Disabled states, image credits, subtle borders, hover/pressed brand actions. Role: text. {authored: rgb(117, 117, 117), space: rgb}
- **Near Black** (#1a1a1a): Body text, subtle text, byline links. Role: text. {authored: rgb(26, 26, 26), space: rgb}
- **Slate** (#4a5568): Privacy overlay font color (Fides consent UI). Role: text. {authored: rgb(74, 85, 104), space: rgb}

### Interactive
- **Hairline Border** (#e5e5e5): Story dividers, section borders, sub-navigation borders, dividers. Role: border. {authored: rgb(229, 229, 229), space: rgb}
- **Light Gray Text** (#999999): Input borders, navigation overlay, secondary metadata. Role: border. {authored: rgb(153, 153, 153), space: rgb, alpha: 0.8}

### Surface & Shadows
- **Subtle Surface** (#f3f3f3): Elevated navigation surface, subtle backgrounds, placeholders. Role: background. {authored: rgb(243, 243, 243), space: rgb}
- **White** (#ffffff): Page surface, card backgrounds, navigation surface. Role: background. {authored: rgb(255, 255, 255), space: rgb}
- **WIRED Blue** (#057dbc): Active navigation border, accent text, navigation feature brand, active link color. Role: background. {authored: rgb(5, 125, 188), space: rgb}

## Typography

Typography uses WiredDisplay, BreveText, WiredMono, Apercu, ProximaNova, Inter across extracted hierarchy roles. Keep hierarchy mapped to these token rows before adding decorative type styles.

Mixes WiredDisplay and BreveText and WiredMono and Apercu and ProximaNova and Inter for visual contrast. Weight range spans regular, bold. Sizes range from 12px to 50.64px.

### Font Roles
- **Headline Font**: WiredDisplay
- **Body Font**: WiredDisplay

### Type Scale Evidence
| Role | Font | Size | Weight | Line Height | Letter Spacing | Stack / Features | Notes |
|------|------|------|--------|-------------|----------------|------------------|-------|
| Hero/feature article headline — large display serif | WiredDisplay | 50.64px | 400 | 47.0952px | -0.5px | WiredDisplay, helvetica, sans-serif | Extracted token |
| Section and card article headlines | WiredDisplay | 26px | 400 | 28.08px | normal | WiredDisplay, helvetica, sans-serif | Extracted token |
| Primary article body copy and story text | BreveText | 19px | 400 | 28px | 0.108px | BreveText, helvetica, sans-serif | Extracted token |
| Secondary body text, dek/standfirst | BreveText | 16px | 400 | 24px | 0.09px | BreveText, helvetica, sans-serif | Extracted token |
| Section labels, rubric tags, metadata — wide-tracked monospace | WiredMono | 12px | 400 | 16px | 1.1px | WiredMono, helvetica, sans-serif | Extracted token |
| Bold section labels, category tags | WiredMono | 12px | 700 | 15.96px | 1.2px | WiredMono, helvetica, sans-serif | Extracted token |
| Bylines, datelines, secondary metadata | WiredMono | 13px | 400 | 16px | 0.92px | WiredMono, helvetica, sans-serif | Extracted token |
| UI section headings, newsletter/subscribe CTAs | Apercu | 20px | 700 | 24px | -0.28px | Apercu, helvetica, sans-serif | Extracted token |
| UI subheadings, card titles in UI contexts | Apercu | 17px | 700 | 22px | -0.144px | Apercu, helvetica, sans-serif | Extracted token |
| Button labels, nav items, UI labels | Apercu | 16px | 700 | 20px | 0.3px | Apercu, helvetica, sans-serif | Extracted token |
| UI body text, form labels | Apercu | 14px | 400 | 18px | 0.4px | Apercu, helvetica, sans-serif | Extracted token |
| Tertiary UI text, ad labels, utility copy | ProximaNova | 12px | 400 | 16px | normal | ProximaNova, helvetica, sans-serif | Extracted token |

## Layout

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

### 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 |
|------|-------|----|-------|
| space-1 | 4px | 4 | Extracted spacing token |
| space-2 | 8px | 8 | Extracted spacing token |
| space-3 | 10px | 10 | Extracted spacing token |
| space-4 | 12px | 12 | Extracted spacing token |
| space-5 | 14.1px | 14.1 | Extracted spacing token |
| space-6 | 16px | 16 | Mapped to --grid-gap |
| space-7 | 24px | 24 | Extracted spacing token |
| space-8 | 32px | 32 | Extracted spacing token |
| space-9 | 40px | 40 | Extracted spacing token |
| space-10 | 48px | 48 | Extracted spacing token |
| space-11 | 64px | 64 | Extracted spacing token |
| space-12 | 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 Core token rhythm 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 | <= 1024px | (max-width: 1024px) |
| Breakpoint 9 | <= 1280px | (max-width: 1280px) |
| Breakpoint 10 | <= 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) |
| Tablet | >= 768px | (min-width: 768px) |

## 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.