Hero architecture
Design a heatmap visualization. Use: color gradient scale (cool to hot), cell-based grid, intensity legend, hover tooltips, geographic or matrix layout, divergent color scheme for +/- values, accessible color alternatives.
Style 29 · BI/Analytics · Micro-Credentials/Badges Platform
Heat Map & Heatmap Style
Color-coded grid/matrix, data intensity visualization, geographical heat maps, correlation matrices, cell-based representation, gradient coloring. This mock website translates the UI/UX Pro Max style notes into a client-ready landing/dashboard hybrid with its own palette, typography, chart module, and component system.
Live product surface
NOVA Micro-Credentials/Badges OS
Geographical analysis, performance matrices, correlation analysis, user behavior heatmaps, temperature/intensity data
90%
style fit score
Effects
Color gradient transitions on data change, cell highlighting on hover, tooltip reveal on click, smooth color animation
A full-page mock website in this style
Component language
display: grid, background: linear-gradient for legend, cell hover states, tooltip positioning, color scale (blue→white→red), SVG for geographic, canvas for large datasets
Best-fit market
Geographical analysis, performance matrices, correlation analysis, user behavior heatmaps, temperature/intensity data
Palette used
Trust blue + achievement gold [Accent adjusted from #CA8A04 for WCAG 3:1]
Typography pairing
Legal Professional
EB Garamond / Lato
EB Garamond for authority. Lato for clean body text.
Implementation checklist
- ☐ Color scale clear
- ☐ Legend visible
- ☐ Tooltips informative
- ☐ Colorblind alternatives
- ☐ Zoom/pan for geo
Chart module: Scatter Plot or Bubble Chart
Exploring relationship between two continuous variables; identifying clusters or outliers in a dataset
Interaction spec
Accessibility: ⚠ Colorblind considerations · B
Performance: ⚡ Excellent
Mobile: ◐ Medium
Avoid: Linear data representation, categorical comparisons (use bar charts), small datasets
Visual system samples
Gallery rhythm
Conversion section
One primary action, one secondary proof path, clear visual hierarchy, focus states, 44px+ hit targets, and token-driven colors.
Primary CTA