Data-Dense Dashboard
Also called: Dense BI, Terminal dashboard, Information-dense UI
Compact, hairline-gridded panels packed with small condensed type, tabular numbers, zebra tables and a sparkline on every figure.
Design keywords
Say these words to ask for this style.
Built for analysts who keep the screen open all day: a compact 0.85 density, 13–14px type, a condensed grotesque for labels and tabular mono numerals so columns line up. Panels butt together with 1px hairlines and 8px gutters instead of floating cards; each has a grey title strip with a tiny uppercase label. Every number carries context — a delta, a sparkline, a coloured up/down cue — and tables are zebra-striped with 28px rows. Colour is reserved for data and status.
Best for
- Trading, treasury and portfolio monitoring
- Ops and BI consoles used all day by experts
- Admin back-offices with many KPIs per view
- Risk and compliance reporting
Avoid for
- Executive or board summaries
- Consumer onboarding and marketing-first products
- First-time or occasional users
✓ Do
- Keep body text 13–14px and table rows 28–32px
- Right-align numbers and use tabular figures (font-variant-numeric: tabular-nums)
- Give every KPI a delta and a 12-point sparkline
- Use 1px #CDD2DA hairlines and 8px gutters between panels, and a 44px white app top bar with a 56px navy icon rail
✕ Don't
- Don’t add decorative illustrations or big hero imagery inside the app
- Don’t use drop shadows on panels or radii above 4px on panels and controls (6px only for popovers)
- Don’t let colour decorate — colour means data or status only
Not to be confused with
On mobile
Keep the compact type but raise touch targets to 44px; swap the panel grid for stacked full-width panels with title strips, show 2-up KPI tiles with sparklines, and use a flat hairline tab bar. Tables become two-line list rows with the number right-aligned.
Prompt builder
Paste into Claude, Cursor, v0, Lovable or any coding agent to recreate this style.