CHRISTIAN'S SERVICES
BRAND GUIDELINES // V1.0 // 2026

BRAND
GUIDELINES

O DOCUMENTO MESTRE DA IDENTIDADE VISUAL. CONSTRUÍDO PARA TRANSMITIR CONFIANÇA, PROTEÇÃO E MODERNIDADE. CADA ELEMENTO FOI DESENHADO COM INTENÇÃO E PROPÓSITO ESTRATÉGICO PARA A CHRISTIAN'S SERVICES.

CHRISTIAN'S SERVICES Brand Identity System v1.0 Design Tokens Pattern Library Motion System Typography Color Palette Logo Construction Elements Spacing CHRISTIAN'S SERVICES Brand Identity System v1.0 Design Tokens Pattern Library Motion System Typography Color Palette Logo Construction Elements Spacing
01 IDENTITY SYSTEM

Sistema de
Identidade Visual

A identidade da Christian's Services foi construída sobre três pilares: confiança institucional, modernidade digital e calor humano. Cada token de design serve a um propósito estratégico de comunicação.

🛡

CONFIANÇA

Navy profundo e tipografia sólida transmitem estabilidade, segurança e autoridade no setor financeiro.

⚡

MODERNIDADE

Interface digital-first, motion design sutil e UX conversacional posicionam a marca como tech-forward.

☀️

CALOR

O dourado como accent humaniza a marca. Transmite otimismo, valor premium e acessibilidade emocional.

Section 01 — Identity System — 2026 Brand Guidelines — Foundation
02 TYPOGRAPHY
Poppins.

A tipografia primária da Christian's Services. Geométrica, moderna e altamente legível — perfeita para comunicar clareza e confiança em todas as aplicações.

POPPINS — TYPEFACE SPECIMEN
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789 !@#$%^&*()_+
MONO — JETBRAINS MONO 500
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789 R$ // var(--token)
Aa
LIGHT
300
Aa
REGULAR
400
Aa
SEMIBOLD
600
Aa
EXTRABOLD
800
DISPLAY / 64px
Proteção Real
H1 / 48px
Seguro Residencial
H2 / 36px
Seu patrimônio protegido
H3 / 24px
Coberturas personalizadas
BODY / 16px
Oferecemos as melhores soluções em seguros para proteger o que mais importa na sua vida. Atendimento humano e processos digitais.
CAPTION / 12px
Cobertura válida em todo território nacional • Vigência 12 meses
MONO / DATA
R$ 149,90/mês — Apólice #2026-0418
Brand Guidelines — Typography System — 01 Poppins + JetBrains Mono
03 COLOR PALETTE

Core Identity

Paleta restrita e intencional. Cada cor tem um papel semântico claro no sistema de design.

#0A1628
NAVY DEEP
Cor primária — Background, identidade, confiança
RGB 10, 22, 40 CMYK 95, 80, 40, 60 HSL 216°, 60%, 10% var(--bb-navy-800)
#F59E0B
GOLDEN AMBER
Cor accent — CTAs, destaques, valor premium
RGB 245, 158, 11 CMYK 0, 38, 96, 0 HSL 38°, 93%, 50% var(--bb-gold-500)
#FFFFFF
PURE WHITE
Clareza — Texto sobre dark, backgrounds limpos
RGB 255, 255, 255 CMYK 0, 0, 0, 0 HSL 0°, 0%, 100% var(--bb-white)
#2563EB
ROYAL BLUE
Interação — Links, botões secundários, ícones
RGB 37, 99, 235 CMYK 78, 55, 0, 0 HSL 221°, 83%, 53% var(--bb-blue-500)

Design Tokens Estendidos

Token
Variable
Uso
Navy 900
--bb-navy-900
Background principal
Navy 800
--bb-navy-800
Surface / Cards
Navy 700
--bb-navy-700
Surface raised
Navy 600
--bb-navy-600
Inputs, dividers
Gold 400
--bb-gold-400
Hover states
Gold 300
--bb-gold-300
Gradients, glow
Green 500
--bb-green-500
Sucesso, aprovado, coberto
Red 500
--bb-red-500
Erro, alerta, negado
Gray 400
--bb-gray-400
Texto secundário
Off-White
--bb-off-white
Background light mode
Color Space — Restricted Palette — 02 Navy + Gold + White
04 LOGO CONSTRUCTION

Logo Metrics

Construção, área de proteção e variações permitidas do logotipo Christian's Services.

CS
Christian'sSERVICES
SEGUROS & PROTEÇÃO PATRIMONIAL
✕ ✕ ✕ Safe Space (x)
✕ ✕ ✕ Safe Space (x)
✕ Safe Space
✕ Safe Space
Christian'sSERVICES
DARK BACKGROUND — PRIMARY
Christian'sSERVICES
LIGHT BACKGROUND — INVERSE
Christian'sSERVICES
GOLD BACKGROUND — MONO
Christian'sSERVICES
GRAYSCALE — MONO

Uso Incorreto

Nunca altere as proporções, cores ou posicionamento do logotipo fora das variações documentadas.

