150 design systems..

Design systems ancrés à la marque que les plugins peuvent adopter via `od.craft.requires`. Chacun apporte palette, typographie, motion et voix ; branche un projet à un système, chaque sortie de plugin hérite de la même identité.

Qu'est-ce qu'un système de design ?

Un système de design est un ensemble réutilisable de fondations de marque — palette de couleurs, typographie, espacement, motion et voix — qui maintient la cohérence sur tous les écrans. Dans Open Design, chaque système de design est un plugin : associez-y un projet et votre agent de codage hérite automatiquement de la palette, de la typographie, du motion et de la voix, de sorte que tout ce qu'il génère reste dans la charte.

Chaque système est un fichier DESIGN.md

Chaque système de design présenté ici est un unique fichier DESIGN.md — une spécification markdown lisible par les humains comme par les agents, qui décrit le thème visuel de la marque, les rôles de couleur, l’échelle typographique et le langage d’interaction. Il vit dans votre dépôt, se versionne avec git et accompagne votre projet.

Pointez Claude Code, Cursor ou n’importe quel agent de code vers ce fichier, et chaque composant, page et ressource qu’il génère hérite de la même identité. DESIGN.md est un format ouvert sous licence Apache-2.0 ; Open Design est la bibliothèque et l’outillage open source, local-first, construits autour de lui.

# Design System Inspired by Linear

> Category: Productivity
> Focused, low-chrome workspace. Inter, tight grid, restrained color.

## 1. Visual Theme & Atmosphere
A calm, dense product surface where typography and spacing
carry the hierarchy and color is used sparingly for intent.

## 2. Color Palette & Roles
### Primary
- **Ink** (`#0d0e10`): Primary text and dark surfaces.
- **Violet** (`#5e6ad2`): Action and focus accent.
- **Surface** (`#f4f5f8`): Light canvas for content blocks.
Un extrait de DESIGN.md
  1. 01

    Choisissez un système

    Parcourez la bibliothèque ci-dessus et ouvrez n’importe quel système pour lire son DESIGN.md complet — palette, typographie, mouvement et ton.

  2. 02

    Déposez-le dans votre projet

    Enregistrez le DESIGN.md à la racine de votre dépôt. C’est du simple markdown — aucune étape de build, aucun compte, aucun export.

  3. 03

    Pointez votre agent vers lui

    Demandez à Claude Code ou Cursor de suivre DESIGN.md, et chaque résultat reste cohérent avec la marque.

DESIGN.md est un format ouvert (Apache-2.0). Les systèmes d’Open Design sont libres à lire, à forker et à enrichir sur GitHub.

Questions fréquentes

  • Qu’est-ce qu’un système de design ?

    Un système de design est une source unique de vérité pour le langage visuel d’une marque — palette, typographie, espacements, mouvement et ton — afin que chaque écran et chaque ressource forme un produit cohérent.

  • Qu’est-ce qu’un fichier DESIGN.md ?

    DESIGN.md est un format ouvert basé sur le markdown pour décrire un système de design d’une manière lisible à la fois par les humains et par les agents de code IA. Il capture les rôles de couleur, l’échelle typographique et les schémas d’interaction sous forme de texte brut conservé dans votre dépôt.

  • Comment utiliser un DESIGN.md avec Claude Code ou Cursor ?

    Enregistrez le fichier à la racine de votre projet et demandez à votre agent de le suivre. Open Design peut aussi rattacher un projet à un système, pour que chaque résultat de plugin hérite automatiquement de la même identité.

  • Ces systèmes de design sont-ils gratuits ?

    Oui. Chaque système présenté ici est open source et libre à lire, télécharger, forker et enrichir. Open Design lui-même est sous licence Apache-2.0 et local-first.

  • Combien y a-t-il de systèmes de design ?

    150 et le nombre augmente, couvrant les styles tech grand public, éditoriaux et expérimentaux. De nouveaux systèmes arrivent régulièrement, et vous pouvez contribuer aux vôtres sur GitHub.

  • Puis-je créer mon propre DESIGN.md ?

    Oui — rédigez un DESIGN.md à la main, ou laissez Open Design en générer un à partir d’un site de référence, puis réutilisez-le sur chaque projet et chaque agent.