• O slug é o nome em minúsculas, sem acento, com hífen: rede-ideia, ideia-chat, lapidai.
• O logo já traz o nome: nunca escreva o nome ao lado dele.
• Respiro de metade da altura em volta. Largura mínima de 120px.
• Nunca distorça, recolora, rotacione, aplique sombra ou ponha sobre fundo que não seja o background ou o sidebar.
• No escuro entra a versão branca. Nunca o colorido sobre fundo escuro.
• O logo não muda com a primária: o token deriva do logo, nunca o contrário.

Toda marca com cor do banco leva contorno de 1px em foreground a 20%: a cor pode ser quase branca ou quase preta, e o contorno garante que ela apareça nos dois temas. Troque o tema e veja.

• Séries na primária e em degraus dela; neutros para o que é referência.
• Semântica só quando o dado é semântico: vencido em danger, no prazo em success.
• Cada série com 3:1 contra o card do tema. Rótulos em muted-foreground, grade na border.

• O componente do shadcn dimensiona o ícone; a tela não passa tamanho dentro de botão ou campo.
• O ícone acompanha a cor do texto onde está. Cor própria só nas semânticas e no indicador de estado.
• Ícone nunca vai sozinho sem nome acessível: botão só de ícone tem aria-label e tooltip.
• Carregando não é ícone: é Skeleton ou Spinner.

• Os dois temas são obrigatórios. Toda tela é feita e conferida nos dois.
• A escolha fica no menu do usuário, na linha "Tema", com o Sol e a Lua. Guardada por usuário.
• Inicial de quem nunca escolheu: claro, ou o do sistema operacional quando a stack permitir.
• Troca sem piscar e sem animação. Nenhum componente decide o que renderizar pelo tema: tudo é token.
• Imagens que dependem do tema (o logo) têm as duas versões.

• Controles: 150ms. Flutuantes: as animações do shadcn, 100ms (modal, menu, popover, select) e 200ms (folha lateral).
• Nada anima na troca de tema. Nada em loop, exceto o Spinner e o brilho do Skeleton.
• Quem pede movimento reduzido no sistema operacional não vê animação nenhuma.

Carregando: desabilitado, Spinner no lugar do ícone, rótulo mantido ("Salvar", não "Salvando…"). Passe o mouse nos botões só de ícone para ver a tooltip.

• Rótulo é verbo no infinitivo: "Salvar", "Excluir fila", "Nova fila". Nunca "OK", "Sim", "Clique aqui".
• Ícone à esquerda, 16px, 8px de distância. À direita só para "abre algo": seta, chevron, link externo.
• Desabilitado fica visível, a 50%, com tooltip explicando por quê quando o motivo não é óbvio.
• Link com cara de botão é um link com o estilo do botão. Nunca um link dentro de um botão.
• "Novo…" fica no canto superior direito do card que ele alimenta, no tamanho padrão (32px, a mesma altura da busca e dos filtros da barra), o único primário do card. Abaixo de 40rem de card, só o ícone, com nome e tooltip, como o último acima. Nunca no header.
• Não existe botão "Atualizar": os dados se atualizam sozinhos (3.8). "Tentar de novo" continua nos estados de erro.

• Checkbox para escolha múltipla e para "aceito". Rádio para escolha única entre 2 e 5 opções; acima, select.
• Switch só para ligar e desligar algo com efeito imediato. Dentro de formulário com "Salvar", é checkbox.
• Ícone dentro do campo, à esquerda, em muted-foreground. Ação dentro do campo (mostrar senha, limpar) à direita, como botão só de ícone.
• Foco: a borda vira ring e ganha um anel de 3px em ring a 50%. Erro: borda e anel em danger, e a mensagem diz o que fazer.
• Seleção múltipla mostra chips dentro do controle, cada um com o seu "×" nomeado.

• success: deu certo e precisa ficar à vista; se é passageiro, é toast. danger: a ação não aconteceu. warning: tem consequência. info: contexto neutro.
• Título só quando a mensagem precisa de manchete (o quinto exemplo). Com uma frase, só a descrição.
• Pode ficar dentro de um modal: é o lugar da recusa do servidor numa confirmação.
• Quando não é alerta: o que vale enquanto dura (o sexto exemplo) é indicador de estado, neutro, com role="status" e ícone próprio.
• Erro de campo não é alerta: é a mensagem do campo. Erro ao carregar lista não é alerta: é estado vazio com "Tentar de novo".

