Design a light-mode website section: luminous icy gradients flowing into an ink-dark bedrock of confident enterprise trust.
LAYOUT
The viewport is split into two primary horizontal tiers: an expansive light-mode conversion hero at the top, and an anchor dark-mode footer below. The hero features vertically stacked, center-aligned items (badge, display headline, body description, button pair, trust markers). The footer opens into a 6-part horizontal distribution (brand description, 4 navigation link groups, newsletter card), terminating in a partitioned copyright and legal bar.
PALETTE (use these exact hex values)
- #F0F7FF — Canvas Light: Background canvas of the top CTA zone blending cyan, lavender, and white light
- #0A1322 — Canvas Dark: Solid midnight navy background grounding the full multi-column footer
- #2563EB — Electric Blue: Primary button fill, headline highlight text, and key iconography tint
- #0F172A — Deep Slate Text: Headline text, high-contrast badges, and primary light-mode typography
- #475569 — Muted Slate Text: Paragraph body text and supporting feature subtitles in the light CTA zone
- #94A3B8 — Footer Text Muted: Footer navigation links, descriptions, and legal copyright text
- #FFFFFF — Footer Text Bright: White footer column titles, brand title, and primary CTA button label
- #1E293B — Footer Border: Dividers, newsletter input border, and social button outline in the dark footer
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Display, Roboto), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 14px body, 18px body-lg, 20px subheading, 32px heading, 56px display. Tracking -0.025em for display, 0 for body, +0.05em for caps. Inter (or SF Pro match) delivers crisp, objective clarity with an engineered, modern corporate demeanor. The typography relies on strong weight contrast—700 display headlines vs 400 soft paragraphs—to communicate decisive enterprise readiness and technological sophistication.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 10px, buttons 10px. Spacing on a 8px unit, 24px gaps, 120px between sections, 1280px container, comfortable density.
DEPTH
Elevation is purely atmospheric rather than structural. Flat surfaces rely on 1px borders (#1E293B in dark mode, #DBEAFE in light mode) while depth is conveyed via luminous radial glow behind the central headline and smooth cyan energy ribbons traversing the background.
IMAGERY
Abstract mathematical AI energy ribbons made of glowing cyan and white vector filaments flow horizontally across the light backdrop. A faint geometric plus-grid provides technical structure behind the organic wave patterns, avoiding literal photography or human faces entirely.
SIGNATURE DETAIL — the thing that makes this design itself
The dramatic, abrupt cut from an ethereal glowing cyan/white AI cloud directly into an ink-dark #0A1322 corporate footer. It blends high-tech consumer AI aesthetic with grounded enterprise B2B compliance.
MUST
- Use pure vibrant royal blue (#2563EB) strictly for active states, conversion buttons, and high-impact headline text.
- Maintain high contrast by cleanly divorcing the ethereal light CTA from the solid midnight (#0A1322) footer.
- Pair trust badges directly beneath primary CTAs with distinct icon indicators.
- Keep display typography tight with -0.025em tracking and strict centered alignment.
AVOID
- Do not blur or blend the boundary between the light CTA area and the dark footer canvas.
- Do not use dark typography in the footer; maintain a minimum of #94A3B8 on dark slate.
- Never drop trust items below 11px font size to avoid illegible enterprise assurance.
- Do not add solid saturated backgrounds to the pill badge; keep it frosted white with a subtle border.
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 中尝试 
