WIRED

Design System Inspired by WIRED

1. Visual Theme & Atmosphere

WIRED's homepage feels like a printed broadsheet that someone has plugged into a wall socket. The grid is dense, the rules are thin, the type is loud, and almost every surface is paper-white or pure black with no rounded corners and no decoration that doesn't earn its place. Image rectangles butt directly against headlines, hairline dividers separate stories the way pica rules separate columns in a real magazine, and the only colors that aren't grayscale come from the photography itself. There is no "card with shadow" anywhere — the entire layout is held together by typographic weight and the discipline of rules and whitespace, the same way a Condé Nast print page would be assembled in a paste-up room.

The signature move is the typographic stack: a brutally large custom serif (WiredDisplay) for the main headline, a humanist serif (BreveText) for body and decks, a geometric sans (Apercu) for UI affordances, and a hard mono uppercase (WiredMono) for the kickers, eyebrows, and timestamps that mark every story. That mono kicker — usually black caps with letter-spacing wide enough to read as a Geiger-counter tick — is what makes a WIRED page instantly recognizable from across the room.

There is exactly one accent color that matters: a saturated link blue (#057dbc) that lights up underlined hover states like a CRT scanline. Everything else is black, paper white, and two grays — the design's confidence comes from refusing to invent more.

Key Characteristics:

• Newsstand-density editorial grid: rules and whitespace, never cards or shadows

• Custom serif display + technical mono kickers — the Condé-Nast-meets-engineering-lab voice

• Strictly square corners on every image, container, and ribbon (only icon buttons are circular)

• 2px hard black borders on buttons and links — printerly, not webby

• Mono ALL-CAPS eyebrows on every story with wide tracking (0.9–1.2px)

• Single ink-blue accent for links; everything else lives in pure grayscale

• Dark theme = the footer, not the page; the page itself is committed paper-white

2. Color Palette & Roles

Primary (Editorial Ink)

• WIRED Black (#000000): Pure ink for ribbons, section dividers, button borders, headline rules — the strongest hand on the page.

• Page Ink (#1a1a1a): Near-black used for headlines and body type. Slightly softened so long-form reading doesn't feel like staring at a power button.

• Paper White (#ffffff): Default canvas for the entire site. Treat it like newsprint stock — uninterrupted, never tinted.

Secondary (Editorial Voice)

• Link Blue (#057dbc): The single brand accent. Used for inline link hovers, breadcrumbs, and the rare button — never for backgrounds, never decorated. Think of it as the only color allowed in a black-and-white film.

Surface & Background

• Newsprint (#ffffff): Editorial pages, story grids, hero zones.

• Footer Ink (#1a1a1a): The only inverted region on the homepage. Paper white type sits on top.

• Hairline Tint (#e2e8f0): Reserved for

  ---

  elements between sections — barely visible, like a margin rule.

Neutrals & Text

• Headline Black (#1a1a1a): All H1/H2 display type.

• Body Gray (#1a1a1a): Long-form body text — same ink as headlines for unity.

• Caption Gray (#757575): Secondary metadata: bylines, timestamps, photo credits.

• Disabled Gray (#999999): Inactive links, low-priority labels.

• Hairline Border (#e2e8f0): Subtle separators only.

Semantic & Accent

• Brand Hover Blue (#057dbc): Link rollover state — also serves as the only "interactive" cue.

• (WIRED's homepage intentionally omits semantic success/error/warning palettes — this is editorial, not a SaaS dashboard.)

Gradient System

None. WIRED uses zero gradients. The closest thing to a gradient on the page is the tonal range inside a photograph — gradients live in the imagery, not in the chrome.

3. Typography Rules

Font Family

• WiredDisplay (custom serif, fallback helvetica) — Display headlines and feature titles.

• BreveText (humanist serif, fallback helvetica) — Article body, decks, longer captions.

• Apercu (geometric sans, fallback helvetica) — UI labels, buttons, navigation, mid-weight headings.

• WiredMono (custom monospace, fallback helvetica) — Eyebrows, kickers, timestamps, section labels, ALL CAPS.

• Inter (sans, system fallback) — Utility UI in newer modules.

• ProximaNova (sans, fallback helvetica) — Legacy UI surfaces.

• WIRED Mono (custom mono, fallback Monaco, Courier New, Courier) — Article-page eyebrows.

Hierarchy

Role Font Size Weight Line Height Letter Spacing Notes Display Headline (Hero) WiredDisplay 64px / 4.00rem regular 0.93 -0.5px Tight, almost touching descenders — newsstand presence Display Headline (Mobile / Mid) WiredDisplay 26px / 1.63rem regular 1.08 — Same face, scaled down for grid blocks Section Heading Apercu 20px / 1.25rem 700 1.20 -0.28px Bold sans for module titles ("Most Popular", "Featured") Subheading Apercu 17px / 1.06rem 700 1.29 -0.144px Story decks within feature blocks Article Deck (Serif) BreveText 19px / 1.19rem regular 1.47 0.108px Long-form lead paragraphs Article Body (Serif) BreveText 16px / 1.00rem regular 1.50 0.09px Standard paragraph text UI Heading Apercu 16px / 1.00rem 700 1.25 0.3px Inline UI labels, button captions Button Label Apercu 16px / 1.00rem 700 1.25 0.3px All caps optional, depending on placement Link (Inline UI) Apercu 14px / 0.88rem regular 1.29 0.4px Footer links, secondary nav Eyebrow / Kicker WiredMono 13px / 0.81rem regular 1.23 0.92px UPPERCASE — story category above headline Eyebrow Bold WiredMono 13px / 0.81rem 700 1.23 — UPPERCASE — featured story marker Section Ribbon WiredMono 12px / 0.75rem 700 1.00 1.2px UPPERCASE — black-bar section labels Photo Caption BreveText 12.73px / 0.80rem 700 2.20 (relaxed) 0.108px Generous leading — print-photo treatment Timestamp / Meta WiredMono 12px / 0.75rem regular 1.33 1.1px UPPERCASE, used for "X HOURS AGO" markers Tertiary Footer Link ProximaNova 11px / 0.69rem regular 1.45 — Newsletter footer, legal links Inter UI Heading Inter 16px / 1.00rem 600 1.23 0.108px Newer module headers Inter UI Caption Inter 14px / 0.88rem 600 1.40 — Compact UI metadata

Principles

• Four faces, four jobs. WiredDisplay is for shouting, BreveText is for reading, Apercu is for clicking, WiredMono is for labeling. They never trade roles. This separation is what keeps the page from feeling like a typography sample.

• Tight headlines, generous body. Display type runs as low as 0.93 line-height (nearly touching), while body BreveText opens out to 1.47–1.50. The contrast is the editorial fingerprint.

• Mono is always uppercase. Every WiredMono usage carries text-transform: uppercase and 0.9–1.2px letter-spacing. Treat lowercase mono as broken — it should not appear on a WIRED page.

• Bold is rare. Apercu uses weight 700 only for UI emphasis; the editorial layer (Display + BreveText) leans entirely on size and ink color, never on bolding.

• Letter-spacing has two registers: positive (0.9–1.2px) for ALL-CAPS mono, negative (-0.144 to -0.5px) for large display serif. Never neutral on the largest type.

Note on Font Substitutes

The line-height values in the hierarchy table (especially the 0.93 on the 64px hero) assume the proprietary WiredDisplay and BreveText faces, which have tight metrics with short ascenders/descenders. If you substitute these with wide-metric open-source fonts like Playfair Display or Libre Caslon, loosen display line-heights by approximately +0.10 to +0.12 to prevent ascender/descender collisions on wrapping lines (e.g., 0.93 → 1.05, 1.08 → 1.18). Apercu substitutes (Inter, Work Sans, Manrope) work at the token values without adjustment. BreveText body substitutes (Lora, Source Serif 4) also work without adjustment because body leading is already generous.

4. Component Stylings

Buttons

Primary CTA — Black Outline ("Subscribe")

• Background: #ffffff (Paper White)

• Text: #000000 (WIRED Black), Apercu 16px / 700 / 0.3px tracking

• Border: 2px solid #000000 — the printerly hard rule, not a 1px UI border

• Border radius: 0 (square corners)

• Padding: vertical ≈ 12–14px, horizontal ≈ 24px

• Hover: background flips to #000000, text flips to #ffffff — pure inversion, no easing on the rule

• Transition: ~150ms color/background only

Secondary — Inverted ("Sign In", in dark zones)

• Background: #000000

• Text: #ffffff

• Border: 2px solid #ffffff

• Same square corners, same inversion-on-hover behavior

Tertiary — Underlined Inline Link

• Treated as a button when wrapped in nav: text #1a1a1a, underline always present, hover swaps color to #057dbc while keeping the underline

• No padding, no border, no background — this is editorial linking, not UI

Pill / Round Icon Button

• Border radius: 50% (the only circular shape on the site)

• Used exclusively for icon controls (search, account, social) in the header

• Border: 1px solid #757575 or no border depending on placement

• Size: ~32–40px square footprint

Tag / Span Pill

• Border radius: 1920px (effectively a full pill — only used inside text spans like "BREAKING")

• Background: solid black or red accent depending on context

• Text: white, mono 11–12px caps

Cards & Containers

• Cards do not exist. WIRED's homepage has no rounded boxes, no shadows, no surface elevation.

• A "story tile" is just an image rectangle stacked above a kicker + headline + deck, separated from neighbors by 1px hairline rules (#000000 or #4a5568) or by raw whitespace.

• The closest thing to a "container" is the black ribbon section header (e.g., "MOST POPULAR") — a full-bleed black bar with white WiredMono caps, no padding refinement, no rounded ends.

• Hover behavior on a story tile: the headline link text shifts from #1a1a1a to #057dbc and the underline appears. The image itself does not zoom, lift, or shadow.

Inputs & Forms

• Newsletter input: rectangular, 2px solid #000000 border, 0 radius, white background, Apercu 16px placeholder.

• Focus: border stays 2px black, no glow ring, no color change — focus is signaled by the blinking caret only. (Add a 2px outset for accessibility if you ship this — WIRED's own implementation under-serves keyboard users here.)

• Error: text label below in #e53e3e (Fides cookie overlay borrows this red — use sparingly).

• Disabled: text drops to #a0aec0, border softens to #757575.

Navigation

• Top utility bar: black (#000000) full-bleed strip, ~32–40px tall, mono caps links separated by hairline dividers, #ffffff text, hover → #057dbc.

• Main nav: paper-white (#ffffff) row beneath the bug logo, Apercu 14–16px / regular, hover → #057dbc underline.

• Logo: WIRED bug, ~209×42px, centered or left-aligned, never recolored, always pure black on white.

• Mobile: nav collapses to a hamburger left of the bug logo. Section nav becomes a slide-down drawer of mono caps links.

• Transition: hover color swaps are instant or ~120ms; no bouncy easing — editorial restraint.

Image Treatment

• Aspect ratios: predominantly 16:9 for hero images, 4:3 for grid story tiles, 1:1 for smaller "Most Popular" thumbnails.

• Corners: ALWAYS 0 radius. Square. The only rounded image is a circular author avatar (50%).

• Full-bleed: hero photographs run edge-to-edge of the column they occupy; no inset, no border.

• Captions: BreveText 12.73px / 700 with relaxed 2.20 line-height — placed directly under the image, italicized in some templates.

• Hover: no zoom, no opacity dip — only the headline below the image responds.

• Lazy loading: standard loading="lazy" on all below-the-fold imagery.

Editorial Ribbons & Section Markers

• Black bar (#000000) full-bleed with white WiredMono uppercase label inside (e.g., "MOST POPULAR", "BACKCHANNEL", "GEAR").

• Height ~32–40px, no padding refi