packages/shared-skills/skills/frontend/references/design/wired.md
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:
#000000): Pure ink for ribbons, section dividers, button borders, headline rules — the strongest hand on the page.#1a1a1a): Near-black used for headlines and body type. Slightly softened so long-form reading doesn't feel like staring at a power button.#ffffff): Default canvas for the entire site. Treat it like newsprint stock — uninterrupted, never tinted.#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.#ffffff): Editorial pages, story grids, hero zones.#1a1a1a): The only inverted region on the homepage. Paper white type sits on top.#e2e8f0): Reserved for <hr> elements between sections — barely visible, like a margin rule.#1a1a1a): All H1/H2 display type.#1a1a1a): Long-form body text — same ink as headlines for unity.#757575): Secondary metadata: bylines, timestamps, photo credits.#999999): Inactive links, low-priority labels.#e2e8f0): Subtle separators only.#057dbc): Link rollover state — also serves as the only "interactive" cue.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.
helvetica) — Display headlines and feature titles.helvetica) — Article body, decks, longer captions.helvetica) — UI labels, buttons, navigation, mid-weight headings.helvetica) — Eyebrows, kickers, timestamps, section labels, ALL CAPS.helvetica) — Legacy UI surfaces.Monaco, Courier New, Courier) — Article-page eyebrows.| 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 |
text-transform: uppercase and 0.9–1.2px letter-spacing. Treat lowercase mono as broken — it should not appear on a WIRED page.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.
Primary CTA — Black Outline ("Subscribe")
#ffffff (Paper White)#000000 (WIRED Black), Apercu 16px / 700 / 0.3px tracking2px solid #000000 — the printerly hard rule, not a 1px UI border0 (square corners)#000000, text flips to #ffffff — pure inversion, no easing on the ruleSecondary — Inverted ("Sign In", in dark zones)
#000000#ffffff2px solid #ffffffTertiary — Underlined Inline Link
#1a1a1a, underline always present, hover swaps color to #057dbc while keeping the underlinePill / Round Icon Button
50% (the only circular shape on the site)#757575 or no border depending on placementTag / Span Pill
1920px (effectively a full pill — only used inside text spans like "BREAKING")#000000 or #4a5568) or by raw whitespace.#1a1a1a to #057dbc and the underline appears. The image itself does not zoom, lift, or shadow.2px solid #000000 border, 0 radius, white background, Apercu 16px placeholder.#e53e3e (Fides cookie overlay borrows this red — use sparingly).#a0aec0, border softens to #757575.#000000) full-bleed strip, ~32–40px tall, mono caps links separated by hairline dividers, #ffffff text, hover → #057dbc.#ffffff) row beneath the bug logo, Apercu 14–16px / regular, hover → #057dbc underline.loading="lazy" on all below-the-fold imagery.#000000) full-bleed with white WiredMono uppercase label inside (e.g., "MOST POPULAR", "BACKCHANNEL", "GEAR").#000000 or #4a5568 1px rules where the editorial logic demands a "page-fold" feel.WIRED treats whitespace the way a magazine art director treats margin: it's the silence around the type, not a styling choice. The page never breathes excessively (this is not Stripe or Apple); it breathes editorially — enough room to keep adjacent stories from arguing, never enough to suggest there's nothing on the page. If an empty area looks like it could fit another headline, that empty area is doing its job.
0 — every container, every image, every button, every input. The default.1920px — only inside text spans that need to look like a full pill ("BREAKING", "LIVE").50% — only on round icon buttons and circular author avatars.There are exactly three radii on the entire site, and two of them are reserved for non-rectangular shapes. This is the strictest corner discipline of any major editorial property.
| Level | Treatment | Use |
|---|---|---|
| 0 | No shadow, no border | Default editorial surface — text on paper |
| 1 | 1px solid #e2e8f0 hairline <hr> | Quiet section divider, almost invisible |
| 2 | 1px solid #000000 hairline rule | Editorial column divider — printerly, structural |
| 3 | 2px solid #000000 border | Buttons, inputs, ribbons — interactive emphasis |
| 4 | Black ribbon bar (#000000 fill) | Section labels — the most "elevated" surface on the page |
| 5 | Inverted footer block | Dark #1a1a1a zone with white type — the only inversion |
WIRED's depth philosophy is flat by religion. There is exactly one shadow token in the entire site (a default 0 0 0 transparent placeholder) and no box-shadow is applied to story tiles, headers, modals, or cards. Depth is communicated by rule weight (1px hairline → 2px hard rule → solid black ribbon), not by simulated lighting.
None. No gradients, no glow, no halos, no scrim overlays beyond the standard photo caption gradient. WIRED earns its visual interest from photography and typographic contrast, not from chrome.
#057dbc link blue exclusively for hover states — never as a background or button fill.box-shadow to anything. Ever. WIRED doesn't ship shadows.border-radius: 0 is law.#057dbc. No orange CTAs, no green success pills.| Name | Width | Key Changes |
|---|---|---|
| Small Mobile | <375px | Single column, hamburger nav, all hero modules collapse to stacked image-headline-deck |
| Mobile | 375–767px | Single column, story grid becomes vertical scroll, "Most Popular" numbers shrink to 32px |
| Tablet | 768–1023px | 2-column story grid, sidebar collapses below main feed, nav becomes condensed |
| Desktop | 1024–1599px | Full editorial 3–4 column grid, sidebar restored, max headline scale active |
| Large Desktop | ≥1600px | Page caps at ~1600px container, whitespace expands at the margins, no further scaling |
The dembrandt sweep detected an unusual range of intermediate breakpoints (1280, 1025, 1024, 1023, 768, 767, 667, 599, 570, 569, 480, 425, 375, 320, 319) — Wired's grid micro-tunes at almost every common viewport, especially around the iPad portrait/landscape boundary.
srcset-driven), aspect ratios preserved: 16:9 hero, 4:3 mid, 1:1 thumbnails.loading="lazy" on all below-the-fold imagery, eager on the hero only.#000000)"#ffffff)"#1a1a1a)"#757575)"#e2e8f0)"#057dbc)"#1a1a1a above a 26px WiredDisplay headline. Separate the tile from its neighbor with a 1px black hairline rule. No card, no shadow, no border-radius."#000000 border, square corners, #ffffff background, Apercu 16px / 700 / 0.3px tracking text in #000000. Hover state inverts to black background with white text in 150ms."#757575, and an inverted black submit button beside it."#1a1a1a with paper-white tertiary navigation in ProximaNova 11px, hover color #057dbc, and a centered WIRED bug logo at the top of the block."When refining existing screens generated with this design system:
border-radius other than 0, 50% (icons/avatars), or 1920px (text pills), flatten it. Round corners are the single most common mistake.box-shadow. If a tile needs to feel "lifted", use a 2px black border or a hairline rule instead.#000, #1a1a1a, #757575, #e2e8f0, #ffffff, #057dbc appears in chrome (not photography), remove it. WIRED's restraint is non-negotiable.1px solid #000 dividers wherever two stories or modules meet without a clear visual break. Rules are the connective tissue.