Cartões e dados · Impulsamos

Painel de métricas

A composição que um sistema real usa: cabeçalho com número principal e cartões de resumo, linha de indicadores, tabela com filtros e gráfico. Um ponto escuro por seção: aqui, o cartão de resumo Ardósia do cabeçalho.

Tela de métricas

.painel-cabeca · .indicadores · .grade-2 · table · .grafico-barras

Monte a tela de dados nesta ordem: cabeçalho, indicadores, detalhe. O cabeçalho fica sobre a luz do topo do painel (por isso o vidro funciona).

Métricas

Visitas às vagas

594 visitas

vs. período anterior 512

Candidaturas enviadas

36

Contratados no período

2 pessoas

Candidatos únicos

43 +12%

Dias até contratar

18,5 −3 dias

Conversão

6,1%

Vagas abertas

4

Processos

Atualizado hoje, 14:30.

Processo	Situação	Atualizado
Designer Sênior 14 candidaturas	Em andamento	hoje, 14:30
Growth Marketer 12 candidaturas	Aguardando	ontem
Product Engineer 10 candidaturas	Concluído	20 out

Visitas por dia

594 visitas

1 out15 out22 out

Média42

Pico86

Dias22

Cartões

A superfície onde o conteúdo mora. Raio 24, fundo branco e sombra leve; o destaque é Ardósia e o vidro só entra sobre luz ou degradê.

Cartão

.cartao · .cartao-cabeca · .cartao-titulo

O contêiner padrão. Cabeça com título à esquerda, ações à direita e uma linha de apoio embaixo (.sub).

Próximos passos

3 passos para esta semana.

Envie o teste técnico antes da entrevista final.

Cartão de destaque

.cartao.destaque

Ardósia: o cartão mais importante da seção. Tudo dentro sai em branco pelo base.css; o .botao vira claro.

Relatório do mês Outubro

Funil, tempo de contratação e origem das candidaturas.

Vidro e vidro denso

.cartao.vidro · .cartao.vidro-denso

Vidro (V1): branco a 50% com blur 24, sobre a Névoa com luz ou degradê. Denso (V3): branco a 70% com blur 20, flutuando sobre a interface. Um ou dois por tela.

Vidro

Sobre a luz do topo do painel.

Vidro denso

Mais opaco, com sombra de cartão.

Cartão de resumo

.cartao-resumo.vidro · .cartao-resumo.destaque

Só no cabeçalho da tela de métricas (layouts.css): rótulo, número grande (Número 1, 34px) e uma ação translúcida.

Candidaturas enviadas

36

Contratados no período

2 pessoas

Especificação

Valores exatos de cada cartão. Clique num token para copiar.

Classe	Fundo	Raio	Sombra / borda	Respiro
`.cartao`	`var(--branco)`	`--r-cartao` 24px	`--sombra-cartao`	24px 26px (18px no celular, raio 20)
`.cartao.destaque`	`var(--ardosia)` #254157, texto branco	24px	a do cartão	igual
`.cartao.vidro`	`--vidro` rgba(255,255,255,.5)	24px	0 0 0 1px `--vidro-borda` · blur(24px)	igual
`.cartao.vidro-denso`	`--vidro-denso` rgba(255,255,255,.7)	24px	0 0 0 1px tinta 6% + `--sombra-cartao` · blur(20px)	igual
`.cartao-resumo`	vidro ou Ardósia	24px	só no vidro: borda `--vidro-borda`	22px 24px · gap 6px
`.cartao-titulo`	Sora 450, `--t-titulo-4` 17px, entrelinha 1,2, tracking −.03em
`.cartao-cabeca`	flex, gap 12px, margem de baixo 16px; `.acoes` vai para a direita; `.sub` ocupa a linha toda, 12px, `--tinta-46`

Faça