• Toast é para o que não precisa ficar: "Fila criada", "Alterações salvas". O que precisa ficar é alerta.
• Erro de formulário nunca é toast: vai no campo ou acima do rodapé.
• Pausa com o mouse em cima. No máximo 3 ao mesmo tempo; o mais antigo sai.
• Ação opcional ("Ver", "Desfazer") como botão ghost pequeno.
• Leitor de tela anuncia o erro na hora e os outros quando puder.

• O "Novo…" fecha a barra de ferramentas, à direita, no tamanho padrão, como o resto da barra: o único primário do card. Card com título: nas ações do cabeçalho (2.1).
• Toda listagem tem o padrão completo: busca, colunas ordenáveis, paginação, "…" e os estados (decisão do usuário, 2026-10-26).
• Toda coluna de valor único ordena, inclusive telefone, e-mail e código; "Atendentes" ordena pela quantidade. Não ordenam: ações, seleção, etiquetas e texto livre longo. O aria-sort acompanha, e o ícone aparece só na coluna ordenada. Clique nos cabeçalhos.
• Coluna de conjunto fechado vira filtro na barra: escolha única até 5 valores (Status, Setor); múltipla acima disso ou quando o normal é combinar (Atendentes). Até três à vista, o resto em "Filtros". Filtro ativo: borda na primária e contador; o texto continua em foreground.
• Número alinhado à direita, com dígitos tabulares.
• Primeira carga: linhas de Skeleton. Recarregando (busca, filtro, ordenação): os dados ficam e um Spinner aparece na barra. Nunca na releitura automática, em segundo plano.
• Busca vai ao servidor com atraso de 300ms; lista inteira no cliente filtra sem atraso.
• Lista paginada por cursor não pagina no cliente: mostra o que veio e "Carregar mais" no rodapé do card.
• A página nunca rola para o lado: colunas secundárias somem antes; se precisar, só a tabela rola dentro do card.

Larguras fixas, nunca aleatórias.

• 16px, no botão ou na barra de ferramentas. Nunca no lugar de um componente inteiro.
• Nunca na releitura periódica em segundo plano, na do foco da janela ou na releitura depois de uma ação.
• Toda chamada ao servidor tem um dos dois. Nenhuma tela fica muda esperando.

• Larguras: sm 400, md 560 (padrão), lg 720. No celular ocupa a largura toda; formulário longo vira folha de baixo.
• Fecha com "×", "Cancelar", Esc e clique fora. Com alteração não salva, pergunta antes de descartar.
• Um modal por vez. Modal não abre modal; abre, no máximo, uma confirmação.
• Recusa do servidor: alerta danger dentro do modal, acima do rodapé, sem fechar.
• Confirmação: pergunta no título, uma frase de consequência, "Cancelar" e o botão danger com o verbo e o objeto. Nunca "Sim" e "Não".
• O que dá para desfazer não confirma: executa e oferece "Desfazer" no toast.

• Até 2 níveis. Rótulo de grupo em 12px muted-foreground.
• Item com atalho mostra o atalho à direita. Item que abre diálogo termina em "…".
• Abre com clique ou Enter, navega com setas, fecha com Esc e devolve o foco ao gatilho.

