The hero image carousel, done with restraint

Summary

A calm, light, editorial product page for an AI design agent's prompt library, anchored by a restrained hero-image carousel: one large 16:9 active frame flanked by two narrow soft-faded 3:4 peek frames, with a thin emerald progress bar, capsule dot indicators (the active dot stretched into a pill), and a five-up thumbnail strip below. Built on near-white surfaces, slate text, and a single emerald accent. Sections (sticky blurred nav, centered hero, the carousel showcase on a neutral rounded canvas, a three-card variants strip, a two-column specs grid, a dark emerald-glow prompt CTA, and a minimal footer) all sit inside a centered max-w-7xl column and reflow cleanly to a single stack on mobile.

Style

Light, airy, restrained editorial UI. Surfaces are white (#ffffff) and a very faint slate gradient (slate-50 #f8fafc to white) on rounded 28px canvases; all text is slate (slate-900 #0f172a headings, slate-600 #475569 nav, slate-500 #64748b body); a single emerald accent runs through the brand dot, controls, eyebrows, progress bar, the active indicator, and CTAs (emerald-500 #10b981 primary, emerald-600 #059669 hover, emerald-300 #6ee7b7 / emerald-50 #ecfdf5 / emerald-100 #d1fae5 / emerald-200 #a7f3d0 tints). Depth is soft and quiet: large soft drop shadows (slide = 0 30px 60px -18px rgba(15,23,42,0.28) + 0 8px 24px -12px rgba(15,23,42,0.18); peek = 0 18px 40px -22px rgba(15,23,42,0.22)) and a colored control glow (ctrl = 0 10px 30px -8px rgba(16,185,129,0.45)); hairline borders are slate-200 (#e2e8f0) and ring-black/5; corners are generously rounded (rounded-full pills, rounded-2xl cards, rounded-[20px]/[28px] frames and canvases). A faint dotted 'grain' texture (radial-gradient rgba(15,23,42,0.025) 1px dots on a 22px grid) sits behind the hero and inside the showcase canvas. A blurred emerald-100/60 radial glow floats above the hero. Type is Inter throughout (300-900), with extrabold tracking-tight display headings (text-balance), uppercase wide-tracked emerald eyebrows ([0.18em]), and relaxed slate body copy. Slide transitions use a 0.6s cubic-bezier(0.22,1,0.36,1) ease.

Layout & Structure

A single centered max-w-7xl column with px-6 (mobile) / px-8 (lg) gutters. Order top to bottom: a sticky blurred white nav, a centered hero (eyebrow badge + balanced headline + sub), the carousel SHOWCASE on a rounded neutral canvas (the anchor of the layout: caption row, a center-stage active 16:9 frame flanked by two narrow 3:4 peek frames, a thin progress bar, a dot indicator row, and a 5-up thumbnail strip), a bordered slate-50 'variants' band with a 3-card grid, a two-column 'specs' grid (intro column + 2x2 feature cards), a dark slate-900 'prompt' CTA card, and a minimal footer. Desktop multi-column grids and the side peek frames / desktop nav links collapse on mobile; the active frame goes full-width with the peeks hidden under sm.

Sticky nav

Hero

Carousel showcase (the anchor)

Variants strip

Specs grid

Prompt CTA + footer

Special Notes

The whole point is RESTRAINT: light near-white surfaces, slate text, and a single emerald accent (emerald-500 #10b981) reserved for intent (brand dot, the next control, eyebrows, the progress fill, the active dot/thumbnail ring, and CTAs). Depth comes only from large SOFT shadows and blurred glows, never hard offset blocks; corners are generously rounded everywhere. The carousel reads as restrained because of three moves: exactly one large active frame, narrow peeks that recede via a white fade + reduced opacity, and controls that stay out of the way (the prev arrow is quiet white-glass, only the next arrow carries the emerald glow). The active state is signalled three ways at once (the stretched emerald dot, the 60% progress fill, and the ring-2 emerald thumbnail). Inter is the only typeface (300-900); eyebrows are 11px uppercase with 0.18em tracking in emerald-600; headings are extrabold tracking-tight and text-balance. Icons are exclusively Iconify Phosphor 'bold' weight. Built with Tailwind (CDN) using a custom emerald scale and the named shadows slide / peek / ctrl; the 'grain' texture and the slide track's 0.6s cubic-bezier(0.22,1,0.36,1) transition are defined in a small <style> block.