Um destaque Ardósia por seção: o cartão que a pessoa precisa ver primeiro.
Vidro sobre a luz do painel, um degradê ou uma mancha.
Título no .cartao-titulo e ações na .acoes, sempre à direita.

Evite

Vidro sobre branco chapado: o desfoque some e o cartão parece sujo.
Dois cartões destaque encostados.
Cartão dentro de cartão: dentro do cartão, use .bloco.

Blocos

Áreas dentro de um cartão: mini-gráfico, resumo, agenda, chamada. Raio menor que o do cartão (20 ou 16).

Bloco, névoa e escuro

.bloco · .bloco.nevoa · .bloco.escuro

Bloco: Tela, raio 20, respiro 20. Névoa: raio 16, respiro 16/18, para agenda e itens pequenos. Escuro: Ardósia com texto branco, a chamada da seção. A .estrela dentro dele sai em Bruma (Lima no tema escuro) pelo DS.

594

visitas

14:30

Google Meet

Meta

2 contratações até o fim do mês.

Bloco de chamada claro

.bloco.degrade · .mancha

Degradê A1 Impulso com uma mancha desfocada. Use para chamar uma ação sem gastar o escuro da seção. A mancha tem tamanho padrão (.pequena 240 · .media 380 · .grande 560) e, dentro do .bloco.degrade, já vem no canto de baixo à direita: sem style inline.

Relatório do mês

Gere o resumo de outubro com funil e origem.

Regra do bloco escuro

.cartao.destaque · .bloco.escuro

O escuro é ponto de parada do olho, não fundo. Um ponto escuro por seção e nunca dois escuros encostados.

Certo: um ponto escuro

Semana

Meta

Evite: dois escuros encostados

Semana

Meta

Prazo

Evite: escuro sobre escuro

Semana

Meta

Atenção

Ardósia nunca é fundo de página nem substitui a tinta em texto sobre claro. Dentro de um .cartao.destaque, os .bloco viram branco a 12% sozinhos: não ponha .bloco.escuro ali.

Faixa de atenção

O que precisa de ação agora, no topo da tela. Degradê Bruma, o símbolo com brilho e avisos que são links inteiros.

Precisa de atenção

.atencao · .atencao-vidro · a.aviso

Uma por tela, acima do conteúdo. Cada aviso tem título curto, uma frase e "Abrir".

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 Entrevista sem sala

Designer Sênior, quinta às 14h30, ainda sem link de chamada.

Abrir

Estados do aviso

Repouso: branco a 88%. Hover e foco: branco cheio, anel --acento de 1,5px e a seta anda 4px. (Classe de demonstração só desta página.)

RepousoVaga sem movimento

Sem candidaturas desde 8 out.

Abrir

Hover / focoVaga sem movimento

Sem candidaturas desde 8 out.

Abrir

Especificação

`.atencao`	raio 24, respiro 16; degradê 120° Névoa → Bruma → Tela + duas manchas (Bruma Profunda e Bruma, blur 40)
`.atencao-vidro`	`--vidro` + blur 24, raio 20, respiro 14
`.atencao-topo`	13px 500; `.estrela` 16px em `--acento` com brilho girando 2,6s; botão com traço à esquerda, `--ardosia-media`
`.atencao-grade`	auto-fit, mínimo 240px, gap 12
`.aviso`	raio 16, respiro 16; `strong` Inter 600 14px; `p` 12,5px `--tinta-66`; `.abrir` 12,5px `--ardosia-media` com seta
Escuro	degradê Tinta → Ardósia → Tela escura, avisos em cartão escuro a 88%, estrela em Lima

Indicadores e números

Número em Sora 450 tabular (os dígitos não dançam quando mudam). Rótulo pequeno em cima, variação discreta ao lado.

Linha de indicadores

.indicadores · .cartao.indicador · .disco · .valor.num

Quatro por linha (duas abaixo de 1280px, uma abaixo de 640px). Disco com ícone, rótulo e valor em Número 2 (26px); small é a variação: verde (padrão) quando é boa, small.negativo vermelho quando é ruim, small.neutro cinza quando não há juízo.

