Design a light-mode website section: crystalline enterprise confidence shifting from illuminated airy canvas into an inky deep-navy terminal footer.
LAYOUT
The composition follows an anchored top-to-bottom funnel. A floating 1200px wide hero card occupies the upper half, centering an eyebrow badge, a 2-line serif title, supporting paragraph, and dual CTAs. At the bottom edge of this card sits an inset horizontal 4-cell metrics bar. Immediately beneath, the layout shifts to a full-width deep navy footer featuring a 6-column split (brand + 4 navigation columns + newsletter capture) terminating with a discrete copyright and policy bar.
PALETTE (use these exact hex values)
- #F8FAFC — Canvas Background: Outer background wrapping the top CTA card section
- linear-gradient(135deg, #FFFFFF 0%, #F0F6FF 100%) — CTA Card Background: Light gradient background fill for the primary upper card container
- #FFFFFF — Metrics Card Fill: Pure white surface for inner metrics strip and button contrast
- #061426 — Footer Canvas: Primary surface for the comprehensive bottom multi-column footer
- #1B62D6 — Brand Cobalt: Primary CTA button fill, active brand accents, and category pill dot
- #0F172A — Text Primary Dark: Hero headline, metric numbers, and strong label text on light surfaces
- #5A6B82 — Text Secondary Slate: Body copy on light canvas and metric supporting descriptions
- #FFFFFF — Footer Text Light: Column headings and newsletter headline on the dark footer
- #8EA2B8 — Footer Muted Link: Navigation links and copyright details on dark footer
- #4282F3 — Newsletter Accent Blue: Submit button inside newsletter module
TYPOGRAPHY
Typeface Newsreader (or Source Serif Pro, Merriweather, Georgia), weights 400/500. Sizes 11px caption, 13px body-sm, 14px body, 15px body-lg, 16px subheading, 24px heading, 44px display. Tracking -0.015em. The typography pairs an authoritative, intellectual editorial serif (like Newsreader or Georgia) for the main query headline with a utilitarian, highly legible sans-serif (Inter) for functional UI, metrics, and links. This gives an enterprise software product a trustworthy, boardroom-ready presence without losing modern software crispness. All technical metrics are typeset with tabular-style numeric weighting.
GEOMETRY & SPACING
Corner radii — cards 24px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 32px gaps, 80px between sections, 1240px container, comfortable density.
DEPTH
Depth is created strictly through surface layer hierarchy and crisp 1px borders rather than heavy blur drop-shadows. The main CTA container uses a faint ambient glow (0 12px 32px rgba(15, 23, 42, 0.04)) with a 1px border (#E2E8F0) to stand off the light base. Inset components like the metrics strip rely entirely on subtle border contrast (#F1F5F9) and pure white background fill against light-tinted cards.
IMAGERY
No photographic imagery is used. The aesthetic depends entirely on clean vector line-work, including subtle wave/contour line art sweeping behind the CTA card on the right, and sharp monochrome/tinted SVG icons inside metric nodes. Any photography or saturated illustrative 3D elements would dilute the technical, fintech-grade precision.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-tone polarity shift: an illuminated light-blue gradient hero card nested above an inky, high-density 6-column navy footer. The signature execution is the inset metrics container spanning the bottom inside of the CTA card, housing segmented KPI tiles with colored icon badges right above the footer horizon.
MUST
- Use high contrast: maintain the dramatic transition from bright upper card to midnight footer (#061426).
- Render the hero display text in a clean, high-contrast transitional serif font at ~44px.
- Enclose social proof metrics inside a unified white rounded card with light grey internal vertical dividers.
- Keep icon backdrops in metric tiles tinted pastel matching their icon hue at 10-15% saturation.
AVOID
- Do not use dark backgrounds inside the top CTA card; reserve dark surfaces solely for the footer.
- Do not set footer category titles without their accompanying thin outline category icons.
- Never make the metrics strip full-bleed; it must sit nested inside the CTA card padding.
- Avoid harsh black (#000000); use navy-tinted charcoal (#0F172A) for typography on light panels.
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 中尝试 
