P2.1 · Design system da aplicação

Skill obrigatória: `/identidade-ecomsmart`. Faça isto **antes** de qualquer tela — é o que evita retrabalho em todas as outras.

O prompt

Leia a skill /identidade-ecomsmart inteira, incluindo o manual em brand/manual-identidade-v2.4.pdf. Construa o design system do radar a partir de brand/tokens.css.

1. Tokens

Porte brand/tokens.css para o projeto, com as duas paletas completas:

:root{
  --brand-600:#0A5BF0; --navy-950:#0B1033;
  --surface-0:#FFFFFF; --surface-50:#F6F8FC; --surface-100:#EEF1F7;
  --border:#E1E6F0; --text:#0B1033; --text-2:#4A5670; --muted:#6B7790;
  --ok:#16A34A; --warn:#D97706; --err:#DC2626; --whatsapp:#25D366;
}
:root[data-theme="dark"]{
  --surface-0:#101729; --surface-50:#0A0F1F; --surface-100:#182238;
  --border:#1E2A44; --text:#EEF2FA; --text-2:#B7C1D9; --muted:#8A97B3;
  --brand-600:#5A8CFA; --brand-700:#8DB0FF; --brand-50:#132446;
}

Tema escuro em azul-noite, nunca roxo. Claro é o padrão. Seletor visível no cabeçalho, preferência em localStorage.

Escala de espaçamento só em múltiplos de 4: 4, 8, 12, 16, 24, 32, 48, 64, 96. Raios 8, 12, 16, 24, 999.

2. Tipografia

Só Figtree, variável 300 a 900, via Google Fonts com display=swap. Fallback system-ui, -apple-system, "Segoe UI", Roboto, sans-serif.

Implemente a escala do item 7 do manual como classes utilitárias. Código em interface usa Figtree 500 com tabular-nums.

3. Componentes

Cada um em claro e escuro, com estados (normal, hover, foco, desabilitado, carregando, erro):

Componente	Regra do manual
`Botao`	Um primário por tela. Secundário em contorno `#C9D1DF`. Sobre fundo escuro o primário vira branco com texto navy. Raio 999
`Card`	Borda 1 px `#E1E6F0`, raio 12, sem sombra
`Kpi`	Figtree 700, azul, `tabular-nums`, tracking -3%, período e base obrigatórios
`Pilula`	Estado em forma além da cor — ponto redondo, quadrado, losango — por acessibilidade
`Tabela`	Cabeçalho em rótulo 11–12 px caixa alta tracking +8%, números tabulares
`Sidebar`	Navy `#0B1033`, item ativo a 12% de branco
`CardsNumerados`	Padrão da aba Configurar: Nome → Canal → Mensagem → Regra → Agendamento → Revisão
`ModuloBloqueado`	Visível no menu, prévia desfocada, com um argumento real da base do lojista
`BannerProfundo`	As três camadas obrigatórias. Um degradê por peça
`Grafico`	Monocromático em escala de azul. Verde, âmbar e vermelho só para variação
`EstadoVazio`	Explica e convida. Nunca só "nenhum resultado"
`Skeleton`	Para o sync de 3 minutos do Raio-X

O ModuloBloqueado é o gancho comercial do Hub dentro da isca. Capriche: prévia desfocada de verdade, com a linha "71% dos seus clientes compraram uma vez só" preenchida com o dado real.

4. Layout

Shell da aplicação: sidebar navy, conteúdo #F6F8FC, container 1200, margens 48 / 32 / 20. Assistente de IA em painel fixo de 360 px à direita na web e bottom-sheet no mobile, ícone ✦, ações em cards com borda esquerda verde.

Mobile: uma decisão por tela, botão de largura total, tab bar inferior de 4 itens.

5. Guardas automáticos

Escreva testes que falham o build:

Qualquer cor fora da paleta oficial em CSS ou template
Qualquer fonte que não seja Figtree
Palavra proibida em template: ilimitado, disparo em massa, spam, lista fria, revolucionário, inovador, solução completa, 360º, alavancar, chatbot, espionar
Mais de um botão primário na mesma tela
box-shadow fora de modal e moldura de mockup
Componente sem variante escura

Esses testes são o que mantém a marca de pé quando o projeto crescer.

6. Storybook

Página /design-system/ interna listando todos os componentes em todos os estados, nos dois temas, com o código de uso ao lado. Serve de referência e de teste visual.

Critérios de aceite

Página /design-system/ no ar com todos os componentes
Capturas em claro e escuro, desktop e mobile
Os 6 guardas automáticos implementados, cada um com um caso que deve falhar
Checklist do manual respondido pergunta por pergunta
Contraste AA verificado: azul sobre branco 5,6:1, navy 18:1, #8DB0FF sobre navy 8,1:1