Feedback e camadas · Impulsamos

Pílulas de estado

6

Fundo claro do estado + texto e ponto na cor forte. Um tamanho só. Nunca texto colorido solto para dizer estado.

Os seis estados

.pilula

Aberto, ok, espera e alerta levam ponto (6px na cor do texto). Arquivado é neutro; destaque é o rótulo em evidência, em Ardósia.

Em andamento Concluído Aguardando Pede ação Arquivado Projeção · 2026

Classe	Fundo	Texto e ponto	Quando
`.pilula.aberto`	`--st-aberto` #D3E0EA	`--ardosia` #254157	novo, em andamento
`.pilula.ok`	`--st-ok` #D6EFE0	`--positivo` #256B45	concluído, certo, feito
`.pilula.espera`	`--st-espera` #FBEFD9	`--aviso-texto` #805B00	aguardando alguém
`.pilula.alerta`	`--st-alerta` #F8DADA	`--negativo` #A8353A	erro, pede ação
`.pilula.arquivado`	tinta a 6%	`--tinta-66`, sem ponto	arquivado, inativo
`.pilula.destaque`	`--ardosia`	branco 600, sem ponto	rótulo em evidência (ex.: Projeção)

Base: padding: 4px 10px, raio pílula, Inter 500 11,5px. Contraste da cor forte sobre o próprio fundo ≥ 4,9 : 1.

Dentro de um bloco Ardósia

.bloco.escuro .pilula

Sobre Ardósia (.cartao.destaque, .bloco.escuro) .ok, .espera e .alerta mantêm a cor do estado na versão do modo escuro: fundo da cor forte misturada na Tinta, texto claro do estado (28/10/2026). .aberto e .arquivado ficam branco 12%.

Concluído Aguardando Pede ação

No modo escuro

[data-tema="escuro"]

Mesmos nomes, valores trocados nos tokens: o fundo vira a cor forte misturada na Tinta e o texto clareia.

Estado	Fundo escuro	Texto escuro
aberto	Ardósia #254157	`--acento` (Bruma)
ok	`color-mix(#256B45 45%, #101820)`	`color-mix(#256B45 40%, #D6EFE0)` ≈ #8FBAA2
espera	`color-mix(#805B00 45%, #101820)`	`color-mix(#805B00 50%, #FBEFD9)`
alerta	`color-mix(#A8353A 45%, #101820)`	`color-mix(#A8353A 40%, #F8DADA)` ≈ #D8989A
arquivado	Tela a 7%	`--tinta-66`

Pontos, contagem e tecla

Sinais pequenos: a situação numa bolinha, quantos itens há, um atalho de teclado, o aviso de não lida.

Ponto de situação

.ponto-s

Bolinha de 8px com o estado; o nome aparece num balão ao passar o mouse (data-situacao). Usada na lateral, ao lado do nome. O último está com o balão forçado (.ds-forca-hover, só desta página).

8 × 8px, anel interno tinta 12%; área de toque ampliada 6px (::before). Cor: aberto --acento, ok --positivo, espera --aviso-texto, alerta --negativo. Balão: à direita, z-index 50, padding 5 9, raio 8, fundo --tinta, branco 11px 500, aparece em 150ms deslizando 4px. Escuro: balão Ardósia e um véu claro sobre o ponto.

Contagem, tecla e não lida

.contagem · .tecla · .redondo .ponto

Contagem em Bruma com número Ardósia; tecla como uma teclinha branca; o ponto Ardósia no sino diz que há algo não lido.

4 128 ⌘ K Esc

Peça	Claro	Escuro
`.contagem`	mín. 20 × 20, padding 0 8, pílula, Bruma, Ardósia 11px 600	Ardósia com número Bruma
`.tecla`	mín. 20 × 20, padding 0 6, raio 6, `--branco` + anel `--linha-forte`, mono 500 11px `--tinta-66`	tokens
`.redondo .ponto`	7px `--marcado` (Ardósia), anel branco 2px	Lima, anel Névoa

Nota e cuidado

Dois avisos que ficam no conteúdo. A nota informa; o cuidado alerta para um risco.

Nota

.nota

