Apoios gráficos

Identidade VisualIdentidade Visual da ImpulsamosAtualizado em 28 out 2026

Quatro apoios gráficos acompanham as peças: o Farol, o vidro, as linhas e os ícones.

O símbolo é um farol que dá direção. Impulsar vem do latim in + pulsare, empurrar para a frente. É o que a luz do farol faz: leva a empresa adiante.

Os acabamentos que dão profundidade e ritmo às peças: quatro vidros, cinco linhas e uma família de ícones. Linhas e ícones usam o mesmo traço (1,5 px); vidros e linhas ficam na família de cores da Bruma. Cada vidro tem um fundo certo para ficar por cima; cada linha tem um lugar certo na peça; os ícones são sempre Lucide.

Apoio gráfico

Farol

A luz que se vê de longe e indica a rota segura, mesmo quando o cenário é incerto.

G3 · Alcance

carta náutica

Anéis de alcance com marcas de rumo, como nas cartas.

Quando entraFundo de dados, mapas de processo, diagnóstico.

Como replicar

anéis a cada 24 px · nascem no centro e crescem com fade in/out · 4 s, um a cada 0,55 s

viewBox 0 0 405 250, fundo Tela #F5F8FB. Símbolo no centro (202,5 × 125), em Tinta #101820, escala 0,44. Cinco círculos concêntricos de traço 1 px em Tinta, tracejado 2 4, raios 46, 70, 94, 118 e 142; atrasos 0; 0,55; 1,1; 1,65 e 2,2 s.

<svg viewBox="0 0 405 250" fill="none" stroke="#101820" stroke-width="1">
  <circle class="anel" cx="202.5" cy="125" r="46"  stroke-dasharray="2 4"/>
  <circle class="anel" cx="202.5" cy="125" r="70"  style="animation-delay:.55s"/>
  <circle class="anel" cx="202.5" cy="125" r="94"  stroke-dasharray="2 4" style="animation-delay:1.1s"/>
  <!-- … r=118 (1.65s), r=142 (2.2s) · passo 24 px, tracejado alternado -->
  <path d="…símbolo…" fill="#101820" stroke="none"/>
</svg>
.anel{transform-box:fill-box;transform-origin:center;opacity:0;animation:anel 4s ease-out infinite}
@keyframes anel{0%{transform:scale(.3);opacity:0}30%{opacity:1}100%{transform:scale(1);opacity:0}}

Versão escura: Na Capa de apresentação 3 · Farol: fundo Ardósia #254157 + mancha Ardósia Média #4B6478 blur 220 px atrás do farol. Lima só no símbolo e no rótulo. Farol: 6 anéis Bruma (raio 150 a 600 px, passo 90) fixos a 12% + os mesmos anéis crescendo e sumindo (4,4 s, um a cada 0,55 s), tracejado alternado. Símbolo: 96 px Lima, centro dos anéis.

O símbolo fica no centro dos anéis de alcance (o apoio gráfico Farol · alcance), como a luz do farol nas cartas náuticas: um ponto que orienta e alcança longe. Fundo Ardósia com Lima é a combinação escura alternativa da paleta. Funciona em telão e auditório, onde fundo claro ofusca.

G2 · Varredura

farol · feixe

O facho do farol: um setor de luz que gira e acende os raios por onde passa.

Quando entraPara carregamento e transição.

Como replicar

setor 40° · degradê radial Bruma 1 → 0 · gira 360° em 6 s, em loop · raios de fundo a 18%

viewBox 0 0 405 250, fundo Tela #F5F8FB. Símbolo no centro (202,5 × 125), em Tinta #101820, escala 0,48. Coroa de 48 raios curtos (traço 1,4 px, Tinta a 18%, pontas redondas) entre os raios 34 e 62 a partir do centro. Feixe: setor de 40° com raio 118, preenchido com degradê radial Bruma #D3E0EA (opaco a 15% do raio, transparente na borda), girando em volta do centro.

<svg viewBox="0 0 405 250">
  <radialGradient id="g" gradientUnits="userSpaceOnUse" cx="202.5" cy="125" r="118">
    <stop offset=".15" stop-color="#D3E0EA"/><stop offset="1" stop-color="#D3E0EA" stop-opacity="0"/>
  </radialGradient>
  <g class="feixe"><path d="M202.5 125 L303 60 A118 118 0 0 1 319 142 Z" fill="url(#g)"/></g>   <!-- setor 40° -->
  <path d="…símbolo…" fill="#101820"/>
