Pas de designer ? Empruntez un design system éprouvé pour votre app

Comment choisir un site de référence#

Le site que vous empruntez détermine en grande partie le ressenti de votre app : prenez dix minutes pour bien choisir. Une bonne référence a ces caractéristiques :

• Le même type de produit. Un tableau de bord s’inspire bien d’un autre tableau de bord, pas d’une boutique de mode.
• Une densité similaire. Si votre app est faite de formulaires et de tableaux, choisissez un site avec des formulaires et des tableaux, pas un seul grand hero.
• Une couleur d’action claire. Quand une seule couleur indique où cliquer, changer d’identité revient à remplacer cette seule famille de couleurs.
• Une typographie lisible. Ouvrez le site sur votre téléphone et lisez un paragraphe. Si c’est confortable, l’échelle typographique vaut la peine d’être reprise.
• Clair ou sombre, comme vous le voulez. Transformer un système pensé d’abord en sombre en système clair, c’est une refonte, pas un ajustement.
• Un style qui n’est pas la marque elle-même. Si vous reconnaîtriez le site à sa seule couleur, vous auriez trop de choses à changer.

La galerie DESIGN.md peut être filtrée par catégorie, ce qui permet de comparer rapidement quelques candidats.

Étapes#

1. 1

   Présélectionnez deux ou trois sites

   Appuyez-vous sur les critères ci-dessus. Des captures d’écran des écrans qui vous plaisent vous aideront à trancher plus tard.

2. 2

   Récupérez le DESIGN.md de votre favori

   Copiez-le depuis sa page de la galerie, ou collez l’URL sur la page d’accueil de Design Extractor et lancez une extraction Pro. Le mode Pro échantillonne les pages clés du site et renvoie un seul fichier avec couleurs, typographie, espacements, rayons et recettes de composants. Vous découvrez le format ? Lisez ce qu’est un DESIGN.md.

3. 3

   Adaptez-le

   Changez la famille de couleurs de la marque, les polices si elles sont commerciales, le nom et le ton. Le prompt ci-dessous fait tout cela d’un coup.

4. 4

   Placez-le dans votre dépôt et indiquez-le à votre agent

   Enregistrez-le sous le nom DESIGN.md à la racine du dépôt. Le guide Claude Code et Cursor donne la référence à ajouter.

5. 5

   Vérifiez-le

   Collez le fichier modifié dans le validateur DESIGN.md gratuit. Il vérifie la structure et signale les couleurs de texte au contraste insuffisant.

Exemple concret : Notion#

Imaginons que vous aimiez le ressenti de Notion. Voici son design system tel que le DESIGN.md de la galerie le décrit, et ce que vous garderiez ou changeriez.

Ce qu’il faut garder et ce qu’il faut changer

### Note on Font Substitutes
Notion Inter is a proprietary cut; use open-source **Inter** (variable) and keep the token tracking values exactly, since the negative display tracking is calibrated for Inter's metrics. Lyon Text is commercial; substitute **Source Serif 4** or **Newsreader** at the `quote` size and 1.55 line height, or fall back to Georgia as the site's own stack does. Check that the serif's x-height doesn't make 18px quotes read larger than surrounding 16px body.

Adaptez-le avec un seul prompt#

Make DESIGN.md our own design system:
- Rename it from "Notion" to "Acme" in the front matter name and the title.
- Replace primary (#0075DE) with our brand color #2F6FEB, and recompute primary-focus, primary-link, primary-pressed, primary-tint as matching shades.
- Replace the old primary hex values everywhere they appear, including in the component recipes.
- Where Notion Inter or Lyon Text is a commercial font, swap it for the open-source stand-in the Typography section names.
- Rewrite the Overview in our voice: Acme helps small teams plan their week.
Keep every other token as it is, and check that text on the new primary meets 4.5:1 contrast.

Pourquoi ne pas copier une marque telle quelle#

Fichiers utilisés dans ce guide#

De bons points de départ dans la galerie. Chaque page contient le DESIGN.md complet, sa palette et son spécimen typographique.

• 
  Logiciels et SaaS · Productivity & Notes

  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.

• 
  Voyage, transport et logistique

  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.

• 
  Services aux entreprises

  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.

Parcourir tous les exemples de DESIGN.md