Guia visual

Design System Juninho Tintas

Use este gabarito como referência para manter o site consistente em cores, tipografia, espaçamentos, botões, cards e combinações de contraste.

01

Configuração inicial no Elementor Kit

Cores e fontes globais configuradas no painel do Elementor para este projeto.

Cores do sistema
Primário#E53916
Secundário#161413
Texto#333333
Realce#FFB800
Cores personalizadas
Background#FAFAF7
Branco#FFFFFF
WhatsApp#1FA84F
Azul Respingo#159BE8
Fontes globais
PrimárioArchivo Black, 400
SecundárioArchivo Black, 400
TextoNunito Sans, 400
RealceNunito Sans, 700
02

Paleta de cores do projeto

Cores oficiais para fundos, textos, botões, cards, ícones e detalhes visuais.

#E53916

Vermelho Juninho

Botões principais, CTAs, detalhes fortes e chamadas de ação.

Texto ideal: #FFFFFF
#161413

Preto Tinta

Títulos, menu, rodapé, textos fortes e seções escuras.

Texto ideal: #FFFFFF
#333333

Texto Escuro

Parágrafos, descrições e textos institucionais em fundos claros.

Texto ideal: usar sobre #FFFFFF ou #FAFAF7
#FFB800

Amarelo Realce

Selos, ícones, detalhes visuais, linhas e pequenos destaques.

Texto ideal: #161413
#FAFAF7

Background

Fundo principal do site, hero e seções claras com visual mais quente.

Texto ideal: #161413 ou #333333
#FFFFFF

Branco

Cards, áreas limpas, textos em fundos escuros e botões.

Texto ideal: #161413 ou #333333
#1FA84F

Verde WhatsApp

Usar somente em botões específicos de WhatsApp e contato direto.

Texto ideal: #FFFFFF
#159BE8

Azul Respingo

Detalhes secundários, ícones, linhas decorativas e pontos de cor.

Texto ideal: #FFFFFF
03

Combinações de fundo e texto

Use essas combinações para evitar erro de contraste e manter leitura confortável.

Hero / Seção clara principal

Fundo #FAFAF7

Título em #161413, descrição em #333333, detalhes em #E53916 e #FFB800.

Área limpa / Sobre / Marcas

Fundo #FFFFFF

Título em #161413, descrição em #333333, cards em #FAFAF7 e detalhes em #FFB800.

CTA forte / Chamada comercial

Fundo #E53916

Título em #FFFFFF, descrição em rgba(255,255,255,0.82) e botão branco com texto #161413.

Automotiva / Rodapé / FAQ

Fundo #161413

Título em #FFFFFF, descrição em rgba(255,255,255,0.76), detalhes em #FFB800 e #159BE8.

04

Tipografia do Elementor

Padrão para fontes globais, H1, H2, H3, H4, textos, links e botões.

H1 / Hero

A tinta certa para cada projeto

FonteArchivo Black
Peso400
Desktop56px, line-height 1.04em
Mobile36px, line-height 1.04em
Espaçamento-0.03em
Cor#161413
H2 / Seções

Soluções completas em tintas

FonteArchivo Black
Peso400
Desktop40px, line-height 1.1em
Mobile30px, line-height 1.1em
Espaçamento-0.02em
Cor#161413
Texto / Descrição

Texto explicativo usado abaixo dos títulos principais. Deve ter leitura fácil, contraste seguro e altura de linha confortável.

FonteNunito Sans
Peso400
Desktop18px, line-height 1.65em
Mobile16px, line-height 1.65em
Cor clara#333333
Cor escurargba(255,255,255,0.76)
Cards / Elementos internos

Tintas automotivas

Títulos internos usam Nunito Sans para não deixar o site pesado demais.

H3Nunito Sans, 700, 24px
H4Nunito Sans, 600, 20px
LinkNunito Sans, 600, #E53916
BotãoNunito Sans, 700, 15px
Evitar800/900 como padrão geral
05

Esquema visual das seções do site

Prévia empilhada das seções da home, mostrando fundo, cor de título, cor de texto e destaques.

Seção 01

Hero

Fundo #FAFAF7, título #161413, texto #333333, botão #E53916 e detalhes #FFB800.

Seção 02

Sobre a empresa

Fundo #FFFFFF, título #161413, texto #333333, cards em #FAFAF7 e detalhes #FFB800.

Seção 03

Soluções

Fundo #FAFAF7, cards #FFFFFF, título #161413, texto #333333 e ícones coloridos.

Seção 04

Especialidade automotiva

Fundo #161413, título #FFFFFF, texto rgba(255,255,255,0.76), detalhes #FFB800 e #159BE8.

Seção 05

Marcas

Fundo #FFFFFF, título #161413, texto #333333, logos ou cards em #FAFAF7.

Seção 06

Unidades

Fundo #FAFAF7, cards #FFFFFF, texto #333333 e botões WhatsApp em #1FA84F.

Seção 07

FAQ e CTA final

Fundo #161413, título #FFFFFF, textos claros, cards escuros suaves e botão #E53916.

06

Padrão de cards

Modelo para cards em seções claras e escuras, mantendo contraste e consistência.

Card em fundo claro

Fundo #FFFFFF, título #161413, descrição #333333, borda suave e sombra leve.

Radius 24px Padding 30px Borda suave

Card em fundo escuro

Fundo rgba(255,255,255,0.06), título #FFFFFF e descrição com opacidade controlada.

Radius 24px Padding 30px Borda branca 12%
07

Espaçamentos oficiais

Medidas para manter ritmo visual entre seções, títulos, descrições, cards e botões.

16px

Entre título e descrição, ou entre elementos pequenos.

16px

24px

Entre elementos internos de cards e blocos médios.

24px

40px

Entre cabeçalho da seção e área de cards.

40px

64px

Padding vertical padrão para seções no mobile.

64px

90px

Padding vertical padrão para seções no desktop.

90px

1200px

Largura máxima do conteúdo interno das seções.

1200px
08

Checklist para próximas seções

Antes de criar qualquer seção, siga estes pontos para não quebrar o padrão visual.

01. Usar as cores globais definidas no Elementor Kit.
02. Não criar paleta nova sem necessidade.
03. Usar Archivo Black apenas em H1 e H2.
04. Usar Nunito Sans em textos, cards, links e botões.
05. Não usar peso 800/900 como padrão geral.
06. Se o fundo for vermelho ou escuro, texto principal deve ser branco.
07. Manter conteúdo dentro de 1200px.
08. Cards precisam de respiro, borda suave e radius entre 22px e 26px.