Para código e inteligência artificial
PASSI DS
Os mesmos tokens e as mesmas regras do arquivo Figma, em arquivos que pessoas e ferramentas de IA conseguem ler. Grátis e em português.
0
tokens
0
componentes
0
padrões de tela
0
arquivos de regras
O que tem no pacote
Padrão W3C (DTCG 2025.10)
Tokens (abre em outra aba)
Cores no claro, no escuro e em alto contraste, espaçamento, cantos, movimento, tipografia, sombras, gradientes e grade. Lidos sem erro pelo Terrazzo e pelo Style Dictionary.
Variáveis prontas
CSS (abre em outra aba)
Modo escuro e alto contraste automáticos, movimento reduzido para quem pede, texto e espaço em rem e uma classe para cada estilo de texto. As cores batem com o Figma.
Tema
Tailwind v4 (abre em outra aba)
Classes como bg-fundo-marca, text-texto-padrao e rounded-medio, ligadas às variáveis do PASSI.
103 arquivos de texto
Diretrizes (abre em outra aba)
Um arquivo por fundamento, componente e padrão, com propriedades, uso, conteúdo, acessibilidade, faça e não faça. Inclui um guia de escrita em português e o registro de decisões. A porta de entrada é o Guidelines.md.
AGENTS.md
Regras para IA de código (abre em outra aba)
O que Claude Code, Cursor, Copilot ou v0 devem seguir: só tokens, acessibilidade, textos em português e os ícones oficiais.
llms.txt
Índice para IA (abre em outra aba)
O mapa do pacote para ferramentas de IA, com a versão completa em llms-full.txt, as regras de escrita em llms-content.txt e um resumo visual em DESIGN.md.
No site ou no aplicativo
Carregue as fontes Archivo, Inter e IBM Plex Mono, gratuitas no Google Fonts.
Inclua o arquivo passi.css na página.
Use as variáveis no lugar de valores soltos, por exemplo var(--cor-fundo-marca) e var(--espaco-4).
O modo escuro, o alto contraste e o movimento reduzido seguem o sistema da pessoa. Para forçar um modo, use data-tema="escuro" ou "alto-contraste-claro" na página.
Com inteligência artificial
Para escrever código: copie o AGENTS.md para o seu projeto, com o nome que a sua ferramenta lê (por exemplo CLAUDE.md).
No Figma Make: use o Guidelines.md como arquivo de diretrizes.
Em ferramentas de chat: aponte para o llms.txt deste endereço.
Muitos arquivos curtos funcionam melhor que um longo. Por isso há um arquivo por componente.
O exemplo prático do livro.
O PASSI DS acompanha o livro “Design System: o que você também precisa saber”. Livre para aprender, criar e usar em projetos comerciais, com crédito.