# Dashboard / denso em dados

Também chamado de: UI densa em dados, design de dashboard admin, UI de analytics, estilo terminal Bloomberg, UI enterprise densa, estilo Tufte  
Era: terminais dos anos 1980; web de 2010 em diante (Google Analytics, Datadog, Grafana, Bloomberg)  
Página: https://designforai.dev/pt/style/dashboard-data-dense

## Traços

- tipografia pequena (12-13px), espaçamento apertado (grade de 4px), muitas linhas por tela
- tabelas com números tabulares alinhados à direita, listras zebradas ou filetes finos
- sparklines, small multiples, tiles de estatística com setas de delta
- cinzas atenuados com uma paleta semântica rígida (verde sobe, vermelho desce, âmbar avisa, azul informa)
- barras laterais colapsáveis, toolbars densas, atalhos de teclado
- a densidade de informação é o recurso; o espaço em branco é gasto com cuidado
- movimento mínimo: 100-150ms, só em mudanças de estado; valores ao vivo atualizam sem animação

Paleta: #ffffff página (ou #0f1117 escuro), #f6f7f9 superfície, #1f2328 texto, #6e7781 atenuado, #d0d7de linha, #1f6feb info, #1a7f37 sobe, #cf222e desce, #9a6700 aviso

Tipografia: IBM Plex Sans, Geist ou Source Sans 3 a 13px com font-variant-numeric: tabular-nums; JetBrains Mono ou IBM Plex Mono para IDs e códigos a 12px; títulos 600 a 16-20px apenas

## Faça

- componha cada número em algarismos tabulares, alinhados à direita, com decimais consistentes e sufixos de unidade
- use uma grade de espaçamento de 4px e altura de linha de 32px; barras laterais de 240px, colapsáveis para 56px
- reserve a cor para significado: verde, vermelho, âmbar e azul significam exatamente uma coisa cada no site inteiro

## Evite

- não use tipografia de hero grande nem padding de marketing dentro do produto; 20px é o maior título
- não anime gráficos no load além de 300ms; os usuários esperam por dados, não por efeitos
- não coloque mais de uma decoração de acento por tela; os dados são a decoração

Conhecido por: Bloomberg Terminal, Grafana, Datadog, Linear (visualizações de lista), GitHub, dashboard da Stripe

## Semente CSS

```css
:root{--bg:#ffffff; --surface:#f6f7f9; --fg:#1f2328; --muted:#6e7781; --line:#d0d7de; --info:#1f6feb; --up:#1a7f37; --down:#cf222e; --radius:6px; --font:'IBM Plex Sans',sans-serif; --font-mono:'JetBrains Mono',monospace}
```

## Prompt

Construa o app como um dashboard denso em dados. Fundo #ffffff, superfícies #f6f7f9, texto #1f2328, atenuado #6e7781, linhas #d0d7de, só cores semânticas: info #1f6feb, sobe #1a7f37, desce #cf222e, aviso #9a6700. Fonte IBM Plex Sans 13px com font-variant-numeric tabular-nums em tudo, títulos 600 a 20/16/14px, JetBrains Mono 12px para IDs. Espaçamento numa grade de 4px; linhas de tabela com 32px de altura e filetes 1px #d0d7de, números alinhados à direita com decimais fixos, cabeçalhos ordenáveis 12px em caixa alta 0.04em em atenuado. Layout: barra lateral esquerda de 240px (colapsável para ícones de 56px), toolbar superior de 48px com busca e um controle de intervalo de datas, área principal com uma grade de tiles de estatística (6 por linha, 88px de altura, raio 6px, borda de 1px, valor 24px 600, delta com seta na cor de sobe ou desce, sparkline de 40px) acima de uma tabela de largura total e dois painéis de gráfico. Gráficos: linhas de 1.5px, sem preenchimento de área, linhas de grade #eaeef2, tooltips 12px. Botões com 28px de altura, raio 6px. Movimento: 120ms só em mudanças de estado; os valores atualizam no lugar sem animação.