📊 Dashboard / Tool UI

O que é

Dashboard é o oposto da landing. Landing tem ar, hierarquia gigante, 1 mensagem. Dashboard tem informação cruzada, baixa hierarquia, dezenas de números visíveis. A skill dashboard tem checklist próprio: anti-shadows, anti-gradients, anti-rounded-buttons, anti-h1-gigante. Densidade é a feature.

Por que aprender

Skill errada para o output errado = retrabalho. Aplicar regras de landing num dashboard = ele fica vazio, com whitespace exagerado. Saber qual skill usar = output certo na primeira tentativa.

Conceitos-chave

• Density-first: mais info por pixel
• Premissa "Bloomberg/Linear/SQL": denso, lido por olho treinado
• scenario: dashboard
• design_system pareada: linear-app ou tech-utility

O que é

Layout em 3 colunas:

┌──────┬───────────────────────┬────────┐
│      │                       │        │
│ Side │      Canvas           │ Right  │
│ bar  │      central          │ rail   │
│      │                       │        │
│ 240px│      flex-1           │ 320px  │
└──────┴───────────────────────┴────────┘

Sidebar = nav + workspace; canvas = chart/table/KPIs principais; right rail (opcional) = filtros, properties, comments. Linear, Notion, Figma, Cursor — todos seguem.

Por que aprender

Esse é o layout que "se sente como dashboard" sem precisar dizer. Inverter = causa estranheza. Saber a convenção = parecer bullpen sem esforço.

Conceitos-chave

• Sidebar 240px: sweet spot — não come canvas
• Canvas flex-1: ocupa todo restante
• Right rail 320px: opcional, expandível/colapsável
• Mobile: sidebar e rail viram drawers

O que é

Em fontes variáveis default, "1" tem largura diferente de "8" — números em colunas ficam desalinhados verticalmente. Tabular numerals (CSS font-variant-numeric: tabular-nums) força largura igual. Resultado: colunas de números alinhadas como Excel.

.kpi-value, table td.numeric, .price {
  font-variant-numeric: tabular-nums;
}

Por que aprender

É a regra mais subestimada. Olho do usuário compara números visualmente — desalinhamento causa "buraco" mental. Com tabular, comparação é instantânea. É o detalhe que separa "dashboard amador" de "dashboard pro".

Conceitos-chave

• font-variant-numeric: tabular-nums: CSS one-liner
• Inter, JetBrains Mono, Fira Code: default tabular
• font-variant-numeric: lining-nums: bonus, capitais não baixam
• Aplicar: KPIs, tabelas, prices, percentuais

O que é

Cada KPI tem 3-4 elementos: label (small caps, muted) + value (display grande, tabular) + delta com sinal (verde/vermelho, +/-) + sparkline opcional (gráfico de linha de 12 pontos). Tudo em uma só "card" sem border, separados só por whitespace.

Por que aprender

KPIs são a "primeira coisa que olho" do dashboard. Hierarquia ruim = usuário não sabe qual é o KPI principal. Com label small + value grande + delta + sparkline, atenção flui em milissegundos.

Conceitos-chave

• Label: uppercase, 11-12px, color muted
• Value: 32-48px, tabular, font weight 600
• Delta: +12.4% verde / -3.1% vermelho, com seta sutil
• Sparkline: SVG inline, 12 pontos, 60×24px, opacity 0.6
• Sem ícone: emoji ou ícone deco quebra hierarquia

O que é

Tabela de dashboard tem 5 atributos não negociáveis:

• Tabular nums em colunas numéricas
• Sticky header ao scroll vertical
• Hover row com bg sutil (cor < 5% chroma)
• Row dividers finos (1px hairline)
• Right-align numéricas, left-align strings

Por que aprender

Tabela é onde o usuário fica mais tempo. Sticky header em scroll = sempre lê header. Hover row = guia do olho. Right-align numéricas = comparação rápida. Tabela bonita não é a que tem ícones; é a que se navega bem.

Conceitos-chave

• position: sticky; top: 0: header fixo
• tr:hover: bg-color: oklch(... / 0.03)
• border-bottom 1px: divisor sutil
• text-align: right: em colunas numéricas
• Sortable header: clique → ↑↓ visual

O que é

Para sparklines e charts simples (line, bar, area com 12-50 pontos), SVG inline é o caminho: 30 linhas de código, zero dependências, customização total. Para charts complexos (heatmap, scatter de milhares de pontos), Recharts ou Chart.js. Default = SVG inline; library entra como exceção.

Por que aprender

Bibliotecas pesadas inflam bundle, impõem look próprio (que vira "cara de Recharts"), e são chatas de customizar. SVG inline integra com seu DESIGN.md naturalmente. Sempre comece SVG; library só se SVG não couber.

Conceitos-chave

• SVG line: <path d="M0,12 L10,8 L20,15 ...">
• SVG area: add <polygon> com fill semi-transparente
• Tooltip: JS vanilla com hover events
• Recharts: só quando > 100 pontos ou múltiplas séries
• D3: overkill em 99% dos dashboards

O que é

Em dashboard, três defaults de UI moderno são inimigos:

Por que aprender

Esses elementos são "default chic" em landing — mas em dashboard tiram da experiência. Linear, Stripe Dashboard, Cursor: todos seguem essa estética anti-decoração. É a "voz visual" do tool UI.

Conceitos-chave

• Border-radius: 0-4px máximo
• Box-shadow: usar 1px ring solid em vez (border)
• Background: solid only, sem gradient
• Card divider: 1px hairline border, não shadow elevation
• P0 mecânico: grep "box-shadow" → warning

O que é

A skill dating-web é um caso especial: dashboard com voz editorial. Inspirada em sites como Pudding/The Information, mistura denso (números) com narrativa (parágrafos prosa). Mantém numerais tabulares; quebra a regra "sem decoração" controladamente — uma única flourish editorial por seção.

Por que aprender

Mostra que regras existem para serem quebradas conscientemente. dating-web deliberadamente quebra "sem decoração" porque o produto é content, não tool. Você pode aplicar essa lógica para dashboards de relatório, post-mortem, "data journalism".

Conceitos-chave

• Editorial dashboard: narrativa + dado
• Mantém: tabular numerals, sticky table
• Quebra: permite 1 flourish (pull quote, ilustração)
• Use case: relatório anual, post-mortem público, data story
• Não para: tool diária (admin, CRUD)