Designsysteme für Medien und Unterhaltung
Designsysteme, extrahiert aus Websites für Nachrichten, Magazine, Verlage, Streaming und Unterhaltung. Die Typografie führt: Schlagzeilen-Schriften, Autorenzeilen und Artikelraster, mit sparsam eingesetzter Farbe für Rubriken und Handlungsaufrufe.
2 DESIGN.md-Beispiele in dieser Kategorie, von The Onion und WIRED. Aus den öffentlichen Seiten der jeweiligen Website extrahiert, keine offiziellen Markenrichtlinien. Neu beim Format? Lies, was eine DESIGN.md ist.
The Onion
Das Designsystem von The Onion ist eine digitalisierte Satirezeitung: markante, schmale Gothic-Headlines in Schwarz, ein unverwechselbarer Waldgrün-Akzent (#006b3a) für Rubrikenlabels, Trend-Badges und CTAs, alles vor einem nüchternen weißen bis hellgrauen Hintergrund. Typografie ist das zentrale Gestaltungsmittel: Adobe-Fonts-Grotesken in schmaler und halbschmaler Schnitt (tablet-gothic, rocky-condensed) dominieren die Headlines, während utopia-std-caption den Fließtext übernimmt. Das Layout ist informationsdicht, mit engen Kartenrastern, Trennlinien unterhalb der Artikel und nahezu keinen Eckenradien bei strukturellen Elementen. Die Elevation ist minimal: nur wenige dezente Schatten auf Overlays.
WIRED
WIRED's Designsystem ist ein kontraststarkes, redaktionell geprägtes Monochrom-Framework, das auf einer proprietären Schriftfamilie (Breve Text, WIRED Mono, WiredDisplay, Apercu) und einer nahezu farblosen Palette aufbaut. Schwarz (#000000) dominiert mit 2961 Treffern und prägt Text, Rahmen, Icons und interaktive Zustände. Weiß (#ffffff) bildet die primäre Fläche. Akzentfarbe wird sparsam eingesetzt: Nur #057dbc erscheint als Markenblau für Abo-CTAs. Das Layout nutzt ein strukturiertes mehrspaltiges Story-Raster mit engem 8px-Grundabstand, flachen Flächen ohne Schatten und minimalen Eckradien (4px als Standard). Typografie ist das wichtigste Unterscheidungsmerkmal: Redaktioneller Fließtext verwendet Breve Text in 19px, Abschnittslabels setzen WIRED Mono in Großbuchstaben mit gesperrtem Laufweite, und Display-Überschriften nutzen WiredDisplay. Die Gesamtästhetik wirkt autoritativ, informationsdicht und auf den Lesefluss ausgerichtet.
Deine Website ist nicht dabei?
Füge eine beliebige URL ein und hol dir eine DESIGN.md von jeder Website. Farben, Typografie, Abstände und Tokens, bereit für deinen KI-Workflow.