Design a light-mode website section: pristine daylight conversion framing a deep midnight control-center footer anchored by faint oversized typography.
LAYOUT
The page flows from an expansive, center-aligned light hero CTA block directly down into a highly structured 6-column dark footer grid. The footer allocates two column widths to brand identity and social links on the left, three columns to internal site architecture separated by vertical rules, and a dedicated final column for the newsletter form on the far right.
PALETTE (use these exact hex values)
- #fbfbfe — Light Canvas: dominant background for the conversion area, softly tinted with violet undertones
- #060913 — Midnight Abyss: base ground for the deep structural footer and newsletter block
- #4f46e5 — Iris Brand: action color for primary buttons, eyebrow tag, and newsletter submit button
- #ff5c5c — Coral Accent: single-point focal punctuation mark terminating the main hero headline
- #0d1322 — Input Surface: background fill for the dark newsletter input element
- #182033 — Footer Rule: faint vertical dividers and container lines across dark footer columns
- #0b0f19 — Primary Headings: maximum contrast black for display copy on the light canvas
- #8490a5 — Muted Slate: footer links, subtexts, and secondary checklist items across both tiers
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, Geist Sans, SF Pro Display), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px subheading, 15px body, 18px body-lg, 48px display. Tracking -0.03em at 48px, 0.05em at uppercase. The typographic register is neutral, authoritative, and algorithmic, typical of high-performance financial or developer tools. Inter's rigid vertical metrics and clean tabular capability ensure maximum legibility, while tight negative tracking on display sizes prevents the headline from feeling loose.
GEOMETRY & SPACING
Corner radii — cards 12px, links 4px, inputs 6px, buttons 8px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1200px container, comfortable density.
DEPTH
Depth is flattened in favor of abrupt tonal contrast. Elevation is expressed strictly through luminance shifts—placing high-luminance white modules against dark background wells—alongside a faint 0 2px 4px rgba(0,0,0,0.04) shadow beneath the white secondary button.
IMAGERY
No photographic imagery is present; the visual texture is defined by faint geometric vector wireframe arcs in the light background and a subtle geometric tessellated prism icon for the brand mark. Photography or 3D renders would clutter the strict infrastructural tone.
SIGNATURE DETAIL — the thing that makes this design itself
The sudden, unblurred horizon cut from bright white to near-black navy, overlaid immediately by a giant, low-opacity gradient typographic watermark ('VALENCE') spanning across the footer's top edge. Misuse occurs when designers try to soften this seam with a gradient transition or remove the faint backdrop text, which strips the layout of its architectural weight.
MUST
- Retain the coral accent period (#ff5c5c) at the exact end of the main headline.
- Split sections abruptly between white canvas and deep midnight footer without soft gradient fades.
- Keep footer column dividing rules crisp, 1px wide, and tinted dark navy (#182033).
- Use 8px border radii uniformly across action buttons and input fields.
AVOID
- Do not round buttons into full pills; keep corners disciplined at 8px radius.
- Do not use multiple colored accents in headlines—limit strictly to the final period.
- Do not remove the vertical column separators in the footer; they maintain layout rigidity.
- Never lighten the footer background above #0e1424; it must remain near-black midnight.
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 中尝试 
