Solflare — Sunset Gradient Warm (SaaS Website Design Prompt)
A warm sunset-gradient SaaS marketing landing page on a cream canvas: coral-to-amber accents, a sticky blurred nav, a gradient hero with a faux infinite-canvas product mock, a 6-card feature grid, template showcase, a dark stats band, testimonial, and a burnt-orange CTA, all in Plus Jakarta Sans.
Summary
A warm, sunset-gradient SaaS marketing landing page on a cream canvas with a coral-to-amber accent system. A sticky blurred nav sits above a centered hero (pill badge, a large display headline with a coral->amber gradient-clipped phrase, subcopy, two CTAs, and a faux 'infinite canvas' product mock framed in a grainy card with floating chips), a trust logo strip, a 6-card feature grid, a 3-up template-gallery showcase (one tall featured card), a dark charcoal stats band with amber glows and 4 metrics, a single centered testimonial, a deep burnt-orange gradient closing CTA panel, and a dark 4-column footer. The signature is the warm sunset palette (coral #ff6b4a + amber #ffb020 on cream #fff8f1), Plus Jakarta Sans throughout, pill-shaped gradient buttons, soft glowing shadows, and a subtle dotted film-grain overlay on the feature panels.
Style
Warm, optimistic, sunset-themed light mode: a cream/sand base lit by soft coral and amber radial blobs, with a coral-to-amber gradient used as the single hero accent (buttons, icon chips, gradient-clipped headline words, decorative blobs). Plus Jakarta Sans across the whole page, leaning on its 700/800 weights for display. Generous rounding (rounded-2xl/3xl/full pills), warm orange-tinted borders, and two custom soft shadows: a coral-tinted 'glow' on gradient elements and a low-contrast 'soft/card' lift on white surfaces. Dark sections (stats band, CTA panel, footer) flip to charcoal ink #1c1410 / burnt-orange gradient with the same coral+amber glows for contrast. A faint dotted radial 'grain' overlay (.grain::before) textures the framed panels.
Layout & Structure
A single-column, vertically stacked, frameless responsive marketing page. Almost every section is centered inside mx-auto max-w-7xl with px-6 -> lg:px-8 padding (hero text narrows to max-w-4xl/xl, testimonial to max-w-4xl, CTA to max-w-6xl). Order top to bottom: sticky nav, hero (badge + headline + subcopy + 2 CTAs + product-mock card with floating chips + logo strip), feature grid (6 cards, 1->2->3 col), template showcase (3 cards, the first spanning 2 rows), dark stats band (2-col split: copy + 4 metrics), centered testimonial, burnt-orange gradient CTA panel, dark 4-column footer with bottom legal row. Grids reflow: features grid-cols-1 -> md:grid-cols-2 -> lg:grid-cols-3; showcase grid lg:grid-cols-3 with the featured article lg:row-span-2; footer lg:grid-cols-[1.4fr_1fr_1fr_1fr]; everything collapses to one column on mobile.
Sticky nav
Hero
Hero product mock + floating chips
Trust logo strip
Feature grid (6 cards)
Template showcase
Stats band (dark)
Testimonial
Closing CTA panel
Footer (dark)
Components
Sunset gradient-clipped headline text
The recurring brand flourish: a key phrase in each big heading is rendered in a coral->orange->amber gradient clipped to the text, while the rest stays solid ink (or cream on dark sections).
Coral-to-amber gradient pill button
The primary CTA style: a fully rounded pill filled with the coral->amber gradient, white bold text, a trailing arrow glyph, and a warm coral glow shadow that brightens on hover.
Faux 'infinite canvas' product mock with floating chips
A framed, grainy product preview that fakes the app canvas: a top bar with status pills, a left prompt card with tag chips, and right skeleton design cards (one highlighted), with two rotated 'Generated in 8s' / 'Export / React' chips floating over the frame edges.
Grain-textured panels
Several framed surfaces (hero mock, stats band, CTA panel, showcase card header) carry a faint dotted film-grain overlay for warmth and depth.
Dark stats band with bordered metric cells
An inverted charcoal panel that breaks up the light page, with four metrics each marked by a thin coral/amber left border and amber/coral radial glows in the corners.
Special Notes
Frameless, fully responsive marketing landing page (no browser chrome / no device frame): every section centers in mx-auto max-w-7xl with px-6 -> lg:px-8 padding; feature grid reflows 3->2->1 col, showcase is lg:grid-cols-3 with a featured lg:row-span-2 tall card, footer is lg:grid-cols-[1.4fr_1fr_1fr_1fr], and all rows collapse to a single column on mobile; the nav is sticky + blurred. Built with Tailwind via CDN plus a small tailwind.config registering the custom colors (ink/coral/amber/cream/sand), the Plus Jakarta Sans font family, and the card/glow/soft shadows; Google Fonts loads Plus Jakarta Sans 400-800. Icons are inline Phosphor-style SVGs. All copy and the 'Solflare' brand are placeholders meant to be swapped: the transferable value is the warm sunset palette (coral #ff6b4a + amber #ffb020 on cream #fff8f1, with the .sunset-text gradient and coral/amber glow shadows) and the full-funnel SaaS landing structure (sticky nav -> gradient hero with product mock -> trust strip -> feature grid -> template showcase -> dark stats band -> testimonial -> gradient CTA -> dark footer), not the specific product.