Informação de apoio, calma: fundo Bruma Clara, ícone i-info (informação) ou i-escudo (segurança, acesso).

Os números deste painel consideram só as campanhas ativas. Dados de teste ficam de fora.

Só contas @impulsamos.es podem baixar os dados dos candidatos.

flex, gap 10, padding 12 14, raio 12, --bruma-clara, 12px/1.5 --tinta-82; ícone 17px --acento. Sobre Ardósia: branco 12%.

Cuidado

.cuidado

Risco, armadilha, ressalva: âmbar semântico, ícone i-alerta num disco, rótulo curto em caixa alta. No máximo um por bloco.

Armadilha

Excluir o processo apaga também as entrevistas agendadas. Avise os candidatos antes.

grid 32px 1fr, gap 4 12, padding 14 16, raio 16, fundo --st-espera, anel --aviso-texto a 16%. Disco 32px com --aviso-texto a 14%, ícone âmbar; rótulo --aviso-texto; texto 13px/1.6 --tinta-82. Chip ou pílula neutra dentro dele fica âmbar.

Aviso

Cartão curto de "precisa de atenção". Quase sempre é um link inteiro que leva ao que precisa ser feito.

Faixa de atenção com avisos

.atencao > .atencao-vidro > a.aviso

Degradê Bruma com a estrela (o símbolo com brilho) e os avisos em vidro. Cada aviso termina em Abrir, com seta que avança no hover.

Precisa de atenção

3 candidatos sem resposta há 5 dias

Growth Marketer. O combinado é responder em até 48 horas.

Abrir Vaga sem movimento

Assistente Administrativo está sem candidaturas desde 8 de outubro.

Abrir

Aviso: repouso, hover e sem link

.aviso · a.aviso

No hover o link fica branco com anel --acento e a seta anda 4px (forçado aqui com .ds-forca-hover). Sem destino, use div.aviso sem o "Abrir".

Vaga sem movimento

Sem candidaturas desde 8 de outubro.

Abrir Vaga sem movimento

Sem candidaturas desde 8 de outubro.

Abrir

Prazo amanhã

A seleção de Designer Sênior fecha em 28 de outubro.

Medidas

base.css

A faixa inteira também é documentada em Cartões e dados.

Peça	Valor
`.aviso`	branco 88%, raio 16, anel `--linha`, padding 16, coluna gap 6 (escuro: rgba(26,44,58,.88))
`.aviso strong`	Inter 600 14px/1.3
`.aviso p`	12,5px/1.55 `--tinta-66`, margem 0 0 8
`.aviso .abrir`	12,5px 500 `--ardosia-media` + seta 14px (`--icone-seta`)
`a.aviso:hover`	`--branco`, anel 1,5px `--acento` + `--sombra-cartao`; seta +4px em 300ms
`.atencao`	raio 24, padding 16, degradê Névoa → Bruma → Tela + duas luzes desfocadas; `.atencao-grade` colunas de mín. 240px

Aviso flutuante

O "toast": confirma algo que acabou de acontecer, no canto inferior direito, e some sozinho em 5 segundos.

Ao vivo

avisar(texto, icone)

Clique: cada botão chama window.avisar() do comum.js. O ícone decide a cor: i-check verde, i-alerta âmbar (atenção), i-fechar vermelho (erro), outro ícone em --acento.

JavaScript

// comum.js expõe window.avisar(texto, icone = 'i-check'); some sozinho em 5s
avisar('Alterações salvas');                       // sucesso: ✓ verde
avisar('Não foi possível salvar.', 'i-fechar');     // erro: ícone vermelho
avisar('Link copiado.', 'i-info');                  // neutro: ícone --acento

// exemplo desta página: botões com data-avisar chamam a função
document.querySelectorAll('[data-avisar]').forEach((b) => {
  b.addEventListener('click', () => avisar(b.dataset.avisar, b.dataset.icone || 'i-check'));
});

Como ele aparece

.aviso-flutuante

Os três parados, para comparar. Cartão branco com sombra de camada, texto 13px, botão de fechar. O HTML é gerado pelo avisar().

Alterações salvas

Não foi possível salvar. Tente de novo.

