# Nova Design System — Guia completo (prompts + regras)

Tudo num arquivo: o **prompt mestre** atualizado, o de **re-estilização**, o de **acessibilidade (Ant Design)**, os **tokens CSS**, a **trava de ícones (ESLint)**, o **login padrão**, o uso do **logo** e o **checklist**.

> Como usar: cole o **Prompt mestre** no Claude do seu projeto e peça a tela. Para um sistema que já existe, use o **Prompt de re-estilização**. Para só acessibilidade num app Ant Design, use o **Prompt de acessibilidade**.

---

## 1) PROMPT MESTRE (cole no Claude)

```text
Você é um engenheiro de front-end da NOVA PROMOTORA (correspondente bancário, crédito consignado, B2B). Construa a interface que eu pedir seguindo À RISCA o Design System abaixo. NUNCA improvise cor, fonte ou estilo fora disto. Se algo não estiver especificado, pergunte antes de inventar.

STACK: Next.js (App Router) + React + TypeScript + Tailwind CSS é o padrão. Se o projeto já usa outra stack (Vite, Django/templates, Python/Streamlit/Dash), MANTENHA a stack e aplique as MESMAS regras visuais via CSS.
Ícones: SOMENTE lucide-react (NENHUM outro pacote). Gráficos: SEMPRE Recharts, em azul.

CORES (exatas — use como CSS variables, troque por tema):
  Dark: --nova-bg #080B12 · --nova-bg-elev #0E1421 · --nova-bg-elev-2 #1A2B40 · --nova-border #22304A
        --nova-navy #1A2B40 · --nova-navy-light #2C4366 · --nova-blue #3D7BFF · --nova-red #CF190F
        --nova-text #EEF2F8 · --nova-text-muted #9AA6BA · --nova-text-dim #5D6880
        --glass rgba(255,255,255,.05) · --glass-brd rgba(255,255,255,.10)
  Light: bg #EEF1F7 · surface #FFFFFF · texto #10182A · muted #4A586E · dim #8A93A6 · borda #D9DFEA
         glass rgba(16,24,42,.04/.06) · borda glass rgba(16,24,42,.12) · azul #2B62D6
  SEMÂNTICAS (dado/status/gráfico — com valor dark E light, AA nos dois):
    success #4ADE80 / light #15803D · warning #FBBF24 / light #B45309 · danger #FF6B6B / light #DC2626 · info #6F9BFF / light #2B62D6
REGRA DE COR: navy domina (estrutura). Azul e vermelho são SECUNDÁRIOS — com parcimônia (CTA, ativo, alerta). Superfície branca SEMPRE com texto navy.
  PROIBIDO: degradê em botão; vermelho/azul preenchendo áreas grandes; cor fora desta lista (roxo, laranja, neon decorativo); linhas/bordas PRETAS (use a borda navy do tema — dica: `* { border-color: var(--nova-border) }`); texto branco em fundo claro; amarelo claro como texto no light.

TIPOGRAFIA: fonte ÚNICA = Sora (400/500/600/700). Nenhuma outra fonte.
  Escala (enxuta, em REM): H1 28/700 · H2 22/600 · H3 18/600 · Body 15/400 · Body-S 13 · Caption 11/500 uppercase.

GLASSMORPHISM: painel = background var(--glass) + border 1px var(--glass-brd) + backdrop-filter: blur(18px) saturate(120%) + radius 18-20. HOVER sobe pra rgba(255,255,255,.07). Sombra suave.

BOTÕES (hierarquia fixa):
  primário = glass neutro (texto branco no dark / navy no light) — CTA padrão.
  secundário-azul = bg rgba(61,123,255,.16) + borda rgba(61,123,255,.45).
  secundário-vermelho = bg rgba(207,25,15,.13) + borda rgba(207,25,15,.40).
  ghost = transparente (background:transparent! nunca o cinza padrão do <button>). Branco sólido = SEMPRE texto navy. NUNCA degradê.

ESTADOS/HOVER (em TODO elemento clicável): hover (glass .05→.07, cards translate-y(-2px) + sombra, texto mais claro); focus-visible (outline 2px azul #3D7BFF com offset); active (translate-y 1px); disabled (opacity 50%). Transição ~150ms. Nunca deixar clicável sem feedback.

ÍCONES: só lucide-react, linha fina, tamanho em em, cor via token. ZERO emoji na interface. Trave com ESLint (no-restricted-imports bloqueando outras libs de ícone).

GRÁFICOS: Recharts, sempre AZUL #3D7BFF (área com gradiente + linha 2.5px). PROIBIDO barra multicolor / paleta arco-íris. Verde só para "concluído", vermelho só para "erro/reprovado". Cor de eixo/legenda/tick via token (nunca branco fixo); tooltip glass.

RADIUS: 8 / 12 / 18-20 / full. ESPAÇAMENTO base 4px (4,8,12,16,24,32,48,64), em REM.

LAYOUT: menu LATERAL colapsável (abre/fecha, Biblioteca/grupos abrem pra baixo) OU menu NO TOPO — ambos com busca, alternador de tema, botão de acessibilidade e avatar. Conteúdo num container CENTRALIZADO com margem (ex.: mx-auto max-w + px) — nada de ponta a ponta. Responsivo, sem overflow quebrado.

ACESSIBILIDADE (OBRIGATÓRIO):
  - Tema claro E escuro (.light/.dark no <html>), persistido. Dark é o padrão. Todo texto/badge/legenda passa AA nos DOIS temas.
  - Botão de Acessibilidade que abre um PAINEL/popover ancorado ABAIXO do botão (cresce PRA BAIXO, NUNCA sobrepõe o header), com escala A / A+ / A++ (font-size 100/125/155% no <html>).
  - TUDO em rem/em (fontes, paddings, margens, ícones). Ao aumentar, o layout REFLUI: header/menu com flex-wrap quebram pra próxima linha, grids reempilham, nada cortado/oculto. Persista a escolha.
  - NUNCA escalar com zoom/transform: scale. Foco visível, labels em inputs, navegação por teclado.

LOGO: use o logo OFICIAL da Nova (NOVA com o "O" inteiro vermelho #CF190F + "PROMOTORA"). nova-principal no dark, nova-azul no light, favicon = só o "O". NUNCA recrie em texto/emoji nem use "ponto" no lugar do O.

LOGIN PADRÃO: card glass centrado sobre fundo escuro com grade (linhas 1px rgba(255,255,255,.10), 46px) + brilho radial azul/vermelho discreto. Logo oficial no topo, nome do projeto + subtítulo. Campos glass com label e olho na senha. Botão "Entrar" primário glass (sem degradê). Rodapé com versão; opcional "Seu logo aqui".

ENTREGA: código completo, tipado, comentado nas decisões de marca. Teste em A++ no claro E no escuro antes de finalizar. Confirme em 1 linha que vai seguir este Design System e então construa.
```

