Baixar

150 design systems..

Design systems ancorados na marca que os plugins podem adotar via `od.craft.requires`. Cada um traz paleta, tipografia, motion e voz; conecte um projeto a um sistema e toda saída de plugin herda a mesma identidade.

O que é um sistema de design?

Um sistema de design é um conjunto reutilizável de fundamentos de marca — paleta de cores, tipografia, espaçamento, motion e voz — que mantém a consistência em todas as telas. No Open Design, cada sistema de design é um plugin: conecte um projeto a ele e seu agente de codificação herda automaticamente a paleta, a tipografia, o motion e a voz, garantindo que tudo que ele gerar permaneça alinhado à marca.

Todo sistema é um arquivo DESIGN.md

Cada design system aqui é um único DESIGN.md — uma especificação em markdown legível por pessoas e por agents que captura o tema visual da marca, os papéis de cor, a escala tipográfica e a linguagem de interação. Ele vive no seu repositório, é versionado no git e acompanha o seu projeto.

Aponte o Claude Code, o Cursor ou qualquer coding agent para o arquivo e todo componente, página e asset que ele gerar herda a mesma identidade. DESIGN.md é um formato aberto Apache-2.0; o Open Design é a biblioteca e as ferramentas open-source, local-first, construídas em torno dele.

# 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.
Um trecho de DESIGN.md
  1. 01

    Escolha um sistema

    Explore a biblioteca acima e abra qualquer sistema para ler seu DESIGN.md completo — paleta, tipografia, movimento e voz.

  2. 02

    Coloque no seu projeto

    Salve o DESIGN.md na raiz do seu repositório. É markdown puro — sem etapa de build, sem conta, sem exportação.

  3. 03

    Aponte seu agent para ele

    Diga ao Claude Code ou ao Cursor para seguir o DESIGN.md, e toda saída permanece consistente com a marca.

DESIGN.md é um formato aberto (Apache-2.0). Os sistemas do Open Design são livres para ler, fazer fork e contribuir no GitHub.

Perguntas frequentes

  • O que é um design system?

    Um design system é uma fonte única de verdade para a linguagem visual de uma marca — paleta, tipografia, espaçamento, movimento e tom — para que cada tela e asset pareçam um único produto coerente.

  • O que é um arquivo DESIGN.md?

    DESIGN.md é um formato aberto, baseado em markdown, para descrever um design system de um jeito que tanto pessoas quanto coding agents de AI conseguem ler. Ele captura papéis de cor, escala tipográfica e padrões de interação como texto puro que você mantém no seu repositório.

  • Como uso um DESIGN.md com o Claude Code ou o Cursor?

    Salve o arquivo na raiz do seu projeto e diga ao seu agent para segui-lo. O Open Design também pode vincular um projeto a um sistema para que toda saída de plugin herde a mesma identidade automaticamente.

  • Esses design systems são gratuitos?

    Sim. Todo sistema aqui é open source e gratuito para ler, baixar, fazer fork e contribuir. O próprio Open Design é Apache-2.0 e local-first.

  • Quantos design systems existem?

    150 e crescendo, abrangendo tecnologia de consumo, estilos editoriais e experimentais. Novos sistemas chegam regularmente, e você pode contribuir com os seus no GitHub.

  • Posso criar meu próprio DESIGN.md?

    Sim — escreva um DESIGN.md à mão, ou deixe o Open Design gerar um a partir de um site de referência e depois reutilize-o em todos os projetos e agents.