Link copiado.

HTML gerado pelo avisar()

<!-- gerado por avisar() no fim do <body> (não escreva à mão) -->
<div class="avisos-flutuantes">
  <div class="aviso-flutuante" role="status">
    <svg class="i" aria-hidden="true"><use href="#i-check"/></svg>
    <span>Alterações salvas</span>
    <button class="icone" aria-label="Fechar"><svg class="i" viewBox="0 0 24 24"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg></button>
  </div>
</div>

Medidas e comportamento

base.css · comum.js

Nunca toast de biblioteca com o tema dela.

Peça	Valor
`.avisos-flutuantes`	criado no fim do `body` na primeira chamada; `position: fixed; right: 20px; bottom: 20px; z-index: 80`; coluna, gap 10 (o mais novo embaixo)
`.aviso-flutuante`	340px (máx. `100vw − 40px`), padding 14 16, raio 16, `--branco`, anel `--linha` + `--sombra-pop`, 13px/1.45, `role="status"`
entrada	sobe 6px e aparece em 200ms `--ease-out` (sem animação com `prefers-reduced-motion`)
ícone	17px; `i-check` `--positivo`; `i-alerta` `--aviso-texto` (âmbar); `i-fechar` `--negativo`; outros `--acento`
fechar	`.icone` 26px redondo; ou some sozinho em 5000ms
texto	vai por `textContent` (seguro: não interpreta HTML)

Popover e notificações

Painel flutuante em vidro denso, preso a um botão. Aqui ele aparece no fluxo; no sistema, flutua embaixo do sino (veja Navegação e casca › Barra superior).

Medidas

base.css › sobreposições

Vidro V3, o mesmo do .calendario e da .janela.

Peça	Valor
`.popover`	`position: absolute; z-index: 40; right: 0; top: calc(100% + 8px)`; 360px (máx. `100vw − 24px`), máx. 70vh com rolagem; padding 6; raio 16
vidro	variação registrada do V3 (exceção no LEIA-PRIMEIRO, 28/10/2026): branco 78% + `blur(20px) saturate(1.2)`; anel interno branco 70% + anel `--linha` + `--sombra-pop`. Escuro: `--vidro-denso`
`.popover-topo`	padding 8 12 10, linha embaixo, título Sora 450 16px; botão 12px 500 `--ardosia-media`
`.notif`	flex gap 10, padding 10 12, raio 12; ponto 8px `--marcado` (escuro: Lima); hover `--hover`
`.notif.lida`	ponto transparente (o espaço fica: o texto não pula)
texto	`strong` 13px 600 · `p` 12px/1.5 `--tinta-66` · `time` 11,5px `--tinta-46`
`[hidden]`	some; o `comum.js` abre/fecha o do `.sino-caixa` e o da `.conta`

Menus de ação

Listas curtas de ações num popover: o ⋯ da linha da tabela e o menu da conta. Ação de perigo em vermelho, separada quando for sair.

Menu da linha, ao vivo

[aria-controls] → .popover.menu-linha

Clique no ⋯ de qualquer linha. Um menu por tela serve a todos os botões: cada botão aponta para ele com aria-controls e o comum.js abre o menu colado ao botão (embaixo, ou em cima se não couber), foca o primeiro item e fecha com Esc, clique fora, clique num item ou ao rolar.

Processo	Situação
Designer Sênior Recrutamento	Aguardando
Growth Marketer Recrutamento	Concluído

Medidas e comportamento

base.css

Os dois menus usam o mesmo item.

Peça	Valor
item	flex gap 10, largura toda, padding 9 12, raio 10, Inter 500 13px `--tinta-66`, ícone 17; hover/foco `--hover` + `--tinta`
`.menu-linha`	`position: fixed`, 200px, máx. `100vh − 16px`; o `comum.js` põe `top`/`left` junto ao botão (6px de folga, nunca a menos de 8px da borda da tela)
botão ⋯	`.icone` com `i-mais` e `aria-controls="id-do-menu"`; o `comum.js` põe `aria-haspopup="menu"` e `aria-expanded`
qual linha?	`document.querySelector('[aria-controls="menu-processo"][aria-expanded="true"]')` é o botão da linha aberta
`[aria-checked=true]`	`--bruma-clara` + `--tinta` (só no `.menu-linha`)
`.perigo`	`--negativo`: `.menu-linha [role^=menuitem].perigo` e `.menu-conta :is(a, button).perigo`
`.separa`	`margin-top: 4px` + linha `--linha` em cima em `a` ou `button` do `.menu-conta` e nos itens do `.menu-linha` (28/10/2026)
na conta	abre para cima, largura da conta; recolhida, abre ao lado (fixed, left 84)

