Solra — Centered Gradient Sunset CTA (legibility-fixed)

Summary

A high-conversion, full-bleed END-OF-PAGE CTA band for an AI product-design tool (Solra), built around one signature move: a single warm CORAL-to-AMBER sunset gradient section that carries a giant centered display headline, a short subhead, a primary + secondary button pair and a quiet trust line, with EVERY element painted in near-black ink (not white) so it stays legible against the bright gradient (the 'legibility-fixed' point). The page stacks as a sticky frosted nav, then a thin neutral 'context strip' that names where you are in the funnel ('Prompt library, 12,000+ designs' eyebrow + a one-line 'you've browsed, one step left' setup), then THE CTA BAND: a relative overflow-hidden .sunset section (a coral #ff6b4a -> amber #ffb020 linear gradient overlaid by two radial sun-glow stops), decorated with two big blurred white/peach depth blooms, a faint white polka grain and a soft top seam that fades the neutral strip into the gradient. Centered inside a max-w-[1180px] container it stacks: an ink pill eyebrow ('From prompt to pixels'), a 44px -> 76px font-extrabold ink headline ('Stop browsing. / Start shipping.'), a 16 -> 19px ink/90 subhead, a button row (a solid ink 'Generate my first design' pill with cream text + a trailing arrow, beside a cream-filled ink-bordered 'See it on the canvas' ghost pill with a play glyph), and a wrap of three ink/85 trust items (No credit card / Works in your coding agent / 57k builders). The reusable signature is the LEGIBILITY-FIXED SUNSET CTA system: a coral->amber gradient band where contrast is bought with dark INK text + ink buttons (never low-contrast white-on-yellow), plus the depth-bloom + grain + seam recipe that keeps the gradient from ever looking flat. Plus Jakarta Sans throughout (tight negative tracking), Phosphor (iconify) icons, mood warm/optimistic/energetic/decisive.

Style

A warm, optimistic, energetic LIGHT CTA aesthetic anchored on a single full-bleed CORAL-to-AMBER sunset gradient band, set off by a calm neutral sand frame above it. Register a small custom Tailwind palette: coral #ff6b4a, amber #ffb020, ink #2a1306 (a very dark warm brown, almost black), cream #fff6ee, sand #fbf2ea; the page body is sand #fbf2ea with ink #2a1306 text. The signature surface is the .sunset gradient: a base linear-gradient(132deg, #ff6b4a 0%, #ff8038 44%, #ffa829 78%, #ffb020 100%) OVERLAID by two radial sun-glow stops (a bright amber radial-gradient(120% 140% at 84% -12%, rgba(255,186,48,0.98)->0 at 54%) in the top-right and a deeper coral radial-gradient(130% 140% at 6% 118%, rgba(255,79,46,0.78)->0 at 52%) in the bottom-left), so the band reads like a real sunset glowing from the corners. The CRITICAL contrast rule (the 'legibility-fixed' POV): on this bright gradient, do NOT use white or pale text; paint nearly everything in ink #2a1306 and its alphas (the headline at full ink for ~9-12:1, the subhead ink/90, the trust line + eyebrow + icons ink/85-100, the divider pips ink/30) so contrast stays AA+ across both the bright amber and the deep coral corners. Depth + texture come from three CSS layers inside the band: two big pointer-events-none blurred BLOOMS (.bloom-a a white-core radial at top-right, .bloom-b a peach #ffc980 radial at bottom-left, both blur-2xl at ~80-90% opacity) for soft glow, and a .grain polka wash (radial-gradient rgba(255,255,255,0.10) 1px dots on a 22px grid at opacity-60) so the gradient never looks flat; a pointer-events-none top SEAM (an inset-x-0 top-0 h-20 bg-gradient-to-b from-sand/55 to-transparent) softly melts the neutral context strip into the band. Buttons buy contrast with solidity: the PRIMARY is a solid bg-ink rounded-full pill with cream text and a heavy ink drop-shadow (shadow 0 14px 34px -12px rgba(42,19,6,0.6)); the SECONDARY is a cream-filled rounded-full pill with a 2px ink/85 border and ink text; both lift translateY(-2px) and deepen their shadow on hover (.btn-primary / .btn-ghost transitions, cubic-bezier(.2,.7,.3,1)). The nav is a .scrim frosted bar (bg rgba(251,242,234,0.78) + backdrop-blur saturate(150%) blur(12px)) over a border-ink/10 hairline, with the same solid-ink rounded-full 'Start free' pill. The context-strip eyebrow + the band eyebrow are rounded-full pill chips (a white/70 ink-bordered one on sand, an ink/8 ink-bordered one on the gradient). Type is Plus Jakarta Sans only (weights 400-800 + italic 500) with tight negative letter-spacing helpers (.tight -0.02em, .tighter -0.035em, .tightest -0.045em) leaning on extrabold 800 for the headline + eyebrows. Icons are Phosphor via iconify (sun-horizon-fill logo, sparkle-fill, arrow-right-bold, play-circle, check-circle-fill, terminal-window-fill, users-three-fill). ::selection is ink bg / cream text. Mood: warm, sunny, optimistic, energetic and decisive (a 'stop browsing, start shipping' end-of-page push), never washed-out or low-contrast.

Layout & Structure

A full-bleed light marketing page tail, content centered inside a mx-auto max-w-[1180px] px-6 (sm:px-8) container, stacked top to bottom as: (1) a sticky frosted .scrim nav, (2) a thin neutral sand CONTEXT STRIP, and (3) THE FULL-BLEED SUNSET CTA BAND (the centerpiece). The defining structural move is the CTA BAND: a relative overflow-hidden .sunset <section id='cta'> whose gradient surface is decorated by four absolute pointer-events-none layers (a top-right white .bloom-a, a bottom-left peach .bloom-b, an inset-0 .grain polka wash, and an inset-x-0 top-0 h-20 from-sand/55 top SEAM) and whose foreground is a relative max-w-[1180px] flex flex-col items-center justify-center py-24 (sm:py-36) text-center stack: an ink pill EYEBROW, the big two-line ink HEADLINE, an ink/90 SUBHEAD, a BUTTON ROW (flex-col -> sm:flex-row) and a flex-wrap TRUST LINE. Above it, the CONTEXT STRIP is a bg-sand border-b border-ink/8 section with a centered max-w-[1180px] py-10 (sm:py-14) stack: a white/70 rounded-full eyebrow pill ('PROMPT LIBRARY · 12,000+ DESIGNS' with a coral sparkle) over a max-w-[560px] ink/80 setup line. The NAV is a sticky top-0 z-50 .scrim header with an inner mx-auto flex h-16 max-w-[1180px] items-center justify-between px-6 (sm:px-8) row: a logo (a sunset-gradient rounded tile + a 'Solra' wordmark), a hidden md:flex center link group (Canvas / Library / Pricing / Docs / Changelog), and a right cluster (a hidden sm:inline 'Log in' link + a solid-ink rounded-full 'Start free' pill). Everything reflows to a single column on mobile: the nav center links hide below md and 'Log in' below sm, the headline drops to ~44px (the <br> hides below sm), the button row stacks full-width below sm, the trust pips hide below sm, and there is no horizontal overflow at 390px.

Sticky frosted .scrim nav

Thin neutral context strip

Full-bleed .sunset CTA band shell + depth layers

Band eyebrow pill (ink on gradient)

Giant centered ink headline

Subhead

Primary + secondary button row

Trust line

Special Notes

Keep the LEGIBILITY-FIXED SUNSET CTA system intact, it is the whole point: ONE full-bleed coral->amber sunset gradient band where contrast is bought entirely with DARK INK text + ink/cream buttons (NEVER white-on-yellow), so the section is loud AND legible at once. Register the small Tailwind palette: coral #ff6b4a, amber #ffb020, ink #2a1306, cream #fff6ee, sand #fbf2ea; body bg sand #fbf2ea, text ink #2a1306. Use Plus Jakarta Sans only (family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,500, fontFamily.sans, antialiased) with the tight tracking helpers (.tight -0.02em, .tighter -0.035em, .tightest -0.045em) and Phosphor iconify icons (ph:sun-horizon-fill, ph:sparkle-fill, ph:arrow-right-bold, ph:play-circle, ph:check-circle-fill, ph:terminal-window-fill, ph:users-three-fill); no second family, no icon-image files. Build the .sunset surface as a base linear-gradient(132deg, #ff6b4a 0%, #ff8038 44%, #ffa829 78%, #ffb020 100%) OVERLAID (listed first in the background shorthand) by two radial sun-glow stops: radial-gradient(120% 140% at 84% -12%, rgba(255,186,48,0.98) 0%, rgba(255,186,48,0) 54%) top-right and radial-gradient(130% 140% at 6% 118%, rgba(255,79,46,0.78) 0%, rgba(255,79,46,0) 52%) bottom-left. Decorate the band with four pointer-events-none CSS layers and nothing else: a top-right white-core radial .bloom-a (blur-2xl opacity-90), a bottom-left peach #ffc980 radial .bloom-b (blur-2xl opacity-80), an inset-0 .grain polka wash (radial-gradient rgba(255,255,255,0.10) 1px dots on a 22px grid, opacity-60), and an inset-x-0 top-0 h-20 bg-gradient-to-b from-sand/55 to-transparent top seam. Paint EVERY foreground element in ink + its alphas: the eyebrow + headline at full ink, the subhead ink/90, the trust line + icons ink/85-100, the divider pips ink/30; do not introduce white or pale text anywhere on the gradient. Buy button contrast with solidity, not color: the PRIMARY is a solid bg-ink rounded-full pill with cream text + a trailing ph:arrow-right-bold and a heavy ink drop-shadow (0 14px 34px -12px rgba(42,19,6,0.6)); the SECONDARY is a cream-filled rounded-full pill with a 2px ink/85 border + ink text + a ph:play-circle glyph; both lift translateY(-2px) on hover (cubic-bezier(.2,.7,.3,1)), the primary deepening its shadow and the ghost going bg-white. The structure is a full-bleed page tail inside a max-w-[1180px] container: a sticky frosted .scrim nav (the sunset logo tile + a solid-ink 'Start free' pill), a thin neutral bg-sand CONTEXT STRIP (a white/70 ink-bordered 'PROMPT LIBRARY · 12,000+ DESIGNS' eyebrow over a max-w-[560px] ink/80 'one step left' setup line), then THE CTA BAND (the ink eyebrow pill + the two-line .tightest font-extrabold ink headline 'Stop browsing. / Start shipping.' + a max-w-[520px] ink/90 subhead + the primary+secondary button row + the pip-separated trust line). Everything must reflow cleanly: the nav center links hide below md and the Log in link below sm, the headline drops to ~44px and its <br> hides below sm, the button row stacks full-width below sm, the trust pips hide below sm, and there is no horizontal overflow at 390px. Copy is warm, confident and decisive with ZERO em-dashes ('Stop browsing. Start shipping.', 'From prompt to pixels', 'Your first design is one prompt away.', 'No credit card', 'Works in your coding agent', '57k builders', 'You have browsed the gallery, copied a few prompts, and seen what the canvas can do. There is one step left.'). Mood: warm, sunny, optimistic, energetic and decisive, an end-of-page push that is impossible to misread, never washed-out or low-contrast.