Cores e tokens · Impulsamos

Paleta Bruma

8

As cores da marca. Bruma é a principal, Ardósia o destaque, Tinta o texto e Lima só sobre escuro.

Escala da Bruma no tema claro, da mais escura à mais clara. Clique numa cor para copiar o token. A Lima fica à parte: só aparece sobre Tinta.

Claro	Escuro	Token	Valor claro	Valor escuro	Uso
					Texto, botão principal, chip ativo. No escuro continua sendo a cor do texto (vira Tela).
				igual	Cor principal. Contagem, pílula "aberto", hover do botão claro, seleção de texto, manchas.
				igual	Destaque de cada seção: cartão/bloco escuro, barra maior do gráfico, pílula "Projeção".
				igual	Só sobre escuro: subaplicação `.escuro` e acento do modo escuro. Nunca no claro, nunca texto.
					Links, ações de texto, nome do sistema na marca, borda de foco de campo. No escuro vira Aço.
				igual	Barras secundárias de gráfico, detalhes.
				igual	Luz dos degradês, anel de foco, barras claras de gráfico.
					Trilhos de progresso, discos de avatar, notas, item escolhido do menu.

Tons de tinta

5

O texto não muda de cor: muda de opacidade. Cinco alfas da Tinta para cinco níveis de leitura.

Os cinco níveis ao vivo

color: var(--tinta-*)

Mesmo texto, cinco alfas. Mudam com o tema (no escuro, viram Tela com alfa).

--tintaTítulo e texto curto de interface

--tinta-82Texto longo: parágrafos e itens de lista, até 76 caracteres por linha

--tinta-66Texto secundário, descrição de um item

--tinta-56Rótulo de apoio

--tinta-4612 out 2026 · placeholder · ícone em repouso

--tinta-32 ícones bem discretos

Claro	Escuro	Token	Valor claro	Valor escuro	Uso
					Texto longo (parágrafos, listas).
					Texto secundário, descrições.
					Rótulos de apoio.
					Datas, placeholders, ícones em repouso. No claro .6 desde 28/10/2026 (era .46); no escuro .5 (texto pequeno ≥ 4,5:1).
					Ícones discretos e bordas (nunca texto). No claro .48 desde 28/10/2026 (era .32); no escuro .38 (≥ 3:1).

Amostras de cor

ul.amostras

Pílula com o quadrado da cor e o nome; os valores abrem num balão ao passar o mouse ou focar, e o clique copia.

Tinta
Tinta 66%

Quadrado 32px, pílula Tela; balão branco 280px com a faixa da cor (44px) e linhas rótulo/valor em mono. A cor vem do style do quadrado e da faixa.

Superfícies

9

Fundos opacos e os quatro vidros oficiais. Vidro só sobre Névoa, degradê ou foto, nunca sobre branco chapado.

Claro	Escuro	Token	Valor claro	Valor escuro	Uso
					Fundo da casca (atrás do painel), chips, blocos de agenda.
				Tinta + 20% Ardósia	Painel e blocos rebaixados.
				Tinta + 48% Ardósia	Cartão, campo, menu, botão fantasma.
					V1 vidro: + `--vidro-borda` + `blur(24px)` (`.cartao.vidro`).
					Fio de 1px do vidro V1.
					V2 sobre foto: `blur(30px) saturate(1.4)`, borda `rgba(255,255,255,.6)`.
					V3 denso: `blur(20px)` + sombra. Também `.popover`, `.calendario`, `.janela`.
					Controles da barra superior e da lateral (com `--borda-interna`).
					V4 véu do cabeçalho fixo ao rolar (`blur(14px)` + máscara).

Hierarquia de superfícies

4

Quatro camadas, sempre nesta ordem. Cada camada tem a sua cor, o seu raio e a sua sombra; o bloco dentro do cartão volta para Tela (rebaixado).

Fundo da cascabody.casca
--nevoa · atrás de tudo. No escuro é a própria Tinta, a camada mais funda.
Painel.painel
--tela com a luz --g-painel no topo e uma mancha. Raio --r-painel 28 no canto superior esquerdo.
Cartão.cartao
--branco, raio --r-cartao 24, --sombra-cartao. No escuro sobe com luz: Tinta + 48% Ardósia.
Bloco.bloco · .bloco.nevoa
Dentro do cartão, rebaixado: --tela raio 20, ou --nevoa raio 16.