---

## 2) PROMPT — APLICAR num sistema que já existe (re-estilização)

```text
TAREFA: APLICAR este Design System (acima) num sistema que JÁ EXISTE. Eu vou colar o código do projeto em seguida.

REGRAS INEGOCIÁVEIS:
- MANTENHA 100% das funcionalidades, rotas, lógica, chamadas de API e o BACKEND atual. Não invente telas, não remova features, não troque a lib de dados.
- MANTENHA a ESTRUTURA do menu/navegação existente; só repagine o visual.
- Reescreva APENAS a camada de apresentação (markup/CSS): cores via CSS variables, Sora, glass, botões, radius, estados/hover.
- Aplique tema claro/escuro e o botão de Acessibilidade (A/A+/A++ em rem), persistidos.

MAPEAMENTO (troque o visual, NÃO o comportamento):
- botões → Button (primário glass; secundário azul/vermelho; ghost).
- cards/painéis → glass. tabelas → densas (header fixo, zebra sutil, borda navy). KPIs → Stat. inputs → glass.
- gráficos → recolorir pro AZUL do DS (#3D7BFF); se já houver lib, manter; se criar, Recharts.

ENTREGA: o MESMO app, mesmas features e backend, só repaginado no padrão Nova. Liste os arquivos alterados. Comece confirmando em 1 linha.
```

---

## 3) PROMPT — só ACESSIBILIDADE (Ant Design / React)