Corrigido em 28/10/2026: .separa e .perigo valem em a e em button, e o .menu-linha também tem .separa.

Janela

Pede uma decisão e bloqueia o resto da tela até a resposta. É o <dialog> nativo aberto com showModal(): nunca alert(), confirm() ou prompt().

Ao vivo

dialog.janela

Cancelar antes, a ação à direita. Ação comum: um .botao. Ação de perigo: .fantasma.perigo (sem botão escuro chamando para o risco). Esc fecha.

JavaScript

// abrir: showModal() (camada de cima do navegador, com fundo escurecido)
document.querySelectorAll('[data-abre-janela]').forEach((b) => {
  b.addEventListener('click', () => document.getElementById(b.dataset.abreJanela).showModal());
});
// fechar: <form method="dialog"> nos botões, ou Esc (nativo do <dialog>)
// o valor do botão clicado fica em janela.returnValue ('cancelar' | 'salvar')

Como ela aparece

.janela

Vidro denso com raio de cartão (24). No sistema, atrás dela a tela inteira escurece e desfoca (::backdrop).

Salvar as alterações?

A nova descrição da vaga aparece para os candidatos na hora.

Medidas

base.css

Abre na hora, sem animação.

Peça	Claro	Escuro
`.janela`	largura `min(440px, 100vw − 24px)`, padding 24, sem borda, raio 24, branco 86% + `blur(24px) saturate(1.2)`, anel interno branco 70% + `--sombra-pop`	`--vidro-denso`
`::backdrop`	Tinta a 28% + `blur(6px)`	rgba(8,12,16,.6)
`h2`	Título 3: Sora 450 21px	tokens
`p`	12,5px/1.55 `--tinta-66`, margem 8 em cima	tokens
`.acoes`	flex à direita, gap 8, margem 22 em cima	—
camada	top layer do navegador: fica acima de todo z-index	—

Dica e carregando

Explicação curta no hover ou no foco, e a rodinha de espera.

Dica

.com-dica[data-dica]

Balão tinta de 260px que abre embaixo, alinhado à direita, no hover e no foco pelo teclado. O segundo está forçado (.ds-forca-hover). Cuidado: o balão sai da caixa do elemento; se algum pai tiver overflow: hidden (cartão de imagem, palco), ele é cortado e some. Nesse caso, ponha overflow: visible no elemento da dica (28/10/2026).

Balão: top: calc(100% + 8px); right: 0, z-index 60, 260px, padding 10 12, raio 10, fundo --tinta, branco 12px/1.45; aparece em 150ms descendo 4px. Escuro: Ardósia com anel claro. O texto vem do CSS (attr()): ponha o mesmo sentido no aria-label do botão. Na lateral recolhida a dica é outra peça, a .dica-lateral (Navegação e casca).

Carregando

.girando

Rodinha de 18px: trilho Bruma Clara, ponta --acento, uma volta em 0,8s. Junto de um texto curto quando a espera passa de um segundo.

Carregando candidatos…

18 × 18, borda 2px --bruma-clara com topo --acento, animation: ds-girar .8s linear infinite. Com prefers-reduced-motion a animação cai para quase zero (regra global do base.css). Barra de progresso: .barra-prog, em Cartões e dados.

Nota da seção

details.nota-secao

O "!" ao lado do título explica só aquela seção (o "?" é da página). Abre um balão de vidro; fecha ao clicar fora ou com Esc.

Combinações

Regra. Claras são o padrão; escuras com Lima só em subaplicação.

Botão 28px, translúcido, ícone 15px; aberto ou no hover fica branco. Balão: vidro, 380px, raio 16, padding 16 18, z-index 40. Centrado na altura do título quando está dentro de .faixa.

