# Dashboard / data-dense

Also called: data-dense UI, admin dashboard design, analytics UI, Bloomberg terminal style, dense enterprise UI, Tufte style  
Era: 1980s terminals; web 2010 onward (Google Analytics, Datadog, Grafana, Bloomberg)  
Page: https://designforai.dev/style/dashboard-data-dense

## Traits

- small type (12-13px), tight spacing (4px grid), many rows per screen
- tables with right-aligned tabular numbers, zebra striping or hairlines
- sparklines, small multiples, stat tiles with delta arrows
- muted greys with a strict semantic palette (green up, red down, amber warn, blue info)
- collapsible sidebars, dense toolbars, keyboard shortcuts
- information density is the feature; whitespace is spent carefully
- motion minimal: 100-150ms, only on state changes; live values tick without animation

Palette: #ffffff page (or #0f1117 dark), #f6f7f9 surface, #1f2328 text, #6e7781 muted, #d0d7de line, #1f6feb info, #1a7f37 up, #cf222e down, #9a6700 warn

Type: IBM Plex Sans, Geist or Source Sans 3 at 13px with font-variant-numeric: tabular-nums; JetBrains Mono or IBM Plex Mono for IDs and codes at 12px; headings 600 at 16-20px only

## Do

- set every number in tabular figures, right-aligned, with consistent decimals and unit suffixes
- use a 4px spacing grid and 32px row height; sidebars 240px, collapsible to 56px
- reserve colour for meaning: green, red, amber, blue each mean exactly one thing site-wide

## Don't

- do not use big hero type or marketing padding inside the product; 20px is the largest heading
- do not animate charts on load beyond 300ms; users wait for data, not for effects
- do not put more than one accent decoration per screen; the data is the decoration

Known for it: Bloomberg Terminal, Grafana, Datadog, Linear (list views), GitHub, Stripe dashboard

## CSS seed

```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

Build the app as a data-dense dashboard. Background #ffffff, surfaces #f6f7f9, text #1f2328, muted #6e7781, lines #d0d7de, semantic colours only: info #1f6feb, up #1a7f37, down #cf222e, warn #9a6700. Font IBM Plex Sans 13px with font-variant-numeric tabular-nums everywhere, headings 600 at 20/16/14px, JetBrains Mono 12px for IDs. Spacing on a 4px grid; table rows 32px tall with 1px #d0d7de hairlines, numbers right-aligned with fixed decimals, sortable headers 12px uppercase 0.04em in muted. Layout: 240px left sidebar (collapsible to 56px icons), 48px top toolbar with search and a date-range control, main area a grid of stat tiles (6 across, 88px tall, radius 6px, 1px border, value 24px 600, delta with an arrow in up or down colour, 40px sparkline) above a full-width table and two chart panels. Charts: 1.5px lines, no area fills, gridlines #eaeef2, tooltips 12px. Buttons 28px tall, radius 6px. Motion: 120ms on state changes only; values update in place without animation.