</svg>
.feixe{transform-box:view-box;transform-origin:202.5px 125px;animation:feixe 6s linear infinite}
@keyframes feixe{to{transform:rotate(360deg)}}
Princípio

Não ofusca nem chama atenção para si. Orienta.

4 vidros · fundo, borda e desfoque

Vidro

Luz, vidro e desfoque dão profundidade à peça. Use com parcimônia: um ou dois vidros por tela ou página.

  • V1 · Vidro

    Sobre os degradês Bruma.

  • V2 · Vidro sobre foto

    A foto fica nítida; o desfoque, só no vidro.

  • V3 · Vidro denso

    Sobre interface ou fundo chapado.

  • V4 · Véu

    Cabeçalho fixo sobre o conteúdo que rola.

VidroSobFundoBordaDesfoqueToken
V1 · Vidrodegradê Bruma (A1–A3)rgba(255,255,255,.5)1px rgba(255,255,255,.75)backdrop-filter: blur(24px)--vidro + --vidro-borda
V2 · Vidro sobre fotofoto clara e nítida; o desfoque fica só no vidrorgba(255,255,255,.4)1px rgba(255,255,255,.6)backdrop-filter: blur(30px) saturate(1.4)--vidro-foto
V3 · Vidro densofundo chapado (Tela ou Névoa) ou interfacergba(255,255,255,.7)1px rgba(16,24,32,.06) + sombra 0 10px 28px -18px rgba(16,24,32,.4)backdrop-filter: blur(20px)--vidro-denso
V4 · Véuconteúdo que rola por baixo de um cabeçalho fixolinear-gradient(180deg, rgba(245,248,251,.9), rgba(245,248,251,0))Máscara: mask: linear-gradient(180deg, #000 55%, transparent)backdrop-filter: blur(14px)--veu
Faça
  • Pôr o V1 sobre os degradês Bruma, onde há cor para o desfoque mostrar.
  • Pôr o V2 sobre foto clara e nítida: o desfoque fica só no vidro.
  • Usar o V3 quando o fundo for chapado (Tela, Névoa) ou houver interface atrás.
  • Usar o V4 só no cabeçalho fixo sobre conteúdo que rola.
  • Manter um ou dois vidros por tela ou página.
Não faça
  • Vidro sobre branco chapado: não há nada atrás para desfocar.
  • Desfocar a foto inteira: a foto fica nítida, o desfoque é só do vidro.
  • Trocar os valores de fundo, borda ou desfoque entre os tipos.
  • Vidro em todo cartão da peça.
Por que cada vidro tem o seu fundo

O desfoque só aparece quando há cor ou imagem atrás. Por isso cada vidro tem o seu fundo: degradê (V1), foto (V2), fundo chapado com interface (V3) e conteúdo rolando (V4).

  • Fundo do V1 na apresentação finalDegradê usado sob o V1 na apresentação final: linear-gradient(120deg, #EAF0F5 0%, #E1EAF1 45%, #FFFFFF 100%) (A1 · Impulso) com três manchas desfocadas: Bruma Profunda #B4C7D6 (460 px, blur 110 px, opacidade .8, canto superior esquerdo), Bruma #D3E0EA (480 px, blur 110 px, opacidade .9, canto inferior direito) e Aço #8FA6B8 (260 px, blur 100 px, opacidade .45, embaixo à esquerda).
  • CantosNas peças, o vidro e a moldura têm raio de 12 px, como todo canto de peça (regra 11 do Norte). No sistema, o cartão de vidro segue o raio por camada do DS (cartão 24 px).
  • Conteúdo no vidroTexto em tinta #101820 (Sora 450 para a frase, Inter 600 em caixa alta com +.14em e tinta 60% para o rótulo). O símbolo "Caminhos" pode entrar em tinta, de 22 a 34 px.
  • V1background: rgba(255,255,255,.5); box-shadow: 0 0 0 1px rgba(255,255,255,.75); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  • V2background: rgba(255,255,255,.4); box-shadow: 0 0 0 1px rgba(255,255,255,.6); backdrop-filter: blur(30px) saturate(1.4); -webkit-backdrop-filter: blur(30px) saturate(1.4);
  • V3background: rgba(255,255,255,.7); box-shadow: 0 0 0 1px rgba(16,24,32,.06), 0 10px 28px -18px rgba(16,24,32,.4); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  • V4background: linear-gradient(180deg, rgba(245,248,251,.9), rgba(245,248,251,0)); backdrop-filter: blur(14px); mask: linear-gradient(180deg, #000 55%, transparent);
O que guardar

Cada vidro tem o seu fundo: degradê (V1), foto (V2), fundo chapado ou interface (V3), conteúdo que rola (V4).

5 linhas · feixes de 1,5 px

Linhas

Guia → farol → luz. A linha é um feixe que conduz o olho; o símbolo, o ponto de luz. A luz nasce no centro e se apaga nas pontas.

  • L1Separador centrado · transparente → Bruma → transparente

  • L2Separador alinhado à esquerda · tinta .14 → 0 · interfaces e documentos

  • L3Destaque curto · #4B6478 no centro · sob um rótulo

  • L4Vertical · separa blocos lado a lado

  • L5Feixe longo com ponto de luz · símbolo 12–16 px · só em capas

  • CoresBruma #D3E0EA ou Bruma Profunda #B4C7D6 no centro, transparente nas pontas · tinta .14 → 0 em interface e documento · #4B6478 só na linha de destaque (L3). Nenhuma outra.
  • Comprimento100% da coluna de texto em separador (L1, L2, L5) · 64–120 px em destaque (L3) · altura do bloco em vertical (L4).
  • Espaçamento24–40 px acima e abaixo. A linha respira; se encostar no texto, vira sublinhado.
Onde usar

Entre seções de texto, entre título e corpo, entre colunas, sob um rótulo de destaque, capa de apresentação e proposta.

Onde não usar

Em listas, em tabelas, dentro de pílulas e botões, em e-mail HTML (usar L2 como hr sólido .14), como padrão repetido de fundo.

Nunca

Dois degradês diferentes na mesma tela · como borda de cartão, tabela ou botão · mais de uma L3 por tela · L5 fora de capa · sobre foto sem véu.

  • L1height:1.5px; background:linear-gradient(90deg, rgba(211,224,234,0) 0%, #D3E0EA 50%, rgba(211,224,234,0) 100%)
  • L2height:1.5px; background:linear-gradient(90deg, rgba(16,24,32,.14) 0%, rgba(16,24,32,0) 100%)
  • L3height:1.5px; width:96px; background:linear-gradient(90deg, rgba(75,100,120,0) 0%, #4B6478 50%, rgba(75,100,120,0) 100%)
  • L4width:1.5px; align-self:stretch; background:linear-gradient(180deg, rgba(211,224,234,0) 0%, #D3E0EA 50%, rgba(211,224,234,0) 100%)
  • L5display:flex; align-items:center; → [linha flex:1 · rgba(211,224,234,0) → #B4C7D6] + [símbolo 14px, margin 0 6px] + [linha flex:1 · #B4C7D6 → rgba(211,224,234,0)]
Traço

1.5 px, sempre. O mesmo dos ícones Lucide. Nunca 1 px, nunca 2 px, nunca tracejada.

36 ícones · Lucide, traço 1,5

Ícones

Lucide 1.50.0 (lucide.dev), sempre embutida como SVG. Nunca por CDN, nunca emoji, nunca outra família.

  • i-ajuda
  • i-ajuste
  • i-arquivar
  • i-baixar
  • i-balao
  • i-banco
  • i-busca
  • i-cadeado
  • i-calendario
  • i-celular
  • i-chave
  • i-check
  • i-copiar
  • i-desarquivar
  • i-disco
  • i-editar
  • i-escudo
  • i-externo
  • i-grade
  • i-imagem
  • i-info
  • i-lista
  • i-lixeira
  • i-mais
  • i-monitor
  • i-olho
  • i-painel
  • i-pastas
  • i-pessoas
  • i-reabrir
  • i-relogio
  • i-sair
  • i-sino
  • i-subir
  • i-usuario-x
  • i-seta-baixo

São os 36 ícones da prancha, mais as setas anterior e próximo (38 no total). O icones.svg do DS tem outros ids além destes (lista completa em Design System/LEIA-PRIMEIRO.md › Ícones).

  • Buscar17 px

    padrão

  • 18 px

    em discos e indicadores

  • Menu15 px

    em botões fantasma, busca e menus

  • Meta14 px

    em chips, metas e selects

  • Texto pequeno13 px

    junto de texto pequeno

17 px padrão · 18 px em discos e indicadores · 15 px em botões fantasma, busca e menus · 14 px em chips, metas e selects · 13 px junto de texto pequeno.

Biblioteca completa

1.858

Todos os ícones da Lucide 1.50.0. Busque pelo nome em inglês; um clique copia o SVG já com o traço 1,5, para colar em qualquer peça, no Figma ou no código.

  • Traço1.5 no viewBox de 24 · pontas e junções redondas · sem preenchimento · currentColor. A Lucide vem com traço 2 por padrão: nunca usar.
  • ExceçãoSó o check da caixa de marcar usa traço 3 (desenhado a 12 px, sai com 1,5 px na tela).

Tinta #101820, ou tinta 46% em repouso; Ardósia Média #4B6478 só em ação de texto. Nunca ícone colorido para indicar estado.

Exceção: ✓ e ✕

Desde 27/10/2026 o DS usa ✓ verde (--positivo #256B45) e ✕ vermelho (--negativo #A8353A) em listas de faça / não faça, sempre junto do fundo claro semântico (--st-ok #D6EFE0, --st-alerta #F8DADA). Fora desse par, a regra acima vale.

  • Uso<svg class="i"><use href="#i-busca"/></svg>
  • CSSsvg.i { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round }
  • ArquivoDesign System/icones.svg: bloco de <symbol> com os ícones, ids i-nome em português. Cola-se uma vez no fim do <body>.
  • RegrasDesign System/LEIA-PRIMEIRO.md, seção "Ícones". O traço fica no CSS svg.i do base.css; os símbolos levam só os caminhos.
  • Ícone novoCopiar os caminhos em lucide.dev para um <symbol id="i-nome" viewBox="0 0 24 24"> sem atributos de traço e acrescentar em icones.svg. Em React/Vue: strokeWidth={1.5} em todo ícone.
Conferência

Antes de entregar, buscar stroke-width no projeto: só pode aparecer 1.5 (ou 3 no check da caixa).

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

O pulso, identidade visual do Summa, está em Summa › Identidade visual (frontend/summa/identidade-visual.html).

A apresentação final (AV-16) mostra só o Alcance, em tela cheia, no fundo Tela. A Varredura está documentada na prancha Cor-farol.

Símbolo: Caminho do símbolo numa área de 100 × 100 (centro em 50, 50): M100.00 49.99C81.45 48.39 70.71 45.83 61.32 46.35C53.85 46.74 48.06 52.27 47.03 61.02C46.78 68.49 49.10 90.98 50.01 100.00C51.61 86.46 51.91 66.64 62.17 58.86C70.61 52.45 84.67 51.61 100.01 50.01L100.00 49.99ZM0.00 49.99C18.55 51.59 29.29 54.15 38.68 53.63C46.15 53.25 51.94 47.71 52.97 38.96C53.22 31.49 50.90 9.00 49.99 -0.01C48.39 13.53 48.09 33.35 37.83 41.12C29.39 47.54 15.33 48.38 -0.01 49.98L0.00 49.99Z

Conteúdo da Identidade Visual da Impulsamos, direção Cor principal (Bruma): pranchas "Vidro e desfoque", "Linhas" e "Ícones", e a prancha de vidro da Apresentação visual (versão final, de onde vêm os exemplos sobre degradê e sobre foto). Nomes de token atualizados para os do Design System/tokens.css; o artefato usava --glass, --glass-foto, --glass-denso e --veil.

Pendências
  • Farol: a apresentação final (AV-16) traz só o Alcance. Falta a Isabela confirmar se a Varredura continua valendo para carregamento e transição.
  • A prancha Cor-farol começa no G2. Não há G1 no artefato.