Candidatos únicos

43 +12%

Dias até contratar

18,5 −3 dias

Conversão

6,1% −0,8 p.p.

Vagas abertas

4 igual

Escala de números

.t-numero-1 · .t-numero-2 · .t-numero-3 · .num

Três tamanhos. .num é o Número 3 (20px) e serve para qualquer número solto.

594 594 594 18,5

Métrica principal

.metrica-principal

O número da tela, no cabeçalho do painel: rótulo, valor em Número 1 e seletores de período em texto.

Visitas às vagas

594 visitas

vs. período anterior 512

Rodapé de números

.rodape-numeros

Três números curtos no pé de um cartão, separados por uma linha.

Visitas

Média42

Pico86

Dias22

Especificação

Peça	Valor
`.t-numero-1`	`--t-numero-1` 34px · entrelinha 1 · −.05em
`.t-numero-2`	`--t-numero-2` 26px · 1 · −.05em
`.t-numero-3`, `.num`	`--t-numero-3` 20px · 1 · −.04em
`.indicador`	flex, gap 14, respiro 18px 20px
`.disco`	44px, círculo, `--bruma-clara`, ícone 18px em `--acento`
`.indicador .rotulo`	11,5px `--tinta-46`
`.indicador .valor small`	Inter 500 11,5px, `--positivo` (verde): variação boa
`small.negativo`	`--negativo` (vermelho): variação ruim
`small.neutro`	`--tinta-56`: estável ou sem comparação
`.rodape-numeros .num`	22px, rótulo 11,5px `--tinta-46`

Atenção

A cor diz se o número é bom ou ruim, não se subiu ou desceu: "−3 dias até contratar" é bom (verde, sem classe); "+2 desistências" é ruim (.negativo). Vale nos dois temas (os tokens semânticos mudam sozinhos).

Tabelas

Sem linhas verticais, sem zebra, sem fundo no cabeçalho. A linha ganha Bruma no hover; as ações da linha ficam no ⋯ da última coluna.

Tabela com filtros

.filtros · .rola-x · table · .primario · .secundario · .col-esconde

Dentro de um cartão. Filtros em chips acima, busca à direita. Pessoa por foto + nome (.autor), situação por pílula de estado.

Processo	Responsável	Situação	Atualizado
Designer Sênior 14 candidaturas · 594 visitas	ARAna Ribeiro	Em andamento	hoje, 14:30
Growth Marketer 12 candidaturas · 431 visitas	MCMarina Costa	Aguardando	ontem
Product Engineer 10 candidaturas · 388 visitas	LSLucas Serra	Concluído	20 out
Assistente Administrativo Sem candidaturas	JRJulia Rocha	Pede ação	8 out

Pílulas de estado

.pilula · .aberto · .ok · .espera · .alerta · .arquivado · .destaque

Fundo claro do estado + texto e ponto na cor forte. Verde = feito, âmbar = aguardando, vermelho = pede ação. Um tamanho só (11,5px).

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

Ponto de situação

.ponto-s

Bolinha de 8px quando não cabe pílula (lateral, lista densa). O nome do estado vem do data-situacao e aparece num balão no hover.

Menu da linha

.popover.menu-linha

Abre no ⋯ da linha, colado ao botão. Vidro denso, 200px. Item de perigo em vermelho. Aqui aparece parado; no sistema o comum.js abre (28/10/2026): basta o aria-controls do ⋯ apontar para o id do menu. Clique no ⋯ da tabela acima para ver.

Como ligar (sem JS na tela)

<!-- em cada linha: o ⋯ aponta para o menu -->
<button class="icone" aria-label="Mais ações" aria-controls="menu-processo"><svg class="i"><use href="#i-mais"/></svg></button>