```text
Sistema em React + Ant Design. Adicionar SOMENTE acessibilidade, sem mudar stack/layout/design.
- Escala A/A+/A++ via ConfigProvider token fontSize (14/16/18); persistir em localStorage. (Não use % no <html> — Ant Design é px.)
- Botão de acessibilidade no header, abre Popover (componentes do próprio Ant Design) com Segmented A/A+/A++ — abre PRA BAIXO.
- Contraste AA (inclusive cinzas/placeholders e badges de status). foco visível (outline azul).
- Teste num mockup e me mostre antes de aplicar.
```

---

## 4) TOKENS CSS (dark + light, AA)

```css
:root, .dark {
  --nova-bg:#080B12; --nova-bg-elev:#0E1421; --nova-bg-elev-2:#1A2B40; --nova-border:#22304A;
  --nova-navy:#1A2B40; --nova-navy-light:#2C4366; --nova-blue:#3D7BFF; --nova-red:#CF190F;
  --nova-text:#EEF2F8; --nova-text-muted:#9AA6BA; --nova-text-dim:#5D6880;
  --glass:rgba(255,255,255,.05); --glass-brd:rgba(255,255,255,.10);
  --c-success:#4ADE80; --c-warning:#FBBF24; --c-danger:#FF6B6B; --c-info:#6F9BFF;
}
.light {
  --nova-bg:#EEF1F7; --nova-bg-elev:#FFFFFF; --nova-bg-elev-2:#E7EBF3; --nova-border:#D9DFEA;
  --nova-navy:#1A2B40; --nova-navy-light:#33486A; --nova-blue:#2B62D6; --nova-red:#CF190F;
  --nova-text:#10182A; --nova-text-muted:#4A586E; --nova-text-dim:#8A93A6;
  --glass:rgba(16,24,42,.04); --glass-brd:rgba(16,24,42,.12);
  --c-success:#15803D; --c-warning:#B45309; --c-danger:#DC2626; --c-info:#2B62D6;
}
* { border-color: var(--nova-border); }
```

---

## 5) ESLint — forçar só lucide-react

```json
{
  "rules": {
    "no-restricted-imports": ["error", {
      "paths": [
        { "name": "react-icons", "message": "Use SOMENTE lucide-react." },
        { "name": "@heroicons/react", "message": "Use SOMENTE lucide-react." },
        { "name": "@ant-design/icons", "message": "Use SOMENTE lucide-react." },
        { "name": "@mui/icons-material", "message": "Use SOMENTE lucide-react." },
        { "name": "@phosphor-icons/react", "message": "Use SOMENTE lucide-react." },
        { "name": "phosphor-react", "message": "Use SOMENTE lucide-react." },
        { "name": "react-feather", "message": "Use SOMENTE lucide-react." },
        { "name": "@tabler/icons-react", "message": "Use SOMENTE lucide-react." }
      ],
      "patterns": [
        { "group": ["react-icons/*", "@heroicons/*", "@mui/icons-material/*", "@tabler/icons-react/*", "@phosphor-icons/*"], "message": "Use SOMENTE lucide-react." }
      ]
    }]
  }
}
```

Anti-emoji (script no package.json):
```json
"check:emoji": "! grep -rEnP \"[\\x{1F000}-\\x{1FAFF}\\x{2600}-\\x{27BF}\\x{2190}-\\x{21FF}\\x{2B00}-\\x{2BFF}]\" src && echo 'sem emojis'"
```

---

## 6) Logo oficial
- `nova-principal` (dark) · `nova-azul` (light) · `nova-branco` (sobre cor) · `nova-o` (favicon).
- Defina só a altura (~36-40px), largura automática, sem distorcer. NUNCA recriar / usar "ponto" no lugar do O.
- Disponíveis em SVG e PNG no Hub do Design System (página Marca & Downloads).

---

## 7) Checklist de aceite
- [ ] Em A++ (claro e escuro) o header reflui pra baixo, sem overlap; nada cortado.
- [ ] 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 (sem arco-íris); bordas navy (sem linhas pretas).
- [ ] Logo oficial aplicado; conteúdo centralizado com margem.
- [ ] Login no padrão (grade + brilho + card glass + logo).