Christian'sSERVICES
✕ NÃO DISTORÇA
Christian'sSERVICES
✕ NÃO ALTERE AS CORES
Christian'sSERVICES
✕ NÃO USE COM BAIXO CONTRASTE
Christian'sSERVICES
✕ NÃO ADICIONE EFEITOS
Brand Hierarchy — Construction Grid — 03 Logo Metrics
05 UI ELEMENTS

Componentes & Bordas

Botões, raios de borda, sombras, ícones e elementos de interface que compõem o design system.

Buttons

Hierarquia clara: Primary (gold) para ação principal, Secondary (blue) para navegação, Outline para ações terciárias.

Border Radius

Sistema de raios consistente. Cards usam radius-lg, botões usam radius-sm, badges usam radius-full.

6px
12px
16px
20px
100px

Borders

Bordas sutis para separação visual. Accent border para estados ativos e hover.

1px solid rgba(255,255,255,0.06) — Default
1px solid rgba(245,158,11,0.2) — Accent
border-left: 3px solid gold — Highlight
1px solid rgba(16,185,129,0.2) — Success
1px solid rgba(239,68,68,0.2) — Error

Shadows

Sombras profundas para elevação em dark mode. Glow dourado para estados especiais.

Shadow
Default
Shadow
Elevated
Glow
Gold
Glow
Blue

Iconografia

Ícones do setor de seguros. Estilo: outlined, stroke 1.5px, arredondados. Recomendação: Lucide Icons ou Phosphor Icons.

Proteção
Residencial
Auto
Vida
Saúde
Viagem
Digital
Apólice
Cotação
Contato
Aprovado
Config
Component Library — UI Elements — 04 Buttons, Borders, Shadows, Icons
06 MOTION SYSTEM

Animação & Interação

Motion design sutil e proposital. Cada animação serve para guiar o olho, confirmar ações ou criar prazer visual. Passe o mouse para ver as animações ao vivo.

Fade Up

Entrada principal de elementos. Scroll reveal e page load.

transform: translateY(30px) → 0
opacity: 0 → 1
duration: 800ms
easing: cubic-bezier(0.16, 1, 0.3, 1)

Scale Pulse

Hover em cards e botões. Feedback de interação.

transform: scale(1) → scale(1.03)
duration: 300ms
easing: ease-out

Slide

Transição entre steps de formulário. Navegação lateral.

transform: translateX(-100%) → 0
duration: 600ms
easing: cubic-bezier(0.25, 1, 0.5, 1)

Stagger Reveal

Entrada sequencial de múltiplos elementos. Cria ritmo visual.

delay: 0ms, 100ms, 200ms
each: fadeUp 600ms
easing: expo-out

Curvas de Easing

--ease-out-expo
cubic-bezier(0.16, 1, 0.3, 1)
Entradas, scroll reveal, modais
--ease-out-quart
cubic-bezier(0.25, 1, 0.5, 1)
Slides, navegação, transições
--duration-fast
200ms
Hover, focus, micro-interações
--duration-slow
800ms
Scroll reveal, page load
Motion System — Animation Tokens — 05 Easing + Duration + Patterns
07 SPACING & GRID

Espaçamento

Escala de espaçamento baseada em 4px. Grid de 12 colunas com max-width de 1200px.

XS
4px
SM
8px
MD
16px
LG
24px
XL
32px
2XL
48px
3XL
64px
4XL — Section
96px
5XL — Hero
128px
1
2
3
4
5
6
7
8
9
10
11
12
12-COLUMN GRID // MAX-WIDTH: 1200px // GAP: 24px // MOBILE: 4-COLUMN
Layout System — Spacing Scale — 06 4px Base Unit
08 USAGE RULES

Do & Don't

Regras de aplicação para manter a consistência e a qualidade da marca em todos os pontos de contato.

✓ DO — FAÇA
Use Navy Deep (#0A1628) como background principal em materiais digitais. Sempre mantenha alto contraste entre texto e fundo. Use o dourado exclusivamente para CTAs e destaques — nunca como cor de fundo extensivo. Mantenha whitespace generoso (mínimo 80px entre seções). Use Poppins em todos os materiais. Mantenha a área de proteção do logo. Bordas sutis (1px, rgba) para separar elementos em dark mode.
✕ DON'T — NÃO FAÇA
Nunca use o logo sobre fundos estampados ou de baixo contraste. Nunca altere as proporções do "+". Nunca substitua as cores da paleta por aproximações. Evite gradientes não documentados. Não use mais de 2 pesos tipográficos em uma mesma composição. Nunca use stock photos genéricas de "pessoas apertando mãos". Evite animações longas (>1s) ou que bloqueiem interação.
✓ TOM DE VOZ
Profissional mas acessível. Direto, sem jargões técnicos do setor. Use linguagem que transmita proteção e tranquilidade. Prefira frases curtas e objetivas. Quando mencionar preços, seja transparente e claro. Evite linguagem de medo — prefira empoderamento. O cliente é o herói, a Christian's Services é o guia.
✕ BAN LIST — NUNCA USE
"Letra miúda" como estratégia. Linguagem técnica sem explicação (sinistro, franquia, prêmio sem contexto). Tom de medo ou urgência exagerada. Promessas absolutas ("100% garantido"). Comparações agressivas com concorrentes. Exclamações excessivas. Fontes fora do sistema tipográfico. Cores fora da paleta documentada.
Usage Rules — Brand Governance — 07 Do & Don't