• Grupos com rótulo e itens de 32px: ícone, rótulo, contador de 20px. Ativo em primária cheia, texto em primary-foreground: a 12% o texto não ficava nítido no escuro.
• Rodapé padrão de uma linha no fim da coluna de conteúdo (2.21).
• Estado recolhido guardado por usuário. Atalho Ctrl B (⌘ B).
• À direita do header, nesta ordem: os indicadores, o ? da ajuda (2.28), o ✨ do assistente (2.29, só nos produtos com IA) e o sino, botões só de ícone ghost icon-sm, na altura do recolher. O header é só disso: nenhuma ação da tela vai nele.
• Item cujas seções são telas próprias, como as configurações, abre o segundo menu (2.27) abaixo do header e continua ativo. O assistente de IA (2.29) usa o lugar do painel da direita, com 384px.
• O conteúdo começa logo abaixo, sem título e sem barra de ações: a primeira box vem direto, e o "Novo…" fica no card que ele alimenta.
• A tela preenche o painel da direita do shell; nunca monta um painel dentro do próprio conteúdo.
• Breadcrumb: o grupo em muted-foreground, sem link; a tela em 500. Detalhe: "Grupo › Lista › Item".
• Topo da sidebar em duas linhas de 48px: o logo do produto, com 32px de altura aberta e recolhida, e a troca de empresa (2.25) logo abaixo.

1. Cabeçalho: avatar, nome, e-mail e o papel ("Papel: Sysadmin"). Quem tem mais de um papel vê, no lugar, a linha "Papel: Sysadmin ⇄", que troca o papel.
2. Perfil e Configurações (só para o papel que tem a tela).
3. Ver como…, só para o Sysadmin. Com o modo ligado, no lugar dele, "Voltar ao meu usuário".
4. Linha Idioma: PT · EN · ES em sigla, com o nome na tooltip. Sem bandeira.
5. Linha Tema: Sol (Claro) e Lua (Escuro). Este menu funciona: clique.
6. Sair, por último.

Trocar idioma ou tema não fecha o menu. Na sidebar recolhida o botão mostra só o avatar, com tooltip. Avatar: foto ou iniciais sobre a primária; em grupo, sobrepostos com borda. MSALJP

• Só o Sysadmin vê o item. Ele abre a busca de pessoas por nome ou e-mail; escolher liga o modo.
• O sistema passa a se comportar como a pessoa: menu, Perfil, "Só o que é meu", contadores, sino e preferências. A tela remonta limpa.
• A faixa fica fixa acima do header, na largura da coluna de conteúdo: tinta de atenção, texto em warning-strong, "Voltar ao meu usuário" à direita. Sem "×". É a mesma faixa da troca de empresa (2.25); com as duas ligadas, uma embaixo da outra, esta primeiro.
• O avatar do rodapé da sidebar ganha o anel de atenção enquanto o modo vale.
• "Sair" encerra o modo junto com a sessão. A auditoria registra quem fez: "Marcos Silva, vendo como Ana Ribeiro".

• Painel da marca: degradê de 135° da primária clara para ela 25% mais escura; sempre colorido, nos dois temas; texto branco; logo branco no canto, 32px; frase do produto em 36/44/700, até duas linhas; até três recursos com o ícone sparkles.
• Coluna do formulário: fundo do tema, até 384px, centralizada na vertical. "Esqueci minha senha" à direita do rótulo da senha, na mesma linha. Botão de largura total. Linha de apoio com o e-mail de contato.
• Rodapé (2.21) na coluna da direita, embaixo do formulário, já estendido: produtos à vista, carrossel passando, sem a seta (decisão do usuário, 2026-10-27: na largura toda, ficou feio). No celular, recolhido com a seta, para não empurrar o formulário.
• Enviando: botão desabilitado com Spinner. Erro de credencial: alerta acima do botão, uma frase, sem dizer qual campo está errado.
• Abaixo de 1024px o painel vira uma faixa no topo com o logo e a frase; abaixo de 640px, só o logo.
• Recuperar senha, primeiro acesso e código de verificação usam a mesma estrutura.

