Design a dark-mode website section: midnight canvas illuminated by electric cobalt buttons, mint gradient accents, and disciplined multi-column information architecture.
LAYOUT
The interface executes a two-tier vertical hierarchy: a centered, spacious CTA stack flowing into an asymmetrical multi-column footer. The CTA uses center-aligned elements staged vertically (badge, display headline, body paragraph, button row, trust strip). Beneath a 1px full-width boundary line, the footer splits into an expansive left column for brand identity and newsletter capture, followed by four evenly spaced vertical link columns and a terminal legal bar.
PALETTE (use these exact hex values)
- #090d16 — Canvas Midnight: Deep blue-black background canvas spanning the entire viewport
- #060a10 — Footer Bed: Slightly deeper base tone grounding the lower footer navigation block
- #162032 — Container Stroke: Hairline 1px border lines, dividers, and input field strokes
- #0d1424 — Input Surface: Recessed background fill for newsletter email inputs and social square tiles
- #2b66ff — Cobalt Primary: High-intent CTAs including the main conversion button and newsletter submit
- linear-gradient(90deg, #d1fae5 0%, #6ee7b7 100%) — Mint Terminal Gradient: Inline gradient fill emphasizing the concluding phrase of the hero title
- #ffffff — Text Pure White: Main headline text, category headings, button labels, and brand mark
- #94a3b8 — Text Slate Dim: Descriptive body copy, secondary links, and inactive footer navigation items
- #64748b — Text Muted Steel: Copyright notices, subtext disclaimers, input placeholder text, and trust indicators
TYPOGRAPHY
Typeface Inter (or Geist, Plus Jakarta Sans, SF Pro Display), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 15px subheading, 17px body-lg, 56px display. Tracking -0.03em at display, 0.05em at caps badge. The typography relies on an authoritative, engineered neo-grotesque sans-serif that conveys clarity, automation, and modern enterprise rigor. Tightly tracked display sizing (-0.03em) lends density to the title, while generous leading on paragraph copy ensures quick legibility against dark surfaces.
GEOMETRY & SPACING
Corner radii — cards 12px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1200px container, comfortable density.
DEPTH
Depth is produced through subtle surface illumination rather than physical drop shadows. An ambient deep-blue radial gradient emanates softly from the upper corners, while inset containers and inputs use recessed tone (#0d1424) framed by fine 1px strokes (#162032).
IMAGERY
This interface avoids raster photography entirely, relying solely on precise geometric SVG iconography. Glyphs are drawn in fine 1.5px strokes matching the slate text color (#94a3b8), accompanied by a recurring four-point sparkle symbol representing intelligence.
SIGNATURE DETAIL — the thing that makes this design itself
The distinctive move is the text gradient termination on the hero headline, which gracefully transitions from bright white to an ethereal pale seafoam-mint (#6ee7b7) against a midnight backdrop, balanced beneath by a single electric-cobalt button.
MUST
- Use a hairline 1px border (#162032) across dark components rather than heavy drop shadows.
- Restrict the mint gradient exclusively to the concluding high-value phrase of primary headlines.
- Keep button corner radiuses strictly between 6px and 8px to preserve an architectural feel.
- Apply solid cobalt blue (#2b66ff) only to top-tier conversion triggers like primary buttons.
AVOID
- Never use fully rounded pill buttons (999px) for actionable CTAs; pills are reserved for badges.
- Do not place stark white outlines on input fields; keep borders subdued at #162032.
- Avoid applying the mint gradient to body copy, standard labels, or secondary links.
- Do not clutter the trust proof row with oversized badges or high-contrast iconography.
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 中尝试 
