A print magazine on the web: black on white, tall WiredDisplay headlines, BreveText body and 0px corners. Wired as a DESIGN.md for React and AI tools.
Curated by Dov Azencot, updated May 12, 2026. Source wired.com (opens in a new tab).
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: 9 colors 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 25 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.
5 highlights
Wired in production, as captured. Scroll the window to see the whole page.
Wired's system runs on #000000 as its primary voltage, used in 3 of 25 components. Type is set in Apercu across 14 tokens from 12px to 64px, weights 400–700. Shape language is sharp — components average 0px corner radius, favoring crisp rectangles.
Sparing, CTA-only voltage · 1
Page and card backgrounds · 2
Headlines, body, captions · 5
Dividers, outlines, rules · 1
Set in Apercu across 14 tokens, from 12px to 64px, weights 400–700. Shown in its own stack: where the font isn't installed, the fallback the file names stands in.
2 corner radii and 9 spacing values. Shape language: sharp, on a 0px base radius.
Each rendered from its tokens (color, type, radius, padding) on Wired's own canvas.
Wired's tokens on the kind of product it builds.
The stories that shape the world, told well
Reporting, analysis and opinion from journalists around the world, every day.
The cities racing to adapt before the next flood
Coastal planners are rewriting the rules for how and where we build. Not everyone agrees on who should pay for it.
Wired staff · 12 min readWe are designing for water we have not seen yet. The people who build the places we live are starting to plan for decades, not seasons, and the work is already changing what gets made.
Wired's tokens, its components and how to use this DESIGN.md in your project.
Specs, directories and component libraries that pair with this design system.
One machine-readable file. Drop it into Claude Code, Cursor, VS Code or any AI tool that reads DESIGN.md.
One machine-readable file: every color, type, radius, spacing, and component token of Wired Inspired.
Drop it into Claude, Cursor, or GitHub Copilot. The agent writes React components and Tailwind classes that match Wired Inspired's visual language.
Or paste the values into your Tailwind config, CSS variables, or component library: every color, size and radius is a quoted, ready-to-copy value.
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:
{colors.link} (#057dbc). The brand reads as a printed magazine.{rounded.none} 0px) — the brand never softens corners on interactive elements.{colors.hairline} (#e0e0e0) 1px dividers.{colors.primary} (#000000) footer band, no graphics, just text columns and the wordmark repeating.BuzzFeed, Financial Times, Ghost and 25 more in News & Publishing: each brand's colors, type and components in one file your AI agent builds from.
The DESIGN.md files are free. Pro adds 6,000+ blocks, premium templates and the MCP server, so your AI editor builds in your system for you.
4.9/5 out of 5 · 150+ reviewsfrom 150+ founders and developers.
Billing
Billed once a year in USD. Cancel anytime.
For personal projects & open source
$32instead of $49/mo
$389 billed yearly
For freelancers, agencies & startups
$66instead of $99/mo
$789 billed yearly · ≈ $13/dev/mo
For companies with larger teams
$132instead of $199/mo
$1,589 billed yearly
Billed once a year in USD. Cancel anytime.
For personal projects & open source
$32instead of $49/mo
$389 billed yearly
For freelancers, agencies & startups
$66instead of $99/mo
$789 billed yearly · ≈ $13/dev/mo
Everything in Individual, plus
For companies with larger teams
$132instead of $199/mo
$1,589 billed yearly
Everything in Team, plus
4.9 out of 5 from 150+ developers
Every block, template and icon, installed by your AI agent in your design system. The DESIGN.md files stay free.