• A linha: 40px, borda superior, texto 12 em muted-foreground, padding 12 × 24. Rola com a página; nunca fixa, nunca cobrindo conteúdo. "Um produto da Ideia Business", razão social e CNPJ, e-mail selecionável e, no canto, a seta.
• A seta: botão só de ícone chevron-up, com nome acessível, aria-expanded e tooltip "Produtos da Ideia Business". Abre e fecha só no clique, nunca no hover, com cursor de mão; vira chevron-down enquanto aberto.
• Estendido, é o próprio rodapé crescendo, no fluxo da página: a parte estendida entra acima da linha, o rodapé fica mais alto e a página rola até mostrá-lo inteiro. Nada fica por cima do conteúdo (decisão do usuário, 2026-10-26). Fundo da página (background); borda em cima, sem raio e sem borda nos lados; sombra só para cima; sem véu. Dentro: o título com "Quem está por trás" à direita, na mesma linha, a frase da empresa e o carrossel; o CNPJ só ganha uma linha embaixo quando a linha do rodapé não tem espaço. Fecha pela seta ou com Esc (o foco volta para a seta); clicar fora não fecha, porque o rodapé é parte da página.
• O carrossel: cards finos, de 240 × 54px (decisão do usuário, 2026-10-27): o card inteiro é o link do produto e abre em outra aba, com cursor de mão e fundo muted no hover; ícone 32px, nome e descrição de uma linha cada e o external-link à direita, sem "Conhecer". Uma seta em cada ponta, sem barra de rolagem; passa sozinho a cada 4 segundos em laço, para com o mouse em cima ou foco dentro, e não passa sozinho para quem pede movimento reduzido.
• Celular: duas linhas centralizadas, CNPJ só na parte estendida, que vira folha de baixo com véu, a seta de fechar e os cards empilhados. No login pelo celular, recolhido com a seta.
• Login: na coluna da direita, embaixo do formulário, já estendido e sem a seta. Tela de altura cheia: a linha fica abaixo da área que cresce; estendido, a área encolhe para dar lugar a ele.
• Nunca: parágrafo institucional, carrossel ou cards no corpo da tela; rodapé fixo; abrir no hover; a parte estendida por cima do conteúdo ou com cara de painel flutuante; esconder a linha. Só a parte estendida fica guardada até a seta.

• Mesma semântica nos dois: tablist com nome, tab com aria-selected, tabpanel ligado à aba.
• Teclado do Base UI: setas movem o foco e voltam ao início; Home e End; Enter ou Espaço abrem. O painel recebe foco, com o anel do guia.
• A aba aberta vive na URL, como os filtros. Sem espaço, as abas rolam na horizontal dentro do card; nunca duas linhas.
• Aba não é navegação nem modo de exibição: trocar de tela é o menu, e as seções de uma área (as configurações) vão no segundo menu (2.27); Lista ou Kanban fica na barra de ferramentas.

• Altura = janela − header − rodapé − respiros (− a faixa do "Ver como", quando ligada). No shell, a coluna de conteúdo ganha a altura da janela e cada nível até a coluna cresce com flex-1 e min-h-0.
• Quadro de borda a borda do card, colunas de no mínimo 288px com 12px entre elas, barra horizontal à vista (10px, polegar em input).
• Coluna em muted: cabeçalho parado com bolinha, nome (14/500) e contador; lista com rolagem própria; vazia, a caixa tracejada "Arraste tarefas para cá".
• Card da tarefa (Card size="sm"): código em mono e "…"; título em até 2 linhas; badges; progresso das subtarefas; prazo; responsável. Bloqueada: borda esquerda em danger.
• Compacto: só código, título e responsável. Lista: a tabela de dados (2.10), com paginação, e a página volta a rolar.

• Só no item cujas seções são telas próprias, cada uma com a sua URL (/configuracoes/tags; o item sem seção abre a primeira). Trocar de seção é trocar de tela: não são abas (2.23).
• Abaixo do header, que fica igual ao das outras telas, e à esquerda do conteúdo, até o fim da janela: parado enquanto o conteúdo rola, com rolagem própria se as seções não couberem. O rodapé (2.21) fica na coluna do conteúdo.
• 224px (w-56), fundo muted, borda à direita, padding 8. Itens de 32px, rótulo 14 e ícone de 16 opcional, raio 8. Mais de 6 seções: grupos com rótulo (12/500, muted-foreground), como os da sidebar.
• No escuro, o muted fica um tom mais claro que a sidebar. No claro, a sidebar já é branca: o muted é o cinza leve que separa as duas colunas.
• O item da sidebar continua ativo, em primária cheia, em qualquer seção. A seção aberta fica destacada de leve: fundo card, contorno edge e texto 500, sem a primária. Hover: card a 50%.
• O breadcrumb ganha o terceiro nível, "Grupo › Item › Seção", com o item como link para a primeira seção. Voltar do navegador volta à seção anterior; recarregar mantém a seção.
• Toda seção usa a largura toda que sobra, a listagem e o formulário (decisão do usuário, 2026-10-27): listagem em card, com o "Novo…" no canto do card (2.1); formulário em cards na mesma largura, campos em 2 colunas (3.4).
• nav com nome ("Seções de Geral") e links, com aria-current="page" na seção aberta. O Tab passa pelos links; não é tablist nem tem setas. Seção sem permissão não aparece, e o grupo vazio some com o rótulo.
• Nunca: abas para trocar de seção; segundo menu dentro de um card ou com título próprio; mais de um nível; uma seção só; a primária no item ativo.

