Design System
Recipe Heatmap
A density-driven visualization for recipe popularity, seasonal trends, and ingredient co-occurrence across the Meridian platform.
Color Scale
The heatmap uses a five-stop gradient anchored in the Meridian brand palette. Cold cells represent low activity; hot cells peak at the signature violet.
0255075100+
Grid Anatomy
Each cell is a rounded rectangle with a minimum size of 44×44px for touch targets. Hover states lift the cell with a subtle glow using the pink accent.
Days × Hours grid — hover for tooltip with exact count.
Accessibility
- All cells meet 3:1 contrast against the dark background.
- A numeric label overlay appears on focus for screen readers.
- Reduced-motion users receive instant transitions with no scale.
Variants
Ingredient Co-occurrence
Symmetric matrix. Diagonal shows solo usage frequency. Cells link to recipes containing both ingredients.
Seasonal Trend
Months × Years. Reveals cyclical patterns for pumpkin spice, grilling recipes, and holiday baking surges.