<!-- um menu por tela, escondido -->
<div class="popover menu-linha" id="menu-processo" role="menu" hidden>
  <button type="button" role="menuitem">…Editar</button>
  <button type="button" role="menuitem" class="perigo">…Excluir</button>
</div>

// O comum.js abre colado ao botão (fixed, sem sair da tela), foca o 1º item,
// marca aria-expanded e fecha com Esc, clique fora, clique num item ou rolagem.
// Qual linha abriu o menu:
document.querySelector('[aria-controls="menu-processo"][aria-expanded="true"]')

Estados

Linha em hover (Bruma a 30%, 150ms) e balão do ponto aberto. (Classe de demonstração só desta página.)

Estado	Processo
Repouso	Designer Sênior	Em andamento
Hover	Growth Marketer	Aguardando

Ponto em hover

Especificação

Parte	Valor
`th`	Inter 600 10,5px, caixa alta, +.1em, `--tinta-46`; respiro 8px 12px 8px 0; linha embaixo `--linha`
`td`	12,5px `--tinta-66`, respiro 14px 12px 14px 0; primeira coluna com 16px à esquerda; última coluna à direita com 16px
`td .primario` / `.secundario`	13px 500 `--tinta` / 11,5px `--tinta-46`
`tbody tr:hover`	Bruma a 30% (escuro: 5%), 150ms `--ease`; cursor de mão
`.col-esconde`	some abaixo de 1024px
`.rola-x`	rolagem horizontal fina; a tabela ganha mínimo de 560px
`.pilula`	respiro 4px 10px, 11,5px 500, raio pílula; estado com ponto de 6px `currentColor`
Estados	`aberto` `--st-aberto`/Ardósia · `ok` `--st-ok`/`--positivo` · `espera` `--st-espera`/`--aviso-texto` · `alerta` `--st-alerta`/`--negativo` · `arquivado` tinta 6%/`--tinta-66` · `destaque` Ardósia/branco 600
`.ponto-s`	8px, fio interno tinta 12%; área de toque +6px; balão Tinta (escuro: Ardósia) 11px
`.contagem`	20px de altura, Bruma com número Ardósia 11px 600 (escuro: Ardósia com número Bruma)

Faça

Envolva em .rola-x: no celular a tabela rola, não corta.
Marque com .col-esconde as colunas que podem sair abaixo de 1024px.
Situação sempre em pílula ou ponto, nunca em texto colorido solto.

Evite

Zebra, linhas verticais ou fundo no cabeçalho.
Vários botões na linha: as ações vão para o menu do ⋯.
Mostrar e-mail na célula: o e-mail vai no title do .autor.

Listas

Linhas com avatar ou disco, texto em dois níveis e um fim (pílula, botão, chave). E a faixa de pílulas de número para métricas compactas.

Item de lista

.item-lista · .primario · .secundario · .fim

Respiro 10px, linha entre itens (a primeira sem linha). O .fim empurra o que vem depois para a direita.

MC

Marina Costa

Growth Marketer · hoje

Nova

Este navegador

Chrome no Mac · agora

Atual

iPhone

há 3 dias

Lista de opções

label.item-lista.opcao · .chave

Para preferências: rótulo à esquerda, chave à direita. A linha inteira é o label, então clicar no texto liga e desliga.

Avisar por e-mail quando alguém me mencionar Resumo semanal por e-mail Avisos no navegador

Faixa de pílulas de número

.faixa-pilulas · .pilula-numero

Métricas compactas numa linha: ícone Ardósia, texto e valor. 52px de altura, fundo branco. Duas por linha abaixo de 1280px, uma abaixo de 640px.

Conversão de visita em candidatura6,1%

43 candidatos únicos+12%

18,5 dias até contratar−3 dias

4 vagas abertas2 em seleção

Especificação

