Scarica

150 design system..

Design system ancorati al brand che i plugin possono adottare via `od.craft.requires`. Ognuno con palette, tipografia, motion e voice; aggancia un progetto a un sistema e ogni output di plugin eredita la stessa identità.

Cos'è un sistema di design?

Un sistema di design è un insieme riutilizzabile di fondamenta del brand — palette colori, tipografia, spaziatura, motion e voice — che mantiene la coerenza in ogni schermata. In Open Design ogni sistema di design è un plugin: collegalo a un progetto e il tuo coding agent eredita automaticamente palette, tipografia, motion e voice, così tutto ciò che genera rimane on-brand.

Ogni sistema è un file DESIGN.md

Ogni design system qui è un singolo DESIGN.md — una specifica markdown leggibile da persone e agent che racchiude il tema visivo del brand, i ruoli cromatici, la scala tipografica e il linguaggio di interazione. Vive nel tuo repo, viene versionato in git e viaggia con il tuo progetto.

Punta Claude Code, Cursor o qualsiasi coding agent al file e ogni componente, pagina e asset che genera eredita la stessa identità. DESIGN.md è un formato aperto, Apache-2.0; Open Design è la libreria e gli strumenti open-source e local-first costruiti attorno ad esso.

# 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 estratto di DESIGN.md
  1. 01

    Scegli un sistema

    Sfoglia la libreria qui sopra e apri qualsiasi sistema per leggerne il DESIGN.md completo — palette, tipografia, motion e voce.

  2. 02

    Inseriscilo nel tuo progetto

    Salva il DESIGN.md nella radice del tuo repo. È puro markdown — nessuno step di build, nessun account, nessun export.

  3. 03

    Indirizza il tuo agent ad esso

    Di’ a Claude Code o Cursor di seguire DESIGN.md e ogni output rimane coerente con il brand.

DESIGN.md è un formato aperto (Apache-2.0). I sistemi di Open Design sono liberi da leggere, forkare e a cui contribuire su GitHub.

Domande frequenti

  • Che cos’è un design system?

    Un design system è un’unica fonte di verità per il linguaggio visivo di un brand — palette, tipografia, spaziatura, motion e tono — così ogni schermata e asset sembra un unico prodotto coerente.

  • Che cos’è un file DESIGN.md?

    DESIGN.md è un formato aperto, basato su markdown, per descrivere un design system in un modo leggibile sia dalle persone sia dagli AI coding agent. Racchiude i ruoli cromatici, la scala tipografica e i pattern di interazione come testo semplice che conservi nel tuo repo.

  • Come uso un DESIGN.md con Claude Code o Cursor?

    Salva il file nella radice del tuo progetto e di’ al tuo agent di seguirlo. Open Design può anche agganciare un progetto a un sistema così ogni output dei plugin eredita automaticamente la stessa identità.

  • Questi design system sono gratuiti?

    Sì. Ogni sistema qui è open source e libero da leggere, scaricare, forkare e a cui contribuire. Open Design stesso è Apache-2.0 e local-first.

  • Quanti design system ci sono?

    150 e in continua crescita, che spaziano tra stili consumer tech, editoriali e sperimentali. Nuovi sistemi arrivano regolarmente e puoi contribuire con i tuoi su GitHub.

  • Posso creare il mio DESIGN.md?

    Sì — scrivi un DESIGN.md a mano, oppure lascia che Open Design ne generi uno da un sito di riferimento, poi riutilizzalo in ogni progetto e agent.