All Kits. Take Your Pick. — LumenStudio Kit Carousel

Summary

A light, premium product page for an AI design agent's design-hardware brand ('LumenStudio'), anchored by an Apple-Shop-style PRODUCT-CARD CAROUSEL: a horizontal, scroll-snapping track of tall white kit cards, the first card highlighted (a 'New' badge, a cobalt ring, and a stronger lifted shadow) and a fourth card peeking in from the right edge to signal more. Each card carries an oversized extrabold product name, a soft tinted radial 'grain' tile holding a stylized device mock, a row of color-swatch dots, a one-line descriptor, and a 'From $price / kit' + Buy footer split by a hairline. Sections (a sticky blurred nav, a full-bleed hero strip 'All kits. Take your pick.', the carousel section with a header row + circular prev/next arrows + a thin progress bar with an 01/06 counter, and a full-bleed shipping/compare footer strip) all sit inside a centered max-w-[1180px] column and reflow to a draggable single-row track on mobile.

Style

Light, airy, premium Apple-store-like commerce UI. Surfaces are a paper near-white (#f8fafc) page over pure-white (#ffffff) cards and nav; ink text is a near-black navy (#0b1220) for headings with a slate 'slatey' (#475569) for body/secondary. A single cobalt-blue accent runs through the logo tile, the primary buttons, the active card's ring, the next arrow, and the progress fill (cobalt-500 #2563eb primary, cobalt-600 #1d4ed8 hover, cobalt-700 #1e40af deep, with tints cobalt-50 #eff4ff and cobalt-100 #dbe6ff for badges/rings). Per-card device mocks introduce playful secondary product hues (sky, violet, emerald, orange-400) used ONLY inside the device tiles and as swatch dots, never on chrome. Depth is soft and quiet: named shadows card = 0 1px 2px rgba(15,23,42,.04), 0 12px 30px -12px rgba(15,23,42,.18); cardhi = 0 2px 4px rgba(15,23,42,.06), 0 28px 50px -18px rgba(37,99,235,.30) (a cobalt-tinted lift on the highlighted card); nav = 0 1px 0 rgba(15,23,42,.06); and a pill glow = 0 6px 18px -6px rgba(37,99,235,.55) on cobalt buttons. Borders are slate-200 hairlines (and ring-1 cobalt-100 on the active card); a device drop-shadow filter (drop-shadow(0 26px 30px rgba(15,23,42,.18))) floats the mocks. Corners are generously rounded: rounded-full pills/arrows, rounded-[26px] cards, rounded-[20px] device tiles, rounded-[9px]/[18px]/[14px] device bodies. Soft radial 'grain' gradients (white -> faint blue/slate) sit behind hero and inside each device tile. Type is Inter throughout (400-900), with extrabold tracking-tight display headings, an uppercase wide-tracked ([0.16em]) cobalt eyebrow, and relaxed slatey body copy.

Layout & Structure

A single centered max-w-[1180px] column with px-6 gutters, on a paper #f8fafc page. Order top to bottom: a sticky blurred white nav, a full-bleed white hero strip (eyebrow + a big 'All kits. Take your pick.' headline beside a short sub), the CAROUSEL section on the paper background (a header row 'Featured kits' + a 'drag to explore' chip + circular prev/next arrows, then a horizontal scroll-snap track of tall product cards with the 4th card peeking at the right edge, then a thin progress bar with an 01/06 counter), and a full-bleed white footer strip (a shipping line + a 'Compare all kits' link). On mobile the nav center links + 'Sign in' hide while the cobalt 'Start free' pill persists, the hero stacks, and the card track stays a draggable single row (scroll-snap-x).

Sticky nav

Hero strip

Carousel section (the anchor)

Product card

Footer strip

Special Notes

The whole point is a PREMIUM RETAIL CAROUSEL in the Apple-Shop idiom: light paper (#f8fafc) + white surfaces, near-black navy ink (#0b1220) headings, slatey (#475569) body, and a single cobalt-blue accent (cobalt-500 #2563eb) reserved for chrome intent (the logo tile, the primary buttons, the next arrow, the highlighted card's ring, and the progress fill). Depth comes only from large SOFT shadows + a cobalt-tinted lift on the active card (the named card / cardhi / nav shadows and a cobalt 'pill' glow), never hard offset blocks; corners are generously rounded everywhere. The carousel reads as a real store: a horizontal scroll-snap track where the first card is clearly the hero pick (a 'New' badge, a cobalt ring, the strongest lift, and a solid cobalt Buy) and a fourth card deliberately peeks past the right gutter to invite a drag/scroll, with quiet circular arrows + a 'drag to explore' chip + a 42% progress bar and 01/06 counter doing the wayfinding. Playful secondary product hues (sky, violet, emerald, orange-400) are quarantined to the per-card device mocks and swatch dots so the chrome stays single-accent. Inter is the only typeface (400-900); the eyebrow is 11px uppercase with 0.16em tracking in cobalt-600; headings are extrabold tracking-tight. Icons are exclusively Iconify Phosphor 'fill'/'bold' weight. Built with Tailwind (CDN) using a custom cobalt scale + ink/slatey/paper tokens and the named shadows card / cardhi / nav / pill; the soft radial 'grain' tiles, the hidden-scrollbar snap track, and the device drop-shadow are defined in a small <style> block.