Design a light-mode website section: crystalline light canvas with sunset gradient accents and restrained corporate clarity.
LAYOUT
The hierarchy flows sequentially from an airy floating CTA card down to a multi-column directory footer. The CTA card centers all elements vertically: eyebrow pill, two-line headline, two-line subcopy, dual button cluster, and three-point trust bar. Below a 96px whitespace band, the footer splits into brand identity on the left, four balanced link columns in the center, and a newsletter capture block on the right.
PALETTE (use these exact hex values)
- #ffffff — Canvas White: Global background canvas and clean contrast surface for inputs and secondary buttons
- #f5f3ff — Glow Lavender: Soft tint for the expansive CTA container gradient and subtle highlight washes
- #4f52f8 — Primary Indigo: Dominant action color for primary CTA buttons, badges, and subscription triggers
- #f97316 — Sunset Coral: Logo mark highlight and starting stop for the emphasized headline text gradient
- #8b5cf6 — Sunset Violet: Ending stop for emphasized display text gradient and ambient aura
- #0f172a — Ink Slate: Primary headings, brand logo wordmark, and prominent labels
- #64748b — Muted Slate: Secondary descriptive paragraphs, navigation links, and input placeholder labels
- #e2e8f0 — Border Subtle: Card borders, secondary button outlines, input stroke, and vertical divider ticks
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, DM Sans, General Sans), weights 400/500/600/700. Sizes 12px caption, 14px body-sm, 16px body, 18px body-lg, 20px heading, 48px display. Tracking -0.02em at display, 0 at body. Plus Jakarta Sans delivers a clean, modern, and trustworthy tone that balances Silicon Valley technicality with approachable consumer warmth. The bold weights cut through the light background with crisp geometry, while the tight negative tracking on display sizes conveys contemporary polish. Inter or DM Sans serve as flawless drop-in open-source substitutes.
GEOMETRY & SPACING
Corner radii — cards 24px, links 6px, inputs 10px, buttons 10px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1280px container, airy density.
DEPTH
Depth is achieved entirely through subtle color temperature shifts and atmospheric gradients rather than skeuomorphic shadows. The CTA panel floats over the canvas via an extremely faint ambient perimeter glow (#f5f3ff) and razor-thin hairline borders (#f1f0fb). Interactive buttons remain virtually flat, letting saturation differences drive hierarchy.
IMAGERY
The visual language shuns photography and illustrative mascots in favor of subtle vector geometric lines radiating in the CTA background. Crisp, minimal monoline icons (sparkles, cards, sliders, thunderbolts) reinforce technical agility and precision. Stock photography or heavy rendered 3D art would violate the clean, mathematical airiness of this interface.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the expansive, glowing rounded container combining a faint purple-tinted ambient floor with a headline that transitions into a dual-color sunset gradient (#f97316 to #8b5cf6). To implement correctly, keep the background glow barely noticeable and apply the gradient only to the emotional keyword punchline. It is commonly misused by making the gradient unreadable on white or saturating the container background until it looks like a separate banner ad.
MUST
- Wrap primary CTA blocks in a single high-radius (24px) container with subtle ambient tinting.
- Use sunset gradient text (#f97316 to #8b5cf6) strictly on the final 2-3 words of display headings.
- Pair primary solid buttons (#4f52f8) directly beside ghost-outlined white secondary buttons.
- Keep footer column headers in #0f172a bold and navigation items in muted #64748b.
AVOID
- Do not use dark or charcoal background fills for the primary CTA section.
- Do not apply heavy drop shadows; rely on faint perimeter borders and subtle light gradients.
- Do not make all headline text gradient; reserve gradients solely for specific semantic emphasis.
- Do not use sharp 0px corners on interactive inputs or primary action buttons.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1792:1024. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. Try in DraPub 
