Regras

Identidade VisualIdentidade Visual da ImpulsamosAtualizado em 27 out 2026
Corredor de vidro e aço em tons de Ardósia, com faixas de luz no teto e piso claro levando a portas de vidro ao fundo.
Identidade visual
Norte

Cor principal · Bruma

A1A2A3
Diz
Calma, clareza, confiança. Azul acinzentado claro: competência sem agitação.
Peso
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.
Cabe em
Marca, sistemas, documentos, apresentações. Cor principal: Bruma. Fundo branco.
Bruma #D3E0EA Pantone 6148 C Ardósia #254157 Pantone 7546 C Lima #E3E935 Pantone 387 C A2 Céu degradê principal
Como é o A2

A2 Céu: radial-gradient(220% 95% at 50% -25%, #B4C7D6 0%, rgba(180,199,214,.75) 25%, rgba(180,199,214,.45) 48%, rgba(180,199,214,.18) 72%, rgba(180,199,214,0) 100%), #FFFFFF

Ordem de decisão

  1. Toda peça parte de Bruma + branco. Ardósia só como destaque pontual; Lima só na versão escura alternativa.
  2. Escolha um degradê da frente. Só um por tela.
  3. Tem foto? Desfoque a foto e use V2. Não tem? V1 sobre o degradê. É interface? V3 e V4.
  4. Texto tinta. Raio 12px. Fontes e ícones do base.css.
  5. O que não está aqui, não se inventa: pergunta.

Receita do degradê

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

Na notação da prancha, "% L" é lido como porcentagem da largura da peça (a confirmar), e .45–.6 e .8–1 são a opacidade da mancha.

Código (CSS e SVG)
/* A2 Céu · principal (Bruma) · transição suave, sem borda visível */
.degrade { position: relative; overflow: hidden; border-radius: 12px;
  background: radial-gradient(220% 95% at 50% -25%, #B4C7D6 0%,
    rgba(180,199,214,.75) 25%, rgba(180,199,214,.45) 48%,
    rgba(180,199,214,.18) 72%, rgba(180,199,214,0) 100%), #FFFFFF; }
.vidro { background: rgba(255,255,255,.5); box-shadow: 0 0 0 1px rgba(255,255,255,.75);
  backdrop-filter: blur(24px); border-radius: 12px; }
/* 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)"/>

Regras

12
Faça
  • 1 · Cor principal: Bruma + branco. Destaque pontual em Ardósia (pílula de cliente, cartão de número, etiqueta). Lima só nas combinações escuras alternativas. Sobre Lima, texto e logotipo em Ardósia #254157.
  • 3 · Bruma #D3E0EA é a cor principal; pílula em Bruma ou Bruma Profunda #B4C7D6. Rótulo, link, foco e não lido: Ardósia Média #4B6478.
Nunca
  • 1 · Lima nunca sobre fundo claro (texto, logotipo ou detalhe) nem em interface de trabalho.
  • Nunca mais de um degradê na mesma tela ou peça.
  • Nunca degradê Ardósia em interface de trabalho do sistema.
Combinações proibidas
  • Lima sobre branco #FFFFFF · contraste 1,31:1 · Lima nunca como texto sobre fundo claro
  • Lima sobre Bruma #D3E0EA · contraste 1,02:1 · Lima nunca como texto sobre fundo claro
  • Lima sobre Tela #F5F8FB · contraste 1,23:1 · Lima nunca como texto sobre fundo claro
  • Branco sobre Bruma #D3E0EA · contraste 1,34:1 · título, número grande e texto: tinta
  • Texto colorido para indicar estado · nunca texto colorido para estado: pílula com fundoProibido
Faça
  • 2 · Fundo branco é o padrão. Alternar para Tela ou Névoa é sutil e raro, uma tela entre muitas. Degradê só em capa e tela de destaque; um por tela. Principal: A2 Céu; A1 e A3 são opção.
  • 4 · Nas manchas só #D3E0EA e #EAF0F5.
  • 5 · Leveza: mancha grande, blur alto, opacidade baixa. Referência: A2.
  • 7 · Vetor: mancha = círculo + feGaussianBlur.
Nunca
  • 4 · Nunca #B4C7D6 nem #4B6478.
  • 5 · Nunca círculo visível.
  • 7 · Nunca imagem rasterizada.
Faça
  • 8 · Vidro presente em tudo. Com foto: foto nítida + V2 (o desfoque fica só no vidro). Sem foto: degradê + V1. Em sistema: V3 e V4.
  • 9 · Texto sobre foto só dentro do vidro. Um vidro por camada.
  • 10 · Vidro sempre branco translúcido. Texto sobre vidro: tinta.
Nunca
  • 9 · Nunca vidro sobre vidro.
  • 10 · Nunca colorido, nunca escuro.
Mesa alta junto a janelas de vidro com notebook, palmeira e cadeiras brancas; sobre a foto nítida, um painel de vidro branco translúcido com texto em Tinta.
Vidro sobre foto A foto fica nítida; o desfoque, só no vidro.

Como é o V2 · V2 · vidro sobre foto: branco a 40% (rgba(255,255,255,.4)), borda branca a 60% (0 0 0 1px rgba(255,255,255,.6)), backdrop-filter: blur(30px) saturate(1.4).

Faça
  • 6 · Só fundos claros. Título, número grande e texto: tinta #101820.
  • 11 · Raio 12px em todas as peças. Fontes e ícones do base.css.
Nunca
  • 6 · Nunca texto colorido para estado: pílula com fundo.

A prancha completa a regra 11 com "base.css será atualizado quando a paleta Bruma for aprovada." A paleta Bruma já foi aprovada e o base.css do Design System já está nela.

Nas peças (post, apresentação, capa, banner, impresso) o raio é 12px fixo: cartão, vidro, moldura e foto usam o mesmo canto. É diferente das telas do Design System, onde o raio muda por camada (28 / 24 / 20 / 16 / 12 / pílula).

Faça
Área x livre
Branco sobre Ardósia
  • Usar só o Símbolo e o Logotipo principal; variação com assinatura só quando pedirem.
  • Usar o arquivo sem alteração, em uma cor e na proporção original (logotipo 7,56 : 1; símbolo 1:1).
  • Tinta sobre branco como padrão; Névoa como fundo alternativo; Bruma só em bloco.
  • Branco sobre Tinta ou Ardósia nas peças escuras.
  • Deixar a área de proteção x (altura do I) livre nos quatro lados.
  • Respeitar o tamanho mínimo: logotipo principal com 105 px ou 27 mm; símbolo com 12 px ou 4 mm.
  • Pôr o símbolo uma vez por peça, como ponto de luz que pontua, separa ou orienta.
Não faça
Proposta
Texto dentro da área
Distorcido
  • Usar uma variação com assinatura sem pedido.
  • Redesenhar, distorcer ou mudar a proporção do símbolo ou do logotipo.
  • Aplicar o logotipo em duas cores ou em degradê.
  • Usar Lima no tema claro ou Lima sobre fundo claro; Lima é só da subaplicação escura.
  • Usar o símbolo como decoração solta ou padrão repetido de fundo.
  • Usar a linha L5 (feixe com símbolo) fora de capa.
  • Encostar texto, borda ou foto dentro da área de proteção.
  • Usar a marca abaixo do tamanho mínimo ou a assinatura em tamanho em que ela não se lê.
Regra 12

O que não está aqui, não se inventa: pergunta.

Método Identidade Visual da ImpulsamosAtualizado em 27 out 2026Fontes e pendências

Abertura: Prancha AV-01: foto em tela cheia sobre fundo Ardósia #254157; o rótulo "Identidade visual" em Inter 600, caixa alta, tracking .14em, branco a 82%, no centro da prancha.

Pendências
  • Regra 8 × ordem de decisão 3: a regra diz "foto nítida + V2 (o desfoque fica só no vidro)"; a ordem de decisão diz "Desfoque a foto e use V2". A apresentação final (AV-07) diz "A foto fica nítida; o desfoque, só no vidro." Vale a foto nítida até a Isabela confirmar.
  • A ordem de decisão 2 diz "Escolha um degradê da frente": a frente é a Cor principal (Bruma), com A1, A2 e A3.