Design a light-mode website section: crisp institutional intelligence anchored by glowing gradients and a deep midnight footer.
LAYOUT
Asymmetric two-column hero CTA section: left side contains the category pill, 44px value proposition headline, explanatory paragraph, dual CTA buttons, and horizontal trust seals. The right side holds the self-contained 2x2 metrics proof card. Directly below, the layout snaps to a full-bleed, multi-column dark footer with company info, six navigation columns, and an integrated newsletter subscription block.
PALETTE (use these exact hex values)
- #F8F9FE — Canvas Hero: Light background surface for the main hero and CTA section
- #0D1527 — Canvas Footer: Deep navy surface for global footer and enterprise navigation
- #FFFFFF — Card Surface: Elevated white background for the right-hand metrics grid card
- #0F172A — Primary Text: High-contrast headings, main value proposition, and key metrics titles
- #64748B — Muted Text: Subheadlines, trust badges, metric captions, and footer links
- #FF5757 — Metric Accent Coral: High-impact stat numbers and starting tone for the primary gradient
- #5A54EA — Royal Indigo: Heading highlights, active newsletter button, and gradient endpoint
- linear-gradient(90deg, #FF6058 0%, #6352EA 100%) — Primary Gradient: Signature call-to-action button gradient fill
- #EDE8FD — Pill Soft Purple: Background for product classification eyebrow pill badge
- #1E293B — Footer Input Border: Stroke around newsletter input and dark mode borders
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Display), weights 400/500/600/700. Sizes 12px caption, 13px body-sm, 14px body, 15px body-lg, 18px subheading, 32px heading, 44px display. Tracking -0.03em for display headings, 0 for body text. Authoritative, institutional, and mathematical. The clean geometric grotesque evokes enterprise fintech reliability without feeling bureaucratic, utilizing tight tracking on headers for modern punchiness. Free alternatives like Inter or Plus Jakarta Sans capture the identical metric cadence.
GEOMETRY & SPACING
Corner radii — cards 24px, links 4px, inputs 8px, buttons 10px. Spacing on a 8px unit, 24px gaps, 80px between sections, 1240px container, comfortable density.
DEPTH
Depth is subtle and highly selective. The hero relies on a soft, wide drop shadow (0 12px 32px rgba(15, 23, 42, 0.05)) solely under the floating white metrics card, keeping the rest of the canvas completely flat against an organic wire-mesh background.
IMAGERY
Abstract mathematical wireframe wave ribbons rendered in translucent violet-indigo tones (#6352EA at 10-20% opacity). Photography is avoided entirely in favor of data visualization geometry, precise vector line icons, and typographic clarity.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the vibrant coral-to-indigo gradient pill/button juxtaposed against an ethereal generative vector wave and paired with an institutional 2x2 metrics card with red-orange statistics. Misusing this means applying the vibrant gradient to multiple competing elements rather than reserving it strictly for the single primary conversion driver.
MUST
- Use deep contrast between the luminous #F8F9FE hero and the midnight #0D1527 footer.
- Render the primary conversion button with the exact coral-to-indigo linear gradient.
- Keep metric numerals at 32px semi-bold or bold with saturated coral (#FF5757) accents.
- Anchor the metrics block inside a single pristine white card with 24px border radius.
AVOID
- Do not use dark backgrounds for the hero CTA section; keep it airy and white.
- Do not use hard black (#000000); use deep navy-slate (#0F172A) for hero text.
- Do not omit the soft generative mesh wave background behind the hero elements.
- Do not make buttons pill-shaped; keep CTA button corner radii at exactly 10px.
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. 在 DraPub 中尝试 
