Design systems IA
Des design systems extraits de sites de produits d’IA, de modèles et de recherche : assistants, fournisseurs de modèles et outils d’IA. Certains associent une typographie éditoriale et posée à des palettes neutres et chaudes ; d’autres adoptent le style sombre et technique des produits pour développeurs.
4 exemples de DESIGN.md dans cette catégorie, issus de Anthropic, Harvey, Paperclip et xAI. 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.
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.
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).
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.
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.