--- version: alpha name: Wired Inspired website: "https://www.wired.com" description: An inspired interpretation of Wired's design language — a flagship technology-magazine brand whose surface is a strict editorial duet of stark black wordmark on white canvas, anchored by a tall narrow custom display serif for hero headlines, a humanist serif body face for long-form reading, and a clean sans face for metadata; layout reads like a printed magazine ported to the web with very little marketing chrome. seo: title: "Wired Design System for React — Ink Black (#000000), WiredDisplay, and 30 components" metaDescription: "Wired's editorial design system as a DESIGN.md file. Ink #000000, WiredDisplay 64px serif, 8 colors, 30 components. For React, Next.js, and AI tools." highlights: - "Strict black-on-white duet — #000000 ink on #ffffff canvas with zero chromatic accent except link blue #057dbc reserved for inline article links" - "Three-face type system — WiredDisplay serif at 64px / 400 for headlines, BreveText serif at 19px for body, Apercu sans at 14–17px for metadata" - "Square geometry everywhere — every button, input, and card renders at 0px radius; only icon containers use the full 9999px circle" - "Zero drop-shadows — surface hierarchy comes from #e0e0e0 hairline borders and the bare white canvas, not layered elevation" - "Display weight stays at 400 — the proprietary tall-narrow serif carries hero presence through letterform design, never through heavier weights" tags: - "News & Publishing" lastUpdated: "2026-05-12" author: name: "Dov Azencot" url: "https://x.com/dovazencot" opening: | Wired is the flagship technology-magazine brand under Condé Nast, and its web surface refuses every convention of a SaaS marketing site. The page is unmistakably an editorial product: a stark white canvas at #ffffff, a strict black wordmark in the proprietary WiredDisplay serif rendered at 64px weight 400, and stacked story cards that read as a printed magazine grid ported to the screen. There is no atmospheric gradient, no decorative chrome, no chromatic accent. The brand's only color beyond the black-and-white duet is the small link blue #057dbc reserved for inline body links inside long-form articles. Buttons are square at 0px radius. The masthead band centers the wordmark on a thin white strip with no other decoration. This page packages Wired's editorial surface into a single DESIGN.md file built on the Google Labs spec. Inside the file: 8 color tokens (ink black #000000, canvas white #ffffff, hairline #e0e0e0, body grey #757575, link blue #057dbc, plus near-black variants), 15 typography tokens laddered across three proprietary families (WiredDisplay serif, BreveText serif, Apercu sans), a 9-step spacing scale from 2px to 48px, a 2-value radius system at 0px and 9999px, and 30 components covering story cards, hero bands, masthead, byline rows, hairline dividers, and 10 illustrative example surfaces. Pass the file to Claude, Cursor, or GitHub Copilot and the model writes React components that match Wired's editorial voice rather than producing a generic shadcn theme. The agent reproduces square 0px corners, the strict black-on-white duet, the BreveText body running at 16–19px with 1.45 line-height, and the masthead-band masthead pattern. Or reference the tokens directly: every hex, font, and spacing value is a quoted string ready for Tailwind config, CSS variables, or your own primitive library. Wired is worth studying because it proves typography and hairline borders alone can carry a brand without leaning on chrome, gradient, or shadow. related: - href: "https://github.com/google-labs-code/design.md" title: "The DESIGN.md specification" description: "Google Labs' open spec for machine-readable design system files — the format this page is built on." - href: "/design" title: "Browse all design systems" description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each." - href: "/blocks" title: "React blocks for shadcn/ui" description: "Production-ready hero, pricing, CTA, and dashboard sections built with Tailwind + shadcn primitives." questions: - id: "primary-color" title: "What is Wired's primary brand color?" answer: "Wired's brand color is pure ink black at #000000. It carries the wordmark, every CTA button, the footer fill, and all headline type. The only second color in the entire system is the link blue #057dbc, which is reserved exclusively for inline body links inside long-form articles — never for UI buttons or navigation. The brand operates as a strict black-on-white duet against the #ffffff canvas with a single #e0e0e0 hairline for dividers." - id: "typography" title: "What typography does Wired use, and what should I substitute?" answer: "Wired runs three proprietary families: WiredDisplay, a tall-narrow high-contrast serif used at 64px weight 400 for hero headlines; BreveText, a humanist serif used at 16–19px for long-form body and bylines; and Apercu, a humanist sans used at 14–17px for navigation, metadata, eyebrows, and button labels. The closest open-source substitutes are Playfair Display weight 400 for WiredDisplay, Lora or Source Serif Pro for BreveText, and Inter or Manrope for Apercu." - id: "dark-mode" title: "Does Wired's design system have a dark mode?" answer: "No — Wired's public editorial surface is light-only. The canvas stays at pure white #ffffff with ink #000000 type. The footer band flips to a black surface at #000000 with white text at #ffffff, but that's a single inverted band rather than a full dark theme. The brand reads as a printed magazine, and print does not have a dark mode." - id: "square-geometry" title: "Why are every button and input square at 0px radius?" answer: "Wired's geometry is rectangular by design. Every interactive element — primary buttons, outline buttons, text inputs, story cards — renders at rounded.none (0px). The only circular shape in the system is the button-icon-circular used for social-share icons at 9999px. Square corners reinforce the printed-magazine voice; a rounded CTA would break the editorial register the brand depends on." - id: "use-in-project" title: "Can I use this DESIGN.md to build an editorial React site?" answer: "Yes — the file is structured to feed into Claude, Cursor, or any AI tool that reads design tokens. The agent reproduces Wired's editorial restraint (strict duet, square corners, modest weight 400 display, hairline dividers) rather than a generic shadcn theme. You can also reference tokens directly: every hex like #000000, every font like WiredDisplay, every spacing value like 48px is a quoted string ready to paste into Tailwind config, CSS variables, or your own primitive library." - id: "known-gaps" title: "What's missing from this DESIGN.md spec?" answer: "A handful of items are documented in the Known Gaps section: hover-state colors on story cards (the brand uses subtle ink-to-link transitions that are hard to extract reliably), error and success states for form validation (the brand uses ink-and-body-grey hierarchy with no separate semantic palette), the comment-section sub-system that runs on a secondary Inter fallback, and full responsive image cropping rules for the cover-story 16:9 hero versus the 4:3 secondary cards." colors: primary: "#000000" on-primary: "#ffffff" ink: "#000000" ink-soft: "#1a1a1a" body: "#757575" hairline: "#e0e0e0" canvas: "#ffffff" canvas-soft: "#f5f5f5" link: "#057dbc" typography: display-hero: fontFamily: WiredDisplay, "Times New Roman", Georgia, serif fontSize: 64px fontWeight: 400 lineHeight: 59.52px letterSpacing: -0.5px display-lg: fontFamily: WiredDisplay, "Times New Roman", Georgia, serif fontSize: 48px fontWeight: 400 lineHeight: 50.4px letterSpacing: -0.4px display-md: fontFamily: WiredDisplay, "Times New Roman", Georgia, serif fontSize: 32px fontWeight: 400 lineHeight: 35.2px letterSpacing: -0.3px display-sm: fontFamily: WiredDisplay, "Times New Roman", Georgia, serif fontSize: 26px fontWeight: 400 lineHeight: 28.08px display-xs: fontFamily: Apercu, "Helvetica Neue", Helvetica, Arial, sans-serif fontSize: 20px fontWeight: 700 lineHeight: 24px letterSpacing: -0.28px body-serif-lg: fontFamily: BreveText, Georgia, "Times New Roman", serif fontSize: 19px fontWeight: 400 lineHeight: 27.93px letterSpacing: 0.108px body-serif-md: fontFamily: BreveText, Georgia, "Times New Roman", serif fontSize: 16px fontWeight: 400 lineHeight: 24px letterSpacing: 0.09px body-md: fontFamily: Apercu, "Helvetica Neue", Helvetica, Arial, sans-serif fontSize: 17px fontWeight: 400 lineHeight: 20px body-md-strong: fontFamily: Apercu, "Helvetica Neue", Helvetica, Arial, sans-serif fontSize: 17px fontWeight: 700 lineHeight: 22px letterSpacing: -0.144px body-sm: fontFamily: Apercu, "Helvetica Neue", Helvetica, Arial, sans-serif fontSize: 14px fontWeight: 400 lineHeight: 18px letterSpacing: 0.4px body-sm-strong: fontFamily: Apercu, "Helvetica Neue", Helvetica, Arial, sans-serif fontSize: 14px fontWeight: 700 lineHeight: 18px letterSpacing: 0.4px byline: fontFamily: BreveText, Georgia, "Times New Roman", serif fontSize: 12.73px fontWeight: 700 lineHeight: 28px letterSpacing: 0.108px caption: fontFamily: Apercu, "Helvetica Neue", Helvetica, Arial, sans-serif fontSize: 12px fontWeight: 400 lineHeight: 16px button-md: fontFamily: Apercu, "Helvetica Neue", Helvetica, Arial, sans-serif fontSize: 16px fontWeight: 700 lineHeight: 20px letterSpacing: 0.3px rounded: none: 0px full: 9999px spacing: xxs: 2px xs: 4px sm: 8px md: 12px lg: 16px xl: 20px 2xl: 24px 3xl: 32px 4xl: 48px components: nav-bar: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-sm-strong}" padding: "{spacing.md} {spacing.xl}" nav-link: textColor: "{colors.ink}" typography: "{typography.body-sm-strong}" button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button-md}" rounded: "{rounded.none}" padding: "{spacing.md} {spacing.xl}" button-outline: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" borderColor: "{colors.ink}" typography: "{typography.button-md}" rounded: "{rounded.none}" padding: "{spacing.md} {spacing.xl}" button-icon-circular: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" rounded: "{rounded.full}" padding: "{spacing.sm}" text-input: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" borderColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.none}" padding: "{spacing.md} {spacing.lg}" story-card-large: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.display-md}" padding: "{spacing.lg}" story-card: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.display-xs}" padding: "{spacing.md}" story-row: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" borderColor: "{colors.hairline}" typography: "{typography.body-md-strong}" padding: "{spacing.lg} 0" category-eyebrow: textColor: "{colors.ink}" typography: "{typography.body-sm-strong}" byline-row: backgroundColor: "{colors.canvas}" textColor: "{colors.body}" typography: "{typography.byline}" hero-band: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.display-hero}" padding: "{spacing.4xl} {spacing.xl}" masthead-band: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md-strong}" padding: "{spacing.md} {spacing.xl}" hairline-divider: borderColor: "{colors.hairline}" footer: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.body-sm}" padding: "{spacing.4xl} {spacing.xl}" # ─── Examples (illustrative) — auto-derived; resolve any TO_FILL markers below ─── ex-pricing-tier: description: "Default Pricing tier card. Re-uses feature-card chrome with brand canvas-soft surface." backgroundColor: "{colors.canvas-soft}" textColor: "{colors.ink}" borderColor: "{colors.hairline}" rounded: "{rounded.none}" padding: "{spacing.lg}" ex-pricing-tier-featured: description: "Featured/highlighted tier — polarity-flipped surface (dark fill + light text in light mode, light fill + dark text in dark mode)." backgroundColor: "{colors.ink}" textColor: "{colors.on-primary}" rounded: "{rounded.none}" padding: "{spacing.lg}" ex-product-selector: description: "What's Included summary card — re-purposed for SaaS / B2B verticals (NOT a literal product gallery)." backgroundColor: "{colors.canvas-soft}" rounded: "{rounded.none}" padding: "{spacing.lg}" ex-cart-drawer: description: "Subscription summary — re-purposed for SaaS / B2B (line items per add-on, not literal cart)." backgroundColor: "{colors.canvas}" rounded: "{rounded.none}" padding: "{spacing.lg}" item-divider: "{colors.hairline}" ex-app-shell-row: description: "Sidebar nav row inside the App Shell example. Active state uses brand primary as the indicator." backgroundColor: "{colors.canvas}" activeIndicator: "{colors.primary}" rounded: "{rounded.none}" padding: "{spacing.md} {spacing.lg}" ex-data-table-cell: description: "Default data-table th + td chrome. Header uses mono-caps eyebrow typography; body uses body-sm." headerBackground: "{colors.canvas-soft}" headerTypography: "{typography.caption}" bodyTypography: "{typography.body-sm}" cellPadding: "{spacing.md} {spacing.lg}" rowBorder: "{colors.hairline}" ex-auth-form-card: description: "Sign-in / sign-up card. Re-uses feature-card chrome with text-input primitives inside." backgroundColor: "{colors.canvas-soft}" rounded: "{rounded.none}" padding: "{spacing.lg}" ex-modal-card: description: "Modal dialog surface — same chrome as feature-card with elevated shadow." backgroundColor: "{colors.canvas}" rounded: "{rounded.none}" padding: "{spacing.lg}" ex-empty-state-card: description: "Empty-state illustration frame." backgroundColor: "{colors.canvas-soft}" rounded: "{rounded.none}" padding: "{spacing.3xl}" captionTypography: "{typography.body-md}" ex-toast: description: "Toast notification surface — feature-card shape + medium shadow." backgroundColor: "{colors.canvas}" rounded: "{rounded.none}" padding: "{spacing.md} {spacing.lg}" typography: "{typography.body-sm}" --- ## Overview Wired is the flagship technology-magazine brand under Condé Nast, and the web surface refuses to dress itself as a SaaS marketing site. The page is unmistakably an editorial product: a white canvas at `{colors.canvas}` (#ffffff), a strict black wordmark in the brand's proprietary WiredDisplay (a tall, narrow, high-contrast serif used at 64px weight 400), and stacked story cards that read as a printed magazine grid ported to the screen. There is no atmospheric gradient, no decorative chrome, no chromatic accent. The brand's only color beyond the black-and-white duet is the small `{colors.link}` (#057dbc) used for inline body links inside long-form articles. Type carries the entire identity. Three families ladder the system: WiredDisplay (the proprietary high-contrast serif) for hero and section headlines; BreveText (a humanist serif) for long-form body and bylines; and Apercu (a humanist sans) for metadata, captions, eyebrow tags, and buttons. The pairing is editorial-grade — serifs for narrative, sans for navigation and structural labels. Buttons are square. The brand uses `{rounded.none}` (0px corners) across the entire UI. Newsletter sign-ups, login forms, and "Read more" CTAs all render as sharp rectangles. The only circular shape is the `button-icon-circular` used for social-share affordances. There are no soft drop-shadows; the brand uses 1px hairline borders at `{colors.hairline}` (#e0e0e0) for elevation when needed. **Key Characteristics:** - A strict black-and-white duet with no chromatic accent except the inline link blue `{colors.link}` (#057dbc). The brand reads as a printed magazine. - Three-face typographic system — WiredDisplay serif for display at 64px / 400, BreveText serif for body at 16–19px / 400, Apercu sans for metadata and buttons at 14–17px. - Square buttons (`{rounded.none}` 0px) — the brand never softens corners on interactive elements. - A magazine-style story grid: large feature card at top, two-up secondary, then a vertical stack of bylined story rows separated by `{colors.hairline}` (#e0e0e0) 1px dividers. - The brand's only signature decorative move is the masthead band — a thin white strip with the wordmark centered, no other decoration. - A pure black `{colors.primary}` (#000000) footer band, no graphics, just text columns and the wordmark repeating. ## Known Gaps - **Hover state colors:** the story cards use subtle ink-to-link-blue transitions on headline hover that are hard to extract reliably from the captured surfaces. - **Form validation states:** error and success states are not separately tokenized — the brand uses ink #000000 plus body grey #757575 hierarchy with no semantic red, green, or amber palette. - **Comment section sub-system:** the article comment surface runs on a secondary Inter fallback face that does not appear in the main marketing or article surfaces and is not captured here. - **Responsive image cropping:** the rules governing cover-story 16:9 hero crops versus 4:3 secondary card crops at intermediate viewports are not documented. - **Campaign-mode 2px ink border:** the heavy 2px solid ink border used on certain Subscribe CTAs during campaign moments is described in the elevation table but not represented as a dedicated component token.