• O ✨ (sparkles, ghost icon-sm, tooltip "Assistente" ou o nome da IA do produto) fica entre o "?" e o sino, com aria-expanded e aria-controls. Só nos produtos com IA. Abre e fecha só no clique: nunca sozinho, no hover ou arrastando.
• Ao abrir, o foco vai para o campo de mensagem. O × do painel, o Esc (com o foco dentro dele) e o próprio ✨ fecham, e o foco volta ao ✨.
• Encaixado à direita, 384px (w-96), do topo ao fim da janela, fundo sidebar e borda à esquerda, no lugar do painel da direita (2.15): aberto, toma o lugar do painel da tela, que volta quando ele fecha. O conteúdo encolhe; nada fica coberto.
• Sem espaço, abaixo de 1024px ou com a coluna de conteúdo abaixo de 640px (com o segundo menu, 2.27, por exemplo), abre por cima como folha da direita, com véu; no celular, a folha ocupa a tela toda.
• Cabeçalho de 64px, com a borda de baixo na linha do header: ✨ e o nome (14/500); Nova conversa (square-pen) e Fechar (x), só de ícone, com tooltip. Logo abaixo, "Nesta tela: Contatos" (12), com o registro aberto quando há, e o × que tira o contexto da conversa.
• Aberto ou fechado fica guardado por pessoa, e a conversa continua ao trocar de tela: o painel é do shell, não da tela.

• Sem conversa: uma frase do que ele faz e de 2 a 4 sugestões da tela, outline sm, uma por linha. Se a tela tem passo a passo (2.28), uma delas é "Fazer o passo a passo desta tela".
• A pergunta: balão muted à direita, até 80% da largura. A resposta: sem balão, na largura toda, 14/20, Markdown seguro, nunca HTML do modelo; embaixo, Copiar, Útil e Não útil (ghost icon-xs, com tooltip e aria-pressed).
• Enquanto responde: "Pensando…" com o shimmer (parado para quem pede movimento reduzido), e o enviar vira Parar (square). Erro dentro da conversa, com "Tentar de novo"; nunca toast.
• Toda mudança no sistema passa por uma confirmação: o cartão (Item outline sm) com o ícone da ação, a pergunta, o que muda numa frase, Cancelar (outline) e Confirmar (padrão; destructive na ação destrutiva). Depois, vira a linha do resultado. Ler, buscar e resumir não pedem confirmação.
• O campo: InputGroup com a área de texto e o enviar (arrow-up), desabilitado com o campo vazio; de 1 a 6 linhas. Enter envia, Shift Enter quebra a linha. Embaixo, "A IA pode errar. Confira o que for importante."
• Só vê e faz o que a pessoa pode; o servidor revalida. Quando não resolve, oferece "Falar com o suporte", levando a tela e a conversa.
• Nunca: balão flutuante ou janela por cima do conteúdo no desktop; abrir sozinho; mudar algo sem a confirmação; HTML da resposta inserido na página.

Quanto da primária do produto entra sobre a sidebar (a borda, sobre a border). O build confere o contraste em todo produto.

