Wired Inspired Design System

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.