Media and entertainment design systems
Design systems extracted from news, magazine, publishing, streaming and entertainment websites. Typography leads: headline faces, bylines and story grids, with color used sparingly for sections and calls to action.
2 DESIGN.md examples in this category, from The Onion and WIRED. Extracted from each site’s public pages, not official brand guidelines. New to the format? Read what a DESIGN.md is.
The Onion
The Onion's design system is a digitized satirical newspaper: bold condensed gothic headlines in black, a distinctive forest-green (#006b3a) brand accent used for section labels, trending badges, and CTAs, all set against a stark white/light-gray canvas. Typography is the primary design tool — Adobe Fonts condensed and semi-condensed grotesques (tablet-gothic, rocky-condensed) dominate headlines while utopia-std-caption handles body copy. The layout is information-dense with tight card grids, bottom-border article separators, and near-zero border radii on structural elements. Elevation is minimal — a few subtle shadows on overlays only.
WIRED
WIRED's design system is a high-contrast, editorially-driven monochrome framework built around a proprietary type system (Breve Text, WIRED Mono, WiredDisplay, Apercu) and a near-zero chromatic palette. Black (#000000) dominates at 2961 hits, anchoring text, borders, icons, and interactive states. White (#ffffff) provides the primary surface. Accent color is used sparingly — only #057dbc appears as a brand blue for subscribe CTAs. The layout uses a structured multi-column story grid with tight 8px base spacing, flat surfaces with no box shadows, and minimal border-radius (4px standard). Typography is the primary differentiator: editorial body uses Breve Text at 19px, section labels use WIRED Mono in uppercase with tracked letterspacing, and display headlines use WiredDisplay. The overall aesthetic is authoritative, information-dense, and read-flow-first.
Don’t see the site you need?
Paste any URL to get a DESIGN.md from any website. Colors, typography, spacing, and tokens, ready for your AI workflow.