Coral clay backgrounds, cream white cards, diffused shadows, and warm teal accents. A data-rich interface that feels inviting, not clinical.
Six carefully tuned warm hues — from coral clay backgrounds to cream white cards, teal for positive signals, gold for charts, and coral for alerts. Hover each swatch to see the shadow glow.
Color usage guidelines
Every component uses large rounded corners, diffused shadows, and warm tonal colors. No sharp edges. No neon. No cold blue.
Primary actions — teal with tinted diffusion
Secondary & ghost variants
Size variants
Four named aiRules that govern every interactive element in Warm Dashboard. Hover or interact with each demo to feel the rule in action.
Card hover stays calm — only a whisper of movement. No visual shock for data dashboards.
hover:-translate-y-0.5 + shadow-xl → shadow-2xl
Hover the card above to see Micro-Focus
Shadows radiate the button's own warm hue — not dead gray.
hover:shadow-[0_8px_20px_rgba(74,157,154,0.25)]
KPI numbers scale up on hover to help users lock onto key metrics.
group-hover:scale-105 + group-hover:text-[#4a9d9a]
Hover any KPI card above
All transitions use duration-200 ease-out — efficient yet gentle.
duration-200 ease-out — no jarring delays
A complete dashboard mockup demonstrating sidebar, stat cards, activity chart, top performers, and channel statistics — all in warm tones.
Three core tenets that define Warm Dashboard. Professional without being cold. Data-rich without being chaotic. Warm without being distracting.
Coral clay, never cold
The background is always #d4a088 or a variant. Cards float above it as cream white surfaces. Never use cool-toned backgrounds or sharp contrast.
Soft glow, never hard drop
Every shadow is xl-spread and low-opacity. No sharp drop shadows. Cards appear to rest gently above the background, not float aggressively.
Gray text on cream, always readable
Data lives in gray-800 and gray-600. Accents (teal, gold, coral) only appear for deltas and highlights. Never use black text on the warm background.
Multi-channel performance tracking with teal and coral trend indicators. Each channel card follows the Micro-Focus hover rule.
Your channel statistics for the past 7-day period.
Dribbble
+2%
Behance
-7%
+5%
+11%
Coral clay warmth transmits trust and approachability without sacrificing professionalism.
Cream white cards on warm coral create effortless depth. No harsh contrast, just natural layering.
Teal is reserved exclusively for positive trends, active states, and primary CTAs. Never diluted.
Gold fills bar and line charts, providing visual warmth without competing with data indicators.
Coral is the warning and negative signal color. Stays in the warm palette without feeling alarming.
The sidebar uses bg-white/80 + backdrop-blur for a frosted-glass feel that blends with coral BG.