Início > Design System
Design System v1.0

A linguagem visual da Contemplados Popular

Marca, cores, tipografia, componentes e tom de voz num só lugar. É a fonte da verdade pra qualquer peça — site, apresentação, anúncio, redes sociais, e-mail.

Assinatura

Logo principal

A versão completa, vertical, símbolo + wordmark. Use sempre que houver espaço suficiente — em capas, headers de site, embalagens.

Contemplados Popular
Variações

Em diferentes contextos

Quatro variações aprovadas. Use sempre a versão de maior contraste possível em cada fundo.

Sobre branco
Sobre azul claro
Monocromática branca
Monocromática preta
Área de proteção

Margem mínima

Mantenha em volta da marca uma margem mínima equivalente à altura do "C" da palavra "CONTEMPLADOS". Nenhum elemento gráfico ou texto pode invadir essa área.

Atenção

Usos incorretos

Alterações que descaracterizam a marca e não são permitidas em nenhuma circunstância.

Não distorça
Não troque cores
Não rotacione
Sem sombras
Sem outline
Não deforme
Paleta

Cores da marca

Azul institucional comunica confiança e estabilidade. Verde transmite crescimento, conquista e sucesso. A combinação resume a promessa: realização com segurança.

Brand Blue

blue-900#0F2A5C
blue-700#1E3A8A
blue-500#2563EB
blue-300#93C5FD
blue-100#DBEAFE
blue-50#EFF6FF

Brand Green

green-700#15803D
green-600#16A34A
green-500#22C55E
green-300#86EFAC
green-50#F0FDF4

Slate (neutros)

slate-900#0F172A
slate-700#334155
slate-500#64748B
slate-300#CBD5E1
slate-100#F1F5F9
slate-50#F8FAFC

Semânticas

success#15803D
warning#F59E0B
error#DC2626
info#2563EB
Aplicação

Quando usar cada cor

Azul — Conteúdo institucional

  • Headers e títulos principais
  • Botões secundários e links
  • Comunicação séria e regulatória

Verde — Ação e conquista

  • CTAs principais (WhatsApp)
  • Status de sucesso e contemplada
  • Métricas positivas e crescimento
Famílias

Pares tipográficos

Duas famílias suficientes pra todos os usos. Display em Poppins (geométrica, amigável). Texto em Inter (legível, neutra). Mono em JetBrains Mono pra dados.

Display
Aa Gg Qq
Poppins
Pesos: 500, 600, 700, 800 • Google Fonts
The quick brown fox 500 The quick brown fox 600 The quick brown fox 700 The quick brown fox 800
Texto
Aa Gg Qq
Inter
Pesos: 400, 500, 600, 700 • Google Fonts
The quick brown fox 400 The quick brown fox 500 The quick brown fox 600 The quick brown fox 700
Escala

Hierarquia tipográfica

Display / H1
56px / 1.05
Poppins 800
Carta de crédito contemplada
H2
40px / 1.1
Poppins 700
Realização com confiança
H3
28px / 1.2
Poppins 600
Como funciona o consórcio
Lead / 20px
20px / 1.5
Inter 500
Atendimento humano em Chapecó. Sem letra miúda no contrato.
Body / 16px
16px / 1.6
Inter 400
A Contemplados Popular intermedeia cotas de consórcios em conformidade com o Banco Central e o Código de Defesa do Consumidor.
Caption / 13px
13px / 1.4
Inter 500
Atualizado em 26 de maio de 2026. Todos os direitos reservados.
Botões

Estilos de botão

Primário (CTA)
Outline
Ghost
Formulários

Inputs e controles

Badges

Etiquetas e estados

Contemplada Em andamento Disponível Pendente Indisponível Arquivada
Iconografia

Biblioteca de ícones

Linha de 1.8px, cantos arredondados, tamanho padrão de 20px ou 24px. Cores herdadas do contexto.

home
car
bike
truck
shield-check
clock
zap
users
search
message-circle
trending-up
banknote
Voz

Como a Contemplados Popular fala

Calma, didática, profissional sem ser engessada. Brasileira sem ser regional. Honesta sem alarmar. Próxima sem ser informal demais.

Faça assim

  • "Carta contemplada é uma cota de consórcio que já foi sorteada. Você compra ela já liberada."
  • "A gente atende em Chapecó, escritório físico, contrato registrado. Sem pressa, sem pressão."
  • "Seu nome só vai pro contrato depois que você confirmar tudo no WhatsApp."

Evite assim

  • "Cotas premium imperdíveis com condições exclusivas para você decolar agora!!" 🚀
  • "Realize sua jornada de prosperidade através de uma solução financeira inovadora."
  • "Aproveite agora, restam só 2 vagas, garanta a sua antes que acabe!"

Princípios de voz

Clara

Direto ao ponto. Frase curta. Linguagem do dia a dia. Se precisar de termo técnico, explica logo em seguida.

Honesta

Sem letra miúda. Sem promessa exagerada. Se algo é caro ou demora, a gente fala.

Calma

Sem urgência fabricada. Sem "última chance". Confiança não tem pressa.

Vocabulário

Em vez deUse
Cliente Você / a pessoa
Solução Caminho / forma de conquistar
Inovador Novo / diferente / inteligente
Aquisição Compra
Investimento Compra (consórcio NÃO é investimento)
Plataforma Site