# Para quem desenha — Design System Phorte

> O que o arquivo do Figma tem de refletir do sistema — cor, tipografia, espaço, grade, ícones e interação — e o que uma peça precisa ter no desenho antes de ir para o código.

- Página: https://phorte-design-system.vercel.app/styleguide/comecar/design
- Índice: https://phorte-design-system.vercel.app/llms.txt

**O Figma está desativado até o fim do projeto** (decisão de setembro de 2026, Fase 2): a biblioteca volta a ser atualizada no fim de tudo. Até lá, a fonte da verdade é o código e este styleguide.

## 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. | https://phorte-design-system.vercel.app/styleguide/fundacao/cores |
| 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. | https://phorte-design-system.vercel.app/styleguide/fundacao/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. | https://phorte-design-system.vercel.app/styleguide/fundacao/espacamento |
| 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. | https://phorte-design-system.vercel.app/styleguide/fundacao/efeitos |
| 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. | https://phorte-design-system.vercel.app/styleguide/fundacao/grids |
| Í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. | https://phorte-design-system.vercel.app/styleguide/fundacao/icones |
| 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. | https://phorte-design-system.vercel.app/styleguide/fundacao/acessibilidade |

## 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.