Cartão com bloco

.cartao > .bloco

O palco já é Tela (o painel). Dentro dele, o cartão branco e, dentro do cartão, o bloco rebaixado.

Resumo do mês

Bloco rebaixado dentro do cartão.

Papéis

4

Tokens que dizem para que serve a cor. No claro valem o mesmo que a cor crua; no escuro trocam. Use-os sempre que o papel for este.

Papéis ao vivo

--acento · --marcado · --sobre-marcado

Ative o modo escuro (botão no pé da lateral ou na seção Modo escuro): o ícone vira Bruma e o controle marcado vira Lima com check Tinta.

Ícone em --acento12

Marcado Escolhido Ligado

Claro	Escuro	Token	Valor claro	Valor escuro	Uso
					Ícone, ponto, barra e traço de destaque sobre superfície (disco, pílula de número, nota, progresso, `.estrela`).
					Controle marcado (caixa, radio, chave, deslizador, dia escolhido) e ponto de não lida.
					O que fica por cima do `--marcado` (check, miolo).
				igual	Tinta que não inverte: texto sobre Lima, sobre branco fixo, fundo `.escuro`.

Estados e semântica

7

Verde = certo/feito, vermelho = errado/perigo, âmbar = aguardando. Sempre em par: fundo claro + texto/ícone na cor forte.

Pílulas de estado

.pilula.aberto · .ok · .espera · .alerta

Fundo claro do estado, texto e ponto na cor forte. O ponto vem do CSS.

Em andamento Concluído Aguardando Pede ação

Claro	Escuro	Token	Valor claro	Valor escuro	Uso
					Fundo de novo / em andamento (a própria Bruma; no escuro, Ardósia).
				≈ #193D31	Fundo de concluído / certo.
				≈ #423612	Fundo de aguardando; também o bloco `.cuidado`.
				≈ #54252C	Fundo de erro / pede ação.
				≈ #8FBAA2	Verde forte: texto, ícone e ponto de certo/feito, variação positiva.
				≈ #D8989A	Vermelho forte: erro de campo, ação de perigo, ✕.
				≈ #BEA56C	Âmbar forte: aguardando, atenção, rótulo do `.cuidado`.

Linhas, hover e foco

5

Tudo em tinta com alfa baixo: a estrutura aparece sem pesar. Foco é sempre um anel, nunca contorno do navegador.

Seleção de texto (::selection): fundo Bruma no claro; Ardósia com texto branco no escuro e dentro de destaque (branco 30%).

Claro	Escuro	Token	Valor claro	Valor escuro	Uso
					Divisores e borda de cartão.
					Borda de campo e de botão fantasma.
					Fundo ao passar o mouse.
					Borda embutida (`box-shadow`) das pílulas e controles translúcidos.
					Anel de foco pelo teclado (botões, controles). Claro: Bruma Profunda 4px; escuro: Lima 3px.

Degradês

3

Três degradês oficiais. A luz fica no topo; no escuro, a luz é Ardósia sobre Tinta.

A1 Impulso · bloco de chamada

A2 Céu · capas, um por tela

Luz do topo do painel e do acesso

Claro	Escuro	Token	Valor claro	Valor escuro	Uso
					A1 Impulso: bloco de chamada claro (`.bloco.degrade`), leva manchas.
					A2 Céu: o principal, para capas. Um por tela.
					Luz do topo do painel (`.painel::before`, 420px) e fundo da tela de acesso.

Manchas do painel e do acesso

Miniaturas ao vivo (mudam com o tema): à esquerda o painel com a luz --g-painel e a mancha no canto; à direita a tela de acesso com as três manchas, o símbolo no fundo e o cartão de vidro.

