Design systems médias et divertissement
Des design systems extraits de sites d’information, de magazines, d’édition, de streaming et de divertissement. La typographie mène : polices de titres, signatures et grilles d’articles, avec une couleur utilisée avec parcimonie pour les rubriques et les appels à l’action.
2 exemples de DESIGN.md dans cette catégorie, issus de The Onion et WIRED. Extraits des pages publiques de chaque site, pas de chartes de marque officielles. Vous découvrez le format ? Lisez ce qu’est un DESIGN.md.
The Onion
The design system de The Onion est celui d'un journal satirique numérisé : des titres en gothique condensé et audacieux, en noir, un vert forêt distinctif (#006b3a) comme couleur de marque pour les libellés de rubrique, les badges « tendance » et les appels à l'action, le tout sur une toile blanche ou gris clair et sobre. La typographie est l'outil de design principal : les grotesques condensés et semi-condensés d'Adobe Fonts (tablet-gothic, rocky-condensed) dominent les titres, tandis que utopia-std-caption assure le texte courant. La mise en page est dense en information, avec des grilles de cartes serrées, des séparateurs d'articles à bordure inférieure et des rayons de bordure quasi nuls sur les éléments structurels. L'élévation reste minimale, avec seulement quelques ombres discrètes sur les superpositions.
WIRED
WIRED adopte un système de design monochrome à fort contraste, pensé pour l'éditorial, construit autour d'un système typographique propriétaire (Breve Text, WIRED Mono, WiredDisplay, Apercu) et d'une palette chromatique presque nulle. Le noir (#000000) domine avec 2961 occurrences et structure le texte, les bordures, les icônes et les états interactifs. Le blanc (#ffffff) constitue la surface principale. La couleur d'accent n'intervient que avec parcimonie : seul #057dbc apparaît, comme bleu de marque pour les appels à l'abonnement. La mise en page repose sur une grille de récits en plusieurs colonnes structurée, un espacement de base serré de 8px, des surfaces plates sans ombres portées et des angles faiblement arrondis (4px en standard). La typographie est le principal élément distinctif : le corps éditorial utilise Breve Text en 19px, les intitulés de section utilisent WIRED Mono en majuscules avec un interlettrage élargi, et les titres d'affichage utilisent WiredDisplay. L'esthétique d'ensemble est autoritaire, dense en information et centrée sur la lecture.
Vous ne trouvez pas le site qu’il vous faut ?
Collez une URL pour obtenir le DESIGN.md de n’importe quel site. Couleurs, typographie, espacements et tokens, prêts pour votre workflow IA.