Create your account · Promptly — split-image emerald sign-up
A two-column desktop sign-up page: focused email + Google/GitHub social form on a bright white left half, dark emerald 'brand-mesh' panel with a floating product mock and testimonial on the right; sticky translucent nav, Inter, slate neutrals with a single emerald accent.
Summary
A two-column desktop sign-up page on a white canvas: a focused email/social account-creation form on the left (split into Google/GitHub social buttons, a divider, name/email/password fields with leading icons, a live password-strength meter, a terms checkbox and a full-width emerald CTA) and a dark emerald 'brand-mesh' panel on the right showing a floating product mock and a starred testimonial. A sticky translucent top nav with a gradient logo mark runs full-width above the split. Layout reflows to a single column (form only) below the lg breakpoint.
Style
Clean, modern SaaS aesthetic in the Inter typeface, built on a slate neutral scale with a single emerald accent. The left form half is bright white with soft slate-50 input fills; the right half is a dark navy-to-near-black radial 'mesh' with emerald glow blooms and a faint 56px grid masked by a radial fade. Generous rounding (rounded-xl / 2xl), soft layered shadows tinted emerald, and micro-interactions (lift-on-hover CTA, focus ring, floating card, pulsing 'generating' dot).
Layout & Structure
A full-height page = sticky 64px (h-16) nav + a CSS grid main that is one column on mobile and two columns at lg (grid-cols-[1fr_1.04fr], the brand panel slightly wider). Left = vertically + horizontally centered form column capped at max-w-[420px]; right = a dark aside that only shows at lg and arranges its content top (brand chip) / middle (floating mock) / bottom (testimonial) via flex justify-between with p-12 to p-16 padding.
Sticky top nav
Left form column
Social sign-up + divider
Form fields
Password strength meter
Terms + CTA + footer
Right brand panel
Floating product-mock card
Testimonial block
Special Notes
Single-accent system: emerald is the only chromatic color, everything else is the slate neutral scale, so the accent always reads as the action. The dark right panel is purely decorative social proof (hidden < lg) and the form alone must stand on its own when it collapses. Inter is loaded from Google Fonts with cv11/ss01 stylistic sets enabled. All emerald and slate hex values are exact and should be preserved. No em-dashes in any copy; the 'Prompt → UI' arrow and CTA arrows use icon glyphs, not text dashes.