Onde	Claro	Escuro	Forma	Para quê
`.mancha`base.css	Bruma	Ardósia	círculo, `blur(90px)`; tamanhos `.pequena` 240 / `.media` 380 / `.grande` 560 e, no `.bloco.degrade`, posição padrão (28/10/2026)	Decoração de degradês e capas (`.bloco.degrade`).
`.painel::before`layouts.css	`--g-painel`	`--g-painel` (Ardósia)	420px de altura no topo	A luz do topo do painel.
`.painel::after`layouts.css	Bruma · opacidade .7	Ardósia · .55	620 × 620, `blur(120px)`, canto superior direito	A mancha do painel.
`.acesso`layouts.css	`--g-painel` + `--nevoa`	idem (tokens escuros)	fundo da tela inteira	Fundo da tela de acesso.
`.acesso > .mancha.um`layouts.css	Bruma · .7	Ardósia (via `.mancha`)	560 × 560, à esquerda, 30% do topo	Luz do lado esquerdo.
`.acesso > .mancha.dois`layouts.css	Bruma Profunda · .55	Ardósia	620 × 620, canto superior direito	Luz do canto.
`.acesso > .mancha.tres`layouts.css	Bruma Profunda · .9	Ardósia	380 × 380, `blur(70px)`, atrás do cartão	Dá o que o vidro do cartão desfocar.
`.acesso > .simbolo-fundo`layouts.css	Bruma Profunda · .25	Ardósia · .45	símbolo 220vh, girado 14°, máscara `--motivo-simbolo`	Símbolo "Caminhos" no fundo.
`.vitrine .mancha · .simbolo-grande.lima`layouts.css	Bruma sobre Tinta · Lima	igual	`blur(70px)` · símbolo 260px	Legado (tela de entrar antiga). Único lugar com Lima no claro.

Regras de cor

5

A cor aparece pouco e sempre com um papel. Cinco regras valem para todo sistema da Impulsamos.

1 · Ardósia é o destaque de cada seção

.cartao.destaque · .bloco.escuro

O elemento mais importante de cada seção pode ser escuro. Tudo dentro dele já sai em branco pelo base.css.

Principal

Plano do mês

O que o olho deve achar primeiro.

Apoio

Equipe

Cartão branco ao lado.

Apoio

Prazos

Cartão branco ao lado.

Faça

Um escuro por seção: a ficha principal, um bloco de chamada, a barra maior do gráfico.
Deixe o base.css pintar os filhos: sem estilo na tela.

Não faça

Dois escuros encostados, ou Ardósia como fundo de página.
Ardósia como texto ou ícone: some no escuro. Use --acento.

2 · Lima só sobre escuro

--lima

No tema claro, a Lima só existe na subaplicação escura (capa, peça de marca). No modo escuro, vira o acento pontual.

Detalhe Lima sobre Tinta

13,61:1Traço, símbolo, ponto

Lima sobre Névoa

1,14:1Some no claro

No escuro, só aqui

Anel de foco, item ativo (chip, aba, paginação, ícone da lateral).
Controle marcado, ponto de não lida, luz da borda do botão no hover, .estrela.

Nunca

Lima no tema claro ou como texto.
Lima como fundo de área ou em alfa baixo (vira oliva).

3 · Texto sempre tinta

--tinta · --tinta-82 · .suave · .apoio · .mudo

Sobre fundo claro, todo texto é Tinta ou um alfa dela. A hierarquia vem do tamanho, do peso e da opacidade, nunca de outra cor.

Proposta enviada

O cliente recebeu a proposta e tem até sexta para responder.

Secundário: quem enviou e por qual canal.

Apoio: rótulo ou observação.

12 out 2026, 14:20

Faça

Texto longo em --tinta-82, com negrito em tinta nos trechos-chave.
Links e ações de texto em --ardosia-media.

Não faça

Texto colorido solto para indicar estado: use pílula ou ✓/✕.
Cor fora do tokens.css (roxo, laranja, azul saturado).

4 · Cor semântica, só com sentido

--st-* + --positivo · --negativo · --aviso-texto

Verde, vermelho e âmbar só dizem certo, errado e aguardando. Sempre o par: fundo claro do estado + texto e ícone na cor forte.

Aprovado Recusado Aguardando assinatura

E-mail Use um e-mail @impulsamos.es.

Faça

