Gradient Band Sunset — Contact form (legibility fixed)

Summary

A warm, friendly contact page for a design-tool brand (LoopForm), built on a sunset gradient system with a deliberate legibility discipline: the bright saturated coral->amber sunset is reserved for ICON TILES ONLY (no text ever sits on it), while the header band and every white-text CTA use a deepened 'ember' register of the same warm family so white text clears WCAG 4.5:1 across every gradient stop. It opens with a slim sticky translucent cream nav (a sunset paper-plane logo tile + a 'Loop' / gradient-text 'Form' wordmark, Templates / Showcase / Pricing / Contact links and an ember 'Start free' pill), then a single contact section: a large rounded ember gradient HEADER BAND (a 'Get in touch' hand-wave pill, an extrabold white 'Let's design something worth shipping.' headline, a white intro line, and a huge faint chat-bubble watermark bleeding off the bottom-right), followed by a 12-column body split into a 7-col white FORM CARD (Name/Email row, a Topic select, a Message textarea, a 'keep me posted' coral-accent checkbox and an ember rounded-full 'Send message' pill) beside a 5-col QUICK-CONTACT rail of three white hover-lift chips each led by a bright sunset icon tile (Email us / Live chat / Studio) plus a 'Find us online' social-icon card. A slim hairline footer closes the page. The signature is the sunset-gradient warmth made accessible by splitting the gradient into a bright 'sunset' for icon tiles and a deep 'ember' for any surface that carries white text, on a cream canvas with a coral->amber accent and a Plus Jakarta Sans voice. The mood is warm, friendly, energetic, human and inviting.

Style

Warm sunset aesthetic on a cream canvas (cream #fff8f3) with deep warm-brown ink text (ink #2a1810) and a coral->amber accent family. The defining move is a TWO-REGISTER gradient discipline driven by legibility: (1) a BRIGHT '.grad-sunset' = linear-gradient(118deg, #ff5436 0%, #ff6b4a 30%, #ff8f3a 64%, #ffb020 100%), reserved for ICON TILES ONLY (small squares/circles that hold a white icon and carry no body text), so the saturated coral->amber never has to carry a text-contrast load; and (2) a DEEPENED '.grad-ember' = linear-gradient(118deg, #b8270a 0%, #ba3010 30%, #b04413 64%, #a4500c 100%), used for the big header band AND every white-text CTA, dropped into an ember register where WHITE text clears WCAG 4.5:1 across every stop (measured ~6.3:1 coral-ember start to ~5.6:1 amber-ember end). A third '.grad-text' = linear-gradient(100deg, #ff6b4a, #ff8f3a) is background-clipped to text for the 'Form' half of the wordmark only. Named Tailwind tokens: coral #ff6b4a, amber #ffb020, ink #2a1810, cream #fff8f3. Type is Plus Jakarta Sans (Google Fonts, weights 400/500/600/700/800 + italic 500) throughout: an extrabold (800) tracking-tight hero H1 at text-4xl->5xl with leading-[1.05], an extrabold logo wordmark, bold (700) card headers, semibold (600) CTAs and chip values, medium (500) nav links, and a recurring tiny uppercase micro-label motif (text-xs, font-semibold, wide tracking, ink/70) for field labels and chip kickers. Surfaces are soft and rounded with warm coral-tinted shadows: the header band is rounded-[28px] with a shadow-2xl shadow-coral/30, the form card is rounded-[24px] bg-white ring-1 ring-coral/10 with a shadow-xl shadow-coral/[0.06], the contact chips are rounded-2xl bg-white ring-1 ring-coral/10, inputs are rounded-xl on a cream/70 fill with a coral/15 border, and buttons + the 'Get in touch' pill are rounded-full. Form fields focus with a coral border + a 4px coral/14 focus ring and a white fill. The header band carries a subtle 'band-glow': a top white/10 sheen and a bottom-right deep-ember bloom (rgba(120,20,4,.42)) that DARKENS rather than lightens, so the glow only ever helps white-text legibility. Interactions are friendly and lifting: nav links + social icons tint coral on hover, the contact chips lift 3px with a coral glow shadow on hover, and the 'Send message' / 'Start free' ember pills lift 2px + brighten + cast a coral glow on hover. Mood: warm, friendly, energetic, sunny, human, inviting, never cold or corporate.

Layout & Structure

A full-bleed warm sunset one-screen contact page on a cream canvas (#fff8f3): a slim sticky translucent nav on top; a contact <section id='contact'> in a max-w-6xl container holding (1) a large rounded ember-gradient HEADER BAND (a 'Get in touch' hand-wave pill, an extrabold white 'Let's design something worth shipping.' headline, a white intro line, and a giant faint chat-bubble watermark bleeding off the bottom-right) above (2) a 12-column body split into a 7-col white FORM CARD beside a 5-col QUICK-CONTACT rail of three hover-lift icon-tile chips + a social-icon card; and a slim hairline footer. The defining structural moves are the big ember-gradient header band sitting ABOVE an asymmetric 7/5 form-plus-rail split, the legibility-driven gradient split (bright sunset on icon tiles only, deep ember on the band + white-text CTAs), the bright-sunset icon tiles fronting each contact chip, and the soft coral-tinted-shadow rounded surfaces throughout.

Sticky translucent nav

Ember-gradient header band

Form card (7 cols)

Quick-contact rail (5 cols)

Footer

Special Notes

Keep the warm sunset system AND its legibility discipline, which is the whole point of this variant: a cream canvas (cream #fff8f3) with deep warm-brown ink (#2a1810) and a coral #ff6b4a -> amber #ffb020 accent. Split the gradient into TWO registers by contrast role: a BRIGHT .grad-sunset = linear-gradient(118deg, #ff5436 0%, #ff6b4a 30%, #ff8f3a 64%, #ffb020 100%) used for ICON TILES ONLY (small squares/circles holding a white icon, never any body text), and a DEEPENED .grad-ember = linear-gradient(118deg, #b8270a 0%, #ba3010 30%, #b04413 64%, #a4500c 100%) used for the big header band AND every white-text CTA, so white text clears WCAG 4.5:1 across every stop (~6.3:1 -> ~5.6:1). A third .grad-text = linear-gradient(100deg, #ff6b4a, #ff8f3a) is background-clipped to text for one word of the wordmark only. Type is Plus Jakarta Sans (Google Fonts, weights 400/500/600/700/800 + italic 500): an extrabold (800) tracking-tight hero H1 at text-4xl->5xl leading-[1.05], an extrabold logo wordmark, bold (700) card headers, semibold (600) CTAs/chip values, medium (500) nav links, and a recurring tiny uppercase micro-label (text-xs, font-semibold, wide tracking, ink/70) for field labels + chip kickers. The structure is a slim sticky translucent cream nav (a grad-sunset paper-plane logo tile + a 'Loop'/grad-text 'Form' wordmark, Templates/Showcase/Pricing/Contact links + an ember 'Start free' pill) over a single contact section: a large grad-ember rounded-[28px] HEADER BAND (a darkened bg-ink/[0.22] 'Get in touch' hand-wave pill, an extrabold white 'Let's design something worth shipping.' H1, a pure-white intro, and a giant faint ph:chat-circle-dots-fill watermark bleeding off the bottom-right) ABOVE a grid lg:grid-cols-12 body: a lg:col-span-7 white rounded-[24px] FORM CARD (a Name/Email row, a Topic select + ph:caret-down-bold, a Message textarea, a coral-accent opt-in checkbox + an ember rounded-full 'Send message' pill; all '.field' inputs rounded-xl on cream/70 with a coral/15 border that turns coral + adds a 4px coral/14 ring + a white fill on focus) beside a lg:col-span-5 QUICK-CONTACT rail (three hover-lift white rounded-2xl chips each fronted by a grad-sunset icon tile: Email us / Live chat / Studio, + a 'Find us online' social-icon card: ph:x-logo-bold / ph:dribbble-logo-bold / ph:github-logo-bold / ph:linkedin-logo-bold). Close with a slim border-coral/10 footer ('c 2026 LoopForm. Designed in the open.' + a 'Made with [coral ph:heart-fill] for designers.' line). Give the header band the 'band-glow' (a top white/.10 sheen + a bottom-right deep-ember rgba(120,20,4,.42) bloom that DARKENS, never lightens), warm coral-tinted shadows on every surface (shadow-coral/30 band, shadow-coral/[0.06] form card, coral glow shadows on hover), rounded-[28px]/[24px]/2xl/xl/full radii, and a translucent blurred sticky nav. Everything must reflow cleanly: the 12-col body collapses to one column below lg (the form stacks over the rail), the Name/Email row goes single-column below sm, the form footer (checkbox + send) stacks below sm with a full-width button, the nav center links hide below md, the footer stacks centered on mobile, and there is no horizontal overflow at 390px. Copy is warm, friendly and human with zero em-dashes ('Let's design something worth shipping.', 'a friendly human who actually replies.', 'Coffee's on us if you're nearby.'). Use Iconify Phosphor icons (ph:paper-plane-tilt-fill, ph:hand-waving-fill, ph:chat-circle-dots-fill, ph:caret-down-bold, ph:envelope-simple-fill, ph:chats-circle-fill, ph:map-pin-fill, ph:x-logo-bold, ph:dribbble-logo-bold, ph:github-logo-bold, ph:linkedin-logo-bold, ph:heart-fill).