Design System

Regras do Nova DS

As regras que todo sistema da Nova deve seguir. Use o prompt mestre como base e respeite os itens abaixo. Quem olhar tem que reconhecer na hora que é da Nova.

Baixar guia (.md)

Cores

Navy domina (estrutura). Azul e vermelho são secundários; azul é a cor dos gráficos.

  • Navy #1A2B40 = superfícies/estrutura.
  • Azul #3D7BFF = ação secundária + gráficos.
  • Vermelho #CF190F = CTA/alerta, com parcimônia.
  • Superfície branca sempre com texto navy.
  • Degradê em botão.
  • Vermelho/azul preenchendo áreas grandes.
  • Cor fora da paleta (roxo, laranja, neon decorativo).
  • Linhas/bordas pretas — use a borda navy do tema.

Tipografia

  • Fonte ÚNICA: Sora (400/500/600/700).
  • Escala: H1 28 · H2 22 · H3 18 · Body 15 · Caption 11 (uppercase).
  • Tudo em rem (a acessibilidade depende disso).
  • Qualquer outra fonte (Secuela, Nasalization, Inter, etc.).
  • Tamanhos em px fixo no texto/paddings.

Glassmorphism

  • Painel = fundo rgba(255,255,255,.05) + borda rgba(255,255,255,.10) + backdrop-blur(18px).
  • Hover sobe pra .07; sombra suave; radius 18-20.
  • No light: rgba(16,24,42,.04/.06) + borda rgba(16,24,42,.12).

Botões

  • Primário = glass neutro (texto branco no dark / navy no light) — é o CTA padrão.
  • Secundário azul e secundário vermelho (translúcidos, com parcimônia).
  • Ghost = transparente.
  • Degradê.
  • Branco sólido com texto claro (sempre texto navy).
  • Botão sem feedback de hover/focus.

Ícones

  • SOMENTE lucide-react (set único, linha fina).
  • Tamanho em em (crescem com o texto); cor via token.
  • Trave com ESLint (no-restricted-imports) e check anti-emoji no CI.
  • Emoji na interface.
  • Misturar pacotes (Heroicons, react-icons, Ant, MUI, Phosphor…).

Gráficos

  • Biblioteca: Recharts, sempre em AZUL (#3D7BFF).
  • Área com gradiente + linha 2.5px; eixos/grid sutis; tooltip glass.
  • Verde só para “concluído”; vermelho só para “erro/reprovado”.
  • Barras multicolor / paleta arco-íris.
  • Texto de eixo/legenda em branco fixo (use token).

Acessibilidade

  • Botão de acessibilidade com escala A / A+ / A++ (100/125/155%).
  • Aplicar como font-size no <html>; tudo em rem → o layout REFLUI (margens crescem junto, botões quebram linha).
  • O menu cresce pra baixo (popover), nunca sobrepõe o header.
  • Foco visível (outline azul), labels nos inputs, navegação por teclado. Persistir a escolha.
  • Escalar com zoom ou transform: scale (trava e borra).
  • Conteúdo cortado/escondido ao aumentar o texto.

Contraste e tema

  • Tema claro E escuro (.light/.dark), persistido. Dark é o padrão.
  • Paleta semântica com versão dark e light (AA): success/warning/danger/info.
  • Todo texto, badge e legenda passa AA nos dois temas.
  • Texto branco em fundo claro.
  • Amarelo claro como texto no light.

Login padrão

  • Card glass centrado sobre fundo com grade + brilho radial (azul/vermelho discreto).
  • Logo oficial no topo (branco + O vermelho no dark; azul no light). Nome do projeto + subtítulo.
  • Campos glass com label e olho na senha; botão primário glass (sem degradê).
  • Rodapé com versão; opcional “Seu logo aqui” pro projeto.

Veja a tela viva em /login.

Checklist de aceite

  • Em A++ (claro e escuro) o header reflui pra baixo, sem overlap.
  • Nenhum texto branco em fundo claro; tudo passa AA nos 2 temas.
  • Zero emoji e zero ícone fora do lucide-react.
  • Gráficos em Recharts azul; bordas navy (sem linhas pretas).
  • Logo oficial aplicado (sem versão cinza/recriada).