Cardstack — playful bento card designs

Summary

A playful, candy-pastel bento card-library landing page ('Cardstack — Beautiful cards, snapped into place') built around a colorful bento grid of card variants on a warm cream canvas. A sticky translucent cream glass nav sits above a centered hero (a 'NEW' pill, a big two-line headline with a sunny highlighter swipe under 'snapped into place', a subhead, two pill CTAs, and two rotated floating 'sticker' chips), then the signature bento gallery: a 3-column grid whose first card is a 2x2 deep-sky gradient 'Featured kit' tile holding a mini 3-column bento preview (a bar-chart tile, a sunny +38% stat tile, a coral rating tile, a label strip), beside a sunny stat card (25,000+ with an avatar stack) and a coral quote card; then a second 4-column row (two white mini-stat cards + a 2-col ink CTA tile). Below: a white 'How it works' band (three numbered cream step cards), a 'Starter kits' section (a 4-up grid of gradient-header kit cards), a big rounded ink gradient pricing/CTA banner with blurred color blobs, and a footer. Cards lift and tilt on hover. The palette is cream + sky + coral + sunny + ink, set in Poppins, with Phosphor icons.

Style

Playful, friendly, candy-pastel bento aesthetic on a warm cream canvas (#fdf9f3) with a faint dot 'grain' texture. The accent system is a small bright quartet: sky blue (#38bdf8, deep #0876b8), coral/rose (#fb7185, deep #d83b56), sunny yellow (#ffc23c, with an amber-ink #a86a00 for text on yellow), all anchored by a soft near-black plum 'ink' (#2a2438) used for headings, the dark nav mark, dark cards, and the dark CTA bands. Everything is built from big friendly rounded-[28px]/[36px] cards, full-pill buttons and chips, generous padding, and two soft layered shadows (soft = 0 18px 40px -18px rgba(42,36,56,0.22), lift = 0 26px 60px -22px rgba(42,36,56,0.30)). Surfaces are either white/cream with a faint 8% ink border, a saturated solid color (sunny / coralDeep), a deep-sky-to-#065d91 gradient, or an ink gradient. Type is one rounded geometric typeface, Poppins (400-800), with heavy extrabold (800) tracking-tight headings and a hand-drawn touch: a sunny/70 highlighter bar swiped behind a headline phrase. Big blurred color blobs (sky/coral/sunny at 15-20% behind blur-3xl) float in the hero and CTA banner. Icons are Phosphor (ph:*-fill / -bold) via Iconify. Cards 'wiggle' on hover: translateY(-6px) + a -1deg rotate via a springy cubic-bezier(.34,1.56,.64,1); buttons nudge up 0.5 on hover.

Layout & Structure

A full-width page in vertical sections, each section centered in a max-w-6xl container with 1.5rem horizontal padding. Vertical order: sticky glass nav -> centered hero (with two rotated floating sticker chips and blurred blobs) -> bento gallery (a md:grid-cols-3 row where card 1 spans 2 cols x 2 rows, plus a second md:grid-cols-4 row) -> a white 'How it works' band (a 3-up grid of numbered step cards) -> a 'Starter kits' section (a 2->4 col grid of gradient-header kit cards) -> a big ink-gradient rounded pricing/CTA banner -> footer. Responsive: the bento and most grids collapse to a single column on mobile; the gallery first row is 1 col on mobile and 3 cols at md (the feature card spanning 2x2); the second bento row is 1 col on mobile and 4 cols at md (the ink CTA tile spanning 2); the kits grid is 2 cols on mobile and 4 at md; nav center links hide below md; the floating sticker chips hide below lg.

Sticky glass nav

Centered hero

Bento gallery (signature)

How it works band

Starter kits

Pricing CTA banner + footer

Special Notes

Palette is a warm cream canvas (#fdf9f3) + a bright pastel accent quartet, sky (#38bdf8, deep #0876b8), coral/rose (#fb7185, deep #d83b56), sunny yellow (#ffc23c, with amber-ink #a86a00 for text on yellow), all anchored by a soft near-black plum 'ink' (#2a2438) for headings, the brand mark, dark cards, and dark bands. The whole page is built from big friendly rounded-[28px]/[36px] cards, full-pill buttons/chips, generous padding, and two soft layered shadows (soft 0 18px 40px -18px rgba(42,36,56,0.22), lift 0 26px 60px -22px rgba(42,36,56,0.30)). One typeface only, Poppins (400-800, via Google Fonts), with heavy extrabold (800) tracking-tight headings. The playful character comes from: a sunny/70 highlighter bar swiped behind a headline phrase, rotated floating 'sticker' chips in the hero, big blurred sky/coral/sunny color blobs behind blur-3xl, a faint dot 'grain' texture on the hero and CTA banner, and a springy '.wiggle' hover that tilts and lifts cards (translateY(-6px) rotate(-1deg), cubic-bezier(.34,1.56,.64,1)). The signature surface is the bento grid: a mixed-span layout where a 2x2 deep-sky gradient feature card (with a nested mini-bento preview) anchors a field of sunny stat, coral quote, white mini-stat, and ink CTA cards. Icons are Phosphor (ph:*-fill / -bold) via Iconify. Copy is warm and human with zero em-dashes ('Beautiful cards, snapped into place', 'From a sentence to a stack', 'Pick a mood, start stacking', 'Made for makers who love a tidy grid.'). All numbers / names / quotes are sample copy so the prompt ships with no bundled assets; the reusable value is the playful pastel bento card system (mixed-span rounded cards, the highlighter headline, sticker chips, color blobs, and the wiggle hover), not the words.