Drafted — Ship beautiful UI from a single prompt (split product, emerald)

Summary

A clean, light split-screen SaaS hero for an AI product-design agent. White ground with a soft emerald wash and a faint dotted grid; Inter throughout. Left column carries a 'NEW' eyebrow pill, a big two-line headline with one emerald accent word, a sub-paragraph, a dual CTA (solid emerald primary + white 'watch demo' secondary) and an avatar + 5-star social-proof line. Right column shows a floating product mock: a rounded app window with a top bar, a left tool rail, an infinite-canvas center holding a generated fintech dashboard inside an emerald selection bounding-box, a right Layers/Style panel and a bottom AI prompt bar; plus a floating 'Design ready' notification chip and a small floating phone mock. A thin 'Trusted by teams at' logo strip closes the section.

Style

Light, modern product-marketing SaaS aesthetic with a single emerald accent. Pure white page (#ffffff) and near-black ink text (#0b1220), layered slate greys for secondary/tertiary copy (#334155, #64748b, #94a3b8) and hairline borders (#e2e8f0). One brand color: an emerald ramp (50 #ecfdf5 -> 500 #10b981 -> 600 #059669 -> 700 #047857 -> 800 #065f46 -> 900 #064e3b); emerald-700 for solid buttons, emerald-600 for the accent headline word, emerald-500 for logo/icon chips, and emerald-50/100 tints for soft fills. The hero sits on a 'hero wash' = two emerald radial gradients (top-right and upper-left) over a vertical white->mint->white linear gradient, plus a very faint 22px dotted/line grid radially masked into the upper-right field. Inter (400-900) for everything, tight -0.025em tracking on the display headline, tabular-nums on numbers. Soft, layered shadows: a subtle card shadow, a large soft 'float' shadow for the product window and floating chips, a small chip shadow, and an emerald-tinted glow under primary buttons. Frosted glass (backdrop-blur) on the sticky nav and small glass panels. Generous spacing, rounded corners (lg/xl/2xl), emerald text selection (#a7f3d0 on #064e3b). Calm, trustworthy, premium-but-approachable; never dark, never neon.

Layout & Structure

A sticky frosted nav above a two-column split hero, closed by a logo strip, all centered in a max-w-[1180px] container with px-5/px-7 gutters. The hero is a 12-col grid (lg): left 5 cols = copy stack (eyebrow pill -> headline -> sub -> dual CTA -> avatar + stars + social-proof line), right 7 cols = a floating product-app mock (rounded window with top bar / left tool rail / canvas with a generated dashboard inside an emerald selection box / right Layers+Style panel / bottom prompt bar) overlaid by a 'Design ready' notification chip (top-right) and a small phone mock (bottom-left). Below the grid, a centered divider + 'Trusted by teams at' logo row. Responsive: nav links hide below lg (hamburger appears), the split collapses to one column (copy then mock) below lg, the floating phone hides below sm, the mock's left rail and right panel hide below sm so the canvas spans full width, and CTAs stack vertically below sm.

Sticky nav

Hero left (copy)

Hero right (product mock)

Floating accents

Logo strip

Special Notes

Font loaded from Google Fonts: Inter (400/500/600/700/800/900) used for everything. Styled with Tailwind via CDN using a custom theme: colors ink #0b1220, slate2 #334155, slate3 #64748b, slate4 #94a3b8, line #e2e8f0 and a full emerald ramp (50 #ecfdf5 / 100 #d1fae5 / 200 #a7f3d0 / 300 #6ee7b7 / 400 #34d399 / 500 #10b981 / 600 #059669 / 700 #047857 / 800 #065f46 / 900 #064e3b); custom boxShadow tokens card / float / chip / btn. Icons via the iconify-icon web component (lucide:* set). html has scroll-behavior:smooth and ::selection is emerald (#a7f3d0 on #064e3b). Keep a single emerald accent on a light white ground; layout is a sticky-nav + 12-col split hero (copy left, product mock right) closed by a logo strip, collapsing to one column below lg with the floating phone and side panels hidden on small screens. Never go dark, multi-color or neon.