Sistema de Design

Diretrizes de Marca

A Identidade Visual da BB Dental Care

Nossa marca está enraizada na interseção de bem-estar, trabalho artesanal e inovação moderna. Cada elemento — desde nossa paleta de cores até nossa tipografia — comunica tranquilidade, confiança e atendimento de excelência.

01 — Logotipo

A Marca

Use sempre os arquivos de logotipo aprovados. Não recrie, altere as cores ou modifique o logotipo de forma alguma.

Fundo Claro

Fundo Escuro

Fundo Primário

Fundo Menta

O que não fazer com o logotipo

Não dessaturar

Não rotacionar

Não esticar

Não reduzir opacidade

02 — Paleta de Cores

Cores Primárias

Nossa paleta inspira-se na natureza: tons profundos de verde-azulado assentados por carvão quase preto, elevados por suaves tons sálvia.

Esmeralda#00786fPrimária / CTAs / Links

Carvão#0f1c1cTítulos / Fundos escuros

Menta#cbdad9Destaques / Efeitos hover

Paleta Estendida

Teal Profundo#004d46

Esmeralda#00786f

Teal#009d91

Menta#cbdad9

Menta Pálida#e6f0ef

Cinza Suave#f3f8f8

Teal Suave#385353

Carvão#0f1c1c

Destaque

Brilho Dourado#ffd700Estrelas / Destaques

Branco#ffffffFundos / Texto invertido

03 — Gradientes

Gradientes de Marca

Os gradientes devem ser usados com moderação: para fundos de destaque, divisores de seção e elementos decorativos. Nunca aplique gradientes em texto ou logotipo.

Profundidade Esmeraldalinear-gradient(135deg, #00786f 0%, #004d46 100%)Seções hero, fundos de CTA

Cascata Teallinear-gradient(135deg, #009d91 0%, #00786f 50%, #004d46 100%)Banners de destaque, cartões

Névoa Mentalinear-gradient(135deg, #cbdad9 0%, #e6f0ef 100%)Fundos de seção suaves, cartões

Fusão Carvãolinear-gradient(135deg, #0f1c1c 0%, #385353 100%)Seções escuras, sobreposições

Esmeralda para Mentalinear-gradient(135deg, #00786f 0%, #cbdad9 100%)Divisores, detalhes decorativos

Brilho Radialradial-gradient(ellipse at top left, #009d91 0%, #00786f 40%, #0f1c1c 100%)Fundos de destaque completos

04 — Botões

Sistema de Botões

Os botões utilizam a tipografia Outfit em letras maiúsculas com espaçamento de 1px. A silhueta em pílula (50px de raio de borda) reflete nosso caráter acolhedor e moderno.

Variantes

Agendar OnlinePrimário · Preenchimento Esmeralda

Saiba MaisSecundário · Contorno

Ver ServiçosGhost · Contorno Branco

Mais InformaçõesMuted · Preenchimento Suave