Cores

Identidade VisualIdentidade Visual da ImpulsamosAtualizado em 27 out 2026

Toda peça parte de Bruma + branco. Ardósia só como destaque pontual; Lima só na versão escura alternativa.

Calma, clareza, confiança. Azul acinzentado claro: competência sem agitação.

Paleta principal. Bruma 6148 C como principal, Ardósia 7546 C como destaque pontual, Lima 387 C só em subaplicação escura. Degradê principal: A2 Céu.

Esta página documenta a cor da marca para peças visuais: posts, apresentações, capas, banners, impressos e documentos. As telas de sistema seguem o Design System (pasta Design System, tokens.css), que usa os mesmos valores com nomes de token em português. Os valores HEX, RGB, CMYK e Pantone desta página são os oficiais para qualquer peça.

Cabe em: Marca, sistemas, documentos, apresentações. Cor principal: Bruma. Fundo branco.

Paleta principal

Regra de presença: no conjunto das peças da marca, as cores aparecem nesta proporção, na ordem da barra: Bruma 44% · Ardósia 24% · Tinta 20% · Lima 12%.

Por que Bruma

O que é: Pantone 6148 C (#D3E0EA). Um cinza-azulado muito claro, a cor da névoa de manhã: céu sem sol direto, luz suave e difusa.
Transmite: Calma, clareza e confiança. Tecnologia que não intimida: presente e organizada, sem ruído. É o clima de quem primeiro ouve e depois constrói.
Luz: O brilho é o atributo da cor que mais pesa na emoção: quanto mais clara, mais agradável e menos agitada ela é percebida (Valdez & Mehrabian, 1994). A Bruma está no topo dessa escala.
Saturação: A saturação é o que mais aumenta a excitação; tons azulados e pouco saturados são os mais serenos (Wilms & Oberfeld, 2018). A Bruma acalma sem ficar fria.
Competência: O azul é o matiz mais ligado a competência (Labrecque & Milne, 2012) e a cor preferida em todos os países pesquisados pelo YouGov (2015). A Bruma leva essa leitura de forma discreta, sem o azul saturado comum em tecnologia.

Fontes: Valdez & Mehrabian, Journal of Experimental Psychology: General, 1994 · Wilms & Oberfeld, Psychological Research, 2018 · Labrecque & Milne, Journal of the Academy of Marketing Science, 2012 · YouGov, 2015.

BrumaFundo e superfície das peças; combinação Clara 1 (referência) com o logotipo em Tinta; logotipo em Bruma sobre Tinta (Escura 1); manchas dos degradês; pílula em Bruma ou Bruma Profunda.Pantone6148 CHEX#D3E0EARGB211 · 224 · 234CMYK10 · 2 · 0 · 0Token no artefato--principalToken no sistema--brumaTexto por cimaTinta #101820 (contraste 13,31:1). Branco sobre Bruma não tem contraste (1,34:1). ArdósiaDestaque pontual em Ardósia (pílula de cliente, cartão de número, etiqueta). Logotipo em Ardósia sobre Tela (Clara 3). Fundo dos degradês escuros B1 e B2.Pantone7546 CHEX#254157RGB37 · 65 · 87CMYK57 · 25 · 0 · 66Token no artefato--slateToken no sistema--ardosiaTexto por cimaBranco #FFFFFF (contraste 10,65:1). TintaTítulo, número grande e texto: tinta #101820. Logotipo padrão sobre Bruma e sobre branco. Fundo das combinações escuras (Escura 1 e Escura 3).PantoneBlack 6 CHEX#101820RGB16 · 24 · 32CMYK100 · 61 · 32 · 96Token no artefato--inkToken no sistema--tintaTexto por cimaBranco #FFFFFF (17,89:1), Bruma #D3E0EA (13,31:1) ou Lima #E3E935 (13,61:1). LimaLima só nas combinações escuras alternativas; nunca em interface. Lima nunca como texto sobre fundo claro. Fica fora da escala.Pantone387 CHEX#E3E935RGB227 · 233 · 53CMYK2 · 0 · 98 · 0Token no artefato--limeToken no sistema--limaTexto por cimaArdósia #254157 (8,10:1). Texto e logotipo sobre Lima sempre em Ardósia.

Como usar

Sozinha, uma cor clara e suave perde força. Por isso a Bruma é fundo e superfície, a Tinta garante o contraste do texto e a Ardósia marca o destaque pontual.

Escala · Bruma e Ardósia

Pantone 7546 C e 6148 C (imagem de referência) + variações intermediárias para interface. Lima 387 C #E3E935 fica fora da escala: só subaplicação escura (ver Combinações). Neutros puxados para o mesmo tom: Tinta Black 6 C #101820, Tela #F5F8FB.

ArdósiaPantone 7546 C · destaque, fundo escuroHEX#254157RGB37 · 65 · 87CMYK57 · 25 · 0 · 66Token no artefato--slateToken no sistema--ardosiaTexto por cimaBranco Ardósia MédiaVariação · rótulo, link, focoHEX#4B6478RGB75 · 100 · 120CMYK38 · 17 · 0 · 53Token no artefato--slate-midToken no sistema--ardosia-mediaTexto por cimaBranco AçoVariação · barra de gráfico, ícone de estadoHEX#8FA6B8RGB143 · 166 · 184CMYK22 · 10 · 0 · 28Token no artefato--steelToken no sistema--acoTexto por cimaTinta Bruma ProfundaVariação · degradê Céu, pílula de marcaHEX#B4C7D6RGB180 · 199 · 214CMYK16 · 7 · 0 · 16Token no artefato--principal-deepToken no sistema--bruma-profundaTexto por cimaTinta BrumaPantone 6148 C · cor principalHEX#D3E0EARGB211 · 224 · 234CMYK10 · 2 · 0 · 0Token no artefato--principalToken no sistema--brumaTexto por cimaTinta Bruma ClaraVariação · estado AbertoHEX#E1EAF1RGB225 · 234 · 241CMYK7 · 3 · 0 · 5Token no artefato--st-abertoToken no sistema--bruma-claraTexto por cimaTinta NévoaVariação · notas, item escolhidoHEX#EAF0F5RGB234 · 240 · 245CMYK4 · 2 · 0 · 4Token no artefato--washToken no sistema--nevoaTexto por cimaTinta TelaNeutro puxado para o tom da Bruma · fundo alternativo (Clara 3)HEX#F5F8FBRGB245 · 248 · 251CMYK2 · 1 · 0 · 2Token no artefato--canvasToken no sistema--telaTexto por cimaTinta ou Ardósia BrancoFundo padrão das peças (Tinta · Branco, secundária)HEX#FFFFFFRGB255 · 255 · 255CMYK0 · 0 · 0 · 0Token no artefato--surfaceToken no sistema--brancoTexto por cimaTinta

Tons de Tinta

Tinta ·
Tinta 82% ·
Tinta 66% ·
Tinta 46% ·

Cores de estado · telas e documentos

Pílula com texto tinta. Positivo, Negativo e Aviso só como texto.

Estados servem a telas e documentos de trabalho, quase nunca a peças de marca. Os valores são os do Design System.

Aberto ·
Pronto ·
Espera ·
Alerta ·
Positivo ·
Negativo ·
Aviso ·

Combinações

Regra. Claras = padrão de sistemas, apresentações e peças. Escuras com Lima = subaplicação alternativa (capa de destaque, post, evento), nunca em interface de trabalho. Lima nunca como texto sobre fundo claro. Sobre Lima, texto e logotipo em Ardósia #254157.

Contraste calculado pela fórmula WCAG 2.x entre a cor do fundo e a cor do logotipo ou texto. Texto corrido pede no mínimo 4,5:1; título grande, 3:1.

Combinações principais

Clara 1 · referência 13,31:1 Bruma #D3E0EA (6148 C) · Tinta #101820 (Black 6 C) Aprovada

Clara 3 9,99:1 Tela #F5F8FB · Ardósia #254157 (7546 C) Aprovada

Escura 1 · Tinta 13,31:1 Tinta #101820 (Black 6 C) · Bruma #D3E0EA (6148 C) Aprovada · subaplicação

Escura 2 · Lima 8,10:1 Lima #E3E935 (387 C) · Ardósia #254157 (7546 C) Aprovada · subaplicação

Escura 3 · Tinta 13,61:1 Tinta #101820 (Black 6 C) · Lima #E3E935 (387 C) Aprovada · subaplicação

Combinações secundárias

Tinta · Branco 17,89:1 (Tinta) · 6,19:1 (Ardósia Média) Branco #FFFFFF · Tinta #101820 (Black 6 C) · rótulo Ardósia Média #4B6478 Secundária

Tinta · Névoa 15,58:1 Névoa #EAF0F5 · Tinta #101820 (Black 6 C) · Fundo alternativo ao branco. Secundária

Branco · Tinta 17,89:1 Tinta #101820 (Black 6 C) · Branco #FFFFFF · Exceção; o padrão sobre Tinta é a Bruma (Escura 1). Secundária

Branco · Ardósia 10,65:1 Ardósia #254157 (7546 C) · Branco #FFFFFF · Peças escuras: Capa 3 e variações em branco. Secundária

Lima · Ardósia 8,10:1 Ardósia #254157 (7546 C) · Lima #E3E935 (387 C), só o símbolo · Só o símbolo, como ponto de luz na Capa 3. Nunca o logotipo inteiro. Secundária

Degradês

Degradê só em capa e tela de destaque; um por tela. Principal: A2 Céu; A1 e A3 são opção.

Dois grupos: A (Bruma + branco, claros) e B (Ardósia + Bruma, escuros).

A · Bruma + brancoB · Ardósia + Bruma A1 · Impulso A2 · Céu A3 · Névoa B1 · Crepúsculo B2 · Horizonte B3 · Bruma densa

Bruma + branco · Atual · suavizado

A1 · Impulso

Opção ao Céu em capa e tela de destaque.

Texto por cima: Tinta
Manchas: Mancha 1: #D3E0EA · sup. esq. · 90% L · blur 22% L · .5 — Mancha 2: #D3E0EA · inf. dir. · 80% L · blur 22% L · .45
Token no artefato: --g-bruma-1
Token no sistema: --g-bruma-1 (só o fundo; as manchas são a classe .mancha)

CSS · clique para copiar

.a1 { position: relative; overflow: hidden; background: linear-gradient(120deg, #EAF0F5 0%, #E1EAF1 45%, #FFFFFF 100%); }
.a1::before { content: ""; position: absolute; left: -220px; top: -300px; width: 640px; height: 640px; border-radius: 50%; background: #D3E0EA; filter: blur(150px); opacity: .5; }
.a1::after { content: ""; position: absolute; right: -200px; bottom: -320px; width: 600px; height: 600px; border-radius: 50%; background: #D3E0EA; filter: blur(150px); opacity: .45; }

Valores em px da prancha AV-05 (painel de 640 × 1080). Para outro tamanho, mantenha a proporção da receita (mancha 90–100% L, blur 22–23% L).

Bruma + branco · Principal · transição suave

A2 · Céu

Degradê principal da marca. Capas e telas de destaque, um por tela. Transição suave, sem borda visível.

Texto por cima: Tinta
Manchas: Nenhuma: o próprio radial faz a luz.
Token no artefato: --g-bruma-2
Token no sistema: --g-bruma-2

CSS · clique para copiar

.a2 { background: radial-gradient(220% 95% at 50% -25%, #B4C7D6 0%, rgba(180,199,214,0.75) 25%, rgba(180,199,214,0.45) 48%, rgba(180,199,214,0.18) 72%, rgba(180,199,214,0) 100%), #FFFFFF; }

Funciona em qualquer tamanho: o radial é relativo à peça.

Bruma + branco · Novo

A3 · Névoa

Opção ao Céu em capa e tela de destaque.

Texto por cima: Tinta
Manchas: Mancha 1: #D3E0EA · inf. esq. · 90% L · blur 22% L · .55 — Mancha 2: #EAF0F5 · sup. dir. · 75% L · blur 18% L · 1
Token no artefato: --g-bruma-3
Token no sistema: não existe no tokens.css

CSS · clique para copiar

.a3 { position: relative; overflow: hidden; background: #FFFFFF; }
.a3::before { content: ""; position: absolute; left: -220px; bottom: -300px; width: 640px; height: 640px; border-radius: 50%; background: #D3E0EA; filter: blur(150px); opacity: .55; }
.a3::after { content: ""; position: absolute; right: -200px; top: -260px; width: 540px; height: 540px; border-radius: 50%; background: #EAF0F5; filter: blur(120px); opacity: 1; }

Valores em px da prancha AV-05 (painel de 640 × 1080). Para outro tamanho, mantenha a proporção da receita.

Ardósia + Bruma · Vertical · escuro → claro

B1 · Crepúsculo

Abertura de seção e capa escura de apresentação. O olhar desce do peso da Ardósia para a calma da Bruma.

Texto por cima: Branco no terço de cima; Tinta só abaixo de 80%
Manchas: Nenhuma.
Token no artefato: --g-ardosia-1
Token no sistema: não existe no tokens.css

CSS · clique para copiar

.b1 { background: linear-gradient(180deg, #254157 0%, #4B6478 42%, #B4C7D6 78%, #D3E0EA 100%); }

Funciona em qualquer tamanho.

Ardósia + Bruma · Radial · luz de baixo

B2 · Horizonte

Inverso do Céu: a luz nasce embaixo, como um horizonte. Capa de destaque, tela de encerramento, fundo de logotipo branco.

Texto por cima: Branco na metade de cima
Manchas: Nenhuma: o radial faz a luz, de baixo para cima.
Token no artefato: --g-ardosia-2
Token no sistema: não existe no tokens.css

CSS · clique para copiar

.b2 { background: radial-gradient(140% 85% at 50% 118%, #D3E0EA 0%, rgba(211,224,234,0.72) 22%, rgba(180,199,214,0.38) 46%, rgba(180,199,214,0.12) 68%, rgba(180,199,214,0) 85%), #254157; }

Funciona em qualquer tamanho.

Ardósia + Bruma · Diagonal · manchas

B3 · Bruma densa

Banners, posts e peças verticais que vão do claro ao escuro.

Texto por cima: Tinta em cima, branco embaixo
Manchas: #D3E0EA sup. esq. · #254157 inf. dir. · blur 20%
Token no artefato: --g-ardosia-3
Token no sistema: não existe no tokens.css

CSS · clique para copiar

.b3 { position: relative; overflow: hidden; background: linear-gradient(135deg, #E1EAF1 0%, #8FA6B8 55%, #4B6478 100%); }
.b3::before { content: ""; position: absolute; left: -160px; top: -240px; width: 620px; height: 620px; border-radius: 50%; background: #D3E0EA; filter: blur(120px); opacity: .9; }
.b3::after { content: ""; position: absolute; right: -220px; bottom: -280px; width: 680px; height: 680px; border-radius: 50%; background: #254157; filter: blur(130px); opacity: .85; }

Valores em px da prancha AV-06 (painel de 640 × 1080).

Receita do degradê

1 · Fundo: chapado ou linear 120–180°, Δ pequeno
2 · Mancha Bruma: círculo 80–100% L · blur 18–24% L · .45–.6 · esq. ou topo
3 · Segunda mancha: #EAF0F5 · .8–1 · opcional · dir. ou base
4 · Vidro: V1–V4, opcional

Medida e versão em vetor

L = largura da peça (ou do painel em que o degradê está). Mancha = círculo com border-radius 50%, cor chapada, filter: blur(), opacidade. As manchas ficam parcialmente para fora da peça (overflow: hidden).

SVG (Affinity), bloco de 1920: <filter id="m" x="-50%" y="-50%" width="200%" height="200%"><feGaussianBlur stdDeviation="420"/></filter> <circle cx="960" cy="-380" r="960" fill="#D3E0EA" opacity=".45" filter="url(#m)"/>

Por que Ardósia + Bruma

Por quê: a Ardósia dá peso e a Bruma dá respiro. Unidas no mesmo degradê, viram a versão escura da marca sem sair da família: mesma luz difusa do Céu, só que partindo da sombra. Uso pontual: um por peça, nunca em interface de trabalho do sistema.

Fonte Identidade Visual da ImpulsamosAtualizado em 27 out 2026Sobre a fonte

Valores do Design System da Impulsamos. Quando uma prancha da identidade visual diverge, vale o Design System. Os contrastes foram calculados pela fórmula WCAG 2.x a partir dos HEX.