Design at the Speed of Thought — Sunset Centered Hero
A warm golden-hour centered hero: a soft cream-to-peach sunset gradient field, an oversized two-line headline with a coral-to-amber gradient accent line, and a single frosted glass pill that combines an envelope icon, an email field and a gradient sign-up button, over a sticky frosted nav, avatar social proof and a trusted-by logo strip.
Summary
A warm, sunset-gradient centered hero for a design/SaaS product. Everything is stacked and center-aligned on a soft cream-to-peach radial 'sunrise' wash: a sticky frosted nav with a gradient sun-logo mark, a small glassy 'New / v2 canvas is live' pill badge, an oversized 'Design at the / speed of thought.' headline whose second line is filled with a coral->amber sunset gradient, a calm sub-paragraph, a single rounded glass 'email-shell' that puts an envelope icon + email input + a gradient 'Start designing' button on one pill, an avatar-stack social-proof row ('12,400+ designers shipping with Lumen'), a tiny reassurance line, and a centered uppercase 'trusted by' logo strip of five icon+wordmark lockups. Faint floating coral/amber blur orbs and very subtle conic sun-ray streaks add depth low in the hero.
Style
Optimistic 'golden hour' aesthetic: a warm sunrise gradient field, near-black ink type, and a single coral->amber sunset gradient that carries the brand (logo, the headline's accent line, every primary button, the badge chip, the avatar fills). The page sits on cream #fff8f2 with a layered sunset backdrop: a warm linear wash from #fffaf5 -> #fff4ea -> #ffead9 plus two radial 'sun' glows low-center (amber #ffb020 at 50% alpha, coral #ff6b4a at 40% alpha) so light appears to rise from the bottom. Surfaces are soft frosted glass (white at 70-78% with backdrop-blur) rather than hard cards, with warm orange-tinted borders and peach-brown ambient shadows. Mood is friendly, airy and premium: generous whitespace, big confident type, gentle floaty motion, no hard edges or harsh contrast. The accent gradient is the only saturated color; everything else is ink #231712 at varying opacity.
Layout & Structure
A single frameless, fully responsive web hero, center-aligned throughout. Vertical flow: a sticky frosted top nav (logo left, center links, sign-in + gradient 'Start free' right) -> a full-bleed 'sunset' hero whose content lives in a narrow centered max-w-3xl column: a glass pill badge, an oversized two-line centered headline (second line gradient-filled), a max-w-xl sub-paragraph, a single rounded glass 'email-shell' (envelope icon + email input + gradient submit button on one pill, max-w-md), an avatar-stack + count social-proof row, a tiny reassurance line, and a centered uppercase 'trusted by' logo strip. Two floating blur orbs sit absolutely behind the column for depth. Responsive: the nav center links and 'Sign in' hide below md/sm; the headline clamps from text-5xl -> text-6xl -> ~5.25rem and its forced line break only shows on sm+; the email-shell stays a single horizontal pill; the social-proof row stacks vertically on mobile then goes inline on sm+; the logo strip wraps and stays centered.
Sticky frosted nav
Hero container + backdrop
Pill badge
Oversized headline
Subhead
Inline email-capture pill (email-shell)
Social proof + reassurance
Trusted-by logo strip
Components
Sunset gradient backdrop
The warm 'golden hour' light field behind the whole hero, with light appearing to rise from the lower-center plus faint sun-ray streaks.
Sunset gradient (text + button)
The single brand accent, used two ways: clipped to text for the headline accent, and as a fill for every primary button / chip / logo mark.
Frosted glass email-shell
The single rounded glass pill that combines an icon, the email field and the submit button into one inline capture control.
Floating depth orbs
Soft out-of-focus coral/amber color orbs that drift slowly low in the hero for warmth and depth.
Special Notes
Frameless, fully responsive web hero (not a fixed artboard); light/warm color-scheme only. Built with Tailwind (CDN) + a small custom-CSS layer for the sunset/rays backdrops, the text-sunset / btn-sunset gradients, the frosted email-shell, the nav-blur bar and the floaty orb animation. Tailwind theme extends named colors coral #ff6b4a, amber #ffb020, ink #231712, cream #fff8f2 and sets the sans font to 'Plus Jakarta Sans'. Typography is 'Plus Jakarta Sans' only (Google Fonts, weights 400-800); icons are Iconify Phosphor (ph:*). No JS — the form is onsubmit:return false and all states are CSS (hover, focus-within). Key responsive behavior: nav center links + 'Sign in' hide below md/sm; the headline's forced <br> only shows on sm+ and its size clamps 5xl->6xl->5.25rem; the social-proof row stacks then goes inline at sm; the logo strip wraps centered. To rebrand, keep the centered-stack layout + frosted email-shell + single-gradient-accent system and swap the sunset palette (coral #ff6b4a / amber #ffb020 ramp, cream #fff8f2 field, ink #231712 text) for another two-stop gradient.