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.

“Heat grid”Dashboards & DataEra: 2010s → todayTechyBoldSerious

Open full screen ↗

heatmap-dashboard / landingEN

heatmap-dashboard / landingTH

Customize

Try a palette, other colours, radius, density, display size and fonts on the preview. The copied prompt and theme export follow your choices; the style itself never changes.

Palettes

UI Lingo pool

Radius sm3pxRadius md6pxRadius lg10pxRadius xl14pxDensity×1Display size×1Latin headingLatin bodyThai headingThai body

Colours · Light

bgsurfacesurface-2texttext-mutedprimaryon-primarysecondaryon-secondaryaccentbordersuccesswarningdangerchart-1chart-2chart-3chart-4chart-5

Recipes may hard-code decorative colours, sizes or fonts, so a change can apply only in part, and the signature may not hold.

Design keywords

Say these words to ask for this style.

heatmap firstsequential colour rampbutter to plumintensity gridday × hour matrixlow → high legendsquare tile cellswarm off-white canvas

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

User Behavior Analytics →User Behavior Analytics is about funnels and journey paths with heatmaps as one tool; Heat Map Dashboard makes the colour grid the hero and paints everything on the same warm ramp.Data-Dense Dashboard →Data-Dense packs many small neutral panels with sparklines; Heat Map leads with one big warm intensity grid and few other widgets.Dopamine Design →Dopamine uses many joyful hues for fun; Heat Map uses a single ordered ramp where darker always means more.

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.

At a glance

Accessibility

Performance

Build complexity

Typography

Heading · LatinSora · 600/700

The quick brown fox

Heading · ThaiK2D · 600/700

สวัสดีชาวโลก ยินดีต้อนรับ

Body · LatinDM Sans · 400/500/700

Clear words make shared decisions.

Body · ThaiNoto Sans Thai · 400/500/700

คำที่ชัดเจนช่วยให้ทีมตัดสินใจร่วมกันได้

K2D shares Sora’s geometric, slightly techno construction for headings; Noto Sans Thai keeps the same calm, open counters as DM Sans for labels and body.

Colour palette

Light

Dark

Design tokens

Radius	`sm 3px · md 6px · lg 10px · xl 14px · pill 999px`
Border	`1px`
Shadow	`0 6px 20px rgba(74,13,46,0.08)`
Display	`clamp(2.6rem, 5.6vw, 4.6rem)`
Motion	`180ms cubic-bezier(.2,.7,.2,1)`
Density	`×1`

Theme export

Drop the tokens into a shadcn/ui or Tailwind project, or any tool that reads design tokens.

shadcn/ui globals.css

Preview

/* UI Lingo · Heat Map Dashboard (heatmap-dashboard) — shadcn/ui theme variables (Tailwind v4). Replace the :root and .dark blocks in globals.css.
 * Default mode is light; dark values apply under .dark.
 * Derived: card/popover/sidebar = surface, muted = surface-2, accent = surface-2 (shadcn hover surface), destructive = danger, input = border, ring = primary, --radius = radius lg.
 * Fonts: https://fonts.googleapis.com/css2?family=Sora:wght@600;700&family=DM+Sans:wght@400;500;700&family=DM+Mono:wght@400;500&family=K2D:wght@600;700&family=Noto+Sans+Thai:wght@400;500;700&display=swap
 */
:root {
  --radius: 10px;
  --background: #FBF7F1;
  --foreground: #2A1420;
  --card: #FFFFFF;
  --card-foreground: #2A1420;
  --popover: #FFFFFF;
  --popover-foreground: #2A1420;
  --primary: #7A1E48;
  --primary-foreground: #FFFFFF;
  --secondary: #FDBA4D;
  --secondary-foreground: #2A1420;
  --muted: #F6EEE3;
  --muted-foreground: #6E5560;
  --accent: #F6EEE3;
  --accent-foreground: #2A1420;
  --destructive: #B42318;
  --border: #EADFD2;
  --input: #EADFD2;
  --ring: #7A1E48;
  --chart-1: #C2410C;
  --chart-2: #7A1E48;
  --chart-3: #F59E0B;
  --chart-4: #FBD27A;
  --chart-5: #4A0D2E;
  --sidebar: #FFFFFF;
  --sidebar-foreground: #2A1420;
  --sidebar-primary: #7A1E48;
  --sidebar-primary-foreground: #FFFFFF;
  --sidebar-accent: #F6EEE3;
  --sidebar-accent-foreground: #2A1420;
  --sidebar-border: #EADFD2;
  --sidebar-ring: #7A1E48;
}