`.item-lista`	flex, gap 12, respiro 10px 0, linha em cima `--linha` (a primeira sem)
`.primario` / `.secundario`	13,5px 500 / 11,5px `--tinta-46`
`.pilula-numero`	52px, raio pílula, `--branco` + `--borda-interna`, respiro 0 18px; ícone 18px `--acento`; `.texto` 13,5px 500 com reticências; `.n` 12,5px `--tinta-46`
Sobre Ardósia	dentro de `.cartao.destaque`, as linhas do `.item-lista` ficam brancas a 18%

Caixas positivas e negativas

ul.caixas.sim · ul.caixas.nao

Pontos lado a lado, cada um numa caixa semântica: verde com ✓ para o que pesa a favor, vermelho com ✕ para o que a marca recusa.

Impacto no negócio, não quantidade de ferramentas.
Confiança por quem indicou.

Consultoria grande. Dá respaldo, cria distância da operação.
Software de prateleira. Falha quando a empresa não cabe no produto.

4 colunas (2 até 1280px, 1 no celular), raio 16, padding 16 18 16 46, ícone 16px na cor forte. Segue a regra da caixa semântica: --sem verde ou vermelho; strong em tinta.

Gráficos

Gráficos simples em CSS: barras-pílula de 7px e barras de progresso. A barra alta é o destaque; a comum fica clara. No escuro: comum em Ardósia + Aço, alta em Bruma.

Barras

.grafico-barras · .barra · .barra.alta · .grafico-eixo

Altura padrão 140px; outra altura = --altura numa classe da tela (ex.: .grafico-area { --altura: 190px }). Cada barra recebe a altura em % (é o dado). Eixo com três datas embaixo.

594 visitas

1 out15 out22 out

Progresso

.barra-prog · .trilho · .barra-prog.aco

Trilho de 6px em Bruma Clara; preenchimento em --acento ou Aço (.aco) para alternar séries. A largura em % é o dado.

Designer8,7%

Growth5,2%

Product6,7%

Cores das barras

Só estas. O contraste entre comum e alta se mantém nos dois temas.

Peça	Claro	Escuro
`.barra` (comum)	`--bruma-profunda` #B4C7D6	`Ardósia 60% + Aço`
`.barra.alta`	`--acento` = Ardósia #254157	`--acento` = Bruma #D3E0EA
`.barra-prog .trilho i`	`--acento`	`--acento`
`.barra-prog.aco`	`--aco` #8FA6B8	igual
`.trilho`	`--bruma-clara` #E1EAF1	`--bruma-clara` #1F3546
Sobre Ardósia	no `.cartao.destaque`, trilho branco a 18% e preenchimento branco

Faça

Barras em pílula (raio 999) de 7px, gap 4.
Use .alta para o que importa (acima da meta, o período atual).
Números ao lado em .t-numero-3 e legendas em .t-legenda.

Evite

Cor fora da família Bruma (azul saturado, roxo, laranja).
Verde e vermelho em barra: semântica só em pílula e ícone.
Grade pesada, eixo com muitos rótulos, sombra na barra.

Avatares

Pessoa aparece por foto + nome de exibição; sem foto, iniciais no disco Bruma Clara. O e-mail vai no title.

Tamanhos e cores

.avatar · .mini · .grande · .tinta · .com-foto

Mini 20, padrão 32, grande 56 (a conta da lateral usa 34). .tinta é o avatar Ardósia da barra superior, quem está usando.

AR AR AR AR

Autor

.autor · .autor-nome · .autor.grande

Foto + nome em linha, com reticências se faltar espaço. .grande sobe o avatar para 28px. Remetente automático leva ícone no lugar da foto.

ARAna Ribeiro Marina Costa Avisos do sistema

Especificação

`.avatar`	32px, círculo, `--bruma-clara`, iniciais Sora 600 12px em `--acento`
`.avatar.tinta`	`--ardosia` com iniciais brancas
`.avatar.mini` / `.grande`	20px (9px) / 56px (18px)
`.avatar.com-foto`	foto no `background-image`, `cover`, centralizada
Sobre Ardósia	branco a 16% com texto branco