Chip com dica

.chip-dica.com-dica

Chip Bruma que explica uma palavra ou item ao passar o mouse ou focar. Usado no vocabulário com ressalva e nos nichos.

rápida* Hotéis e restaurantes

26px de altura, Bruma, texto 12px 500; hover Bruma Profunda. O balão é a .com-dica (abre à esquerda). Ponha tabindex="0" para abrir também pelo teclado.

Copiar ao clicar

[data-copiar] · data-aviso

Clicou, copiou. O comum.js copia o texto e mostra o aviso. Vazio copia o próprio texto do elemento; data-aviso troca a mensagem.

--ardosia

Cursor de cópia em todo [data-copiar]. Use em HEX, token, código CSS, referência de foto e combinação de cores.

Estados vazios

O DS tem uma peça de vazio pronta: a linha "nada por aqui" do popover de notificações.

Sem notificações

.notif-vazio

Uma frase curta em 11,5px --tinta-46, no lugar das .notif.

Lista, tabela ou busca vazia

sem classe própria

Não existe componente de vazio para lista ou tabela. Até existir, monte com peças do DS e diga o que fazer a seguir.

Nenhum processo arquivado. Processos encerrados aparecem aqui por 30 dias.

Hierarquia de camadas

O que fica por cima do quê (z-index do DS) e qual peça usar para cada tipo de resposta.

Pilha de camadas

z-index

De cima para baixo. A janela não usa z-index: o showModal() põe ela na camada de cima do navegador.

top.janela (showModal) e o ::backdrop

80.avisos-flutuantes · .dica-lateral

70.lateral como gaveta (abaixo de 1024px)

69.veu-gaveta

60.com-dica (balão)

50.ponto-s (balão)

40.popover · .calendario do campo de data

31faixa de 1px da barra oculta

30.topo grudado (véu em −1 dentro dele)

1.atencao-vidro sobre as luzes da faixa

−1luz e mancha do painel, manchas e símbolo da tela de acesso

Quando usar cada uma

escolha

Pergunte: precisa de resposta? Janela. É uma escolha? Popover. Já aconteceu? Aviso flutuante. Precisa ficar na tela? Nota, cuidado ou aviso.

Peça	Use para	Bloqueia?	Some como
`.janela`	confirmar, ação de perigo, formulário curto	sim	botão, Esc
`.popover`	notificações, menu de ações, conta, lista do combo, calendário	não	clique fora, Esc
`.aviso-flutuante`	"salvo", "copiado", "não foi possível…"	não	5s ou ✕
`.com-dica`	explicar um número ou termo	não	tirar o mouse/foco
`.nota`	informação que vale enquanto a tela existe	não	fica
`.cuidado`	risco, armadilha, ressalva no conteúdo	não	fica
`a.aviso`	algo que precisa de atenção, com destino	não	quando resolvido
`.pilula`	estado de um item	não	muda com o estado

Regras

Cor semântica, texto e acessibilidade em todo feedback.

Faça

Diga estado com pílula, ✓/✕ ou o par fundo claro + cor forte.
Use verde só para certo/feito, âmbar para aguardando, vermelho para erro e perigo.
Confirme ação feita com avisar(); peça decisão com a .janela.
Na janela: Cancelar antes, ação à direita; perigo é .fantasma.perigo.
Diga que nada se perde: excluir manda para a lixeira e pode ser restaurado.
Dê aria-label a todo botão só de ícone, inclusive o que tem .com-dica.

Não faça

Texto colorido solto para dizer estado.
Verde, vermelho ou âmbar como decoração ou em texto corrido.
alert(), confirm(), prompt() ou toast de biblioteca.
Pílula ou chip de outro tamanho para destacar: destaque é peso e cor.
Só o title nativo como dica.
Mais de um .cuidado no mesmo bloco, ou .atencao pesada para uma ressalva de conteúdo.

Cor dentro do escuro (28/10/2026): dentro de .cartao.destaque e .bloco.escuro as pílulas de estado mantêm a cor semântica, na versão legível sobre o escuro.