Dual-CTA card (pastel) — contrast fixes applied

Summary

A soft pastel SaaS landing page whose star is a centered dual-CTA card on a cream field. It reads as a real page top to bottom: a glass blurred sticky nav (a sky-to-coral gradient sparkle logo tile + 'Lumina' wordmark, four muted links, a dark-ink 'Start free' pill), a centered intro strip on a tinted mesh+grain background (a frosted star-four pill eyebrow, a huge Poppins 800 headline 'From a sentence to a shippable UI' with a sky-to-coral gradient-clipped phrase, and a muted subhead), then the anchor: a big white rounded-5xl card (rounded 2.75rem) floating on cream with a soft sky/coral two-tone drop shadow, a 1px white border, a hairline ring, two inner blurred glows (sky top-left, coral bottom-right), and small floating decor squares around it. Inside the card, centered: an overlapping avatar proof row with a +9k chip and 'builders shipping with Lumina', a Poppins 800 headline 'Build your first design this afternoon' (gradient-clipped phrase), a muted subhead, a dual button row (a sky-gradient primary pill 'Start free' with lightning + arrow icons beside a white coral-outlined secondary 'Book a demo'), and a three-item check-circle reassurance row. A tiny footnote sits under the card, and the page closes on a cream mini footer (gradient logo, copyright, three social icons).

Style

A warm, friendly, pastel-soft SaaS aesthetic where a cream paper field, frosted glass, and a sky-blue + coral-pink two-tone gradient do the work instead of hard color blocks. The palette is light and airy: a cream page #fdf9f3, a near-charcoal ink #27303f for text, a muted gray #6b7280 for body, and a two-accent gradient that pairs sky blue (sky #38bdf8, with shades 600 #0ea5e9, 700 #0284c7, 800 #075985, 900 #0c4a6e) with coral pink (coral #fb7185, with shades 600 #f43f5e, 700 #be123c, 800 #9f1239). The two accents appear together as gradients: the gradient-text headline phrase (linear 100deg #075985 to #0284c7 to #be123c), the sky-to-coral logo tile, and the sky-gradient primary button, while the secondary button uses coral outline. Hierarchy comes from soft shadow + glow depth and ink-opacity steps rather than many flat hues. One font does everything: Poppins (400-800), rounded and friendly, with the display headlines at 800 and tight tracking. The look is textured and soft: a faint dot grain overlay, a tri-radial pastel mesh tint behind the intro, generous border-radius (a 4xl 2rem and 5xl 2.75rem), big diffuse two-tone card shadows (sky + coral), inner blurred glows, frosted glass pills and nav, and small floating decor squares that gently bob. Buttons feel pillowy and physical: the sky-gradient primary and coral-outline secondary both lift 0.5 on hover with colored glow shadows. The mood is inviting and human, an infinite-canvas design tool selling 'a sentence to shippable UI', reassuring and playful rather than loud.

Layout & Structure

A real framed landing page read as a soft vertical stack: a glass sticky nav, a centered intro strip on a pastel mesh+grain tint (so the CTA has context above it), then the anchor centered dual-CTA card floating on cream with floating decor around it, a tiny footnote under the card, and a cream mini footer. Centered content lives in mx-auto max-w-7xl px-6 lg:px-8 for the nav/intro/footer, while the card section narrows to max-w-5xl px-6 and the card's inner copy to max-w-2xl / max-w-lg. It reflows cleanly to one column on mobile: the nav center links and 'Sign in' hide (logo + 'Start free' remain), the floating decor squares hide on small screens (lg:block only), the dual buttons stack full-width (flex-col items-stretch -> sm:flex-row), the reassurance row wraps, and the footer goes column.

Glass sticky nav

Centered intro strip (mesh + grain)

THE STAR: dual-CTA card section + floating decor

Proof avatar row + payoff headline + subhead

Dual button row (two paths)

Reassurance check row + footnote

Cream mini footer

Special Notes

Palette is cream + ink + a sky/coral two-tone gradient: cream #fdf9f3 (page), ink #27303f (headings), muted #6b7280 (body/subheads), and the paired accents sky #38bdf8 (shades 600 #0ea5e9, 700 #0284c7, 800 #075985, 900 #0c4a6e) and coral #fb7185 (shades 600 #f43f5e, 700 #be123c, 800 #9f1239). The two accents are always used TOGETHER as gradients/glows, never as flat color blocks: the .gradient-text headline phrase is linear-gradient(100deg, #075985 0%, #0284c7 42%, #be123c 100%); the logo tile and footer mark are bg-gradient-to-br from-sky to-coral; the primary button is bg-gradient-to-b from-sky-800 to-sky-900; the card's signature shadow is two-tone (sky #38bdf8 at 0.30 + coral #fb7185 at 0.18). One Google font: Poppins (weights 400;500;600;700;800) for everything, headlines at font-800 + tracking-tight (hero 40/52px leading-1.05; card h2 34/46px leading-1.08), body at 17px text-muted. Icons are Iconify Phosphor: ph:sparkle-fill (logo), ph:star-four-fill (eyebrow), ph:lightning-fill + ph:arrow-right-bold (primary button), ph:calendar-check-fill (secondary), ph:check-circle-fill (reassurance row), ph:x-logo / ph:github-logo / ph:discord-logo (footer). Custom utilities carry the soft look: .grain (dot texture), .mesh (tri-radial pastel tint), .gradient-text (clipped headline gradient), .nav-blur (frosted nav), .ring-soft (1px hairline shadow), and @keyframes float with .float-slow (7s) / .float-slower (9s); custom radii rounded-4xl (2rem) / rounded-5xl (2.75rem); custom shadows shadow-card / shadow-card-sm / shadow-btn / shadow-btn-coral / shadow-chip. The signature language is a centered dual-CTA card floating on a cream field with a soft two-tone shadow, inner sky/coral glows, and bobbing decor squares, above it a mesh+grain-tinted intro strip, all in friendly rounded Poppins with one gradient-clipped headline phrase. To transfer the STYLE: keep cream + ink + the sky/coral two-tone gradient (used only as gradients/glows, never flat blocks), the single rounded Poppins font, the big soft two-tone card shadow + inner glows, the frosted glass nav/chips, the dot grain + pastel mesh texture, and the playful floating decor. To transfer the LAYOUT: keep the framed stack (glass sticky nav -> mesh+grain intro strip with frosted eyebrow + huge headline + subhead -> centered white rounded-5xl dual-CTA card: avatar proof row -> payoff headline -> subhead -> sky-gradient primary + coral-outline secondary dual buttons -> check reassurance row -> footnote under the card -> cream mini footer). All copy avoids em-dashes.