Pílula de estado, ✓/✕ de listas, erro de campo, ação de perigo, bloco .cuidado.
Erro do campo só no texto .erro: sem vermelho berrante no campo.

Não faça

Verde ou vermelho como decoração ou em texto corrido.
Outro verde, vermelho ou âmbar fora dos tokens.

5 · Tudo dentro de caixa semântica segue a caixa

.sem-ok .sem-alerta .sem-espera .interno

Dentro de uma caixa verde, vermelha ou âmbar, tudo segue a cor da caixa: chip, tag, pílula neutra, cartão interno e rótulo. A caixa declara a cor pela classe; o cartão de dentro leva .interno. Nunca cinza nem branco lá dentro.

Habilidade que tem

Síntese

Sabe aonde quer chegar e direciona o esforço.

Obter Focar

Habilidade que não tem

Síntese

Coloca a vontade do outro em primeiro plano.

Servir Prestar

Atenção

Dois campos ainda sem resposta: Prazo Responsável

Faça

Chip, tag e cartão interno com a cor do estado da caixa onde estão.
Caixa nova: só a classe .sem-*.
Um tamanho só de chip: destaque por peso e cor.

Não faça

Chip cinza, cartão branco ou cartão Névoa dentro de caixa verde, vermelha ou âmbar.
Chip maior ou com outra fonte para destacar.

Contraste

39

Razão WCAG 2.1 calculada para os pares principais (alfa composto sobre o fundo). Mínimos: 4,5:1 texto, 3:1 ícone, controle e texto grande.

Tema claro

AaTexto de exemplo

17,89:1AAATinta sobre cartão--tinta / --branco

AaTexto de exemplo

16,79:1AAATinta sobre painel (Tela)--tinta / --tela

AaTexto de exemplo

15,58:1AAATinta sobre casca (Névoa)--tinta / --nevoa

AaTexto de exemplo

10,20:1AAATexto longo (82) sobre cartão--tinta-82 / --branco

AaTexto de exemplo

5,73:1AA textoSecundário (66) sobre cartão--tinta-66 / --branco

AaTexto de exemplo

5,00:1AA textoApoio (56 → .62) sobre cartão--tinta-56 / --branco

AaTexto de exemplo

4,71:1AA textoDatas (46 → .6) sobre cartão--tinta-46 / --branco

AaTexto de exemplo

4,57:1AA textoDatas (46 → .6) sobre painel--tinta-46 / --tela

AaÍcone e controle

3,21:1Ícone ≥ 3:1Ícone discreto (32 → .48) sobre cartão--tinta-32 / --branco

AaTexto de exemplo

6,19:1AA textoLink (Ardósia Média) sobre cartão--ardosia-media / --branco

AaTexto de exemplo

10,65:1AAABranco sobre Ardósia (destaque)#FFFFFF / --ardosia

AaTexto de exemplo

5,65:1AA textoBranco 66% sobre Ardósia (rótulo)rgba(255,255,255,.66) / --ardosia

AaTexto de exemplo

7,92:1AAAArdósia sobre Bruma (pílula aberto)--ardosia / --st-aberto

AaTexto de exemplo

5,29:1AA textoVerde sobre fundo ok--positivo / --st-ok

AaTexto de exemplo

4,96:1AA textoVermelho sobre fundo alerta--negativo / --st-alerta

AaTexto de exemplo

5,40:1AA textoÂmbar sobre fundo espera--aviso-texto / --st-espera

AaTexto de exemplo

6,49:1AA textoVermelho sobre cartão (erro de campo)--negativo / --branco

AaTexto de exemplo

13,61:1AAALima sobre Tinta (.escuro)--lima / --tinta-fixa

AaTexto de exemplo

13,61:1AAATinta fixa sobre Lima--tinta-fixa / --lima

AaTexto de exemplo

1,34:1ReprovadoBranco sobre Bruma (proibido)#FFFFFF / --bruma

AaTexto de exemplo

1,14:1ReprovadoLima sobre Névoa (proibido)--lima / --nevoa

Modo escuro

AaTexto de exemplo

13,45:1AAATexto sobre cartão--tinta / --branco