Regras

Faça

Nome de exibição; sem ele, o nome do Google; sem os dois, o e-mail.
E-mail no title, nunca na célula.

Evite

Avatar quadrado ou com borda colorida.
Foto no <img> dentro do avatar: a classe espera o fundo.

Imagens

O DS não tem uma classe de imagem: tem a regra do img (bloco, largura máxima 100%), o raio por camada, o vidro V2 sobre foto e o tratamento da fotografia. Monte assim, no <style> da tela.

Foto com legenda em vidro

img · --r-bloco · --vidro-foto

Foto dentro de cartão com raio 20, saturação −18% e legenda no vidro sobre foto (V2).

Duas mulheres sorrindo diante de um notebook numa mesa perto da janela. — Equipe de seleção · outubro

Mesa clara com teclado branco, caneta, celular e xícara.

CSS da tela

/* no <style> da tela, só com tokens (o DS não tem classe de imagem) */
.figura { position: relative; margin: 0; overflow: hidden; border-radius: var(--r-bloco); }
.figura img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; filter: saturate(.82); }
.figura .vidro-foto { position: absolute; left: 12px; right: 12px; bottom: 12px; padding: 12px 14px;
  border-radius: var(--r-interno); background: var(--vidro-foto); box-shadow: 0 0 0 1px rgba(255,255,255,.6);
  -webkit-backdrop-filter: blur(30px) saturate(1.4); backdrop-filter: blur(30px) saturate(1.4);
  font-size: 12.5px; color: var(--tinta-fixa); }

Regras da imagem

Raio	o da camada: 20 dentro de cartão (`--r-bloco`), 16 em bloco pequeno, 24 se a foto for o cartão; círculo só no avatar
Tratamento	luz suave, foco curto, contraste baixo, saturação −18%, sombras puxadas para Ardósia, altas luzes para Tela
Vidro V2	`--vidro-foto` rgba(255,255,255,.4), borda branca 60%, `blur(30px) saturate(1.4)`
Temas	variados, não só rostos: mãos, mesa, prédio, equipe
Acessibilidade	`alt` que descreve a cena; foto decorativa com `alt=""`

Todas as regras de foto estão em Identidade Visual › Fotografia.

Modo escuro

Tudo desta página muda sozinho pelos tokens quando a pessoa liga o escuro (botão no pé da lateral). Ligue para conferir. O que muda em cada peça:

Peça	Claro	Escuro
`.cartao`	branco, sombra leve	`--branco` = #1A2C3A, sombra Tinta + fio claro de 1px
`.cartao.destaque` / `.bloco.escuro`	Ardósia chapada	Ardósia com luz Ardósia + Aço no canto e fio claro
`.cartao.vidro` / `.vidro-denso`	branco 50% / 70%	cartão escuro a 55% / 86%
`.bloco` / `.bloco.nevoa`	Tela / Névoa	#14202B / #101820
`.atencao`	degradê Bruma	Tinta → Ardósia, estrela em Lima
`.estrela` no `.cartao.destaque` / `.bloco.escuro`	Bruma	Lima
`.disco`, `.avatar`	Bruma Clara, ícone Ardósia	#1F3546, ícone Bruma (`--acento`)
Pílulas de estado	fundo claro + cor forte	fundo escuro misturado na Tinta + cor clara; aberto = Ardósia com texto Bruma
Linha da tabela (hover)	Bruma 30%	Bruma 5%
Barras	comum Bruma Profunda, alta Ardósia	comum Ardósia + Aço, alta Bruma
Balão do `.ponto-s`	Tinta	Ardósia
Título-marca-d'água	tinta 30%	Tela 30%

Atenção

Ardósia como texto ou ícone some no escuro: use --acento. Nada de #fff ou rgba() escrito à mão na tela.