.dark {
  --background: #1A0E14;
  --foreground: #FBEFE6;
  --card: #24141C;
  --card-foreground: #FBEFE6;
  --popover: #24141C;
  --popover-foreground: #FBEFE6;
  --primary: #FDBA4D;
  --primary-foreground: #2A1420;
  --secondary: #F0784A;
  --secondary-foreground: #1A0E14;
  --muted: #2E1A24;
  --muted-foreground: #C9AFB9;
  --accent: #2E1A24;
  --accent-foreground: #FBEFE6;
  --destructive: #FF6B5B;
  --border: #43283A;
  --input: #43283A;
  --ring: #FDBA4D;
  --chart-1: #FF8A3D;
  --chart-2: #FDBA4D;
  --chart-3: #E0457B;
  --chart-4: #FFE3A3;
  --chart-5: #B23A6E;
  --sidebar: #24141C;
  --sidebar-foreground: #FBEFE6;
  --sidebar-primary: #FDBA4D;
  --sidebar-primary-foreground: #2A1420;
  --sidebar-accent: #2E1A24;
  --sidebar-accent-foreground: #FBEFE6;
  --sidebar-border: #43283A;
  --sidebar-ring: #FDBA4D;
}

Tailwind v4 theme.css

Preview

/* UI Lingo · Heat Map Dashboard (heatmap-dashboard) — Tailwind CSS v4 theme. Paste after @import "tailwindcss";
 * Default mode is light; dark values apply under .dark.
 * Derived: shadow "none" = 0 0 #0000; var(--c-x) in shadows = var(--color-x); shadows using recipe-only variables are left out.
 * Fonts: https://fonts.googleapis.com/css2?family=Sora:wght@600;700&family=DM+Sans:wght@400;500;700&family=DM+Mono:wght@400;500&family=K2D:wght@600;700&family=Noto+Sans+Thai:wght@400;500;700&display=swap
 */
@theme {
  --color-bg: #FBF7F1;
  --color-surface: #FFFFFF;
  --color-surface-2: #F6EEE3;
  --color-text: #2A1420;
  --color-text-muted: #6E5560;
  --color-primary: #7A1E48;
  --color-on-primary: #FFFFFF;
  --color-secondary: #FDBA4D;
  --color-on-secondary: #2A1420;
  --color-accent: #E8590C;
  --color-border: #EADFD2;
  --color-success: #2F7D4F;
  --color-warning: #B4610A;
  --color-danger: #B42318;
  --color-chart-1: #C2410C;
  --color-chart-2: #7A1E48;
  --color-chart-3: #F59E0B;
  --color-chart-4: #FBD27A;
  --color-chart-5: #4A0D2E;
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-xl: 14px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(74,13,46,0.05);
  --shadow-md: 0 6px 20px rgba(74,13,46,0.08);
  --shadow-lg: 0 18px 48px rgba(74,13,46,0.12);
  --font-heading: "Sora", "K2D", system-ui, sans-serif;
  --font-body: "DM Sans", "Noto Sans Thai", system-ui, sans-serif;
  --font-mono: "DM Mono", ui-monospace, "SFMono-Regular", Menlo, "Noto Sans Thai", monospace;
}

.dark {
  --color-bg: #1A0E14;
  --color-surface: #24141C;
  --color-surface-2: #2E1A24;
  --color-text: #FBEFE6;
  --color-text-muted: #C9AFB9;
  --color-primary: #FDBA4D;
  --color-on-primary: #2A1420;
  --color-secondary: #F0784A;
  --color-on-secondary: #1A0E14;
  --color-accent: #FF9F43;
  --color-border: #43283A;
  --color-success: #5CC48A;
  --color-warning: #FDBA4D;
  --color-danger: #FF6B5B;
  --color-chart-1: #FF8A3D;
  --color-chart-2: #FDBA4D;
  --color-chart-3: #E0457B;
  --color-chart-4: #FFE3A3;
  --color-chart-5: #B23A6E;
}