AaTexto de exemplo

15,50:1AAATexto sobre painel--tinta / --tela

AaTexto de exemplo

9,51:1AAATexto longo (82) sobre cartão--tinta-82 / --branco

AaTexto de exemplo

6,74:1AA textoSecundário (66) sobre cartão--tinta-66 / --branco

AaTexto de exemplo

5,27:1AA textoApoio (56) sobre cartão--tinta-56 / --branco

AaTexto de exemplo

4,52:1AA textoDatas (46 → .5) sobre cartão--tinta-46 / --branco

AaÍcone e controle

3,25:1Ícone ≥ 3:1Ícone discreto (32 → .38) sobre cartão--tinta-32 / --branco

AaTexto de exemplo

5,67:1AA textoLink (Aço) sobre cartão--ardosia-media / --branco

AaÍcone e controle

10,66:1Ícone ≥ 3:1Acento (Bruma) sobre cartão--acento / --branco

AaÍcone e controle

10,90:1Ícone ≥ 3:1Marcado (Lima) sobre cartão--marcado / --branco

AaTexto de exemplo

13,61:1AAATinta sobre Lima (check)--sobre-marcado / --marcado

AaTexto de exemplo

10,65:1AAABranco sobre Ardósia (destaque)#FFFFFF / --ardosia

AaTexto de exemplo

7,92:1AAABruma sobre Ardósia (pílula aberto)--acento / --st-aberto

AaTexto de exemplo

5,54:1AA textoVerde sobre fundo ok--positivo / --st-ok

AaTexto de exemplo

5,29:1AA textoVermelho sobre fundo alerta--negativo / --st-alerta

AaTexto de exemplo

4,97:1AA textoÂmbar sobre fundo espera--aviso-texto / --st-espera

AaTexto de exemplo

6,63:1AA textoVerde sobre cartão--positivo / --branco

AaTexto de exemplo

6,06:1AA textoVermelho sobre cartão--negativo / --branco

Contraste no claro corrigido (28/10/2026): --tinta-56 subiu de .56 para .62 (5,00:1 sobre branco), --tinta-46 de .46 para .6 (4,71:1; 4,57 sobre Tela) e --tinta-32 de .32 para .48 (3,21:1, ícone e borda). Os nomes ficaram; no escuro nada mudou (.56, .5 e .38).

Modo escuro

35

Escolha da pessoa, nunca automático (não segue o prefers-color-scheme). Os tokens mantêm o nome e trocam o valor pelo mesmo papel: --tinta continua "a cor do texto", --branco "a superfície do cartão".

Antes dos CSS, no <head>, a linha que aplica o tema salvo sem piscar.
O comum.js cria o botão sol/lua no pé da lateral, à direita do "Recolher". Qualquer [data-alternar-tema] também alterna.
O clique grava impulsamos:tema no localStorage e põe <html data-tema="escuro">. Os tokens fazem o resto.

Botão de tema

[data-alternar-tema]

Clique para testar: a página inteira troca de tema e as amostras "ao vivo" acompanham. Lua no claro, sol no escuro (o base.css mostra um dos dois).

Linha do <head>

<script>try{if(localStorage.getItem('impulsamos:tema')==='escuro')document.documentElement.dataset.tema='escuro'}catch(e){}</script>

JavaScript

// Ler o tema escolhido
localStorage.getItem('impulsamos:tema'); // 'escuro' | 'claro' | null (= claro)

// Ligar o escuro por código (o comum.js faz isso no clique)
document.documentElement.dataset.tema = 'escuro';
localStorage.setItem('impulsamos:tema', 'escuro');

// Voltar ao claro
delete document.documentElement.dataset.tema;
localStorage.setItem('impulsamos:tema', 'claro');

