Design System · Pattern Library
Biblioteca viva com os padrões visuais e de interação deste site.
Referência central para tipografia, componentes, superfícies, layout e motion usando exatamente as classes, estruturas e comportamentos da implementação original.
Este documento organiza exemplos canônicos para manter consistência entre estratégia visual, experiência de uso e implementação front-end.
Tipografia
Escala tipográfica em uso real.
Design e desenvolvimento em uma única entrega.
Landing Pages
A página certa organiza proposta de valor, remove ruído da decisão e conduz o visitante.
Texto de suporte padrão para conteúdo principal e blocos descritivos.
Colors & Surfaces
Superfícies, contrastes, bordas e gradientes em contexto.
Plano principal com fundo claro e leitura de alto contraste.
Superfície de apoio para blocos de conteúdo e separação visual.
Faixa de destaque para conteúdo estratégico e casos.
Borda suave
Elementos usam separação com variações de contraste leve.
Elementos usam separação com variações de contraste leve.
Divisores
Seções usam linhas discretas para ritmo vertical.
Seções usam linhas discretas para ritmo vertical.
Overlay do hero aplicado sobre mídia para legibilidade e profundidade.
UI Components
Elementos de interface e estados interativos.
Inputs
Campos de formulário
Estados nativos com foco visual via borda e focus ring.
Layout & Spacing
Padrões de composição e ritmo entre blocos.
Estrutura editorial
Conteúdo principal com bloco de apoio lateral.
Relação de proporção 2:1 para hierarquia de leitura.
Ideal para seções de explicação, credibilidade e narrativa estratégica.
Coluna 1
Card com conteúdo curto e ícone para agrupamento funcional.
Coluna 2
Grade responsiva para apresentar serviços, benefícios ou blocos de valor.
Coluna 3
Espaçamento consistente com ritmo vertical definido por tokens de espaço.
- Descoberta
Entendimento inicial do problema.
- UX
Estrutura de jornada e prioridade.
- UI
Direção visual e componentes.
- Dev
Implementação com consistência.
- Entrega
Ajustes e publicação orientada.
Motion & Interaction
Galeria de transições e comportamentos interativos.
Transição de background, border e escala no ativo.
Deslocamento horizontal no hover do texto e seta.
Links com alteração de cor e leve escala no hover.
Use o botão de menu no topo em viewport menor para ver morph das barras.
Voltar ao topo para testarO botão de retorno aparece conforme rolagem e usa transição de opacidade e deslocamento.
Ícones
Sistema de ícones em SVG com classes nativas do projeto.
Stroke Padrão
Ícones de feature com stroke, fundo circular e cor de destaque.
Variação de Forma
Mesmo container e herança de estilo para famílias diferentes de ícone.
Ícone de Ação
Ícone com currentColor aplicado em componente de ação circular.