Design a dark-mode website section: enterprise reassurance transitioning from crisp daylight conversion into midnight operational clarity.
LAYOUT
The page transitions vertically through two contrasting modules: a centered daylight hero CTA zone with a 44px headline, centered subtitle, dual-action button group, and a trio of horizontal trust badges. This immediately drops into an expansive 5-column midnight footer structured as: 1 brand context column, 4 categorical link columns, and 1 newsletter panel. Below the columns, a clean sub-footer row balances the copyright statement against right-aligned legal anchors.
PALETTE (use these exact hex values)
- #ffffff — Canvas Daylight: Primary surface for the conversion block and secondary interactive triggers
- #0d141f — Canvas Midnight: Deep navy surface backing the full multi-column directory footer
- #141d29 — Surface Elevation: Contained dark background fill for the newsletter capture module
- #0062ff — Electric Cobalt: Primary focus color for action buttons, brand logomark accents, and text highlights
- #0f172a — Ink Primary: Display headings and secondary button label in light mode
- #475569 — Slate Muted: Subtitle paragraphs and trust-badge descriptions on light surface
- #ffffff — Starlight White: Footer column titles, primary button text, and brand logotype
- #94a3b8 — Cadet Links: All multi-column footer anchor tags and newsletter descriptive copy
- #1f2937 — Nightline Border: Input container boundary and subtle divider lines within dark modules
- #e2e8f0 — Dayline Border: Perimeter stroke on the secondary light CTA button and dividers
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Display, Roboto), weights 400/500/600/700. Sizes 12px caption, 13px body-sm, 14px body, 15px subheading, 18px body-lg, 44px display. Tracking -0.03em at 44px, -0.01em at body, 0 at caption. The typography communicates engineering discipline, audit-readiness, and modern clarity. Inter or Plus Jakarta Sans provides crisp geometry at display scales while preserving high optical legibility across low-contrast footer lists. Avoid expressive serifs or playful humanistic sans typefaces; the aesthetic requires structural neutrality.
GEOMETRY & SPACING
Corner radii — cards 14px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 20px gaps, 80px between sections, 1200px container, comfortable density.
DEPTH
Depth is communicated through tonal stratification rather than soft blur shadows. In the dark footer, the newsletter module sits on level 1 elevation (#141d29) against the level 0 midnight backdrop (#0d141f), and inputs sit at an inset level 0. The boundary between light and dark sections relies on raw edge contrast rather than gradient fades or divider strokes.
IMAGERY
This layout contains zero photographic imagery or skeuomorphic textures, relying entirely on typographic balance, precise iconography, and UI chrome. Iconography is strictly line-based (1.5px stroke weight) or monochrome textual abbreviations within dark tiles.
SIGNATURE DETAIL — the thing that makes this design itself
The stark bifold composition: an ultra-clean white SaaS conversion block anchored directly onto a dense, engineering-grade midnight footer with an integrated tonal newsletter card. Its misuse stems from blurring the horizon line with gradients or softening the footer tone to mid-gray.
MUST
- Retain the sharp planar transition between white conversion ground and midnight navigation ground without an artificial drop shadow.
- Isolate the blue accent (#0062ff) strictly to single keyword emphasis and actionable interactive elements.
- Keep directory column link spacing at a strict 12px to 14px gap for readability in dark mode.
- Use subtle circular outline checkmarks in electric blue for all light-mode trust badges.
AVOID
- Do not apply heavy multi-stop gradients across the footer background; keep it flat, deep slate navy.
- Never use black text or saturated icons inside the midnight footer container.
- Avoid pill-shaped (full-radius) action buttons; stay within the strict 8px to 10px geometric envelope.
- Do not omit the divider pipes between trust badges beneath the primary light-mode CTA.
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 中尝试 