• Só quem está como Sysadmin (2.16). Com outro papel, ou no "Ver como", a entrada some e a URL da área leva ao início; o servidor responde 404.
• A entrada é um item como os do menu, fixo no pé da sidebar, acima do menu do usuário: à vista em qualquer tela, sem se misturar aos grupos. Recolhida, só o ícone shield, com tooltip.
• A cor: a sidebar inteira ganha o tom suave da primária (sidebar-admin); o item ativo continua na primária cheia e o logo é o do produto. Muda o tom, não a identidade. O header, o conteúdo e o rodapé não mudam.
• No topo, o bloco fixo "Administração · Todas as empresas" no lugar da troca de empresa (2.25). Não é botão.
• O menu tem só os itens da área, em grupos: Cadastros (Empresas, Produtos) e Acesso (Usuários). "Sair da administração" volta para a tela de antes.
• Breadcrumb "Administração › Produtos", e no detalhe "Administração › Produtos › Ideia Vault". Cada tela tem URL própria (/admin/produtos/ideia-vault).
• As telas seguem os tipos de tela do sistema (3.1). Em Produtos, a cor do produto é dado: amostra com o hex, como a cor de uma tag.
• No código, o layout da área marca data-area="admin"; o globals.css gerado troca --sidebar, --sidebar-accent e --sidebar-border com :root:has([data-area="admin"]), também na gaveta do celular.
• Nunca: outra cor para marcar a área; itens da área no meio dos grupos do sistema; a entrada à vista para quem não está como Sysadmin; o seletor de empresa dentro da área.

Na demonstração ao vivo: entre como Marcos (Sysadmin) e clique em "Administração", no pé da sidebar.

• Cada item é uma tela. Os itens entram em grupos pelo que são (dia a dia; o que a empresa configura; o que só a administração alcança), não pela permissão.
• Item só aparece para quem tem permissão; grupo sem item some com o rótulo. O servidor revalida toda permissão.
• Item ativo pela rota. Contadores na pílula. Subitens em sanfona, um nível só; as seções de uma área que são telas próprias (as configurações) vão no segundo menu (2.27), com o item ativo em qualquer seção.
• Nada do usuário no menu principal: perfil, preferências, idioma, tema e sair ficam no menu do usuário.
• Tela nova = um item no menu + o nome no breadcrumb. A tela não tem título.
• Topo da sidebar: o logo do produto e, abaixo, a empresa ativa. Trocar de empresa remonta a tela limpa e avisa "Você está em …"; quem alcança todas e saiu da empresa principal vê a faixa com o botão de voltar (2.25).

• Criar e editar são o mesmo formulário, com os campos preenchidos na edição.
• Em modal, por padrão, até 8 campos (recomendação, não limite). Maior que isso pode ser tela própria, com cards por grupo e "Cancelar" e "Salvar" no rodapé do último card.
• 2 colunas no desktop, 1 no celular; campo longo ocupa a linha. Rótulo acima. 16px entre campos.
• Ordem: o que identifica primeiro, o opcional por último.
• Validação no envio, e daí a cada mudança do campo que falhou. Foco no primeiro erro.
• Recusa do servidor: alerta danger acima do rodapé, sem fechar.
• "Cancelar" e "Salvar" à direita. Salvando: desabilitado com Spinner. Sucesso: fecha e toast.
• Fechar com alteração não salva pergunta: "Descartar alterações?".

• Toda listagem é tabela de dados: mesma barra de ferramentas, mesmo "…", mesmo rodapé.
• Cards no lugar de tabela só quando o item é visual e tem no máximo 4 informações; a grade segue os mesmos estados.
• Busca, filtro e ordenação ficam na URL e sobrevivem a recarregar a página.
• Trocar de empresa ou de contexto remonta a tela limpa: busca, página e linha aberta zeradas.

• Botão só de ícone no header, com o contador de não lidas na pílula primária.
• Popover de 360px (no celular, folha): ícone do tipo, título de uma linha, hora relativa, "Ver" quando há destino. Não lida com fundo muted. Vazio: "Nenhuma notificação."
• Cabeçalho: o título e duas ações, "Marcar todas como lidas" (ghost sm) e o botão settings com a dica "Configurar notificações", que abre as preferências.
• A que acabou de chegar também aparece como toast do tipo dela, com "Ver".

