Palette — illustrated pastel hero (mobile clip fixed)

Summary

A warm, hand-drawn illustrated pastel hero section for an AI design product (placeholder brand 'Palette'). Cream paper ground (#fdf9f3) with a friendly sky-blue (#38bdf8) + coral (#fb7185) accent duo and near-black ink (#26222e) text in Poppins. Top-down: a full-bleed ink announcement strip, a sticky blurred cream nav with a rounded logo badge, then a 2-column hero: LEFT a coral uppercase eyebrow pill, a big extrabold headline with a hand-drawn coral squiggle underline on the phrase 'one prompt', a slate sub-paragraph, a sky-pill primary CTA + white outline 'watch demo' CTA, and an avatar-stack social-proof row; RIGHT a playful illustration zone — a big sky-blue gradient circle behind a slowly-rotating dashed ring, a tilted hand-drawn 'mock screen' card, and four floating glass/white info pills (prompt chip, components count, 'design ready' badge, 'copy as React' dark chip) with gentle floaty animations and little sparkle accents. Soft blurred background blobs in sky + coral. The whole thing reads cheerful, approachable and craft-y, not corporate.

Style

Warm illustrated pastel / hand-drawn friendly SaaS aesthetic. Cream paper base (#fdf9f3) instead of white, with a two-accent system: sky blue (#38bdf8) as the primary action color and coral/pink (#fb7185, deep variant #b21748 for text-on-pale) as the playful spark. All text is near-black ink (#26222e) with a soft slate (#6b6477) for secondary copy. Type is Poppins throughout (400-800), rounded and friendly, with very tight tracking on the big extrabold headline. Generous rounding everywhere: pill buttons (rounded-full), 2xl/3xl cards, a custom 'huge' 2.5rem radius. Soft layered shadows (soft-shadow 0 18px 40px -18px rgba(38,34,46,0.22), card-shadow 0 14px 30px -12px rgba(38,34,46,0.20)) give a gentle lifted feel. Hand-drawn craft signals: an SVG squiggle underline under the headline accent phrase, a tilted (rotate -2deg) ink-outlined 'mock screen' card with traffic-light dots, a slowly rotating dashed ring, floating white info pills, and ph:sparkle/ph:star accents. Subtle motion: 5-7s ease-in-out floaty translateY loops on the pills/illustration and a 26s linear spin on the dashed ring, all disabled under prefers-reduced-motion. Large blurred sky/coral radial blobs sit behind the hero at low opacity. Mood: friendly, approachable, optimistic, crafted by hand, never cold or enterprise-grey.

Layout & Structure

A single hero screen, content centered in a max-w-[1180px] container with px-6 gutters. Top-down: (1) a full-bleed ink announcement strip (centered) with a small coral sparkle badge, an announcement line and a sky 'Browse the library' link; (2) a sticky (top-0, z-50) full-bleed nav bar with a blurred cream/85 background and a hairline bottom border — left = rounded sky logo badge (ph:palette-fill) with a tiny coral notification dot + 'Palette' wordmark, center = 4 nav links (shown only at lg) in slate, right = a 'Log in' text link (sm+) and a sky pill CTA 'Start designing'; (3) the hero as a 2-column grid (lg:grid-cols-[1.05fr_1fr], gap-12/10) — LEFT a coral uppercase eyebrow pill, the extrabold H1 with a hand-drawn squiggle underline on 'one prompt', a slate sub-paragraph, a CTA row (sky primary pill + white outline 'watch the 60s demo'), and a social-proof row (overlapping avatar circles + '9k+' chip + a 'Loved by 9,000+ builders' line); RIGHT a fixed-height illustration zone holding a big sky-gradient circle, a rotating dashed ring, a tilted ink-outlined mock-screen card, and four absolutely-positioned floating info pills plus sparkle/star accents. Responsive: nav center links appear only at lg; the 'Log in' link and some inline copy hide on small screens; the 2-col hero stacks to a single column below lg; the illustration zone scales its height (440px -> 500px -> 540px) and the floating pills reposition (sm: offsets) so they stay inside the frame; the original mobile clip was fixed by giving the illustration column horizontal padding + a max-width and nudging the pill offsets so nothing overflows the viewport on phones.

Announcement strip

Sticky nav

Hero copy (left column)

Illustration zone (right column)

Special Notes

Font loaded from Google Fonts: Poppins (400/500/600/700/800) used for all text. Styled with Tailwind via CDN using a custom theme palette (cream #fdf9f3, sky #38bdf8, coral #fb7185, coralink #b21748, ink #26222e, slate #6b6477) plus a custom borderRadius 'huge' 2.5rem. Icons via the Iconify web component (ph:* / Phosphor set). The page background is cream (#fdf9f3), never pure white. Custom CSS defines soft-shadow / card-shadow and the floaty / floaty-slow / spin-slow keyframes, all disabled under prefers-reduced-motion. This is the mobile-clip-fixed revision: the illustration column carries horizontal padding + a max-width and the floating pill offsets are nudged (sm: overrides) so nothing overflows the viewport on small screens; the whole hero stacks to a single column below lg and the nav center links + 'Log in' appear only at larger breakpoints. Keep sky as the primary workhorse accent and coral as the playful spark used sparingly; the mood must stay warm, hand-drawn and friendly, never cold, white or enterprise-grey.