Wired Inspired Design System

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.