# PASSI DS > Design system aberto e em português que acompanha o livro "Design System: o que você também precisa saber", de João Passini. 182 tokens (claro, escuro e alto contraste), 52 componentes, 20 padrões de tela e 201 ícones, no Figma e em arquivos legíveis por máquina. Licença CC BY 4.0. Comece por diretrizes/Guidelines.md. Use os tokens de css/passi.css e nunca valores soltos. Os nomes estão em português. ## Diretrizes - [Guidelines.md](diretrizes/Guidelines.md): porta de entrada, regras gerais e árvore de decisão - [Regras para ferramentas de código](AGENTS.md): o que uma IA deve seguir ao escrever código com o PASSI DS - [Decisões](diretrizes/decisoes.md): o porquê das escolhas do sistema, com data ## Tokens - [Cores](diretrizes/tokens/cores.md): cores com função, claro, escuro e alto contraste - [Acessibilidade](diretrizes/fundamentos/acessibilidade.md): meta WCAG 2.2 AA e NBR 17225, contraste, foco e modos - [IA no produto](diretrizes/fundamentos/ia-no-produto.md): como mostrar a IA nas telas, cores, lei e escrita - [Espaçamento, raio e grade](diretrizes/tokens/espacamento-raio-e-grade.md) - [Tipografia](diretrizes/tokens/tipografia.md) - [Movimento](diretrizes/tokens/movimento.md) - [Sombras, desfoques e gradientes](diretrizes/tokens/sombras-desfoques-e-gradientes.md) - [Arquivos de tokens no padrão W3C DTCG 2025.10](tokens/passi.resolver.json) - [Variáveis CSS](css/passi.css) - [Tema para Tailwind v4](tailwind/passi-tailwind.css) ## Código - [Componentes em código](componentes/README.md): Botão, Link, Campo de texto, Checkbox e Alerta como web components - [Fichas de componente](fichas/indice.json): propriedades, estados, acessibilidade e regras de cada componente em JSON - [Verificador](scripts/verificar.mjs): aponta o que foge do sistema num arquivo HTML, CSS ou JSX ## Conteúdo - [Regras de conteúdo condensadas para IA](llms-content.txt) - [Voz e tom](diretrizes/conteudo/voz-e-tom.md) - [Microtexto](diretrizes/conteudo/microtexto.md) - [Glossário](diretrizes/conteudo/glossario.md) - [Linguagem inclusiva](diretrizes/conteudo/linguagem-inclusiva.md) - [Formatos brasileiros](diretrizes/conteudo/formatos-brasileiros.md) ## Componentes - [Botão](diretrizes/componentes/botao.md) - [Botão de ícone](diretrizes/componentes/botao-de-icone.md) - [Grupo de botões](diretrizes/componentes/grupo-de-botoes.md) - [Link](diretrizes/componentes/link.md) - [Campo de texto](diretrizes/componentes/campo-de-texto.md) - [Área de texto](diretrizes/componentes/area-de-texto.md) - [Seleção](diretrizes/componentes/selecao.md) - [Checkbox](diretrizes/componentes/checkbox.md) - [Rádio](diretrizes/componentes/radio.md) - [Interruptor](diretrizes/componentes/interruptor.md) - [Controle deslizante](diretrizes/componentes/controle-deslizante.md) - [Controle segmentado](diretrizes/componentes/controle-segmentado.md) - [Código de verificação](diretrizes/componentes/codigo-de-verificacao.md) - [Envio de arquivo](diretrizes/componentes/envio-de-arquivo.md) - [Etiqueta](diretrizes/componentes/etiqueta.md) - [Selo](diretrizes/componentes/selo.md) - [Avatar](diretrizes/componentes/avatar.md) - [Card](diretrizes/componentes/card.md) - [Acordeão](diretrizes/componentes/acordeao.md) - [Abas](diretrizes/componentes/abas.md) - [Migalhas de pão](diretrizes/componentes/migalhas-de-pao.md) - [Paginação](diretrizes/componentes/paginacao.md) - [Indicador de página](diretrizes/componentes/indicador-de-pagina.md) - [Passos](diretrizes/componentes/passos.md) - [Barra de progresso](diretrizes/componentes/barra-de-progresso.md) - [Carregando](diretrizes/componentes/carregando.md) - [Alerta](diretrizes/componentes/alerta.md) - [Aviso rápido](diretrizes/componentes/aviso-rapido.md) - [Dica flutuante](diretrizes/componentes/dica-flutuante.md) - [Popover](diretrizes/componentes/popover.md) - [Janela modal](diretrizes/componentes/janela-modal.md) - [Menu](diretrizes/componentes/menu.md) - [Item de lista](diretrizes/componentes/item-de-lista.md) - [Barra de ferramentas](diretrizes/componentes/barra-de-ferramentas.md) - [Sobreposição](diretrizes/componentes/sobreposicao.md) - [Atalho de teclado](diretrizes/componentes/atalho-de-teclado.md) - [Divisor](diretrizes/componentes/divisor.md) - [Botão em bloco](diretrizes/componentes/botao-em-bloco.md) - [Seletor de cor](diretrizes/componentes/seletor-de-cor.md) - [Campo com sugestões](diretrizes/componentes/campo-com-sugestoes.md) - [Índice alfabético](diretrizes/componentes/indice-alfabetico.md) - [Rótulo informativo](diretrizes/componentes/rotulo-informativo.md) - [Lista em árvore](diretrizes/componentes/lista-em-arvore.md) - [Proporção de imagem](diretrizes/componentes/proporcao-de-imagem.md) - [Área de destaque](diretrizes/componentes/area-de-destaque.md) - [Rótulo de IA](diretrizes/componentes/rotulo-de-ia.md) - [Explicação da IA](diretrizes/componentes/explicacao-da-ia.md) - [Campo sugerido por IA](diretrizes/componentes/campo-sugerido-por-ia.md) - [Campo de pedido](diretrizes/componentes/campo-de-pedido.md) - [Mensagem da conversa](diretrizes/componentes/mensagem-da-conversa.md) - [Plano de ação](diretrizes/componentes/plano-de-acao.md) - [Aviso de IA](diretrizes/componentes/aviso-de-ia.md) ## Padrões - [Entrar e criar conta](diretrizes/padroes/entrar-e-criar-conta.md) - [Cabeçalho do site](diretrizes/padroes/cabecalho-do-site.md) - [Rodapé do site](diretrizes/padroes/rodape-do-site.md) - [Seções de página](diretrizes/padroes/secoes-de-pagina.md) - [Menu lateral](diretrizes/padroes/menu-lateral.md) - [Navegação do celular](diretrizes/padroes/navegacao-do-celular.md) - [Busca](diretrizes/padroes/busca.md) - [Calendário](diretrizes/padroes/calendario.md) - [Gráficos](diretrizes/padroes/graficos.md) - [Tabela de dados](diretrizes/padroes/tabela-de-dados.md) - [Cards de conteúdo](diretrizes/padroes/cards-de-conteudo.md) - [Card de produto](diretrizes/padroes/card-de-produto.md) - [Card de equipe](diretrizes/padroes/card-de-equipe.md) - [Planos e preços](diretrizes/padroes/planos-e-precos.md) - [Trecho de código](diretrizes/padroes/trecho-de-codigo.md) - [Player de vídeo](diretrizes/padroes/player-de-video.md) - [Menus suspensos](diretrizes/padroes/menus-suspensos.md) - [Janela de ações](diretrizes/padroes/janela-de-acoes.md) - [Central de notificações](diretrizes/padroes/central-de-notificacoes.md) - [Conversa com IA](diretrizes/padroes/conversa-com-ia.md) ## Optional - [Cores](diretrizes/fundamentos/cores.md) - [Tipografia](diretrizes/fundamentos/tipografia.md) - [Espaçamento e grid](diretrizes/fundamentos/espacamento-e-grid.md) - [Cantos e sombras](diretrizes/fundamentos/cantos-e-sombras.md) - [Ícones](diretrizes/fundamentos/icones.md) - [Gradientes](diretrizes/fundamentos/gradientes.md) - [Vidro e desfoque](diretrizes/fundamentos/vidro-e-desfoque.md) - [Movimento](diretrizes/fundamentos/movimento.md) - [Logo](diretrizes/fundamentos/logo.md) - [Utilitários](diretrizes/fundamentos/utilitarios.md) - [Acessibilidade](diretrizes/fundamentos/acessibilidade.md) - [IA no produto](diretrizes/fundamentos/ia-no-produto.md) - [Molduras de aparelho](diretrizes/miscelanea/molduras-de-aparelho.md) - [Tipos de arquivo](diretrizes/miscelanea/tipos-de-arquivo.md) - [Bandeiras](diretrizes/miscelanea/bandeiras.md) - [Formas](diretrizes/miscelanea/formas.md) - [Status](diretrizes/miscelanea/status.md) - [Seleção de texto](diretrizes/miscelanea/selecao-de-texto.md) - [Reações](diretrizes/miscelanea/reacoes.md) - [Texto completo de todas as diretrizes](llms-full.txt)