Skip to Content
FoundationsDensity

Density

Interaction foundation

Densidade é affordance do operador, não tweak estético do produto.

Pulso usa densidade para ajustar quanto conteúdo cabe em superfícies operacionais sem transformar a interface em “zoom out”. A tipografia permanece estável; mudam padding, altura e gap.

A referência visual do Open Design define a intenção: comfortable como default, compact para scan operacional e spacious para leitura mais respirada. Os valores abaixo vêm de src/app/globals.css.

Decisão

ModoPapelQuando usar
compactScan densoAudit log, search results, mention feed, filas operacionais
comfortableDefault do produtoDashboards, formulários, settings e uso prolongado
spaciousLeitura executivaResumos, painéis de apresentação e superfícies menos densas

comfortable é o default porque suporta uso prolongado sem assumir experiência, monitor ou preferência do operador.

Escala canônica

Tokencompactcomfortable · defaultspaciousUso
--density-pad-card14px 16px22px 24px32px 32pxPadding de card
--density-pad-row8px 16px12px 22px18px 28pxRows de tabela/lista
--density-pad-page24px 24px40px 32px56px 48pxPadding de página/superfície
--density-h-control28px32px36pxAltura default de controles
--density-h-topbar52px60px72pxAltura de topbar
--density-gap12px16px24pxGap entre elementos relacionados

Como aplicar

A densidade é aplicada por atributo no contêiner de escopo:

<section data-density="compact" className="gap-[var(--density-gap)] p-[var(--density-pad-page)]">
  {/* lista de scan operacional */}
</section>

Componentes não devem ler uma preferência global diretamente. Eles usam os tokens --density-*; o contêiner decide o modo.

Override local

A preferência do usuário pode ser spacious, mas algumas superfícies continuam precisando de scan denso.

SuperfícieOverride recomendadoPor quê
Audit logdata-density="compact"Leitura por filtro e comparação de rows
Search resultsdata-density="compact"Scan rápido de resultados
Mention feeddata-density="compact"Alto volume, leitura por headline/sinais
Settings críticascomfortableClareza antes de volume

Override local não deve mudar a preferência global do usuário.

Persistência

FonteQuandoObservação
Default de produtoPrimeiro acessoSempre comfortable
Preferência localImediataPode funcionar offline
Perfil do usuárioBackground syncSincroniza entre dispositivos quando houver suporte
WorkspaceNão forçaWorkspace pode sugerir, operador escolhe

Não detectamos densidade automaticamente por dispositivo ou resolução. Default sane é melhor que suposição invisível.

Acessibilidade e motion

  • Mudança de densidade não deve ser animada; o re-render instantâneo evita flicker.
  • Densidade não muda semântica para screen readers.
  • Font-size permanece igual entre modos.
  • Em mobile ou ações críticas, hit target deve respeitar o contrato de toque, mesmo se a superfície estiver compacta.
  • --touch-target-critical mantém 48px para ação crítica em mobile.

Alturas relacionadas

TokenValorUso
--control-h-compact28pxControle denso em tabela/lista
--control-h-default32pxBotões e inputs padrão
--control-h-prominent36pxCTA de destaque
--control-h-hero44pxAção hero
--touch-target-critical48pxAção crítica em mobile

Regras

  1. comfortable é o default em todo lugar.
  2. compact e spacious exigem escolha explícita ou override local justificado.
  3. Use tokens --density-*; não use padding/height hardcoded.
  4. Densidade altera spacing e alturas, não font-size.
  5. Não anime a troca de densidade.
  6. Não permita densidade forçada por workspace.
  7. Em listas operacionais, compact pode ser local sem mudar a preferência global.
  8. Ação crítica em mobile preserva alvo mínimo mesmo em compact.
Last updated on
SpacingRadii