Portal Solar · Documento de Execução

Plano de Design Final

O que está errado, por quê, e como consertar em ordem de prioridade.

Diagnóstico — O que está quebrado

Sem sistema tipográfico

Tamanhos, pesos e famílias de fontes variam arbitrariamente entre páginas. Não existe escala definida (h1→h6, body, caption, mono).

Hierarquia visual inconsistente

Elementos importantes não se destacam dos secundários. Tudo parece ter o mesmo peso visual, gerando fadiga de leitura.

Espaçamentos não sistematizados

Cada componente usa values ad hoc (px-3, px-6, px-7, px-8). Sem um grid de 4px ou 8px base, o layout parece 'tremido'.

Contraste baixo em texto secundário

Opacidades como /0.35, /0.3 tornam texto ilegível. Contraste mínimo WCAG AA é 4.5:1 para texto normal.

Interatividade não sinalizada

Usuário não sabe o que é clicável. Botões misturam-se com texto estático. Sem hover states consistentes.

Cards sem identidade visual

Cards de Atlas, Cultura e Compass parecem feitos por pessoas diferentes. Sem padrão de imagem, título, meta, ação.

Navegação fragmentada

3 sistemas de nav (top, bottom, overlay) com comportamentos diferentes. Usuário perde-se entre Atlas, Compass e portais.

Ausência de grid de layout

Conteúdo ora vai edge-to-edge, ora tem max-w, ora tem padding variável. Nada se alinha visualmente.

Execução — Ordem de prioridade

Escolher a direção no Atelier

Acesse /atelier, navegue pelas 24 opções, selecione uma. Copie o token gerado.

→ /atelier

Aplicar o token de design

Cole o token em atlas/lib/design-token.ts. Execute o script de conversão que transforma o token em CSS variables no globals.css.

→ npm run apply-style

Definir escala tipográfica

6 níveis: display (2.5rem), h1 (1.8rem), h2 (1.3rem), h3 (1rem), body (0.875rem), caption (0.75rem). Aplicar como classes Tailwind ou CSS variables.

→ tailwind.config.ts

Grid de 8px base

Todos os espaçamentos devem ser múltiplos de 8 (ou 4 para micro-ajustes). Remover todos os valores arbitrários e padronizar.

→ globals.css

Padronizar o card

Um único componente AtlasCard que funciona em todos os contextos: galeria, lista, horizontal, home. Props: size (sm/md/lg), variant (default/featured).

→ atlas/components/ui/Card.tsx

Corrigir contraste

Nenhum texto informativo abaixo de 60% de opacidade. Títulos: 90%+. Labels: 70%+. Muted: 55%+ (mínimo). Eliminar /0.3, /0.35.

→ busca global por '/ 0.3'

Sistema de interatividade

Todo elemento clicável: border ou underline no hover. Cursor pointer. Transição 150ms. Nada mais, nada menos.

→ globals.css :hover rules

Revisar página por página

Atlas → Academia → Cultura → Compass → Display. Cada página deve usar os mesmos tokens, nenhum valor hardcoded.

→ audit checklist

Regras de Ouro — Não quebre estas

Um card, uma regra

AtlasCard é o único card do sistema. Não crie variantes arbitrárias.

Texto sempre legível

Nenhum texto informativo abaixo de 55% de opacidade.

Grid de 8px

Todos os espaçamentos: múltiplos de 8. Sem valores arbitrários.

Hover sempre visível

Todo elemento interativo tem feedback visual no hover.

Três fontes apenas

Head, body, mono — só essas. Sem importações extras.

Cores via token

Nenhuma cor hardcoded nos componentes. Apenas CSS variables.