Heat Map Dashboard
Also called: Heatmap-first dashboard, Intensity dashboard, Calendar heatmap UI
Colour-intensity grids lead the page: a warm sequential ramp from pale butter to deep plum turns every number into a tile you read by heat.
Design keywords
Say these words to ask for this style.
A heatmap-first analytics style. The hero widget is a big day × hour (or cohort × week) grid whose cells are coloured on one sequential ramp — butter, amber, orange, crimson, plum — with a visible low→high legend. The same ramp then drives everything else: KPI tiles carry heat strips, bars and funnel steps get darker as values grow, and small square cells replace icons. Surfaces are warm off-white with thin warm-grey borders so the ramp is the only loud colour.
Best for
- Peak-time analysis (orders by day and hour)
- Retention and cohort matrices
- Store, region or shelf performance grids
- Usage and activity calendars
Avoid for
- Data with only a handful of values
- Precise value comparison (use bars or tables)
- Audiences with colour-vision deficiency unless values are labelled
✓ Do
- Use one sequential ramp (5 stops, light → dark) for every intensity, never a rainbow
- Always show a low → high legend next to the grid
- Keep 2–3px gaps and cells about 1.35:1 so the grid reads as tiles
- Label extreme cells or show values on hover
✕ Don't
- Don’t mix categorical colours into heat cells
- Don’t put the heatmap below the fold — it is the hero
- Don’t use the ramp’s darkest stop for body text backgrounds without white text
Not to be confused with
On mobile
Lead the home screen with a compact 7 × 12 heat strip (cells ≥ 20px) with its low → high legend under it, and reuse the ramp for chips, list markers and progress. Avoid tiny cells under the thumb — tap a row to see exact values.
Prompt builder
Paste into Claude, Cursor, v0, Lovable or any coding agent to recreate this style.