Token	Claro		Escuro
	`#101820`		`#F5F8FB`
	`#4B6478`		`#8FA6B8`
	`#E1EAF1`		`#1F3546`
	`rgba(16,24,32,.82)`		`rgba(245,248,251,.82)`
	`rgba(16,24,32,.66)`		`rgba(245,248,251,.66)`
	`rgba(16,24,32,.56)`		`rgba(245,248,251,.56)`
	`rgba(16,24,32,.46)`		`rgba(245,248,251,.5)`
	`rgba(16,24,32,.32)`		`rgba(245,248,251,.38)`
	`#EAF0F5`		`#101820`
	`#F5F8FB`		`#14202B`
	`#FFFFFF`		`#1A2C3A`
	`rgba(255,255,255,.5)`		`rgba(26,44,58,.55)`
	`rgba(255,255,255,.75)`		`rgba(245,248,251,.1)`
	`rgba(255,255,255,.4)`		`rgba(16,24,32,.4)`
	`rgba(255,255,255,.7)`		`rgba(26,44,58,.86)`
	`rgba(255,255,255,.6)`		`rgba(245,248,251,.06)`
	`linear-gradient(180deg, rgba(245,248,251,.9), rgba(245,248,251,0))`		`linear-gradient(180deg, rgba(20,32,43,.9), rgba(20,32,43,0))`
	`Ardósia #254157`		`#D3E0EA`
	`Ardósia #254157`		`#E3E935`
	`#FFFFFF`		`#101820`
	`#D3E0EA`		`#254157`
	`#D6EFE0`		`color-mix(in srgb, #256B45 45%, #101820)`
	`#FBEFD9`		`color-mix(in srgb, #805B00 45%, #101820)`
	`#F8DADA`		`color-mix(in srgb, #A8353A 45%, #101820)`
	`#256B45`		`color-mix(in srgb, #256B45 40%, #D6EFE0)`
	`#A8353A`		`color-mix(in srgb, #A8353A 40%, #F8DADA)`
	`#805B00`		`color-mix(in srgb, #805B00 50%, #FBEFD9)`
	`rgba(16,24,32,.07)`		`rgba(245,248,251,.08)`
	`rgba(16,24,32,.14)`		`rgba(245,248,251,.16)`
	`rgba(16,24,32,.04)`		`rgba(245,248,251,.05)`
	`inset 0 0 0 1px rgba(16,24,32,.06)`		`inset 0 0 0 1px rgba(245,248,251,.08)`
	`0 0 0 4px rgba(180,199,214,.55)`		`0 0 0 3px rgba(227,233,53,.5)`
	`linear-gradient(120deg, #EAF0F5 0%, #E1EAF1 45%, #FFFFFF 100%)`		`linear-gradient(120deg, #101820 0%, #1A2C3A 45%, #254157 100%)`
	`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`		`radial-gradient(220% 95% at 50% -25%, #254157 0%, rgba(37,65,87,.6) 40%, rgba(37,65,87,0) 100%), #101820`
	`radial-gradient(160% 100% at 30% -30%, #B4C7D6 0%, rgba(180,199,214,.55) 35%, rgba(180,199,214,0) 75%)`		`radial-gradient(160% 100% at 30% -30%, rgba(37,65,87,.95) 0%, rgba(37,65,87,.45) 35%, rgba(37,65,87,0) 75%)`

Ficam iguais

--bruma--ardosia--lima--aco--bruma-profunda--tinta-fixa

O que muda nos componentes

base.css · layouts.css (blocos "MODO ESCURO")

O resto vem dos tokens. Estes ajustes ficam no fim de cada arquivo.

.botaoFundo Bruma com texto Tinta; hover clareia e a luz da borda acende em Lima.
.cartao.destaque · .bloco.escuroArdósia com luz Ardósia + Aço no canto e fio claro de 1px.
Item ativo.chip.ativo, aba, paginação: Lima com texto Tinta; ícone do item ativo da lateral em Lima.
ControlesCaixa, radio, chave, deslizador marcados em Lima com check/gota Tinta.
CamposBorda de foco Aço; o brilho gira em Ardósia/Aço com um fio de Lima.
Menus e janela.popover, .calendario, .janela em vidro denso escuro.
Pílulas e balõesFundo escuro do estado, texto claro; .contagem Ardósia com número Bruma; balões em Ardósia.
GráficoBarra comum Ardósia + Aço; barra alta em Bruma (--acento).
Casca e acessoMancha do painel e manchas do acesso em Ardósia; título-marca-d'água Tela 30%.