Talk to Superdesign — Contact (split-info-emerald)

Summary

A warm, full-bleed contact page for an AI product-design tool (Superdesign), built on the classic split contact card: one big white rounded card divided into a left create-a-message form and a right dark 'Contact info' panel. The page opens with a sticky translucent nav and a centered eyebrow + headline ('Let's design something worth shipping.'), then the split card: the LEFT form is name/email, a 'What can we help with?' select, a message textarea and a full-width emerald 'Send message' button with a reassurance line; the RIGHT panel is a near-black emerald-ink surface with gradient corner accents, a faint grid, email/phone/studio rows in icon tiles, a live 'Online now' availability pill and a social-chip row. A wrap-up trust strip (same-day replies, 57k builders, 12 languages) and a slim footer close the page. The mood is fresh and reassuring: an emerald-on-white system, Inter type, soft layered shadows and ambient emerald blobs.

Style

Fresh, modern SaaS contact aesthetic on a white page with an emerald-50 (#ecfdf5) hero ground and near-black emerald-ink text (ink #0c1512). The single accent family is a full emerald ramp (#ecfdf5 50 / #d1fae5 100 / #a7f3d0 200 / #6ee7b7 300 / #34d399 400 / #10b981 500 / #059669 600 / #047857 700 / #065f46 800 / #064e3b 900) plus a slate scale for body text/borders (slate-400 #94a3b8..slate-600). The dark info panel uses an ink scale (ink-900 #0c1512 / ink-850 #111c18 / ink-800 #16241f / ink-700 #1f322b). Type is Inter (weights 400-900): the hero H1 is font-extrabold (800) ~34-42px with tight tracking and leading ~1.1, section headings font-extrabold ~24-30px, labels font-semibold 13px, body slate-500 ~15-16px. Radii are generous: a 24-28px (rounded-[24px]/[28px]) outer card, rounded-xl (12px) inputs/buttons/icon-tiles, rounded-full pills/eyebrow/social-chips. Depth is soft and layered: a 'card' shadow (0 40px 80px -32px rgba(15,53,41,.30), 0 12px 32px -16px rgba(15,53,41,.18)) with a 1px emerald-100 ring on the card, a 'panel' shadow and a 'btn' shadow (0 14px 28px -10px rgba(16,185,129,.55)) on the emerald CTA. Texture: a '.grain' layer of two faint emerald radial glows behind the hero, two large blurred emerald ambient blobs, and on the dark panel a faint 34px white grid, two gradient mesh corners (mesh-corner radial 120% 120% at 0% 0% #34d399 -> #10b981 38% -> #047857; mesh-corner-soft #6ee7b7 -> #10b981 45% -> #065f46) and a br vignette. Inputs are slate-50/70 fills with a 1px slate-200 border that on focus turns emerald #10b981 with a 4px rgba(16,185,129,.12) ring and a white fill. Micro-interactions: an animate-ping 'Online now' status dot, social chips that lift and turn emerald on hover, nav links with a grow-on-hover emerald underline, and a CTA paper-plane that nudges right on hover. Icons are Iconify Phosphor (ph:*). Mood: warm, fresh, human, reassuring, premium-but-friendly.

Layout & Structure

A full-bleed one-screen contact page: a slim sticky translucent nav on top, a hero/contact main with a centered eyebrow + headline + sub-line over an emerald-50 ground, the split contact card (a 1.05fr/0.95fr grid on desktop that stacks on mobile), a centered trust strip, and a slim footer. The background carries a faint grain layer and two blurred emerald blobs. The defining structural moves are the split form + dark-info card, the gradient mesh corners + faint grid on the info panel, and the icon-tile contact rows with a live availability pill.

Sticky translucent nav

Hero ground + eyebrow + headline

Split contact card shell

Left: message form

Right: dark info panel

Contact rows + availability pill

Socials row

Trust strip + footer

Special Notes

Keep the single-accent emerald-on-white system: a white page with an emerald-50 (#ecfdf5) hero ground, near-black emerald-ink text (ink-900 #0c1512), the full emerald ramp (#10b981 brand, #047857 CTA, #34d399/#6ee7b7 accents) and a slate scale for body/borders; no second hue. The dark info panel uses an ink scale (ink-900 #0c1512 / ink-850 #111c18 / ink-800 #16241f / ink-700 #1f322b). Use Inter throughout (weights 400-900): the hero H1 is font-extrabold ~34-42px tight-tracked leading ~1.1, section headings font-extrabold ~24-30px, labels font-semibold 13px, body slate-500 ~15-16px. Radii are generous: a 24-28px outer card, rounded-xl inputs/buttons/icon-tiles, rounded-full pills/eyebrow/social-chips. Depth is soft and layered: the card shadow (0 40px 80px -32px rgba(15,53,41,.30) + 0 12px 32px -16px rgba(15,53,41,.18)) + an emerald-100 ring, a panel shadow, and a btn shadow (0 14px 28px -10px rgba(16,185,129,.55)) on the emerald CTA. The signature is the SPLIT contact card: a left create-a-message form (name/email row, a 'What can we help with?' select, a message textarea, the emerald 'Send message' CTA and a reassurance line) beside a right near-black info panel (gradient mesh corners #34d399->#047857 top-right and #6ee7b7->#065f46 bottom-left, a faint 34px white grid + a br vignette, three icon-tile contact rows for email/phone/studio, a live animate-ping 'Online now' availability pill and a social-chip row). Inputs are slate-50/70 with a 1px slate-200 border that turns emerald on focus (4px emerald/12 ring + white fill). Add ambient texture: a '.grain' layer of two emerald radial glows plus two large blurred emerald blobs behind the hero. Micro-interactions: an animate-ping status dot, social chips that lift and turn emerald on hover, grow-on-hover emerald nav underlines, a paper-plane CTA icon that nudges on hover. Top it with a sticky translucent (white/85 + backdrop-blur) nav (an emerald-500 ph:sparkle-fill logo tile + a 'Superdesign' wordmark, Library/Canvas/Pricing/Contact links with 'Contact' active in emerald-700, a 'Sign in' link + an ink-900 rounded-full 'Start designing' pill) and close with a wrap-up trust strip (same-day replies / 57k builders / 12 languages) and a slim footer. Everything must reflow cleanly: the card stacks (dark panel above form) below lg, the name/email grid stays 2-col on sm+, the nav center links hide below md and 'Sign in' below sm, the trust strip wraps, no horizontal overflow at 390px. Copy is warm, human and reassuring with zero em-dashes. Use Iconify Phosphor icons (ph:*).