Home / Snippets / Color & Theming /
Dark mode hero section
Unlike the compact hero snippet, this band is a two-column layout: narrative plus proof points (stats) on a shared gradient shell.
Design tokens that survive theme flips
Ship one palette in OKLCH, wire light/dark once, and keep contrast checks in CI.
99.9%Uptime
120+Components
12msp95 paint
WCAGAA focus
Widely Supported
Quick implementation
.dmhs-section {
display: grid;
gap: 1rem;
}
@media (min-width: 36rem) {
.dmhs-section { grid-template-columns: 1fr 1fr; }
}
.dmhs-stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.55rem;
}Prompt this to your LLM
Grid breakpoints and stat cards.
You are building a dark-theme hero section for a marketing page.
Goal: Two columns on wide viewports — copy + CTAs on the left, 2×2 stat grid on the right; stack on narrow screens.
Technical constraints:
- Outer shell uses layered oklch gradients; stat tiles use subtle borders and inset surfaces.
- CTAs are anchor tags with distinct primary/secondary treatments.
Return HTML + CSS.Why this matters in 2026
Hero sections must answer “what” and “why now” in one scan. Pairing narrative with metrics reduces bounce on technical products.
The logic
The grid swaps at 36rem so small phones read headline → stats without horizontal scroll.
Accessibility & performance
Use a real section with a heading; stats use strong for numbers. No images or video — first paint stays cheap.