Cores

Nossa paleta é intencionalmente contida. Usamos neutros como fundação, com cor reservada para significado e ênfase.

Fundo: #FAFAFA (branco-gelo quente) para páginas, #FFFFFF para cards e superfícies elevadas.
Texto: #0A0A0A para texto primário, #71717A para secundário, #A1A1AA para desativado.
Destaque: Azul para engenharia, Violeta para design, Laranja para marketing, Esmeralda para sucesso.
Semântico: Verde para positivo, Amarelo para atenção, Vermelho para erro — usado com moderação.
Visualização de dados: Escala de intensidade de azul para valor do visitante, cores de fontes de tráfego para gráficos de atribuição.

Tipografia

Duas tipografias cobrem todas as nossas necessidades. Não introduzimos novas fontes sem justificativa sólida.

Inter: Nossa cavalo de batalha. Texto de corpo, elementos de UI, botões, rótulos. Pesos 400-700.
Instrument Serif: Para drama. Títulos de hero, números decorativos, citações em destaque. Usada com moderação.

A escala tipográfica segue uma razão modular: 12, 14, 16, 18, 20, 24, 30, 36, 48, 60, 72px. Alturas de linha são 1,5 para corpo, 1,2 para títulos.

Espaçamento

Usamos uma grade base de 8px. Valores de espaçamento comuns: 8, 16, 24, 32, 48, 64, 96. Consistência no espaçamento cria ritmo visual.

O ritmo vertical importa mais do que o horizontal. As seções têm padding generoso (64-96px). Os componentes têm espaçamento interno mais compacto (16-24px).

Componentes

Nossa biblioteca de componentes é minimalista por design. Temos botões, cards, inputs e alguns componentes especializados. Quando precisar de algo novo, primeiro pergunte se um componente existente pode funcionar.

Botões: Primário (azul sólido), Secundário (contornado), Ghost (apenas texto). Três tamanhos: sm, md, lg.
Cards: Fundo branco, sombra sutil, cantos arredondados (8px). Estados de hover elevam levemente.
Inputs: Bordas limpas, padding generoso, estados de foco claros com anel azul.
Modais: Centralizados com desfoque de fundo. Usados com moderação para confirmações e tarefas focadas.

Movimento

As animações servem à função, não à decoração:

Duração: 150ms para micro-interações, 300ms para transições, 500ms para mudanças de página.
Easing: ease-out para entradas, ease-in para saídas, ease-in-out para loops.
Movimento reduzido: Todas as animações respeitam as preferências do usuário via prefers-reduced-motion.

Ícones

Usamos exclusivamente Lucide Icons. São consistentes, bem projetados e têm excelente cobertura. O tamanho padrão é 20px, espessura de traço 1,5.