Dashboard Redesign ā Light/Dark Mode & Improved Information Density
- dashboard
On 2026-06-05, we shipped a full redesign of the HeatMapX dashboard (heatmapx.com/dashboard). Visibility and usability have both improved significantly.
What's changed
ā Three-way theme: Light / Dark / System
A three-way toggle ā "ā Light", "š» System", "š Dark" ā has been added to the top-right of the header.
- System (default): Automatically follows your OS appearance setting. On macOS set to "Auto", it switches to dark at night without any manual action.
- Manual override: You can pin light or dark at any time. The preference is saved in your browser.
- Flash of unstyled content (FOUC) on initial load is prevented, so the correct theme renders immediately on reload.
ā¤ Registered sites redesigned as a tabular list
The previous two-column card grid has been replaced with a single-row table layout, significantly improving scannability when you have multiple sites registered.
- Columns are vertically aligned across all rows, making it easy to compare status and event counts at a glance
- Site name, URL, API key, and tracker tag are all shown compactly on a single row
- Setup details collapse under "āø Setup info" (expand to copy API key and tracker tag)
- Long names and URLs are automatically truncated with "ā¦" so the layout never breaks
ļ¼ "Add site" button next to the section heading
A compact "ļ¼ Add site" button now appears beside the "Registered Sites" heading, letting you add a new site without scrolling (the original button at the bottom of the list remains as well).
ā Unified GitHub-style flat design
The color scheme has been simplified, cutting visual noise substantially.
- Page background: neutral gray (
#f5f5f5), matching the tone of modern SaaS products like Linear and Supabase - Cards: white base + thin border, no shadow, 6px border radius
- Orange as the single brand accent (previously: blue, green, purple, and amber mixed)
- Semantic status colors preserved: green (active) / amber (warning) / red (error)
Before / After
| Aspect | Before | After |
|---|---|---|
| Color theme | Fixed dark dashboard | Three-way: Light / Dark / System |
| Layout | Two-column card grid (low information density) | Single-column tabular list (columns vertically aligned) |
| Site display | Stacked vertically, takes up a lot of space | One site = one row + collapsible details |
| Add button | Bottom of page only | Both beside the heading and at the bottom |
| Brand color | Blue / green / purple / amber mixed | Unified orange single-accent axis |
Additional improvements
- Site name and URL length limits: 60 characters for names / 512 characters for URLs, preventing layout breakage.
- Updated add-site placeholders: Replaced
e.g. in-gol/https://in-gol.comwithe.g. My site/https://example.comacross all 15 supported languages. - Onboarding modal: Fades in 1 second after reaching the dashboard, softening the "sudden pop" feel.
- Code snippets: Tracker tag and CLI command displays have been updated from dark backgrounds to a light gray pill style, in harmony with the light theme.
Scope of impact
This release is UI/UX only ā measurement logic, data structures, and the API are unchanged. Existing embedded tracker tags continue to work as-is.