DTCG tokens tokens.json

Preview

{
  "$description": "UI Lingo · Heat Map Dashboard (heatmap-dashboard). Default mode: light. Fonts: https://fonts.googleapis.com/css2?family=Sora:wght@600;700&family=DM+Sans:wght@400;500;700&family=DM+Mono:wght@400;500&family=K2D:wght@600;700&family=Noto+Sans+Thai:wght@400;500;700&display=swap",
  "color": {
    "light": {
      "bg": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9843,
            0.9686,
            0.9451
          ],
          "hex": "#fbf7f1"
        }
      },
      "surface": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "hex": "#ffffff"
        }
      },
      "surface-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9647,
            0.9333,
            0.8902
          ],
          "hex": "#f6eee3"
        }
      },
      "text": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1647,
            0.0784,
            0.1255
          ],
          "hex": "#2a1420"
        }
      },
      "text-muted": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.4314,
            0.3333,
            0.3765
          ],
          "hex": "#6e5560"
        }
      },
      "primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.4784,
            0.1176,
            0.2824
          ],
          "hex": "#7a1e48"
        }
      },
      "on-primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "hex": "#ffffff"
        }
      },
      "secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9922,
            0.7294,
            0.302
          ],
          "hex": "#fdba4d"
        }
      },
      "on-secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1647,
            0.0784,
            0.1255
          ],
          "hex": "#2a1420"
        }
      },
      "accent": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9098,
            0.349,
            0.0471
          ],
          "hex": "#e8590c"
        }
      },
      "border": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9176,
            0.8745,
            0.8235
          ],
          "hex": "#eadfd2"
        }
      },
      "success": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1843,
            0.4902,
            0.3098
          ],
          "hex": "#2f7d4f"
        }
      },
      "warning": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7059,
            0.3804,
            0.0392
          ],
          "hex": "#b4610a"
        }
      },
      "danger": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7059,
            0.1373,
            0.0941
          ],
          "hex": "#b42318"
        }
      },
      "chart-1": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7608,
            0.2549,
            0.0471
          ],
          "hex": "#c2410c"
        }
      },
      "chart-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.4784,
            0.1176,
            0.2824
          ],
          "hex": "#7a1e48"
        }
      },
      "chart-3": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9608,
            0.6196,
            0.0431
          ],
          "hex": "#f59e0b"
        }
      },
      "chart-4": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9843,
            0.8235,
            0.4784
          ],
          "hex": "#fbd27a"
        }
      },
      "chart-5": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2902,
            0.051,
            0.1804
          ],
          "hex": "#4a0d2e"
        }
      }
    },
    "dark": {
      "bg": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.102,
            0.0549,
            0.0784
          ],
          "hex": "#1a0e14"
        }
      },
      "surface": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1412,
            0.0784,
            0.1098
          ],
          "hex": "#24141c"
        }
      },
      "surface-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1804,
            0.102,
            0.1412
          ],
          "hex": "#2e1a24"
        }
      },
      "text": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9843,
            0.9373,
            0.902
          ],
          "hex": "#fbefe6"
        }
      },
      "text-muted": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7882,
            0.6863,
            0.7255
          ],
          "hex": "#c9afb9"
        }
      },
      "primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9922,
            0.7294,
            0.302
          ],
          "hex": "#fdba4d"
        }
      },
      "on-primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1647,
            0.0784,
            0.1255
          ],
          "hex": "#2a1420"
        }
      },
      "secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9412,
            0.4706,
            0.2902
          ],
          "hex": "#f0784a"
        }
      },
      "on-secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.102,
            0.0549,
            0.0784
          ],
          "hex": "#1a0e14"
        }
      },
      "accent": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.6235,
            0.2627
          ],
          "hex": "#ff9f43"
        }
      },
      "border": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2627,
            0.1569,
            0.2275
          ],
          "hex": "#43283a"
        }
      },
      "success": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.3608,
            0.7686,
            0.5412
          ],
          "hex": "#5cc48a"
        }
      },
      "warning": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9922,
            0.7294,
            0.302
          ],
          "hex": "#fdba4d"
        }
      },
      "danger": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.4196,
            0.3569
          ],
          "hex": "#ff6b5b"
        }
      },
      "chart-1": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.5412,
            0.2392
          ],
          "hex": "#ff8a3d"
        }
      },
      "chart-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9922,
            0.7294,
            0.302
          ],
          "hex": "#fdba4d"
        }
      },
      "chart-3": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8784,
            0.2706,
            0.4824
          ],
          "hex": "#e0457b"
        }
      },
      "chart-4": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.8902,
            0.6392
          ],
          "hex": "#ffe3a3"
        }
      },
      "chart-5": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.698,
            0.2275,
            0.4314
          ],
          "hex": "#b23a6e"
        }
      }
    }
  },
  "radius": {
    "sm": {
      "$type": "dimension",
      "$value": {
        "value": 3,
        "unit": "px"
      }
    },
    "md": {
      "$type": "dimension",
      "$value": {
        "value": 6,
        "unit": "px"
      }
    },
    "lg": {
      "$type": "dimension",
      "$value": {
        "value": 10,
        "unit": "px"
      }
    },
    "xl": {
      "$type": "dimension",
      "$value": {
        "value": 14,
        "unit": "px"
      }
    },
    "pill": {
      "$type": "dimension",
      "$value": {
        "value": 999,
        "unit": "px"
      }
    }
  },
  "border-width": {
    "$type": "dimension",
    "$value": {
      "value": 1,
      "unit": "px"
    }
  },
  "shadow": {
    "sm": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.2902,
              0.051,
              0.1804
            ],
            "hex": "#4a0d2e",
            "alpha": 0.05
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 1,
            "unit": "px"
          },
          "blur": {
            "value": 2,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        }
      ]
    },
    "md": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.2902,
              0.051,
              0.1804
            ],
            "hex": "#4a0d2e",
            "alpha": 0.08
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 6,
            "unit": "px"
          },
          "blur": {
            "value": 20,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        }
      ]
    },
    "lg": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.2902,
              0.051,
              0.1804
            ],
            "hex": "#4a0d2e",
            "alpha": 0.12
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 18,
            "unit": "px"
          },
          "blur": {
            "value": 48,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        }
      ]
    }
  },
  "font": {
    "heading": {
      "$type": "fontFamily",
      "$value": [
        "Sora",
        "K2D",
        "system-ui",
        "sans-serif"
      ]
    },
    "body": {
      "$type": "fontFamily",
      "$value": [
        "DM Sans",
        "Noto Sans Thai",
        "system-ui",
        "sans-serif"
      ]
    },
    "mono": {
      "$type": "fontFamily",
      "$value": [
        "DM Mono",
        "ui-monospace",
        "SFMono-Regular",
        "Menlo",
        "Noto Sans Thai",
        "monospace"
      ]
    }
  },
  "font-weight": {
    "heading": {
      "$type": "fontWeight",
      "$value": 700
    },
    "body": {
      "$type": "fontWeight",
      "$value": 400
    }
  },
  "duration": {
    "$type": "duration",
    "$value": {
      "value": 180,
      "unit": "ms"
    }
  },
  "easing": {
    "$type": "cubicBezier",
    "$value": [
      0.2,
      0.7,
      0.2,
      1
    ]
  },
  "density": {
    "$type": "number",
    "$value": 1
  }
}

Prompt builder

Paste into Claude, Cursor, v0, Lovable or any coding agent to recreate this style.

PageTech stackContent languageMode

Audit: ✓ Passed
Rounds: 2
Builder: unknown
Auditor: unknown

Second style (optional)Instruction

A new-style brief from this style and an optional second one, for the model ladder. It is not a style: it must pass the ladder before merging, and nothing is created for you.

Meta-prompt for the writer remix-brief.md

Preview

New style issue draft new-style-issue.md

Preview

prompt.json skeleton prompt.json

Preview

Copied!