Design a dark-mode website section: vertical northern light streaks anchored over deep navy infrastructure for technical intelligence.
LAYOUT
Vertical two-stage composition. Top stage features a centered, high-impact CTA billboard card with nested badge, display title, descriptive subtext, and dual action row. Bottom stage contains a six-column footer containing brand information, four link clusters, and a newsletter capture form, followed by a hairline separated bottom legal bar.
PALETTE (use these exact hex values)
- #080b11 — Obsidian Ground: Master canvas background behind CTA banner and footer section
- #0d1527 — Deep Midnight Card: Dark underlay of the billboard CTA container beneath the aurora texture
- #38bdf8 — Electric Cyan: Primary illumination color, left aurora streak, and active text accent
- #6366f1 — Spectral Indigo: Mid-tone gradient driver for buttons and blurred vertical light columns
- #f472b6 — Aurora Magenta: Warm highlight on the far right perimeter of the CTA banner
- #ffffff — Primary Text: Main headline, active headers, and white pill labels
- #94a3b8 — Subtle Text: Body copy, supporting descriptions, and hover links
- #64748b — Muted Slate: Inactive footer links, copyright notice, and field placeholders
- #0f172a — Input Surface: Fill color for email newsletter input with subtle border
TYPOGRAPHY
Typeface Inter (or Geist Sans, Plus Jakarta Sans, SF Pro Display), weights 400/500/600/700. Sizes 12px caption, 13px body-sm, 14px body, 14px subheading, 16px body-lg, 18px heading, 44px display. Tracking -0.03em at display, 0.01em at body, 0.12em at badges. Engineered, calm, and scientific. The clean sans-serif letterforms evoke institutional reliability and high-speed data intelligence, balancing technical precision with modern enterprise authority.
GEOMETRY & SPACING
Corner radii — cards 28px, links 4px, inputs 8px, buttons 10px. Spacing on a 8px unit, 32px gaps, 80px between sections, 1280px container, comfortable density.
DEPTH
Depth is rendered entirely through light emission rather than drop shadows. The central billboard acts as a luminous light box casting ambient radiance onto nearby dark planes, while form elements use recessed flat fills (#0f172a) with hairline borders.
IMAGERY
Abstract atmospheric backdrop resembling elongated polar lights or fiber-optic motion streaks running vertically. No figurative photography, 3D renders, or human figures are present; the visual focus is entirely on computational optics and color transitions.
SIGNATURE DETAIL — the thing that makes this design itself
The pillared aurora billboard card: a distinct 28px rounded rectangle holding a vertical streak spectral gradient that illuminates centered, high-contrast headline copy.
MUST
- Constrain the radiant aurora gradient strictly inside the 28px rounded hero card boundary.
- Keep footer links organized into strictly aligned, equal-width vertical columns.
- Use high-contrast white (#ffffff) for display text and headings over dark backgrounds.
- Apply 10px corner radius consistently to all actionable CTA buttons.
AVOID
- Do not bleed the aurora effect across the entire page canvas; it must remain enclosed.
- Never use warm saturated yellows, reds, or oranges outside of the subtle magenta fringe.
- Avoid high-contrast borders on footer link lists; rely on clean typographic hierarchy.
- Do not center footer columns; they must be left-aligned under crisp category labels.
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 中尝试 
