Bloomly — Illustrated friendly-sky split signup

Summary

A warm, illustrated split-screen signup for a friendly AI design-canvas product ('Bloomly'). The page is a soft sky-blue ground with a single big white rounded card split in two: on the left, a deep sky-gradient illustration panel with a tilted miniature 'design canvas' card (a tiny prompt bar feeding a magic-wand mockup), floating reaction/stat chips, an overlapping avatar stack and a friendly closing line; on the right, the create-account form (first/last name row, email with a live valid check, password with a show toggle and a 4-segment strength meter, a pre-checked terms checkbox, a big gradient CTA, a Google/GitHub social-auth row and an encryption reassurance line). A sticky translucent nav with a lotus-gradient logo sits on top, and a logo trust strip closes the page. The mood is playful, rounded and reassuring: chunky Nunito type, sky + coral accents, soft blobs and gentle floating motion.

Style

Friendly, rounded, illustrated SaaS aesthetic on a soft sky ground (#f4f9ff) with slate text (#1e293b). The accent system is a sky brand blue #38bdf8 paired with a coral/rose #fb7185; the primary CTA is a deeper sky gradient (135deg #0369a1 -> #075985) and the illustration panel is a rich sky gradient (br #0ea5e9 -> #0284c7 -> #075985) with a contrast scrim so white copy clears 4.5:1. Type is Nunito (weights 400-900); headings are font-900 with tight tracking (the form H1 ~34-38px, leading ~1.1), labels are font-800, body is font-600. Everything is heavily rounded: a 2.5rem (rounded-5xl) outer card, 2rem (rounded-4xl) illustration panel, rounded-2xl inputs/buttons, rounded-full pills/avatars. Depth is soft and colored: a big sky-tinted card shadow (0 40px 90px -30px rgba(56,189,248,.4)) with a sky-100 ring, a deep sky CTA shadow (0 14px 30px -10px rgba(3,105,161,.55) lifting on hover), and white floating chips with xl shadows. Texture/motion: three blurred sky/coral background blobs and a faint radial dot grid on the panel, with gentle 'floaty' translate-y keyframe animation on the blobs, chips, canvas card and stars. Inputs are slate-50 with a 2px slate-200 border that turns sky on focus (4px sky/18 ring + white fill). Icons are Iconify Phosphor (plus brand logos). Mood: warm, playful, human, soft and trustworthy.

Layout & Structure

A one-screen signup: a slim sticky translucent nav on top, a hero/signup main holding a single big white card split into a left illustration panel and a right form column, and a logo trust strip footer. On desktop the card is a 2-column grid (lg:grid-cols-2); on mobile it stacks (illustration above form). The background carries soft floating blobs behind everything. The defining structural moves are the split illustrated-panel + form card, the tilted miniature 'design canvas' illustration with floating chips and an avatar stack, and the rich-gradient panel with a contrast scrim.

Sticky translucent nav

Hero background blobs

Outer split card

Illustration panel (left)

Centerpiece illustration (tilted canvas + chips + avatars)

Form header (right)

Signup form fields

Social auth + reassurance

Logo trust strip (footer)

Special Notes

Keep the two-color friendly system: a soft sky #f4f9ff ground with slate #1e293b text, a sky brand blue #38bdf8 and a coral/rose #fb7185 as the only accents; the primary CTA and the illustration panel use the deeper sky gradients (#0369a1 -> #075985 for the button, #0ea5e9 -> #0284c7 -> #075985 for the panel). Use Nunito throughout (weights 400-900): headings are font-900 and tight-tracked (the form H1 ~34-38px, leading ~1.1), labels font-800, body font-600. Round everything heavily: a 2.5rem outer card, a 2rem illustration panel, rounded-2xl inputs/buttons, rounded-full pills/avatars. Depth is soft and colored: the big sky-tinted card shadow + sky-100 ring, the deep sky CTA shadow, white xl-shadow floating chips. The signature is the SPLIT signup card, a left illustrated gradient panel (a tilted miniature 'design canvas' card with a tiny prompt bar feeding a magic-wand mockup, floating 'Loved it!' / '2,000+ prompts' chips and an overlapping avatar stack with a '+12k' count) beside a right create-account form (first/last name row, an email with a live emerald valid-check, a password with a show toggle + a 4-segment strength meter, a pre-checked terms checkbox, the gradient CTA, a Google/GitHub social row and an encryption reassurance line). On the gradient panel, always layer a top+bottom dark scrim under white copy so it clears 4.5:1, plus the faint white radial dot grid. Inputs are slate-50 with a 2px slate-200 border that turns sky on focus (4px sky/18 ring + white fill). Add gentle motion: three blurred background blobs and the canvas card/chips/avatars/stars float on slow 'floaty' translate-y loops. Top it with a sticky translucent (#f4f9ff/85 + backdrop-blur) nav (a sky->coral lotus-gradient logo tile, four coral-underline nav links, a 'Log in' link + a slate-900 rounded-full 'Get started' pill) and close with a logo trust strip (Figma/Framer/pen-nib/palette Phosphor glyphs). Everything must reflow cleanly: the card stacks (illustration above form) below lg, the name grid and social row stay 2-col, the nav center links hide below md and 'Log in' below sm, the trust strip stacks, no horizontal overflow at 390px. Copy is warm, playful and human with zero em-dashes.