Use este gabarito como referência para manter o site consistente em cores, tipografia, espaçamentos, cards, botões e hierarquia visual.
Cores oficiais para fundos, textos, botões, cards, divisórias e detalhes visuais.
Fundo hero, menu, rodapé, seções premium e áreas de alto contraste.
Texto ideal: #FFFFFF ou #F5EDD8Cards escuros, blocos secundários e fundos sofisticados.
Texto ideal: #FFFFFF ou #D4AF6ACTAs, detalhes fortes, bordas, ícones, linhas e elementos de destaque.
Texto ideal: #111009Textos em fundos escuros, brilhos sutis e detalhes elegantes.
Texto ideal: #111009 ou #1E1B10Fundos suaves, seções alternadas, cards claros e áreas de respiro.
Texto ideal: #111009 ou #5F5E5AFundo geral da página, seções institucionais e blocos limpos.
Texto ideal: #111009 ou #5F5E5ACards, formulários, modais, áreas de leitura e elementos de clareza.
Texto ideal: #111009 ou #5F5E5ADescrições, textos secundários, legendas e informações auxiliares.
Texto ideal: usar sobre fundo claroUse essas combinações para evitar erro de contraste e manter leitura confortável.
Título em #FFFFFF, descrição em rgba(255,255,255,0.72) e detalhes em #D4AF6A.
Título em #111009, descrição em #5F5E5A e detalhes em #B8953F.
Título em #111009, descrição em #5F5E5A e cards em #FFFFFF.
Título em #111009, descrição em #5F5E5A e detalhes em #B8953F.
Padrão para títulos e descrições principais em desktop e mobile.
Texto explicativo usado abaixo do título principal. Deve ter leitura fácil, bom contraste e altura de linha confortável.
Padrão para cards, taglines, botões, descrições internas e microtextos.
Usada antes de títulos para contextualizar a seção sem competir com o título principal.
Descrição interna do card, sempre mais leve que o título, com boa leitura e sem exagerar no tamanho.
Botão deve ser claro, direto e com contraste forte. Botão bonito que ninguém vê é só enfeite caro.
Agendar avaliaçãoMedidas para manter ritmo visual entre seções, títulos, descrições, cards e elementos internos.
Entre ícone e texto, labels pequenos ou micro elementos.
Entre tagline e título, ou título e descrição em cards pequenos.
Entre título e descrição principal da seção.
Entre cabeçalho da seção e cards.
Entre blocos grandes dentro da mesma seção.
Padding vertical mínimo para seções no desktop.
Modelo visual seguindo o design system completo.
Uma seção bem construída começa com uma hierarquia clara, bom contraste, espaçamento consistente e cards que parecem parte do mesmo sistema.
Card com título forte, descrição objetiva e espaçamento interno confortável.
O visual mantém o mesmo padrão de cor, fonte, borda, sombra e respiro.
Cards em grid devem ter altura equilibrada e conteúdo sem poluição visual.
Antes de publicar qualquer seção, valide esses pontos.