Design systems SaaS
Des design systems extraits de sites de logiciels et de SaaS : applications de productivité, outils de gestion de projet, CRM et autres produits vendus en tant que service. La plupart associent une palette sobre et une seule couleur d’accent à une échelle typographique claire, ce qui en fait un bon point de départ pour un tableau de bord ou une page marketing produit.
3 exemples de DESIGN.md dans cette catégorie, issus de Figma, Linear et Notion. 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.
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.
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.
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.
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.