# Heat Map Dashboard > 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. - Nickname: Heat grid - Also called: Heatmap-first dashboard, Intensity dashboard, Calendar heatmap UI - Category: Dashboards & Data - Moods: Techy, Bold, Serious - Industries: E‑commerce, SaaS, Media & Entertainment, Travel & Hospitality, Food & Restaurant - Style page: https://uilingo.dev/styles/heatmap-dashboard/ 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 ## Audit Passed after 2 rounds · builder unknown · auditor unknown ## Prompt Paste this into any coding agent. Composed for: Landing page, Plain HTML + CSS, Thai + English, light mode. For another page, stack, language or mode, use the prompt builder on the style page. ```markdown # Build a landing web page in the "Heat Map Dashboard" UI style Platform: Web (responsive, 1440px desktop down to 375px) · Stack: Plain HTML + CSS · Mode: light ## The style in one line 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: heatmap first, sequential colour ramp, butter to plum, intensity grid, day × hour matrix, low → high legend, square tile cells, warm off-white canvas. ## Visual language A warm, light analytics page where colour intensity is the main way to read data. One sequential ramp — butter #FFF3D1, amber #FDBA4D, orange #F0702E, crimson #B42344, plum #4A0D2E — drives every quantity: the hero day × hour grid, KPI heat strips, bars, funnel steps and even table cells. Everything else is calm: a warm off-white canvas (#FBF7F1), white cards with thin warm-grey borders and a deep plum primary. Decoration is itself a heatmap — background patches are smooth heat fields chopped into square tiles by 4px gap lines. ## Signature details (must be visible) - One 5-stop sequential ramp (#FFF3D1 → #FDBA4D → #F0702E → #B42344 → #4A0D2E) used for every intensity; darker always means more - Cell colour rule: bucket the 0–100 value into 5 stops (0–19 butter, 20–39 amber, 40–59 orange, 60–79 crimson, 80–100 plum), or linearly interpolate in oklab between the stops. Use white text on crimson and plum (v ≥ 60), ink text below that - The heatmap is the first widget after the KPIs: a 7×12 grid (7 rows × 12+ columns) with 3px gaps and 3px-radius cells, cell width : height ≈ 1.35 : 1 (wider than tall), with row labels - Value labels: print the value inside the top 3 and bottom 3 cells only (DM Mono 11px); every other cell shows its value on hover - A low → high legend bar (8px ramp gradient with LOW / HIGH labels at the ends) directly under every heat grid - KPI tiles replace sparklines with a 12-cell heat strip (ramp gradient split by 2px gaps) - Decorative heat fields: radial ramp gradients overlaid with a 26–34px grid of background-coloured 4px gap lines so they read as tiles - Two plums: primary plum #7A1E48 is for the logo, CTAs, active chips and nav; ramp plum #4A0D2E is only the darkest data stop. Amber #FDBA4D secondary with dark text - Eyebrows start with a 5-swatch ramp legend chip; the logo is a 2×2 tile of ramp colours ## Design tokens — use these exact values Colours (light mode): - background #FBF7F1 - surface #FFFFFF - surface-2 #F6EEE3 - text #2A1420 - text-muted #6E5560 - primary #7A1E48 (text on it #FFFFFF) - secondary #FDBA4D (text on it #2A1420) - accent #E8590C - border #EADFD2 - success #2F7D4F · warning #B4610A · danger #B42318 - chart series #C2410C, #7A1E48, #F59E0B, #FBD27A, #4A0D2E Radius: sm 3px, md 6px, lg 10px, xl 14px, pill 999px Border width: 1px Shadows: sm `0 1px 2px rgba(74,13,46,0.05)`, md `0 6px 20px rgba(74,13,46,0.08)`, lg `0 18px 48px rgba(74,13,46,0.12)` (where shadows reference var(--c-border) use the border colour) Spacing: 8px base unit × 1 density Motion: 180ms cubic-bezier(.2,.7,.2,1) ## Typography (Latin + Thai) - Headings: Sora 600/700 with Thai fallback K2D 600/700 - Body: DM Sans 400/500/700 with Thai fallback Noto Sans Thai 400/500/700 - Mono: DM Mono - Google Fonts URL: 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 - CSS stacks: heading `"Sora", "K2D", system-ui, sans-serif`; body `"DM Sans", "Noto Sans Thai", system-ui, sans-serif`; mono `"DM Mono", ui-monospace, "SFMono-Regular", Menlo, "Noto Sans Thai", monospace` (the mono font has no Thai glyphs, so Thai inside mono labels falls back to Noto Sans Thai — drop uppercase and tracking there) — Latin font first, Thai font second, so each script gets its own face. - Display size clamp(2.6rem, 5.6vw, 4.6rem), heading weight 700, heading tracking -0.03em (Latin only), uppercase small labels (Latin only). - Thai rules: body line-height ≥ 1.7, headings ≥ 1.3; never apply negative letter-spacing or condensed tracking to Thai; do not fake-bold or italicise Thai; keep Thai text at least 1px larger than the equivalent Latin size when they sit side by side. - Why this pairing: 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. ## Components - Buttons: 6px radius, 600 weight; primary plum #7A1E48 with a 1px darker plum base and soft plum shadow, hover shifts to crimson; secondary white, hover fills butter with an amber border - Cards: white, 1px #EADFD2 border, 10px radius, faint plum-tinted shadow; hover adds an amber border - Heat cell: background from its 0–100 value on the ramp (bucketed or oklab-interpolated); hover scales 1.12 with a 2px surface + 1px ink ring and shows the value - Inputs: 6px radius; focus = orange border + 3px amber 40% ring - Progress bars: 10px tall with the full ramp as the fill - Tabs: selected underline is a 3px ramp gradient - Chips: 3px radius; non-active chips carry a 9px ramp-colour square; active chip is primary plum - Feature icons sit in square ramp-coloured tiles cycling amber → orange → crimson → plum - Funnel: steps shrink in width and each step's fill follows its value on the ramp — the largest (top) step is plum and each smaller step is one stop lighter - Chart series 1 and 4 (#C2410C, #FBD27A) are only for line charts and the donut, where categories are not intensities; never inside heat cells or the funnel - Mobile tab bar: plain warm white; active item shows a 22×4px ramp bar above the icon ## Layout for this web page Marketing landing page: top navigation, hero with headline/sub-headline/two CTAs and a product visual, then the content sections, and a footer. Hero: two columns — copy left, product visual right. Navigation: bar style. Sections in order: hero → logos → features → stats → showcase → testimonials → pricing → cta. Feature section as grid. Landing: split hero with a big geometric sans headline whose last 1–3 words fade with background-clip:text from ink → #B42344 → #F0702E (a flat colour fade, not glossy; fall back to solid #B42344 for Thai if clipping cuts tone marks). The product shot floats over a tiled heat field and must show a real heat grid (at least 7×12 cells) with its low → high legend plus KPI tiles with heat strips — never a line chart as the main visual, and no green anywhere in the hero. Then ramp-coloured feature icon tiles in a 3-column grid (6 cards = 2 full rows), a stats row where each figure sits under an 8px ramp-coloured bar, and a plum CTA that dissolves into a tiled heat field on the right. Dashboard: top navigation (no sidebar, so the grid can be wide), a KPI row with heat strips, then the big heatmap next to the funnel, then the orders table (heat-filled totals) next to ramp-coloured category bars. ## Content Use realistic product copy (fictional brand) suited to: Peak-time analysis (orders by day and hour). Make the UI bilingual: Thai and English, with a visible TH/EN switch that swaps every string. Set the lang attribute to match. ## 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 - Rainbow or categorical palettes for intensity (blue/green/purple mixed with the ramp) - Putting the heatmap below charts and tables — it must lead, on the landing hero as well as the dashboard - Heat grids without a low → high legend - Round blobs, glossy gradients or glows (that drifts into Aurora/Dopamine) - Cold blue/grey enterprise chrome that makes the ramp feel like an afterthought ## Stack notes One self-contained HTML file with a