Design System Inspiration of WIRED

1. Visual Theme & Atmosphere

WIRED is the magazine of record for how technology shapes culture, the economy, and politics — and its visual identity is an editorial machine first, a website second. The brand reads as uncompromising black-and-white print logic ported to the screen: a pure white canvas (#ffffff), near-absolute black ink (#000000), and a single hot accent — WIRED's signature red — deployed surgically for emphasis, links, and the masthead. The atmosphere is confident, declarative, and slightly aggressive. This is journalism that thinks it is right.

The defining visual gesture is condensed display typography. WIRED's headlines have used the Tungsten family (Hoefler & Co.) and custom condensed cuts for years — tall, narrow, tightly-set capitals that stack into dense, punchy decks. A headline in WIRED is not decoration; it is architecture. Set against a body of clean humanist sans-serif (Akkurat-lineage / system stacks on web), the contrast between the muscular condensed display and the calm body text is the entire typographic thesis: shout the headline, whisper the article.

Where consumer-tech brands chase soft gradients and rounded friendliness, WIRED does the opposite. Corners are square or nearly so. Rules (horizontal and vertical hairlines) divide content like a newspaper grid. Color is rationed. The result feels less like an app and more like a broadsheet that happens to be backlit — authoritative, text-forward, and proud of its density.

Key Characteristics:

• Pure monochrome foundation: #000000 ink on #ffffff paper, no warmth
• WIRED Red (#e90c17) as the sole hot accent — links, masthead, emphasis, "subscribe"
• Condensed display type (Tungsten-family) for headlines — tall, narrow, all-caps energy
• Humanist sans body (Akkurat-lineage) for long-form readability
• Hairline rules and a strict editorial grid instead of cards-and-shadows
• Near-zero border radius — square, print-derived geometry
• Density as a feature: many stories per viewport, tight verticals

2. Color Palette & Roles

Primary

• WIRED Black (#000000): The brand's foundational ink. Masthead lockup, headlines, body text, rules, and the dominant UI color. WIRED is a black brand before it is a red one.
• WIRED White (#ffffff): Page background, the "paper." The default surface for nearly every screen.
• WIRED Red (#e90c17): The single hot accent. Links, hover states, the masthead "W" contexts, "SUBSCRIBE" CTAs, breaking-news flags, and section emphasis. Used sparingly — its scarcity is its power.

Brand (Logo / Marketing)

• Masthead Black (#000000): The WIRED wordmark is set in black on white (or reversed white-on-black). The logo never appears in red.
• Accent Red (#e90c17): Reserved for editorial flags, subscription marketing, and call-to-action moments. Roughly a Pantone Red 032-adjacent hot red.

Semantic

• Link / Action Red (#e90c17): Default text-link and primary action color on light surfaces.
• Error Red (#cc0000): Form validation errors, destructive confirmations. A slightly deeper red than the brand accent to distinguish "danger" from "brand."
• Success Green (#0a7d3f): Confirmation states, "saved," subscription success.
• Warning Amber (#b86e00): Cautionary states, paywall-approaching notices.
• Info Blue (#0a66c2): Informational links in editorial-adjacent contexts (rare; red dominates).

Neutral Scale

• Ink 900 (#000000): Headlines, primary body text, masthead.
• Ink 800 (#1a1a1a): Strong sub-headings, emphasized labels.
• Ink 700 (#333333): Standard body text on long-form articles.
• Ink 600 (#555555): Secondary text, captions, metadata.
• Ink 500 (#767676): Bylines, timestamps, tertiary metadata (AA-passing on white).
• Ink 400 (#999999): Disabled text, placeholder.
• Line 300 (#cccccc): Hairline rules, dividers, input borders.
• Line 200 (#e2e2e2): Subtle dividers, table zebra lines.
• Surface 100 (#f4f4f4): Section backgrounds, pull-quote fills, alternating bands.
• Surface 50 (#fafafa): The faintest off-white tint for grouped modules.

Surface & Borders

• Border Default: #cccccc (Line 300). Input borders, card edges, content dividers.
• Border Strong: #000000. Editorial rules, active borders, emphasis frames — WIRED frequently uses a full-black hairline.
• Section Band: #f4f4f4 (Surface 100). Alternating content sections, sidebars.
• Overlay Scrim: rgba(0,0,0,0.6). Modal/lightbox backdrops, image-gallery overlays.
• Reverse Surface: #000000 with #ffffff text — used for high-impact promo blocks and the footer.

3. Typography Rules

Font Family

• Display (Headlines): "Tungsten", "WIRED Condensed", "Oswald", "Bebas Neue", "Helvetica Neue Condensed", "Arial Narrow", sans-serif — condensed, tall, all-caps-leaning.
• Body (Long-form): "Akkurat", "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif — humanist, neutral, highly legible.
• Serif (Editorial accents): "Vitesse", "Exchange", Georgia, "Times New Roman", serif — slab/serif for decks, pull-quotes, and feature intros.
• Monospace (Data/code): "Akkurat Mono", "SF Mono", Menlo, Consolas, monospace — for code blocks and data tables in tech coverage.

Hierarchy

Principles

• Condensed shouts, humanist speaks. Headlines use the narrow condensed display; everything readable-at-length uses the open humanist sans. Never set body text in the condensed face.
• All-caps kickers. Section tags and bylines are uppercase with positive letter-spacing (0.04em–0.08em); headlines are sentence- or title-case in condensed type.
• Tight display leading. Big condensed headlines run at ~0.94–1.0 line-height so multi-line decks stack into a dense block — a print-derived signature.
• Generous body leading. Long-form body runs at 1.55–1.63 to keep dense, technical prose readable.
• Red is typographic punctuation. Links, kickers, and emphasized inline terms turn red; the rest stays black. Red is never a background for body text.

4. Component Stylings

Buttons

WIRED buttons are print-derived: square or barely-rounded, high-contrast, uppercase or sentence-case labels in the humanist sans. The primary action is solid black or solid red depending on context (subscription/CTA moments go red; utility actions go black).

Primary / Black

• Background: #000000
• Text: #ffffff
• Border: none
• Radius: 2px
• Padding: 14px 28px
• Font: 15px / 700 / Akkurat, letter-spacing 0.04em, often UPPERCASE
• Hover: background #333333
• Disabled: background #999999, text #ffffff
• Use: Primary utility action (Save, Continue, Read More)

Primary / Red (Subscribe)

• Background: #e90c17
• Text: #ffffff
• Border: none
• Radius: 2px
• Padding: 14px 28px
• Font: 15px / 700 / Akkurat, letter-spacing 0.06em, UPPERCASE
• Hover: background #c20a13
• Use: Subscription CTA, conversion moments ("SUBSCRIBE", "JOIN WIRED")

Secondary / Outline

• Background: transparent
• Text: #000000
• Border: 1.5px solid #000000
• Radius: 2px
• Padding: 12.5px 26px
• Font: 15px / 700 / Akkurat, letter-spacing 0.04em
• Hover: background #000000, text #ffffff
• Use: Secondary action paired with a black/red primary

Text / Link Button

• Background: none
• Text: #e90c17
• Border: none (underline on hover)
• Font: 16px / 700 / Akkurat
• Hover: underline, color #c20a13
• Use: Inline tertiary actions, "More stories", section jumps

Inputs

Text Field (default)

• Background: #ffffff
• Text: #1a1a1a
• Border: 1px solid #cccccc
• Radius: 2px
• Padding: 12px 14px
• Font: 16px / 400 / Akkurat
• Placeholder: #999999
• Focus: border #000000, 2px
• Use: Newsletter signup, search, account forms

Search Field

• Background: #f4f4f4
• Text: #1a1a1a
• Border: none (or 1px #e2e2e2)
• Radius: 2px
• Padding: 12px 16px
• Font: 16px / 400 / Akkurat
• Icon: black magnifier, left-aligned
• Use: Site-wide search overlay

Newsletter Inline

• Background: #ffffff
• Text: #1a1a1a
• Border: 1px solid #000000 (bottom emphasis common)
• Radius: 0px
• Padding: 14px 0
• Font: 18px / 400 / Akkurat
• Use: Email capture inside article flow, often a single black underline

Error

• Border: 1px solid #cc0000
• Helper text: #cc0000 13px / 400 below the field
• Use: Validation failure on email/account forms

Cards (Story Cards)

WIRED "cards" are really article teasers built on a rule-and-grid system rather than floating shadow boxes.

Story Card (Standard)

• Background: #ffffff
• Border: none; separated by 1px #cccccc top/bottom rules
• Radius: 0px
• Padding: 16px 0
• Image: top, full-width, square corners, fixed aspect (16:9 or 3:2)
• Kicker: 12px / 700 UPPERCASE, color #e90c17
• Headline: Tungsten 24px / 600 #000000
• Byline: 13px / 700 UPPERCASE #767676
• Use: River of stories on section/index pages

Featured Card (Hero)

• Background: #ffffff (or #000000 reverse for cover features)
• Border: none
• Radius: 0px
• Padding: 24px
• Headline: Tungsten 40–54px / 700
• Use: Lead story atop the homepage or section front

Promo / Subscribe Card

• Background: #000000
• Text: #ffffff
• Border: none
• Radius: 2px
• Padding: 32px
• CTA: Red button inside
• Use: In-feed subscription and membership promos

Badges / Flags

Section Flag (Red)

• Background: #e90c17
• Text: #ffffff
• Border: none
• Radius: 0px
• Padding: 3px 8px
• Font: 11px / 700 UPPERCASE, letter-spacing 0.06em
• Use: "BREAKING", "EXCLUSIVE", live flags

Category Tag (Outline)

• Background: transparent
• Text: #000000
• Border: 1px solid #000000
• Radius: 0px
• Padding: 3px 8px
• Font: 11px / 700 UPPERCASE, letter-spacing 0.06em
• Use: Section labels (SECURITY, SCIENCE, BUSINESS, GEAR)

Member Badge (Solid Black)

• Background: #000000
• Text: #ffffff
• Radius: 0px
• Font: 11px / 700 UPPERCASE
• Use: "WIRED+" / member-only content marker

Navigation

Top Nav Bar

• Background: #ffffff
• Border-bottom: 1px solid #000000
• Logo: black WIRED wordmark, centered or left
• Links: 14px / 700 UPPERCASE Akkurat, #000000, letter-spacing 0.04em
• Hover: text #e90c17
• Sticky: collapses to condensed bar with logo + hamburger + Subscribe on scroll

Section Sub-nav

• Background: #ffffff
• Border-bottom: 1px solid #cccccc
• Active: #000000 text with a 2px #e90c17 underline
• Use: Within-section tabs (Latest, Most Popular, etc.)

Pull-quotes

Editorial Pull-quote

• Background: transparent (or #f4f4f4 band)
• Border-left: 3px solid #e90c17 (or full-width top/bottom black rules)
• Text: Tungsten/Vitesse 30px / 600 #000000
• Padding: 16px 0 16px 20px
• Use: Mid-article emphasis

Footer

Footer

• Background: #000000
• Text: #ffffff / links #cccccc
• Link hover: #ffffff
• Rules: 1px #333333 dividers
• Use: Reverse-out site footer with sitemap, social, legal

---

Verified: 2026-06-06 (WebSearch typography grounding; live DOM fetch blocked by host) Tier 1 sources: WIRED brand identity is documented public knowledge — Tungsten condensed display (Hoefler & Co.), Vitesse slab, Akkurat body; monochrome black/white with the signature WIRED red accent. · https://www.wired.com (live production site) Note: www.wired.com could not be fetched live in this environment; token geometry (radii, paddings) is reconstructed from WIRED's print-and-web editorial system conventions. Hex values are grounded in the canonical WIRED monochrome + red palette.

5. Layout Principles

Spacing System

• Base unit: 8px
• Common values: 4px, 8px, 12px, 16px, 24px, 32px, 48px, 64px, 96px
• Section vertical rhythm: 48–96px between major editorial blocks
• Tight intra-card spacing: 8–16px (density is a feature)

Grid & Container

• Max content width: ~1200px centered
• Editorial article column: ~680–720px for optimal long-form measure
• Index/section pages: 12-column grid, frequently 3- and 4-up story rivers
• Hairline rules (1px #cccccc or #000000) divide columns and rows like a broadsheet
• Gutters: 24–32px desktop, 16px mobile

Whitespace Philosophy

• Density over air. WIRED packs more stories per viewport than a typical marketing site — the grid is dense and rule-divided, evoking a newspaper front page.
• Rules instead of shadows. Separation is achieved with hairline rules and the grid, not floating cards or drop-shadows.
• Headline gets the room. The one place WIRED spends whitespace is around big condensed headlines — generous margins frame the display type.

Border Radius Scale

• Sharp (0px): Story cards, images, badges, flags, dividers — the default
• Minimal (2px): Buttons, inputs, promo blocks — barely softened
• Never exceeds 2px except for avatars (circular) — square geometry is brand-critical

6. Depth & Elevation

Shadow Philosophy: WIRED is fundamentally a flat, print-derived system. Depth is the exception, not the rule. The default separation tool is the hairline rule and the grid, exactly as in a newspaper. Shadows appear only on genuinely floating UI (menus, modals, sticky nav) and are pure-black, single-layer, and restrained. Where a SaaS brand leans on elevation to signal interactivity, WIRED leans on color (red) and rules.

Blur Effects

• Paywall/registration modals apply a subtle backdrop blur (backdrop-filter: blur(4px)) over a rgba(0,0,0,0.6) scrim
• Sticky nav may apply a faint blur when overlapping imagery

7. Do's and Don'ts

Do

• Build on pure black-on-white; treat color as a rationed resource
• Use WIRED Red (#e90c17) only for links, kickers, flags, and conversion CTAs
• Set headlines in the condensed display face, all-caps-leaning, tight leading
• Set body in the humanist sans at 16–19px with 1.55+ line-height
• Separate content with 1px hairline rules and a strict grid
• Keep corners square (0px) or barely-rounded (2px)
• Use uppercase letter-spaced kickers/bylines above headlines

Don't

• Don't set body or long-form text in the condensed display face
• Don't use red as a background behind paragraphs of text — it's an accent, not a surface
• Don't add rounded corners > 2px or pill shapes (except avatars)
• Don't lean on drop-shadows for separation — use rules and the grid
• Don't introduce a second accent hue; red is the only hot color
• Don't soften the contrast — WIRED is high-contrast black/white by design
• Don't center long-form body text; left-align with a measured column

8. Responsive Behavior

Breakpoints

Touch Targets

• Buttons: minimum 44px tall on touch
• Nav links: 44px tap rows in the mobile drawer
• Story card whole-area is tappable on mobile

Collapsing Strategy

• Top nav collapses to logo + hamburger + Subscribe button on mobile
• Multi-column rivers stack to single column
• Side rails (most-popular, related) move below the article body
• Sticky bottom subscribe bar appears on mobile article reads

Image Behavior

• Hero images: full-bleed on mobile, square corners maintained
• Aspect ratios locked (16:9 lead, 3:2 cards) to preserve the editorial grid
• Photo credits in 13px #767676 caption directly beneath, left-aligned

9. Agent Prompt Guide

Quick Color Reference

• Primary ink / headlines: WIRED Black (#000000)
• Background: White (#ffffff)
• Accent / links / CTA: WIRED Red (#e90c17)
• Red hover: Deep Red (#c20a13)
• Body text: Ink 700 (#333333)
• Secondary text: Ink 600 (#555555)
• Metadata / byline: Ink 500 (#767676)
• Hairline rule: Line 300 (#cccccc)
• Section band: Surface 100 (#f4f4f4)
• Error: Error Red (#cc0000)
• Success: Green (#0a7d3f)

Example Component Prompts

• "Create a WIRED story card: white bg, no shadow, separated by 1px #cccccc top/bottom rules. Top: full-width 16:9 image, square corners. Kicker 12px weight 700 UPPERCASE #e90c17 letter-spacing 0.06em. Headline Tungsten/condensed 24px weight 600 #000000. Byline 13px weight 700 UPPERCASE #767676."
• "Build a subscribe button: #e90c17 bg, white text, 15px weight 700 UPPERCASE, letter-spacing 0.06em, 14px/28px padding, 2px radius. Hover bg #c20a13."
• "Design a WIRED top nav: white bg, 1px solid #000000 bottom border. Black wordmark left. Links 14px weight 700 UPPERCASE #000000 letter-spacing 0.04em, hover #e90c17. Red SUBSCRIBE button right."
• "Create an article hero: kicker 12px UPPERCASE red, headline Tungsten 54px weight 700 #000000 line-height 0.96, deck Georgia/serif 22px #333333, byline 13px UPPERCASE #767676. Left-aligned, ~700px measure."
• "Design a pull-quote: 3px solid #e90c17 left border, Tungsten 30px weight 600 #000000, 16px 0 16px 20px padding, transparent bg."

Iteration Guide

1. Default to pure black-on-white; add red only where the user interacts or where editorial emphasis is needed
2. Headlines = condensed display face, tight leading (0.94–1.0), all-caps-leaning
3. Body = humanist sans, 16–19px, 1.55+ line-height, left-aligned
4. Separate with 1px hairline rules, not shadows or rounded cards
5. Corners are 0px (content) or 2px (controls) — never pills
6. Kickers and bylines are uppercase with positive letter-spacing
7. One accent only: WIRED Red #e90c17

---

10. Voice & Tone

WIRED writes like the smartest, most plugged-in person at the table — declarative, ahead of the curve, occasionally provocative, never breathless. Sentences are confident and active. Tech is treated as a cultural force, not a spec sheet. Headlines are punchy and often play on words; body copy is rigorous and reported. There is wit, but it serves the argument.

Forbidden moves. No clickbait hedging ("You won't believe..."), no exclamation-point hype, no corporate jargon ("synergy", "leverage" as a verb in UI), no apologetic groveling ("We're so sorry for the inconvenience"). WIRED is confident; the copy should be too.

11. Brand Narrative

WIRED launched in 1993 in San Francisco, founded by Louis Rossetto and Jane Metcalfe, with early creative direction from John Plunkett and Barbara Kuhr that made the magazine instantly notorious for fluorescent inks, metallic pages, and typography that violated every rule of polite publishing. WIRED's founding thesis was that the digital revolution was not a business-technology story but a cultural and societal one — and the design had to feel like the future was arriving loud and fast.

Owned today by Condé Nast, WIRED has matured from its psychedelic-print origins into a disciplined, authoritative editorial brand covering AI, security, science, business, culture, and the politics of technology. The visual language traded the 1990s day-glo chaos for a high-contrast black-and-white system with a single hot red accent — the discipline of a newspaper of record, executed with the typographic muscle of a design magazine. The condensed display type is the through-line: from the early masthead to today's Tungsten-driven headlines, WIRED has always set its titles tall, narrow, and loud.

The design's job is to make dense, technical, sometimes alarming reporting feel urgent and authoritative without becoming noisy. Monochrome keeps the focus on words and images; red signals "this matters, act here"; the condensed headlines give every story the weight of a front-page lead. WIRED refuses the soft, rounded, pastel friendliness of the consumer-tech companies it covers — its aesthetic is deliberately journalistic, a little adversarial, and proud of its ink.

What WIRED refuses: the gradient-and-glow of startup landing pages, the infinite rounded corners of app design, the timid grayscale of corporate sites. WIRED occupies the position of the confident critic — designed to be read, archived, and believed.

12. Principles

1. Monochrome first, red as punctuation. The page is black on white. Red appears only at points of interaction or editorial emphasis. If everything is red, nothing is.
2. Condensed shouts, humanist speaks. The narrow display face is for headlines and flags; the open humanist sans is for anything read at length. Never blur the two.
3. Rules, not shadows. Separation comes from the grid and 1px hairlines, as in print. Elevation is reserved for genuinely floating UI.
4. Square is the default. Corners are 0px (content) or 2px (controls). Pills and big radii belong to other brands.
5. Density is editorial. Pack the river; show the reader how much there is to know. WIRED earns trust by abundance of reporting, not by airy minimalism.
6. Headlines get the whitespace. The one luxury is space around big condensed titles — frame the display type, then get dense again.
7. Contrast is non-negotiable. Black on white, white on black. Never mush the system into grays for "softness."
8. Authority through restraint. One accent, two type families, square geometry. Discipline reads as credibility.

13. Personas

Personas below are fictional archetypes informed by WIRED's publicly described readership, not individual people.

Marcus, 34, Austin. Senior software engineer and longtime WIRED subscriber. Reads on desktop during lunch and on mobile in line for coffee. Comes for the AI and security coverage, stays for the longform features. Skims the river fast — the condensed headlines and red kickers let him triage twenty stories in a minute. Hates paywalls that interrupt mid-paragraph; tolerates them at the end. Values that WIRED feels like journalism, not a content farm.

Priya, 41, London. Product director at a fintech. Subscribes for the business-of-technology angle and the policy reporting. Reads decks and standfirsts to decide what's worth her time, then commits to two or three full features a week. Forwards stories to her team. Notices design: she registers WIRED's typographic confidence as a signal of editorial seriousness and would distrust a redesign that looked "appy" or rounded.

Devon, 23, Toronto. Grad student in HCI, casual reader who arrives via social links and search. Doesn't subscribe (yet) but recognizes WIRED's black-red identity instantly. Reads on mobile, single-column, fast. The brand's job here is conversion: a clean read, a confident value proposition, a red SUBSCRIBE that feels like joining something credible rather than being upsold.

14. States

15. Motion & Easing

Durations:

Easings:

Signature motions.

1. Red hover snap. Links and headlines transition to #e90c17 over motion-fast / ease-standard. The shift is quick and crisp — editorial confidence, not a slow fade.
2. Article progress hairline. A 2px #e90c17 bar at the top of articles advances linear with scroll depth — WIRED's signature reading indicator.
3. Modal entrance. Paywall/gallery modals fade the scrim and rise the panel 16px over motion-slow / ease-enter; dismissal is faster (motion-standard / ease-exit).
4. Card hover lift. Promo cards (only) lift with a 0px 2px 8px rgba(0,0,0,0.12) shadow over motion-standard. Story river cards do NOT lift — they only recolor the headline, preserving the flat print feel.
5. Reduce motion. Under prefers-reduced-motion: reduce, all transitions collapse to motion-instant; the progress hairline jumps rather than slides; shimmer is replaced by a static #f4f4f4 block.