# PASSI DS · Diretrizes

PASSI DS é o design system aberto, em português, que acompanha o livro "Design System: o que você também precisa saber", de João Passini. Versão 1.1.0. Licença CC BY 4.0.

Este arquivo é a porta de entrada. Leia os outros arquivos só quando a tarefa pedir.

## Antes de tudo

1. Tokens primeiro: toda cor, espaço, canto, sombra, fonte e duração vem de `css/passi.css` (ou de `tokens/`). Nunca escreva códigos de cor ou tamanhos soltos.
2. Use as cores com função (`--cor-fundo-*`, `--cor-texto-*`, `--cor-borda-*`). Os primitivos (`--azul-500`, `--neutro-950`) não entram em componentes.
3. Antes de criar um componente, leia o arquivo dele em `componentes/`. Siga as seções "Faça" e "NÃO faça".
4. Antes de montar uma tela inteira, veja se existe um padrão pronto em `padroes/`.
5. Textos da interface em português do Brasil, diretos, com verbos nos botões ("Salvar alterações", não "OK"). Siga [conteudo/microtexto.md](conteudo/microtexto.md), o [glossário](conteudo/glossario.md) e a seção "Conteúdo" de cada componente.
6. Acessibilidade não é opcional: siga a seção "Acessibilidade" de cada componente (teclado, leitor de tela e foco) e a meta WCAG 2.2 AA de [fundamentos/acessibilidade.md](fundamentos/acessibilidade.md).

## Quando ler cada arquivo

- Escolher cor: [tokens/cores.md](tokens/cores.md)
- Espaços, cantos, bordas e grade: [tokens/espacamento-raio-e-grade.md](tokens/espacamento-raio-e-grade.md)
- Texto e fontes: [tokens/tipografia.md](tokens/tipografia.md)
- Animação: [tokens/movimento.md](tokens/movimento.md)
- Sombra, vidro e gradiente: [tokens/sombras-desfoques-e-gradientes.md](tokens/sombras-desfoques-e-gradientes.md)
- Acessibilidade (vale para tudo): [fundamentos/acessibilidade.md](fundamentos/acessibilidade.md)
- Telas com inteligência artificial: [fundamentos/ia-no-produto.md](fundamentos/ia-no-produto.md)
- Escrever textos de interface: [conteudo/microtexto.md](conteudo/microtexto.md), [conteudo/voz-e-tom.md](conteudo/voz-e-tom.md) e [conteudo/glossario.md](conteudo/glossario.md)
- Datas, dinheiro, CPF, CEP e telefone: [conteudo/formatos-brasileiros.md](conteudo/formatos-brasileiros.md)
- Por que o sistema é assim (inclusive onde ele foge do livro): [decisoes.md](decisoes.md)

## Árvore de decisão rápida

- Ação → Botão. Navegação para outro lugar → Link. Ação só com ícone → Botão de ícone (com nome acessível e dica flutuante).
- Escolher 1 entre 2 a 4 opções visíveis → Controle segmentado ou Rádio. Mais de 5 opções → Seleção. Lista longa com digitação → Campo com sugestões.
- Marcar opções independentes → Checkbox. Ligar algo que vale na hora → Interruptor.
- Mensagem que fica na página → Alerta. Confirmação que some sozinha → Aviso rápido. Decisão que interrompe → Janela modal.
- Status só para leitura → Selo. Filtro clicável → Etiqueta.
- Conteúdo ou sugestão feita pela IA → Rótulo de IA (abre a Explicação da IA). Campo preenchido pela IA → Campo sugerido por IA. Conversa com a IA → padrão Conversa com IA. IA que vai agir por alguém → Plano de ação, com confirmação.

## Fundamentos

- [Cores](fundamentos/cores.md): As cores têm duas camadas.
- [Tipografia](fundamentos/tipografia.md): Três famílias, cada uma com um papel.
- [Espaçamento e grid](fundamentos/espacamento-e-grid.md): Todo espaço do sistema é múltiplo de 4.
- [Cantos e sombras](fundamentos/cantos-e-sombras.md): Cantos arredondados deixam a interface mais amigável; a regra é simples: quanto maior o elemento, maior o canto.
- [Ícones](fundamentos/icones.md): 201 ícones desenhados para o PASSI DS, todos no mesmo grid de 24 px, com traço de 1,75 px e pontas arredondadas.
- [Gradientes](fundamentos/gradientes.md): Seis gradientes feitos com as cores do sistema.
- [Vidro e desfoque](fundamentos/vidro-e-desfoque.md): O efeito de vidro deixa um painel translúcido e desfoca o que está atrás.
- [Movimento](fundamentos/movimento.md): O movimento explica o que está acontecendo: de onde algo veio e para onde foi.
- [Logo](fundamentos/logo.md): O logo do PASSI DS junta um símbolo, um círculo cheio e um anel do mesmo tamanho sobrepostos, com o nome em dois pesos: PASSI forte e DS fino.
- [Utilitários](fundamentos/utilitarios.md): Peças de apoio para documentar e entregar telas ao time de desenvolvimento: marcadores numerados, notas de comportamento, medidas e o cabeçalho de cada tela.
- [Acessibilidade](fundamentos/acessibilidade.md): O que o PASSI DS faz para que mais pessoas consigam usar o que você criar, e o que ainda depende de quem desenha e de quem programa.
- [IA no produto](fundamentos/ia-no-produto.md): Como mostrar inteligência artificial nas telas sem exagero e sem esconder nada.

## Conteúdo

- [Voz e tom](conteudo/voz-e-tom.md): A voz do PASSI é sempre a mesma: clara, direta, próxima e honesta.
- [Microtexto](conteudo/microtexto.md): Microtexto é todo texto curto da interface: botões, rótulos, ajudas, erros, avisos e telas vazias.
- [Glossário](conteudo/glossario.md): As palavras da interface do PASSI, sempre as mesmas, em todas as telas.
- [Linguagem inclusiva](conteudo/linguagem-inclusiva.md): Texto que inclui todo mundo sem pedir esforço extra para ler.
- [Formatos brasileiros](conteudo/formatos-brasileiros.md): Como escrever dinheiro, números, datas, horas, documentos e endereços do jeito que o Brasil lê.

## Componentes

- [Botão](componentes/botao.md): Botões disparam ações.
- [Botão de ícone](componentes/botao-de-icone.md): O botão de ícone executa uma ação usando só um símbolo, como fechar, curtir ou compartilhar.
- [Grupo de botões](componentes/grupo-de-botoes.md): O grupo de botões organiza duas ou mais ações relacionadas, como cancelar e salvar.
- [Link](componentes/link.md): O link leva a pessoa para outra página, seção ou site.
- [Campo de texto](componentes/campo-de-texto.md): O campo de texto recebe informações curtas digitadas pela pessoa, como nome, e-mail ou senha.
- [Área de texto](componentes/area-de-texto.md): A área de texto recebe respostas longas, de várias linhas, como comentários, descrições e mensagens.
- [Seleção](componentes/selecao.md): A seleção mostra uma lista de opções que abre sob o campo.
- [Checkbox](componentes/checkbox.md): O checkbox permite escolher uma ou mais opções de uma lista, ou confirmar algo de forma independente, como aceitar os termos de uso.
- [Rádio](componentes/radio.md): O rádio serve para escolher uma única opção dentro de um grupo.
- [Interruptor](componentes/interruptor.md): O interruptor liga e desliga uma configuração.
- [Controle deslizante](componentes/controle-deslizante.md): O controle deslizante escolhe um valor aproximado dentro de um limite, arrastando um pegador.
- [Controle segmentado](componentes/controle-segmentado.md): O controle segmentado alterna entre poucas opções que se excluem, como mensal e anual.
- [Código de verificação](componentes/codigo-de-verificacao.md): O código de verificação recebe números enviados por e-mail ou SMS, uma casa por dígito.
- [Envio de arquivo](componentes/envio-de-arquivo.md): O envio de arquivo deixa a pessoa arrastar um arquivo para a área marcada ou clicar para escolher no computador.
- [Etiqueta](componentes/etiqueta.md): A etiqueta é clicável.
- [Selo](componentes/selo.md): O selo mostra o status ou a categoria de algo, como “Publicado” ou “Em revisão”.
- [Avatar](componentes/avatar.md): O avatar representa uma pessoa.
- [Card](componentes/card.md): O card agrupa informações sobre um mesmo assunto, como um artigo, um produto ou um indicador.
- [Acordeão](componentes/acordeao.md): O acordeão organiza conteúdos em seções que abrem e fecham.
- [Abas](componentes/abas.md): As abas dividem um conteúdo em partes e mostram uma de cada vez, sem sair da página.
- [Migalhas de pão](componentes/migalhas-de-pao.md): As migalhas de pão mostram onde a pessoa está dentro do site e o caminho até ali.
- [Paginação](componentes/paginacao.md): A paginação divide listas longas em páginas menores e permite ir para a anterior, a próxima ou uma página específica.
- [Indicador de página](componentes/indicador-de-pagina.md): O indicador de página mostra, com pontos, em qual tela de um carrossel ou de uma introdução a pessoa está.
- [Passos](componentes/passos.md): Os passos mostram em que etapa de um processo a pessoa está, quantas já foram e quantas faltam.
- [Barra de progresso](componentes/barra-de-progresso.md): A barra de progresso mostra quanto de uma tarefa já foi feito, como um envio de arquivo ou o avanço na leitura.
- [Carregando](componentes/carregando.md): Quando algo demora, a pessoa precisa saber que o sistema está trabalhando.
- [Alerta](componentes/alerta.md): O alerta é uma mensagem que fica na página, perto do conteúdo a que se refere.
- [Aviso rápido](componentes/aviso-rapido.md): O aviso rápido confirma que algo aconteceu, como “Link copiado”.
- [Dica flutuante](componentes/dica-flutuante.md): A dica flutuante é um balão pequeno que explica um elemento quando a pessoa passa o mouse ou navega com o teclado.
- [Popover](componentes/popover.md): O popover é um painel pequeno que abre quando a pessoa clica em algo.
- [Janela modal](componentes/janela-modal.md): A janela modal aparece por cima da tela e pede uma decisão ou uma informação curta antes de continuar.
- [Menu](componentes/menu.md): O menu reúne ações que não cabem na tela, como editar, duplicar ou excluir.
- [Item de lista](componentes/item-de-lista.md): O item de lista organiza conteúdos parecidos um embaixo do outro: capítulos, arquivos, pessoas ou configurações.
- [Barra de ferramentas](componentes/barra-de-ferramentas.md): A barra de ferramentas reúne ações rápidas sobre um conteúdo, como editar, copiar ou compartilhar.
- [Sobreposição](componentes/sobreposicao.md): A sobreposição é uma camada escura e semitransparente que cobre a tela quando uma janela modal abre.
- [Atalho de teclado](componentes/atalho-de-teclado.md): O atalho de teclado mostra quais teclas fazem uma ação mais rápido, como ⌘ + K para buscar.
- [Divisor](componentes/divisor.md): O divisor é uma linha fina que separa grupos de conteúdo.
- [Botão em bloco](componentes/botao-em-bloco.md): O botão em bloco transforma uma escolha importante em cartões grandes e fáceis de tocar.
- [Seletor de cor](componentes/seletor-de-cor.md): O seletor de cor deixa a pessoa escolher uma cor.
- [Campo com sugestões](componentes/campo-com-sugestoes.md): O campo com sugestões junta um campo de texto com uma lista.
- [Índice alfabético](componentes/indice-alfabetico.md): O índice alfabético leva direto a uma letra em listas longas, como glossários e contatos.
- [Rótulo informativo](componentes/rotulo-informativo.md): O rótulo informativo dá nome a um campo ou a um número e oferece uma explicação curta num ícone de ajuda, sem poluir a tela.
- [Lista em árvore](componentes/lista-em-arvore.md): A lista em árvore mostra conteúdos organizados em níveis, como pastas e arquivos ou partes e capítulos de um livro.
- [Proporção de imagem](componentes/proporcao-de-imagem.md): A proporção define a relação entre largura e altura de uma imagem ou vídeo.
- [Área de destaque](componentes/area-de-destaque.md): A área de destaque separa um trecho do texto principal para chamar atenção: uma dica, um exemplo prático, um alerta ou um resumo.
- [Rótulo de IA](componentes/rotulo-de-ia.md): O rótulo de IA avisa que um conteúdo, uma sugestão ou uma resposta veio de inteligência artificial.
- [Explicação da IA](componentes/explicacao-da-ia.md): A explicação abre quando a pessoa clica no rótulo de IA.
- [Campo sugerido por IA](componentes/campo-sugerido-por-ia.md): Quando a IA preenche um campo por você, o PASSI mostra isso com clareza: rótulo de IA, borda própria e uma frase dizendo de onde veio a sugestão.
- [Campo de pedido](componentes/campo-de-pedido.md): O campo de pedido é onde a pessoa escreve para a IA.
- [Mensagem da conversa](componentes/mensagem-da-conversa.md): Cada fala da conversa com a IA.
- [Plano de ação](componentes/plano-de-acao.md): Quando a IA vai agir por você, como mover arquivos ou enviar algo, ela primeiro mostra o plano.
- [Aviso de IA](componentes/aviso-de-ia.md): Avisos curtos que dizem a verdade sobre a IA: quando a pessoa está falando com uma, o que ela não sabe, o que foi gerado por ela e como chegar a uma pessoa.

## Padrões (telas prontas)

- [Entrar e criar conta](padroes/entrar-e-criar-conta.md): Telas prontas para a pessoa entrar, criar conta, recuperar a senha e confirmar o e-mail.
- [Cabeçalho do site](padroes/cabecalho-do-site.md): O cabeçalho fica no topo de todas as páginas.
- [Rodapé do site](padroes/rodape-do-site.md): O rodapé fecha todas as páginas.
- [Seções de página](padroes/secoes-de-pagina.md): Blocos prontos para montar páginas inteiras, como a página de um produto ou de um livro.
- [Menu lateral](padroes/menu-lateral.md): O menu lateral organiza a navegação de aplicativos e áreas logadas.
- [Navegação do celular](padroes/navegacao-do-celular.md): No celular, a navegação principal fica embaixo, ao alcance do polegar.
- [Busca](padroes/busca.md): A busca ajuda a pessoa a encontrar conteúdo sem navegar pelo menu.
- [Calendário](padroes/calendario.md): O calendário ajuda a escolher uma data ou um período, como a data de uma mentoria ou as férias da equipe.
- [Gráficos](padroes/graficos.md): Cards de gráfico para painéis de acompanhamento, como a adoção de um design system.
- [Tabela de dados](padroes/tabela-de-dados.md): A tabela organiza muitos itens em linhas e colunas, para comparar, ordenar e agir sobre eles.
- [Cards de conteúdo](padroes/cards-de-conteudo.md): Cards para listar artigos, capítulos e notícias.
- [Card de produto](padroes/card-de-produto.md): Cards para vender: mostram o produto, a avaliação, o preço e a ação de compra.
- [Card de equipe](padroes/card-de-equipe.md): Cards para apresentar pessoas, como o time que mantém o design system.
- [Planos e preços](padroes/planos-e-precos.md): Páginas de preço comparam opções lado a lado.
- [Trecho de código](padroes/trecho-de-codigo.md): O trecho de código mostra exemplos para quem vai implementar, como as variáveis do design system em CSS.
- [Player de vídeo](padroes/player-de-video.md): O player mostra vídeos com controles claros: tocar, avançar, volume, legendas e tela cheia.
- [Menus suspensos](padroes/menus-suspensos.md): Menus que abrem sobre a página: o menu de contexto, com submenus, o menu da conta, que abre a partir do avatar, e o mega menu, para sites com muitas seções.
- [Janela de ações](padroes/janela-de-acoes.md): No celular, as ações sobre um item aparecem numa folha que sobe da parte de baixo da tela, perto do polegar.
- [Central de notificações](padroes/central-de-notificacoes.md): A central reúne tudo o que aconteceu enquanto a pessoa estava fora: comentários, menções e atualizações.
- [Conversa com IA](padroes/conversa-com-ia.md): Tela de assistente montada só com componentes do PASSI.

## Miscelânea

- [Molduras de aparelho](miscelanea/molduras-de-aparelho.md): Molduras genéricas para mostrar telas em contexto: celular, tablet, notebook e janela de navegador.
- [Tipos de arquivo](miscelanea/tipos-de-arquivo.md): Ícones de formato para anexos, downloads e listas de arquivos.
- [Bandeiras](miscelanea/bandeiras.md): Bandeiras simplificadas para seletores de país, códigos de telefone e endereços.
- [Formas](miscelanea/formas.md): Formas básicas e orgânicas para montar ilustrações simples, fundos de seção e destaques.
- [Status](miscelanea/status.md): Peças para mostrar estado: o ponto de presença de uma pessoa e o indicador de status de um item.
- [Seleção de texto](miscelanea/selecao-de-texto.md): Como o texto aparece quando a pessoa seleciona, busca ou digita: cor de seleção, marca-texto de busca e cursor.
- [Reações](miscelanea/reacoes.md): Desenhos próprios para reagir a comentários e conteúdos, com o contador e a barra de reações rápidas.


---

# Decisões

Registro de decisões do PASSI DS 1.1.0. O registro do porquê das escolhas do PASSI DS. Cada decisão tem data e não é editada: quando uma decisão mudar, entra uma nova que aponta para a antiga, como o livro recomenda no capítulo 10.

## D1 · Nomes dos tokens em português

Data: 20 de outubro de 2026.

- O que o livro diz: Capítulo 7, página 98: o nome do token deve ser em inglês, e só a documentação em português.
- Decisão: Os nomes ficam em português: --cor-fundo-marca, --espaco-4, --raio-medio.
- Por quê: O PASSI DS existe para ensinar quem fala português, e o português é a marca dele. Nomes em português são lidos sem tradução por quem usa o sistema, e todo token de cor tem uma descrição que diz para que serve.
- Consequências: O código que usa o PASSI fica com um idioma só nos tokens. Quem misturar com bibliotecas em inglês deve manter os nomes do PASSI como estão, sem traduzir.
- Alternativa descartada: Traduzir para inglês: mudaria 151 variáveis e todas as ligações nos componentes, quebraria quem já usa e tiraria a identidade do sistema.

## D2 · “Fundo” no lugar de “superfície”

Data: 20 de outubro de 2026.

- O que o livro diz: Capítulo 7, página 99: chamar de superfície, porque a palavra comunica camada e elevação.
- Decisão: A família continua se chamando fundo, com os níveis fundo/pagina, fundo/superficie e fundo/sutil.
- Por quê: “Fundo” é a palavra que quem fala português usa. A ideia do livro está no segundo nível do nome: a superfície fica sobre a página, e no modo escuro ela é um pouco mais clara que a página, como o livro pede.
- Consequências: Ninguém precisa traduzir “surface” para usar o sistema.
- Alternativa descartada: Renomear cor/fundo/* para cor/superficie/*: 27 tokens renomeados e um nome repetido (superficie/superficie).

## D3 · Espaço por fator e cantos com nomes

Data: 20 de outubro de 2026.

- O que o livro diz: Capítulo 7, página 103: prefere o nome igual ao valor (space.16 = 16 px), aceita o fator quando todo o time conhece a base e manda evitar adjetivos como “médio”.
- Decisão: O espaço usa fator de 4 (--espaco-4 = 16 px) e os cantos usam nomes (--raio-pequeno, -medio, -grande, -extra, -pilula).
- Por quê: A base 4 está escrita em todas as páginas de espaço e no começo do arquivo de tokens. Os cantos são uma escala curta, de cinco valores, que quase nunca ganha valor novo, e cada nome vem com a medida ao lado.
- Consequências: Um valor novo de espaço entra pelo fator (ex.: --espaco-7 = 28 px) sem renomear os vizinhos.
- Alternativa descartada: Renomear pelo valor: --espaco-16 hoje vale 64 px e passaria a valer 16 px. O mesmo nome mudaria de valor, o que confunde quem já usa.

## D4 · Escalas de cor curtas

Data: 20 de outubro de 2026.

- O que o livro diz: Capítulo 8, página 112: cada cor ganha de 9 a 11 degraus. Capítulo 6, página 93: token sem uso é removido.
- Decisão: Azul e neutro têm escala completa. Âmbar, verde, vermelho e violeta têm só os degraus que algum componente usa (6 ou 7).
- Por quê: As duas regras do livro puxam para lados opostos. O PASSI segue a segunda: cada token é manutenção, e degrau sem uso só aumenta a lista.
- Consequências: Um degrau novo entra quando um componente precisar dele, com uma decisão nova neste registro.
- Alternativa descartada: Completar as escalas: cerca de 15 cores que nenhum componente usaria.

## D5 · rem no código, px no Figma

Data: 20 de outubro de 2026.

- O que o livro diz: Capítulo 8, página 115: tamanho de texto e espaço em rem, para crescer quando a pessoa aumenta a fonte do navegador; px só no que não deve crescer.
- Decisão: No pacote, espaços, tamanhos de texto, entrelinhas e espaçamento entre letras estão em rem (1 rem = 16 px no tamanho padrão do navegador). Bordas, cantos e sombras ficam em px. No Figma, tudo aparece em px.
- Por quê: É o que a WCAG pede para o texto crescer até 200% sem quebrar a tela. O Figma só trabalha em pixel, por isso os valores de lá são os mesmos multiplicados por 16.
- Consequências: Quem programa usa as variáveis do passi.css e não escreve px em texto nem em espaço.
- Alternativa descartada: Manter tudo em px: contrariava o próprio capítulo de acessibilidade do livro.

## D6 · Cinco estados nos componentes clicáveis

Data: 20 de outubro de 2026.

- O que o livro diz: Capítulo 7, página 101: todo elemento clicável tem cinco estados (padrão, hover, pressionado, foco e desabilitado). “Não quatro. Cinco.”
- Decisão: 20 peças clicáveis ganharam o estado Pressionado (17 componentes e, nos padrões, o Item de navegação, o Item do menu lateral e o Dia do calendário), com 6 cores novas: cor/fundo/marca-pressionado, cor/fundo/erro-pressionado, cor/fundo/invertido-pressionado, cor/fundo/fantasma-pressionado, cor/texto/marca-hover e cor/texto/marca-pressionado. Campo de texto, Área de texto e Seleção não têm pressionado: ao clicar, eles recebem foco ou abrem a lista.
- Por quê: Quem toca ou clica precisa ver que o sistema recebeu a ação.
- Consequências: O hover do Link passou a usar cor/texto/marca-hover. Antes ele usava uma cor de fundo, que ficava com contraste baixo no modo escuro.
- Alternativa descartada: Pressionado só nos botões: o PASSI continuaria contrariando a regra nos outros componentes.

## D7 · APCA como apoio, WCAG como regra

Data: 20 de outubro de 2026.

- O que o livro diz: Capítulo 8, página 114: medir cada par em duas réguas, a da WCAG e a APCA, com alvo Lc 75 para texto corrido.
- Decisão: A tabela de contraste mostra as duas medidas. A WCAG continua decidindo o que passa ou não; a APCA ajuda a escolher entre pares que já passam.
- Por quê: A WCAG 2.2 é o que a lei e a ABNT NBR 17225 cobram. A APCA ainda é estudo para a futura WCAG 3, mas considera o tamanho e o peso da letra.
- Consequências: Alvos de APCA usados no PASSI: Lc 75 para texto corrido, Lc 60 para textos curtos de conteúdo e Lc 45 para títulos grandes. Pares abaixo de Lc 75 servem para textos curtos, não para parágrafos.
- Alternativa descartada: Ficar só com a WCAG: o livro pede as duas réguas.

## D8 · Descrição em todo token de cor

Data: 20 de outubro de 2026.

- O que o livro diz: Capítulo 6, página 93, e Apêndice B, página 295: todo token com função diz para que serve, qual é o seu par e qual contraste atinge.
- Decisão: Os tokens de cor com função têm descrição no Figma e no pacote: o papel, o par e o contraste medido. Os primitivos ficam sem descrição.
- Por quê: Quem chega ao sistema escolhe o token certo sem precisar perguntar.
- Consequências: O contraste das descrições é calculado pelo gerador do pacote, nunca digitado à mão, e muda sozinho se uma cor mudar.
- Alternativa descartada: Descrição em todos os tokens: em espaço, cantos e movimento ela só repetiria o nome.

## D9 · Licença CC BY 4.0

Data: 20 de outubro de 2026.

- O que o livro diz: O livro não trata da licença do sistema.
- Decisão: O PASSI DS passa da licença CC BY-NC 4.0 para a CC BY 4.0, no Figma, no pacote e no site.
- Por quê: Para publicar o arquivo na Comunidade do Figma, onde todo arquivo gratuito usa a CC BY 4.0. Uma licença só em todos os lugares evita dúvida sobre o que pode e o que não pode.
- Consequências: Qualquer pessoa ou empresa pode usar e adaptar o PASSI DS, inclusive em projetos comerciais, desde que dê o crédito. Esta decisão substitui a licença CC BY-NC 4.0 da primeira publicação da versão 1.0.
- Alternativa descartada: Manter a CC BY-NC 4.0 e não publicar na Comunidade, deixando só o link do arquivo no site; ou publicar como recurso pago, com conta de vendedor no Figma.

## D10 · Feito para a web, com equivalência no nativo

Data: 21 de outubro de 2026.

- O que o livro diz: Capítulo 8, página 115: tamanho de texto e espaço em rem, uma unidade que só existe na web.
- Decisão: O PASSI DS é feito e testado para a web, onde funciona melhor. Em apps nativos, os tokens valem por equivalência: 1 rem = 16 pt no iOS, com Dynamic Type no texto, e 16 dp no Android, com sp no tamanho do texto.
- Por quê: Os componentes, o passi.css e os testes de zoom são de web. Dizer onde o sistema funciona melhor evita que alguém espere componentes nativos prontos.
- Consequências: Nomes, cores, proporções e regras de uso são os mesmos em qualquer plataforma. Quem leva para iOS ou Android converte as unidades e usa os componentes nativos da plataforma, seguindo as diretrizes do PASSI. Esta decisão completa a D5.
- Alternativa descartada: Gerar arquivos de tokens para iOS e Android agora: dobraria a manutenção sem um app nativo real para testar.


---

# Tokens de cor

Use sempre os tokens com função (`--cor-*`). Os primitivos ficam por baixo e não entram nos componentes.

## Como escolher

- Fundo de página: `--cor-fundo-pagina`. Cartões e painéis: `--cor-fundo-superficie`. Áreas de apoio: `--cor-fundo-sutil`.
- Texto principal: `--cor-texto-padrao`. Apoio: `--cor-texto-secundario`. Links e destaques: `--cor-texto-marca`.
- Ação principal: fundo `--cor-fundo-marca` com texto `--cor-texto-sobre-marca`.
- Texto sobre fotos, vídeos e gradientes: `--cor-texto-sobre-imagem` (branco em todos os modos). Não use `--cor-texto-sobre-marca` fora das cores de marca, sucesso e erro: no alto contraste escuro ele fica preto.
- Estados: sucesso, alerta e erro têm fundo forte, fundo sutil, texto e borda próprios. Use sempre com ícone ou texto.
- Gráficos: `--cor-dados-1` a `--cor-dados-5` e `--cor-dados-grade`.
- Inteligência artificial: `--cor-texto-ia`, `--cor-fundo-ia-sutil` e `--cor-borda-ia`, só para identificar o que a IA fez, sempre com o ícone brilho ou a palavra IA (veja fundamentos/ia-no-produto.md).

## Estados

Elementos clicáveis têm cinco estados: padrão, hover, pressionado, foco e desabilitado. Fundos fortes têm as versões `-hover` e `-pressionado` (marca, erro e invertido); itens neutros usam `--cor-fundo-sutil` no hover e `--cor-fundo-sutil-hover` pressionados; botões sem fundo usam `--cor-fundo-fantasma-hover` e `--cor-fundo-fantasma-pressionado`; links usam `--cor-texto-marca-hover` e `--cor-texto-marca-pressionado`.

## Tabela

Os modos de alto contraste deixam todo texto com pelo menos 7:1 (veja fundamentos/acessibilidade.md).

| Token (Figma) | CSS | Claro | Escuro | Alto contraste claro | Alto contraste escuro |
|---|---|---|---|---|---|
| fundo/pagina | `--cor-fundo-pagina` | neutro/25 #fafaf7 | neutro/950 #0a0a0a | neutro/0 #ffffff | neutro/950 #0a0a0a |
| fundo/superficie | `--cor-fundo-superficie` | neutro/0 #ffffff | neutro/900 #161615 | neutro/0 #ffffff | neutro/950 #0a0a0a |
| fundo/sutil | `--cor-fundo-sutil` | neutro/50 #f3f3ee | neutro/800 #262625 | neutro/50 #f3f3ee | neutro/900 #161615 |
| fundo/sutil-hover | `--cor-fundo-sutil-hover` | neutro/100 #e8e8e3 | neutro/700 #3c3c3a | neutro/100 #e8e8e3 | neutro/800 #262625 |
| fundo/invertido | `--cor-fundo-invertido` | neutro/950 #0a0a0a | neutro/25 #fafaf7 | neutro/950 #0a0a0a | neutro/0 #ffffff |
| fundo/marca | `--cor-fundo-marca` | azul/500 #2544ec | azul/500 #2544ec | azul/700 #172694 | azul/300 #8fa1f7 |
| fundo/marca-hover | `--cor-fundo-marca-hover` | azul/600 #1b2fb8 | azul/600 #1b2fb8 | azul/800 #141f72 | azul/200 #bcc7fb |
| fundo/marca-sutil | `--cor-fundo-marca-sutil` | azul/50 #eef1fe | azul/950 #0b1036 | azul/50 #eef1fe | azul/950 #0b1036 |
| fundo/sucesso | `--cor-fundo-sucesso` | verde/700 #0f7a36 | verde/700 #0f7a36 | verde/900 #08391a | verde/300 #7fd3a0 |
| fundo/sucesso-sutil | `--cor-fundo-sucesso-sutil` | verde/50 #e9f8ef | verde/900 #08391a | verde/50 #e9f8ef | verde/900 #08391a |
| fundo/alerta | `--cor-fundo-alerta` | ambar/500 #ffb020 | ambar/500 #ffb020 | ambar/500 #ffb020 | ambar/500 #ffb020 |
| fundo/alerta-sutil | `--cor-fundo-alerta-sutil` | ambar/50 #fff7e6 | ambar/900 #4d3100 | ambar/50 #fff7e6 | ambar/900 #4d3100 |
| fundo/erro | `--cor-fundo-erro` | vermelho/500 #dc2626 | vermelho/500 #dc2626 | vermelho/700 #a51c1c | vermelho/300 #f08a8a |
| fundo/erro-hover | `--cor-fundo-erro-hover` | vermelho/700 #a51c1c | vermelho/700 #a51c1c | vermelho/900 #4a0d0d | vermelho/100 #fad0d0 |
| fundo/erro-sutil | `--cor-fundo-erro-sutil` | vermelho/50 #fdecec | vermelho/900 #4a0d0d | vermelho/50 #fdecec | vermelho/900 #4a0d0d |
| fundo/desabilitado | `--cor-fundo-desabilitado` | neutro/100 #e8e8e3 | neutro/800 #262625 | neutro/100 #e8e8e3 | neutro/800 #262625 |
| fundo/sobreposicao | `--cor-fundo-sobreposicao` | transparente/preto-60 #0a0a0a 60% | transparente/preto-60 #0a0a0a 60% | transparente/preto-75 #0a0a0a 75% | transparente/preto-75 #0a0a0a 75% |
| fundo/fantasma-hover | `--cor-fundo-fantasma-hover` | transparente/preto-8 #0a0a0a 8% | transparente/branco-12 #ffffff 12% | transparente/preto-12 #0a0a0a 12% | transparente/branco-15 #ffffff 15% |
| texto/padrao | `--cor-texto-padrao` | neutro/950 #0a0a0a | neutro/25 #fafaf7 | neutro/950 #0a0a0a | neutro/0 #ffffff |
| texto/secundario | `--cor-texto-secundario` | neutro/700 #3c3c3a | neutro/200 #d6d6d0 | neutro/800 #262625 | neutro/100 #e8e8e3 |
| texto/terciario | `--cor-texto-terciario` | neutro/500 #6b6b6b | neutro/400 #8f8f8a | neutro/600 #525250 | neutro/300 #b8b8b2 |
| texto/invertido | `--cor-texto-invertido` | neutro/25 #fafaf7 | neutro/950 #0a0a0a | neutro/0 #ffffff | neutro/950 #0a0a0a |
| texto/marca | `--cor-texto-marca` | azul/500 #2544ec | azul/300 #8fa1f7 | azul/700 #172694 | azul/300 #8fa1f7 |
| texto/sobre-marca | `--cor-texto-sobre-marca` | neutro/0 #ffffff | neutro/0 #ffffff | neutro/0 #ffffff | neutro/950 #0a0a0a |
| texto/sucesso | `--cor-texto-sucesso` | verde/700 #0f7a36 | verde/300 #7fd3a0 | verde/900 #08391a | verde/300 #7fd3a0 |
| texto/alerta | `--cor-texto-alerta` | ambar/800 #8a5700 | ambar/300 #ffcf66 | ambar/900 #4d3100 | ambar/300 #ffcf66 |
| texto/erro | `--cor-texto-erro` | vermelho/700 #a51c1c | vermelho/300 #f08a8a | vermelho/900 #4a0d0d | vermelho/100 #fad0d0 |
| texto/desabilitado | `--cor-texto-desabilitado` | neutro/300 #b8b8b2 | neutro/600 #525250 | neutro/500 #6b6b6b | neutro/500 #6b6b6b |
| borda/padrao | `--cor-borda-padrao` | neutro/100 #e8e8e3 | neutro/800 #262625 | neutro/400 #8f8f8a | neutro/600 #525250 |
| borda/forte | `--cor-borda-forte` | neutro/300 #b8b8b2 | neutro/600 #525250 | neutro/600 #525250 | neutro/400 #8f8f8a |
| borda/marca | `--cor-borda-marca` | azul/500 #2544ec | azul/400 #5b74f2 | azul/700 #172694 | azul/300 #8fa1f7 |
| borda/foco | `--cor-borda-foco` | azul/500 #2544ec | azul/400 #5b74f2 | azul/700 #172694 | azul/300 #8fa1f7 |
| borda/sucesso | `--cor-borda-sucesso` | verde/500 #16a34a | verde/500 #16a34a | verde/700 #0f7a36 | verde/300 #7fd3a0 |
| borda/alerta | `--cor-borda-alerta` | ambar/500 #ffb020 | ambar/500 #ffb020 | ambar/800 #8a5700 | ambar/300 #ffcf66 |
| borda/erro | `--cor-borda-erro` | vermelho/500 #dc2626 | vermelho/300 #f08a8a | vermelho/700 #a51c1c | vermelho/300 #f08a8a |
| fundo/invertido-hover | `--cor-fundo-invertido-hover` | neutro/800 #262625 | neutro/200 #d6d6d0 | neutro/800 #262625 | neutro/200 #d6d6d0 |
| fundo/controle-desligado | `--cor-fundo-controle-desligado` | neutro/400 #8f8f8a | neutro/500 #6b6b6b | neutro/600 #525250 | neutro/400 #8f8f8a |
| dados/1 | `--cor-dados-1` | azul/500 #2544ec | azul/400 #5b74f2 | azul/700 #172694 | azul/300 #8fa1f7 |
| dados/2 | `--cor-dados-2` | azul/300 #8fa1f7 | azul/300 #8fa1f7 | azul/500 #2544ec | azul/100 #dde3fd |
| dados/3 | `--cor-dados-3` | ambar/500 #ffb020 | ambar/500 #ffb020 | ambar/800 #8a5700 | ambar/300 #ffcf66 |
| dados/4 | `--cor-dados-4` | verde/500 #16a34a | verde/300 #7fd3a0 | verde/700 #0f7a36 | verde/300 #7fd3a0 |
| dados/5 | `--cor-dados-5` | neutro/400 #8f8f8a | neutro/500 #6b6b6b | neutro/600 #525250 | neutro/300 #b8b8b2 |
| dados/grade | `--cor-dados-grade` | neutro/100 #e8e8e3 | neutro/800 #262625 | neutro/300 #b8b8b2 | neutro/700 #3c3c3a |
| fundo/selecao | `--cor-fundo-selecao` | azul/200 #bcc7fb | azul/800 #141f72 | azul/200 #bcc7fb | azul/800 #141f72 |
| fundo/marca-texto | `--cor-fundo-marca-texto` | ambar/100 #ffebbf | ambar/900 #4d3100 | ambar/100 #ffebbf | ambar/900 #4d3100 |
| borda/controle | `--cor-borda-controle` | neutro/400 #8f8f8a | neutro/500 #6b6b6b | neutro/700 #3c3c3a | neutro/300 #b8b8b2 |
| texto/sobre-imagem | `--cor-texto-sobre-imagem` | neutro/0 #ffffff | neutro/0 #ffffff | neutro/0 #ffffff | neutro/0 #ffffff |
| texto/ia | `--cor-texto-ia` | violeta/700 #4b2fbf | violeta/300 #ad9ff5 | violeta/700 #4b2fbf | violeta/300 #ad9ff5 |
| fundo/ia-sutil | `--cor-fundo-ia-sutil` | violeta/50 #f3f1fe | violeta/950 #170e3d | violeta/50 #f3f1fe | violeta/950 #170e3d |
| borda/ia | `--cor-borda-ia` | violeta/500 #6e52e6 | violeta/300 #ad9ff5 | violeta/700 #4b2fbf | violeta/300 #ad9ff5 |
| fundo/marca-pressionado | `--cor-fundo-marca-pressionado` | azul/700 #172694 | azul/700 #172694 | azul/900 #111a57 | azul/100 #dde3fd |
| fundo/erro-pressionado | `--cor-fundo-erro-pressionado` | vermelho/900 #4a0d0d | vermelho/900 #4a0d0d | vermelho/900 #4a0d0d | vermelho/50 #fdecec |
| fundo/fantasma-pressionado | `--cor-fundo-fantasma-pressionado` | transparente/preto-12 #0a0a0a 12% | transparente/branco-25 #ffffff 25% | transparente/preto-35 #0a0a0a 35% | transparente/branco-25 #ffffff 25% |
| fundo/invertido-pressionado | `--cor-fundo-invertido-pressionado` | neutro/700 #3c3c3a | neutro/300 #b8b8b2 | neutro/700 #3c3c3a | neutro/300 #b8b8b2 |
| texto/marca-hover | `--cor-texto-marca-hover` | azul/600 #1b2fb8 | azul/200 #bcc7fb | azul/800 #141f72 | azul/200 #bcc7fb |
| texto/marca-pressionado | `--cor-texto-marca-pressionado` | azul/700 #172694 | azul/100 #dde3fd | azul/900 #111a57 | azul/100 #dde3fd |

## Para que serve cada cor

O papel, o par e o contraste medido de cada token. É a mesma descrição que aparece no Figma e no `$description` dos arquivos de tokens.

- `--cor-fundo-pagina`: Fundo da página, atrás de tudo. Texto por cima: texto/padrao. Contraste: 18,9:1 ou mais no claro e no escuro, 19,7:1 ou mais no alto contraste (mínimo 4,5:1 e, no alto contraste, 7:1). APCA: Lc 102 ou mais no claro e no escuro. Alvo APCA: Lc 75 em texto corrido, Lc 60 em textos curtos.
- `--cor-fundo-superficie`: Cards, painéis, campos e janelas sobre a página. A borda cor/borda/padrao separa a superfície da página; a sombra fica só para o que flutua. Texto por cima: texto/padrao. Contraste: 17,3:1 ou mais no claro e no escuro, 19,7:1 ou mais no alto contraste (mínimo 4,5:1 e, no alto contraste, 7:1). APCA: Lc 103 ou mais no claro e no escuro. Alvo APCA: Lc 75 em texto corrido, Lc 60 em textos curtos.
- `--cor-fundo-sutil`: Áreas de apoio e hover de itens neutros, como itens de menu e o botão Contorno. Texto por cima: texto/padrao. Contraste: 14,4:1 ou mais no claro e no escuro, 17,7:1 ou mais no alto contraste (mínimo 4,5:1 e, no alto contraste, 7:1). APCA: Lc 98 ou mais no claro e no escuro. Alvo APCA: Lc 75 em texto corrido, Lc 60 em textos curtos.
- `--cor-fundo-sutil-hover`: Hover sobre fundo/sutil e estado pressionado de itens neutros. Texto por cima: texto/padrao. Contraste: 10,5:1 ou mais no claro e no escuro, 15,1:1 ou mais no alto contraste (mínimo 4,5:1 e, no alto contraste, 7:1). APCA: Lc 92 ou mais no claro e no escuro. Alvo APCA: Lc 75 em texto corrido, Lc 60 em textos curtos.
- `--cor-fundo-invertido`: Bloco de contraste invertido: escuro no claro e claro no escuro, como o botão Secundário. Texto por cima: texto/invertido. Contraste: 18,9:1 ou mais no claro e no escuro, 19,7:1 ou mais no alto contraste (mínimo 4,5:1 e, no alto contraste, 7:1). APCA: Lc 102 ou mais no claro e no escuro. Alvo APCA: Lc 75 em texto corrido, Lc 60 em textos curtos.
- `--cor-fundo-marca`: Ação principal: botão Primário, checkbox e rádio marcados, interruptor ligado. Texto por cima: texto/sobre-marca. Contraste: 6,7:1 ou mais no claro e no escuro, 8,1:1 ou mais no alto contraste (mínimo 4,5:1 e, no alto contraste, 7:1). APCA: Lc 87 ou mais no claro e no escuro. Alvo APCA: Lc 75 em texto corrido, Lc 60 em textos curtos.
- `--cor-fundo-marca-hover`: Hover da ação principal. Texto por cima: texto/sobre-marca. Contraste: 9,7:1 ou mais no claro e no escuro, 11,9:1 ou mais no alto contraste (mínimo 4,5:1 e, no alto contraste, 7:1). APCA: Lc 95 ou mais no claro e no escuro. Alvo APCA: Lc 75 em texto corrido, Lc 60 em textos curtos.
- `--cor-fundo-marca-sutil`: Destaque leve da marca: item selecionado, etiqueta ativa, checkbox desmarcado pressionado. Texto por cima: texto/marca. Contraste: 5,9:1 ou mais no claro e no escuro, 7,5:1 ou mais no alto contraste (mínimo 4,5:1 e, no alto contraste, 7:1). APCA: Lc 53 ou mais no claro e no escuro. Alvo APCA: Lc 75 em texto corrido, Lc 60 em textos curtos.
- `--cor-fundo-sucesso`: Fundo forte de sucesso. Sempre com ícone ou texto. Texto por cima: texto/sobre-marca. Contraste: 5,4:1 ou mais no claro e no escuro, 11,0:1 ou mais no alto contraste (mínimo 4,5:1 e, no alto contraste, 7:1). APCA: Lc 81 ou mais no claro e no escuro. Alvo APCA: Lc 75 em texto corrido, Lc 60 em textos curtos.
- `--cor-fundo-sucesso-sutil`: Fundo de alertas e selos de sucesso. Texto por cima: texto/sucesso. Contraste: 4,9:1 ou mais no claro e no escuro, 7,2:1 ou mais no alto contraste (mínimo 4,5:1 e, no alto contraste, 7:1). APCA: Lc 64 ou mais no claro e no escuro. Alvo APCA: Lc 75 em texto corrido, Lc 60 em textos curtos.
- `--cor-fundo-alerta`: Fundo forte de alerta, em áreas pequenas como selos e pontos de status. Sempre com ícone ou texto.
- `--cor-fundo-alerta-sutil`: Fundo de alertas e selos de atenção. Texto por cima: texto/alerta. Contraste: 5,7:1 ou mais no claro e no escuro, 8,1:1 ou mais no alto contraste (mínimo 4,5:1 e, no alto contraste, 7:1). APCA: Lc 74 ou mais no claro e no escuro. Alvo APCA: Lc 75 em texto corrido, Lc 60 em textos curtos.
- `--cor-fundo-erro`: Fundo forte de erro: botão Perigo e contadores de erro. Texto por cima: texto/sobre-marca. Contraste: 4,8:1 ou mais no claro e no escuro, 7,5:1 ou mais no alto contraste (mínimo 4,5:1 e, no alto contraste, 7:1). APCA: Lc 77 ou mais no claro e no escuro. Alvo APCA: Lc 75 em texto corrido, Lc 60 em textos curtos.
- `--cor-fundo-erro-hover`: Hover de fundo/erro. Texto por cima: texto/sobre-marca. Contraste: 7,5:1 ou mais no claro e no escuro, 14,1:1 ou mais no alto contraste (mínimo 4,5:1 e, no alto contraste, 7:1). APCA: Lc 89 ou mais no claro e no escuro. Alvo APCA: Lc 75 em texto corrido, Lc 60 em textos curtos.
- `--cor-fundo-erro-sutil`: Fundo de alertas e mensagens de erro. Texto por cima: texto/erro. Contraste: 6,4:1 ou mais no claro e no escuro, 11,0:1 ou mais no alto contraste (mínimo 4,5:1 e, no alto contraste, 7:1). APCA: Lc 51 ou mais no claro e no escuro. Alvo APCA: Lc 75 em texto corrido, Lc 60 em textos curtos.
- `--cor-fundo-desabilitado`: Fundo de itens desabilitados. Isento de contraste pela WCAG; explique perto do item por que ele não está disponível.
- `--cor-fundo-sobreposicao`: Camada escura e translúcida atrás de janelas modais.
- `--cor-fundo-fantasma-hover`: Hover translúcido de botões e itens sem fundo (botão Fantasma, segmento). Texto por cima: texto/padrao. Contraste: 14,1:1 ou mais no claro e no escuro, 13,4:1 ou mais no alto contraste (mínimo 4,5:1 e, no alto contraste, 7:1). APCA: Lc 91 ou mais no claro e no escuro. Alvo APCA: Lc 75 em texto corrido, Lc 60 em textos curtos.
- `--cor-texto-padrao`: Texto principal. Medido sobre fundo/pagina. Contraste: 18,9:1 ou mais no claro e no escuro, 19,7:1 ou mais no alto contraste (mínimo 4,5:1 e, no alto contraste, 7:1). APCA: Lc 102 ou mais no claro e no escuro. Alvo APCA: Lc 75 em texto corrido, Lc 60 em textos curtos.
- `--cor-texto-secundario`: Texto de apoio: descrições, ajudas e legendas. Medido sobre fundo/pagina. Contraste: 10,5:1 ou mais no claro e no escuro, 15,1:1 ou mais no alto contraste (mínimo 4,5:1 e, no alto contraste, 7:1). APCA: Lc 81 ou mais no claro e no escuro. Alvo APCA: Lc 75 em texto corrido, Lc 60 em textos curtos.
- `--cor-texto-terciario`: Texto de menor destaque: datas, contadores e textos de exemplo dentro de campos. Medido sobre fundo/superficie. Contraste: 5,3:1 ou mais no claro e no escuro, 7,8:1 ou mais no alto contraste (mínimo 4,5:1 e, no alto contraste, 7:1). APCA: Lc 41 ou mais no claro e no escuro. Alvo APCA: Lc 75 em texto corrido, Lc 60 em textos curtos.
- `--cor-texto-invertido`: Texto sobre fundo/invertido e seus estados. Medido sobre fundo/invertido. Contraste: 18,9:1 ou mais no claro e no escuro, 19,7:1 ou mais no alto contraste (mínimo 4,5:1 e, no alto contraste, 7:1). APCA: Lc 102 ou mais no claro e no escuro. Alvo APCA: Lc 75 em texto corrido, Lc 60 em textos curtos.
- `--cor-texto-marca`: Links e destaques da marca. Medido sobre fundo/superficie. Contraste: 6,7:1 ou mais no claro e no escuro, 8,1:1 ou mais no alto contraste (mínimo 4,5:1 e, no alto contraste, 7:1). APCA: Lc 53 ou mais no claro e no escuro. Alvo APCA: Lc 75 em texto corrido, Lc 60 em textos curtos.
- `--cor-texto-sobre-marca`: Texto e ícone sobre fundo/marca, fundo/sucesso e fundo/erro, com seus estados. Não use sobre fotos: para isso existe texto/sobre-imagem. Medido sobre fundo/marca. Contraste: 6,7:1 ou mais no claro e no escuro, 8,1:1 ou mais no alto contraste (mínimo 4,5:1 e, no alto contraste, 7:1). APCA: Lc 87 ou mais no claro e no escuro. Alvo APCA: Lc 75 em texto corrido, Lc 60 em textos curtos.
- `--cor-texto-sucesso`: Texto de sucesso. Sempre com ícone. Medido sobre fundo/sucesso-sutil. Contraste: 4,9:1 ou mais no claro e no escuro, 7,2:1 ou mais no alto contraste (mínimo 4,5:1 e, no alto contraste, 7:1). APCA: Lc 64 ou mais no claro e no escuro. Alvo APCA: Lc 75 em texto corrido, Lc 60 em textos curtos.
- `--cor-texto-alerta`: Texto de atenção. Sempre com ícone. Medido sobre fundo/alerta-sutil. Contraste: 5,7:1 ou mais no claro e no escuro, 8,1:1 ou mais no alto contraste (mínimo 4,5:1 e, no alto contraste, 7:1). APCA: Lc 74 ou mais no claro e no escuro. Alvo APCA: Lc 75 em texto corrido, Lc 60 em textos curtos.
- `--cor-texto-erro`: Texto de erro: diz o que houve e como resolver. Sempre com ícone. Medido sobre fundo/erro-sutil. Contraste: 6,4:1 ou mais no claro e no escuro, 11,0:1 ou mais no alto contraste (mínimo 4,5:1 e, no alto contraste, 7:1). APCA: Lc 51 ou mais no claro e no escuro. Alvo APCA: Lc 75 em texto corrido, Lc 60 em textos curtos.
- `--cor-texto-desabilitado`: Texto de itens desabilitados. Isento de contraste pela WCAG.
- `--cor-borda-padrao`: Linhas decorativas: divisores e bordas de cards. Isenta de contraste.
- `--cor-borda-forte`: Bordas de botão Contorno e etiquetas, e hover de bordas. Decorativa: o texto identifica o item.
- `--cor-borda-marca`: Borda de itens selecionados e de controles no hover. Medido sobre fundo/superficie. Contraste: 4,5:1 ou mais no claro e no escuro, 8,1:1 ou mais no alto contraste (mínimo 3:1 e, no alto contraste, 4,5:1). APCA: Lc 33 ou mais no claro e no escuro.
- `--cor-borda-foco`: Anel de foco pelo teclado: 2 px, afastado 2 px do componente. Medido sobre fundo/pagina. Contraste: 4,9:1 ou mais no claro e no escuro, 8,1:1 ou mais no alto contraste (mínimo 3:1 e, no alto contraste, 4,5:1). APCA: Lc 34 ou mais no claro e no escuro.
- `--cor-borda-sucesso`: Borda de campos e alertas de sucesso. Sempre com ícone ou texto.
- `--cor-borda-alerta`: Borda de alertas de atenção. Sempre com ícone e texto.
- `--cor-borda-erro`: Borda de campos com erro. Sempre com mensagem de erro. Medido sobre fundo/superficie. Contraste: 4,8:1 ou mais no claro e no escuro, 7,5:1 ou mais no alto contraste (mínimo 3:1 e, no alto contraste, 4,5:1). APCA: Lc 53 ou mais no claro e no escuro.
- `--cor-fundo-invertido-hover`: Hover de fundo/invertido. Texto por cima: texto/invertido. Contraste: 13,5:1 ou mais no claro e no escuro, 13,5:1 ou mais no alto contraste (mínimo 4,5:1 e, no alto contraste, 7:1). APCA: Lc 81 ou mais no claro e no escuro. Alvo APCA: Lc 75 em texto corrido, Lc 60 em textos curtos.
- `--cor-fundo-controle-desligado`: Trilho do interruptor desligado. Medido sobre fundo/superficie. Contraste: 3,2:1 ou mais no claro e no escuro, 6,0:1 ou mais no alto contraste (mínimo 3:1 e, no alto contraste, 4,5:1). APCA: Lc 24 ou mais no claro e no escuro.
- `--cor-dados-1`: Série 1 dos gráficos. Sempre com rótulo ou legenda. Medido sobre fundo/superficie. Contraste: 4,5:1 ou mais no claro e no escuro, 8,1:1 ou mais no alto contraste. APCA: Lc 33 ou mais no claro e no escuro.
- `--cor-dados-2`: Série 2 dos gráficos. Sempre com rótulo ou legenda. Medido sobre fundo/superficie. Contraste: 2,4:1 ou mais no claro e no escuro, 6,7:1 ou mais no alto contraste. APCA: Lc 47 ou mais no claro e no escuro.
- `--cor-dados-3`: Série 3 dos gráficos. Sempre com rótulo ou legenda. Medido sobre fundo/superficie. Contraste: 1,8:1 ou mais no claro e no escuro, 6,0:1 ou mais no alto contraste. APCA: Lc 33 ou mais no claro e no escuro.
- `--cor-dados-4`: Série 4 dos gráficos. Sempre com rótulo ou legenda. Medido sobre fundo/superficie. Contraste: 3,2:1 ou mais no claro e no escuro, 5,4:1 ou mais no alto contraste. APCA: Lc 59 ou mais no claro e no escuro.
- `--cor-dados-5`: Série 5 dos gráficos. Sempre com rótulo ou legenda. Medido sobre fundo/superficie. Contraste: 3,2:1 ou mais no claro e no escuro, 7,8:1 ou mais no alto contraste. APCA: Lc 24 ou mais no claro e no escuro.
- `--cor-dados-grade`: Linhas de grade dos gráficos. Decorativa.
- `--cor-fundo-selecao`: Fundo do texto que a pessoa seleciona. Texto por cima: texto/padrao. Contraste: 11,9:1 ou mais no claro e no escuro, 11,9:1 ou mais no alto contraste (mínimo 4,5:1 e, no alto contraste, 7:1). APCA: Lc 74 ou mais no claro e no escuro. Alvo APCA: Lc 75 em texto corrido, Lc 60 em textos curtos.
- `--cor-fundo-marca-texto`: Marca-texto dos resultados de busca. Texto por cima: texto/padrao. Contraste: 11,4:1 ou mais no claro e no escuro, 11,9:1 ou mais no alto contraste (mínimo 4,5:1 e, no alto contraste, 7:1). APCA: Lc 95 ou mais no claro e no escuro. Alvo APCA: Lc 75 em texto corrido, Lc 60 em textos curtos.
- `--cor-borda-controle`: Borda de campos, checkbox e rádio. Medido sobre fundo/superficie. Contraste: 3,2:1 ou mais no claro e no escuro, 9,9:1 ou mais no alto contraste (mínimo 3:1 e, no alto contraste, 4,5:1). APCA: Lc 24 ou mais no claro e no escuro.
- `--cor-texto-sobre-imagem`: Texto sobre fotos, vídeos e gradientes escuros. Branco em todos os modos.
- `--cor-texto-ia`: Texto e ícone do rótulo de IA. Só para identificar o que veio da IA. Medido sobre fundo/ia-sutil. Contraste: 7,6:1 ou mais no claro e no escuro, 7,6:1 ou mais no alto contraste (mínimo 4,5:1 e, no alto contraste, 7:1). APCA: Lc 55 ou mais no claro e no escuro. Alvo APCA: Lc 75 em texto corrido, Lc 60 em textos curtos.
- `--cor-fundo-ia-sutil`: Fundo do rótulo de IA e de áreas pequenas geradas por IA. Nunca em telas inteiras. Texto por cima: texto/ia. Contraste: 7,6:1 ou mais no claro e no escuro, 7,6:1 ou mais no alto contraste (mínimo 4,5:1 e, no alto contraste, 7:1). APCA: Lc 55 ou mais no claro e no escuro. Alvo APCA: Lc 75 em texto corrido, Lc 60 em textos curtos.
- `--cor-borda-ia`: Borda de campos e blocos preenchidos pela IA. Medido sobre fundo/superficie. Contraste: 5,2:1 ou mais no claro e no escuro, 8,5:1 ou mais no alto contraste (mínimo 3:1 e, no alto contraste, 4,5:1). APCA: Lc 55 ou mais no claro e no escuro.
- `--cor-fundo-marca-pressionado`: Ação principal pressionada. Texto por cima: texto/sobre-marca. Contraste: 12,0:1 ou mais no claro e no escuro, 15,5:1 ou mais no alto contraste (mínimo 4,5:1 e, no alto contraste, 7:1). APCA: Lc 100 ou mais no claro e no escuro. Alvo APCA: Lc 75 em texto corrido, Lc 60 em textos curtos.
- `--cor-fundo-erro-pressionado`: Estado pressionado de fundo/erro. Texto por cima: texto/sobre-marca. Contraste: 15,5:1 ou mais no claro e no escuro, 15,5:1 ou mais no alto contraste (mínimo 4,5:1 e, no alto contraste, 7:1). APCA: Lc 104 ou mais no claro e no escuro. Alvo APCA: Lc 75 em texto corrido, Lc 60 em textos curtos.
- `--cor-fundo-fantasma-pressionado`: Estado pressionado translúcido de botões e itens sem fundo. Texto por cima: texto/padrao. Contraste: 8,8:1 ou mais no claro e no escuro, 8,4:1 ou mais no alto contraste (mínimo 4,5:1 e, no alto contraste, 7:1). APCA: Lc 85 ou mais no claro e no escuro. Alvo APCA: Lc 75 em texto corrido, Lc 60 em textos curtos.
- `--cor-fundo-invertido-pressionado`: Estado pressionado de fundo/invertido. Texto por cima: texto/invertido. Contraste: 9,9:1 ou mais no claro e no escuro, 9,9:1 ou mais no alto contraste (mínimo 4,5:1 e, no alto contraste, 7:1). APCA: Lc 65 ou mais no claro e no escuro. Alvo APCA: Lc 75 em texto corrido, Lc 60 em textos curtos.
- `--cor-texto-marca-hover`: Link no hover. Medido sobre fundo/superficie. Contraste: 9,7:1 ou mais no claro e no escuro, 11,9:1 ou mais no alto contraste (mínimo 4,5:1 e, no alto contraste, 7:1). APCA: Lc 73 ou mais no claro e no escuro. Alvo APCA: Lc 75 em texto corrido, Lc 60 em textos curtos.
- `--cor-texto-marca-pressionado`: Link pressionado. Medido sobre fundo/superficie. Contraste: 12,0:1 ou mais no claro e no escuro, 15,5:1 ou mais no alto contraste (mínimo 4,5:1 e, no alto contraste, 7:1). APCA: Lc 89 ou mais no claro e no escuro. Alvo APCA: Lc 75 em texto corrido, Lc 60 em textos curtos.

## Primitivos

`--azul-50` #eef1fe · `--azul-100` #dde3fd · `--azul-200` #bcc7fb · `--azul-300` #8fa1f7 · `--azul-400` #5b74f2 · `--azul-500` #2544ec · `--azul-600` #1b2fb8 · `--azul-700` #172694 · `--azul-800` #141f72 · `--azul-900` #111a57 · `--azul-950` #0b1036 · `--neutro-0` #ffffff · `--neutro-25` #fafaf7 · `--neutro-50` #f3f3ee · `--neutro-100` #e8e8e3 · `--neutro-200` #d6d6d0 · `--neutro-300` #b8b8b2 · `--neutro-400` #8f8f8a · `--neutro-500` #6b6b6b · `--neutro-600` #525250 · `--neutro-700` #3c3c3a · `--neutro-800` #262625 · `--neutro-900` #161615 · `--neutro-950` #0a0a0a · `--ambar-50` #fff7e6 · `--ambar-100` #ffebbf · `--ambar-300` #ffcf66 · `--ambar-500` #ffb020 · `--ambar-700` #a86a00 · `--ambar-900` #4d3100 · `--verde-50` #e9f8ef · `--verde-100` #c9eed7 · `--verde-300` #7fd3a0 · `--verde-500` #16a34a · `--verde-700` #0f7a36 · `--verde-900` #08391a · `--vermelho-50` #fdecec · `--vermelho-100` #fad0d0 · `--vermelho-300` #f08a8a · `--vermelho-500` #dc2626 · `--vermelho-700` #a51c1c · `--vermelho-900` #4a0d0d · `--ambar-800` #8a5700 · `--violeta-50` #f3f1fe · `--violeta-100` #e4defd · `--violeta-300` #ad9ff5 · `--violeta-500` #6e52e6 · `--violeta-700` #4b2fbf · `--violeta-900` #28196b · `--violeta-950` #170e3d · `--transparente-preto-8` rgb(10 10 10 / 7.8%) · `--transparente-preto-12` rgb(10 10 10 / 12%) · `--transparente-preto-35` rgb(10 10 10 / 35%) · `--transparente-preto-45` rgb(10 10 10 / 45%) · `--transparente-preto-60` rgb(10 10 10 / 60%) · `--transparente-preto-75` rgb(10 10 10 / 75%) · `--transparente-branco-12` rgb(255 255 255 / 12.2%) · `--transparente-branco-15` rgb(255 255 255 / 15%) · `--transparente-branco-25` rgb(255 255 255 / 25%) · `--transparente-branco-40` rgb(255 255 255 / 40%) · `--transparente-branco-55` rgb(255 255 255 / 55%) · `--transparente-branco-60` rgb(255 255 255 / 60%) · `--transparente-branco-70` rgb(255 255 255 / 70%) · `--transparente-branco-85` rgb(255 255 255 / 85%)


---

# Tokens de espaçamento, raio e borda

Todo espaço é múltiplo de 4. Use os tokens em preenchimentos internos e espaços entre elementos.

## Unidades

No código, espaços e textos estão em rem: 1 rem vale 16 px no tamanho padrão do navegador e cresce quando a pessoa aumenta a fonte, como pede a WCAG. Cantos, bordas e sombras ficam em px, porque não devem crescer com o texto. No Figma, tudo aparece em px, porque o Figma só trabalha em pixel. O número no nome do espaço é o fator da base 4: `--espaco-4` = 4 × 4 px = 16 px = 1 rem. Por que o PASSI usa fator e não o valor no nome: [decisoes.md](../decisoes.md) (D3).

| Token | CSS | Valor no código | No Figma |
|---|---|---|---|
| espaco/0 | `--espaco-0` | 0 | 0 px |
| espaco/0-5 | `--espaco-0-5` | 0.125rem | 2 px |
| espaco/1 | `--espaco-1` | 0.25rem | 4 px |
| espaco/2 | `--espaco-2` | 0.5rem | 8 px |
| espaco/3 | `--espaco-3` | 0.75rem | 12 px |
| espaco/4 | `--espaco-4` | 1rem | 16 px |
| espaco/5 | `--espaco-5` | 1.25rem | 20 px |
| espaco/6 | `--espaco-6` | 1.5rem | 24 px |
| espaco/8 | `--espaco-8` | 2rem | 32 px |
| espaco/10 | `--espaco-10` | 2.5rem | 40 px |
| espaco/12 | `--espaco-12` | 3rem | 48 px |
| espaco/16 | `--espaco-16` | 4rem | 64 px |
| espaco/20 | `--espaco-20` | 5rem | 80 px |
| espaco/24 | `--espaco-24` | 6rem | 96 px |
| raio/nenhum | `--raio-nenhum` | 0 px | 0 px |
| raio/pequeno | `--raio-pequeno` | 4 px | 4 px |
| raio/medio | `--raio-medio` | 8 px | 8 px |
| raio/grande | `--raio-grande` | 12 px | 12 px |
| raio/extra | `--raio-extra` | 20 px | 20 px |
| raio/pilula | `--raio-pilula` | 999 px | 999 px |
| borda/fina | `--borda-fina` | 1 px | 1 px |
| borda/grossa | `--borda-grossa` | 2 px | 2 px |

Regra dos cantos: quanto maior o elemento, maior o canto. `--borda-fina` (1 px) em cards, campos e divisores; `--borda-grossa` (2 px) em foco, seleção e destaque.

## Grades

- computador: 12 colunas, 24 px (1.5rem) entre colunas, margem de 80 px (5rem).
- tablet: 8 colunas, 24 px (1.5rem) entre colunas, margem de 40 px (2.5rem).
- celular: 4 colunas, 16 px (1rem) entre colunas, margem de 16 px (1rem).
- Larguras de referência: computador 1440 px (conteúdo até 1280 px), tablet 768 px, celular 375 px. Abaixo de 768 px, use a grade de celular.


---

# Tokens de tipografia

Três famílias: Archivo (títulos), Inter (textos e interface) e IBM Plex Mono (rótulos técnicos e código). Todas gratuitas no Google Fonts.

No CSS, use a classe do estilo (ex.: `texto-titulo-1`) ou as variáveis `--texto-*`. Os tamanhos estão em rem (1 rem = 16 px), para o texto crescer quando a pessoa aumenta a fonte do navegador; a entrelinha é proporcional ao tamanho. No Figma, os mesmos valores aparecem em px.

| Estilo | Classe CSS | Fonte | Tamanho / entrelinha | No Figma | Letras | Uso |
|---|---|---|---|---|---|---|
| Display/Grande | `.texto-display-grande` | Archivo 800 | 4.5rem / 1.0556 | 72/76 px | -0.1125rem | Títulos de capa e abertura de seção. |
| Display/Médio | `.texto-display-medio` | Archivo 800 | 3.5rem / 1.0714 | 56/60 px | -0.07rem | Títulos de destaque em páginas de marketing. |
| Título/1 | `.texto-titulo-1` | Archivo 700 | 2.5rem / 1.15 | 40/46 px | -0.0375rem | Título principal da página (h1). |
| Título/2 | `.texto-titulo-2` | Archivo 700 | 2rem / 1.1875 | 32/38 px | -0.02rem | Título de seção (h2). |
| Título/3 | `.texto-titulo-3` | Archivo 700 | 1.5rem / 1.25 | 24/30 px | -0.0075rem | Título de bloco ou card grande (h3). |
| Título/4 | `.texto-titulo-4` | Archivo 600 | 1.25rem / 1.3 | 20/26 px | -0.0031rem | Título de card, janela ou grupo (h4). |
| Corpo/Grande | `.texto-corpo-grande` | Inter 400 | 1.125rem / 1.5556 | 18/28 px | 0 | Textos de leitura longa e introduções. |
| Corpo/Médio | `.texto-corpo-medio` | Inter 400 | 1rem / 1.5 | 16/24 px | 0 | Texto padrão de interface. |
| Corpo/Pequeno | `.texto-corpo-pequeno` | Inter 400 | 0.875rem / 1.4286 | 14/20 px | 0 | Textos de apoio e descrições. |
| Rótulo/Grande | `.texto-rotulo-grande` | Inter 600 | 1rem / 1.5 | 16/24 px | 0 | Botões grandes e destaques curtos. |
| Rótulo/Médio | `.texto-rotulo-medio` | Inter 600 | 0.875rem / 1.4286 | 14/20 px | 0 | Botões, abas, rótulos de campo. |
| Rótulo/Pequeno | `.texto-rotulo-pequeno` | Inter 600 | 0.75rem / 1.3333 | 12/16 px | 0 | Selos, etiquetas e botões pequenos. |
| Legenda | `.texto-legenda` | Inter 400 | 0.75rem / 1.3333 | 12/16 px | 0 | Mensagens de ajuda, datas e notas. |
| Sobretítulo | `.texto-sobretitulo` | IBM Plex Mono 500 | 0.75rem / 1.3333 | 12/16 px | 0.06rem | Rótulo em caixa alta acima de títulos. |
| Código | `.texto-codigo` | IBM Plex Mono 400 | 0.875rem / 1.4286 | 14/20 px | 0 | Trechos de código e atalhos. |
| Link/Médio | `.texto-link-medio` | Inter 400 sublinhado | 1rem / 1.5 | 16/24 px | 0 | Links de 16 px. Mesmo texto do Corpo/Médio, sempre sublinhado. |
| Link/Pequeno | `.texto-link-pequeno` | Inter 400 sublinhado | 0.875rem / 1.4286 | 14/20 px | 0 | Links de 14 px. Mesmo texto do Corpo/Pequeno, sempre sublinhado. |
| Rótulo/Mínimo | `.texto-rotulo-minimo` | Inter 600 | 0.6875rem / 1.2727 | 11/14 px | 0 | Rótulos mínimos: contadores, letras do índice, barra inferior do celular e medidas. Só para textos de 1 a 2 palavras. |
| Rótulo/Sigla | `.texto-rotulo-sigla` | Inter 700 | 0.625rem / 1.6 | 10/16 px | 0.025rem | Siglas de formato em ícones de arquivo (PDF, DOC, ZIP). |
| Código/Pequeno | `.texto-codigo-pequeno` | IBM Plex Mono 500 | 0.75rem / 1.3333 | 12/16 px | 0 | Teclas de atalho e nomes de arquivo em trechos de código. |
| Código/Bloco | `.texto-codigo-bloco` | IBM Plex Mono 400 | 0.875rem / 1.7143 | 14/24 px | 0 | Código em várias linhas: blocos, terminal e números de linha. |

## Variáveis de tipografia

Os estilos acima usam as variáveis da coleção Tipografia. Mude uma variável e todos os estilos que a usam acompanham. O nome do tamanho e da entrelinha é o valor em px no Figma; no código, vira rem.

| Variável | CSS | Valor no código | No Figma |
|---|---|---|---|
| fonte/titulos | `--fonte-titulos` | "Archivo", sans-serif | Archivo |
| fonte/textos | `--fonte-textos` | "Inter", sans-serif | Inter |
| fonte/codigo | `--fonte-codigo` | "IBM Plex Mono", monospace | IBM Plex Mono |
| peso/regular | `--peso-regular` | 400 | 400 |
| peso/medio | `--peso-medio` | 500 | 500 |
| peso/seminegrito | `--peso-seminegrito` | 600 | 600 |
| peso/negrito | `--peso-negrito` | 700 | 700 |
| peso/extranegrito | `--peso-extranegrito` | 800 | 800 |
| tamanho/10 | `--tamanho-10` | 0.625rem | 10 px |
| tamanho/11 | `--tamanho-11` | 0.6875rem | 11 px |
| tamanho/12 | `--tamanho-12` | 0.75rem | 12 px |
| tamanho/14 | `--tamanho-14` | 0.875rem | 14 px |
| tamanho/16 | `--tamanho-16` | 1rem | 16 px |
| tamanho/18 | `--tamanho-18` | 1.125rem | 18 px |
| tamanho/20 | `--tamanho-20` | 1.25rem | 20 px |
| tamanho/24 | `--tamanho-24` | 1.5rem | 24 px |
| tamanho/32 | `--tamanho-32` | 2rem | 32 px |
| tamanho/40 | `--tamanho-40` | 2.5rem | 40 px |
| tamanho/56 | `--tamanho-56` | 3.5rem | 56 px |
| tamanho/72 | `--tamanho-72` | 4.5rem | 72 px |
| entrelinha/14 | `--entrelinha-14` | 0.875rem | 14 px |
| entrelinha/16 | `--entrelinha-16` | 1rem | 16 px |
| entrelinha/20 | `--entrelinha-20` | 1.25rem | 20 px |
| entrelinha/24 | `--entrelinha-24` | 1.5rem | 24 px |
| entrelinha/26 | `--entrelinha-26` | 1.625rem | 26 px |
| entrelinha/28 | `--entrelinha-28` | 1.75rem | 28 px |
| entrelinha/30 | `--entrelinha-30` | 1.875rem | 30 px |
| entrelinha/38 | `--entrelinha-38` | 2.375rem | 38 px |
| entrelinha/46 | `--entrelinha-46` | 2.875rem | 46 px |
| entrelinha/60 | `--entrelinha-60` | 3.75rem | 60 px |
| entrelinha/76 | `--entrelinha-76` | 4.75rem | 76 px |

Regras: no máximo três tamanhos de texto por tela; corpo de texto nunca menor que 14 px; Archivo só em títulos; linhas de leitura entre 60 e 80 caracteres.


---

# Tokens de movimento

| Token | CSS | Padrão | Reduzido |
|---|---|---|---|
| duracao/instantanea | `--duracao-instantanea` | 80 ms | 0 ms |
| duracao/rapida | `--duracao-rapida` | 150 ms | 0 ms |
| duracao/media | `--duracao-media` | 250 ms | 0 ms |
| duracao/lenta | `--duracao-lenta` | 400 ms | 0 ms |
| duracao/expressiva | `--duracao-expressiva` | 700 ms | 0 ms |
| curva/padrao | `--curva-padrao` | cubic-bezier(0.2, 0, 0, 1) | igual |
| curva/entrada | `--curva-entrada` | cubic-bezier(0, 0, 0.2, 1) | igual |
| curva/saida | `--curva-saida` | cubic-bezier(0.4, 0, 1, 1) | igual |
| curva/enfatizada | `--curva-enfatizada` | cubic-bezier(0.3, 1.4, 0.5, 1) | igual |

Regras: quanto maior o elemento ou a distância, maior a duração; a maioria das animações fica abaixo de 300 ms; curva de entrada para o que aparece e de saída para o que some. O modo Reduzido zera as durações; o `passi.css` aplica esse modo (com 1 ms) quando a pessoa pede menos movimento no sistema operacional.


---

# Tokens de sombra, desfoque e gradiente

## Sombras (só em elementos que flutuam; cards parados usam borda)

- `--sombra-pequena`: Barras de ferramentas e o segmento selecionado. Cards parados na página usam borda, não sombra.
- `--sombra-media`: Menus, popovers e dicas flutuantes.
- `--sombra-grande`: Janelas modais e avisos rápidos.
- `--sombra-extra`: Elementos flutuando sobre tudo.

## Desfoques de fundo (efeito de vidro, com preenchimento translúcido)

- `--desfoque-pequeno`: Desfoque de fundo de 8 px. Barras fixas sobre conteúdo.
- `--desfoque-medio`: Desfoque de fundo de 16 px. Painéis de vidro e menus.
- `--desfoque-grande`: Desfoque de fundo de 32 px. Sobreposições e janelas sobre imagens.

## Gradientes (áreas grandes, um por tela, nunca em botões ou textos pequenos)

- `--gradiente-marca`: Azul da marca com profundidade. Chamadas e capas.
- `--gradiente-noite`: Do azul ao quase preto. Fundos escuros e seções de destaque.
- `--gradiente-aurora`: Azul para verde. Conquistas e boas notícias.
- `--gradiente-por-do-sol`: Âmbar para vermelho. Use com moderação, para campanhas.
- `--gradiente-sutil`: Creme para azul bem claro. Fundos de seção e imagens de espera.
- `--gradiente-brilho`: Luz no centro. Fundos de ícones grandes e ilustrações.


---

# Acessibilidade

Fundamento do PASSI DS 1.1.0 · página "Acessibilidade" no arquivo Figma. Vale para tudo o que for feito com o sistema.

O que o PASSI DS faz para que mais pessoas consigam usar o que você criar, e o que ainda depende de quem desenha e de quem programa. A meta é a WCAG 2.2 nível AA, a mesma base da norma brasileira ABNT NBR 17225.

## Meta de conformidade

No Brasil, a acessibilidade digital é lei. O PASSI DS ajuda a cumprir essa lei no design, mas a conformidade de um site ou aplicativo depende de como ele é escrito, programado e testado.

- Lei Brasileira de Inclusão, artigo 63: sites de empresas com sede ou representação no Brasil, e de órgãos do governo, precisam ser acessíveis.
- ABNT NBR 17225 (março de 2025): a norma técnica brasileira que diz como cumprir a lei em sites. O nível de conformidade regular equivale à WCAG 2.2 níveis A e AA.
- Meta do PASSI DS: WCAG 2.2 AA.

O PASSI DS cuida de contraste, anel de foco, tamanho de alvo e da descrição de teclado, leitor de tela e foco de cada componente. Depende de quem usa: texto alternativo, ordem de leitura e de foco de cada tela, testes com teclado e leitor de tela, e código que siga estas orientações.

## Contraste

Texto precisa de 4,5:1, ou 3:1 a partir de 24 px (19 px em negrito). Bordas de campo, ícones, anel de foco e partes de gráfico precisam de 3:1. Texto desabilitado e linhas decorativas não precisam atingir o mínimo. Valores calculados a partir das variáveis do arquivo. A coluna APCA mostra a segunda régua (Lc): ajuda a escolher entre pares que já passam. Alvos: Lc 75 para texto corrido, Lc 60 para textos curtos e Lc 45 para títulos grandes. Quem decide é a WCAG.

Mínimo: texto 4,5:1; bordas de campo, foco, controles e gráficos 3:1. Nos modos de alto contraste, a meta é 7:1 para texto e 4,5:1 para o resto.

A WCAG decide o que passa porque é o que a lei e a ABNT NBR 17225 cobram. Por que a tabela tem duas réguas: [decisoes.md](../decisoes.md) (D7).

| Texto ou elemento | Fundo | Claro | Escuro | Alto contraste claro | Alto contraste escuro | APCA claro / escuro |
|---|---|---|---|---|---|---|
| `texto/padrao` | `fundo/pagina` | 18,9:1 | 18,9:1 | 19,7:1 | 19,7:1 | Lc 102 / Lc 104 |
| `texto/padrao` | `fundo/sutil` | 17,7:1 | 14,4:1 | 17,7:1 | 18,1:1 | Lc 98 / Lc 101 |
| `texto/secundario` | `fundo/pagina` | 10,5:1 | 13,5:1 | 15,1:1 | 16,1:1 | Lc 92 / Lc 81 |
| `texto/secundario` | `fundo/sutil` | 9,9:1 | 10,3:1 | 13,6:1 | 14,7:1 | Lc 88 / Lc 78 |
| `texto/terciario` | `fundo/superficie` | 5,3:1 | 5,5:1 | 7,8:1 | 9,9:1 | Lc 76 / Lc 41 |
| `texto/terciario` | `fundo/sutil` | 4,7:1 | 4,6:1 | 7,0:1 | 9,0:1 | Lc 69 / Lc 38 |
| `texto/marca` | `fundo/superficie` | 6,7:1 | 7,4:1 | 12,0:1 | 8,1:1 | Lc 82 / Lc 53 |
| `texto/marca` | `fundo/marca-sutil` | 5,9:1 | 7,5:1 | 10,7:1 | 7,5:1 | Lc 73 / Lc 53 |
| `texto/sucesso` | `fundo/sucesso-sutil` | 4,9:1 | 7,2:1 | 11,8:1 | 7,2:1 | Lc 70 / Lc 64 |
| `texto/alerta` | `fundo/alerta-sutil` | 5,7:1 | 8,1:1 | 11,2:1 | 8,1:1 | Lc 75 / Lc 74 |
| `texto/alerta` | `fundo/sutil` | 5,4:1 | 10,3:1 | 10,7:1 | 12,3:1 | Lc 72 / Lc 78 |
| `texto/erro` | `fundo/erro-sutil` | 6,6:1 | 6,4:1 | 13,5:1 | 11,0:1 | Lc 75 / Lc 51 |
| `texto/sobre-marca` | `fundo/marca` | 6,7:1 | 6,7:1 | 12,0:1 | 8,1:1 | Lc 87 / Lc 87 |
| `texto/sobre-marca` | `fundo/marca-hover` | 9,7:1 | 9,7:1 | 14,2:1 | 11,9:1 | Lc 95 / Lc 95 |
| `texto/sobre-marca` | `fundo/marca-pressionado` | 12,0:1 | 12,0:1 | 16,0:1 | 15,5:1 | Lc 100 / Lc 100 |
| `texto/sobre-marca` | `fundo/sucesso` | 5,4:1 | 5,4:1 | 13,0:1 | 11,0:1 | Lc 81 / Lc 81 |
| `texto/sobre-marca` | `fundo/erro` | 4,8:1 | 4,8:1 | 7,5:1 | 8,2:1 | Lc 77 / Lc 77 |
| `texto/sobre-marca` | `fundo/erro-hover` | 7,5:1 | 7,5:1 | 15,5:1 | 14,1:1 | Lc 89 / Lc 89 |
| `texto/sobre-marca` | `fundo/erro-pressionado` | 15,5:1 | 15,5:1 | 15,5:1 | 17,3:1 | Lc 104 / Lc 104 |
| `texto/invertido` | `fundo/invertido` | 18,9:1 | 18,9:1 | 19,7:1 | 19,7:1 | Lc 104 / Lc 102 |
| `texto/invertido` | `fundo/invertido-hover` | 14,4:1 | 13,5:1 | 15,1:1 | 13,5:1 | Lc 101 / Lc 81 |
| `texto/invertido` | `fundo/invertido-pressionado` | 10,5:1 | 9,9:1 | 11,0:1 | 9,9:1 | Lc 95 / Lc 65 |
| `texto/marca-hover` | `fundo/superficie` | 9,7:1 | 10,9:1 | 14,2:1 | 11,9:1 | Lc 91 / Lc 73 |
| `texto/marca-pressionado` | `fundo/superficie` | 12,0:1 | 14,2:1 | 16,0:1 | 15,5:1 | Lc 96 / Lc 89 |
| `texto/padrao` | `fundo/sutil-hover` | 16,1:1 | 10,5:1 | 16,1:1 | 15,1:1 | Lc 92 / Lc 95 |
| `texto/padrao` | `fundo/fantasma-hover` | 16,0:1 | 14,1:1 | 15,2:1 | 13,4:1 | Lc 91 / Lc 101 |
| `texto/padrao` | `fundo/fantasma-pressionado` | 14,5:1 | 8,8:1 | 8,4:1 | 9,2:1 | Lc 85 / Lc 92 |
| `texto/padrao` | `fundo/selecao` | 11,9:1 | 13,6:1 | 11,9:1 | 14,2:1 | Lc 74 / Lc 100 |
| `texto/padrao` | `fundo/marca-texto` | 16,8:1 | 11,4:1 | 16,8:1 | 11,9:1 | Lc 95 / Lc 97 |
| `texto/ia` | `fundo/superficie` | 8,5:1 | 7,8:1 | 8,5:1 | 8,5:1 | Lc 88 / Lc 55 |
| `texto/ia` | `fundo/ia-sutil` | 7,6:1 | 7,7:1 | 7,6:1 | 7,7:1 | Lc 80 / Lc 55 |
| `borda/ia` | `fundo/superficie` | 5,2:1 | 7,8:1 | 8,5:1 | 8,5:1 | Lc 75 / Lc 55 |
| `borda/controle` | `fundo/superficie` | 3,2:1 | 3,3:1 | 11,0:1 | 9,9:1 | Lc 59 / Lc 24 |
| `borda/controle` | `fundo/pagina` | 3,1:1 | 3,7:1 | 11,0:1 | 9,9:1 | Lc 56 / Lc 25 |
| `borda/foco` | `fundo/pagina` | 6,4:1 | 4,9:1 | 12,0:1 | 8,1:1 | Lc 78 / Lc 34 |
| `borda/marca` | `fundo/superficie` | 6,7:1 | 4,5:1 | 12,0:1 | 8,1:1 | Lc 82 / Lc 33 |
| `borda/erro` | `fundo/superficie` | 4,8:1 | 7,5:1 | 7,5:1 | 8,2:1 | Lc 71 / Lc 53 |
| `fundo/controle-desligado` | `fundo/superficie` | 3,2:1 | 3,3:1 | 7,8:1 | 6,0:1 | Lc 59 / Lc 24 |
| `dados/1` | `fundo/superficie` | 6,7:1 | 4,5:1 | 12,0:1 | 8,1:1 | Lc 82 / Lc 33 |
| `dados/2` | `fundo/superficie` | 2,4:1 (use com rótulo) | 7,4:1 | 6,7:1 | 15,5:1 | Lc 47 / Lc 53 |
| `dados/3` | `fundo/superficie` | 1,8:1 (use com rótulo) | 9,9:1 | 6,0:1 | 13,5:1 | Lc 33 / Lc 67 |
| `dados/4` | `fundo/superficie` | 3,2:1 | 10,1:1 | 5,4:1 | 11,0:1 | Lc 59 / Lc 68 |
| `dados/5` | `fundo/superficie` | 3,2:1 | 3,3:1 | 7,8:1 | 9,9:1 | Lc 59 / Lc 24 |

Isentos: `texto/desabilitado` (itens desabilitados) e as linhas decorativas `borda/padrao` e `borda/forte`. Cada token de cor traz na descrição o seu par e o contraste medido (veja tokens/cores.md). Gráficos usam sempre rótulo ou legenda direta, nunca só a cor.

## Foco pelo teclado

Quem navega pelo teclado precisa ver onde está. Em botões com fundo, checkbox, rádio, interruptor e controle deslizante, o anel de foco tem 2 px na cor borda/foco, separado do componente por 2 px na cor do fundo, então aparece até sobre o azul da marca. Botões sem fundo e links ganham uma borda borda/foco por fora. Campos mostram o foco com a borda azul de 2 px.

No CSS: `:focus-visible { outline: 2px solid var(--cor-borda-foco); outline-offset: 2px; }`. Nunca remova o contorno de foco sem colocar outro no lugar.

## O que a WCAG 2.2 trouxe de novo

| Critério | O que pede | Como fazer no PASSI DS |
|---|---|---|
| 2.4.11 Foco não encoberto (AA) | O item em foco não pode ficar escondido atrás de barras fixas, avisos ou banners. | Deixe espaço para o Cabeçalho do site fixo e para o Aviso rápido; ao receber foco, o item deve rolar para a área visível. |
| 2.5.7 Movimento de arrastar (AA) | Toda ação de arrastar precisa de uma alternativa com clique ou toque simples. | O Controle deslizante aceita setas do teclado e clique no trilho. Listas que se reordenam precisam de botões para subir e descer. |
| 2.5.8 Tamanho do alvo (AA) | Alvos de pelo menos 24 por 24 px, ou com espaço livre em volta. | O menor botão do PASSI tem 32 px. Ícones clicáveis menores, como o fechar da Etiqueta, precisam de área de toque de 24 px. |
| 3.2.6 Ajuda consistente (A) | Ajuda e contato ficam no mesmo lugar em todas as telas. | Use o Cabeçalho e o Rodapé do site sempre na mesma posição, com o contato no mesmo ponto. |
| 3.3.7 Entrada redundante (A) | Não pedir de novo o que a pessoa já informou no mesmo processo. | Nos Passos, traga preenchido o que já foi digitado, como o endereço de entrega na etapa de cobrança. |
| 3.3.8 Autenticação acessível (AA) | Entrar sem teste de memória ou quebra-cabeça. Colar senha e código precisa funcionar. | O Campo de texto de senha e o Código de verificação aceitam colar, e o código aceita o número inteiro de uma vez. |

## Modos de acessibilidade

A coleção Cor tem quatro modos. Os de alto contraste deixam todo texto com pelo menos 7:1 e bordas, foco e gráficos com 4,5:1, para pessoas com baixa visão. A coleção Movimento tem o modo Reduzido, que zera as durações para quem pede menos movimento. No Figma, troque o modo na moldura pelo painel de variáveis. No código, os modos seguem as preferências do sistema da pessoa.

- Alto contraste: `tokens/cor.alto-contraste-claro.tokens.json` e `tokens/cor.alto-contraste-escuro.tokens.json`. No `passi.css`, entram sozinhos com `prefers-contrast: more`, ou à força com `data-tema="alto-contraste-claro"` ou `data-tema="alto-contraste-escuro"` no `<html>`.
- Movimento reduzido: `tokens/movimento.reduzido.tokens.json`. No `passi.css`, entra com `prefers-reduced-motion: reduce`. Troque deslizes e giros por mudanças suaves de opacidade ou por nenhuma animação.

## Em cada componente

Toda página de componente tem a seção "Acessibilidade" com teclado, leitor de tela, foco e cuidados. Siga essa seção ao escrever o código; o que não está escrito, a IA tende a inventar.

## Kit de anotação de acessibilidade

Na página Utilitários do Figma, o componente "Anotação de acessibilidade" marca ordem de foco, títulos, regiões, rótulos, texto alternativo, anúncios do leitor de tela e elementos decorativos. Ao receber uma tela anotada, siga as etiquetas.

## Faça

- Teste cada tela só com o teclado: Tab, Shift+Tab, Enter, Espaço e Esc.
- Dê rótulo visível a todo campo. O texto de exemplo não substitui o rótulo.
- Mostre erro, sucesso e status com cor, ícone e texto juntos.
- Respeite quem pede menos movimento nas configurações do sistema.
- Anote ordem do foco, títulos e textos alternativos com o Kit de anotação da página Utilitários.

## NÃO faça

- Tirar o anel de foco porque ficou feio.
- Texto secundário ou terciário menor que 12 px.
- Avisos que somem sozinhos levando informação importante.
- Gráficos que dependem só da cor para serem entendidos.


---

# IA no produto

Fundamento do PASSI DS 1.1.0 · página "IA no produto" no arquivo Figma.

Como mostrar inteligência artificial nas telas sem exagero e sem esconder nada. A IA ganha uma cor própria, discreta, que serve só para identificar o que ela fez. Quanto mais central a IA for na tarefa, mais presença ela tem na tela.

## Identificar, não enfeitar

O violeta da IA é um sinal, não uma decoração. Ele aparece só onde a IA fez ou sugeriu algo, para a pessoa saber o que revisar e em que confiar.

- Marque o que a IA fez: todo conteúdo, sugestão ou resposta da IA leva o Rótulo de IA. O que a pessoa digitou não leva.
- Explique quando pedirem: o rótulo abre a Explicação da IA (de onde veio, fontes e limites). Ela não abre sozinha.
- A pessoa decide: salvar, enviar, pagar ou apagar sempre passa por confirmação da pessoa.

## Expressão proporcional

A presença visual da IA cresce com o papel dela na tarefa. Comece sempre pelo nível mais discreto que resolve.

| Nível | Quando | O que usar |
|---|---|---|
| Discreta | A IA ajuda num detalhe: um resumo, uma sugestão de texto. | Só o Rótulo de IA ao lado do conteúdo. |
| Presente | A IA preenche parte de uma tarefa, como campos de um formulário. | Campo sugerido por IA: rótulo compacto, borda da IA e frase de ajuda. |
| Central | A tarefa é conversar com a IA ou deixar que ela aja. | Padrão Conversa com IA ou Plano de ação. Mesmo aqui, o resto da tela segue neutro. |

## Cores da IA

Três tokens, sempre juntos com o brilho ou a palavra IA. Funcionam no claro, no escuro e no alto contraste.

| Token | CSS | Claro | Escuro | Uso |
|---|---|---|---|---|
| texto/ia | `--cor-texto-ia` | violeta/700 #4b2fbf | violeta/300 #ad9ff5 | Texto e ícone do rótulo, nome do assistente. |
| fundo/ia-sutil | `--cor-fundo-ia-sutil` | violeta/50 #f3f1fe | violeta/950 #170e3d | Fundo do rótulo, do avatar e do aviso de conversa. Nunca em telas inteiras. |
| borda/ia | `--cor-borda-ia` | violeta/500 #6e52e6 | violeta/300 #ad9ff5 | Borda de campos e blocos preenchidos pela IA. |

Contraste: `--cor-texto-ia` passa de 7:1 sobre a superfície e sobre `--cor-fundo-ia-sutil` no claro e no escuro.

## Transparência e lei

Avisar quando a pessoa fala com uma IA e rotular o que foi gerado é boa prática e, em alguns lugares, obrigação.

- União Europeia: desde 2 de agosto de 2026, o artigo 50 da lei europeia de IA exige avisar quando a pessoa conversa com uma IA e rotular certos conteúdos gerados ou alterados por IA. Vale para empresas brasileiras que atendem pessoas na Europa.
- Brasil: o projeto de lei de IA (PL 2338/2023) trata de transparência. Confira a situação atual antes de lançar um produto.
- No PASSI DS: Aviso de IA (Conversa com IA) no começo de toda conversa, Rótulo de IA em todo conteúdo gerado e Aviso de IA (Conteúdo gerado) abaixo de textos e imagens publicados.

## Como escrever

A IA fala de forma clara e honesta, sem fingir ser uma pessoa e sem prometer o que não pode cumprir.

| Escreva assim | Evite |
|---|---|
| Você está conversando com uma IA. | Oi! Eu sou a Ana, sua amiga virtual. |
| Não encontrei isso no livro. | Desculpe, sou só uma IA e não sei de tudo. |
| Resumo gerado por IA a partir do capítulo 2. Confira o original. | Resumo 100% preciso. |
| Não consegui responder agora. Tente de novo em alguns segundos. | Erro 503: falha no modelo. |
| Prefere falar com uma pessoa? Fale com o time. | Não há atendimento humano disponível. |

## Componentes de IA

- [Rótulo de IA](../componentes/rotulo-de-ia.md)
- [Explicação da IA](../componentes/explicacao-da-ia.md)
- [Campo sugerido por IA](../componentes/campo-sugerido-por-ia.md)
- [Campo de pedido](../componentes/campo-de-pedido.md)
- [Mensagem da conversa](../componentes/mensagem-da-conversa.md)
- [Plano de ação](../componentes/plano-de-acao.md)
- [Aviso de IA](../componentes/aviso-de-ia.md)
- Tela pronta: [Conversa com IA](../padroes/conversa-com-ia.md)

## Faça

- Comece pelo nível mais discreto de expressão.
- Mostre fontes e limites sempre que a IA responder ou resumir.
- Peça confirmação antes de qualquer ação da IA que mude algo.
- Teste as telas com IA também no teclado e no leitor de tela.

## NÃO faça

- Usar violeta ou gradientes da IA como decoração.
- Rotular como IA o que não foi feito por IA.
- Dar nome, rosto ou sentimentos humanos à IA.
- Esconder que um conteúdo publicado foi gerado por IA.


---

# Voz e tom

Conteúdo do PASSI DS 1.1.0 · página "Voz e tom" no arquivo Figma.

A voz do PASSI é sempre a mesma: clara, direta, próxima e honesta. O tom muda conforme o momento da pessoa. Quem acabou de errar precisa de calma e de um caminho; quem acabou de concluir algo precisa só de uma confirmação curta.

## Voz

Quatro traços que valem para todo texto da interface, do botão à mensagem de erro.

- **Clara**: Frases curtas, em ordem direta, com uma ideia por frase. Palavras do dia a dia.
- **Direta**: Diga o que fazer. Comece pelo verbo. Corte rodeios e explicações que ninguém pediu.
- **Próxima**: Fale com você, como uma pessoa experiente explicando a alguém. Sem gírias e sem formalidade de ofício.
- **Honesta**: Não prometa o que o produto não cumpre. Quando o erro for do sistema, assuma. Nunca culpe a pessoa.

## Tom por situação

O tom acompanha o que a pessoa sente naquele momento.

| Situação | Como a pessoa está | Tom | Exemplo |
|---|---|---|---|
| Sucesso | Aliviada | Breve e positivo, sem festa | Capítulo salvo. |
| Erro da pessoa | Frustrada | Calmo, diz como resolver, sem culpar | Digite o CPF com 11 números. |
| Erro do sistema | Insegura | Assume a falha e oferece saída | Não conseguimos salvar agora. Tente de novo em alguns minutos. |
| Ação que não tem volta | Atenta | Sério, diz a consequência | Excluir o capítulo 3? Essa ação não pode ser desfeita. |
| Tela vazia | Curiosa | Convida e mostra o primeiro passo | Você ainda não tem projetos. Crie o primeiro. |
| Espera | Impaciente | Diz o que está acontecendo e quanto falta | Gerando seu PDF. Leva cerca de 1 minuto. |
| Primeiro uso | Animada e insegura | Acolhedor e objetivo | Boas-vindas ao PASSI. Comece pelo seu primeiro projeto. |

## Faça

- Escreva como você explicaria pessoalmente a alguém que respeita.
- Mude o tom conforme a situação, nunca a voz.
- Leia o texto em voz alta antes de publicar.

## NÃO faça

- Exclamações e entusiasmo exagerado, como Uhuu! ou Parabéns!!!
- Humor em mensagens de erro.
- Jargão técnico ou de negócio, como payload, input ou alavancar.


---

# Microtexto

Conteúdo do PASSI DS 1.1.0 · página "Microtexto" no arquivo Figma.

Microtexto é todo texto curto da interface: botões, rótulos, ajudas, erros, avisos e telas vazias. Ele decide se a pessoa entende o que fazer. Estes padrões valem para todos os componentes.

## Padrões por elemento

Cada elemento tem uma função e uma forma de escrever.

| Elemento | Regra | Escreva | Evite |
|---|---|---|---|
| Botão | Verbo e objeto, até 3 palavras | Salvar alterações | OK |
| Link | Diga para onde leva | Ler o capítulo 1 | Clique aqui |
| Rótulo de campo | Nome curto, sem dois-pontos | E-mail | Digite aqui seu e-mail: |
| Texto de exemplo | Um exemplo real, nunca a instrução | nome@empresa.com.br | Campo obrigatório |
| Ajuda | O que saber antes de digitar | Use pelo menos 8 caracteres. | Senha inválida |
| Erro | O que houve e como resolver | Digite o CPF no formato 000.000.000-00. | CPF inválido. |
| Confirmação | O que mudou, no passado | Link copiado. | Operação realizada com sucesso! |
| Janela de confirmação | Pergunta, consequência e verbo no botão | Excluir capítulo? Ele sai do sumário. | Tem certeza? Sim ou Não |
| Tela vazia | O que vai aparecer e o primeiro passo | Seus projetos aparecem aqui. Crie o primeiro. | Nenhum dado encontrado. |
| Título | Frase normal, só a primeira letra maiúscula | Configurações da conta | Configurações Da Conta |

## Regras de escrita

Pequenas regras que deixam todo o produto com o mesmo jeito.

- Maiúscula só no começo da frase e em nomes próprios, inclusive em títulos e botões.
- Sem ponto final em botões, rótulos, títulos e itens de menu. Com ponto final em frases completas de ajuda, erro e confirmação.
- Números em algarismos: 3 capítulos, não três capítulos.
- Sem exclamação. A interface não grita.
- Reticências só para algo em andamento: Salvando…
- Você no lugar de o usuário. Nós quando o sistema age: Enviamos o código para o seu e-mail.
- Uma ação principal por tela, e o texto dela é o mais específico de todos.

## Faça

- Escreva o erro dizendo como resolver.
- Use o mesmo verbo do botão no título da janela: Excluir capítulo.
- Teste se o texto do botão faz sentido sozinho, fora da tela.

## NÃO faça

- Sim e Não em janelas de confirmação.
- Texto de exemplo no lugar do rótulo.
- Mensagens genéricas como Erro inesperado ou Algo deu errado sem saída.


---

# Glossário

Conteúdo do PASSI DS 1.1.0 · página "Glossário" no arquivo Figma.

As palavras da interface do PASSI, sempre as mesmas, em todas as telas. Um glossário evita que o mesmo gesto se chame Entrar numa tela e Login na outra.

## Termos

Use a coluna da esquerda. Quando houver dúvida, prefira a palavra que uma pessoa usaria conversando.

| Use | Evite | Observação |
|---|---|---|
| Entrar | Login, Logar, Acessar | Botão e título da tela de entrada. |
| Sair | Logout, Deslogar |  |
| Criar conta | Cadastre-se, Sign up |  |
| Esqueci minha senha | Recuperar credenciais |  |
| E-mail | Email, Endereço eletrônico | Sempre com hífen. |
| Senha | Password, Credencial |  |
| Excluir | Deletar, Apagar | Quando a coisa deixa de existir. |
| Remover | Excluir | Quando a coisa sai de uma lista, mas continua existindo. |
| Editar | Alterar, Modificar |  |
| Salvar | Gravar, Submeter |  |
| Enviar | Submeter, Submit |  |
| Baixar | Fazer download |  |
| Enviar arquivo | Upload, Fazer upload |  |
| Buscar | Pesquisar, Search | Busca como substantivo. |
| Configurações | Ajustes, Settings, Preferências |  |
| Painel | Dashboard |  |
| Notificações | Alertas | Alerta é o componente de mensagem na página. |
| Você | O usuário, O cliente | Fale com a pessoa. |
| IA | A.I., Inteligência Artificial com iniciais maiúsculas | Por extenso: inteligência artificial. |

## Faça

- Consulte o glossário antes de criar um texto novo.
- Proponha um termo novo quando surgir uma palavra que se repete.
- Use o mesmo termo no botão, no título e na mensagem de confirmação.

## NÃO faça

- Misturar inglês e português no mesmo produto.
- Sinônimos para o mesmo gesto em telas diferentes.
- Siglas sem explicar na primeira vez.


---

# Linguagem inclusiva

Conteúdo do PASSI DS 1.1.0 · página "Linguagem inclusiva" no arquivo Figma.

Texto que inclui todo mundo sem pedir esforço extra para ler. O PASSI usa linguagem inclusiva dentro da norma da língua portuguesa e linguagem simples, o que serve tanto para empresas quanto para governo.

## O que diz a lei

A Lei 15.263/2025, da Política Nacional de Linguagem Simples, pede que órgãos públicos usem linguagem simples e proíbe que usem novas formas de flexão de gênero e de número, como todes e elu. A regra vale para a administração pública. O STF derrubou leis estaduais e municipais que proibiam a linguagem neutra, por uma questão de competência. Para servir a empresas e a governo, o PASSI inclui pessoas usando a própria norma da língua.

## Estratégias dentro da norma

Troque a palavra marcada por gênero por uma que inclui todo mundo.

| Em vez de | Prefira |
|---|---|
| Bem-vindo(a) | Boas-vindas |
| Os usuários | As pessoas que usam o produto, ou você |
| Todos os alunos | Toda a turma |
| Os inscritos | Quem se inscreveu |
| Caro cliente | Olá, Ana |
| Os desenvolvedores | O time de desenvolvimento |
| Obrigado pela compra | Agradecemos pela compra |
| Portador de deficiência | Pessoa com deficiência |

## Linguagem simples

Escreva para que qualquer pessoa entenda na primeira leitura.

- Frases de até 20 palavras, em ordem direta: quem faz, o que faz, o resto.
- Verbos no lugar de substantivos: Cancele a assinatura, não Efetue o cancelamento da assinatura.
- Uma ideia por frase e a informação mais importante primeiro.
- Palavras comuns. Se precisar de um termo técnico, explique na primeira vez.
- Listas para passos e opções, em vez de parágrafos longos.

## Faça

- Fale com você sempre que possível: resolve o gênero e aproxima.
- Use linguagem centrada na pessoa: pessoa com deficiência, pessoa idosa.
- Mostre diversidade real em fotos, avatares e exemplos.

## NÃO faça

- Barras e parênteses como bem-vindo(a) e caro(a).
- Expressões capacitistas, como dar uma de cego ou fingir demência.
- Presumir gênero, idade ou família da pessoa em exemplos e textos.


---

# Formatos brasileiros

Conteúdo do PASSI DS 1.1.0 · página "Formatos brasileiros" no arquivo Figma.

Como escrever dinheiro, números, datas, horas, documentos e endereços do jeito que o Brasil lê. No código, use as funções de formatação do navegador com a localidade pt-BR em vez de montar o texto à mão.

## Números, dinheiro e tempo

Ponto separa milhares e vírgula separa decimais.

| Tipo | Formato | Exemplo | No código |
|---|---|---|---|
| Moeda | R$, espaço, valor com 2 casas | R$ 1.234,56 | Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' }) |
| Número | Ponto no milhar, vírgula no decimal | 12.345,6 | Intl.NumberFormat('pt-BR') |
| Porcentagem | Número e % sem espaço | 12,5% | Intl.NumberFormat('pt-BR', { style: 'percent' }) |
| Data | dd/mm/aaaa, ou por extenso | 20/10/2026 · 20 de outubro de 2026 | Intl.DateTimeFormat('pt-BR') |
| Hora | 24 horas | 14h30 ou 14:30 | Intl.DateTimeFormat('pt-BR', { hour: '2-digit', minute: '2-digit' }) |
| Tempo relativo | Há ou em, por extenso | há 2 dias · ontem · em 3 horas | Intl.RelativeTimeFormat('pt-BR', { numeric: 'auto' }) |
| Plural | 0 e 1 ficam no singular | 0 item · 1 item · 2 itens | Intl.PluralRules('pt-BR') |

## Documentos, telefone e endereço

Mostre o formato na ajuda do campo, aceite colar com ou sem pontuação e coloque a pontuação sozinho.

| Campo | Formato | Exemplo | No código |
|---|---|---|---|
| CPF | 000.000.000-00 | 123.456.789-09 | inputmode='numeric' |
| CNPJ | 00.000.000/0000-00. Desde julho de 2026, novos CNPJs podem ter letras nas 12 primeiras posições | 12.ABC.345/01DE-35 | Aceite letras e números |
| CEP | 00000-000 | 01310-100 | inputmode='numeric', autocomplete='postal-code' |
| Celular | (00) 00000-0000 | (11) 91234-5678 | inputmode='tel', autocomplete='tel' |
| Telefone fixo | (00) 0000-0000 | (11) 3123-4567 | inputmode='tel' |
| Endereço | Rua, número, complemento, bairro, cidade, UF e CEP | Av. Paulista, 1000, apto 12, Bela Vista, São Paulo, SP, 01310-100 | Preencha cidade e UF a partir do CEP |

## Faça

- Use as funções Intl do navegador com pt-BR.
- Aceite colar documentos com ou sem pontos e traços.
- Mostre o exemplo do formato na ajuda do campo.

## NÃO faça

- Bloquear a digitação de quem digita a pontuação.
- Datas no formato americano, como 10/20/2026.
- Montar plural à mão com (s), como 1 item(s).


---

# Botão

Componente do PASSI DS 1.1.0 · página "Botão" no arquivo Figma.

Botões disparam ações. O texto diz exatamente o que vai acontecer: “Salvar alterações”, e não “OK”. Use um único botão Primário por tela, para a ação mais importante.

## Botão

Botão · dispara uma ação. Use um único Primário por tela para a ação principal. Secundário para ações fortes que não são a principal, Contorno e Fantasma para ações de apoio, Perigo para ações destrutivas (excluir, cancelar assinatura). Tamanhos: P 32 px, M 40 px, G 48 px.

| Propriedade | Tipo | Opções | Padrão |
|---|---|---|---|
| Texto | Texto |  | Botão |
| Ícone à esquerda | Liga/desliga |  | Desligado |
| Ícone à direita | Liga/desliga |  | Desligado |
| Trocar ícone esquerdo | Troca de ícone ou componente |  |  |
| Trocar ícone direito | Troca de ícone ou componente |  |  |
| Tipo | Variante | Primário, Secundário, Contorno, Fantasma, Perigo | Primário |
| Tamanho | Variante | P, M, G | M |
| Estado | Variante | Padrão, Hover, Pressionado, Foco, Desabilitado | Padrão |

## Como usar

### Tipos

A hierarquia visual ajuda a pessoa a saber o que fazer primeiro.

Exemplos no Figma: Primário: Ação principal; Secundário: Ação forte de apoio; Contorno: Ação alternativa; Fantasma: Ação discreta; Perigo: Ação destrutiva.

### Tamanhos

P (32 px) para tabelas e barras de ferramentas, M (40 px) como padrão, G (48 px) para chamadas principais e telas de celular.

Exemplos no Figma: P · 32 px; M · 40 px; G · 48 px.

### Estados

Todo botão precisa mostrar quando está sob o cursor, quando é pressionado, quando recebe foco pelo teclado e quando não está disponível.

Exemplos no Figma: Padrão; Hover; Pressionado; Foco; Desabilitado.

### Com ícones

Ícone à esquerda reforça a ação. Ícone à direita indica avanço ou abertura. Ligue e troque os ícones pelas propriedades do componente.

Exemplos no Figma: Ícone à esquerda; Ícone à direita; Ícone trocado: baixar.

### Modo escuro

Todas as cores vêm das variáveis da coleção “Cor”. Troque o modo da moldura para Escuro e o componente se adapta sozinho.

## Conteúdo

Como escrever os textos deste componente. Regras gerais em [conteudo/microtexto.md](../conteudo/microtexto.md) e [conteudo/glossario.md](../conteudo/glossario.md).

- Verbo e objeto, até 3 palavras: Salvar alterações, Criar conta.
- Use o mesmo verbo do título da janela ou da página.
- Sem ponto final e sem exclamação.

## Acessibilidade

Meta: WCAG 2.2 AA, base da ABNT NBR 17225. Contraste, anel de foco e modos em [fundamentos/acessibilidade.md](../fundamentos/acessibilidade.md).

- Teclado: Tab chega ao botão. Enter ou Espaço executam a ação.
- Leitor de tela: Papel button. O nome é o texto do botão. Botão desabilitado é anunciado como indisponível; se a pessoa precisa saber por quê, explique perto dele.
- Foco: Anel de foco de 2 px. Depois da ação, o foco fica no botão, a não ser que a ação abra uma janela ou leve para outra tela.
- Cuidados: Texto que diz a ação, nunca só OK. Durante um carregamento, mantenha o texto ou anuncie Salvando para quem usa leitor de tela.

## Tokens usados

Fundo: cor/fundo/marca, cor/fundo/invertido, cor/fundo/erro e seus estados hover e pressionado (ex.: cor/fundo/marca-hover e cor/fundo/marca-pressionado). Contorno: cor/fundo/sutil e cor/fundo/sutil-hover. Fantasma: cor/fundo/fantasma-hover e cor/fundo/fantasma-pressionado. Texto: cor/texto/sobre-marca, cor/texto/padrao. Borda: cor/borda/forte, cor/borda/foco. Espaço: espaco/2 a espaco/5. Canto: raio/pilula.

No código, troque a barra por hífen e use o prefixo da coleção: cor/fundo/marca vira `var(--cor-fundo-marca)` e espaco/4 vira `var(--espaco-4)`.

## Faça

- Comece o texto com um verbo: “Salvar”, “Enviar”, “Criar conta”.
- Use um único botão Primário por tela.
- Deixe a ação principal à direita em janelas e formulários.
- Mantenha a área de toque com pelo menos 40 px de altura no celular.

## NÃO faça

- Textos vagos como “OK”, “Clique aqui” ou “Sim”.
- Dois botões Primários lado a lado.
- Desabilitar um botão sem explicar o motivo.
- Usar o tipo Perigo para ações que podem ser desfeitas.

## Regras gerais

- Cores, espaços, cantos e sombras vêm sempre dos tokens (`var(--cor-…)`, `var(--espaco-…)`, `var(--raio-…)`). Nunca use códigos de cor soltos.
- O componente funciona no claro e no escuro sem mudanças: as cores mudam pelos tokens.
- Foco visível em tudo o que é clicável: anel de 2 px em `--cor-borda-foco`, afastado 2 px. Área de toque de pelo menos 24 px, e 40 px no celular.
- Elementos clicáveis têm cinco estados: padrão, hover, pressionado, foco e desabilitado.
- A cor nunca é o único sinal: estados usam também ícone, forma ou texto.


---

# Botão de ícone

Componente do PASSI DS 1.1.0 · página "Botão de ícone" no arquivo Figma.

O botão de ícone executa uma ação usando só um símbolo, como fechar, curtir ou compartilhar. Ele economiza espaço, mas só funciona com ícones que todo mundo reconhece.

## Botão de ícone

Botão de ícone · ação representada só por um ícone, como fechar, curtir ou mais opções. Sempre acompanhe de uma dica flutuante e de um nome acessível (texto alternativo).

| Propriedade | Tipo | Opções | Padrão |
|---|---|---|---|
| Ícone | Troca de ícone ou componente |  |  |
| Tipo | Variante | Primário, Secundário, Contorno, Fantasma | Primário |
| Tamanho | Variante | P, M, G | P |
| Estado | Variante | Padrão, Hover, Pressionado, Foco, Desabilitado | Padrão |

## Como usar

### Tipos

Exemplos no Figma: Primário; Secundário; Contorno; Fantasma.

### Tamanhos

P (32 px), M (40 px) e G (48 px). No celular, use M ou G para garantir uma área de toque confortável.

Exemplos no Figma: P; M; G.

### Estados

Exemplos no Figma: Padrão; Hover; Pressionado; Foco; Desabilitado.

## Conteúdo

Como escrever os textos deste componente. Regras gerais em [conteudo/microtexto.md](../conteudo/microtexto.md) e [conteudo/glossario.md](../conteudo/glossario.md).

- O nome acessível e a dica flutuante dizem a ação com verbo: Fechar, Copiar link.
- Use o mesmo nome em todas as telas para o mesmo ícone.

## Acessibilidade

Meta: WCAG 2.2 AA, base da ABNT NBR 17225. Contraste, anel de foco e modos em [fundamentos/acessibilidade.md](../fundamentos/acessibilidade.md).

- Teclado: Tab chega ao botão. Enter ou Espaço executam a ação.
- Leitor de tela: Papel button. Como não há texto visível, dê um nome em texto, por exemplo Fechar ou Compartilhar capítulo. O ícone fica escondido do leitor.
- Foco: Anel de foco de 2 px, ou borda azul por fora nos tipos sem fundo.
- Cuidados: Sempre com Dica flutuante mostrando o mesmo nome. Área de toque de pelo menos 24 px, mesmo no tamanho P. Botões de alternar, como curtir, anunciam se estão ligados ou desligados.

## Tokens usados

As mesmas do Botão: cor/fundo/marca, cor/fundo/invertido, cor/fundo/sutil, cor/fundo/fantasma-hover, os estados pressionado (cor/fundo/marca-pressionado, cor/fundo/invertido-pressionado, cor/fundo/sutil-hover, cor/fundo/fantasma-pressionado), cor/borda/forte, cor/borda/foco. Canto: raio/pilula.

No código, troque a barra por hífen e use o prefixo da coleção: cor/fundo/marca vira `var(--cor-fundo-marca)` e espaco/4 vira `var(--espaco-4)`.

## Faça

- Use ícones conhecidos: fechar, busca, mais opções, compartilhar.
- Adicione uma dica flutuante com o nome da ação.
- Dê um nome acessível para leitores de tela.

## NÃO faça

- Usar ícone sozinho para ações raras ou ambíguas.
- Colocar muitos botões de ícone lado a lado sem espaço.
- Usar o tipo Primário para várias ações na mesma área.

## Regras gerais

- Cores, espaços, cantos e sombras vêm sempre dos tokens (`var(--cor-…)`, `var(--espaco-…)`, `var(--raio-…)`). Nunca use códigos de cor soltos.
- O componente funciona no claro e no escuro sem mudanças: as cores mudam pelos tokens.
- Foco visível em tudo o que é clicável: anel de 2 px em `--cor-borda-foco`, afastado 2 px. Área de toque de pelo menos 24 px, e 40 px no celular.
- Elementos clicáveis têm cinco estados: padrão, hover, pressionado, foco e desabilitado.
- A cor nunca é o único sinal: estados usam também ícone, forma ou texto.


---

# Grupo de botões

Componente do PASSI DS 1.1.0 · página "Grupo de botões" no arquivo Figma.

O grupo de botões organiza duas ou mais ações relacionadas, como cancelar e salvar. A ordem e o espaçamento são sempre os mesmos, então a pessoa encontra a ação principal sem pensar.

## Grupo de botões

Grupo de botões · combinações prontas de ações. A ação principal fica à direita no computador e em cima no celular. Troque os textos e tipos nas instâncias internas.

| Propriedade | Tipo | Opções | Padrão |
|---|---|---|---|
| Tipo | Variante | Formulário, Destrutivo, Três ações, Empilhado | Formulário |

## Como usar

### Formulário

Fim de formulários e janelas. Ação principal à direita.

### Destrutivo

Confirmação de algo que não dá para desfazer.

### Três ações

Voltar à esquerda, ações principais à direita.

### Empilhado

No celular, botões em largura total, com a ação principal em cima.

## Conteúdo

Como escrever os textos deste componente. Regras gerais em [conteudo/microtexto.md](../conteudo/microtexto.md) e [conteudo/glossario.md](../conteudo/glossario.md).

- Cada botão diz a própria ação. Cancelar não precisa de objeto; a ação principal precisa: Salvar capítulo.
- Evite pares como Sim e Não ou OK e Cancelar.

## Acessibilidade

Meta: WCAG 2.2 AA, base da ABNT NBR 17225. Contraste, anel de foco e modos em [fundamentos/acessibilidade.md](../fundamentos/acessibilidade.md).

- Teclado: Cada botão recebe Tab na ordem visual: primeiro a ação secundária, por último a principal.
- Leitor de tela: Cada botão tem seu próprio nome. Quando o grupo é uma barra de opções, use o papel group com um nome, por exemplo Ações do capítulo.
- Foco: Segue a ordem visual da esquerda para a direita. Nunca mude a ordem só no código.
- Cuidados: No celular, quando os botões ficam empilhados, a ação principal vai em cima e a ordem do foco acompanha.

## Tokens usados

Botões internos: componente Botão. Espaço entre botões: espaco/3 (computador) e espaco/2 (celular).

No código, troque a barra por hífen e use o prefixo da coleção: cor/fundo/marca vira `var(--cor-fundo-marca)` e espaco/4 vira `var(--espaco-4)`.

## Faça

- Mantenha a ação principal sempre na mesma posição.
- Use 12 px entre botões no computador e 8 px no celular.
- Deixe claro no texto o que cada botão faz.

## NÃO faça

- Mais de três botões no mesmo grupo.
- Dois botões Primários juntos.
- Mudar a ordem das ações de uma tela para outra.

## Regras gerais

- Cores, espaços, cantos e sombras vêm sempre dos tokens (`var(--cor-…)`, `var(--espaco-…)`, `var(--raio-…)`). Nunca use códigos de cor soltos.
- O componente funciona no claro e no escuro sem mudanças: as cores mudam pelos tokens.
- Foco visível em tudo o que é clicável: anel de 2 px em `--cor-borda-foco`, afastado 2 px. Área de toque de pelo menos 24 px, e 40 px no celular.
- Elementos clicáveis têm cinco estados: padrão, hover, pressionado, foco e desabilitado.
- A cor nunca é o único sinal: estados usam também ícone, forma ou texto.


---

# Link

Componente do PASSI DS 1.1.0 · página "Link" no arquivo Figma.

O link leva a pessoa para outra página, seção ou site. No meio de um texto ele é sempre sublinhado, para ser reconhecido mesmo por quem não distingue cores.

## Link

Link · leva a outra página, seção ou site. No meio de textos é sempre sublinhado, para não depender só da cor. Marca para links de destaque, Neutro para links dentro de textos longos. Ligue Abre outro site para mostrar o ícone de abrir fora.

| Propriedade | Tipo | Opções | Padrão |
|---|---|---|---|
| Mostrar seta | Liga/desliga |  | Desligado |
| Texto | Texto |  | Ler o primeiro capítulo |
| Abre outro site | Liga/desliga |  | Desligado |
| Tipo | Variante | Marca, Neutro | Marca |
| Tamanho | Variante | M, P | M |
| Estado | Variante | Padrão, Hover, Pressionado, Foco, Desabilitado | Padrão |

## Como usar

### Tipos e estados

No hover, o link Marca ganha um tom mais forte e o Neutro fica azul. Pressionados, os dois avançam mais um tom. No foco pelo teclado, aparece um contorno azul.

Exemplos no Figma: Marca · Padrão; Marca · Hover; Marca · Pressionado; Marca · Foco; Marca · Desabilitado; Neutro · Padrão; Neutro · Hover; Neutro · Pressionado.

### Com seta

A seta indica que o link avança para outra etapa ou página. O ícone de abrir fora indica que o link abre outro site, em outra aba.

### Dentro de um texto

Use o tipo Neutro no meio de parágrafos para não competir com o conteúdo.

## Conteúdo

Como escrever os textos deste componente. Regras gerais em [conteudo/microtexto.md](../conteudo/microtexto.md) e [conteudo/glossario.md](../conteudo/glossario.md).

- O texto diz o destino: Ler o capítulo 1.
- Evite Clique aqui e Saiba mais soltos.
- Avise no texto quando o link abre outro site ou baixa um arquivo.

## Acessibilidade

Meta: WCAG 2.2 AA, base da ABNT NBR 17225. Contraste, anel de foco e modos em [fundamentos/acessibilidade.md](../fundamentos/acessibilidade.md).

- Teclado: Tab chega ao link. Enter abre o destino.
- Leitor de tela: Papel link. O nome é o próprio texto. Links que abrem outro site mostram o ícone de abrir fora e avisam no nome, com o texto escondido “(abre em outra aba)”.
- Foco: Borda azul de 2 px em volta do texto.
- Cuidados: Sublinhado no meio de textos. Em navegação, como migalhas de pão e menus, o sublinhado pode sair, porque a posição já mostra que dá para clicar. Texto que diz o destino, nunca Clique aqui. Link leva a outro lugar; para executar uma ação, use Botão.

## Tokens usados

Texto: cor/texto/marca, cor/texto/marca-hover (hover), cor/texto/marca-pressionado (pressionado), cor/texto/padrao (neutro), cor/texto/desabilitado. Ícones (seta e abrir fora): a mesma cor do texto. Foco: cor/borda/foco.

No código, troque a barra por hífen e use o prefixo da coleção: cor/fundo/marca vira `var(--cor-fundo-marca)` e espaco/4 vira `var(--espaco-4)`.

## Faça

- Escreva o destino no texto: “Ler o primeiro capítulo”.
- Mantenha o sublinhado no meio de textos.
- Use o ícone de abrir fora quando o link abre outro site.

## NÃO faça

- Textos como “clique aqui” ou “saiba mais” soltos.
- Usar link para ações, como salvar ou enviar. Use Botão.
- Diferenciar o link só pela cor.

## Regras gerais

- Cores, espaços, cantos e sombras vêm sempre dos tokens (`var(--cor-…)`, `var(--espaco-…)`, `var(--raio-…)`). Nunca use códigos de cor soltos.
- O componente funciona no claro e no escuro sem mudanças: as cores mudam pelos tokens.
- Foco visível em tudo o que é clicável: anel de 2 px em `--cor-borda-foco`, afastado 2 px. Área de toque de pelo menos 24 px, e 40 px no celular.
- Elementos clicáveis têm cinco estados: padrão, hover, pressionado, foco e desabilitado.
- A cor nunca é o único sinal: estados usam também ícone, forma ou texto.


---

# Campo de texto

Componente do PASSI DS 1.1.0 · página "Campo de texto" no arquivo Figma.

O campo de texto recebe informações curtas digitadas pela pessoa, como nome, e-mail ou senha. O rótulo fica sempre visível acima do campo, e a mensagem de ajuda vira mensagem de erro quando algo não está certo.

## Campo de texto

Campo de texto · entrada de uma linha. Sempre com rótulo visível acima do campo. A mensagem de ajuda vira mensagem de erro quando a validação falha. Ícone à direita serve para ações do campo, como mostrar ou esconder a senha. Tamanhos: M 40 px (padrão) e G 48 px (celular e formulários de destaque).

| Propriedade | Tipo | Opções | Padrão |
|---|---|---|---|
| Rótulo | Texto |  | Nome completo |
| Valor | Texto |  | Digite seu nome |
| Ajuda | Texto |  | Como aparece no seu documento. |
| Mostrar rótulo | Liga/desliga |  | Ligado |
| Mostrar ajuda | Liga/desliga |  | Ligado |
| Ícone à esquerda | Liga/desliga |  | Desligado |
| Trocar ícone esquerdo | Troca de ícone ou componente |  |  |
| Trocar ícone direito | Troca de ícone ou componente |  |  |
| Ícone à direita | Liga/desliga |  | Desligado |
| Tamanho | Variante | M, G | M |
| Estado | Variante | Padrão, Hover, Foco, Preenchido, Erro, Sucesso, Desabilitado | Padrão |

## Como usar

### Estados

Preenchido mostra o texto digitado. Erro e sucesso aparecem depois da validação, com cor, ícone e mensagem, nunca só com cor.

Exemplos no Figma: Padrão; Hover; Foco; Preenchido; Erro; Sucesso; Desabilitado.

### Tamanhos

Exemplos no Figma: M · 40 px; G · 48 px.

### Com ícones

Ícone à esquerda indica o tipo de dado, como busca ou e-mail. O ícone à direita mostra o resultado da validação ou uma ação, como mostrar a senha.

Exemplos no Figma: Busca; Senha.

### Em uso

Formulário curto de cadastro.

## Conteúdo

Como escrever os textos deste componente. Regras gerais em [conteudo/microtexto.md](../conteudo/microtexto.md) e [conteudo/glossario.md](../conteudo/glossario.md).

- Rótulo curto, sem dois-pontos: E-mail.
- Ajuda diz o que saber antes de digitar; o erro diz como resolver.
- O texto de exemplo é um exemplo real e nunca substitui o rótulo.

## Acessibilidade

Meta: WCAG 2.2 AA, base da ABNT NBR 17225. Contraste, anel de foco e modos em [fundamentos/acessibilidade.md](../fundamentos/acessibilidade.md).

- Teclado: Tab chega ao campo. A pessoa digita e Tab segue para o próximo campo. Colar sempre funciona, inclusive em senhas.
- Leitor de tela: O rótulo visível é o nome do campo. A ajuda é lida junto com o campo. No erro, o campo é anunciado como inválido e a mensagem de erro é lida.
- Foco: Borda azul de 2 px. Ao enviar um formulário com erro, o foco vai para o primeiro campo com problema ou para um resumo de erros no topo.
- Cuidados: Rótulo sempre visível; o texto de exemplo não substitui o rótulo. Erro com ícone e texto, nunca só a cor vermelha. Use o tipo certo de teclado no celular (e-mail, número, telefone) e o preenchimento automático do navegador.

## Tokens usados

Fundo: cor/fundo/superficie, cor/fundo/desabilitado. Borda: cor/borda/controle, cor/borda/marca, cor/borda/erro, cor/borda/sucesso. Texto: cor/texto/padrao, cor/texto/terciario (placeholder), cor/texto/erro, cor/texto/sucesso. Espaço: espaco/2, espaco/3. Canto: raio/medio.

No código, troque a barra por hífen e use o prefixo da coleção: cor/fundo/marca vira `var(--cor-fundo-marca)` e espaco/4 vira `var(--espaco-4)`.

## Faça

- Mantenha o rótulo sempre visível, acima do campo.
- Escreva mensagens de erro que digam como resolver.
- Marque o que é opcional, não o que é obrigatório.
- Ajuste a largura ao tamanho esperado da resposta.

## NÃO faça

- Usar o placeholder no lugar do rótulo.
- Mensagens genéricas como “Campo inválido”.
- Mostrar erro antes da pessoa terminar de digitar.
- Indicar erro só com a cor vermelha.

## Regras gerais

- Cores, espaços, cantos e sombras vêm sempre dos tokens (`var(--cor-…)`, `var(--espaco-…)`, `var(--raio-…)`). Nunca use códigos de cor soltos.
- O componente funciona no claro e no escuro sem mudanças: as cores mudam pelos tokens.
- Foco visível em tudo o que é clicável: anel de 2 px em `--cor-borda-foco`, afastado 2 px. Área de toque de pelo menos 24 px, e 40 px no celular.
- Elementos clicáveis têm cinco estados: padrão, hover, pressionado, foco e desabilitado.
- A cor nunca é o único sinal: estados usam também ícone, forma ou texto.


---

# Área de texto

Componente do PASSI DS 1.1.0 · página "Área de texto" no arquivo Figma.

A área de texto recebe respostas longas, de várias linhas, como comentários, descrições e mensagens. Quando existe um limite, o contador mostra quanto ainda cabe.

## Área de texto

Área de texto · entrada de várias linhas para comentários, descrições e mensagens. Mostre um contador quando houver limite de caracteres.

| Propriedade | Tipo | Opções | Padrão |
|---|---|---|---|
| Rótulo | Texto |  | Sua mensagem |
| Valor | Texto |  | Conte o que você achou do livro |
| Ajuda | Texto |  | Seja breve. Até 280 caracteres. |
| Contador | Texto |  | 0/280 |
| Mostrar contador | Liga/desliga |  | Ligado |
| Mostrar ajuda | Liga/desliga |  | Ligado |
| Estado | Variante | Padrão, Hover, Foco, Preenchido, Erro, Desabilitado | Padrão |

## Como usar

### Estados

Exemplos no Figma: Padrão; Hover; Foco; Preenchido; Erro; Desabilitado.

## Conteúdo

Como escrever os textos deste componente. Regras gerais em [conteudo/microtexto.md](../conteudo/microtexto.md) e [conteudo/glossario.md](../conteudo/glossario.md).

- O rótulo diz o que escrever: Sua mensagem.
- A ajuda informa o limite: Até 280 caracteres.
- O contador mostra quanto falta, não quanto foi usado, quando o limite estiver perto.

## Acessibilidade

Meta: WCAG 2.2 AA, base da ABNT NBR 17225. Contraste, anel de foco e modos em [fundamentos/acessibilidade.md](../fundamentos/acessibilidade.md).

- Teclado: Tab chega à área. Enter cria uma linha nova; Tab sai do campo.
- Leitor de tela: O rótulo é o nome. A ajuda e o contador são lidos junto. Quando o limite está perto, anuncie o que falta sem interromper a digitação a cada letra.
- Foco: Borda azul de 2 px.
- Cuidados: Não corte o texto ao passar do limite sem avisar. Deixe a área crescer ou permitir redimensionar.

## Tokens usados

Fundo: cor/fundo/superficie, cor/fundo/desabilitado. Borda: cor/borda/controle, cor/borda/marca, cor/borda/erro. Texto: cor/texto/padrao, cor/texto/terciario, cor/texto/erro. Espaço: espaco/3. Canto: raio/medio.

No código, troque a barra por hífen e use o prefixo da coleção: cor/fundo/marca vira `var(--cor-fundo-marca)` e espaco/4 vira `var(--espaco-4)`.

## Faça

- Ajuste a altura ao tamanho esperado da resposta.
- Mostre o limite antes de a pessoa passar dele.
- Deixe o campo crescer conforme o texto, quando possível.

## NÃO faça

- Usar para respostas curtas, como nome ou e-mail.
- Cortar o texto sem avisar quando passar do limite.
- Placeholders longos com instruções importantes.

## Regras gerais

- Cores, espaços, cantos e sombras vêm sempre dos tokens (`var(--cor-…)`, `var(--espaco-…)`, `var(--raio-…)`). Nunca use códigos de cor soltos.
- O componente funciona no claro e no escuro sem mudanças: as cores mudam pelos tokens.
- Foco visível em tudo o que é clicável: anel de 2 px em `--cor-borda-foco`, afastado 2 px. Área de toque de pelo menos 24 px, e 40 px no celular.
- Elementos clicáveis têm cinco estados: padrão, hover, pressionado, foco e desabilitado.
- A cor nunca é o único sinal: estados usam também ícone, forma ou texto.


---

# Seleção

Componente do PASSI DS 1.1.0 · página "Seleção" no arquivo Figma.

A seleção mostra uma lista de opções que abre sob o campo. Ela economiza espaço quando há muitas alternativas, como cargos, estados ou países.

## Seleção

Seleção · escolha de uma opção em uma lista que abre sob o campo. Use quando houver mais de 5 opções; com menos, prefira Rádio ou Controle segmentado.

| Propriedade | Tipo | Opções | Padrão |
|---|---|---|---|
| Rótulo | Texto |  | Cargo |
| Valor | Texto |  | Selecione uma opção |
| Ajuda | Texto |  | Usamos para personalizar os exemplos. |
| Mostrar rótulo | Liga/desliga |  | Ligado |
| Mostrar ajuda | Liga/desliga |  | Ligado |
| Estado | Variante | Padrão, Hover, Aberto, Preenchido, Erro, Desabilitado | Padrão |

## Como usar

### Estados

Exemplos no Figma: Padrão; Hover; Aberto; Preenchido; Erro; Desabilitado.

### Aberta

A lista abre colada ao campo, com a opção atual marcada. Ela usa o componente Item de menu.

Exemplos no Figma: Claro; Escuro.

## Conteúdo

Como escrever os textos deste componente. Regras gerais em [conteudo/microtexto.md](../conteudo/microtexto.md) e [conteudo/glossario.md](../conteudo/glossario.md).

- Rótulo com o que está sendo escolhido: Cargo.
- Opções curtas, em ordem lógica, começando com letra maiúscula.
- Selecione uma opção enquanto nada foi escolhido.

## Acessibilidade

Meta: WCAG 2.2 AA, base da ABNT NBR 17225. Contraste, anel de foco e modos em [fundamentos/acessibilidade.md](../fundamentos/acessibilidade.md).

- Teclado: Tab chega ao campo. Enter, Espaço ou seta para baixo abrem a lista. Setas mudam a opção, Enter escolhe e Esc fecha sem mudar.
- Leitor de tela: Papel combobox com lista do tipo listbox, ou o elemento select nativo. O rótulo é o nome e a opção escolhida é lida como valor.
- Foco: Borda azul de 2 px. Ao fechar a lista, o foco volta para o campo.
- Cuidados: Prefira o select nativo do navegador quando não precisar de busca. Para listas longas com busca, use Campo com sugestões.

## Tokens usados

Campo: as mesmas do Campo de texto. Lista: cor/fundo/superficie, cor/borda/padrao, Sombra/Média, raio/grande. Opções: Item de menu.

No código, troque a barra por hífen e use o prefixo da coleção: cor/fundo/marca vira `var(--cor-fundo-marca)` e espaco/4 vira `var(--espaco-4)`.

## Faça

- Ordene as opções de forma lógica: alfabética, por frequência ou por tamanho.
- Use quando houver mais de 5 opções.
- Mostre o texto “Selecione uma opção” enquanto nada foi escolhido.

## NÃO faça

- Usar para 2 ou 3 opções. Prefira Rádio ou Controle segmentado.
- Listas muito longas sem busca. Acima de 15 opções, adicione um campo de busca.
- Ações dentro da lista. Para ações use Menu.

## Regras gerais

- Cores, espaços, cantos e sombras vêm sempre dos tokens (`var(--cor-…)`, `var(--espaco-…)`, `var(--raio-…)`). Nunca use códigos de cor soltos.
- O componente funciona no claro e no escuro sem mudanças: as cores mudam pelos tokens.
- Foco visível em tudo o que é clicável: anel de 2 px em `--cor-borda-foco`, afastado 2 px. Área de toque de pelo menos 24 px, e 40 px no celular.
- Elementos clicáveis têm cinco estados: padrão, hover, pressionado, foco e desabilitado.
- A cor nunca é o único sinal: estados usam também ícone, forma ou texto.


---

# Checkbox

Componente do PASSI DS 1.1.0 · página "Checkbox" no arquivo Figma.

O checkbox permite escolher uma ou mais opções de uma lista, ou confirmar algo de forma independente, como aceitar os termos de uso.

## Checkbox

Checkbox · permite marcar uma ou várias opções independentes. Use Indeterminado no item “selecionar todos” quando só parte da lista está marcada. A caixa tem 20 px; toda a linha (caixa + texto) deve ser clicável.

| Propriedade | Tipo | Opções | Padrão |
|---|---|---|---|
| Rótulo | Texto |  | Quero receber novidades do livro |
| Descrição | Texto |  | Um e-mail por mês, sem spam. |
| Mostrar descrição | Liga/desliga |  | Ligado |
| Marcação | Variante | Desmarcado, Marcado, Indeterminado | Desmarcado |
| Estado | Variante | Padrão, Hover, Pressionado, Foco, Erro, Desabilitado | Padrão |

## Como usar

### Marcações

Desmarcado, marcado e indeterminado. O indeterminado aparece no item “selecionar todos” quando só parte da lista foi escolhida.

Exemplos no Figma: Desmarcado; Marcado; Indeterminado.

### Estados

O erro aparece quando o item é obrigatório e não foi marcado, por exemplo os termos de uso.

Exemplos no Figma: Padrão; Hover; Pressionado; Foco; Erro; Desabilitado.

### Em uso

Lista de opções com um item “selecionar todos” no topo.

## Conteúdo

Como escrever os textos deste componente. Regras gerais em [conteudo/microtexto.md](../conteudo/microtexto.md) e [conteudo/glossario.md](../conteudo/glossario.md).

- Rótulo como afirmação positiva: Quero receber novidades.
- Evite negações duplas, como Não quero deixar de receber.

## Acessibilidade

Meta: WCAG 2.2 AA, base da ABNT NBR 17225. Contraste, anel de foco e modos em [fundamentos/acessibilidade.md](../fundamentos/acessibilidade.md).

- Teclado: Tab chega a cada checkbox. Espaço marca e desmarca.
- Leitor de tela: Papel checkbox. O nome é o rótulo. Anuncia marcado, desmarcado ou parcialmente marcado.
- Foco: Anel de foco de 2 px em volta da caixa.
- Cuidados: Clicar no rótulo também marca. Para um grupo, use um título de grupo (fieldset e legend no código). A área de clique inclui o texto, não só a caixa.

## Tokens usados

Fundo: cor/fundo/superficie, cor/fundo/marca, cor/fundo/marca-hover, cor/fundo/marca-pressionado, cor/fundo/marca-sutil (desmarcado pressionado), cor/fundo/erro, cor/fundo/desabilitado. Borda: cor/borda/controle, cor/borda/marca, cor/borda/erro. Texto: cor/texto/padrao, cor/texto/secundario, cor/texto/sobre-marca. Canto: raio/pequeno.

No código, troque a barra por hífen e use o prefixo da coleção: cor/fundo/marca vira `var(--cor-fundo-marca)` e espaco/4 vira `var(--espaco-4)`.

## Faça

- Escreva o rótulo como uma afirmação positiva: “Quero receber novidades”.
- Deixe a linha inteira clicável, não só a caixa.
- Use para opções independentes, que podem ser marcadas juntas.

## NÃO faça

- Usar checkbox quando só uma opção pode ser escolhida. Nesse caso use Rádio.
- Rótulos negativos, como “Não quero receber e-mails”.
- Disparar uma ação imediata ao marcar. Para isso use o Interruptor.

## Regras gerais

- Cores, espaços, cantos e sombras vêm sempre dos tokens (`var(--cor-…)`, `var(--espaco-…)`, `var(--raio-…)`). Nunca use códigos de cor soltos.
- O componente funciona no claro e no escuro sem mudanças: as cores mudam pelos tokens.
- Foco visível em tudo o que é clicável: anel de 2 px em `--cor-borda-foco`, afastado 2 px. Área de toque de pelo menos 24 px, e 40 px no celular.
- Elementos clicáveis têm cinco estados: padrão, hover, pressionado, foco e desabilitado.
- A cor nunca é o único sinal: estados usam também ícone, forma ou texto.


---

# Rádio

Componente do PASSI DS 1.1.0 · página "Rádio" no arquivo Figma.

O rádio serve para escolher uma única opção dentro de um grupo. Ao marcar uma, a anterior é desmarcada automaticamente.

## Rádio

Rádio · escolha de uma única opção dentro de um grupo. Sempre agrupe dois ou mais rádios e, quando possível, deixe uma opção marcada por padrão.

| Propriedade | Tipo | Opções | Padrão |
|---|---|---|---|
| Rótulo | Texto |  | Livro digital |
| Descrição | Texto |  | Receba na hora, no seu e-mail. |
| Mostrar descrição | Liga/desliga |  | Ligado |
| Marcação | Variante | Desmarcado, Marcado | Desmarcado |
| Estado | Variante | Padrão, Hover, Pressionado, Foco, Erro, Desabilitado | Padrão |

## Como usar

### Estados

Exemplos no Figma: Padrão; Hover; Pressionado; Foco; Erro; Desabilitado.

### Em uso

Grupo de opções com uma escolha já feita. O título do grupo diz o que está sendo escolhido.

## Conteúdo

Como escrever os textos deste componente. Regras gerais em [conteudo/microtexto.md](../conteudo/microtexto.md) e [conteudo/glossario.md](../conteudo/glossario.md).

- O título do grupo é uma pergunta: Como prefere receber o livro?
- Opções curtas e paralelas, todas no mesmo formato.

## Acessibilidade

Meta: WCAG 2.2 AA, base da ABNT NBR 17225. Contraste, anel de foco e modos em [fundamentos/acessibilidade.md](../fundamentos/acessibilidade.md).

- Teclado: Tab entra no grupo e para na opção marcada. Setas mudam a opção. Tab sai do grupo.
- Leitor de tela: Papel radio dentro de um radiogroup com nome. Anuncia a opção, se está marcada e a posição, por exemplo 2 de 3.
- Foco: Anel de foco de 2 px em volta do círculo.
- Cuidados: Sempre com uma pergunta que nomeia o grupo. Clicar no rótulo também marca.

## Tokens usados

Fundo: cor/fundo/superficie, cor/fundo/marca, cor/fundo/marca-hover, cor/fundo/marca-pressionado, cor/fundo/marca-sutil (desmarcado pressionado), cor/fundo/erro, cor/fundo/desabilitado. Borda: cor/borda/controle, cor/borda/marca, cor/borda/erro. Ponto: cor/texto/sobre-marca. Canto: raio/pilula.

No código, troque a barra por hífen e use o prefixo da coleção: cor/fundo/marca vira `var(--cor-fundo-marca)` e espaco/4 vira `var(--espaco-4)`.

## Faça

- Use quando só uma opção pode ser escolhida.
- Deixe uma opção marcada por padrão, se fizer sentido.
- Ordene as opções de forma lógica: da mais comum para a menos comum.

## NÃO faça

- Grupos com mais de 6 opções. Nesse caso use Seleção.
- Um rádio sozinho. Para isso use Checkbox.
- Opções que se sobrepõem, como “1 a 5” e “5 a 10”.

## Regras gerais

- Cores, espaços, cantos e sombras vêm sempre dos tokens (`var(--cor-…)`, `var(--espaco-…)`, `var(--raio-…)`). Nunca use códigos de cor soltos.
- O componente funciona no claro e no escuro sem mudanças: as cores mudam pelos tokens.
- Foco visível em tudo o que é clicável: anel de 2 px em `--cor-borda-foco`, afastado 2 px. Área de toque de pelo menos 24 px, e 40 px no celular.
- Elementos clicáveis têm cinco estados: padrão, hover, pressionado, foco e desabilitado.
- A cor nunca é o único sinal: estados usam também ícone, forma ou texto.


---

# Interruptor

Componente do PASSI DS 1.1.0 · página "Interruptor" no arquivo Figma.

O interruptor liga e desliga uma configuração. A mudança acontece na hora, como um interruptor de luz, sem precisar confirmar.

## Interruptor

Interruptor · liga ou desliga uma configuração com efeito imediato, sem precisar de botão “Salvar”. Trilho de 40×24 px.

| Propriedade | Tipo | Opções | Padrão |
|---|---|---|---|
| Rótulo | Texto |  | Modo escuro |
| Descrição | Texto |  | Muda as cores na hora. |
| Mostrar descrição | Liga/desliga |  | Desligado |
| Ligado | Variante | Não, Sim | Não |
| Estado | Variante | Padrão, Hover, Pressionado, Foco, Desabilitado | Padrão |

## Como usar

### Estados

Exemplos no Figma: Desligado · Padrão; Desligado · Hover; Desligado · Pressionado; Desligado · Foco; Desligado · Desabilitado; Ligado · Padrão; Ligado · Hover; Ligado · Pressionado; Ligado · Foco; Ligado · Desabilitado.

### Em uso

Lista de preferências. Cada linha tem rótulo e descrição curta.

## Conteúdo

Como escrever os textos deste componente. Regras gerais em [conteudo/microtexto.md](../conteudo/microtexto.md) e [conteudo/glossario.md](../conteudo/glossario.md).

- O rótulo é o nome da configuração: Modo escuro.
- Não troque o rótulo conforme o estado; o interruptor já mostra ligado ou desligado.

## Acessibilidade

Meta: WCAG 2.2 AA, base da ABNT NBR 17225. Contraste, anel de foco e modos em [fundamentos/acessibilidade.md](../fundamentos/acessibilidade.md).

- Teclado: Tab chega ao interruptor. Espaço liga e desliga.
- Leitor de tela: Papel switch. O nome é o rótulo. Anuncia ligado ou desligado.
- Foco: Anel de foco de 2 px em volta do trilho.
- Cuidados: A mudança vale na hora. Se precisar de confirmação ou de um botão Salvar, use Checkbox. Ligado e desligado se diferenciam também pela posição do botão deslizante, não só pela cor.

## Tokens usados

Trilho: cor/fundo/marca, cor/fundo/marca-hover, cor/fundo/marca-pressionado, cor/fundo/controle-desligado, cor/fundo/desabilitado. Desligado no hover: cor/texto/terciario; pressionado: cor/texto/secundario. Botão deslizante: cor/texto/sobre-marca. Canto: raio/pilula.

No código, troque a barra por hífen e use o prefixo da coleção: cor/fundo/marca vira `var(--cor-fundo-marca)` e espaco/4 vira `var(--espaco-4)`.

## Faça

- Use para configurações que valem na hora.
- Escreva o rótulo como o nome da configuração: “Modo escuro”.
- Mantenha o rótulo igual nos dois estados.

## NÃO faça

- Usar em formulários que só valem depois de “Enviar”. Use Checkbox.
- Rótulos que mudam conforme o estado, como “Ligado” e “Desligado”.
- Esconder consequências importantes de desligar algo.

## Regras gerais

- Cores, espaços, cantos e sombras vêm sempre dos tokens (`var(--cor-…)`, `var(--espaco-…)`, `var(--raio-…)`). Nunca use códigos de cor soltos.
- O componente funciona no claro e no escuro sem mudanças: as cores mudam pelos tokens.
- Foco visível em tudo o que é clicável: anel de 2 px em `--cor-borda-foco`, afastado 2 px. Área de toque de pelo menos 24 px, e 40 px no celular.
- Elementos clicáveis têm cinco estados: padrão, hover, pressionado, foco e desabilitado.
- A cor nunca é o único sinal: estados usam também ícone, forma ou texto.


---

# Controle deslizante

Componente do PASSI DS 1.1.0 · página "Controle deslizante" no arquivo Figma.

O controle deslizante escolhe um valor aproximado dentro de um limite, arrastando um pegador. A versão de intervalo escolhe uma faixa, com valor mínimo e máximo.

## Controle deslizante

Controle deslizante · escolhe um valor ou uma faixa dentro de um limite, arrastando o pegador. Mostre sempre o valor atual em texto.

| Propriedade | Tipo | Opções | Padrão |
|---|---|---|---|
| Rótulo | Texto |  | Páginas por dia |
| Valor | Texto |  | 24 |
| Mostrar limites | Liga/desliga |  | Ligado |
| Tipo | Variante | Simples, Intervalo | Simples |
| Estado | Variante | Padrão, Foco, Desabilitado | Padrão |

## Como usar

### Tipos e estados

O valor atual aparece em azul no canto direito. No foco, o pegador ativo ganha um anel.

Exemplos no Figma: Padrão; Foco; Desabilitado.

## Conteúdo

Como escrever os textos deste componente. Regras gerais em [conteudo/microtexto.md](../conteudo/microtexto.md) e [conteudo/glossario.md](../conteudo/glossario.md).

- Mostre o valor com a unidade: 24 páginas por dia.
- Os limites usam o mesmo formato do valor.

## Acessibilidade

Meta: WCAG 2.2 AA, base da ABNT NBR 17225. Contraste, anel de foco e modos em [fundamentos/acessibilidade.md](../fundamentos/acessibilidade.md).

- Teclado: Tab chega ao pegador. Setas mudam um passo; Page Up e Page Down mudam passos maiores; Home e End vão ao mínimo e ao máximo.
- Leitor de tela: Papel slider. O rótulo é o nome e o valor atual é lido, com a unidade, por exemplo 24 páginas por dia.
- Foco: Anel de foco de 2 px em volta do pegador. No tipo intervalo, cada pegador recebe foco separado.
- Cuidados: Arrastar nunca pode ser o único jeito (WCAG 2.5.7): aceite setas do teclado e clique no trilho, e ofereça um campo numérico quando o valor exato importa.

## Tokens usados

Base: cor/fundo/sutil-hover. Preenchimento: cor/fundo/marca. Pegador: neutro/0 com borda cor/fundo/marca. Texto: cor/texto/padrao, cor/texto/marca, cor/texto/terciario.

No código, troque a barra por hífen e use o prefixo da coleção: cor/fundo/marca vira `var(--cor-fundo-marca)` e espaco/4 vira `var(--espaco-4)`.

## Faça

- Use quando um valor aproximado é suficiente, como volume ou faixa de preço.
- Mostre o valor atual e os limites.
- Ofereça um campo de texto ao lado quando o valor exato importar.

## NÃO faça

- Usar para valores exatos, como CPF ou quantidade de parcelas.
- Faixas muito grandes, em que cada pixel vale muito.
- Esconder o valor escolhido.

## Regras gerais

- Cores, espaços, cantos e sombras vêm sempre dos tokens (`var(--cor-…)`, `var(--espaco-…)`, `var(--raio-…)`). Nunca use códigos de cor soltos.
- O componente funciona no claro e no escuro sem mudanças: as cores mudam pelos tokens.
- Foco visível em tudo o que é clicável: anel de 2 px em `--cor-borda-foco`, afastado 2 px. Área de toque de pelo menos 24 px, e 40 px no celular.
- Elementos clicáveis têm cinco estados: padrão, hover, pressionado, foco e desabilitado.
- A cor nunca é o único sinal: estados usam também ícone, forma ou texto.


---

# Controle segmentado

Componente do PASSI DS 1.1.0 · página "Controle segmentado" no arquivo Figma.

O controle segmentado alterna entre poucas opções que se excluem, como mensal e anual. A troca é imediata e todas as opções ficam sempre visíveis.

## Segmento

Segmento · uma opção dentro do Controle segmentado. Use o componente completo, não este item solto.

| Propriedade | Tipo | Opções | Padrão |
|---|---|---|---|
| Texto | Texto |  | Mensal |
| Estado | Variante | Selecionado, Padrão, Hover, Pressionado, Desabilitado | Selecionado |

## Controle segmentado

Controle segmentado · alterna entre 2 a 4 visões ou opções exclusivas, como “Mensal / Anual”. Troque o estado de cada opção para mudar a seleção. Substitui o estilo Pílula das Abas, que está descontinuado.

| Propriedade | Tipo | Opções | Padrão |
|---|---|---|---|
| Opções | Variante | 2, 3, 4 | 2 |

## Como usar

### Quantidade de opções

Exemplos no Figma: 2 opções; 3 opções; 4 opções.

### Estados do segmento

Exemplos no Figma: Selecionado; Padrão; Hover; Pressionado; Desabilitado.

## Conteúdo

Como escrever os textos deste componente. Regras gerais em [conteudo/microtexto.md](../conteudo/microtexto.md) e [conteudo/glossario.md](../conteudo/glossario.md).

- Uma ou duas palavras por opção: Mensal, Anual.
- Todas as opções no mesmo formato e com tamanho parecido.

## Acessibilidade

Meta: WCAG 2.2 AA, base da ABNT NBR 17225. Contraste, anel de foco e modos em [fundamentos/acessibilidade.md](../fundamentos/acessibilidade.md).

- Teclado: Tab entra no controle e para na opção ativa. Setas mudam a opção.
- Leitor de tela: Funciona como um grupo de rádios: papel radiogroup com nome e cada segmento como radio. Anuncia a opção selecionada.
- Foco: Anel de foco na opção que recebe o teclado.
- Cuidados: Use no máximo 5 opções, com textos curtos. A opção ativa se diferencia também pelo fundo branco e pela sombra, não só pela cor do texto.

## Tokens usados

Trilho: cor/fundo/sutil. Opção no hover: cor/fundo/fantasma-hover; pressionada: cor/fundo/fantasma-pressionado. Opção selecionada: cor/fundo/superficie com Sombra/Pequena. Texto: cor/texto/padrao e cor/texto/secundario. Canto: raio/pilula.

No código, troque a barra por hífen e use o prefixo da coleção: cor/fundo/marca vira `var(--cor-fundo-marca)` e espaco/4 vira `var(--espaco-4)`.

## Faça

- Use de 2 a 4 opções com textos curtos.
- Mostre o resultado da troca na hora, na mesma tela.
- Mantenha as opções com larguras parecidas.
- Use para filtrar ou alternar a visão de uma área, no lugar do estilo Pílula das Abas.

## NÃO faça

- Trocar entre partes de um mesmo conteúdo, como capítulos e notas. Para isso use Abas.
- Textos longos que quebram em duas linhas.
- Mais de 4 opções. Prefira Seleção.

## Regras gerais

- Cores, espaços, cantos e sombras vêm sempre dos tokens (`var(--cor-…)`, `var(--espaco-…)`, `var(--raio-…)`). Nunca use códigos de cor soltos.
- O componente funciona no claro e no escuro sem mudanças: as cores mudam pelos tokens.
- Foco visível em tudo o que é clicável: anel de 2 px em `--cor-borda-foco`, afastado 2 px. Área de toque de pelo menos 24 px, e 40 px no celular.
- Elementos clicáveis têm cinco estados: padrão, hover, pressionado, foco e desabilitado.
- A cor nunca é o único sinal: estados usam também ícone, forma ou texto.


---

# Código de verificação

Componente do PASSI DS 1.1.0 · página "Código de verificação" no arquivo Figma.

O código de verificação recebe números enviados por e-mail ou SMS, uma casa por dígito. O cursor avança sozinho e a pessoa pode colar o código inteiro.

## Dígito

Dígito · uma casa do Código de verificação. Use o componente completo.

| Propriedade | Tipo | Opções | Padrão |
|---|---|---|---|
| Número | Texto |  | 4 |
| Estado | Variante | Vazio, Foco, Preenchido, Erro | Vazio |

## Código de verificação

Código de verificação · 4, 6 (padrão) ou 8 casas para códigos de confirmação enviados por e-mail ou SMS. O número de casas é igual ao do código enviado. Ao colar o código, preencha todas as casas de uma vez.

| Propriedade | Tipo | Opções | Padrão |
|---|---|---|---|
| Rótulo | Texto |  | Código enviado por e-mail |
| Dígitos | Variante | 6, 4, 8 | 6 |
| Estado | Variante | Vazio, Digitando, Completo, Erro | Vazio |

## Como usar

### Estados

Exemplos no Figma: Vazio; Digitando; Completo; Erro.

### Quantidade de dígitos

O padrão tem 6 casas, o tamanho mais comum nos códigos enviados por e-mail e SMS. Use 4 para códigos curtos e 8 quando o serviço pedir mais segurança. O número de casas é sempre igual ao do código enviado.

Exemplos no Figma: 4 dígitos; 6 dígitos (padrão); 8 dígitos.

### Dígito

Cada casa é um componente próprio, com quatro estados.

Exemplos no Figma: Vazio; Foco; Preenchido; Erro.

## Conteúdo

Como escrever os textos deste componente. Regras gerais em [conteudo/microtexto.md](../conteudo/microtexto.md) e [conteudo/glossario.md](../conteudo/glossario.md).

- Diga para onde o código foi enviado: Enviamos um código para ana@empresa.com.br.
- No erro, diga o que fazer: Código errado. Confira os números ou peça outro.

## Acessibilidade

Meta: WCAG 2.2 AA, base da ABNT NBR 17225. Contraste, anel de foco e modos em [fundamentos/acessibilidade.md](../fundamentos/acessibilidade.md).

- Teclado: Ao digitar, o cursor avança sozinho. Backspace volta para a casa anterior. Colar o código inteiro preenche todas as casas.
- Leitor de tela: Para o leitor de tela, prefira um único campo com o rótulo Código de verificação, mesmo que a tela mostre uma casa por dígito. Anuncie quando o código expirar.
- Foco: Borda azul na casa ativa.
- Cuidados: Aceite colar e o preenchimento automático do celular (WCAG 3.3.8). Não apague o que foi digitado em caso de erro. Dê tempo suficiente e um jeito de pedir um código novo.

## Tokens usados

Casa: cor/fundo/superficie, cor/borda/controle, cor/borda/marca (foco), cor/borda/erro. Número: Título/2 em cor/texto/padrao. Espaço: espaco/2. Canto: raio/medio.

No código, troque a barra por hífen e use o prefixo da coleção: cor/fundo/marca vira `var(--cor-fundo-marca)` e espaco/4 vira `var(--espaco-4)`.

## Faça

- Aceite colar o código inteiro de uma vez.
- Mostre para onde o código foi enviado.
- Ofereça reenviar o código depois de alguns segundos.

## NÃO faça

- Apagar tudo quando a pessoa erra um dígito.
- Esconder os números digitados.
- Pedir códigos com mais de 8 dígitos ou mudar a quantidade de casas no meio do fluxo.

## Regras gerais

- Cores, espaços, cantos e sombras vêm sempre dos tokens (`var(--cor-…)`, `var(--espaco-…)`, `var(--raio-…)`). Nunca use códigos de cor soltos.
- O componente funciona no claro e no escuro sem mudanças: as cores mudam pelos tokens.
- Foco visível em tudo o que é clicável: anel de 2 px em `--cor-borda-foco`, afastado 2 px. Área de toque de pelo menos 24 px, e 40 px no celular.
- Elementos clicáveis têm cinco estados: padrão, hover, pressionado, foco e desabilitado.
- A cor nunca é o único sinal: estados usam também ícone, forma ou texto.


---

# Envio de arquivo

Componente do PASSI DS 1.1.0 · página "Envio de arquivo" no arquivo Figma.

O envio de arquivo deixa a pessoa arrastar um arquivo para a área marcada ou clicar para escolher no computador. Depois, mostra o progresso e o resultado de cada envio.

## Envio de arquivo

Envio de arquivo · área para arrastar ou escolher arquivos, com a lista de envios logo abaixo. Informe formatos e tamanho máximo antes do envio.

| Propriedade | Tipo | Opções | Padrão |
|---|---|---|---|
| Estado | Variante | Padrão, Arrastando, Enviando, Concluído, Erro | Padrão |

## Como usar

### Estados

Arrastando destaca a área em azul. Enviando, concluído e erro mostram o arquivo logo abaixo.

Exemplos no Figma: Padrão; Arrastando; Enviando; Concluído; Erro.

## Conteúdo

Como escrever os textos deste componente. Regras gerais em [conteudo/microtexto.md](../conteudo/microtexto.md) e [conteudo/glossario.md](../conteudo/glossario.md).

- Diga os formatos e o tamanho máximo antes do envio: PDF ou DOCX, até 10 MB.
- No erro, diga o motivo e o que fazer: Arquivo maior que 10 MB. Escolha um menor.

## Acessibilidade

Meta: WCAG 2.2 AA, base da ABNT NBR 17225. Contraste, anel de foco e modos em [fundamentos/acessibilidade.md](../fundamentos/acessibilidade.md).

- Teclado: Tab chega ao botão Escolher arquivo. Enter abre a janela do sistema. Arrastar é só um atalho.
- Leitor de tela: A área de arrastar não é um controle; o botão dentro dela é. Anuncie o início, o progresso e o resultado de cada envio sem mover o foco.
- Foco: Anel de foco no botão. Depois do envio, o foco fica onde estava.
- Cuidados: Diga os formatos e o tamanho máximo antes do envio. Mensagens de erro dizem o que fazer, por exemplo Escolha um arquivo menor que 10 MB.

## Tokens usados

Área: cor/fundo/superficie, cor/fundo/marca-sutil (arrastando), borda tracejada cor/borda/forte ou cor/borda/marca. Arquivo: cor/fundo/superficie, cor/borda/padrao, cor/fundo/marca (progresso). Canto: raio/grande e raio/medio.

No código, troque a barra por hífen e use o prefixo da coleção: cor/fundo/marca vira `var(--cor-fundo-marca)` e espaco/4 vira `var(--espaco-4)`.

## Faça

- Diga os formatos e o tamanho máximo antes do envio.
- Mostre o progresso de cada arquivo.
- Explique o erro e ofereça tentar de novo.

## NÃO faça

- Recusar o arquivo sem dizer o motivo.
- Esconder a opção de clicar para escolher. Nem todo mundo consegue arrastar.
- Apagar os arquivos já enviados quando um deles falha.

## Regras gerais

- Cores, espaços, cantos e sombras vêm sempre dos tokens (`var(--cor-…)`, `var(--espaco-…)`, `var(--raio-…)`). Nunca use códigos de cor soltos.
- O componente funciona no claro e no escuro sem mudanças: as cores mudam pelos tokens.
- Foco visível em tudo o que é clicável: anel de 2 px em `--cor-borda-foco`, afastado 2 px. Área de toque de pelo menos 24 px, e 40 px no celular.
- Elementos clicáveis têm cinco estados: padrão, hover, pressionado, foco e desabilitado.
- A cor nunca é o único sinal: estados usam também ícone, forma ou texto.


---

# Etiqueta

Componente do PASSI DS 1.1.0 · página "Etiqueta" no arquivo Figma.

A etiqueta é clicável. Serve para filtrar listas, escolher categorias ou mostrar escolhas que a pessoa pode remover, como filtros aplicados em uma busca.

## Etiqueta

Etiqueta · item clicável para filtrar, selecionar categorias ou mostrar escolhas que podem ser removidas. Diferente do Selo, que só informa.

| Propriedade | Tipo | Opções | Padrão |
|---|---|---|---|
| Texto | Texto |  | Design system |
| Mostrar ícone | Liga/desliga |  | Desligado |
| Removível | Liga/desliga |  | Desligado |
| Tamanho | Variante | M, P | M |
| Estado | Variante | Padrão, Hover, Pressionado, Selecionada, Desabilitada | Padrão |

## Como usar

### Estados

A etiqueta selecionada ganha fundo azul claro e um ícone de confirmação.

Exemplos no Figma: M · Padrão; M · Hover; M · Pressionado; M · Selecionada; M · Desabilitada; P · Padrão; P · Hover; P · Pressionado; P · Selecionada; P · Desabilitada.

### Filtros

Grupo de etiquetas para filtrar conteúdo. Mais de uma pode ficar selecionada.

### Removíveis

Mostram escolhas já feitas. O “x” remove a escolha.

## Conteúdo

Como escrever os textos deste componente. Regras gerais em [conteudo/microtexto.md](../conteudo/microtexto.md) e [conteudo/glossario.md](../conteudo/glossario.md).

- Uma ou duas palavras: Design system.
- Use o mesmo nome do filtro em todas as telas.

## Acessibilidade

Meta: WCAG 2.2 AA, base da ABNT NBR 17225. Contraste, anel de foco e modos em [fundamentos/acessibilidade.md](../fundamentos/acessibilidade.md).

- Teclado: Etiquetas de filtro recebem Tab e alternam com Espaço ou Enter. O x de remover é um botão próprio.
- Leitor de tela: Etiqueta de filtro é um botão que anuncia se está selecionada. O botão de remover tem nome completo, por exemplo Remover filtro Design.
- Foco: Anel de foco na etiqueta e, separado, no botão de remover.
- Cuidados: O x precisa de área de toque de 24 px. Etiqueta que só informa, sem ação, deve ser um Selo.

## Tokens usados

Fundo: cor/fundo/superficie, cor/fundo/sutil (hover), cor/fundo/sutil-hover (pressionado), cor/fundo/marca-sutil, cor/fundo/desabilitado. Borda: cor/borda/forte, cor/borda/marca. Texto: cor/texto/padrao, cor/texto/marca. Espaço: espaco/1 a espaco/3. Canto: raio/pilula.

No código, troque a barra por hífen e use o prefixo da coleção: cor/fundo/marca vira `var(--cor-fundo-marca)` e espaco/4 vira `var(--espaco-4)`.

## Faça

- Use textos curtos, de uma ou duas palavras.
- Deixe claro quais filtros estão ativos.
- Ofereça “Limpar filtros” quando houver muitos selecionados.

## NÃO faça

- Usar etiqueta para status. Para isso use Selo.
- Esconder o resultado do filtro longe das etiquetas.
- Misturar etiquetas removíveis e selecionáveis no mesmo grupo.

## Regras gerais

- Cores, espaços, cantos e sombras vêm sempre dos tokens (`var(--cor-…)`, `var(--espaco-…)`, `var(--raio-…)`). Nunca use códigos de cor soltos.
- O componente funciona no claro e no escuro sem mudanças: as cores mudam pelos tokens.
- Foco visível em tudo o que é clicável: anel de 2 px em `--cor-borda-foco`, afastado 2 px. Área de toque de pelo menos 24 px, e 40 px no celular.
- Elementos clicáveis têm cinco estados: padrão, hover, pressionado, foco e desabilitado.
- A cor nunca é o único sinal: estados usam também ícone, forma ou texto.


---

# Selo

Componente do PASSI DS 1.1.0 · página "Selo" no arquivo Figma.

O selo mostra o status ou a categoria de algo, como “Publicado” ou “Em revisão”. Ele só informa, não é clicável. O contador mostra quantidades, como notificações novas.

## Selo

Selo · rótulo curto de status ou categoria, só para leitura (não é clicável). Use Sutil na maior parte das vezes e Forte para chamar atenção.

| Propriedade | Tipo | Opções | Padrão |
|---|---|---|---|
| Texto | Texto |  | Novo |
| Mostrar ponto | Liga/desliga |  | Ligado |
| Cor | Variante | Neutro, Marca, Sucesso, Alerta, Erro | Neutro |
| Estilo | Variante | Sutil, Forte | Sutil |

## Contador

Contador · número pequeno sobre ícones e abas, como notificações não lidas. Acima de 99, mostre “99+”.

| Propriedade | Tipo | Opções | Padrão |
|---|---|---|---|
| Número | Texto |  | 3 |
| Cor | Variante | Marca, Erro, Neutro | Marca |

## Como usar

### Cores e estilos

A cor sempre vem acompanhada de texto, para não depender só dela.

Exemplos no Figma: Sutil · Neutro; Sutil · Marca; Sutil · Sucesso; Sutil · Alerta; Sutil · Erro; Forte · Neutro; Forte · Marca; Forte · Sucesso; Forte · Alerta; Forte · Erro.

### Sem ponto

### Contador

Fica sobre ícones, abas e itens de menu.

Exemplos no Figma: Marca; Erro; Neutro.

## Conteúdo

Como escrever os textos deste componente. Regras gerais em [conteudo/microtexto.md](../conteudo/microtexto.md) e [conteudo/glossario.md](../conteudo/glossario.md).

- Uma ou duas palavras que dizem o estado: Publicado, Em revisão.
- Use sempre o mesmo nome para o mesmo status.

## Acessibilidade

Meta: WCAG 2.2 AA, base da ABNT NBR 17225. Contraste, anel de foco e modos em [fundamentos/acessibilidade.md](../fundamentos/acessibilidade.md).

- Teclado: Não recebe foco: só informa.
- Leitor de tela: Lido como texto comum. O contador precisa de contexto em texto, por exemplo 3 notificações novas, e não só o número.
- Foco: Nenhum.
- Cuidados: Status nunca só pela cor: o texto do selo diz o estado. Quando o número muda enquanto a pessoa usa a tela, anuncie de forma discreta.

## Tokens usados

Sutil: cor/fundo/*-sutil com cor/texto/* da mesma família. Forte: cor/fundo/marca, sucesso, alerta, erro e invertido. Canto: raio/pilula.

No código, troque a barra por hífen e use o prefixo da coleção: cor/fundo/marca vira `var(--cor-fundo-marca)` e espaco/4 vira `var(--espaco-4)`.

## Faça

- Use uma ou duas palavras.
- Mantenha o mesmo significado de cor em todo o produto.
- Prefira o estilo Sutil; reserve o Forte para o que exige atenção.

## NÃO faça

- Usar selo como botão ou filtro clicável. Para isso use Etiqueta.
- Muitos selos fortes na mesma tela.
- Criar cores novas fora das cinco definidas.

## Regras gerais

- Cores, espaços, cantos e sombras vêm sempre dos tokens (`var(--cor-…)`, `var(--espaco-…)`, `var(--raio-…)`). Nunca use códigos de cor soltos.
- O componente funciona no claro e no escuro sem mudanças: as cores mudam pelos tokens.
- Foco visível em tudo o que é clicável: anel de 2 px em `--cor-borda-foco`, afastado 2 px. Área de toque de pelo menos 24 px, e 40 px no celular.
- Elementos clicáveis têm cinco estados: padrão, hover, pressionado, foco e desabilitado.
- A cor nunca é o único sinal: estados usam também ícone, forma ou texto.


---

# Avatar

Componente do PASSI DS 1.1.0 · página "Avatar" no arquivo Figma.

O avatar representa uma pessoa. Mostra a foto quando existe, as iniciais como alternativa e um ícone quando não há nenhuma informação. Pode exibir um ponto de status, como “online”.

## Avatar

Avatar · representa uma pessoa ou organização. Use Imagem quando houver foto (troque o preenchimento do círculo), Iniciais como alternativa e Ícone quando não houver nenhuma informação.

| Propriedade | Tipo | Opções | Padrão |
|---|---|---|---|
| Iniciais | Texto |  | JP |
| Mostrar status | Liga/desliga |  | Desligado |
| Tipo | Variante | Iniciais, Ícone, Imagem | Iniciais |
| Tamanho | Variante | P, M, G, XG | P |

## Grupo de avatares

Grupo de avatares · mostra quem participa de algo. Até 4 rostos e um contador com o restante.

| Propriedade | Tipo | Opções | Padrão |
|---|---|---|---|
| Quantidade | Texto |  | +12 |

## Como usar

### Tipos

Exemplos no Figma: Imagem; Iniciais; Ícone.

### Tamanhos

P 24 px (listas densas), M 32 px (comentários), G 40 px (padrão), XG 56 px (perfil).

Exemplos no Figma: P · 24 px; M · 32 px; G · 40 px; XG · 56 px.

### Com status

### Grupo de avatares

Avatares sobrepostos, com o número de pessoas que não aparecem.

## Conteúdo

Como escrever os textos deste componente. Regras gerais em [conteudo/microtexto.md](../conteudo/microtexto.md) e [conteudo/glossario.md](../conteudo/glossario.md).

- O texto alternativo é o nome da pessoa.
- Iniciais com até duas letras: primeira letra do nome e do sobrenome.

## Acessibilidade

Meta: WCAG 2.2 AA, base da ABNT NBR 17225. Contraste, anel de foco e modos em [fundamentos/acessibilidade.md](../fundamentos/acessibilidade.md).

- Teclado: Só recebe foco quando é um link ou botão, por exemplo para abrir o perfil.
- Leitor de tela: A foto tem texto alternativo com o nome da pessoa. Ao lado do nome escrito, a foto é decorativa e fica escondida do leitor. O ponto de status é lido em texto, por exemplo online.
- Foco: Anel de foco quando é clicável.
- Cuidados: No Grupo de avatares, o +3 diz em texto quem são ou quantas pessoas faltam.

## Tokens usados

Iniciais: cor/fundo/marca-sutil e cor/texto/marca. Ícone: cor/fundo/sutil-hover e cor/texto/secundario. Contorno: cor/fundo/superficie. Status: cor/fundo/sucesso.

No código, troque a barra por hífen e use o prefixo da coleção: cor/fundo/marca vira `var(--cor-fundo-marca)` e espaco/4 vira `var(--espaco-4)`.

## Faça

- Use iniciais com até duas letras.
- Mantenha o mesmo tamanho dentro de uma lista.
- Mostre o nome completo por perto ou em uma dica flutuante.

## NÃO faça

- Fotos de baixa resolução ou cortadas no rosto.
- Cores aleatórias para iniciais sem garantir contraste.
- Grupos com mais de 5 rostos visíveis.

## Regras gerais

- Cores, espaços, cantos e sombras vêm sempre dos tokens (`var(--cor-…)`, `var(--espaco-…)`, `var(--raio-…)`). Nunca use códigos de cor soltos.
- O componente funciona no claro e no escuro sem mudanças: as cores mudam pelos tokens.
- Foco visível em tudo o que é clicável: anel de 2 px em `--cor-borda-foco`, afastado 2 px. Área de toque de pelo menos 24 px, e 40 px no celular.
- Elementos clicáveis têm cinco estados: padrão, hover, pressionado, foco e desabilitado.
- A cor nunca é o único sinal: estados usam também ícone, forma ou texto.


---

# Card

Componente do PASSI DS 1.1.0 · página "Card" no arquivo Figma.

O card agrupa informações sobre um mesmo assunto, como um artigo, um produto ou um indicador. Ele funciona como uma pequena vitrine que leva para o conteúdo completo.

## Card

Card · agrupa informações sobre um mesmo assunto em uma superfície. Tipos: Conteúdo (imagem em cima), Horizontal (imagem ao lado), Destaque (chamada na cor da marca) e Métrica (número em evidência). Troque a imagem pelo preenchimento do bloco “Imagem”.

| Propriedade | Tipo | Opções | Padrão |
|---|---|---|---|
| Título | Texto |  | Governança sem burocracia |
| Descrição | Texto |  | Quem decide, quem mantém e como evoluir o design system sem travar os times de produto. |
| Tipo | Variante | Conteúdo, Horizontal, Destaque, Métrica | Conteúdo |

## Como usar

### Tipos

Exemplos no Figma: Conteúdo; Livro · 2ª edição; Destaque; Métrica; Horizontal.

## Conteúdo

Como escrever os textos deste componente. Regras gerais em [conteudo/microtexto.md](../conteudo/microtexto.md) e [conteudo/glossario.md](../conteudo/glossario.md).

- Título curto, de até duas linhas, que faça sentido sozinho.
- Descrição de uma ou duas frases.
- A ação do card diz o destino: Ler artigo.

## Acessibilidade

Meta: WCAG 2.2 AA, base da ABNT NBR 17225. Contraste, anel de foco e modos em [fundamentos/acessibilidade.md](../fundamentos/acessibilidade.md).

- Teclado: Quando o card inteiro é clicável, só o título é o link e recebe Tab. Botões dentro do card recebem Tab separados.
- Leitor de tela: O título do card é um título de seção (h2 ou h3, conforme a página) e é o nome do link. A imagem de capa costuma ser decorativa.
- Foco: Anel de foco em volta do card quando o título-link recebe foco.
- Cuidados: Não transforme o card inteiro em um link gigante com vários textos: o leitor de tela leria tudo como nome do link.

## Tokens usados

Fundo: cor/fundo/superficie ou cor/fundo/marca (destaque). Borda: cor/borda/padrao. Texto: cor/texto/padrao, cor/texto/secundario, cor/texto/sobre-marca. Espaço: espaco/2 a espaco/8. Canto: raio/grande.

No código, troque a barra por hífen e use o prefixo da coleção: cor/fundo/marca vira `var(--cor-fundo-marca)` e espaco/4 vira `var(--espaco-4)`.

## Faça

- Mantenha uma única ação principal por card.
- Use títulos curtos, de até duas linhas.
- Mantenha cards de uma mesma lista com a mesma altura.

## NÃO faça

- Colocar vários botões e links dentro do mesmo card.
- Cards dentro de cards.
- Textos longos que deveriam estar na página de detalhe.

## Regras gerais

- Cores, espaços, cantos e sombras vêm sempre dos tokens (`var(--cor-…)`, `var(--espaco-…)`, `var(--raio-…)`). Nunca use códigos de cor soltos.
- O componente funciona no claro e no escuro sem mudanças: as cores mudam pelos tokens.
- Foco visível em tudo o que é clicável: anel de 2 px em `--cor-borda-foco`, afastado 2 px. Área de toque de pelo menos 24 px, e 40 px no celular.
- Elementos clicáveis têm cinco estados: padrão, hover, pressionado, foco e desabilitado.
- A cor nunca é o único sinal: estados usam também ícone, forma ou texto.


---

# Acordeão

Componente do PASSI DS 1.1.0 · página "Acordeão" no arquivo Figma.

O acordeão organiza conteúdos em seções que abrem e fecham. A pessoa lê só o que interessa, sem rolar por textos longos. É o formato clássico de perguntas frequentes.

## Acordeão

Acordeão · lista de perguntas ou seções que abrem e fecham. Bom para perguntas frequentes e conteúdos longos que nem todos precisam ler.

| Propriedade | Tipo | Opções | Padrão |
|---|---|---|---|
| Pergunta | Texto |  | Preciso saber programar para ler o livro? |
| Resposta | Texto |  | Não. O livro foi escrito para quem decide e cobra resultados: lideranças de produto, design e negócio. Os exemplos técnicos aparecem só quando ajudam a entender uma decisão. |
| Estado | Variante | Fechado, Aberto | Fechado |
| Interação | Variante | Padrão, Hover, Pressionado, Foco | Padrão |

## Como usar

### Estados

Exemplos no Figma: Fechado · Padrão; Fechado · Hover; Fechado · Pressionado; Fechado · Foco; Aberto · Padrão; Aberto · Hover; Aberto · Pressionado; Aberto · Foco.

### Perguntas frequentes

Vários itens em sequência, com no máximo um aberto por vez.

## Conteúdo

Como escrever os textos deste componente. Regras gerais em [conteudo/microtexto.md](../conteudo/microtexto.md) e [conteudo/glossario.md](../conteudo/glossario.md).

- A pergunta faz sentido sozinha, sem o texto aberto.
- A resposta começa pela resposta direta e depois explica.

## Acessibilidade

Meta: WCAG 2.2 AA, base da ABNT NBR 17225. Contraste, anel de foco e modos em [fundamentos/acessibilidade.md](../fundamentos/acessibilidade.md).

- Teclado: Tab chega a cada pergunta. Enter ou Espaço abrem e fecham.
- Leitor de tela: A pergunta é um botão dentro de um título, e anuncia se está expandida ou recolhida. A resposta fica ligada ao botão no código.
- Foco: Borda azul de 2 px por dentro do cabeçalho. Ao abrir, o foco continua na pergunta.
- Cuidados: Não esconda informação obrigatória, como preço ou prazo, dentro de um acordeão fechado.

## Tokens usados

Fundo hover: cor/fundo/sutil. Pressionado: cor/fundo/sutil-hover. Linha: cor/borda/padrao. Foco: cor/borda/foco. Texto: cor/texto/padrao e cor/texto/secundario. Espaço: espaco/4 e espaco/5.

No código, troque a barra por hífen e use o prefixo da coleção: cor/fundo/marca vira `var(--cor-fundo-marca)` e espaco/4 vira `var(--espaco-4)`.

## Faça

- Escreva títulos que façam sentido sozinhos.
- Mantenha aberto, no máximo, um item por vez em listas longas.
- Deixe toda a linha do título clicável.

## NÃO faça

- Esconder informação essencial dentro do acordeão.
- Acordeões dentro de acordeões.
- Títulos genéricos como “Saiba mais”.

## Regras gerais

- Cores, espaços, cantos e sombras vêm sempre dos tokens (`var(--cor-…)`, `var(--espaco-…)`, `var(--raio-…)`). Nunca use códigos de cor soltos.
- O componente funciona no claro e no escuro sem mudanças: as cores mudam pelos tokens.
- Foco visível em tudo o que é clicável: anel de 2 px em `--cor-borda-foco`, afastado 2 px. Área de toque de pelo menos 24 px, e 40 px no celular.
- Elementos clicáveis têm cinco estados: padrão, hover, pressionado, foco e desabilitado.
- A cor nunca é o único sinal: estados usam também ícone, forma ou texto.


---

# Abas

Componente do PASSI DS 1.1.0 · página "Abas" no arquivo Figma.

As abas dividem um conteúdo em partes e mostram uma de cada vez, sem sair da página. A aba ativa fica destacada para a pessoa saber onde está.

## Aba

Aba · item dentro de Abas. Use o estilo Linha. O estilo Pílula está descontinuado e sai na versão 2.0: para filtrar ou alternar a visão de uma área, use Controle segmentado.

| Propriedade | Tipo | Opções | Padrão |
|---|---|---|---|
| Texto | Texto |  | Capítulos |
| Mostrar ícone | Liga/desliga |  | Desligado |
| Mostrar contador | Liga/desliga |  | Desligado |
| Estilo | Variante | Linha, Pílula | Linha |
| Estado | Variante | Ativa, Padrão, Hover, Pressionado, Desabilitada | Ativa |

## Abas

Abas · alterna entre visões de um mesmo conteúdo sem sair da página. Troque o estado de cada aba para mudar a seleção. Use o estilo Linha; o estilo Pílula está descontinuado (use Controle segmentado) e sai na versão 2.0.

| Propriedade | Tipo | Opções | Padrão |
|---|---|---|---|
| Estilo | Variante | Linha, Pílula | Linha |

## Como usar

### Estilos

Linha é o estilo das abas: troca entre partes de um mesmo conteúdo. O estilo Pílula está descontinuado e sai na versão 2.0. Para filtrar ou alternar a visão de uma área, use o Controle segmentado.

Exemplos no Figma: Linha; Pílula (descontinuado).

### Estados da aba

Exemplos no Figma: Linha · Ativa; Linha · Padrão; Linha · Hover; Linha · Pressionado; Linha · Desabilitada; Pílula · Ativa; Pílula · Padrão; Pílula · Hover.

### Com ícone e contador

O contador mostra quantos itens existem em cada aba.

## Conteúdo

Como escrever os textos deste componente. Regras gerais em [conteudo/microtexto.md](../conteudo/microtexto.md) e [conteudo/glossario.md](../conteudo/glossario.md).

- Uma ou duas palavras por aba: Capítulos, Notas.
- Substantivos, não verbos.

## Acessibilidade

Meta: WCAG 2.2 AA, base da ABNT NBR 17225. Contraste, anel de foco e modos em [fundamentos/acessibilidade.md](../fundamentos/acessibilidade.md).

- Teclado: Tab entra na lista de abas e para na aba ativa. Setas trocam de aba. Tab de novo leva ao conteúdo.
- Leitor de tela: Papéis tablist, tab e tabpanel. Anuncia a aba, se está selecionada e a posição, por exemplo 2 de 4.
- Foco: Anel de foco na aba. A aba ativa se diferencia também pela linha de 2 px, não só pela cor.
- Cuidados: Abas trocam conteúdo na mesma página. Para levar a outra página, use links de navegação.

## Tokens usados

Linha: cor/borda/padrao, cor/borda/forte (hover), cor/borda/controle (pressionado) e cor/texto/padrao (ativa, 2 px). Pílula: cor/fundo/sutil (hover), cor/fundo/sutil-hover (pressionado) e cor/fundo/invertido (ativa). Texto: cor/texto/secundario. Canto: raio/pilula.

No código, troque a barra por hífen e use o prefixo da coleção: cor/fundo/marca vira `var(--cor-fundo-marca)` e espaco/4 vira `var(--espaco-4)`.

## Faça

- Use nomes curtos, de uma ou duas palavras.
- Mantenha a ordem das abas fixa.
- Mostre a primeira aba aberta por padrão.

## NÃO faça

- Mais de 6 abas lado a lado.
- Usar abas para etapas em sequência. Para isso use Passos.
- Abas que levam para outras páginas.
- Usar o estilo Pílula em telas novas. Para filtros, use Controle segmentado.

## Regras gerais

- Cores, espaços, cantos e sombras vêm sempre dos tokens (`var(--cor-…)`, `var(--espaco-…)`, `var(--raio-…)`). Nunca use códigos de cor soltos.
- O componente funciona no claro e no escuro sem mudanças: as cores mudam pelos tokens.
- Foco visível em tudo o que é clicável: anel de 2 px em `--cor-borda-foco`, afastado 2 px. Área de toque de pelo menos 24 px, e 40 px no celular.
- Elementos clicáveis têm cinco estados: padrão, hover, pressionado, foco e desabilitado.
- A cor nunca é o único sinal: estados usam também ícone, forma ou texto.


---

# Migalhas de pão

Componente do PASSI DS 1.1.0 · página "Migalhas de pão" no arquivo Figma.

As migalhas de pão mostram onde a pessoa está dentro do site e o caminho até ali. Cada nível anterior é um link para voltar.

## Migalhas de pão

Migalhas de pão · mostram o caminho até a página atual e permitem voltar a qualquer nível. Os links não têm sublinhado (ele aparece no hover). Em caminhos longos, os níveis do meio ficam no “…”, que abre uma lista. O último item é a página atual e não é clicável.

| Propriedade | Tipo | Opções | Padrão |
|---|---|---|---|
| Página atual | Texto |  | Capítulo 7 |
| Mostrar ícone de início | Liga/desliga |  | Ligado |
| Níveis | Variante | 2, 3, 4, Recolhido, Recolhido aberto | 2 |

## Como usar

### Níveis

Quando o caminho é longo, os níveis do meio ficam recolhidos em “…”. Ao clicar no “…”, abre uma lista com os níveis escondidos. Os links não têm sublinhado: a posição no caminho já mostra que dá para clicar. O sublinhado aparece no hover.

Exemplos no Figma: 2 níveis; 3 níveis; 4 níveis; Recolhido; Recolhido, com o “…” aberto.

## Conteúdo

Como escrever os textos deste componente. Regras gerais em [conteudo/microtexto.md](../conteudo/microtexto.md) e [conteudo/glossario.md](../conteudo/glossario.md).

- Use os mesmos nomes dos títulos das páginas.
- A página atual aparece por extenso; os níveis anteriores podem ser abreviados.

## Acessibilidade

Meta: WCAG 2.2 AA, base da ABNT NBR 17225. Contraste, anel de foco e modos em [fundamentos/acessibilidade.md](../fundamentos/acessibilidade.md).

- Teclado: Tab passa por cada link do caminho e pelo “…”. Enter abre a lista dos níveis escondidos e Esc fecha. A página atual não é link.
- Leitor de tela: Fica dentro de uma navegação com o nome Você está aqui. O “…” é um botão com o nome Mostrar caminho completo. A página atual é marcada como atual no código (aria-current).
- Foco: Borda de foco em cada link.
- Cuidados: Os separadores são decorativos e ficam escondidos do leitor de tela.

## Tokens usados

Links: cor/texto/secundario, sem sublinhado; no hover, ganham sublinhado. Página atual: cor/texto/padrao. Separador: cor/texto/terciario. Lista do “…”: Item de menu sobre cor/fundo/superficie, com borda cor/borda/padrao e Sombra/Média. Espaço: espaco/2.

No código, troque a barra por hífen e use o prefixo da coleção: cor/fundo/marca vira `var(--cor-fundo-marca)` e espaco/4 vira `var(--espaco-4)`.

## Faça

- Coloque no topo da página, acima do título.
- Use os mesmos nomes dos títulos das páginas.
- Recolha os níveis do meio em telas pequenas.

## NÃO faça

- Usar em sites com só um ou dois níveis.
- Deixar a página atual clicável.
- Substituir o menu principal pelas migalhas.

## Regras gerais

- Cores, espaços, cantos e sombras vêm sempre dos tokens (`var(--cor-…)`, `var(--espaco-…)`, `var(--raio-…)`). Nunca use códigos de cor soltos.
- O componente funciona no claro e no escuro sem mudanças: as cores mudam pelos tokens.
- Foco visível em tudo o que é clicável: anel de 2 px em `--cor-borda-foco`, afastado 2 px. Área de toque de pelo menos 24 px, e 40 px no celular.
- Elementos clicáveis têm cinco estados: padrão, hover, pressionado, foco e desabilitado.
- A cor nunca é o único sinal: estados usam também ícone, forma ou texto.


---

# Paginação

Componente do PASSI DS 1.1.0 · página "Paginação" no arquivo Figma.

A paginação divide listas longas em páginas menores e permite ir para a anterior, a próxima ou uma página específica.

## Página

Página · número dentro da Paginação.

| Propriedade | Tipo | Opções | Padrão |
|---|---|---|---|
| Número | Texto |  | 2 |
| Estado | Variante | Atual, Padrão, Hover, Pressionado, Reticências | Atual |

## Paginação

Paginação · divide listas longas em páginas. Números para listas navegáveis, Simples quando a posição exata importa pouco, Compacta para espaços pequenos e celular.

| Propriedade | Tipo | Opções | Padrão |
|---|---|---|---|
| Tipo | Variante | Números, Simples, Compacta | Números |

## Como usar

### Tipos

Exemplos no Figma: Números; Simples; Compacta.

### Estados da página

Exemplos no Figma: Atual; Padrão; Hover; Pressionado; Reticências.

## Conteúdo

Como escrever os textos deste componente. Regras gerais em [conteudo/microtexto.md](../conteudo/microtexto.md) e [conteudo/glossario.md](../conteudo/glossario.md).

- Anterior e Próxima, com nome completo para leitor de tela: Página 3.
- Mostre o total quando ajudar: Página 3 de 12.

## Acessibilidade

Meta: WCAG 2.2 AA, base da ABNT NBR 17225. Contraste, anel de foco e modos em [fundamentos/acessibilidade.md](../fundamentos/acessibilidade.md).

- Teclado: Tab passa por Anterior, pelos números e por Próximo.
- Leitor de tela: Fica dentro de uma navegação com o nome Paginação. Cada número tem nome completo, por exemplo Página 3, e a página atual é marcada como atual.
- Foco: Anel de foco em cada botão. Depois de trocar de página, leve o foco para o começo da lista nova.
- Cuidados: Anterior e Próximo ficam desabilitados de forma anunciada na primeira e na última página.

## Tokens usados

Página atual: cor/fundo/invertido e cor/texto/invertido. Hover: cor/fundo/sutil. Pressionado: cor/fundo/sutil-hover. Texto: cor/texto/padrao, cor/texto/secundario. Canto: raio/medio.

No código, troque a barra por hífen e use o prefixo da coleção: cor/fundo/marca vira `var(--cor-fundo-marca)` e espaco/4 vira `var(--espaco-4)`.

## Faça

- Mostre a primeira, a última e as páginas vizinhas da atual.
- Desabilite “Anterior” na primeira página e “Próxima” na última.
- Mantenha a paginação no mesmo lugar em todas as páginas.

## NÃO faça

- Mostrar todos os números quando há muitas páginas.
- Paginar listas curtas, com menos de 20 itens.
- Áreas de clique menores que 36 px.

## Regras gerais

- Cores, espaços, cantos e sombras vêm sempre dos tokens (`var(--cor-…)`, `var(--espaco-…)`, `var(--raio-…)`). Nunca use códigos de cor soltos.
- O componente funciona no claro e no escuro sem mudanças: as cores mudam pelos tokens.
- Foco visível em tudo o que é clicável: anel de 2 px em `--cor-borda-foco`, afastado 2 px. Área de toque de pelo menos 24 px, e 40 px no celular.
- Elementos clicáveis têm cinco estados: padrão, hover, pressionado, foco e desabilitado.
- A cor nunca é o único sinal: estados usam também ícone, forma ou texto.


---

# Indicador de página

Componente do PASSI DS 1.1.0 · página "Indicador de página" no arquivo Figma.

O indicador de página mostra, com pontos, em qual tela de um carrossel ou de uma introdução a pessoa está. O ponto alongado é a tela atual.

## Indicador de página

Indicador de página · pontos que mostram em qual tela de um carrossel ou introdução a pessoa está. O ponto ativo é alongado. Para mudar a posição, reordene o ponto “Ativo”.

| Propriedade | Tipo | Opções | Padrão |
|---|---|---|---|
| Fundo | Variante | Claro, Sobre imagem | Claro |
| Quantidade | Variante | 3, 4, 5 | 3 |

## Como usar

### Quantidades

Exemplos no Figma: 3 telas; 4 telas; 5 telas.

### Sobre imagem

Uma cápsula escura garante contraste sobre fotos.

## Conteúdo

Como escrever os textos deste componente. Regras gerais em [conteudo/microtexto.md](../conteudo/microtexto.md) e [conteudo/glossario.md](../conteudo/glossario.md).

- Para leitor de tela, diga a posição: Tela 2 de 4.

## Acessibilidade

Meta: WCAG 2.2 AA, base da ABNT NBR 17225. Contraste, anel de foco e modos em [fundamentos/acessibilidade.md](../fundamentos/acessibilidade.md).

- Teclado: Pontos só informativos não recebem foco. Se forem clicáveis, cada ponto é um botão.
- Leitor de tela: Anuncie a posição em texto, por exemplo Tela 2 de 4, em vez de ler cada ponto.
- Foco: Anel de foco nos pontos clicáveis.
- Cuidados: A tela atual se diferencia pela forma alongada, não só pela cor. Pontos clicáveis precisam de área de toque de 24 px.

## Tokens usados

Ativo: cor/fundo/marca. Demais pontos: cor/borda/forte. Sobre imagem: branco com transparência sobre cápsula escura.

No código, troque a barra por hífen e use o prefixo da coleção: cor/fundo/marca vira `var(--cor-fundo-marca)` e espaco/4 vira `var(--espaco-4)`.

## Faça

- Use em sequências curtas, de até 5 telas.
- Combine com setas ou gesto de arrastar.
- Centralize abaixo do conteúdo.

## NÃO faça

- Usar como única forma de navegar.
- Sequências longas com muitos pontos.
- Pontos pequenos demais para tocar, se forem clicáveis.

## Regras gerais

- Cores, espaços, cantos e sombras vêm sempre dos tokens (`var(--cor-…)`, `var(--espaco-…)`, `var(--raio-…)`). Nunca use códigos de cor soltos.
- O componente funciona no claro e no escuro sem mudanças: as cores mudam pelos tokens.
- Foco visível em tudo o que é clicável: anel de 2 px em `--cor-borda-foco`, afastado 2 px. Área de toque de pelo menos 24 px, e 40 px no celular.
- Elementos clicáveis têm cinco estados: padrão, hover, pressionado, foco e desabilitado.
- A cor nunca é o único sinal: estados usam também ícone, forma ou texto.


---

# Passos

Componente do PASSI DS 1.1.0 · página "Passos" no arquivo Figma.

Os passos mostram em que etapa de um processo a pessoa está, quantas já foram e quantas faltam. Ajudam em cadastros, compras e configurações longas.

## Passo

Passo · uma etapa dentro de Passos.

| Propriedade | Tipo | Opções | Padrão |
|---|---|---|---|
| Título | Texto |  | Dados pessoais |
| Estado | Variante | Concluído, Atual, Próximo | Concluído |

## Passos

Passos · mostra o andamento de um processo dividido em etapas, como um cadastro ou uma compra. Use de 3 a 5 etapas.

| Propriedade | Tipo | Opções | Padrão |
|---|---|---|---|
| Orientação | Variante | Horizontal, Vertical | Horizontal |

## Como usar

### Orientações

Horizontal no computador; vertical no celular ou quando os títulos são longos.

Exemplos no Figma: Horizontal; Vertical.

### Estados do passo

Exemplos no Figma: Concluído; Atual; Próximo.

## Conteúdo

Como escrever os textos deste componente. Regras gerais em [conteudo/microtexto.md](../conteudo/microtexto.md) e [conteudo/glossario.md](../conteudo/glossario.md).

- Títulos curtos que dizem o que acontece na etapa: Dados pessoais.
- Mostre o total desde o início: Etapa 2 de 4.

## Acessibilidade

Meta: WCAG 2.2 AA, base da ABNT NBR 17225. Contraste, anel de foco e modos em [fundamentos/acessibilidade.md](../fundamentos/acessibilidade.md).

- Teclado: Passos concluídos que deixam voltar são links ou botões e recebem Tab. Os próximos não recebem foco.
- Leitor de tela: Uma lista ordenada. O passo atual é marcado como atual, e cada passo anuncia seu estado em texto: concluído, atual ou próximo.
- Foco: Ao avançar de etapa, leve o foco para o título da etapa nova.
- Cuidados: Não peça de novo o que a pessoa já informou numa etapa anterior (WCAG 3.3.7).

## Tokens usados

Concluído: cor/fundo/marca. Atual: borda cor/borda/marca e texto cor/texto/marca. Próximo: cor/borda/forte e cor/texto/secundario. Conector: cor/fundo/marca ou cor/borda/padrao.

No código, troque a barra por hífen e use o prefixo da coleção: cor/fundo/marca vira `var(--cor-fundo-marca)` e espaco/4 vira `var(--espaco-4)`.

## Faça

- Use títulos curtos que digam o que acontece em cada etapa.
- Deixe a pessoa voltar para etapas concluídas.
- Mostre o total de etapas desde o início.

## NÃO faça

- Mais de 5 etapas. Agrupe ou simplifique o processo.
- Usar passos para navegação livre. Para isso use Abas.
- Pular etapas sem avisar.

## Regras gerais

- Cores, espaços, cantos e sombras vêm sempre dos tokens (`var(--cor-…)`, `var(--espaco-…)`, `var(--raio-…)`). Nunca use códigos de cor soltos.
- O componente funciona no claro e no escuro sem mudanças: as cores mudam pelos tokens.
- Foco visível em tudo o que é clicável: anel de 2 px em `--cor-borda-foco`, afastado 2 px. Área de toque de pelo menos 24 px, e 40 px no celular.
- Elementos clicáveis têm cinco estados: padrão, hover, pressionado, foco e desabilitado.
- A cor nunca é o único sinal: estados usam também ícone, forma ou texto.


---

# Barra de progresso

Componente do PASSI DS 1.1.0 · página "Barra de progresso" no arquivo Figma.

A barra de progresso mostra quanto de uma tarefa já foi feito, como um envio de arquivo ou o avanço na leitura. Ela tranquiliza a pessoa: algo está acontecendo e já dá para ter ideia de quanto falta.

## Barra de progresso

Barra de progresso · mostra quanto falta para terminar uma tarefa com duração conhecida, como um envio. Linear para listas e formulários; Circular para espaços pequenos. Ajuste a largura do “Preenchimento” (ou o arco) para o valor real.

| Propriedade | Tipo | Opções | Padrão |
|---|---|---|---|
| Tipo | Variante | Linear, Circular | Linear |
| Estado | Variante | Em andamento, Concluída, Erro | Em andamento |

## Como usar

### Linear

Exemplos no Figma: Em andamento; Concluída; Erro.

### Circular

Exemplos no Figma: Em andamento; Concluída; Erro.

## Conteúdo

Como escrever os textos deste componente. Regras gerais em [conteudo/microtexto.md](../conteudo/microtexto.md) e [conteudo/glossario.md](../conteudo/glossario.md).

- Diga o que está acontecendo e quanto falta: Enviando 2 de 5 arquivos.
- No fim, confirme: Envio concluído.

## Acessibilidade

Meta: WCAG 2.2 AA, base da ABNT NBR 17225. Contraste, anel de foco e modos em [fundamentos/acessibilidade.md](../fundamentos/acessibilidade.md).

- Teclado: Não recebe foco.
- Leitor de tela: Papel progressbar com nome, por exemplo Envio do arquivo, e o valor em porcentagem. No tipo indeterminado, anuncie Carregando.
- Foco: Nenhum.
- Cuidados: Anuncie o fim, por exemplo Envio concluído, sem anunciar cada porcentagem. Mostre o número junto da barra quando ele importa.

## Tokens usados

Trilho: cor/fundo/sutil-hover. Preenchimento: cor/fundo/marca, cor/fundo/sucesso, cor/fundo/erro. Texto: cor/texto/padrao, cor/texto/secundario.

No código, troque a barra por hífen e use o prefixo da coleção: cor/fundo/marca vira `var(--cor-fundo-marca)` e espaco/4 vira `var(--espaco-4)`.

## Faça

- Mostre a porcentagem ou o que falta, como “2,1 MB de 3,5 MB”.
- Explique o erro e ofereça tentar de novo.
- Use para tarefas que levam mais de 2 segundos.

## NÃO faça

- Usar quando não dá para saber quanto falta. Use Carregando.
- Barras que voltam para trás.
- Esconder a barra antes de confirmar o resultado.

## Regras gerais

- Cores, espaços, cantos e sombras vêm sempre dos tokens (`var(--cor-…)`, `var(--espaco-…)`, `var(--raio-…)`). Nunca use códigos de cor soltos.
- O componente funciona no claro e no escuro sem mudanças: as cores mudam pelos tokens.
- Foco visível em tudo o que é clicável: anel de 2 px em `--cor-borda-foco`, afastado 2 px. Área de toque de pelo menos 24 px, e 40 px no celular.
- Elementos clicáveis têm cinco estados: padrão, hover, pressionado, foco e desabilitado.
- A cor nunca é o único sinal: estados usam também ícone, forma ou texto.


---

# Carregando

Componente do PASSI DS 1.1.0 · página "Carregando" no arquivo Figma.

Quando algo demora, a pessoa precisa saber que o sistema está trabalhando. O indicador giratório serve para esperas curtas. O esqueleto mostra a forma do conteúdo antes de ele aparecer, o que faz a espera parecer menor.

## Carregando

Carregando · indicador giratório para esperas curtas, sem duração conhecida. Gire o “Arco” no código (animação de rotação contínua de 0,8 s). Use “Sobre cor” dentro de botões e fundos coloridos.

| Propriedade | Tipo | Opções | Padrão |
|---|---|---|---|
| Cor | Variante | Marca, Neutro, Sobre cor | Marca |
| Tamanho | Variante | P, M, G | P |

## Esqueleto

Esqueleto · formas cinzas que antecipam o layout enquanto o conteúdo carrega. Aplique uma animação suave de brilho no código.

| Propriedade | Tipo | Opções | Padrão |
|---|---|---|---|
| Tipo | Variante | Texto, Item de lista, Card | Texto |

## Como usar

### Indicador giratório

P (16 px) dentro de botões e campos. M (24 px) em cards e listas. G (40 px) para a página inteira.

Exemplos no Figma: P; M; G; Neutro; Sobre cor.

### Esqueleto

Use quando já se sabe a forma do conteúdo: listas, cards e textos.

Exemplos no Figma: Texto; Item de lista; Card.

## Conteúdo

Como escrever os textos deste componente. Regras gerais em [conteudo/microtexto.md](../conteudo/microtexto.md) e [conteudo/glossario.md](../conteudo/glossario.md).

- Para esperas longas, diga o que está acontecendo: Gerando seu PDF…
- Use reticências só enquanto algo acontece.

## Acessibilidade

Meta: WCAG 2.2 AA, base da ABNT NBR 17225. Contraste, anel de foco e modos em [fundamentos/acessibilidade.md](../fundamentos/acessibilidade.md).

- Teclado: Não recebe foco.
- Leitor de tela: O indicador tem o nome Carregando e fica numa região que anuncia mudanças de forma discreta. O esqueleto fica escondido do leitor; anuncie só quando o conteúdo chegar.
- Foco: Não mova o foco enquanto carrega. Quando o conteúdo chega, o foco continua onde estava.
- Cuidados: Respeite quem pede menos movimento: o giro pode virar uma pulsação suave.

## Tokens usados

Indicador: cor/fundo/marca, cor/texto/padrao ou cor/texto/sobre-marca, com trilho transparente. Esqueleto: cor/fundo/sutil-hover sobre cor/fundo/superficie.

No código, troque a barra por hífen e use o prefixo da coleção: cor/fundo/marca vira `var(--cor-fundo-marca)` e espaco/4 vira `var(--espaco-4)`.

## Faça

- Mostre o indicador só depois de meio segundo de espera.
- Prefira o esqueleto em listas e páginas de conteúdo.
- Explique esperas longas com um texto, como “Gerando seu PDF…”.

## NÃO faça

- Vários indicadores girando na mesma tela.
- Bloquear a tela inteira para carregar só uma parte.
- Esqueletos que não se parecem com o conteúdo final.

## Regras gerais

- Cores, espaços, cantos e sombras vêm sempre dos tokens (`var(--cor-…)`, `var(--espaco-…)`, `var(--raio-…)`). Nunca use códigos de cor soltos.
- O componente funciona no claro e no escuro sem mudanças: as cores mudam pelos tokens.
- Foco visível em tudo o que é clicável: anel de 2 px em `--cor-borda-foco`, afastado 2 px. Área de toque de pelo menos 24 px, e 40 px no celular.
- Elementos clicáveis têm cinco estados: padrão, hover, pressionado, foco e desabilitado.
- A cor nunca é o único sinal: estados usam também ícone, forma ou texto.


---

# Alerta

Componente do PASSI DS 1.1.0 · página "Alerta" no arquivo Figma.

O alerta é uma mensagem que fica na página, perto do conteúdo a que se refere. Ele informa, confirma, avisa ou explica um erro, e diz o que fazer em seguida.

## Alerta

Alerta · mensagem fixa dentro da página, ligada a um contexto. Diferente do Aviso rápido, que aparece e some. Use Informação, Sucesso, Atenção ou Erro conforme a gravidade.

| Propriedade | Tipo | Opções | Padrão |
|---|---|---|---|
| Título | Texto |  | Nova versão do arquivo disponível |
| Descrição | Texto |  | Baixe a versão 1.1 para ter os componentes de gráficos. |
| Ação | Texto |  | Baixar agora |
| Mostrar descrição | Liga/desliga |  | Ligado |
| Mostrar ação | Liga/desliga |  | Ligado |
| Pode fechar | Liga/desliga |  | Ligado |
| Tipo | Variante | Informação, Sucesso, Atenção, Erro | Informação |

## Como usar

### Tipos

Cor, ícone e texto juntos indicam a gravidade, para que ninguém dependa só da cor.

### Versão curta

Só o título, para mensagens simples.

## Conteúdo

Como escrever os textos deste componente. Regras gerais em [conteudo/microtexto.md](../conteudo/microtexto.md) e [conteudo/glossario.md](../conteudo/glossario.md).

- Título diz o que aconteceu; descrição diz o que fazer.
- A ação é um verbo: Baixar agora, Tentar de novo.

## Acessibilidade

Meta: WCAG 2.2 AA, base da ABNT NBR 17225. Contraste, anel de foco e modos em [fundamentos/acessibilidade.md](../fundamentos/acessibilidade.md).

- Teclado: A ação e o botão de fechar recebem Tab.
- Leitor de tela: Alertas que aparecem depois de uma ação usam uma região que anuncia sozinha (status para sucesso e informação, alert para erro). Alertas que já estão na página são lidos na ordem normal.
- Foco: Não roube o foco. A exceção é o resumo de erros de um formulário, que recebe o foco ao enviar.
- Cuidados: Tipo sempre com ícone e título, nunca só pela cor. O botão de fechar tem o nome Fechar alerta.

## Tokens usados

Fundo: cor/fundo/marca-sutil, sucesso-sutil, alerta-sutil, erro-sutil. Borda (40%): cor/borda/marca, sucesso, alerta, erro. Ícone e ação: cor/texto/marca, sucesso, alerta, erro. Canto: raio/grande.

No código, troque a barra por hífen e use o prefixo da coleção: cor/fundo/marca vira `var(--cor-fundo-marca)` e espaco/4 vira `var(--espaco-4)`.

## Faça

- Diga o que aconteceu e o que fazer agora.
- Coloque o alerta perto do conteúdo a que ele se refere.
- Use o tipo certo para a gravidade.

## NÃO faça

- Mostrar vários alertas ao mesmo tempo.
- Mensagens técnicas, como códigos de erro sem explicação.
- Usar Erro para avisos que não impedem nada.

## Regras gerais

- Cores, espaços, cantos e sombras vêm sempre dos tokens (`var(--cor-…)`, `var(--espaco-…)`, `var(--raio-…)`). Nunca use códigos de cor soltos.
- O componente funciona no claro e no escuro sem mudanças: as cores mudam pelos tokens.
- Foco visível em tudo o que é clicável: anel de 2 px em `--cor-borda-foco`, afastado 2 px. Área de toque de pelo menos 24 px, e 40 px no celular.
- Elementos clicáveis têm cinco estados: padrão, hover, pressionado, foco e desabilitado.
- A cor nunca é o único sinal: estados usam também ícone, forma ou texto.


---

# Aviso rápido

Componente do PASSI DS 1.1.0 · página "Aviso rápido" no arquivo Figma.

O aviso rápido confirma que algo aconteceu, como “Link copiado”. Ele aparece por alguns segundos, geralmente no canto da tela, e some sozinho sem interromper a pessoa.

## Aviso rápido

Aviso rápido · mensagem curta que aparece por alguns segundos, geralmente no canto inferior, para confirmar uma ação. Não use para erros que exigem decisão.

| Propriedade | Tipo | Opções | Padrão |
|---|---|---|---|
| Mensagem | Texto |  | Link copiado. |
| Ação | Texto |  | Desfazer |
| Mostrar ação | Liga/desliga |  | Desligado |
| Tipo | Variante | Neutro, Sucesso, Atenção, Erro | Neutro |

## Como usar

### Tipos

### Posição

No computador, no canto inferior direito ou centralizado na base. No celular, na base, acima da navegação.

### Modo escuro

No modo escuro o aviso fica claro, para continuar se destacando do fundo.

## Conteúdo

Como escrever os textos deste componente. Regras gerais em [conteudo/microtexto.md](../conteudo/microtexto.md) e [conteudo/glossario.md](../conteudo/glossario.md).

- Uma linha, no passado: Link copiado.
- Ofereça Desfazer quando a ação puder ser revertida.

## Acessibilidade

Meta: WCAG 2.2 AA, base da ABNT NBR 17225. Contraste, anel de foco e modos em [fundamentos/acessibilidade.md](../fundamentos/acessibilidade.md).

- Teclado: Se tiver ação, como Desfazer, ela precisa ser alcançável pelo teclado antes de o aviso sumir.
- Leitor de tela: Fica numa região que anuncia sozinha, de forma discreta (status).
- Foco: Não recebe o foco ao aparecer. Não pode cobrir o item em foco (WCAG 2.4.11).
- Cuidados: Pelo menos 5 segundos na tela, e o tempo pausa com o mouse ou o foco em cima. Nunca coloque informação importante só num aviso que some.

## Tokens usados

Fundo: cor/fundo/invertido. Texto: cor/texto/invertido. Ícones: cor/fundo/sucesso, alerta e erro. Sombra: Sombra/Grande. Canto: raio/grande.

No código, troque a barra por hífen e use o prefixo da coleção: cor/fundo/marca vira `var(--cor-fundo-marca)` e espaco/4 vira `var(--espaco-4)`.

## Faça

- Use mensagens curtas, de uma linha.
- Ofereça “Desfazer” para ações que podem ser revertidas.
- Deixe o aviso na tela por 4 a 6 segundos.

## NÃO faça

- Mostrar vários avisos empilhados.
- Usar para erros que pedem uma decisão. Use Alerta ou Janela modal.
- Colocar links importantes que somem com o aviso.

## Regras gerais

- Cores, espaços, cantos e sombras vêm sempre dos tokens (`var(--cor-…)`, `var(--espaco-…)`, `var(--raio-…)`). Nunca use códigos de cor soltos.
- O componente funciona no claro e no escuro sem mudanças: as cores mudam pelos tokens.
- Foco visível em tudo o que é clicável: anel de 2 px em `--cor-borda-foco`, afastado 2 px. Área de toque de pelo menos 24 px, e 40 px no celular.
- Elementos clicáveis têm cinco estados: padrão, hover, pressionado, foco e desabilitado.
- A cor nunca é o único sinal: estados usam também ícone, forma ou texto.


---

# Dica flutuante

Componente do PASSI DS 1.1.0 · página "Dica flutuante" no arquivo Figma.

A dica flutuante é um balão pequeno que explica um elemento quando a pessoa passa o mouse ou navega com o teclado. Ela é essencial para botões que têm só ícone.

## Dica flutuante

Dica flutuante · texto curto que aparece ao passar o mouse ou focar um elemento, explicando o que ele faz. A posição indica de que lado o balão fica em relação ao elemento.

| Propriedade | Tipo | Opções | Padrão |
|---|---|---|---|
| Texto | Texto |  | Copiar link do capítulo |
| Posição | Variante | Cima, Baixo, Esquerda, Direita | Cima |

## Como usar

### Posições

A seta aponta para o elemento. Escolha o lado com mais espaço livre.

Exemplos no Figma: Cima; Baixo; Esquerda; Direita.

### Em uso

A dica aparece sobre um botão de ícone.

### Modo escuro

No escuro a dica fica clara, mantendo o contraste.

## Conteúdo

Como escrever os textos deste componente. Regras gerais em [conteudo/microtexto.md](../conteudo/microtexto.md) e [conteudo/glossario.md](../conteudo/glossario.md).

- Até uma linha. Diga o que o elemento faz, com verbo: Copiar link do capítulo.
- Não repita o texto que já está visível.

## Acessibilidade

Meta: WCAG 2.2 AA, base da ABNT NBR 17225. Contraste, anel de foco e modos em [fundamentos/acessibilidade.md](../fundamentos/acessibilidade.md).

- Teclado: Aparece quando o elemento recebe foco e some com Esc, sem mover o foco.
- Leitor de tela: O texto da dica fica ligado ao elemento no código (aria-describedby) e é lido junto com ele.
- Foco: O foco fica sempre no elemento, nunca na dica.
- Cuidados: A pessoa consegue passar o mouse sobre a dica sem ela sumir (WCAG 1.4.13). Só texto curto: nada de links ou botões dentro.

## Tokens usados

Balão e seta: cor/fundo/invertido. Texto: cor/texto/invertido. Canto: raio/medio.

No código, troque a barra por hífen e use o prefixo da coleção: cor/fundo/marca vira `var(--cor-fundo-marca)` e espaco/4 vira `var(--espaco-4)`.

## Faça

- Use até uma linha de texto.
- Mostre também quando o elemento recebe foco pelo teclado.
- Use em todo botão que tem só ícone.

## NÃO faça

- Colocar informação essencial só na dica.
- Links ou botões dentro da dica. Para isso use Popover.
- Repetir o mesmo texto que já está visível.

## Regras gerais

- Cores, espaços, cantos e sombras vêm sempre dos tokens (`var(--cor-…)`, `var(--espaco-…)`, `var(--raio-…)`). Nunca use códigos de cor soltos.
- O componente funciona no claro e no escuro sem mudanças: as cores mudam pelos tokens.
- Foco visível em tudo o que é clicável: anel de 2 px em `--cor-borda-foco`, afastado 2 px. Área de toque de pelo menos 24 px, e 40 px no celular.
- Elementos clicáveis têm cinco estados: padrão, hover, pressionado, foco e desabilitado.
- A cor nunca é o único sinal: estados usam também ícone, forma ou texto.


---

# Popover

Componente do PASSI DS 1.1.0 · página "Popover" no arquivo Figma.

O popover é um painel pequeno que abre quando a pessoa clica em algo. Ele mostra mais informação ou ações rápidas, sem tirar a pessoa da tela em que está.

## Popover

Popover · painel pequeno que abre ao clicar em um elemento, com título, texto curto e até duas ações. Fecha ao clicar fora ou no “x”.

| Propriedade | Tipo | Opções | Padrão |
|---|---|---|---|
| Título | Texto |  | Novidade: modo escuro |
| Descrição | Texto |  | Agora todos os componentes funcionam no claro e no escuro. Troque o modo na coleção “Cor”. |
| Mostrar ações | Liga/desliga |  | Ligado |
| Pode fechar | Liga/desliga |  | Ligado |
| Seta | Variante | Cima, Baixo, Nenhuma | Cima |

## Como usar

### Variações

A seta aponta para o elemento que abriu o popover.

Exemplos no Figma: Seta para cima; Seta para baixo; Sem seta.

## Conteúdo

Como escrever os textos deste componente. Regras gerais em [conteudo/microtexto.md](../conteudo/microtexto.md) e [conteudo/glossario.md](../conteudo/glossario.md).

- Título curto e uma ou duas frases.
- Até duas ações, com verbo.

## Acessibilidade

Meta: WCAG 2.2 AA, base da ABNT NBR 17225. Contraste, anel de foco e modos em [fundamentos/acessibilidade.md](../fundamentos/acessibilidade.md).

- Teclado: Enter ou Espaço no gatilho abrem. Tab percorre o conteúdo. Esc fecha.
- Leitor de tela: O gatilho anuncia que abre um painel e se está aberto. O painel tem o título como nome.
- Foco: Ao abrir, o foco vai para o primeiro elemento do painel. Ao fechar, volta para o gatilho.
- Cuidados: Se o conteúdo for uma decisão importante que bloqueia a tela, use Janela modal.

## Tokens usados

Painel e seta: cor/fundo/superficie, borda cor/borda/padrao, Sombra/Média. Texto: cor/texto/padrao e cor/texto/secundario. Espaço: espaco/3 e espaco/5. Canto: raio/grande.

No código, troque a barra por hífen e use o prefixo da coleção: cor/fundo/marca vira `var(--cor-fundo-marca)` e espaco/4 vira `var(--espaco-4)`.

## Faça

- Mantenha o conteúdo curto: título, uma ou duas frases e até duas ações.
- Feche ao clicar fora ou apertar Esc.
- Use para apresentar novidades ou detalhes de um item.

## NÃO faça

- Formulários longos dentro do popover. Use Janela modal.
- Abrir popover só com o hover. Para isso use Dica flutuante.
- Vários popovers abertos ao mesmo tempo.

## Regras gerais

- Cores, espaços, cantos e sombras vêm sempre dos tokens (`var(--cor-…)`, `var(--espaco-…)`, `var(--raio-…)`). Nunca use códigos de cor soltos.
- O componente funciona no claro e no escuro sem mudanças: as cores mudam pelos tokens.
- Foco visível em tudo o que é clicável: anel de 2 px em `--cor-borda-foco`, afastado 2 px. Área de toque de pelo menos 24 px, e 40 px no celular.
- Elementos clicáveis têm cinco estados: padrão, hover, pressionado, foco e desabilitado.
- A cor nunca é o único sinal: estados usam também ícone, forma ou texto.


---

# Janela modal

Componente do PASSI DS 1.1.0 · página "Janela modal" no arquivo Figma.

A janela modal aparece por cima da tela e pede uma decisão ou uma informação curta antes de continuar. O fundo escurece para focar a atenção na janela.

## Janela modal

Janela modal · interrompe a tela para pedir uma decisão ou uma informação curta. Sempre com Sobreposição atrás, título claro e ação principal à direita. Tipos: Padrão (560 px), Confirmação (420 px) e Formulário (560 px).

| Propriedade | Tipo | Opções | Padrão |
|---|---|---|---|
| Título | Texto |  | Baixar o arquivo do PASSI DS |
| Descrição | Texto |  | O arquivo será duplicado na sua conta do Figma. |
| Tipo | Variante | Padrão, Confirmação, Formulário | Padrão |

## Como usar

### Tipos

Exemplos no Figma: Padrão; Confirmação; Formulário.

### Em uso

A janela aparece centralizada, com a sobreposição cobrindo o resto da tela.

## Conteúdo

Como escrever os textos deste componente. Regras gerais em [conteudo/microtexto.md](../conteudo/microtexto.md) e [conteudo/glossario.md](../conteudo/glossario.md).

- Título como pergunta ou ação: Excluir capítulo?
- Diga a consequência na descrição.
- O botão principal repete o verbo do título: Excluir capítulo.

## Acessibilidade

Meta: WCAG 2.2 AA, base da ABNT NBR 17225. Contraste, anel de foco e modos em [fundamentos/acessibilidade.md](../fundamentos/acessibilidade.md).

- Teclado: Tab e Shift+Tab ficam presos dentro da janela. Esc fecha, a não ser em decisões que exigem resposta.
- Leitor de tela: Papel dialog marcado como modal, com o título como nome e a descrição ligada. O resto da página fica inacessível enquanto a janela está aberta.
- Foco: Ao abrir, o foco vai para o primeiro campo ou para o título. Ao fechar, volta para o botão que abriu.
- Cuidados: Na janela de perigo, o foco inicial vai para Cancelar, não para Excluir. Use para decisões curtas; formulários longos merecem uma página.

## Tokens usados

Janela: cor/fundo/superficie, Sombra/Grande, raio/extra. Divisor das ações: cor/borda/padrao. Espaço: espaco/3 a espaco/6. Fundo da tela: Sobreposição (cor/fundo/sobreposicao).

No código, troque a barra por hífen e use o prefixo da coleção: cor/fundo/marca vira `var(--cor-fundo-marca)` e espaco/4 vira `var(--espaco-4)`.

## Faça

- Escreva o título como uma pergunta ou ação clara.
- Use o verbo da ação no botão: “Excluir capítulo”, não “Sim”.
- Feche com Esc, com o “x” e com “Cancelar”.
- Leve o foco do teclado para dentro da janela.

## NÃO faça

- Abrir uma modal sobre outra modal.
- Usar para mensagens que poderiam ser um Aviso rápido.
- Formulários longos dentro da modal. Prefira uma página.
- Abrir sem que a pessoa tenha pedido.

## Regras gerais

- Cores, espaços, cantos e sombras vêm sempre dos tokens (`var(--cor-…)`, `var(--espaco-…)`, `var(--raio-…)`). Nunca use códigos de cor soltos.
- O componente funciona no claro e no escuro sem mudanças: as cores mudam pelos tokens.
- Foco visível em tudo o que é clicável: anel de 2 px em `--cor-borda-foco`, afastado 2 px. Área de toque de pelo menos 24 px, e 40 px no celular.
- Elementos clicáveis têm cinco estados: padrão, hover, pressionado, foco e desabilitado.
- A cor nunca é o único sinal: estados usam também ícone, forma ou texto.


---

# Menu

Componente do PASSI DS 1.1.0 · página "Menu" no arquivo Figma.

O menu reúne ações que não cabem na tela, como editar, duplicar ou excluir. Ele abre a partir de um botão e fecha quando a pessoa escolhe uma opção ou clica fora.

## Item de menu

Item de menu · uma ação dentro de um Menu. Use o tipo Perigo para ações destrutivas e coloque-as sempre no fim, separadas por um divisor.

| Propriedade | Tipo | Opções | Padrão |
|---|---|---|---|
| Texto | Texto |  | Editar |
| Atalho | Texto |  | ⌘E |
| Mostrar ícone | Liga/desliga |  | Ligado |
| Mostrar atalho | Liga/desliga |  | Ligado |
| Trocar ícone | Troca de ícone ou componente |  |  |
| Estado | Variante | Padrão, Hover, Pressionado, Selecionado, Perigo, Desabilitado | Padrão |

## Menu

Menu · lista de ações que abre a partir de um botão (por exemplo o botão “mais opções”). Agrupe ações parecidas, use divisores entre grupos e deixe ações destrutivas no fim.

## Como usar

### Item de menu

Cada linha é uma ação. Pode ter ícone e atalho de teclado.

Exemplos no Figma: ⌘E; Padrão; Hover; Pressionado; Selecionado; Perigo; Desabilitado.

### Menu

Grupo com título, ações comuns, divisor e ação destrutiva no fim.

Exemplos no Figma: Capítulo; ⌘E; ⌘D; ⌘L; Claro; Escuro.

## Conteúdo

Como escrever os textos deste componente. Regras gerais em [conteudo/microtexto.md](../conteudo/microtexto.md) e [conteudo/glossario.md](../conteudo/glossario.md).

- Cada item começa com verbo: Editar, Duplicar, Excluir.
- Atalhos no formato do sistema: ⌘E no Mac, Ctrl+E no Windows.

## Acessibilidade

Meta: WCAG 2.2 AA, base da ABNT NBR 17225. Contraste, anel de foco e modos em [fundamentos/acessibilidade.md](../fundamentos/acessibilidade.md).

- Teclado: Enter, Espaço ou seta para baixo no botão abrem o menu. Setas percorrem os itens, Enter escolhe e Esc fecha.
- Leitor de tela: Botão que anuncia que abre um menu. Papéis menu e menuitem. O atalho de cada item é lido junto.
- Foco: Ao abrir, o foco vai para o primeiro item. Ao fechar, volta para o botão.
- Cuidados: Item de perigo, como Excluir, diz isso no texto, não só com a cor vermelha. Menus são para ações; para navegar entre páginas, use links.

## Tokens usados

Fundo: cor/fundo/superficie, cor/fundo/sutil (hover), cor/fundo/sutil-hover (pressionado). Texto: cor/texto/padrao, cor/texto/secundario, cor/texto/terciario, cor/texto/erro. Borda: cor/borda/padrao. Sombra: Sombra/Média. Canto: raio/grande (menu) e raio/pequeno (item).

No código, troque a barra por hífen e use o prefixo da coleção: cor/fundo/marca vira `var(--cor-fundo-marca)` e espaco/4 vira `var(--espaco-4)`.

## Faça

- Comece cada opção com um verbo.
- Agrupe ações relacionadas e separe grupos com divisor.
- Deixe ações destrutivas por último, em vermelho.

## NÃO faça

- Menus com mais de 10 opções sem grupos.
- Esconder no menu a ação mais usada da tela.
- Submenus dentro de submenus.

## Regras gerais

- Cores, espaços, cantos e sombras vêm sempre dos tokens (`var(--cor-…)`, `var(--espaco-…)`, `var(--raio-…)`). Nunca use códigos de cor soltos.
- O componente funciona no claro e no escuro sem mudanças: as cores mudam pelos tokens.
- Foco visível em tudo o que é clicável: anel de 2 px em `--cor-borda-foco`, afastado 2 px. Área de toque de pelo menos 24 px, e 40 px no celular.
- Elementos clicáveis têm cinco estados: padrão, hover, pressionado, foco e desabilitado.
- A cor nunca é o único sinal: estados usam também ícone, forma ou texto.


---

# Item de lista

Componente do PASSI DS 1.1.0 · página "Item de lista" no arquivo Figma.

O item de lista organiza conteúdos parecidos um embaixo do outro: capítulos, arquivos, pessoas ou configurações. Cada linha pode ter ícone, título, descrição, uma informação extra e uma seta.

## Item de lista

Item de lista · linha clicável para listas de conteúdo, configurações e resultados de busca. Largura flexível; altura mínima de 56 px.

| Propriedade | Tipo | Opções | Padrão |
|---|---|---|---|
| Título | Texto |  | Capítulo 1 · Por que agora |
| Descrição | Texto |  | 18 páginas · 12 min de leitura |
| Meta | Texto |  | Novo |
| Mostrar descrição | Liga/desliga |  | Ligado |
| Mostrar início | Liga/desliga |  | Ligado |
| Mostrar meta | Liga/desliga |  | Desligado |
| Mostrar ícone final | Liga/desliga |  | Ligado |
| Trocar ícone de início | Troca de ícone ou componente |  |  |
| Estado | Variante | Padrão, Hover, Pressionado, Selecionado, Desabilitado | Padrão |

## Como usar

### Estados

Exemplos no Figma: Padrão; Hover; Pressionado; Selecionado; Desabilitado.

### Em uso

Uma lista com divisões sutis. O item selecionado indica onde a pessoa está.

### Com informação extra

A meta mostra contagens, datas ou status curtos à direita.

## Conteúdo

Como escrever os textos deste componente. Regras gerais em [conteudo/microtexto.md](../conteudo/microtexto.md) e [conteudo/glossario.md](../conteudo/glossario.md).

- Título com a informação mais importante; descrição com o detalhe.
- Meta curta: datas, contagens ou status em uma ou duas palavras.

## Acessibilidade

Meta: WCAG 2.2 AA, base da ABNT NBR 17225. Contraste, anel de foco e modos em [fundamentos/acessibilidade.md](../fundamentos/acessibilidade.md).

- Teclado: Quando a linha leva a outro lugar, ela é um link e recebe Tab. Botões dentro da linha recebem Tab separados.
- Leitor de tela: Itens ficam numa lista (ul ou ol). O título é o nome do link; a descrição e a informação extra são lidas depois.
- Foco: Anel de foco em volta da linha quando ela é clicável.
- Cuidados: A seta no fim é decorativa. O item selecionado é marcado em texto ou no código, não só pelo fundo.

## Tokens usados

Fundo: cor/fundo/sutil (hover), cor/fundo/sutil-hover (pressionado), cor/fundo/marca-sutil, cor/fundo/superficie. Texto: cor/texto/padrao, cor/texto/secundario, cor/texto/terciario, cor/texto/marca. Espaço: espaco/3. Canto: raio/medio.

No código, troque a barra por hífen e use o prefixo da coleção: cor/fundo/marca vira `var(--cor-fundo-marca)` e espaco/4 vira `var(--espaco-4)`.

## Faça

- Mantenha a mesma estrutura em todos os itens da lista.
- Use a seta quando o item abre outra tela.
- Coloque a informação mais importante no título.

## NÃO faça

- Misturar itens com e sem ícone na mesma lista.
- Descrições longas, com mais de uma linha.
- Esconder ações importantes só no hover.

## Regras gerais

- Cores, espaços, cantos e sombras vêm sempre dos tokens (`var(--cor-…)`, `var(--espaco-…)`, `var(--raio-…)`). Nunca use códigos de cor soltos.
- O componente funciona no claro e no escuro sem mudanças: as cores mudam pelos tokens.
- Foco visível em tudo o que é clicável: anel de 2 px em `--cor-borda-foco`, afastado 2 px. Área de toque de pelo menos 24 px, e 40 px no celular.
- Elementos clicáveis têm cinco estados: padrão, hover, pressionado, foco e desabilitado.
- A cor nunca é o único sinal: estados usam também ícone, forma ou texto.


---

# Barra de ferramentas

Componente do PASSI DS 1.1.0 · página "Barra de ferramentas" no arquivo Figma.

A barra de ferramentas reúne ações rápidas sobre um conteúdo, como editar, copiar ou compartilhar. Os botões de ícone ficam agrupados por assunto, separados por pequenos divisores.

## Barra de ferramentas

Barra de ferramentas · agrupa ações rápidas sobre um conteúdo. Separe grupos de ações com divisores. A versão Seleção aparece flutuando quando há itens selecionados.

| Propriedade | Tipo | Opções | Padrão |
|---|---|---|---|
| Contagem | Texto |  | 3 capítulos selecionados |
| Tipo | Variante | Editor, Seleção, Vertical | Editor |

## Como usar

### Editor

Barra horizontal sobre um documento. Grupos: desfazer, edição, saída e mais opções.

### Seleção

Barra escura que flutua quando a pessoa seleciona itens. Mostra a contagem e as ações em lote.

### Vertical

Barra lateral compacta para navegação rápida.

## Conteúdo

Como escrever os textos deste componente. Regras gerais em [conteudo/microtexto.md](../conteudo/microtexto.md) e [conteudo/glossario.md](../conteudo/glossario.md).

- Cada botão de ícone tem nome com verbo na dica flutuante.
- Na seleção, diga quantos itens estão marcados: 3 capítulos selecionados.

## Acessibilidade

Meta: WCAG 2.2 AA, base da ABNT NBR 17225. Contraste, anel de foco e modos em [fundamentos/acessibilidade.md](../fundamentos/acessibilidade.md).

- Teclado: Tab entra na barra uma vez. Setas passam de um botão para outro. Tab sai da barra.
- Leitor de tela: Papel toolbar com um nome, por exemplo Formatação do texto. Cada botão de ícone tem nome em texto.
- Foco: Anel de foco no botão ativo. Os divisores não recebem foco.
- Cuidados: Todo botão com Dica flutuante. Botões de alternar, como negrito, anunciam se estão ligados.

## Tokens usados

Fundo: cor/fundo/superficie. Borda e divisores: cor/borda/padrao. Sombra: Sombra/Pequena ou Sombra/Grande (seleção). Espaço: espaco/1, espaco/2. Canto: raio/grande.

No código, troque a barra por hífen e use o prefixo da coleção: cor/fundo/marca vira `var(--cor-fundo-marca)` e espaco/4 vira `var(--espaco-4)`.

## Faça

- Agrupe ações relacionadas e separe com divisores.
- Mostre dica flutuante com o nome de cada ícone.
- Coloque as ações mais usadas primeiro.

## NÃO faça

- Mais de 10 ícones na mesma barra. Mova o resto para “mais opções”.
- Ícones sem nome acessível.
- Misturar ações de navegação com ações de edição.

## Regras gerais

- Cores, espaços, cantos e sombras vêm sempre dos tokens (`var(--cor-…)`, `var(--espaco-…)`, `var(--raio-…)`). Nunca use códigos de cor soltos.
- O componente funciona no claro e no escuro sem mudanças: as cores mudam pelos tokens.
- Foco visível em tudo o que é clicável: anel de 2 px em `--cor-borda-foco`, afastado 2 px. Área de toque de pelo menos 24 px, e 40 px no celular.
- Elementos clicáveis têm cinco estados: padrão, hover, pressionado, foco e desabilitado.
- A cor nunca é o único sinal: estados usam também ícone, forma ou texto.


---

# Sobreposição

Componente do PASSI DS 1.1.0 · página "Sobreposição" no arquivo Figma.

A sobreposição é uma camada escura e semitransparente que cobre a tela quando uma janela modal abre. Ela tira o foco do resto da página e mostra que a pessoa precisa responder antes de continuar.

## Sobreposição

Sobreposição · camada escura que cobre a tela atrás de janelas modais e gavetas, para focar a atenção. Estique até o tamanho da tela. A versão Desfocada também borra o conteúdo de trás.

| Propriedade | Tipo | Opções | Padrão |
|---|---|---|---|
| Tipo | Variante | Escura, Desfocada | Escura |

## Como usar

### Tipos

Escura escurece a tela. Desfocada também borra o fundo, útil quando o conteúdo de trás é muito chamativo.

Exemplos no Figma: Escura; Desfocada.

## Conteúdo

Como escrever os textos deste componente. Regras gerais em [conteudo/microtexto.md](../conteudo/microtexto.md) e [conteudo/glossario.md](../conteudo/glossario.md).

- Não tem texto. O que importa está na janela por cima.

## Acessibilidade

Meta: WCAG 2.2 AA, base da ABNT NBR 17225. Contraste, anel de foco e modos em [fundamentos/acessibilidade.md](../fundamentos/acessibilidade.md).

- Teclado: Não recebe foco. Clicar nela pode fechar a janela, mas Esc e o botão Fechar também precisam funcionar.
- Leitor de tela: Fica escondida do leitor de tela. O que importa é a Janela modal sobre ela.
- Foco: Nenhum.
- Cuidados: Escurecer o fundo ajuda quem enxerga; para o leitor de tela, quem isola o conteúdo é a marcação de janela modal.

## Tokens usados

cor/fundo/sobreposicao (preto com 60% de opacidade), igual nos modos claro e escuro.

No código, troque a barra por hífen e use o prefixo da coleção: cor/fundo/marca vira `var(--cor-fundo-marca)` e espaco/4 vira `var(--espaco-4)`.

## Faça

- Use sempre atrás de janelas modais e gavetas laterais.
- Feche a janela ao clicar na sobreposição, quando a ação não for crítica.

## NÃO faça

- Usar a sobreposição sem nada por cima.
- Deixar o fundo tão escuro que a pessoa perca o contexto.

## Regras gerais

- Cores, espaços, cantos e sombras vêm sempre dos tokens (`var(--cor-…)`, `var(--espaco-…)`, `var(--raio-…)`). Nunca use códigos de cor soltos.
- O componente funciona no claro e no escuro sem mudanças: as cores mudam pelos tokens.
- Foco visível em tudo o que é clicável: anel de 2 px em `--cor-borda-foco`, afastado 2 px. Área de toque de pelo menos 24 px, e 40 px no celular.
- Elementos clicáveis têm cinco estados: padrão, hover, pressionado, foco e desabilitado.
- A cor nunca é o único sinal: estados usam também ícone, forma ou texto.


---

# Atalho de teclado

Componente do PASSI DS 1.1.0 · página "Atalho de teclado" no arquivo Figma.

O atalho de teclado mostra quais teclas fazem uma ação mais rápido, como ⌘ + K para buscar. Aparece em menus, dicas flutuantes e na documentação.

## Tecla

Tecla · uma tecla do teclado. Combine várias no componente Atalho de teclado.

| Propriedade | Tipo | Opções | Padrão |
|---|---|---|---|
| Tecla | Texto |  | K |
| Tamanho | Variante | P, M | P |

## Atalho de teclado

Atalho de teclado · mostra a combinação de teclas para uma ação, em menus, dicas flutuantes e documentação. Troque o texto de cada tecla.

| Propriedade | Tipo | Opções | Padrão |
|---|---|---|---|
| Teclas | Variante | 1, 2, 3 | 1 |

## Como usar

### Combinações

Exemplos no Figma: Esc; ⌘; K; ⌘ + K; Ctrl; Shift; P; Ctrl + Shift + P.

### Tamanhos da tecla

Exemplos no Figma: K; P; M.

### Em uso

Dentro de um texto de ajuda.

Exemplos no Figma: ⌘; K.

### Modo escuro

Exemplos no Figma: Esc; ⌘; K; Ctrl; Shift; P.

## Conteúdo

Como escrever os textos deste componente. Regras gerais em [conteudo/microtexto.md](../conteudo/microtexto.md) e [conteudo/glossario.md](../conteudo/glossario.md).

- Use os nomes do sistema: ⌘ no Mac, Ctrl no Windows.
- Para leitor de tela, escreva por extenso: Command mais K.

## Acessibilidade

Meta: WCAG 2.2 AA, base da ABNT NBR 17225. Contraste, anel de foco e modos em [fundamentos/acessibilidade.md](../fundamentos/acessibilidade.md).

- Teclado: Não recebe foco: só mostra a combinação.
- Leitor de tela: Leia as teclas por extenso, por exemplo Command mais K, e não o símbolo ⌘.
- Foco: Nenhum.
- Cuidados: Atalhos de uma letra só precisam poder ser desligados ou trocados (WCAG 2.1.4). Mostre a tecla certa para cada sistema: ⌘ no Mac, Ctrl no Windows.

## Tokens usados

Tecla: cor/fundo/superficie, borda cor/borda/forte (2 px embaixo, dando volume), texto IBM Plex Mono em cor/texto/padrao. Canto: raio/pequeno.

No código, troque a barra por hífen e use o prefixo da coleção: cor/fundo/marca vira `var(--cor-fundo-marca)` e espaco/4 vira `var(--espaco-4)`.

## Faça

- Use os símbolos do sistema da pessoa: ⌘ no Mac, Ctrl no Windows.
- Mostre atalhos só para ações frequentes.

## NÃO faça

- Atalhos que conflitam com os do navegador.
- Depender só do atalho, sem outra forma de fazer a ação.

## Regras gerais

- Cores, espaços, cantos e sombras vêm sempre dos tokens (`var(--cor-…)`, `var(--espaco-…)`, `var(--raio-…)`). Nunca use códigos de cor soltos.
- O componente funciona no claro e no escuro sem mudanças: as cores mudam pelos tokens.
- Foco visível em tudo o que é clicável: anel de 2 px em `--cor-borda-foco`, afastado 2 px. Área de toque de pelo menos 24 px, e 40 px no celular.
- Elementos clicáveis têm cinco estados: padrão, hover, pressionado, foco e desabilitado.
- A cor nunca é o único sinal: estados usam também ícone, forma ou texto.


---

# Divisor

Componente do PASSI DS 1.1.0 · página "Divisor" no arquivo Figma.

O divisor é uma linha fina que separa grupos de conteúdo. Use com moderação: espaço em branco costuma separar melhor do que linhas.

## Divisor

Divisor · linha fina que separa grupos de conteúdo. Estique até a largura (ou altura) desejada.

| Propriedade | Tipo | Opções | Padrão |
|---|---|---|---|
| Texto | Texto |  | ou |
| Tipo | Variante | Horizontal, Com texto, Vertical | Horizontal |

## Como usar

### Tipos

## Conteúdo

Como escrever os textos deste componente. Regras gerais em [conteudo/microtexto.md](../conteudo/microtexto.md) e [conteudo/glossario.md](../conteudo/glossario.md).

- O divisor com texto usa uma ou duas palavras em minúsculas: ou.

## Acessibilidade

Meta: WCAG 2.2 AA, base da ABNT NBR 17225. Contraste, anel de foco e modos em [fundamentos/acessibilidade.md](../fundamentos/acessibilidade.md).

- Teclado: Não recebe foco.
- Leitor de tela: Linha decorativa fica escondida do leitor. Quando separa seções de verdade, use títulos, não só a linha. O divisor com texto lê o texto.
- Foco: Nenhum.
- Cuidados: A linha não precisa de contraste mínimo porque é decorativa. Nenhuma informação pode depender só dela.

## Tokens usados

Linha: cor/borda/padrao, 1 px. Texto: cor/texto/terciario.

No código, troque a barra por hífen e use o prefixo da coleção: cor/fundo/marca vira `var(--cor-fundo-marca)` e espaco/4 vira `var(--espaco-4)`.

## Faça

- Separe grupos diferentes de conteúdo.
- Use o divisor com texto entre opções de login, como “ou continue com”.

## NÃO faça

- Colocar linha entre todos os itens de uma lista curta.
- Usar divisores grossos ou coloridos.

## Regras gerais

- Cores, espaços, cantos e sombras vêm sempre dos tokens (`var(--cor-…)`, `var(--espaco-…)`, `var(--raio-…)`). Nunca use códigos de cor soltos.
- O componente funciona no claro e no escuro sem mudanças: as cores mudam pelos tokens.
- Foco visível em tudo o que é clicável: anel de 2 px em `--cor-borda-foco`, afastado 2 px. Área de toque de pelo menos 24 px, e 40 px no celular.
- Elementos clicáveis têm cinco estados: padrão, hover, pressionado, foco e desabilitado.
- A cor nunca é o único sinal: estados usam também ícone, forma ou texto.


---

# Botão em bloco

Componente do PASSI DS 1.1.0 · página "Botão em bloco" no arquivo Figma.

O botão em bloco transforma uma escolha importante em cartões grandes e fáceis de tocar. Cada opção tem ícone, título e uma frase curta, e só uma fica selecionada por vez.

## Botão em bloco

Botão em bloco · opção grande e clicável, com ícone, título e descrição. Usado para escolhas importantes, como o tipo de conta ou o ponto de partida. Funciona como um rádio visual: só um selecionado por grupo.

| Propriedade | Tipo | Opções | Padrão |
|---|---|---|---|
| Título | Texto |  | Ler o livro |
| Descrição | Texto |  | Comece pelos capítulos, no seu ritmo. |
| Mostrar descrição | Liga/desliga |  | Ligado |
| Mostrar marcação | Liga/desliga |  | Ligado |
| Ícone | Troca de ícone ou componente |  |  |
| Estado | Variante | Padrão, Hover, Pressionado, Selecionado, Foco, Desabilitado | Padrão |

## Como usar

### Estados

Exemplos no Figma: Padrão; Hover; Pressionado; Selecionado; Foco; Desabilitado.

### Em uso

Pergunta com três caminhos. O selecionado mostra a borda azul e a marcação preenchida.

## Conteúdo

Como escrever os textos deste componente. Regras gerais em [conteudo/microtexto.md](../conteudo/microtexto.md) e [conteudo/glossario.md](../conteudo/glossario.md).

- Título curto com a escolha; descrição de uma linha com o que acontece depois.
- Opções paralelas, no mesmo formato.

## Acessibilidade

Meta: WCAG 2.2 AA, base da ABNT NBR 17225. Contraste, anel de foco e modos em [fundamentos/acessibilidade.md](../fundamentos/acessibilidade.md).

- Teclado: Funciona como um grupo de rádios: Tab entra no grupo, setas mudam a opção.
- Leitor de tela: Papel radiogroup com nome e cada bloco como radio. O nome é o título; a descrição é lida junto.
- Foco: Borda azul de 2 px no bloco que recebe o teclado.
- Cuidados: O bloco selecionado se diferencia também pela marcação e pela borda, não só pelo fundo azul claro.

## Tokens usados

Fundo: cor/fundo/superficie, cor/fundo/sutil (hover), cor/fundo/sutil-hover (pressionado), cor/fundo/marca-sutil. Borda: cor/borda/padrao, cor/borda/forte (hover), cor/borda/controle (pressionado), cor/borda/marca (2 px quando selecionado). Ícone: cor/texto/marca. Canto: raio/grande.

No código, troque a barra por hífen e use o prefixo da coleção: cor/fundo/marca vira `var(--cor-fundo-marca)` e espaco/4 vira `var(--espaco-4)`.

## Faça

- Use de 2 a 4 opções lado a lado.
- Escreva títulos curtos e descrições de uma linha.
- Mostre qual opção está selecionada com mais de um sinal: borda, cor e marcação.

## NÃO faça

- Usar para ações simples. Para isso use Botão.
- Opções com textos muito diferentes de tamanho.
- Mais de uma opção selecionada quando a escolha é única.

## Regras gerais

- Cores, espaços, cantos e sombras vêm sempre dos tokens (`var(--cor-…)`, `var(--espaco-…)`, `var(--raio-…)`). Nunca use códigos de cor soltos.
- O componente funciona no claro e no escuro sem mudanças: as cores mudam pelos tokens.
- Foco visível em tudo o que é clicável: anel de 2 px em `--cor-borda-foco`, afastado 2 px. Área de toque de pelo menos 24 px, e 40 px no celular.
- Elementos clicáveis têm cinco estados: padrão, hover, pressionado, foco e desabilitado.
- A cor nunca é o único sinal: estados usam também ícone, forma ou texto.


---

# Seletor de cor

Componente do PASSI DS 1.1.0 · página "Seletor de cor" no arquivo Figma.

O seletor de cor deixa a pessoa escolher uma cor. Na maioria dos casos, amostras prontas bastam e evitam combinações ruins. O painel completo serve para quem precisa de qualquer cor.

## Amostra de cor

Amostra de cor · uma cor para escolher. Troque o preenchimento do círculo interno pela cor desejada.

| Propriedade | Tipo | Opções | Padrão |
|---|---|---|---|
| Estado | Variante | Padrão, Hover, Pressionado, Selecionada | Padrão |

## Seletor de cor

Seletor de cor · Amostras (escolha rápida entre cores definidas), Campo (mostra a cor e o código) e Painel (escolha livre com saturação, matiz, código hexadecimal, opacidade e conta-gotas).

| Propriedade | Tipo | Opções | Padrão |
|---|---|---|---|
| Tipo | Variante | Amostras, Campo, Painel | Amostras |

## Como usar

### Tipos

Prefira Amostras. Use o Painel só quando a pessoa realmente precisar de qualquer cor, como em ferramentas de criação.

Exemplos no Figma: Amostras; #2544EC; Campo; 100%; Cores do sistema; Painel.

### Amostra de cor

Exemplos no Figma: Padrão; Hover; Pressionado; Selecionada.

### Modo escuro

Exemplos no Figma: #2544EC; 100%; Cores do sistema.

## Conteúdo

Como escrever os textos deste componente. Regras gerais em [conteudo/microtexto.md](../conteudo/microtexto.md) e [conteudo/glossario.md](../conteudo/glossario.md).

- Dê nome às amostras: Azul da marca.
- Mostre o código da cor para quem precisa copiar.

## Acessibilidade

Meta: WCAG 2.2 AA, base da ABNT NBR 17225. Contraste, anel de foco e modos em [fundamentos/acessibilidade.md](../fundamentos/acessibilidade.md).

- Teclado: Tab entra nas amostras; setas passam de uma amostra para outra; Enter ou Espaço escolhem. No painel completo, o campo de código da cor é a alternativa ao arrasto.
- Leitor de tela: Cada amostra tem o nome da cor em texto, por exemplo Azul da marca, e anuncia se está selecionada.
- Foco: Anel de foco na amostra.
- Cuidados: A escolha nunca depende só de enxergar a cor: mostre o nome e o código. Avise quando a cor escolhida tiver pouco contraste com o texto.

## Tokens usados

Amostra: borda cor/borda/marca (selecionada), cor/borda/forte (hover) e cor/borda/controle (pressionado). Painel: cor/fundo/superficie, Sombra/Média, raio/grande. Gradientes de saturação e matiz são ilustrativos.

No código, troque a barra por hífen e use o prefixo da coleção: cor/fundo/marca vira `var(--cor-fundo-marca)` e espaco/4 vira `var(--espaco-4)`.

## Faça

- Ofereça amostras com as cores da marca antes da escolha livre.
- Mostre o código da cor para quem precisa copiar.
- Avise quando a cor escolhida tiver pouco contraste com o texto.

## NÃO faça

- Depender só da cor para identificar as amostras. Dê nome a cada uma na dica flutuante.
- Painéis de cor em formulários comuns.
- Esconder a cor atual depois da escolha.

## Regras gerais

- Cores, espaços, cantos e sombras vêm sempre dos tokens (`var(--cor-…)`, `var(--espaco-…)`, `var(--raio-…)`). Nunca use códigos de cor soltos.
- O componente funciona no claro e no escuro sem mudanças: as cores mudam pelos tokens.
- Foco visível em tudo o que é clicável: anel de 2 px em `--cor-borda-foco`, afastado 2 px. Área de toque de pelo menos 24 px, e 40 px no celular.
- Elementos clicáveis têm cinco estados: padrão, hover, pressionado, foco e desabilitado.
- A cor nunca é o único sinal: estados usam também ícone, forma ou texto.


---

# Campo com sugestões

Componente do PASSI DS 1.1.0 · página "Campo com sugestões" no arquivo Figma.

O campo com sugestões junta um campo de texto com uma lista. A pessoa começa a digitar e o sistema mostra só as opções que combinam, destacando o trecho digitado. É ideal para listas longas, como cidades ou temas.

## Campo com sugestões

Campo com sugestões · campo onde a pessoa digita e escolhe entre opções filtradas, com o trecho digitado em negrito. Aceita uma ou várias escolhas (como etiquetas) e oferece criar uma opção nova quando nada é encontrado.

| Propriedade | Tipo | Opções | Padrão |
|---|---|---|---|
| Estado | Variante | Vazio, Digitando, Várias escolhas, Sem resultados | Vazio |

## Como usar

### Estados

Exemplos no Figma: Vazio; Digitando; Várias escolhas; Sem resultados.

### Componentes usados

Etiqueta (escolhas múltiplas) e ícones. Campo com as mesmas cores do Campo de texto; lista com cor/fundo/superficie, Sombra/Média e raio/grande.

## Conteúdo

Como escrever os textos deste componente. Regras gerais em [conteudo/microtexto.md](../conteudo/microtexto.md) e [conteudo/glossario.md](../conteudo/glossario.md).

- Sem resultados, diga isso e ofereça saída: Nenhuma cidade com esse nome. Confira a grafia.
- Opção de criar novo diz o que será criado: Criar o tema Governança.

## Acessibilidade

Meta: WCAG 2.2 AA, base da ABNT NBR 17225. Contraste, anel de foco e modos em [fundamentos/acessibilidade.md](../fundamentos/acessibilidade.md).

- Teclado: A pessoa digita; seta para baixo entra na lista; setas percorrem; Enter escolhe; Esc fecha e mantém o texto.
- Leitor de tela: Papel combobox com lista listbox. Anuncie quantas sugestões apareceram, por exemplo 5 resultados, e a sugestão ativa.
- Foco: O foco fica no campo enquanto as setas destacam as sugestões. Ao escolher, o foco continua no campo.
- Cuidados: O trecho destacado em negrito não é a única pista: a lista também anuncia a quantidade. Sem resultados, diga isso em texto.

## Faça

- Comece a sugerir a partir da primeira ou segunda letra.
- Destaque em negrito o trecho que combina com o que foi digitado.
- Permita navegar pelas opções com as setas do teclado.
- Ofereça criar uma opção nova quando fizer sentido.

## NÃO faça

- Usar para listas curtas, com menos de 7 opções. Prefira Seleção ou Rádio.
- Apagar o que a pessoa digitou ao abrir a lista.
- Aceitar textos que não estão na lista sem avisar.

## Regras gerais

- Cores, espaços, cantos e sombras vêm sempre dos tokens (`var(--cor-…)`, `var(--espaco-…)`, `var(--raio-…)`). Nunca use códigos de cor soltos.
- O componente funciona no claro e no escuro sem mudanças: as cores mudam pelos tokens.
- Foco visível em tudo o que é clicável: anel de 2 px em `--cor-borda-foco`, afastado 2 px. Área de toque de pelo menos 24 px, e 40 px no celular.
- Elementos clicáveis têm cinco estados: padrão, hover, pressionado, foco e desabilitado.
- A cor nunca é o único sinal: estados usam também ícone, forma ou texto.


---

# Índice alfabético

Componente do PASSI DS 1.1.0 · página "Índice alfabético" no arquivo Figma.

O índice alfabético leva direto a uma letra em listas longas, como glossários e contatos. No computador, é uma linha de letras acima da lista. No celular, é uma coluna na lateral, em que a pessoa toca ou arrasta sobre a letra.

## Índice alfabético

Índice alfabético · letras para pular direto a uma seção de listas longas em ordem alfabética, como glossários e contatos. Horizontal no computador, acima da lista, com a letra atual marcada. Vertical no celular, na lateral; ao arrastar, a letra aparece ampliada ao lado. Letras sem conteúdo ficam apagadas.

| Propriedade | Tipo | Opções | Padrão |
|---|---|---|---|
| Orientação | Variante | Vertical, Horizontal | Vertical |
| Estado | Variante | Padrão, Arrastando, Letra atual | Padrão |

## Como usar

### Computador e celular

No computador, use a versão horizontal, acima da lista: cada letra é um link de 32 px, e a letra da seção que está na tela fica marcada enquanto a pessoa rola. No celular, use a versão vertical, na lateral da lista, com toque e arrasto.

Exemplos no Figma: Computador · Padrão; Computador · Letra atual.

### Estados

Letras com conteúdo ficam em azul; letras sem conteúdo ficam apagadas. No celular, a letra aparece ampliada enquanto a pessoa arrasta.

Exemplos no Figma: Celular · Padrão; Celular · Arrastando.

### Em uso

Glossário do livro com o índice na lateral.

Exemplos no Figma: A; B; C; D; G.

## Conteúdo

Como escrever os textos deste componente. Regras gerais em [conteudo/microtexto.md](../conteudo/microtexto.md) e [conteudo/glossario.md](../conteudo/glossario.md).

- Letras maiúsculas, sem acento: A, B, C.
- Para leitor de tela, diga a seção: Ir para a letra G.

## Acessibilidade

Meta: WCAG 2.2 AA, base da ABNT NBR 17225. Contraste, anel de foco e modos em [fundamentos/acessibilidade.md](../fundamentos/acessibilidade.md).

- Teclado: Cada letra com conteúdo é um link que leva à seção. No computador, Tab passa pelas letras e Enter abre a seção. Letras sem conteúdo não recebem foco.
- Leitor de tela: Fica numa navegação com o nome Índice alfabético. Letras sem conteúdo são anunciadas como indisponíveis ou ficam fora da leitura.
- Foco: Ao escolher uma letra, o foco vai para o título daquela seção.
- Cuidados: No celular, arrastar sobre as letras é atalho: tocar em cada letra precisa funcionar sozinho (WCAG 2.5.7). Cada letra tem área de toque de 24 px no celular e 32 px no computador.

## Tokens usados

Letras com conteúdo: cor/texto/marca. Sem conteúdo: cor/texto/terciario. Letra ativa e destaque: cor/fundo/marca com cor/texto/sobre-marca. Trilho ativo: cor/fundo/sutil. Horizontal: letra atual com cor/fundo/marca-sutil e sublinhado, canto raio/medio.

No código, troque a barra por hífen e use o prefixo da coleção: cor/fundo/marca vira `var(--cor-fundo-marca)` e espaco/4 vira `var(--espaco-4)`.

## Faça

- Use em listas com mais de 50 itens em ordem alfabética.
- Apague as letras que não têm conteúdo.
- Mostre a letra ampliada enquanto a pessoa arrasta.
- No computador, use a versão horizontal acima da lista.

## NÃO faça

- Usar em listas curtas ou fora de ordem alfabética.
- Letras pequenas demais para tocar.
- Esconder a busca: o índice complementa, não substitui.
- Usar a versão vertical, com arrasto, no computador.

## Regras gerais

- Cores, espaços, cantos e sombras vêm sempre dos tokens (`var(--cor-…)`, `var(--espaco-…)`, `var(--raio-…)`). Nunca use códigos de cor soltos.
- O componente funciona no claro e no escuro sem mudanças: as cores mudam pelos tokens.
- Foco visível em tudo o que é clicável: anel de 2 px em `--cor-borda-foco`, afastado 2 px. Área de toque de pelo menos 24 px, e 40 px no celular.
- Elementos clicáveis têm cinco estados: padrão, hover, pressionado, foco e desabilitado.
- A cor nunca é o único sinal: estados usam também ícone, forma ou texto.


---

# Rótulo informativo

Componente do PASSI DS 1.1.0 · página "Rótulo informativo" no arquivo Figma.

O rótulo informativo dá nome a um campo ou a um número e oferece uma explicação curta num ícone de ajuda, sem poluir a tela. Também indica se o campo é obrigatório ou opcional.

## Rótulo informativo

Rótulo informativo · nome de um campo ou dado com ícone que abre uma dica curta. Mostra também se o campo é obrigatório (*) ou opcional.

| Propriedade | Tipo | Opções | Padrão |
|---|---|---|---|
| Texto | Texto |  | Orçamento anual |
| Tipo | Variante | Com ícone, Obrigatório, Opcional, Com dica aberta | Com ícone |

## Como usar

### Tipos

Exemplos no Figma: Com ícone; Obrigatório; Opcional; Com dica aberta.

### Em uso

Sobre um campo de texto e sobre um número de painel.

## Conteúdo

Como escrever os textos deste componente. Regras gerais em [conteudo/microtexto.md](../conteudo/microtexto.md) e [conteudo/glossario.md](../conteudo/glossario.md).

- A dica explica em uma ou duas frases como o dado é calculado ou para que serve.
- Escreva opcional por extenso quando a maioria dos campos for obrigatória.

## Acessibilidade

Meta: WCAG 2.2 AA, base da ABNT NBR 17225. Contraste, anel de foco e modos em [fundamentos/acessibilidade.md](../fundamentos/acessibilidade.md).

- Teclado: O ícone de ajuda é um botão e recebe Tab; Enter ou Espaço mostram a explicação.
- Leitor de tela: O rótulo é o nome do campo. Obrigatório e opcional são lidos em texto, não só pelo asterisco. O botão de ajuda tem o nome Mais informações sobre, seguido do rótulo.
- Foco: Anel de foco no ícone de ajuda.
- Cuidados: Informação necessária para preencher o campo fica visível, não escondida na ajuda.

## Tokens usados

Texto: cor/texto/padrao e cor/texto/secundario (opcional). Obrigatório: cor/texto/erro. Ícone: cor/texto/secundario e cor/texto/marca quando ativo. Dica: componente Dica flutuante.

No código, troque a barra por hífen e use o prefixo da coleção: cor/fundo/marca vira `var(--cor-fundo-marca)` e espaco/4 vira `var(--espaco-4)`.

## Faça

- Use a dica para explicar termos técnicos ou como um número é calculado.
- Escreva dicas de uma ou duas frases.
- Marque o que é opcional quando a maioria dos campos for obrigatória.

## NÃO faça

- Esconder na dica uma informação necessária para preencher o campo.
- Colocar ícone de ajuda em todos os rótulos.
- Usar só o asterisco vermelho sem explicar o que significa no formulário.

## Regras gerais

- Cores, espaços, cantos e sombras vêm sempre dos tokens (`var(--cor-…)`, `var(--espaco-…)`, `var(--raio-…)`). Nunca use códigos de cor soltos.
- O componente funciona no claro e no escuro sem mudanças: as cores mudam pelos tokens.
- Foco visível em tudo o que é clicável: anel de 2 px em `--cor-borda-foco`, afastado 2 px. Área de toque de pelo menos 24 px, e 40 px no celular.
- Elementos clicáveis têm cinco estados: padrão, hover, pressionado, foco e desabilitado.
- A cor nunca é o único sinal: estados usam também ícone, forma ou texto.


---

# Lista em árvore

Componente do PASSI DS 1.1.0 · página "Lista em árvore" no arquivo Figma.

A lista em árvore mostra conteúdos organizados em níveis, como pastas e arquivos ou partes e capítulos de um livro. Cada nível fica um pouco mais para dentro, e as pastas abrem e fecham.

## Nó da árvore

Nó da árvore · uma linha da Lista em árvore. Pastas abrem e fecham; itens não têm seta. Use o recuo (preenchimento à esquerda) para indicar o nível.

| Propriedade | Tipo | Opções | Padrão |
|---|---|---|---|
| Texto | Texto |  | Parte 3 · Governar |
| Mostrar quantidade | Liga/desliga |  | Ligado |
| Tipo | Variante | Pasta fechada, Pasta aberta, Item | Pasta fechada |
| Estado | Variante | Padrão, Hover, Pressionado, Selecionado | Padrão |

## Lista em árvore

Lista em árvore · mostra conteúdos organizados em níveis, como pastas e arquivos ou partes e capítulos. Exemplo pronto com 3 níveis.

## Como usar

### Em uso

Partes e capítulos do livro, com o capítulo atual selecionado.

### Nó da árvore

Exemplos no Figma: Pasta fechada · Padrão; Pasta fechada · Hover; Pasta fechada · Pressionado; Pasta fechada · Selecionado; Pasta aberta · Padrão; Pasta aberta · Hover; Pasta aberta · Pressionado; Pasta aberta · Selecionado; Item · Padrão; Item · Hover; Item · Pressionado; Item · Selecionado.

## Conteúdo

Como escrever os textos deste componente. Regras gerais em [conteudo/microtexto.md](../conteudo/microtexto.md) e [conteudo/glossario.md](../conteudo/glossario.md).

- Nomes curtos, que caibam em uma linha.
- Mostre a quantidade dentro de pastas quando ajudar.

## Acessibilidade

Meta: WCAG 2.2 AA, base da ABNT NBR 17225. Contraste, anel de foco e modos em [fundamentos/acessibilidade.md](../fundamentos/acessibilidade.md).

- Teclado: Setas para cima e para baixo passam pelos itens; seta para a direita abre uma pasta e para a esquerda fecha; Enter abre o item.
- Leitor de tela: Papéis tree e treeitem. Anuncia o nível, se a pasta está aberta ou fechada e a quantidade de itens.
- Foco: Só um item da árvore recebe Tab; dentro dela, as setas movem o foco.
- Cuidados: O recuo não é a única pista de nível: o leitor anuncia o nível e o ícone de pasta muda entre aberta e fechada.

## Tokens usados

Selecionado: cor/fundo/marca-sutil e cor/texto/marca. Hover: cor/fundo/sutil. Pressionado: cor/fundo/sutil-hover. Ícones: cor/texto/secundario. Recuo de 20 px por nível. Canto: raio/pequeno.

No código, troque a barra por hífen e use o prefixo da coleção: cor/fundo/marca vira `var(--cor-fundo-marca)` e espaco/4 vira `var(--espaco-4)`.

## Faça

- Limite a três níveis de profundidade.
- Mostre quantos itens há dentro de cada pasta.
- Mantenha aberto o caminho até o item selecionado.
- Permita abrir e fechar com as setas do teclado.

## NÃO faça

- Árvores com muitos níveis, que viram labirinto.
- Usar árvore para listas simples, sem níveis.
- Nomes longos que quebram em várias linhas.

## Regras gerais

- Cores, espaços, cantos e sombras vêm sempre dos tokens (`var(--cor-…)`, `var(--espaco-…)`, `var(--raio-…)`). Nunca use códigos de cor soltos.
- O componente funciona no claro e no escuro sem mudanças: as cores mudam pelos tokens.
- Foco visível em tudo o que é clicável: anel de 2 px em `--cor-borda-foco`, afastado 2 px. Área de toque de pelo menos 24 px, e 40 px no celular.
- Elementos clicáveis têm cinco estados: padrão, hover, pressionado, foco e desabilitado.
- A cor nunca é o único sinal: estados usam também ícone, forma ou texto.


---

# Proporção de imagem

Componente do PASSI DS 1.1.0 · página "Proporção de imagem" no arquivo Figma.

A proporção define a relação entre largura e altura de uma imagem ou vídeo. Usar sempre as mesmas proporções deixa as grades alinhadas e evita imagens cortadas de jeitos diferentes em cada tela.

## Proporção de imagem

Proporção de imagem · molduras com proporções fixas para imagens e vídeos, garantindo que tudo fique alinhado na grade. Troque o preenchimento pela imagem real.

| Propriedade | Tipo | Opções | Padrão |
|---|---|---|---|
| Proporção | Variante | 1:1, 4:3, 3:2, 16:9, 21:9, 3:4, 9:16 | 1:1 |

## Como usar

### Proporções

### Em uso

Mesma proporção em toda a grade: os cards ficam alinhados mesmo com imagens diferentes.

## Conteúdo

Como escrever os textos deste componente. Regras gerais em [conteudo/microtexto.md](../conteudo/microtexto.md) e [conteudo/glossario.md](../conteudo/glossario.md).

- Todo texto importante fica fora da imagem, em texto de verdade.
- O texto alternativo diz o que a imagem mostra, não como ela é.

## Acessibilidade

Meta: WCAG 2.2 AA, base da ABNT NBR 17225. Contraste, anel de foco e modos em [fundamentos/acessibilidade.md](../fundamentos/acessibilidade.md).

- Teclado: Não recebe foco.
- Leitor de tela: A imagem dentro da moldura precisa de texto alternativo que diga o que ela mostra, ou ficar escondida se for decorativa.
- Foco: Nenhum.
- Cuidados: Ao cortar a imagem para caber na proporção, não corte texto ou informação importante. Vídeos precisam de legenda.

## Tokens usados

Canto: raio/grande. Ícone e rótulo de exemplo: cor/texto/marca. O gradiente azul claro marca o espaço da imagem até a troca.

No código, troque a barra por hífen e use o prefixo da coleção: cor/fundo/marca vira `var(--cor-fundo-marca)` e espaco/4 vira `var(--espaco-4)`.

## Faça

- Escolha uma ou duas proporções por tipo de conteúdo e mantenha.
- Use 16:9 para vídeos e 3:4 para capas de livro.
- Recorte a imagem para o assunto principal ficar no centro.

## NÃO faça

- Esticar ou achatar imagens para caber.
- Misturar várias proporções na mesma grade.
- Colocar texto importante dentro da imagem.

## Regras gerais

- Cores, espaços, cantos e sombras vêm sempre dos tokens (`var(--cor-…)`, `var(--espaco-…)`, `var(--raio-…)`). Nunca use códigos de cor soltos.
- O componente funciona no claro e no escuro sem mudanças: as cores mudam pelos tokens.
- Foco visível em tudo o que é clicável: anel de 2 px em `--cor-borda-foco`, afastado 2 px. Área de toque de pelo menos 24 px, e 40 px no celular.
- Elementos clicáveis têm cinco estados: padrão, hover, pressionado, foco e desabilitado.
- A cor nunca é o único sinal: estados usam também ícone, forma ou texto.


---

# Área de destaque

Componente do PASSI DS 1.1.0 · página "Área de destaque" no arquivo Figma.

A área de destaque separa um trecho do texto principal para chamar atenção: uma dica, um exemplo prático, um alerta ou um resumo. É o mesmo recurso usado nos quadros do livro.

## Área de destaque

Área de destaque · caixa que separa um conteúdo do texto principal: dicas (Neutra), exemplos práticos (Marca), alertas para quem decide (Atenção), resumos (Escura) e espaços vazios esperando conteúdo (Tracejada).

| Propriedade | Tipo | Opções | Padrão |
|---|---|---|---|
| Tipo | Variante | Neutra, Marca, Atenção, Escura, Tracejada | Neutra |

## Como usar

### Tipos

Exemplos no Figma: Fique por dentro; Neutra; Na prática; Marca; Para cobrar; Atenção; Resumo do capítulo; Escura; Tracejada.

### Em uso

No meio de um texto longo, o quadro “Na prática” interrompe a leitura na medida certa.

Exemplos no Figma: Na prática.

### Modo escuro

Exemplos no Figma: Fique por dentro; Na prática; Para cobrar.

## Conteúdo

Como escrever os textos deste componente. Regras gerais em [conteudo/microtexto.md](../conteudo/microtexto.md) e [conteudo/glossario.md](../conteudo/glossario.md).

- Sobretítulo diz o tipo do conteúdo: Na prática, Para cobrar.
- Texto curto: o quadro complementa, não substitui o texto principal.

## Acessibilidade

Meta: WCAG 2.2 AA, base da ABNT NBR 17225. Contraste, anel de foco e modos em [fundamentos/acessibilidade.md](../fundamentos/acessibilidade.md).

- Teclado: Não recebe foco, só os links e botões dentro dela.
- Leitor de tela: Use um título curto no começo, como Dica ou Atenção, para o leitor de tela saber que é um trecho à parte. Quando é um aviso importante, marque como região com nome.
- Foco: Nenhum.
- Cuidados: O tipo não depende só da cor da barra: o título ou o ícone dizem se é dica, exemplo, alerta ou resumo.

## Tokens usados

Neutra: cor/fundo/sutil. Marca: cor/fundo/marca-sutil com barra cor/borda/marca. Atenção: cor/fundo/alerta-sutil com barra cor/borda/alerta. Escura: modo Escuro. Tracejada: borda cor/borda/forte. Canto: raio/grande.

No código, troque a barra por hífen e use o prefixo da coleção: cor/fundo/marca vira `var(--cor-fundo-marca)` e espaco/4 vira `var(--espaco-4)`.

## Faça

- Use no máximo um quadro a cada poucos parágrafos.
- Dê um sobretítulo que diga o tipo de conteúdo: “Na prática”, “Para cobrar”.
- Mantenha o texto do quadro curto.

## NÃO faça

- Colocar o conteúdo principal dentro do quadro.
- Vários quadros seguidos.
- Usar a cor de atenção para conteúdos comuns.

## Regras gerais

- Cores, espaços, cantos e sombras vêm sempre dos tokens (`var(--cor-…)`, `var(--espaco-…)`, `var(--raio-…)`). Nunca use códigos de cor soltos.
- O componente funciona no claro e no escuro sem mudanças: as cores mudam pelos tokens.
- Foco visível em tudo o que é clicável: anel de 2 px em `--cor-borda-foco`, afastado 2 px. Área de toque de pelo menos 24 px, e 40 px no celular.
- Elementos clicáveis têm cinco estados: padrão, hover, pressionado, foco e desabilitado.
- A cor nunca é o único sinal: estados usam também ícone, forma ou texto.


---

# Rótulo de IA

Componente do PASSI DS 1.1.0 · página "Rótulo de IA" no arquivo Figma.

O rótulo de IA avisa que um conteúdo, uma sugestão ou uma resposta veio de inteligência artificial. Ao ser clicado, abre a explicação: de onde veio, quais fontes usou e quais são os limites. Ele identifica, não enfeita.

## Rótulo de IA

Rótulo de IA · marca o que foi feito ou sugerido por inteligência artificial e abre a Explicação da IA ao ser clicado. Só identifica: não é decoração. Padrão (IA) ao lado de títulos e blocos; Compacto (só o brilho) em campos e espaços pequenos, sempre com nome acessível; Com texto onde a mensagem precisa ser explícita.

| Propriedade | Tipo | Opções | Padrão |
|---|---|---|---|
| Tipo | Variante | Padrão, Compacto, Com texto | Padrão |
| Estado | Variante | Padrão, Hover, Pressionado, Foco | Padrão |

## Como usar

### Tipos e estados

Padrão ao lado de títulos e blocos. Compacto dentro de campos e onde o espaço é curto. Com texto quando a mensagem precisa ser dita por extenso.

Exemplos no Figma: Padrão · Padrão; Padrão · Hover; Padrão · Pressionado; Padrão · Foco; Compacto · Padrão; Compacto · Hover; Compacto · Pressionado; Compacto · Foco; Com texto · Padrão; Com texto · Hover; Com texto · Pressionado; Com texto · Foco.

### Em uso

O rótulo fica ao lado do que a IA fez, e só ali. O resto da tela continua nas cores normais.

## Conteúdo

Como escrever os textos deste componente. Regras gerais em [conteudo/microtexto.md](../conteudo/microtexto.md) e [conteudo/glossario.md](../conteudo/glossario.md).

- Use IA, sem pontos e em maiúsculas.
- No tipo Com texto, diga o que a IA fez: Gerado por IA, Resumo da IA.

## Acessibilidade

Meta: WCAG 2.2 AA, base da ABNT NBR 17225. Contraste, anel de foco e modos em [fundamentos/acessibilidade.md](../fundamentos/acessibilidade.md).

- Teclado: É um botão: Tab chega ao rótulo e Enter ou Espaço abrem a Explicação da IA.
- Leitor de tela: Papel button com nome completo, por exemplo Conteúdo gerado por IA, ver explicação. No tipo Compacto, o nome em texto é obrigatório, porque não há palavra visível.
- Foco: Anel de foco de 2 px. Ao abrir a explicação, o foco vai para ela; ao fechar, volta para o rótulo.
- Cuidados: A cor não é o único sinal: o rótulo sempre tem o brilho e, nos tipos Padrão e Com texto, a palavra IA.

## Tokens usados

Fundo: cor/fundo/ia-sutil. Borda: cor/borda/ia (1,5 px no hover e 2 px pressionado). Texto e ícone: cor/texto/ia. Ícone: brilho. Canto: raio/pilula. Foco: cor/borda/foco.

No código, troque a barra por hífen e use o prefixo da coleção: cor/fundo/marca vira `var(--cor-fundo-marca)` e espaco/4 vira `var(--espaco-4)`.

## Faça

- Coloque o rótulo ao lado de cada conteúdo feito ou sugerido pela IA.
- Deixe o rótulo abrir a explicação: de onde veio e quais os limites.
- Use o tipo Com texto quando a lei ou o contexto pedirem aviso explícito.

## NÃO faça

- Usar a cor ou o brilho da IA como enfeite em botões, fundos ou telas inteiras.
- Rotular algo que a IA não fez, só para parecer moderno.
- Esconder o rótulo depois que a pessoa aceita a sugestão.

## Regras gerais

- Cores, espaços, cantos e sombras vêm sempre dos tokens (`var(--cor-…)`, `var(--espaco-…)`, `var(--raio-…)`). Nunca use códigos de cor soltos.
- O componente funciona no claro e no escuro sem mudanças: as cores mudam pelos tokens.
- Foco visível em tudo o que é clicável: anel de 2 px em `--cor-borda-foco`, afastado 2 px. Área de toque de pelo menos 24 px, e 40 px no celular.
- Elementos clicáveis têm cinco estados: padrão, hover, pressionado, foco e desabilitado.
- A cor nunca é o único sinal: estados usam também ícone, forma ou texto.


---

# Explicação da IA

Componente do PASSI DS 1.1.0 · página "Explicação da IA" no arquivo Figma.

A explicação abre quando a pessoa clica no rótulo de IA. Em poucas linhas, ela diz de onde veio o conteúdo, quais fontes a IA usou e o que ela pode errar. Explicar sob demanda gera confiança sem poluir a tela.

## Explicação da IA

Explicação da IA · painel que abre a partir do Rótulo de IA e responde “por que estou vendo isto”: de onde veio o conteúdo, quais fontes a IA usou e quais são os limites. Primeira camada de explicação, curta. Para detalhes, leve a uma página.

| Propriedade | Tipo | Opções | Padrão |
|---|---|---|---|
| Título | Texto |  | Por que estou vendo isto |
| Texto | Texto |  | Este resumo foi criado por IA a partir do capítulo 3 do livro. Ele pode deixar de fora detalhes importantes. |
| Mostrar fontes | Liga/desliga |  | Ligado |
| Mostrar limitação | Liga/desliga |  | Ligado |
| Mostrar saiba mais | Liga/desliga |  | Ligado |

## Como usar

### Em uso

O painel abre colado ao rótulo, como um Popover. Fecha com Esc, com o x ou ao clicar fora.

### Variações

Sem fontes, quando a IA não consultou documentos. A limitação fica sempre que houver risco de erro.

## Conteúdo

Como escrever os textos deste componente. Regras gerais em [conteudo/microtexto.md](../conteudo/microtexto.md) e [conteudo/glossario.md](../conteudo/glossario.md).

- Uma ou duas frases sobre de onde veio o conteúdo.
- Diga a limitação sem pedir desculpas: A IA pode errar. Confira o original.

## Acessibilidade

Meta: WCAG 2.2 AA, base da ABNT NBR 17225. Contraste, anel de foco e modos em [fundamentos/acessibilidade.md](../fundamentos/acessibilidade.md).

- Teclado: Abre com Enter ou Espaço no Rótulo de IA. Tab percorre os links. Esc fecha.
- Leitor de tela: Papel dialog não modal, com o título como nome. O rótulo anuncia que abre um painel e se ele está aberto.
- Foco: Ao abrir, o foco vai para o título do painel. Ao fechar, volta para o Rótulo de IA.
- Cuidados: Não esconda aqui informação obrigatória para a decisão: o essencial fica visível na tela.

## Tokens usados

Painel: cor/fundo/superficie, cor/borda/padrao, Sombra/Média, raio/grande. Limitação: cor/fundo/sutil e cor/texto/secundario. Rótulo: Rótulo de IA. Links: Link Marca e Neutro.

No código, troque a barra por hífen e use o prefixo da coleção: cor/fundo/marca vira `var(--cor-fundo-marca)` e espaco/4 vira `var(--espaco-4)`.

## Faça

- Diga em uma ou duas frases de onde veio o conteúdo.
- Mostre as fontes quando a IA consultou documentos.
- Inclua a limitação sempre que a IA puder errar.

## NÃO faça

- Textos longos e técnicos sobre o modelo de IA.
- Prometer precisão que a IA não tem.
- Abrir a explicação sozinha, sem a pessoa pedir.

## Regras gerais

- Cores, espaços, cantos e sombras vêm sempre dos tokens (`var(--cor-…)`, `var(--espaco-…)`, `var(--raio-…)`). Nunca use códigos de cor soltos.
- O componente funciona no claro e no escuro sem mudanças: as cores mudam pelos tokens.
- Foco visível em tudo o que é clicável: anel de 2 px em `--cor-borda-foco`, afastado 2 px. Área de toque de pelo menos 24 px, e 40 px no celular.
- Elementos clicáveis têm cinco estados: padrão, hover, pressionado, foco e desabilitado.
- A cor nunca é o único sinal: estados usam também ícone, forma ou texto.


---

# Campo sugerido por IA

Componente do PASSI DS 1.1.0 · página "Campo sugerido por IA" no arquivo Figma.

Quando a IA preenche um campo por você, o PASSI mostra isso com clareza: rótulo de IA, borda própria e uma frase dizendo de onde veio a sugestão. Se a pessoa mudar o valor, o campo volta ao normal e oferece voltar à sugestão.

## Campo sugerido por IA

Campo sugerido por IA · campo de formulário que chega preenchido por uma sugestão da IA. Mostra o Rótulo de IA compacto e a borda da IA enquanto o valor é o sugerido. Se a pessoa editar, volta ao visual normal e ganha o botão “Voltar à sugestão da IA”. A pessoa sempre confirma antes de salvar.

| Propriedade | Tipo | Opções | Padrão |
|---|---|---|---|
| Rótulo | Texto |  | Cargo |
| Estado | Variante | Sugerido, Foco, Editado | Sugerido |

## Como usar

### Estados

Sugerido mostra a borda da IA. Foco usa a borda azul de sempre. Editado perde a marca da IA e ganha o atalho para desfazer a troca.

Exemplos no Figma: Sugerido; Foco; Editado.

### Em uso

Formulário de perfil em que a IA preencheu dois campos a partir de um currículo. Os campos que a pessoa digitou não têm marca.

## Conteúdo

Como escrever os textos deste componente. Regras gerais em [conteudo/microtexto.md](../conteudo/microtexto.md) e [conteudo/glossario.md](../conteudo/glossario.md).

- A ajuda diz de onde veio a sugestão: Sugerido pela IA a partir do seu perfil.
- O botão de desfazer diz o valor que volta: Voltar à sugestão da IA: Líder de design.

## Acessibilidade

Meta: WCAG 2.2 AA, base da ABNT NBR 17225. Contraste, anel de foco e modos em [fundamentos/acessibilidade.md](../fundamentos/acessibilidade.md).

- Teclado: Funciona como o Campo de texto. O botão Voltar à sugestão da IA recebe Tab e responde a Enter.
- Leitor de tela: O nome do campo é o rótulo. A frase de ajuda, lida junto, diz que o valor foi sugerido pela IA. Ao voltar à sugestão, anuncie a troca de forma discreta.
- Foco: Borda azul de 2 px no foco. Ao voltar à sugestão, o foco volta para o campo.
- Cuidados: A marca da IA nunca é só a cor da borda: há o rótulo com o brilho e a frase de ajuda.

## Tokens usados

Sugerido: cor/borda/ia (1,5 px) e Rótulo de IA compacto. Foco: cor/borda/marca (2 px). Editado: cor/borda/controle. Fundo: cor/fundo/superficie. Botão de voltar: cor/texto/ia com ícone desfazer. Canto: raio/medio.

No código, troque a barra por hífen e use o prefixo da coleção: cor/fundo/marca vira `var(--cor-fundo-marca)` e espaco/4 vira `var(--espaco-4)`.

## Faça

- Diga de onde veio a sugestão, em uma frase.
- Peça confirmação antes de salvar dados sugeridos.
- Ofereça voltar à sugestão depois que a pessoa editar.

## NÃO faça

- Salvar sugestões da IA sem a pessoa revisar.
- Marcar como IA um campo que a pessoa digitou.
- Sugerir dados sensíveis, como renda ou saúde, sem a pessoa pedir.

## Regras gerais

- Cores, espaços, cantos e sombras vêm sempre dos tokens (`var(--cor-…)`, `var(--espaco-…)`, `var(--raio-…)`). Nunca use códigos de cor soltos.
- O componente funciona no claro e no escuro sem mudanças: as cores mudam pelos tokens.
- Foco visível em tudo o que é clicável: anel de 2 px em `--cor-borda-foco`, afastado 2 px. Área de toque de pelo menos 24 px, e 40 px no celular.
- Elementos clicáveis têm cinco estados: padrão, hover, pressionado, foco e desabilitado.
- A cor nunca é o único sinal: estados usam também ícone, forma ou texto.


---

# Campo de pedido

Componente do PASSI DS 1.1.0 · página "Campo de pedido" no arquivo Figma.

O campo de pedido é onde a pessoa escreve para a IA. Ele sugere por onde começar, mostra quando a IA está gerando e deixa parar a qualquer momento. Embaixo, um aviso curto lembra que a IA pode errar.

## Campo de pedido

Campo de pedido · onde a pessoa escreve para a IA. Vazio mostra sugestões de pedido e o botão de enviar desabilitado. Digitando habilita o envio. Gerando troca o envio pelo botão Parar. O aviso de que a IA pode errar fica sempre visível embaixo.

| Propriedade | Tipo | Opções | Padrão |
|---|---|---|---|
| Mostrar aviso | Liga/desliga |  | Ligado |
| Estado | Variante | Vazio, Digitando, Gerando | Vazio |

## Como usar

### Estados

Vazio com sugestões e envio desabilitado. Digitando com a borda azul e o envio liberado. Gerando com o botão Parar no lugar do envio.

Exemplos no Figma: Vazio; Digitando; Gerando.

## Conteúdo

Como escrever os textos deste componente. Regras gerais em [conteudo/microtexto.md](../conteudo/microtexto.md) e [conteudo/glossario.md](../conteudo/glossario.md).

- O texto de exemplo convida a perguntar: Pergunte algo sobre o livro.
- Sugestões são pedidos completos e curtos: Resuma o capítulo 3.

## Acessibilidade

Meta: WCAG 2.2 AA, base da ABNT NBR 17225. Contraste, anel de foco e modos em [fundamentos/acessibilidade.md](../fundamentos/acessibilidade.md).

- Teclado: Enter envia e Shift+Enter quebra a linha. Tab passa por anexar e enviar. Durante a geração, Esc ou o botão Parar interrompem.
- Leitor de tela: O campo tem rótulo, mesmo que escondido na tela, por exemplo Pergunte algo sobre o livro. As sugestões são botões. O início e o fim da geração são anunciados de forma discreta, nunca palavra por palavra.
- Foco: O foco fica no campo depois de enviar, para a pessoa continuar a conversa.
- Cuidados: O botão Parar precisa estar sempre ao alcance do teclado enquanto a IA gera. O aviso de erro da IA fica visível, não só no leitor de tela.

## Tokens usados

Caixa: cor/fundo/superficie, cor/borda/controle e cor/borda/marca (2 px ao digitar), raio/extra. Sugestões: cor/fundo/superficie, cor/borda/padrao, raio/pilula. Pedido: cor/texto/padrao e cor/texto/terciario. Aviso: cor/texto/secundario. Botões: Botão de ícone e Botão.

No código, troque a barra por hífen e use o prefixo da coleção: cor/fundo/marca vira `var(--cor-fundo-marca)` e espaco/4 vira `var(--espaco-4)`.

## Faça

- Ofereça de 2 a 4 sugestões curtas para começar.
- Deixe a pessoa parar a geração a qualquer momento.
- Mantenha o aviso de que a IA pode errar sempre visível.

## NÃO faça

- Enviar o pedido sozinho enquanto a pessoa digita.
- Apagar o pedido se a geração falhar.
- Usar o campo de pedido onde um formulário comum resolve.

## Regras gerais

- Cores, espaços, cantos e sombras vêm sempre dos tokens (`var(--cor-…)`, `var(--espaco-…)`, `var(--raio-…)`). Nunca use códigos de cor soltos.
- O componente funciona no claro e no escuro sem mudanças: as cores mudam pelos tokens.
- Foco visível em tudo o que é clicável: anel de 2 px em `--cor-borda-foco`, afastado 2 px. Área de toque de pelo menos 24 px, e 40 px no celular.
- Elementos clicáveis têm cinco estados: padrão, hover, pressionado, foco e desabilitado.
- A cor nunca é o único sinal: estados usam também ícone, forma ou texto.


---

# Mensagem da conversa

Componente do PASSI DS 1.1.0 · página "Mensagem da conversa" no arquivo Figma.

Cada fala da conversa com a IA. A da pessoa fica num balão à direita. A da IA vem à esquerda, sempre identificada, com as fontes quando houver e com ações para copiar, gerar de novo e avaliar. Quando algo dá errado, a mensagem diz o que fazer.

## Mensagem da conversa

Mensagem da conversa · uma fala dentro da Conversa com IA. Pessoa: balão à direita. IA: à esquerda, com avatar de brilho, nome e Rótulo de IA, e ações de copiar, gerar de novo e avaliar. IA com fontes mostra de onde a resposta veio. IA com erro explica o problema e oferece tentar de novo ou falar com uma pessoa.

| Propriedade | Tipo | Opções | Padrão |
|---|---|---|---|
| Tipo | Variante | Pessoa, IA gerando, IA completa, IA com fontes, IA com erro | Pessoa |

## Como usar

### Tipos

Pessoa, IA gerando, IA completa, IA com fontes e IA com erro.

Exemplos no Figma: Pessoa; IA gerando; IA completa; IA com fontes; IA com erro.

## Conteúdo

Como escrever os textos deste componente. Regras gerais em [conteudo/microtexto.md](../conteudo/microtexto.md) e [conteudo/glossario.md](../conteudo/glossario.md).

- A IA não usa primeira pessoa emotiva nem finge ser humana.
- No erro, diga o que houve e ofereça saída: Tentar de novo ou Falar com uma pessoa.

## Acessibilidade

Meta: WCAG 2.2 AA, base da ABNT NBR 17225. Contraste, anel de foco e modos em [fundamentos/acessibilidade.md](../fundamentos/acessibilidade.md).

- Teclado: As ações de cada resposta (copiar, gerar de novo, avaliar) e os links das fontes recebem Tab.
- Leitor de tela: A conversa é uma lista de mensagens, e cada uma diz quem falou: Você ou Assistente do livro, resposta gerada por IA. A resposta nova é anunciada inteira quando termina, não palavra por palavra. Os botões de ícone têm nome em texto.
- Foco: O foco fica no Campo de pedido. Não mova o foco para a resposta quando ela chegar.
- Cuidados: Escreva sem fingir ser uma pessoa. O erro sempre oferece uma saída: tentar de novo ou falar com alguém. No código, o balão da pessoa tem no máximo 80% da largura e quebra a linha.

## Tokens usados

Pessoa: cor/fundo/sutil, raio/grande. IA: avatar com cor/fundo/ia-sutil, cor/borda/ia e ícone brilho em cor/texto/ia; Rótulo de IA. Fontes: cor/fundo/sutil e cor/texto/marca. Erro: cor/fundo/erro-sutil e cor/texto/erro.

No código, troque a barra por hífen e use o prefixo da coleção: cor/fundo/marca vira `var(--cor-fundo-marca)` e espaco/4 vira `var(--espaco-4)`.

## Faça

- Mostre as fontes sempre que a resposta vier de documentos.
- Ofereça copiar, gerar de novo e avaliar em toda resposta.
- No erro, diga o que aconteceu e o que fazer.

## NÃO faça

- Fingir que a IA é uma pessoa, com nome humano ou foto.
- Esconder que a resposta foi gerada por IA.
- Mensagens de erro técnicas, sem saída.

## Regras gerais

- Cores, espaços, cantos e sombras vêm sempre dos tokens (`var(--cor-…)`, `var(--espaco-…)`, `var(--raio-…)`). Nunca use códigos de cor soltos.
- O componente funciona no claro e no escuro sem mudanças: as cores mudam pelos tokens.
- Foco visível em tudo o que é clicável: anel de 2 px em `--cor-borda-foco`, afastado 2 px. Área de toque de pelo menos 24 px, e 40 px no celular.
- Elementos clicáveis têm cinco estados: padrão, hover, pressionado, foco e desabilitado.
- A cor nunca é o único sinal: estados usam também ícone, forma ou texto.


---

# Plano de ação

Componente do PASSI DS 1.1.0 · página "Plano de ação" no arquivo Figma.

Quando a IA vai agir por você, como mover arquivos ou enviar algo, ela primeiro mostra o plano. A pessoa confirma, ajusta ou cancela. Durante a execução dá para parar, e no fim dá para desfazer. Quem decide é sempre a pessoa.

## Plano de ação

Plano de ação · antes de um agente de IA mudar algo, ele mostra o plano em passos e espera a confirmação da pessoa. Aguardando confirmação: Cancelar, Ajustar plano ou Confirmar e executar. Executando: progresso passo a passo e botão Parar. Concluído: resultado e Desfazer.

| Propriedade | Tipo | Opções | Padrão |
|---|---|---|---|
| Estado | Variante | Aguardando confirmação, Executando, Concluído | Aguardando confirmação |

## Como usar

### Estados

Aguardando confirmação, Executando e Concluído. Cada passo diz se apenas lê ou se muda alguma coisa.

Exemplos no Figma: Plano proposto; Aguardando confirmação; Executando; Concluído.

### Modo escuro

Exemplos no Figma: Plano proposto.

## Conteúdo

Como escrever os textos deste componente. Regras gerais em [conteudo/microtexto.md](../conteudo/microtexto.md) e [conteudo/glossario.md](../conteudo/glossario.md).

- Cada passo começa com verbo e diz se só lê ou se muda algo.
- O botão de confirmar diz o que vai acontecer: Confirmar e executar.

## Acessibilidade

Meta: WCAG 2.2 AA, base da ABNT NBR 17225. Contraste, anel de foco e modos em [fundamentos/acessibilidade.md](../fundamentos/acessibilidade.md).

- Teclado: Tab percorre os botões. Confirmar e executar nunca é ativado sozinho, nem por Enter no meio de outro campo.
- Leitor de tela: O plano é uma lista ordenada. Cada passo anuncia o estado em texto: feito, em andamento ou ainda não feito. O progresso é anunciado de forma discreta a cada passo concluído.
- Foco: Ao aparecer, o foco vai para o título do plano. Ao concluir, vai para a mensagem de resultado.
- Cuidados: O botão Parar fica ao alcance do teclado durante toda a execução. Passos que mudam algo dizem isso em texto.

## Tokens usados

Painel: cor/fundo/superficie, cor/borda/padrao, raio/grande. Rótulo de IA no cabeçalho. Passos: cor/borda/controle (a fazer), Carregando (em andamento), cor/fundo/sucesso com ícone check (feito). Botões: Botão P.

No código, troque a barra por hífen e use o prefixo da coleção: cor/fundo/marca vira `var(--cor-fundo-marca)` e espaco/4 vira `var(--espaco-4)`.

## Faça

- Diga em cada passo se ele só lê ou se muda alguma coisa.
- Peça confirmação antes de qualquer mudança que afete outras pessoas ou dinheiro.
- Ofereça parar durante a execução e desfazer no fim.

## NÃO faça

- Executar sem mostrar o plano antes.
- Deixar o botão de confirmar pré-selecionado ou automático.
- Esconder um passo que muda dados.

## Regras gerais

- Cores, espaços, cantos e sombras vêm sempre dos tokens (`var(--cor-…)`, `var(--espaco-…)`, `var(--raio-…)`). Nunca use códigos de cor soltos.
- O componente funciona no claro e no escuro sem mudanças: as cores mudam pelos tokens.
- Foco visível em tudo o que é clicável: anel de 2 px em `--cor-borda-foco`, afastado 2 px. Área de toque de pelo menos 24 px, e 40 px no celular.
- Elementos clicáveis têm cinco estados: padrão, hover, pressionado, foco e desabilitado.
- A cor nunca é o único sinal: estados usam também ícone, forma ou texto.


---

# Aviso de IA

Componente do PASSI DS 1.1.0 · página "Aviso de IA" no arquivo Figma.

Avisos curtos que dizem a verdade sobre a IA: quando a pessoa está falando com uma, o que ela não sabe, o que foi gerado por ela e como chegar a uma pessoa. Transparência simples, sem letras miúdas.

## Aviso de IA

Aviso de IA · mensagens curtas de transparência. Conversa com IA: avisa no início de uma conversa que a pessoa fala com uma IA (exigido pela lei europeia de IA desde agosto de 2026). Limitação: o que a IA não sabe ou não vê. Conteúdo gerado: linha discreta abaixo de textos ou imagens feitos com IA. Falar com uma pessoa: saída sempre disponível para atendimento humano.

| Propriedade | Tipo | Opções | Padrão |
|---|---|---|---|
| Tipo | Variante | Conversa com IA, Limitação, Conteúdo gerado, Falar com uma pessoa | Conversa com IA |

## Como usar

### Tipos

Conversa com IA no começo de toda conversa. Limitação perto do campo de pedido. Conteúdo gerado abaixo do que foi feito com IA. Falar com uma pessoa sempre ao alcance.

Exemplos no Figma: Conversa com IA; Limitação; Conteúdo gerado; Falar com uma pessoa.

### Texto padrão em português

Use estas frases como ponto de partida. Elas são curtas, diretas e não fingem que a IA é uma pessoa.

## Conteúdo

Como escrever os textos deste componente. Regras gerais em [conteudo/microtexto.md](../conteudo/microtexto.md) e [conteudo/glossario.md](../conteudo/glossario.md).

- Frases curtas e diretas, sem letras miúdas: Você está conversando com uma IA.
- Diga o limite em termos concretos: Ela não vê os seus dados nem a internet.

## Acessibilidade

Meta: WCAG 2.2 AA, base da ABNT NBR 17225. Contraste, anel de foco e modos em [fundamentos/acessibilidade.md](../fundamentos/acessibilidade.md).

- Teclado: Só o botão de Falar com uma pessoa recebe Tab.
- Leitor de tela: O aviso de conversa é lido no começo da conversa, antes da primeira resposta. Os outros são lidos na ordem normal da página. O ícone é decorativo: a mensagem está no texto.
- Foco: Os avisos não roubam o foco.
- Cuidados: O aviso não pode sumir sozinho nem ficar escondido em letra miúda.

## Tokens usados

Conversa com IA: cor/fundo/ia-sutil com ícone brilho em cor/texto/ia. Limitação e Falar com uma pessoa: cor/fundo/sutil e cor/texto/secundario. Conteúdo gerado: Legenda em cor/texto/secundario. Canto: raio/grande.

No código, troque a barra por hífen e use o prefixo da coleção: cor/fundo/marca vira `var(--cor-fundo-marca)` e espaco/4 vira `var(--espaco-4)`.

## Faça

- Avise logo no começo que a pessoa está falando com uma IA.
- Diga o que a IA não sabe ou não vê.
- Ofereça sempre um caminho para falar com uma pessoa.

## NÃO faça

- Esconder o aviso em termos de uso.
- Usar o aviso como desculpa para respostas ruins.
- Dar nome e foto de gente à IA.

## Regras gerais

- Cores, espaços, cantos e sombras vêm sempre dos tokens (`var(--cor-…)`, `var(--espaco-…)`, `var(--raio-…)`). Nunca use códigos de cor soltos.
- O componente funciona no claro e no escuro sem mudanças: as cores mudam pelos tokens.
- Foco visível em tudo o que é clicável: anel de 2 px em `--cor-borda-foco`, afastado 2 px. Área de toque de pelo menos 24 px, e 40 px no celular.
- Elementos clicáveis têm cinco estados: padrão, hover, pressionado, foco e desabilitado.
- A cor nunca é o único sinal: estados usam também ícone, forma ou texto.


---

# Entrar e criar conta

Padrão do PASSI DS 1.1.0 · página "Entrar e criar conta" no arquivo Figma.

Telas prontas para a pessoa entrar, criar conta, recuperar a senha e confirmar o e-mail. Todas usam os componentes do sistema, então mudam junto quando eles mudam.

## Entrar e criar conta

Entrar e criar conta · telas prontas de entrada, criação de conta, recuperação de senha e confirmação por código. Montadas com Campo de texto, Botão, Link, Checkbox, Divisor e Código de verificação.

- Variantes · Tela: Entrar, Criar conta, Recuperar senha, Confirmar código

## Como usar

### Telas

Cada tela tem um único objetivo e uma única ação principal.

### Em uso no computador

Tela dividida: a marca à esquerda, o formulário à direita.

### Em uso no celular

No celular, o formulário ocupa a tela toda e os botões ficam em largura total.

## Feito com

Campo de texto, Botão (Primário e Contorno, tamanho G), Link, Checkbox, Divisor com texto e Código de verificação.

## Faça

- Peça só o necessário para criar a conta. O resto pode vir depois.
- Mostre as regras da senha antes do erro, não depois.
- Permita colar senhas e códigos.
- Explique o que acontece depois de cada envio.

## NÃO faça

- Pedir para confirmar o e-mail digitando duas vezes.
- Esconder o link “Esqueci minha senha”.
- Mensagens que revelam se um e-mail já tem conta.
- Captcha logo na primeira tentativa.

## Regras gerais

- Cores, espaços, cantos e sombras vêm sempre dos tokens (`var(--cor-…)`, `var(--espaco-…)`, `var(--raio-…)`). Nunca use códigos de cor soltos.
- O componente funciona no claro e no escuro sem mudanças: as cores mudam pelos tokens.
- Foco visível em tudo o que é clicável: anel de 2 px em `--cor-borda-foco`, afastado 2 px. Área de toque de pelo menos 24 px, e 40 px no celular.
- Elementos clicáveis têm cinco estados: padrão, hover, pressionado, foco e desabilitado.
- A cor nunca é o único sinal: estados usam também ícone, forma ou texto.


---

# Cabeçalho do site

Padrão do PASSI DS 1.1.0 · página "Cabeçalho do site" no arquivo Figma.

O cabeçalho fica no topo de todas as páginas. Ele mostra a marca, as seções principais do site e as ações mais importantes, como entrar ou comprar.

## Item de navegação

Item de navegação · link do menu principal do site. O estado Ativo marca a página atual com um traço azul.

- Variantes · Estado: Padrão, Hover, Pressionado, Ativo

## Cabeçalho do site

Cabeçalho do site · topo fixo com marca, navegação principal e ações. No celular, a navegação vai para um menu que abre em tela cheia. Usa Item de navegação, Botão e Botão de ícone.

- Variantes · Tipo: Computador, Computador com aviso, Celular, Celular com menu aberto

## Como usar

### Computador

Marca à esquerda, navegação no centro e ações à direita. A página atual fica marcada.

### Com faixa de aviso

Uma faixa fina acima do cabeçalho para promoções ou avisos importantes. Use com moderação.

### Celular

No celular ficam só a marca, a busca e o botão de menu. O menu abre em tela cheia, com itens grandes para o toque.

### Item de navegação

## Feito com

Item de navegação (novo), Botão (Primário e Contorno), Botão de ícone (busca, menu, fechar). Fundo cor/fundo/pagina com linha cor/borda/padrao.

## Faça

- Mantenha no máximo 5 a 7 itens na navegação principal.
- Marque a página atual.
- Deixe a ação principal (comprar, assinar) sempre visível.
- No celular, use itens com pelo menos 48 px de altura.

## NÃO faça

- Esconder a busca em sites com muito conteúdo.
- Menus com dois níveis no celular.
- Mudar a ordem dos itens entre páginas.
- Faixas de aviso que não podem ser fechadas e aparecem sempre.

## Regras gerais

- Cores, espaços, cantos e sombras vêm sempre dos tokens (`var(--cor-…)`, `var(--espaco-…)`, `var(--raio-…)`). Nunca use códigos de cor soltos.
- O componente funciona no claro e no escuro sem mudanças: as cores mudam pelos tokens.
- Foco visível em tudo o que é clicável: anel de 2 px em `--cor-borda-foco`, afastado 2 px. Área de toque de pelo menos 24 px, e 40 px no celular.
- Elementos clicáveis têm cinco estados: padrão, hover, pressionado, foco e desabilitado.
- A cor nunca é o único sinal: estados usam também ícone, forma ou texto.


---

# Rodapé do site

Padrão do PASSI DS 1.1.0 · página "Rodapé do site" no arquivo Figma.

O rodapé fecha todas as páginas. Ele organiza os links secundários por assunto, oferece a inscrição na newsletter e traz as informações legais, como direitos e privacidade.

## Rodapé do site

Rodapé do site · fecha todas as páginas com a marca, links organizados por assunto, inscrição na newsletter e informações legais. O tipo Completo usa o modo escuro por padrão.

- Variantes · Tipo: Completo, Simples, Celular

## Como usar

### Completo

Marca e newsletter à esquerda, links em colunas à direita e linha final com direitos e documentos legais.

### Simples

Uma linha só, para páginas internas, áreas logadas ou landing pages curtas.

### Celular

As colunas viram blocos empilhados.

## Feito com

Campo de texto e Botão (newsletter). Textos com estilos Sobretítulo, Corpo/Pequeno e Legenda. O tipo Completo e o Celular usam o modo Escuro da coleção Cor.

## Faça

- Agrupe links por assunto, com títulos curtos.
- Repita os caminhos mais importantes, como contato.
- Mantenha os links legais sempre presentes.

## NÃO faça

- Colocar no rodapé a única forma de chegar a uma página importante.
- Listas com dezenas de links sem organização.
- Rodapé diferente em cada página.

## Regras gerais

- Cores, espaços, cantos e sombras vêm sempre dos tokens (`var(--cor-…)`, `var(--espaco-…)`, `var(--raio-…)`). Nunca use códigos de cor soltos.
- O componente funciona no claro e no escuro sem mudanças: as cores mudam pelos tokens.
- Foco visível em tudo o que é clicável: anel de 2 px em `--cor-borda-foco`, afastado 2 px. Área de toque de pelo menos 24 px, e 40 px no celular.
- Elementos clicáveis têm cinco estados: padrão, hover, pressionado, foco e desabilitado.
- A cor nunca é o único sinal: estados usam também ícone, forma ou texto.


---

# Seções de página

Padrão do PASSI DS 1.1.0 · página "Seções de página" no arquivo Figma.

Blocos prontos para montar páginas inteiras, como a página de um produto ou de um livro. Empilhe as seções na ordem que contar melhor a sua história.

## Seções de página

Seções de página · blocos prontos para montar páginas de venda e de conteúdo: Abertura, Benefícios, Números, Depoimento e Chamada final. Largura de 1440 px com margens de 80 px.

- Variantes · Tipo: Abertura, Benefícios, Números, Depoimento, Chamada final

## Como usar

### Abertura

A primeira dobra: o que é, para quem é e o que fazer agora.

### Benefícios

Três motivos, com ícone, título e texto curto.

### Números

Provas em números grandes. Usa o modo escuro para dar ritmo à página.

### Depoimento

Uma frase forte de quem já usou, com nome e cargo.

### Chamada final

Fecha a página repetindo a ação principal, na cor da marca.

## Feito com

Botão, Selo e Avatar. Fundos cor/fundo/pagina, cor/fundo/sutil, cor/fundo/marca e modo Escuro. Títulos em Display/Grande e Título/1.

## Faça

- Comece pela Abertura e termine com a Chamada final.
- Alterne fundos (claro, sutil, escuro, azul) para separar as seções.
- Use uma única ação principal em toda a página.

## NÃO faça

- Empilhar seções iguais seguidas.
- Depoimentos sem nome ou inventados em páginas reais.
- Mais de uma chamada final na mesma página.

## Regras gerais

- Cores, espaços, cantos e sombras vêm sempre dos tokens (`var(--cor-…)`, `var(--espaco-…)`, `var(--raio-…)`). Nunca use códigos de cor soltos.
- O componente funciona no claro e no escuro sem mudanças: as cores mudam pelos tokens.
- Foco visível em tudo o que é clicável: anel de 2 px em `--cor-borda-foco`, afastado 2 px. Área de toque de pelo menos 24 px, e 40 px no celular.
- Elementos clicáveis têm cinco estados: padrão, hover, pressionado, foco e desabilitado.
- A cor nunca é o único sinal: estados usam também ícone, forma ou texto.


---

# Menu lateral

Padrão do PASSI DS 1.1.0 · página "Menu lateral" no arquivo Figma.

O menu lateral organiza a navegação de aplicativos e áreas logadas. Ele fica sempre à esquerda, agrupa as seções por assunto e pode ser recolhido para dar mais espaço ao conteúdo.

## Item do menu lateral

Item do menu lateral · link com ícone dentro do Menu lateral. Na largura Recolhido mostra só o ícone; use uma Dica flutuante com o nome.

- Variantes · Largura: Expandido, Recolhido
- Variantes · Estado: Padrão, Hover, Pressionado, Ativo

## Menu lateral

Menu lateral · navegação de aplicativos e áreas logadas. Expandido mostra ícones e nomes em grupos; Recolhido mostra só ícones. A pessoa e a saída ficam no rodapé.

- Variantes · Largura: Expandido, Recolhido

## Como usar

### Larguras

### Em uso

Menu lateral ao lado do conteúdo principal de um aplicativo.

### Item do menu lateral

## Feito com

Item do menu lateral (novo), Campo de texto (busca), Botão de ícone (recolher), Contador, Avatar e ícones do sistema.

## Faça

- Agrupe as seções por assunto, com títulos curtos.
- Marque a seção atual com fundo e cor da marca.
- Deixe recolher o menu em telas menores.
- Mostre a dica flutuante com o nome quando estiver recolhido.

## NÃO faça

- Mais de 10 itens sem grupos.
- Ícones diferentes para a mesma seção em lugares diferentes.
- Esconder a saída da conta.

## Regras gerais

- Cores, espaços, cantos e sombras vêm sempre dos tokens (`var(--cor-…)`, `var(--espaco-…)`, `var(--raio-…)`). Nunca use códigos de cor soltos.
- O componente funciona no claro e no escuro sem mudanças: as cores mudam pelos tokens.
- Foco visível em tudo o que é clicável: anel de 2 px em `--cor-borda-foco`, afastado 2 px. Área de toque de pelo menos 24 px, e 40 px no celular.
- Elementos clicáveis têm cinco estados: padrão, hover, pressionado, foco e desabilitado.
- A cor nunca é o único sinal: estados usam também ícone, forma ou texto.


---

# Navegação do celular

Padrão do PASSI DS 1.1.0 · página "Navegação do celular" no arquivo Figma.

No celular, a navegação principal fica embaixo, ao alcance do polegar. No topo, a barra superior mostra onde a pessoa está, o botão de voltar e as ações da tela.

## Item da barra inferior

Item da barra inferior · destino principal do aplicativo no celular, com ícone e nome curto.

- Variantes · Estado: Ativo, Padrão

## Navegação do celular

Navegação do celular · barra inferior com os destinos principais (4 ou 5) e barras superiores com voltar, título e ações. A área de 20 px embaixo respeita a linha de gesto do celular.

- Variantes · Tipo: Barra inferior · 4 itens, Barra inferior · 5 itens, Barra inferior · botão central, Barra superior, Barra superior · título grande

## Como usar

### Barra inferior

De 3 a 5 destinos, sempre com ícone e nome. O destino atual ganha fundo azul claro.

### Barra superior

### Em uso

Barra superior e barra inferior na mesma tela.

## Feito com

Item da barra inferior (novo), Botão de ícone, Contador e ícones do sistema.

## Faça

- Use de 3 a 5 destinos na barra inferior.
- Mantenha a barra inferior igual em todas as telas principais.
- Deixe a área de toque de cada item com pelo menos 48 px.

## NÃO faça

- Usar a barra inferior para ações, como “Salvar”.
- Ícones sem nome embaixo.
- Esconder a barra inferior ao rolar em telas de navegação principal.

## Regras gerais

- Cores, espaços, cantos e sombras vêm sempre dos tokens (`var(--cor-…)`, `var(--espaco-…)`, `var(--raio-…)`). Nunca use códigos de cor soltos.
- O componente funciona no claro e no escuro sem mudanças: as cores mudam pelos tokens.
- Foco visível em tudo o que é clicável: anel de 2 px em `--cor-borda-foco`, afastado 2 px. Área de toque de pelo menos 24 px, e 40 px no celular.
- Elementos clicáveis têm cinco estados: padrão, hover, pressionado, foco e desabilitado.
- A cor nunca é o único sinal: estados usam também ícone, forma ou texto.


---

# Busca

Padrão do PASSI DS 1.1.0 · página "Busca" no arquivo Figma.

A busca ajuda a pessoa a encontrar conteúdo sem navegar pelo menu. Ela sugere resultados enquanto a pessoa digita e, na paleta de comandos, também executa ações pelo teclado.

## Busca

Busca · barra com atalho ⌘K, sugestões enquanto a pessoa digita, paleta de comandos para ações rápidas e estado sem resultados. Usa Tecla, Botão e ícones.

- Variantes · Tipo: Barra, Com sugestões, Paleta de comandos, Sem resultados

## Como usar

### Tipos

## Feito com

Tecla (atalhos), Botão (sem resultados) e ícones. Painel com cor/fundo/superficie, Sombra/Média e raio/grande.

## Faça

- Mostre sugestões a partir da segunda ou terceira letra.
- Destaque o primeiro resultado para abrir com Enter.
- Guarde as buscas recentes da pessoa.
- Explique o que fazer quando não houver resultados.

## NÃO faça

- Exigir que a pessoa acerte a palavra exata.
- Esconder a busca atrás de um ícone em sites com muito conteúdo.
- Mostrar “Nenhum resultado” sem nenhuma alternativa.

## Regras gerais

- Cores, espaços, cantos e sombras vêm sempre dos tokens (`var(--cor-…)`, `var(--espaco-…)`, `var(--raio-…)`). Nunca use códigos de cor soltos.
- O componente funciona no claro e no escuro sem mudanças: as cores mudam pelos tokens.
- Foco visível em tudo o que é clicável: anel de 2 px em `--cor-borda-foco`, afastado 2 px. Área de toque de pelo menos 24 px, e 40 px no celular.
- Elementos clicáveis têm cinco estados: padrão, hover, pressionado, foco e desabilitado.
- A cor nunca é o único sinal: estados usam também ícone, forma ou texto.


---

# Calendário

Padrão do PASSI DS 1.1.0 · página "Calendário" no arquivo Figma.

O calendário ajuda a escolher uma data ou um período, como a data de uma mentoria ou as férias da equipe. Ele aparece sob o campo de data e mostra o mês inteiro de uma vez.

## Dia

Dia · uma célula do Calendário. Início, Meio e Fim formam um intervalo.

- Variantes · Estado: Padrão, Hover, Pressionado, Hoje, Selecionado, Início, Meio, Fim, Fora do mês, Desabilitado

## Calendário

Calendário · escolha de data ou de intervalo de datas, mostrado aberto sob um campo ou dentro de uma página. Hoje fica com contorno azul. Usa Dia, Botão e Botão de ícone.

- Variantes · Tipo: Data única, Intervalo, Com dias bloqueados

## Como usar

### Tipos

Data única fecha ao escolher o dia. Intervalo pede início e fim e confirma com “Aplicar”.

### Com campo de data

O calendário abre logo abaixo do campo. A pessoa também pode digitar a data direto.

### Estados do dia

## Feito com

Dia (novo), Botão de ícone (mês anterior e próximo), Botão (Limpar e Aplicar) e Campo de texto com ícone de calendário.

## Faça

- Marque o dia de hoje.
- Permita digitar a data, além de clicar.
- Mostre o período escolhido em texto, como “12 a 16 de out”.
- Comece a semana no domingo, como no calendário brasileiro.

## NÃO faça

- Usar calendário para datas distantes, como data de nascimento. Prefira três campos ou digitação.
- Deixar dias indisponíveis sem explicar o motivo.
- Esconder o ano quando ele importa.

## Regras gerais

- Cores, espaços, cantos e sombras vêm sempre dos tokens (`var(--cor-…)`, `var(--espaco-…)`, `var(--raio-…)`). Nunca use códigos de cor soltos.
- O componente funciona no claro e no escuro sem mudanças: as cores mudam pelos tokens.
- Foco visível em tudo o que é clicável: anel de 2 px em `--cor-borda-foco`, afastado 2 px. Área de toque de pelo menos 24 px, e 40 px no celular.
- Elementos clicáveis têm cinco estados: padrão, hover, pressionado, foco e desabilitado.
- A cor nunca é o único sinal: estados usam também ícone, forma ou texto.


---

# Gráficos

Padrão do PASSI DS 1.1.0 · página "Gráficos" no arquivo Figma.

Cards de gráfico para painéis de acompanhamento, como a adoção de um design system. Cada card tem título, número principal, variação e o gráfico, sempre com as cores de dados do sistema.

## Gráficos

Gráficos · cards de dados prontos para painéis: Barras, Linha, Rosca, Indicador e Barras horizontais. As cores vêm das variáveis dados/1 a dados/5. Ajuste alturas e posições para os valores reais.

- Variantes · Tipo: Barras, Linha, Rosca, Indicador, Barras horizontais

## Como usar

### Tipos

Barras para comparar períodos, Linha para tendência, Rosca para partes de um todo, Indicador para um número com tendência e Barras horizontais para ranking.

### Cores de dados

Cinco cores com contraste entre si. A cor da marca destaca o dado mais importante.

### Variáveis usadas

Novas variáveis na coleção Cor: dados/1 a dados/5 e dados/grade, com valores para claro e escuro. Card: cor/fundo/superficie, cor/borda/padrao, raio/grande.

## Faça

- Comece o eixo das barras no zero.
- Destaque só o dado mais importante com a cor da marca.
- Escreva o título como uma pergunta que o gráfico responde.
- Mostre o número principal em texto, além do gráfico.

## NÃO faça

- Gráfico de pizza com mais de 5 fatias.
- Usar cores fora da paleta de dados.
- Gráficos 3D ou com sombras.
- Legendas longe do dado que explicam.

## Regras gerais

- Cores, espaços, cantos e sombras vêm sempre dos tokens (`var(--cor-…)`, `var(--espaco-…)`, `var(--raio-…)`). Nunca use códigos de cor soltos.
- O componente funciona no claro e no escuro sem mudanças: as cores mudam pelos tokens.
- Foco visível em tudo o que é clicável: anel de 2 px em `--cor-borda-foco`, afastado 2 px. Área de toque de pelo menos 24 px, e 40 px no celular.
- Elementos clicáveis têm cinco estados: padrão, hover, pressionado, foco e desabilitado.
- A cor nunca é o único sinal: estados usam também ícone, forma ou texto.


---

# Tabela de dados

Padrão do PASSI DS 1.1.0 · página "Tabela de dados" no arquivo Figma.

A tabela organiza muitos itens em linhas e colunas, para comparar, ordenar e agir sobre eles. Aqui ela mostra o inventário de componentes de um design system, como sugere o livro.

## Tabela de dados

Tabela de dados · lista com colunas para comparar itens: barra com busca e filtros, cabeçalho com ordenação, linhas com seleção, selos de status, responsável, uso e ações, e paginação. Inclui os estados Com seleção e Vazia.

- Variantes · Tipo: Padrão, Com seleção, Vazia

## Como usar

### Padrão

Barra com título, busca, filtro e ação principal. A coluna “Atualizado” está ordenada.

### Com seleção

Ao marcar linhas, a barra escura mostra a contagem e as ações em lote.

### Vazia

Quando não há itens, explique o motivo e ofereça o primeiro passo.

## Feito com

Checkbox, Selo, Avatar, Campo de texto, Botão e Paginação. Linhas de 56 px com divisores cor/borda/padrao; cabeçalho em cor/fundo/sutil.

## Faça

- Alinhe números à direita e textos à esquerda.
- Mostre qual coluna está ordenada.
- Use selos para status, nunca só cor no texto.
- Mantenha a primeira coluna com o nome do item.

## NÃO faça

- Mais de 7 colunas visíveis ao mesmo tempo.
- Ações importantes só no menu de “mais opções”.
- Tabelas no celular. Prefira uma lista de cards.

## Regras gerais

- Cores, espaços, cantos e sombras vêm sempre dos tokens (`var(--cor-…)`, `var(--espaco-…)`, `var(--raio-…)`). Nunca use códigos de cor soltos.
- O componente funciona no claro e no escuro sem mudanças: as cores mudam pelos tokens.
- Foco visível em tudo o que é clicável: anel de 2 px em `--cor-borda-foco`, afastado 2 px. Área de toque de pelo menos 24 px, e 40 px no celular.
- Elementos clicáveis têm cinco estados: padrão, hover, pressionado, foco e desabilitado.
- A cor nunca é o único sinal: estados usam também ícone, forma ou texto.


---

# Cards de conteúdo

Padrão do PASSI DS 1.1.0 · página "Cards de conteúdo" no arquivo Figma.

Cards para listar artigos, capítulos e notícias. Cada formato serve a um lugar: grade de artigos, lista lateral, destaque da página e listas numeradas de mais lidos.

## Cards de conteúdo

Cards de conteúdo · vitrines para artigos, capítulos e notícias: Artigo, Artigo horizontal, Destaque e Compacto (lista numerada). Troque a imagem pelo preenchimento do bloco “Imagem”.

- Variantes · Tipo: Artigo, Artigo horizontal, Destaque, Compacto

## Como usar

### Tipos

### Grade de artigos

Três colunas no computador, uma no celular. Todos os cards da linha com a mesma altura.

### Mais lidos

O tipo Compacto em sequência numerada, para barras laterais.

## Feito com

Selo (categoria), Avatar (autor) e ícones. Cards com cor/fundo/superficie, cor/borda/padrao e raio/grande; Destaque com gradiente da cor da marca.

## Faça

- Use imagens com a mesma proporção em toda a grade.
- Mostre o tempo de leitura.
- Deixe o card inteiro clicável, não só o título.

## NÃO faça

- Resumos com mais de duas linhas.
- Misturar tipos de card na mesma grade.
- Imagens genéricas que não dizem nada sobre o conteúdo.

## Regras gerais

- Cores, espaços, cantos e sombras vêm sempre dos tokens (`var(--cor-…)`, `var(--espaco-…)`, `var(--raio-…)`). Nunca use códigos de cor soltos.
- O componente funciona no claro e no escuro sem mudanças: as cores mudam pelos tokens.
- Foco visível em tudo o que é clicável: anel de 2 px em `--cor-borda-foco`, afastado 2 px. Área de toque de pelo menos 24 px, e 40 px no celular.
- Elementos clicáveis têm cinco estados: padrão, hover, pressionado, foco e desabilitado.
- A cor nunca é o único sinal: estados usam também ícone, forma ou texto.


---

# Card de produto

Padrão do PASSI DS 1.1.0 · página "Card de produto" no arquivo Figma.

Cards para vender: mostram o produto, a avaliação, o preço e a ação de compra. Incluem também o item do carrinho e o resumo do pedido, que fecham a compra.

## Card de produto

Card de produto · vitrine de compra com capa, avaliação, preço e ação; item do carrinho com quantidade; e resumo do pedido. Troque a capa azul pela imagem real do produto.

- Variantes · Tipo: Vertical, Horizontal, Item do carrinho, Resumo do pedido

## Como usar

### Tipos

### Carrinho

Itens do carrinho ao lado do resumo do pedido.

## Feito com

Selo, Botão, Botão de ícone, Divisor e estrelas de avaliação em cor/fundo/alerta. Preços em Título/3.

## Faça

- Mostre o preço final com clareza, incluindo parcelas.
- Mostre o preço anterior riscado só quando houver desconto real.
- Deixe a ação de compra sempre visível.
- Explique custos extras antes do fim da compra.

## NÃO faça

- Esconder taxas até o último passo.
- Selos de urgência falsos, como “últimas unidades” em produto digital.
- Botões de compra pequenos ou de baixo contraste.

## Regras gerais

- Cores, espaços, cantos e sombras vêm sempre dos tokens (`var(--cor-…)`, `var(--espaco-…)`, `var(--raio-…)`). Nunca use códigos de cor soltos.
- O componente funciona no claro e no escuro sem mudanças: as cores mudam pelos tokens.
- Foco visível em tudo o que é clicável: anel de 2 px em `--cor-borda-foco`, afastado 2 px. Área de toque de pelo menos 24 px, e 40 px no celular.
- Elementos clicáveis têm cinco estados: padrão, hover, pressionado, foco e desabilitado.
- A cor nunca é o único sinal: estados usam também ícone, forma ou texto.


---

# Card de equipe

Padrão do PASSI DS 1.1.0 · página "Card de equipe" no arquivo Figma.

Cards para apresentar pessoas, como o time que mantém o design system. Mostram foto, nome, cargo e formas de contato.

## Card de equipe

Card de equipe · apresenta pessoas: Vertical (com bio), Foto grande (páginas de equipe) e Horizontal (listas e diretórios). Troque o preenchimento da foto. Links genéricos: site e e-mail.

- Variantes · Tipo: Vertical, Foto grande, Horizontal

## Como usar

### Tipos

### Grade de equipe

Quatro colunas no computador, duas no tablet e uma no celular.

### Diretório

O tipo Horizontal em lista.

## Feito com

Botão de ícone (site e e-mail), Selo (disponibilidade) e fotos de exemplo em gradiente da marca.

## Faça

- Use fotos com o mesmo enquadramento e fundo parecido.
- Escreva o cargo como a pessoa se apresenta.
- Ofereça um jeito de contato que a pessoa realmente use.

## NÃO faça

- Ícones de redes sociais que a pessoa não usa.
- Bios longas no card. Leve para a página da pessoa.
- Logos de marcas redesenhados à mão. Use os arquivos oficiais de cada rede.

## Regras gerais

- Cores, espaços, cantos e sombras vêm sempre dos tokens (`var(--cor-…)`, `var(--espaco-…)`, `var(--raio-…)`). Nunca use códigos de cor soltos.
- O componente funciona no claro e no escuro sem mudanças: as cores mudam pelos tokens.
- Foco visível em tudo o que é clicável: anel de 2 px em `--cor-borda-foco`, afastado 2 px. Área de toque de pelo menos 24 px, e 40 px no celular.
- Elementos clicáveis têm cinco estados: padrão, hover, pressionado, foco e desabilitado.
- A cor nunca é o único sinal: estados usam também ícone, forma ou texto.


---

# Planos e preços

Padrão do PASSI DS 1.1.0 · página "Planos e preços" no arquivo Figma.

Páginas de preço comparam opções lado a lado. O plano recomendado fica no centro, destacado, e cada card mostra preço, ação e o que está incluído.

## Card de plano

Card de plano · nome, descrição, preço, ação e lista de recursos. Use Destaque=Sim em um único plano, o recomendado.

- Variantes · Destaque: Não, Sim

## Grade de planos

Grade de planos · título, alternância Mensal/Anual e três cards de plano lado a lado, com o recomendado no centro.

## Como usar

### Card de plano

### Grade de planos

Valores e planos de exemplo. Troque pelos seus.

## Feito com

Card de plano (novo), Botão, Selo e Controle segmentado (mensal ou anual). Plano recomendado com borda cor/borda/marca e Sombra/Grande.

## Faça

- Mostre no máximo 3 ou 4 planos.
- Destaque um único plano recomendado.
- Use os mesmos recursos na mesma ordem em todos os cards.
- Deixe claro o período: por mês, por ano, para sempre.

## NÃO faça

- Esconder o preço atrás de “fale conosco” no plano mais comum.
- Letras miúdas com condições importantes.
- Comparar recursos diferentes em cada card.

## Regras gerais

- Cores, espaços, cantos e sombras vêm sempre dos tokens (`var(--cor-…)`, `var(--espaco-…)`, `var(--raio-…)`). Nunca use códigos de cor soltos.
- O componente funciona no claro e no escuro sem mudanças: as cores mudam pelos tokens.
- Foco visível em tudo o que é clicável: anel de 2 px em `--cor-borda-foco`, afastado 2 px. Área de toque de pelo menos 24 px, e 40 px no celular.
- Elementos clicáveis têm cinco estados: padrão, hover, pressionado, foco e desabilitado.
- A cor nunca é o único sinal: estados usam também ícone, forma ou texto.


---

# Trecho de código

Padrão do PASSI DS 1.1.0 · página "Trecho de código" no arquivo Figma.

O trecho de código mostra exemplos para quem vai implementar, como as variáveis do design system em CSS. Ele mantém a formatação, colore a sintaxe e permite copiar com um clique.

## Trecho de código

Trecho de código · mostra código com cores de sintaxe, números de linha, nome do arquivo e botão Copiar. Também há Terminal e o código Em linha, para usar no meio de textos. Fonte IBM Plex Mono.

- Variantes · Tipo: Bloco, Terminal, Em linha
- Variantes · Tema: Claro, Escuro

## Como usar

### Bloco

### Terminal e em linha

### Variáveis usadas

Sintaxe: cor/texto/marca (propriedades), cor/texto/sucesso (valores de variável), cor/texto/alerta (números e cores), cor/texto/terciario (comentários). Fundo: cor/fundo/sutil ou modo Escuro.

## Faça

- Mostre exemplos curtos e completos, que funcionem ao copiar.
- Indique o nome do arquivo ou a linguagem.
- Mantenha as cores de sintaxe com contraste suficiente.

## NÃO faça

- Imagens de código. Sempre use texto, para poder copiar.
- Linhas muito longas que exigem rolagem lateral.
- Misturar código e explicação no mesmo bloco.

## Regras gerais

- Cores, espaços, cantos e sombras vêm sempre dos tokens (`var(--cor-…)`, `var(--espaco-…)`, `var(--raio-…)`). Nunca use códigos de cor soltos.
- O componente funciona no claro e no escuro sem mudanças: as cores mudam pelos tokens.
- Foco visível em tudo o que é clicável: anel de 2 px em `--cor-borda-foco`, afastado 2 px. Área de toque de pelo menos 24 px, e 40 px no celular.
- Elementos clicáveis têm cinco estados: padrão, hover, pressionado, foco e desabilitado.
- A cor nunca é o único sinal: estados usam também ícone, forma ou texto.


---

# Player de vídeo

Padrão do PASSI DS 1.1.0 · página "Player de vídeo" no arquivo Figma.

O player mostra vídeos com controles claros: tocar, avançar, volume, legendas e tela cheia. Os controles aparecem sobre o vídeo e somem enquanto a pessoa assiste.

## Player de vídeo

Player de vídeo · Pausado (com botão grande de tocar e duração), Tocando (barra de controles com progresso, tempo, volume, legendas, ajustes e tela cheia) e Miniatura (flutuante, enquanto a pessoa navega). Troque a imagem do vídeo.

- Variantes · Estado: Pausado, Tocando, Miniatura

## Como usar

### Estados

## Feito com

Cor da marca no botão de tocar e no progresso; controles brancos sobre gradiente escuro para manter o contraste em qualquer vídeo. Ícones de mídia desenhados no mesmo traço do sistema.

## Faça

- Ofereça legendas em todos os vídeos.
- Mostre a duração antes de a pessoa apertar o play.
- Deixe os controles acessíveis pelo teclado (espaço para pausar).
- Não toque o vídeo sozinho com som.

## NÃO faça

- Esconder o botão de pausar.
- Vídeos que começam com som automaticamente.
- Controles pequenos demais para tocar no celular.

## Regras gerais

- Cores, espaços, cantos e sombras vêm sempre dos tokens (`var(--cor-…)`, `var(--espaco-…)`, `var(--raio-…)`). Nunca use códigos de cor soltos.
- O componente funciona no claro e no escuro sem mudanças: as cores mudam pelos tokens.
- Foco visível em tudo o que é clicável: anel de 2 px em `--cor-borda-foco`, afastado 2 px. Área de toque de pelo menos 24 px, e 40 px no celular.
- Elementos clicáveis têm cinco estados: padrão, hover, pressionado, foco e desabilitado.
- A cor nunca é o único sinal: estados usam também ícone, forma ou texto.


---

# Menus suspensos

Padrão do PASSI DS 1.1.0 · página "Menus suspensos" no arquivo Figma.

Menus que abrem sobre a página: o menu de contexto, com submenus, o menu da conta, que abre a partir do avatar, e o mega menu, para sites com muitas seções.

## Menus suspensos

Menus suspensos · Contexto com submenu (clique com o botão direito), Conta (a partir do avatar) e Mega menu (navegação com muitas seções, com destaque). Usa Item de menu, Avatar, Item de navegação e Selo.

- Variantes · Tipo: Contexto com submenu, Conta, Mega menu

## Como usar

### Contexto e conta

### Mega menu

Abre a partir de um item da navegação principal. Organize em colunas por assunto e use o destaque para a ação mais importante.

## Feito com

Item de menu, Avatar, Item de navegação, Selo e ícones. Painéis com cor/fundo/superficie, Sombra/Média ou Sombra/Grande, raio/grande e raio/extra.

## Faça

- Mostre uma seta nos itens que abrem submenu.
- Feche o menu ao escolher uma opção ou apertar Esc.
- No mega menu, use descrições curtas para cada link.

## NÃO faça

- Mais de um nível de submenu.
- Mega menus no celular. Use o menu em tela cheia.
- Abrir menus só com o hover, sem clique.

## Regras gerais

- Cores, espaços, cantos e sombras vêm sempre dos tokens (`var(--cor-…)`, `var(--espaco-…)`, `var(--raio-…)`). Nunca use códigos de cor soltos.
- O componente funciona no claro e no escuro sem mudanças: as cores mudam pelos tokens.
- Foco visível em tudo o que é clicável: anel de 2 px em `--cor-borda-foco`, afastado 2 px. Área de toque de pelo menos 24 px, e 40 px no celular.
- Elementos clicáveis têm cinco estados: padrão, hover, pressionado, foco e desabilitado.
- A cor nunca é o único sinal: estados usam também ícone, forma ou texto.


---

# Janela de ações

Padrão do PASSI DS 1.1.0 · página "Janela de ações" no arquivo Figma.

No celular, as ações sobre um item aparecem numa folha que sobe da parte de baixo da tela, perto do polegar. O botão flutuante abre atalhos para criar coisas novas.

## Janela de ações

Janela de ações · folha que sobe da base da tela no celular com ações sobre um item, folha de compartilhar e ações flutuantes que abrem a partir de um botão principal.

- Variantes · Tipo: Folha de ações, Compartilhar, Ações flutuantes

## Como usar

### Tipos

### Em uso

A folha sobe sobre a tela escurecida. Toque fora ou arraste a alça para baixo para fechar.

## Feito com

Botão (cancelar), Sobreposição, ícones e cor/fundo/superficie com cantos superiores de 24 px. Ações flutuantes com Sombra/Média e Sombra/Grande.

## Faça

- Coloque a ação destrutiva por último, em vermelho.
- Ofereça sempre um jeito claro de cancelar.
- Use títulos que lembrem sobre qual item a pessoa está agindo.

## NÃO faça

- Mais de 6 ações na mesma folha.
- Usar a folha de ações no computador. Prefira um Menu.
- Botão flutuante em telas que já têm uma ação principal visível.

## Regras gerais

- Cores, espaços, cantos e sombras vêm sempre dos tokens (`var(--cor-…)`, `var(--espaco-…)`, `var(--raio-…)`). Nunca use códigos de cor soltos.
- O componente funciona no claro e no escuro sem mudanças: as cores mudam pelos tokens.
- Foco visível em tudo o que é clicável: anel de 2 px em `--cor-borda-foco`, afastado 2 px. Área de toque de pelo menos 24 px, e 40 px no celular.
- Elementos clicáveis têm cinco estados: padrão, hover, pressionado, foco e desabilitado.
- A cor nunca é o único sinal: estados usam também ícone, forma ou texto.


---

# Central de notificações

Padrão do PASSI DS 1.1.0 · página "Central de notificações" no arquivo Figma.

A central reúne tudo o que aconteceu enquanto a pessoa estava fora: comentários, menções e atualizações. Ela abre a partir do sino e separa o que é novo do que já foi visto.

## Item de notificação

Item de notificação · quem fez, o quê e quando. Não lida tem fundo azul claro e ponto azul.

- Variantes · Estado: Não lida, Lida

## Central de notificações

Central de notificações · painel que abre a partir do sino, com abas, grupos por data, itens lidos e não lidos e ação para marcar tudo como lido. Inclui o estado vazio e o botão com contador.

- Variantes · Tipo: Painel, Vazio, Botão com contador

## Como usar

### Tipos

### Item de notificação

## Feito com

Item de notificação (novo), Avatar, Abas, Contador, Botão e Botão de ícone. Não lida em cor/fundo/marca-sutil com ponto cor/fundo/marca.

## Faça

- Agrupe por data: hoje, esta semana, antes.
- Diga quem fez, o quê e onde, numa frase só.
- Deixe marcar como lida uma a uma ou todas de uma vez.
- Leve a pessoa direto ao conteúdo ao clicar.

## NÃO faça

- Notificar tudo. Deixe a pessoa escolher o que quer receber.
- Contadores com números enormes. Acima de 99, mostre “99+”.
- Apagar notificações sem a pessoa pedir.

## Regras gerais

- Cores, espaços, cantos e sombras vêm sempre dos tokens (`var(--cor-…)`, `var(--espaco-…)`, `var(--raio-…)`). Nunca use códigos de cor soltos.
- O componente funciona no claro e no escuro sem mudanças: as cores mudam pelos tokens.
- Foco visível em tudo o que é clicável: anel de 2 px em `--cor-borda-foco`, afastado 2 px. Área de toque de pelo menos 24 px, e 40 px no celular.
- Elementos clicáveis têm cinco estados: padrão, hover, pressionado, foco e desabilitado.
- A cor nunca é o único sinal: estados usam também ícone, forma ou texto.


---

# Conversa com IA

Padrão do PASSI DS 1.1.0 · página "Conversa com IA" no arquivo Figma.

Tela de assistente montada só com componentes do PASSI. Começa avisando que a pessoa fala com uma IA, mostra de onde vêm as respostas e deixa parar, avaliar e chegar a uma pessoa. A cor da IA aparece só nos sinais, não na tela toda.

## Conversa com IA

Conversa com IA · tela pronta de assistente: histórico à esquerda, aviso de que a pessoa fala com uma IA no topo, mensagens com fontes e ações, e o Campo de pedido com o botão Parar. No celular, o histórico vira uma tela separada.

- Variantes · Plataforma: Computador, Celular

## Como usar

### Telas

No computador, o histórico fica à esquerda e a conversa ocupa o centro, com até 680 px de largura para facilitar a leitura. No celular, a conversa ocupa a tela e o histórico abre em outra tela.

## Feito com

Aviso de IA, Mensagem da conversa (Pessoa, IA com fontes, IA gerando), Campo de pedido, Rótulo de IA, Botão, Botão de ícone. Fundo: cor/fundo/pagina e cor/fundo/sutil no histórico.

## Faça

- Avise que é uma IA antes da primeira resposta.
- Mostre as fontes e ofereça avaliar cada resposta.
- Deixe sempre visível como parar e como falar com uma pessoa.
- Use a cor da IA só no avatar, no rótulo e nos avisos.

## NÃO faça

- Pintar a tela inteira com a cor da IA ou com gradientes.
- Dar nome e rosto de pessoa ao assistente.
- Esconder o histórico ou apagar conversas sem avisar.

## Regras gerais

- Cores, espaços, cantos e sombras vêm sempre dos tokens (`var(--cor-…)`, `var(--espaco-…)`, `var(--raio-…)`). Nunca use códigos de cor soltos.
- O componente funciona no claro e no escuro sem mudanças: as cores mudam pelos tokens.
- Foco visível em tudo o que é clicável: anel de 2 px em `--cor-borda-foco`, afastado 2 px. Área de toque de pelo menos 24 px, e 40 px no celular.
- Elementos clicáveis têm cinco estados: padrão, hover, pressionado, foco e desabilitado.
- A cor nunca é o único sinal: estados usam também ícone, forma ou texto.


---

# Cores

Fundamento do PASSI DS 1.1.0 · página "Cores" no arquivo Figma.

As cores têm duas camadas. Os primitivos são a paleta crua, com nome de cor e número. As cores semânticas dizem para que servem (fundo, texto, borda) e mudam sozinhas entre o modo claro e o escuro. Nos componentes, use sempre as semânticas.

## Como usar

### Paleta primitiva

O azul #2544EC é a cor da marca. O neutro é levemente quente, para conversar com o fundo creme. Âmbar, verde e vermelho comunicam alerta, sucesso e erro. O violeta só identifica o que veio da inteligência artificial.

### Cores semânticas

Cada linha mostra o valor no modo claro e no escuro. O nome diz onde usar: “fundo” vai em superfícies, “texto” em letras e ícones, “borda” em contornos e divisores. Os tokens de marca valem para qualquer marca: para usar outra, troque os valores dos primitivos, não os nomes.

### Contraste

Texto padrão sobre o fundo da página tem contraste de 19:1. O azul da marca com texto branco tem 6,7:1, acima do mínimo de 4,5:1 exigido pelas regras de acessibilidade (WCAG AA). Todas as combinações de texto e fundo, com o contraste no claro e no escuro, estão na página Acessibilidade.



---

# Tipografia

Fundamento do PASSI DS 1.1.0 · página "Tipografia" no arquivo Figma.

Três famílias, cada uma com um papel. Archivo dá personalidade aos títulos. Inter garante leitura confortável nos textos e na interface. IBM Plex Mono marca rótulos técnicos, códigos e atalhos. Todas são gratuitas no Google Fonts.

## Como usar

### Famílias

### Escala de estilos

Use os estilos de texto do arquivo em vez de configurar fonte e tamanho à mão. Assim, uma mudança no estilo atualiza tudo. No código, os tamanhos vêm em rem (16 px = 1 rem), para o texto crescer quando a pessoa aumenta a fonte do navegador.

## Faça

- Use no máximo três tamanhos de texto por tela.
- Mantenha linhas de leitura entre 60 e 80 caracteres.
- Use Archivo só em títulos; textos longos sempre em Inter.

## NÃO faça

- Texto em caixa alta em frases longas.
- Corpo de texto menor que 14 px.
- Misturar outras fontes com as três do sistema.



---

# Espaçamento e grid

Fundamento do PASSI DS 1.1.0 · página "Espaçamento e grid" no arquivo Figma.

Todo espaço do sistema é múltiplo de 4. Isso cria um ritmo visual que as pessoas sentem, mesmo sem perceber. As grades organizam a página em colunas para computador, tablet e celular.

## Como usar

### Escala de espaçamento

Use as variáveis da coleção “Espaçamento” nos preenchimentos internos e nos espaços entre elementos. No código, cada espaço vem em rem (16 px = 1 rem), para crescer quando a pessoa aumenta a fonte do navegador.

### Grades

Aplique os estilos de grade nas molduras das telas. As colunas se esticam; o espaço entre colunas e as margens são fixos.

### Larguras de referência

Computador: 1440 px (conteúdo até 1280 px). Tablet: 768 px. Celular: 375 px. Abaixo de 768 px, use a grade de celular.



---

# Cantos e sombras

Fundamento do PASSI DS 1.1.0 · página "Cantos e sombras" no arquivo Figma.

Cantos arredondados deixam a interface mais amigável; a regra é simples: quanto maior o elemento, maior o canto. As sombras mostram o que está mais perto da pessoa, como menus e janelas que flutuam sobre a página.

## Como usar

### Cantos

Variáveis da coleção “Raio”.

### Sombras

Estilos de efeito. Use só em elementos que flutuam; cards parados na página usam borda, não sombra.

### Camadas

O que cria uma superfície é a cor de fundo e a borda fina, não a sombra. No modo claro, a superfície é branca sobre a página levemente acinzentada; no escuro, ela é um pouco mais clara que a página. A sombra fica para o que flutua por cima do conteúdo.

### Bordas

borda/fina (1 px) para cards, campos e divisores. borda/grossa (2 px) para seleção e destaque. A borda fica sempre por dentro do elemento (Inside no Figma, box-sizing: border-box no código): um botão de 40 px continua com 40 px com ou sem borda. O foco não é borda: é um contorno (outline) desenhado por fora, que não muda o tamanho nem empurra os vizinhos.



---

# Ícones

Fundamento do PASSI DS 1.1.0 · página "Ícones" no arquivo Figma.

201 ícones desenhados para o PASSI DS, todos no mesmo grid de 24 px, com traço de 1,75 px e pontas arredondadas. Cada ícone é um componente: para trocar, use a propriedade de troca de ícone nos componentes.

## Como usar

### Biblioteca

Os nomes estão em português e descrevem o desenho, não a ação. Assim, o mesmo ícone pode servir em contextos diferentes.

### Tamanhos

16 px dentro de botões pequenos e selos. 20 px como padrão. 24 px em destaques e navegação. O traço acompanha a escala.

### Cor

O traço usa a variável cor/texto/padrao. Para mudar a cor em uma instância, troque a cor do traço do “Vetor” por outra variável de texto (marca, sucesso, erro…).

## Faça

- Acompanhe ícones de texto sempre que o significado puder gerar dúvida.
- Mantenha o mesmo tamanho de ícone dentro de um componente.
- Desenhe ícones novos no grid de 24 px, com traço de 1,75 px.

## NÃO faça

- Misturar ícones de outras bibliotecas.
- Usar ícones preenchidos ao lado dos de traço.
- Ícones como único jeito de entender uma ação importante.


## Nomes dos 201 ícones

Use só estes nomes. Não invente ícones novos nem use ícones de outras bibliotecas.

`seta-direita` · `seta-esquerda` · `seta-cima` · `seta-baixo` · `chevron-baixo` · `chevron-cima` · `chevron-direita` · `chevron-esquerda` · `check` · `fechar` · `mais` · `menos` · `info` · `ajuda` · `alerta` · `sucesso` · `erro` · `busca` · `usuario` · `sino` · `casa` · `menu` · `mais-opcoes` · `calendario` · `relogio` · `enviar-arquivo` · `baixar` · `olho` · `cadeado` · `estrela` · `coracao` · `arquivo` · `imagem` · `editar` · `lixeira` · `ajustes` · `sair` · `link` · `copiar` · `filtro` · `grade` · `livro` · `enviar` · `pasta` · `carrinho` · `compartilhar` · `atualizar` · `grafico` · `seta-diagonal` · `seta-diagonal-baixo` · `expandir` · `recolher` · `chevrons-direita` · `chevrons-esquerda` · `seletor` · `desfazer` · `refazer` · `trocar` · `entrar` · `link-externo` · `mover` · `arrastar` · `mais-opcoes-vertical` · `barra-lateral` · `painel` · `lista` · `lista-numerada` · `lista-de-tarefas` · `ordenar` · `aproximar` · `afastar` · `sincronizar` · `desligar` · `cadeado-aberto` · `chave` · `escudo` · `escudo-check` · `olho-fechado` · `engrenagem` · `etiqueta` · `marcador` · `bandeira` · `alfinete` · `anexo` · `imprimir` · `salvar` · `nuvem` · `nuvem-envio` · `pasta-mais` · `arquivo-texto` · `arquivo-mais` · `caixa-de-entrada` · `arquivar` · `terminal` · `codigo` · `tesoura` · `colar` · `quebra-cabeca` · `mensagem` · `conversa` · `email` · `telefone` · `celular` · `computador` · `notebook` · `tablet` · `microfone` · `microfone-mudo` · `camera-video` · `camera` · `video` · `tocar` · `pausar` · `parar` · `avancar` · `retroceder` · `volume` · `volume-mudo` · `musica` · `fone-de-ouvido` · `legendas` · `usuarios` · `usuario-mais` · `usuario-check` · `cracha` · `sacola` · `cartao` · `carteira` · `dinheiro` · `moeda` · `porcentagem` · `presente` · `entrega` · `loja` · `recibo` · `grafico-pizza` · `grafico-linha` · `tendencia-alta` · `tendencia-baixa` · `alvo` · `trofeu` · `raio` · `foguete` · `lampada` · `calendario-check` · `cronometro` · `ampulheta` · `historico` · `sol` · `lua` · `contraste` · `globo` · `mapa` · `localizacao` · `bussola` · `navegar` · `predio` · `graduacao` · `maleta` · `xicara` · `folha` · `fogo` · `gota` · `conta-gotas` · `pincel` · `paleta` · `camadas` · `cubo` · `recortar` · `regua` · `texto` · `negrito` · `italico` · `sublinhado` · `tachado` · `alinhar-esquerda` · `alinhar-centro` · `alinhar-direita` · `citacao` · `titulo` · `tabela` · `colunas` · `alerta-circulo` · `proibido` · `check-duplo` · `mais-circulo` · `menos-circulo` · `curtir` · `nao-curtir` · `sorriso` · `acessibilidade` · `sino-desligado` · `wifi` · `bateria` · `qr-code` · `codigo-de-barras` · `varinha` · `medalha` · `coroa` · `diamante` · `brilho`


---

# Gradientes

Fundamento do PASSI DS 1.1.0 · página "Gradientes" no arquivo Figma.

Seis gradientes feitos com as cores do sistema. Eles dão profundidade a capas, chamadas e fundos de destaque. Estão salvos como estilos de cor, prontos para aplicar.

## Como usar

### Estilos de gradiente

Aplique pelo painel de preenchimento, em “Estilos”.

### Em uso

Gradiente Noite como fundo de uma chamada, com texto branco.

## Faça

- Use gradientes em áreas grandes: capas, chamadas, fundos.
- Garanta contraste do texto com a parte mais clara do gradiente.
- Use um gradiente por tela.

## NÃO faça

- Gradientes em botões, campos ou textos pequenos.
- Misturar vários gradientes na mesma página.
- Criar gradientes com cores fora da paleta.



---

# Vidro e desfoque

Fundamento do PASSI DS 1.1.0 · página "Vidro e desfoque" no arquivo Figma.

O efeito de vidro deixa um painel translúcido e desfoca o que está atrás. Ele cria camadas sem esconder totalmente o fundo, bom para cartões sobre imagens e barras fixas.

## Painel de vidro

Painel de vidro · fundo translúcido com desfoque, para usar sobre imagens e gradientes. Claro sobre fundos claros e coloridos; Escuro sobre fotos.

- Variantes · Tipo: Claro, Escuro

## Como usar

### Painel de vidro

Sobre fundos coloridos ou fotos. O desfoque mantém o texto legível.

### Estilos de desfoque

Aplique em “Efeitos” junto com um preenchimento translúcido (branco a 55% ou preto a 45%).

## Faça

- Use vidro sobre fundos com cor ou imagem; sobre fundo liso ele não aparece.
- Teste o contraste do texto com o fundo mais claro e mais escuro.
- Prefira o vidro em elementos fixos ou flutuantes.

## NÃO faça

- Texto pequeno sobre vidro em fundos muito variados.
- Vários painéis de vidro empilhados.
- Usar vidro em listas longas: pesa no desempenho.



---

# Movimento

Fundamento do PASSI DS 1.1.0 · página "Movimento" no arquivo Figma.

O movimento explica o que está acontecendo: de onde algo veio e para onde foi. Animações curtas e consistentes deixam a interface mais clara sem chamar atenção para si mesmas.

## Como usar

### Durações

Quanto maior o elemento ou a distância percorrida, maior a duração.

### Curvas

A curva define a aceleração. Entrada começa rápido e termina suave; saída começa suave e acelera.

### Transições comuns

Combinações de duração e curva para os componentes do sistema.

## Faça

- Use movimento para explicar mudanças, não para enfeitar.
- Respeite a preferência de reduzir movimento do sistema operacional: use o modo Reduzido da coleção Movimento.
- Mantenha a maioria das animações abaixo de 300 ms.

## NÃO faça

- Animações que atrasam a pessoa, como esperar a tela terminar de mexer para clicar.
- Movimentos diferentes para a mesma ação em telas diferentes.
- Elementos piscando ou girando sem parar.



---

# Logo

Fundamento do PASSI DS 1.1.0 · página "Logo" no arquivo Figma.

O logo do PASSI DS junta um símbolo, um círculo cheio e um anel do mesmo tamanho sobrepostos, com o nome em dois pesos: PASSI forte e DS fino. Use sempre o componente Logo PASSI DS, nunca redesenhe.

## Logo PASSI DS

Logo PASSI DS · símbolo (círculo cheio e anel sobrepostos) e nome, com PASSI em peso forte e DS em traço fino. Tipo: Completo, Símbolo ou Logotipo. Fundo: Claro (símbolo azul e nome escuro), Escuro ou Azul (tudo branco). É vetor: redimensione segurando Shift.

- Variantes · Tipo: Completo, Símbolo, Logotipo
- Variantes · Fundo: Claro, Escuro, Azul

## Como usar

### Logo principal

Versão completa sobre o azul da marca. É a forma preferida sempre que houver espaço.

### Variações

Três tipos em três fundos. Escolha o fundo pela cor de onde o logo vai ficar.

### Construção

O símbolo nasce de dois círculos iguais. Tudo se mede pelo diâmetro D do círculo.

### Área de proteção e tamanho mínimo

Deixe livre, em volta do logo, pelo menos metade da altura do símbolo. Abaixo do tamanho mínimo, o anel some e o DS fica ilegível.

### Usos incorretos

O logo é um só. Estas mudanças quebram o reconhecimento.

## Faça

- Use sempre o componente Logo PASSI DS
- Escolha o Fundo de acordo com a cor de trás
- Redimensione segurando Shift para manter a proporção
- Respeite a área de proteção

## NÃO faça

- Desanexar o componente para ajustar o desenho
- Usar o logo azul sobre fundos azuis ou fotos sem contraste
- Logo menor que 16 px de altura
- Colocar o símbolo dentro de outras formas



---

# Utilitários

Fundamento do PASSI DS 1.1.0 · página "Utilitários" no arquivo Figma.

Peças de apoio para documentar e entregar telas ao time de desenvolvimento: marcadores numerados, notas de comportamento, medidas e o cabeçalho de cada tela. Elas não aparecem no produto, só no arquivo de trabalho.

## Marcador numérico

Marcador numérico · número para ligar um ponto da tela a uma nota de anotação.

- Variantes · Cor: Marca, Atenção, Erro

## Nota de anotação

Nota de anotação · explica comportamentos, regras e dúvidas ao lado das telas. Ligue cada nota a um ponto da tela com o mesmo número.

- Variantes · Tipo: Comportamento, Atenção, Pergunta

## Medida

Medida · mostra distâncias e tamanhos nas telas entregues ao desenvolvimento. Estique até o tamanho medido e escreva o valor (de preferência o nome do espaço, como espaco/6).

- Variantes · Orientação: Horizontal, Vertical

## Cabeçalho de entrega

Cabeçalho de entrega · fica acima de cada tela entregue ao desenvolvimento: fluxo, nome da tela, status, responsável e data.

## Anotação de acessibilidade

Etiquetas para anotar acessibilidade em telas: ordem de foco, títulos, regiões, rótulos, texto alternativo, anúncios do leitor de tela e elementos decorativos. Coloque ao lado do elemento anotado. Só para documentação: não vai para o produto.

- Variantes · Tipo: Ordem de foco, Título, Região, Rótulo, Texto alternativo, Anúncio, Decorativo

## Como usar

### Peças

### Em uso

Tela de cadastro anotada para o desenvolvimento.

### Kit de acessibilidade

Etiquetas para dizer a quem programa o que a tela não mostra: a ordem do foco, os títulos, as regiões, os rótulos, o texto das imagens e o que o leitor de tela anuncia. Anotar antes evita que a IA ou a pessoa que programa invente.



---

# Molduras de aparelho

Miscelânea do PASSI DS 1.1.0 · página "Molduras de aparelho" no arquivo Figma.

Molduras genéricas para mostrar telas em contexto: celular, tablet, notebook e janela de navegador. Desenho próprio, sem marca de fabricante, com a área de tela em tamanho real.

## Conteúdo de exemplo

Conteúdo de exemplo · ocupa a área de tela das molduras de aparelho até você trocar pelo seu componente de tela.

## Moldura de aparelho

Moldura de aparelho · celular, tablet, notebook e janela de navegador, em tamanho real. Troque a propriedade Conteúdo pelo seu componente de tela. Desenho genérico, sem marca de fabricante.

- Variantes · Tipo: Celular, Tablet, Notebook, Navegador
- Variantes · Cor: Escura, Clara

## Como usar

### Aparelhos

Quatro molduras em duas cores. A área de tela tem o tamanho real, em pixels, de cada formato.

### Em uso

Celular com a tela de cadastro do padrão Login. Para usar a sua, troque a propriedade Conteúdo por qualquer componente de tela.

## Faça

- Troque o Conteúdo por um componente de tela, sem desanexar a moldura
- Exporte em tamanho real (1x ou 2x) para apresentações
- Use a moldura escura em fundos claros e a clara em fundos escuros

## NÃO faça

- Esticar a moldura para caber uma tela de outro tamanho
- Acrescentar logos de fabricantes ou de lojas de aplicativos
- Usar moldura em documentação técnica, onde ela só ocupa espaço



---

# Tipos de arquivo

Miscelânea do PASSI DS 1.1.0 · página "Tipos de arquivo" no arquivo Figma.

Ícones de formato para anexos, downloads e listas de arquivos. Cada formato tem sigla, símbolo e cor, para ser reconhecido mesmo por quem não distingue cores.

## Ícone de arquivo

Ícone de arquivo · mostra o formato de um arquivo para baixar ou anexar. Sigla, símbolo e cor juntos, para não depender só da cor. Para formatos fora da lista, use Genérico e troque a sigla.

- Variantes · Formato: PDF, DOC, XLS, PPT, TXT, CSV, MD, PNG, JPG, SVG, GIF, MP4, MP3, WAV, ZIP, HTML, CSS, JS, JSON, Genérico

## Item de arquivo

Item de arquivo · linha de anexo com formato, nome, tamanho e botão de baixar.

## Como usar

### Formatos

Agrupados por tipo de conteúdo.

### Em uso

Lista de anexos de um projeto. O Item de arquivo junta o formato, o nome, o tamanho e o botão de baixar.

## Faça

- Use o formato real do arquivo que a pessoa vai baixar
- Mostre nome e tamanho ao lado do ícone
- Para formatos fora da lista, use Genérico e troque a sigla

## NÃO faça

- Diferenciar formatos só pela cor
- Siglas com mais de 4 letras
- Trocar o ícone do formato pelo logo de um programa



---

# Bandeiras

Miscelânea do PASSI DS 1.1.0 · página "Bandeiras" no arquivo Figma.

Bandeiras simplificadas para seletores de país, códigos de telefone e endereços. Todas na proporção 3:2 e sem brasões, para ficarem legíveis em tamanho pequeno.

## Bandeira

Bandeira · versões simplificadas para interfaces pequenas, todas em 3:2 e sem brasões ou escritos. Para uso oficial, use os arquivos publicados pelos governos.

- Variantes · País: Brasil, Argentina, Bolívia, Chile, Colômbia, Paraguai, Peru, Uruguai, Venezuela, Estados Unidos, México, Alemanha, Áustria, Bélgica, Dinamarca, Espanha, Finlândia, França, Grécia, Irlanda, Itália, Noruega, Países Baixos, Polônia, Portugal, Reino Unido, Rússia, Suécia, Suíça, Ucrânia, União Europeia, China, Índia, Japão, Nigéria

## Como usar

### Aviso

### Bandeiras

Agrupadas por região, em ordem alfabética.

### Em uso

Campo de telefone com código do país e lista para escolher o país de entrega.

## Faça

- Mostre sempre o nome do país junto da bandeira
- Coloque o país mais provável no topo ou já selecionado
- Use os arquivos oficiais em qualquer uso fora de telas

## NÃO faça

- Usar bandeira para representar idioma (português não é só do Brasil)
- Ampliar estas versões simplificadas para tamanhos grandes
- Mostrar bandeira sozinha, sem texto, em listas de escolha



---

# Formas

Miscelânea do PASSI DS 1.1.0 · página "Formas" no arquivo Figma.

Formas básicas e orgânicas para montar ilustrações simples, fundos de seção e destaques. São vetores: redimensione à vontade e troque a cor por uma variável.

## Forma

Forma · formas básicas e orgânicas para ilustrações simples, fundos e destaques. A cor vem de fundo/marca; troque pela variável que quiser.

- Variantes · Forma: Círculo, Quadrado, Quadrado arredondado, Pílula, Triângulo, Losango, Pentágono, Hexágono, Estrela, Selo, Coração, Seta, Balão de fala, Cruz, Anel, Meio círculo, Quarto de círculo, Arco, Orgânica 1, Orgânica 2

## Como usar

### Formas

### Cores

A forma usa fundo/marca. Para outras cores, troque o preenchimento por uma variável de dados ou de fundo, nunca por um código de cor solto.

### Em uso

Formas como decoração no fundo de uma seção de destaque.

## Faça

- Use formas como decoração, longe de textos e botões
- Troque a cor por variáveis de dados ou de fundo
- Redimensione mantendo a proporção (segure Shift)

## NÃO faça

- Formas que parecem botões ou ícones clicáveis
- Mais de três ou quatro formas na mesma área
- Texto em cima de forma sem contraste suficiente



---

# Status

Miscelânea do PASSI DS 1.1.0 · página "Status" no arquivo Figma.

Peças para mostrar estado: o ponto de presença de uma pessoa e o indicador de status de um item. Em todos, o estado é visto pela forma e pelo texto, não só pela cor.

## Ponto de status

Ponto de status · presença de uma pessoa (online, ausente, ocupado, offline). Cada estado tem forma própria, além da cor. Vai no canto inferior direito do avatar.

- Variantes · Status: Online, Ausente, Ocupado, Offline
- Variantes · Tamanho: P, M, G

## Indicador de status

Indicador de status · estado de um item (projeto, tarefa, pedido) em listas e tabelas. Marcador com forma própria + texto, para não depender só da cor.

- Variantes · Status: Ativo, Em andamento, Pendente, Pausado, Concluído, Erro, Rascunho, Arquivado

## Como usar

### Ponto de status

Quatro estados de presença em três tamanhos. A borda clara separa o ponto do avatar.

### Indicador de status

Oito estados para itens. Use o mesmo nome do status em todo o produto.

### Em uso

Equipe com presença e lista de projetos com status.

## Faça

- Junte cor com forma ou texto: o status não pode depender só da cor
- Use os mesmos nomes de status em todo o produto
- Ponha o ponto de presença no canto inferior direito do avatar

## NÃO faça

- Inventar cores novas para cada status
- Ponto de status sem legenda quando ele é a informação principal
- Mais de oito status diferentes no mesmo fluxo



---

# Seleção de texto

Miscelânea do PASSI DS 1.1.0 · página "Seleção de texto" no arquivo Figma.

Como o texto aparece quando a pessoa seleciona, busca ou digita: cor de seleção, marca-texto de busca e cursor. Duas variáveis novas garantem leitura no claro e no escuro.

## Cursor de texto

Cursor de texto · traço de 2 px na cor da marca. Em protótipos, alterne Visível e Oculto a cada 500 ms para piscar.

- Variantes · Estado: Visível, Oculto

## Seleção de texto

Seleção de texto · como o texto selecionado aparece. No computador, só o fundo fundo/selecao; no celular, com alças e menu de contexto.

- Variantes · Plataforma: Computador, Celular

## Como usar

### Cores

Duas variáveis de fundo. O texto por cima continua em texto/padrao nos dois modos.

### Seleção

No computador, só o fundo muda. No celular, aparecem as alças para ajustar o trecho e o menu com as ações.

### Em uso

Campo de busca com cursor e resultados com o termo marcado.

## Faça

- Use fundo/selecao e fundo/marca-texto, que já funcionam no claro e no escuro
- Mantenha o texto selecionado na cor normal de leitura
- Marque todas as ocorrências do termo buscado, não só a primeira

## NÃO faça

- Mudar a cor da letra ao selecionar
- Usar a cor da marca pura como fundo de seleção (o texto some)
- Esconder o cursor em campos com foco



---

# Reações

Miscelânea do PASSI DS 1.1.0 · página "Reações" no arquivo Figma.

Desenhos próprios para reagir a comentários e conteúdos, com o contador e a barra de reações rápidas. Traço simples, no mesmo estilo dos ícones do PASSI DS.

## Reação

Reação · desenhos próprios do PASSI DS para reagir a comentários e conteúdos. Cores fixas (não mudam no modo escuro). Use em 16, 20, 24 ou 40 px.

- Variantes · Reação: Feliz, Muito feliz, Rindo, Apaixonado, Piscando, Neutro, Pensativo, Surpreso, Triste, Chorando, Bravo, Legal, Coração, Estrela, Visto

## Contador de reação

Contador de reação · reação e quantidade abaixo de um comentário. Selecionado quando a própria pessoa reagiu.

- Variantes · Estado: Padrão, Selecionado

## Barra de reações

Barra de reações · aparece ao passar o cursor ou segurar um comentário. Seis reações rápidas e o botão para ver todas.

## Como usar

### Reações

Doze rostos e três símbolos. As cores são fixas: as reações não mudam no modo escuro.

### Tamanhos

Os desenhos são vetores e funcionam de 16 a 40 px.

### Em uso

Comentário com contadores e a barra de reações aberta.

## Faça

- Mostre a quantidade ao lado de cada reação
- Destaque a reação que a própria pessoa escolheu
- Ofereça no máximo seis reações rápidas e um botão para as demais

## NÃO faça

- Usar reações no lugar de botões de ação
- Trocar estes desenhos por emojis de plataformas no mesmo produto
- Reações em tamanho menor que 16 px

