Design a dark-mode website section: cosmic deep-void developer canvas anchored by a clinical, high-contrast daylight footer.
LAYOUT
The interface is structured in two distinct rhythmic zones stacked vertically. The upper zone is centered and cinematic: badge pill, two-line display headline, supporting paragraph, paired CTA buttons, and inline security proofs. The lower zone is an expansive five-column navigation grid flanked by brand metadata on the left and a self-contained newsletter card on the right.
PALETTE (use these exact hex values)
- #080d1a — Space Void: Deep background canvas for the CTA section, simulating an infinite technical void
- #ffffff — Footer Canvas: Crisp inverted base background for navigation columns, legal links, and brand identification
- #f8fafc — Newsletter Surface: Tinted background for the self-contained email subscription container
- #2563eb — Cobalt Blue: High-intent primary buttons in both hero CTA and newsletter submission
- linear-gradient(90deg, #3b82f6 0%, #8b5cf6 50%, #38bdf8 100%) — Horizon Glow Gradient: Luminous accent line defining the curved perspective grid and dark-to-light boundary
- linear-gradient(135deg, #60a5fa 0%, #c084fc 100%) — Text Gradient Violet: Applied to secondary hero headline text 'Build what's next.'
- #22c55e — Operational Green: Status indicator dot denoting system health in the footer widget
- #0f172a — Ink Navy: Primary heading typography in the light footer and column titles
- #64748b — Muted Slate: Navigation links, body copy, and secondary meta labels
- #e2e8f0 — Light Border: Hairline card boundaries, inputs, and category separator rules
TYPOGRAPHY
Typeface Inter (or Geist, Plus Jakarta Sans, SF Pro Display), weights 400/500/600/700. Sizes 12px caption, 13px body-sm, 14px body, 16px body-lg, 18px subheading, 48px display. Tracking -0.025em for display, -0.01em for UI labels. The typographic tone is precision-engineered, rational, and modern, conveyed through a neutral neo-grotesque sans-serif like Inter or Geist. Negative letter-spacing on display sizes tightens the optical impact, while tabular-friendly letterforms reinforce infrastructure-level reliability.
GEOMETRY & SPACING
Corner radii — cards 12px, links 4px, inputs 8px, buttons 10px. Spacing on a 8px unit, 24px gaps, 80px between sections, 1280px container, comfortable density.
DEPTH
Depth in the dark CTA is entirely optical, created through radial light blooms, an atmospheric horizon line, and dot-matrix perspective grids. The light footer intentionally rejects elevation in favor of flat architectural planes bordered by 1px solid #e2e8f0 lines.
IMAGERY
The visual language relies on synthetic procedural imagery: vector perspective grids, distant glowing star motes, and laser light horizons. Avoid photorealistic stock photography or 3D clay characters; the aesthetic demands austere, cosmic compute-infrastructure motifs.
SIGNATURE DETAIL — the thing that makes this design itself
The defining move is the 'Cosmic Horizon Inversion'—a glowing curved cyan-to-violet laser horizon that transitions directly into an unyielding, high-utility white footer. To replicate it, place an illuminated horizontal light beam over a perspective wireframe, then sharply cut to a pure white canvas immediately below the glow horizon.
MUST
- Retain the sharp visual polarity between the dark CTA horizon and the clinical white footer.
- Use a subtle glowing linear gradient (blue to purple) only on the second line of the CTA headline.
- Enclose the newsletter module in a dedicated light grey card (#f8fafc) with a thin 1px #e2e8f0 border.
- Set CTA button radii strictly to 10px rather than fully rounded pills.
AVOID
- Do not bleed the dark space background down into the link columns; keep the footer pure white.
- Do not make footer navigation category headers low contrast; keep them sharp #0f172a bold.
- Do not use full pill (999px) border radii on primary action buttons.
- Do not introduce multi-color icons in the footer navigation; keep social icons monochrome.
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 中尝试 
