Data-Dense Dashboard

Stylebi/analytics

Multiple charts/widgets, data tables, KPI cards, minimal padding, grid layout, space-efficient, maximum data visibility. Best for Business intelligence dashboards, financial analytics, enterprise reporting, operational…

Multiple charts/widgets data tables KPI cards minimal padding grid layout space-efficient maximum data visibility

#F5F5F5

#333333

#22C55E

#F59E0B

#EF4444

Preview

A sample page drawn from this style’s tokens — a guide to the look, not the exact output.

New · weekly review

Plan the week in ten minutes

Pull in every task, see what matters, and share one clear plan with the team.

Get startedSee how it worksDocs

Tasks done1,284+12% this week

Emailyou@example.com

Remember meContinue

Today

Review roadmapDone

Ship onboardingIn progress

Team sync3 pm

Prompt

Paste into any AI assistant before describing what to build — or attach it to a project below.

# Visual style: Data-Dense Dashboard

Keywords: Multiple charts/widgets, data tables, KPI cards, minimal padding, grid layout, space-efficient, maximum data visibility
Primary colours: Neutral primary (light grey/white #F5F5F5), data colors (blue/green/red), dark text #333333
Secondary colours: Chart colors: success (green #22C55E), warning (amber #F59E0B), alert (red #EF4444), neutral (grey)
Effects & animation: Hover tooltips, chart zoom on click, row highlighting on hover, smooth filter animations, data loading spinners
Best for: Business intelligence dashboards, financial analytics, enterprise reporting, operational dashboards, data warehousing
Do not use for: Marketing dashboards, consumer-facing analytics, simple reporting

## Prompt keywords
Design a data-dense dashboard. Use: multiple chart widgets, KPI cards row, data tables with sorting, minimal padding (8-12px), efficient grid layout, filter sidebar, dense but readable typography, maximum information density.

## CSS / technical
display: grid, grid-template-columns: repeat(12, 1fr), gap: 8px, padding: 12px, font-size: 12-14px, overflow: auto for tables, compact card design, sticky headers

## Implementation checklist
☐ Grid layout 12 columns, ☐ KPI cards responsive, ☐ Tables sortable, ☐ Filters functional, ☐ Loading states for data, ☐ Export functionality

## Design system variables
--grid-gap: 8px, --card-padding: 12px, --font-size-small: 12px, --table-row-height: 36px, --sidebar-width: 240px, --header-height: 56px

Use it in an app

Create a free account to attach this style to a project: the hub adds it to the prompt your AI assistant gets, so it builds every page in this look.

Start building — free I already have an account

From UI/UX Pro Max (MIT, commit 477bcb2).View source