Pulso DS — Density

Decisão

Densidade é preferência pessoal do operador, persistida por usuário · não configuração do workspace ou do produto.

Comfortable é o default porque é a aposta segura para uso prolongado · operador de plantão de 8h não aguenta compact, e novo membro precisa ler o produto sem zoom. Compact existe para quem tem monitor pequeno ou quer ver mais casos por viewport. Spacious para quem tem tela 4K ou usa o produto poucas vezes por dia.

Comparativo · mesmo dashboard, 3 densidades

Mesmo conteúdo · mesma estrutura · diferentes valores de spacing/typography. O delta de altura entre compact e spacious é ≈ 1.8×.

01 · compact

Compact

Casos abertos 3 · ahora

MENÇÕES 24H

1.247

CRÍTICOS

03

PLS-012Vazamento — APPcritical4m

PLS-014Operação Águahigh22m

PLS-018Regulação CVMattn1h

PLS-019Setor saúdeattn3h

PLS-020Mercado financeirohigh6h

Quando: monitor pequeno · operadores que querem 12+ casos por viewport · plantão técnico.

02 · comfortable

Comfortable

Default

Casos abertos 3 · agora

MENÇÕES 24H

1.247

CRÍTICOS

03

PLS-012Vazamento — APPcritical4m

PLS-014Operação Águahigh22m

PLS-018Regulação CVMattn1h

Default sane. Aposta segura para uso prolongado · novo membro lê sem zoom · plantão de 8h não cansa.

03 · spacious

Spacious

Casos abertos 3 · agora

MENÇÕES 24H

1.247

CRÍTICOS

03

PLS-012Vazamento — APPcritical4m

PLS-014Operação Águahigh22m

Quando: tela 4K · uso esporádico · gestor que entra "olhar dashboard" · acessibilidade (presbiopia, baixa visão).

Toggle no topo de qualquer página deste DS aplica densidade ao vivo — mesmo as preview tables. É o mesmo contrato CSS do produto.

Tokens · valores por densidade

Mesma variável CSS · valores diferentes por [data-density] no <html>. Componente nunca lê a densidade · usa o token.

Token	compact	comfortable · default	spacious	Onde
--density-pad-page	24px	36px	48px	Padding interno do `main`
--density-pad-card	12px	18px	22px	Padding interno de Card
--density-pad-row	6px 10px	10px 14px	14px 18px	Padding em row de Table/List
--density-gap	8px	12px	16px	Gap em grid de cards
--density-h-control	28px	32px	36px	Altura default de Button/Input
--density-h-topbar	48px	56px	64px	Altura da topbar

Tipografia fica. Densidade altera spacing/heights, não font-size · evita "compact" virar zoom-out e perder hierarquia.

Configuração · Settings → Personal

Densidade da interface

Spacing e altura dos componentes. Não afeta tamanho do texto. Aplicado em todo o produto, sincronizado entre dispositivos.

Tabelas operacionais usam compact

Em listas longas (audit log, busca, mention feed), mantém compact mesmo se sua preferência global é comfortable ou spacious. Recomendado.

Aplicar a todos os meus workspaces

Sua preferência sincroniza entre todos os workspaces que você participa. Off = manter individual por workspace.

Override local · tabelas operacionais

Operador escolhe spacious globalmente · mas Audit Log e Search são tabelas de scan. Override local mantém densidade compact dentro dessas tabelas, sem mudar a preferência global.

Override local

Tabelas operacionais ignoram a preferência global por padrão

Audit Log · Search results · Mention feed · qualquer lista de scan denso. Operador pode desligar override em Settings · mas em 95% dos casos, compact em listas é o caminho certo independente da preferência global. Densidade não é dogma.

Como aplicar

<div data-density="compact">
  <AuditLogTable />
</div>

Persistência

Onde	Quando	Sync
localStorage	Imediato · em qualquer ação no toggle	Não · só local · usado offline
Perfil do usuário (backend)	Em background · debounce 500ms	Sim · sincroniza entre dispositivos · entre workspaces se "Aplicar a todos" estiver on
Default para novo usuário	—	Sempre `comfortable` · sem detecção automática (não tentamos adivinhar)
Default para novo workspace	—	Herda do usuário se já tem preferência · senão `comfortable`

A11y e motion

Mudança de densidade não é animada · evita flicker e mantém o foco do operador. Componentes leem o token; o re-render é instantâneo.

Hit target

Em compact, controle cai para 28×28px · ainda satisfaz contrato desktop denso. Para mobile ou hit targets primários, override força ≥ 44×44 mesmo em compact (ver 1.3).

Screen readers

Densidade é invisível para SR · não há semântica trocada. Operador com leitor de tela tem mesma experiência em qualquer modo.

Regras

Faça

Default comfortable em todo lugar. Compact e spacious só por escolha explícita.
Use tokens --density-* para padding/altura. Nunca hardcoded.
Em tabelas operacionais (audit, search, feed), aplique data-density="compact" local.
Mantenha font-size constante entre densidades. Densidade altera spacing · não tipo.
Persiste por usuário · sincroniza entre dispositivos.

Evite

Não exponha densidade como Tweak do produto. É affordance pessoal, não opção de produto.
Não detecte automático (tipo de dispositivo, resolução). Default sane > suposição.
Não anime a transição entre densidades. Re-render instantâneo é preferível.
Não use compact em CTAs primárias (44×44 mantém). Hit target ganha.
Não permita densidade por workspace forçada. Workspace pode sugerir, usuário escolhe.

Status da iniciativa · 4.5

Deliverable	Status
Default `comfortable` em todo o produto	✓ entregue
Toggle em Settings → Personal · 3 opções	✓ entregue
Persistência localStorage + sync com perfil	✓ entregue
Tabelas operacionais com `data-density="compact"` local	✓ entregue
Comparativo de Dashboard nas 3 densidades	✓ entregue
Página Foundations · Density	✓ entregue