Para quem desenha
Em andamentoO Figma está desativado até o fim do projeto
A biblioteca volta a ser atualizada no fim de tudo (decisão de setembro de 2026, Fase 2). Até lá, a fonte da verdade é o código e este styleguide — e esta página é a lista do que o Figma tem de refletir quando for religado.
O que o Figma tem de refletir
| Coleção | O que tem | A regra | Onde ver |
|---|---|---|---|
| Cor | 32 variáveis, em 7 grupos | O nome da variável do Figma é o do token sem o `--` (`primary`, `muted-foreground`). Marca (`brand-red`, `brand-green`) e interface ficam em grupos separados: a marca é decorativa. | Cor |
| Tipografia | Poppins, 5 pesos (400, 500, 600, 700, 900), sem itálico | Os estilos de texto são as variantes do `Typography` (h1 a h4, p, small, tiny), com a entrelinha de cada uma. Nada abaixo de 12px. | Tipografia |
| Espaço | 13 degraus, de 2 a 96px | Auto layout só com os degraus (`espaco-4` = 16px, `espaco-6` = 24px…). Valor fora da escala é desvio. | Espaço |
| Raio e sombra | 4 raios, 4 degraus de sombra | Os raios derivam do raio base de 8px; as sombras são repouso, hover, flutuante e sobreposição. | Raio e sombra |
| Grade e telas | 3 larguras de quadro: Celular 375px, Tablet 768px, Computador 1280px | Contêiner de 1320px, com 16px de margem no celular e 24px a partir do tablet. Uma coluna que vira duas, três ou quatro — sem grade de 12. | Grade e telas |
| Ícones | Lucide, 5 tamanhos (12, 16, 20, 24, 32px) | Grade de 24px, traço 2, cantos redondos, uma cor só (a do texto). Ícone novo vem da Lucide; se não houver, segue o mesmo desenho. | Ícones |
| Interação | Alvo de 44×44px · anel de foco de 2px | Todo controle com 44px de área de toque, mesmo quando o desenho é menor. O foco é o anel `--ring` (#7D1B1B) de 2px, afastado 2px; sobre fundo escuro, o claro. | Interação |
Antes de entregar uma peça para o código
Os estados
Padrão, hover, foco visível, pressionado, desabilitado, erro, carregando e, se tiver, vazio. Foco é o anel do sistema, não só uma cor de fundo.
As três larguras
Celular (375px), tablet (768px) e computador (1280px). E o que acontece a 320px: nada pode rolar de lado.
Só tokens
Cor, espaço, raio e sombra pelas variáveis. Vermelho e verde da marca não vão atrás de texto pequeno nem em controle: para isso há `primary` e `secondary`.
Estado nunca só por cor
Erro, sucesso, selecionado: cor com ícone ou com texto. Quem não distingue o vermelho precisa ver a diferença.
O texto de verdade, em pt-BR
Rótulos, botões (verbo e objeto: "Enviar inscrição") e mensagens de erro que dizem como acertar. O texto mais longo que a peça vai receber, para ver se cabe.
O teclado
A ordem do Tab, o que recebe o foco quando algo abre ou fecha, e o que o `Esc` faz. Um controle só com ícone leva o nome que o leitor de tela vai dizer.
Imagens e movimento
Cada imagem marcada como informativa (com o texto alternativo proposto) ou decorativa. O que se move sozinho, por quanto tempo e onde fica a pausa.