Exemples de DESIGN.md
De vrais fichiers DESIGN.md extraits de sites publics. Chacun reprend les couleurs, la typographie, les espacements et les composants d’un site, dans le format que lisent les agents de code IA. Ouvrez une carte pour l’afficher et le copier dans votre dépôt.
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.
Airbnb
Le système de design d'Airbnb repose sur une unique police variable propriétaire (Airbnb Cereal VF) et sur une palette neutre presque monochrome, ancrée par un anthracite profond (#222222) et des gris clairs. Le rose corail signature de la marque, « Rausch » (#ff385c), est réservé exclusivement aux appels à l'action principaux et au logo. La mise en page est une grille responsive de cartes photo, avec des rapports image-texte généreux, des coins arrondis de 20px sur les cartes et un système d'ombres ambiantes à plusieurs couches qui crée une profondeur subtile sans contraste marqué. La barre de recherche, en forme de pilule bien visible, regroupe l'action principale de l'utilisateur.
Anthropic
Le système de design d'Anthropic repose sur une identité sobre, centrée sur la typographie, construite autour de deux typefaces sur mesure, Anthropic Serif et Anthropic Sans, posées sur un fond ivoire chaud (#faf9f5). La palette est volontairement minimale : un noir profond (#141413) sur un blanc cassé chaud, avec des tons pierre atténués pour le texte secondaire et les bordures. Les titres serif de grande taille structurent la voix éditoriale, tandis qu'une section en panneau sombre (fond noir profond, texte ivoire) crée un contraste spectaculaire. L'ensemble traduit un sérieux intellectuel et une mission centrée sur la sécurité, grâce à de larges espaces blancs, un fort contraste typographique et l'absence totale d'ornementation décorative.
Apple
Jetons de design extraits par analyse de fréquence de la CSSOM, sans interprétation par un LLM.
Dribbble
Le système de design de Dribbble repose sur un bleu marine presque noir et profond (#0d0c22), associé à une surface blanche nette, ponctuée par un accent rose vif caractéristique (#ea4c89), utilisé avec parcimonie pour la mise en valeur éditoriale et les éléments interactifs. L'ensemble du système typographique repose exclusivement sur Mona Sans, dans toutes ses graisses, et crée la hiérarchie uniquement par le poids et la taille. Les boutons en forme de pilule (border-radius : 1e+07px) et les cartes arrondies (rayon de 12px) définissent le langage géométrique. La mise en page est aérée, avec une grille de base de 8px, et l'élévation est suggérée par des ombres portées subtiles plutôt que par des superpositions marquées.
Duolingo - The world’s most popular way to learn
Jetons de design extraits par analyse de fréquence de la CSSOM, sans interprétation par un LLM.
Figma
Le système de design du site marketing de Figma repose sur une palette monochrome noir et blanc très marquée, ancrée par sa police variable propriétaire figmaSans. La conception est avant tout typographique : de grands titres d'affichage à 88px/56px, avec un interlettrage négatif serré, contrastent avec un texte courant en graisse légère (330). Les appels à l'action utilisent des formes pilules entièrement arrondies (border-radius: 9999px), en noir plein avec du texte blanc. La mise en page est basée sur une grille, avec une largeur de contenu maximale de 1440px, un espacement vertical généreux de 80px entre les sections et un fond blanc épuré. La profondeur reste minimale, avec des ombres discrètes basées sur des superpositions en oklch. Un accent lavande/violet (#cb9fd2) apparaît dans la bannière du pied de page. L'ensemble affiche une esthétique affirmée, typographiquement raffinée et centrée sur la marque.
Harvey
Le système de design de Harvey repose sur une identité typographique bispécifique et sur mesure : HarveySerifFont pour l'autorité éditoriale et HarveySansFont pour la clarté fonctionnelle. Il s'applique à une barre de navigation noir chaud quasi absolu (#0f0e0d) et à une surface de contenu ivoire cassé (#fafaf9). La palette est délibérément monochrome, avec une échelle de gris chaude et graduée (gray-50 à gray-950) sans teinte d'accent, ce qui traduit la confiance et la retenue attendues pour des travaux juridiques à fort enjeu. L'élévation se exprime par le contraste entre les surfaces plutôt que par des ombres. Le titre principal utilise une grande typographie serif de 72 px, qui affirme immédiatement l'autorité typographique, tandis que le texte courant et les éléments d'interface reposent sur la sans-serif personnalisée. Les espacements suivent une grille de base de 8 px, avec des tokens d'échelle nommés (xs, sm, md, xl, 2xl).
IKEA
IKEA présente sur sa page d'accueil mondiale un système de design affirmé et à plat, dont l'élément central est le jaune IKEA (#ffdb00), utilisé comme surface d'action principale, tandis que le bleu IKEA (#0058a3) sert d'accent au logo de la marque. Toute la typographie repose sur une police personnalisée unique, Noto IKEA, déclinée en graisses 400 et 700 selon une échelle étroitement définie, des textes courants à 14px jusqu'aux titres d'affichage à 51px. La hiérarchie visuelle passe entièrement par le contraste des couleurs et la structure de la mise en page, sans recours aux ombres. La mise en page s'appuie sur un conteneur d'une largeur maximale de 90rem, avec un espacement de grille de 1,5rem sur ordinateur, et un rayon de bordure homogène de 8px appliqué aux éléments interactifs. Le fond blanc cassé (#fffefb) apporte de la chaleur face au texte #111111 très contrasté, pour une lecture à fort contraste et accessible.
Klarna
Le système de design de Klarna repose sur un bleu marine très sombre et sophistiqué (#0b051d), associé à des couleurs d'accent vives, dont son rose signature (#ffa8cd). Le système utilise des polices Klarna personnalisées en complément des polices système, privilégie les coins arrondis (32px étant la valeur la plus courante) et conserve un fort contraste pour l'accessibilité. Le design allie professionnalisme et convivialité grâce à des espacements généreux et une hiérarchie typographique claire.
Linear
Le système de design de Linear est une interface produit dense, conçue en priorité pour le mode sombre et destinée aux équipes d'ingénierie. La palette de surfaces repose sur un noir presque pur (#08090a, #0f1011), complété par des gris sombres superposés pour différencier la barre latérale, les cartes et les panneaux. La typographie repose exclusivement sur Inter Variable, avec un interlettrage négatif précis aux grandes tailles, et sur Berkeley Mono pour le code en ligne. Le langage des rayons reste volontairement discret (2 à 6 px en général), les formes en pilule étant réservées aux badges et aux pastilles de statut. L'élévation s'exprime par des bordures intérieures fines de 1 px et des ombres portées de faible opacité plutôt que par des superpositions spectaculaires. La couleur d'appel principale est l'indigo signature de Linear (#5e6ad2), utilisé pour le bouton Sign Up et les liens clés.
Magentix Studio
Magentix Studio habille un studio de produits axés sur l'IA d'un style éditorial, à la manière d'une galerie d'art.
Neon
Le système de design de Neon est une marque orientée développeurs, pensée d'abord pour le sombre, construite sur un fond presque noir (#000000, #18191b) avec un vert néon vif comme couleur primaire (#00e599) et un vert intermédiaire en appui (#34d59a). Le système typographique associe Inter (interface et texte courant) à GeistMono (code et données), avec un interlettrage serré et négatif pour les deux. Les espacements suivent une grille de base de 4 px. Le rayon de bordure est uniformément minimal, à 4 px. L'élévation repose sur le contraste des bordures plutôt que sur les ombres, avec une seule ombre portée diffuse utilisée avec parcimonie. La section héro présente un fond de visualisation de données animé, pleine largeur, qui renforce l'identité de marque autour des bases de données et de l'infrastructure.
Notion
La page d'accueil marketing de Notion associe une section héros bleu marine profond (#02093a) à un corps de page clair (#f6f5f4), avec une police personnalisée (NotionInter) pour tous les rôles de texte. Le design repose sur une grille de 12 colonnes avec des gouttières de 28px, un langage de rayons double (8px pour les cartes, 9999px pour les pastilles) et un système d'ombres progressives à plusieurs couches pour les éléments flottants. Le bleu de marque (#2537b1) guide les boutons d'appel à l'action et les accents, tandis qu'une échelle de gris sémantique (de gray-200 à gray-900) structure toute la hiérarchie des textes et des surfaces.
Paperclip
Paperclip est une plateforme de gestion d'agents IA dotée d'un design sombre et audacieux, ancré sur un fond presque noir (#0a0a0a) et un texte de premier plan blanc (#ffffff). Le héros se distingue par une illustration en dégradé multicolore de formes en pilule empilées, aux teintes magenta, violet, sarcelle, orange et jaune, qui crée une identité visuelle chromatique et dynamique sur fond sombre. La typographie associe Inter Tight (titres condensés et très gras, à interlettrage serré), Inter (texte courant et interface) et JetBrains Mono (code et statuts). Le bouton d'action principal est une pilule blanche sur fond sombre. Un système de couleurs de statut sémantique en vert (#22c55e) signale les états des agents et des tâches dans toute l'interface produit. La navigation est minimaliste et plate, avec une fine bordure inférieure.
PayPal
PayPal, la page d'accueil néerlandaise, adopte un design affirmé et tourné vers le grand public, ancré dans une section héros bleu ciel vif (#60cdff) avec une typographie d'affichage noire ultra-grasse (PayPal Pro w900). La navigation est blanche avec du texte noir et deux boutons d'action bien distincts : « Inloggen » en contour et « Rekening openen » plein en noir. Une bannière d'annonce bleu marine foncé se trouve en haut de page. L'ensemble repose sur un contraste élevé, des coins très arrondis en forme de pilule et une typographie de marque dominante, qui traduit la confiance et l'accessibilité pour un large public de services financiers grand public.
Railway
Le système de design de Railway est une interface de plateforme pour développeurs pensée d'abord pour le mode sombre, reposant sur des surfaces bleu marine presque noir (#13111c, #0b0b0f), un texte blanc cassé à fort contraste (#f7f7f8) et un accent violet distinctif (#853bce / #553f83). La section héros utilise IBM Plex Serif pour un poids éditorial, tandis qu'Inter assure tout le texte de l'interface et que JetBrains Mono / SF Mono sont réservées aux contextes de code. L'élévation repose sur des bordures à lueur blanche en retrait (rgba(255,255,255,0.2) 1.5px inset) plutôt que sur des ombres portées, ce qui donne à l'interface une esthétique de panneaux en verre. Le système d'espacement est basé sur une grille de 4px, avec un rythme marqué de 8/12/16/24/32. Les rayons de bordure sont serrés (4px dominant), avec des valeurs de 8px et 16px appliquées sélectivement aux cartes et aux conteneurs du héros.
Shopify
Le site marketing de Shopify s'ouvre sur un héros vidéo plein écran et spectaculaire, dont le fond quasi noir (#02090a) contraste fortement avec la barre de navigation blanche située au-dessus. L'accent de marque principal est un vert menthe éclatant (#36f4a4), utilisé avec parcimonie pour les mises en avant et les états interactifs. La typographie repose sur deux familles : NeueHaasGrotesk pour les titres display et éditoriaux, et Inter-Variable pour le texte d'interface. Les boutons d'appel à l'action adoptent des formes pilule entièrement arrondies (border-radius: 9999px). L'ensemble du système est affirmé, très contrasté et aspirationnel, conçu pour convertir les visiteurs en marchands.
Snapchat
Le site web de Snapchat repose sur un thème clair à fort contraste, ancré par son jaune de marque emblématique #FFFC00, des surfaces principales presque noires (#121314) et un fond de page blanc et épuré. Le design associe Avenir Next (principale) à Graphik (secondaire) pour une hiérarchie typographique à la fois conviviale et structurée. Les éléments d'interaction, boutons, pastilles et étiquettes, utilisent des rayons entièrement arrondis (100px), tandis que les champs de saisie adoptent un rayon discret de 5px. La navigation prend la forme d'une pastille flottante dotée d'une ombre portée douce. Le contenu est présenté dans de grandes cartes média avec du texte blanc superposé, pour une mise en page immersive qui met en avant l'aperçu de l'application. La densité globale est modérée, avec des espacements généreux et une hiérarchie visuelle claire qui fait le lien entre les conventions du marketing et celles des interfaces produit.
Stripe
Le site marketing de Stripe repose sur un design system très encadré (HDS, Stripe Design System) construit autour de la police variable « sohne-var » en graisses légères (300–400), d'une palette de marque allant du bleu marine profond à l'indigo, ancrée sur #533afd (Stripe Indigo), et d'un héros signature en dégradé spectral pleine largeur. Les composants ont des rayons faibles (4–6 px), des ombres plates ou très discrètes, et sont structurés selon une grille d'espacement de base de 8 px. Le ton général est autoritaire mais accessible : l'infrastructure financière y est présentée par une typographie assurée et un usage mesuré de la couleur.
Supabase
Supabase utilise un système de design orienté sombre, ancré sur un fond presque noir et profond (oklch ~0.19) avec un accent vert vif de marque (#3ecf8e / #3fcf8e). La mise en page s'organise autour d'une grille responsive de cartes de fonctionnalités, avec Manrope pour les titres d'affichage et Inter pour le texte de corps et l'interface. Source Code Pro gère l'ensemble des contextes monospace et de code. Le système de couleurs repose sur des propriétés personnalisées en oklch, nommées de façon sémantique. Les cartes ont un rayon de 12 px avec un traitement de bordure discret, les boutons un rayon de 6 à 8 px, et la densité globale reste modérée, sur une grille d'espacement de base de 8 px.
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.
Uber
Le langage visuel d'Uber allie un minimalisme épuré à des illustrations colorées pour créer une plateforme de transport accessible et pourtant professionnelle. La base noir et blanc, très marquée, apporte clarté et lisibilité, tandis que les grandes illustrations colorées ajoutent de la chaleur et une dimension humaine. La typographie repose sur la famille personnalisée UberMove, afin de garantir la cohérence de la marque, et des espacements généreux donnent de l'air à l'ensemble de l'interface.
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.
xAI
xAI utilise sur son site marketing une palette de surfaces blanc cassé chaleureux, ancrée par --color-ivory (#f9f8f6) et --color-white (#ffffff), avec un noir profond #0a0a0a comme couleur de texte et de premier plan dominante. Le système typographique se répartit entre universalSansDisplay pour les grands titres (60 à 72px, crénage serré et interlettrage négatif), universalSans pour le corps de texte et l'interface, et GeistMono pour le code et les contextes de terminal. Le langage des rayons est dominé par les formes pilule à 9999px sur les boutons d'action et les étiquettes, avec 12px et 6px pour les cartes et les champs de saisie. L'élévation reste minimale : les cartes reçoivent une ombre portée douce à plusieurs couches, tandis que la plupart des surfaces sont à plat. Le ton général est technico-premium : couleurs sobres, larges espaces blancs et une forte esthétique de code monospace qui affirme la crédibilité auprès des développeurs.
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.