Modal Design · success-celebration (pastel) — legibility fixed

Summary

A full success-celebration product page rendered in a soft pastel sky-and-coral light theme on a cream-to-sky radial field (#eaf6fd -> #f3fbff -> #fdf9f3): a sticky glass nav, a celebration hero where a rounded success modal sits as the live centerpiece over a full-bleed confetti layer, then a 3-up 'pattern library' band of white cards, a split 'starter kit' section with a benefits list + a stacked mini upgrade-modal preview, a full-bleed dark-ink CTA band, and a cream footer. The modal itself is the product: a rounded-5xl cream card with a layered dialog shadow, an animated pulsing-ring checkmark badge (sky-deep gradient + drawn-on tick + pop), a celebratory headline + body, a gradient primary CTA and a ghost secondary. Built on a deliberate light-mode contrast system (Poppins throughout) where decorative pastels (sky #38bdf8, coral #fb7185) are used ONLY for fills/confetti while all sky/coral TEXT is a darker, >=4.5:1 token (skyText/coralText #0369a1 / #be123c) and every gradient CTA uses deep stops behind white — the 'legibility fixed' angle. Depth comes from soft layered shadows, glass blur, and animated confetti rather than borders.

Style

A joyful, premium pastel light aesthetic that reads like a polished SaaS celebration screen: a cream-and-sky radial field warmed by a coral wash, soft generous rounding (up to 2.75rem), and three layered shadow tokens (dialog/soft/pill) that lift every card off the page without a single hard border. The brand 'color' is a sky-blue + coral pastel pairing, but the system is split into a decorative layer and a text/CTA layer so it stays legible on light: pastel sky #38bdf8 and coral #fb7185 appear only as confetti, badge fills and tint backgrounds, while any sky- or coral-colored TEXT or icon on a light field uses a darkened token (skyText/coralText = #0369a1 / #be123c, >=4.5:1) and every gradient button runs deep-to-deep stops (skyDeep #0369a1 -> skyDeep2 #075985, or skyDeep -> coralDeep #be123c) so white text always clears contrast. Ink #1f2433 is the heading/text color and slate #5b6172 the muted body. Motion is the joy: a checkmark badge that pops + draws its tick, two staggered pulsing rings, falling confetti and a gentle all-over floating scatter. Poppins (400-800) carries everything, extra-bold for headlines.

Layout & Structure

A single scrolling product page on a centered max-w-6xl mx-auto px-6 container, anchored by a sticky top-0 z-50 glass nav, then five regions: (1) a min-h-[86vh] celebration hero (the .field gradient) with a full-bleed two-layer confetti background — a falling-confetti layer + a gently floating all-over scatter — behind a centered column holding an uppercase eyebrow chip, the success MODAL as the centerpiece, and a caption line; (2) a full-bleed cream 'pattern library' band with a centered intro + a 3-up grid of white pattern cards; (3) a sky-tinted 'starter kit' split (lg:grid-cols-2): a left benefits column (eyebrow + H2 + lead + a 3-item check list + a dark CTA) and a right stacked mini upgrade-modal preview offset by a coral tint card behind it; (4) a full-bleed dark-ink CTA band with two blurred color glows, an eyebrow chip, a big two-line headline, lead, two CTAs and a trust line; (5) a cream footer with a brand lockup, a copyright line and three text links. Everything reflows to a single column on mobile: the modal stays max-w-md and centered, the pattern grid goes 3 -> 1, the kit split stacks (the coral offset card hides below lg), the CTA buttons stack, the nav hides its center links + 'Sign in' below md/sm while the 'Get the kit' button persists, and the footer goes column.

Sticky glass nav

Celebration hero + confetti layers

The success modal (the centerpiece)

Pattern library band (3-up cards)

Starter-kit split + mini upgrade modal

Dark-ink CTA band

Cream footer

Special Notes

One Google Font: Poppins (weights 400/500/600/700/800) as font-sans for everything; extra-bold (800) headlines with tracking-tight. Icons are Phosphor via Iconify, colored only with the LEGIBLE text tokens or white, never the raw pastels (ph:sparkle-fill, ph:confetti-fill, ph:x-bold, ph:arrow-right-bold, ph:check-circle-fill, ph:warning-fill, ph:check-bold, ph:heart-fill, ph:rocket-launch-fill). THE LEGIBILITY RULE (the whole point of this variant): the pastel sky #38bdf8 and coral #fb7185 are DECORATIVE-ONLY (confetti, badge/tint fills, blurred glows); any sky/coral-colored TEXT or icon on a light field must use the darkened token skyText/coralText = #0369a1 / #be123c (>=4.5:1), and every gradient CTA runs deep stops behind white (skyDeep #0369a1 / skyDeep2 #075985 / coralDeep #be123c) — raw pastels never carry white text. The only place pastels appear as text/fills is the dark-ink band, where contrast is fine. Exact tokens — cream #fdf9f3, sky #38bdf8 (decor), skyText/skyDeep #0369a1, skyDeep2 #075985, coral #fb7185 (decor), coralText/coralDeep #be123c, ink #1f2433 (headings/text), slate #5b6172 (muted body); plus confetti accents amber #fbbf24, emerald #34d399, violet #a78bfa (with #7c3aed / #f43f5e used as the violet/rose text+gradient tokens). Body base #eaf6fd; the hero .field = radial(120% 80% at 12% 0%, #e9f7ff) + radial(120% 90% at 90% 8%, #fdeef0) + linear(180deg, #eaf6fd -> #f3fbff -> #fdf9f3). Custom radii 4xl 2rem / 5xl 2.75rem (cards rounded-4xl/5xl, buttons rounded-full). Three shadow tokens: dialog '0 40px 90px -30px rgba(31,36,51,0.35), 0 18px 40px -24px rgba(56,189,248,0.35)', soft '0 18px 50px -24px rgba(31,36,51,0.30)', pill '0 14px 30px -10px rgba(56,189,248,0.55)'. A .glass nav utility = bg rgba(253,249,243,0.72) + backdrop saturate(160%) blur(14px). Motion: @keyframes pop on .badge-pop, @keyframes draw on .check-path, @keyframes ring on two .ring-pulse halos (one .delay), @keyframes fall on .confetti spans, @keyframes floaty on a gentle .float scatter. The page is a sticky top-0 z-50 glass nav over five max-w-6xl regions (celebration hero, pattern band, kit split, dark CTA band, footer) and reflows to a single column on mobile: the modal stays max-w-md centered, the pattern grid goes 3 -> 1, the kit split stacks and the coral offset card hides below lg, the CTA buttons stack, the nav center links + 'Sign in' hide below md/sm while 'Get the kit' persists, the H2 line break shows only sm+, and the footer goes column.