• De cada pessoa, não da empresa, e só do app: os canais (no sino, som, navegador) e os tipos (novas conversas, tarefas atribuídas a mim, menções).
• Cada switch salva na hora, com o toast "Preferência salva". Por isso o rodapé tem só "Fechar".
• Ligar a do navegador pede a permissão no próprio clique. Bloqueada, o switch fica desabilitado e um alerta warning diz como liberar.
• O e-mail fica só no Perfil, num switch "Notificações por e-mail", ligado por padrão. Configurações › Geral não tem mais o card "Notificações".

• Rótulo, mensagem, placeholder, tooltip, título e e-mail vêm de dicionário por idioma, com chave por contexto. Ícone e cor não substituem texto.
• A troca fica no menu do usuário, em sigla, e vale na hora. Guardada por usuário; sem escolha, o idioma do navegador se for um dos três, senão pt-BR.
• Texto cresce até 30% de um idioma para outro: nenhum rótulo com largura fixa, nenhum botão que corte texto. Plural e gênero vêm do dicionário.
• Texto que vem do banco fica como está; só a interface traduz.

• Uma frase por aviso, alerta, toast, descrição ou estado vazio. Se precisa de duas, a segunda é um link "Saiba mais".
• Título de toast: até 5 palavras. Título de modal: até 6. Rótulo de botão: 1 a 3.
• O texto é o que a pessoa precisa para decidir, não tudo o que é verdade sobre o assunto.
• Botão é verbo + objeto: "Salvar", "Excluir fila", "Tentar de novo". Nunca "OK", "Sim", "Confirmar", "Clique aqui".
• Erro diz o que aconteceu e o que fazer: "Não foi possível salvar. Tente de novo." Nunca código, stack ou "erro inesperado".
• Sem "Por favor", sem "Ops", sem exclamação. Voz ativa, presente, direta. Maiúscula só na primeira palavra.
• Nome das coisas pelo que a pessoa reconhece ("Notificações"), não pelo que o sistema faz ("Configuração de webhook").

À esquerda, o certo. À direita, o que não se escreve.

• Etapa 1, as opções: tabela de dados completa (2.10): busca, colunas ordenáveis, filtro Cargo (8 valores: escolha múltipla), paginação e estados. A ação "Ver acessos ›" é o único botão da linha, com o nome da pessoa no nome acessível; a linha inteira também abre.
• Etapa 2, a escolha: "← Pessoas" no topo, o título com o nome escolhido e a descrição com a contagem; depois, a tabela da etapa, também completa.
• Escolha que não existe mais (o link de alguém que saiu): o título diz "Pessoa não encontrada", com o "← Pessoas".

• Desliza em 200ms; com movimento reduzido, troca sem animação.
• Volta só pelo "← Pessoas" e pelo voltar do navegador. O Esc não volta: ele fecha camadas, e a etapa 2 não é camada (decisão do usuário, 2026-10-26).
• A escolha fica na URL (?pessoa=u2), com entrada no histórico. Busca, filtros, ordem e página da etapa 1 continuam na URL e voltam como estavam; os da etapa 2 têm nomes próprios (rq, rpage).
• Foco: ao ir, no título da etapa 2; ao voltar, na ação da linha de origem.
• Breadcrumb com o terceiro nível: "Configurações da empresa › Acesso a projetos › Ana Ribeiro", com o nível do meio como link para a etapa 1.

1. Tokens no globals.css: onde mora a identidade. Trocar --primary muda tudo.
2. className por instância, com cn(): ajuste pontual.
3. Editar o arquivo em components/ui/: só para mudar o padrão global (variantes novas do Badge e do Alert, o item ativo do Sidebar, textos em pt-BR). add --overwrite desfaz: reconciliar à mão.

• Nada nosso em components/ui/ nem em lib/utils.ts além do nível 3; helpers em lib/<nome>.ts.
• apply --preset só com --only theme ou --only font.
• Nunca title, asChild, Link dentro de Button, style inline fora da cor do banco, onPress.
• Nenhuma cor em classe: só tokens. Arranjo dentro do shell por @container, não por sm:/md:.
• Projetos ainda em Tailwind 3 + Radix (DevTasks, Radar RH): mesmos tokens em HSL no tailwind.config, asChild no lugar de render; migram quando a tela for refeita.