Design for AI

Dashboard / data-dense: UI design prompt

Palette, type rules and a pasteable prompt for dashboard / data-dense. Also called data-dense UI, admin dashboard design, analytics UI, Bloomberg terminal style, dense enterprise UI, Tufte style. 1980s terminals; web 2010 onward (Google Analytics, Datadog, Grafana, Bloomberg).

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
: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.
For design.md, .cursorrules or AGENTS.md
## Design direction
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.

## Tokens
: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 }

Keep hover and focus-visible states on every interactive element. Do not add a CSS framework.