Design a dark-mode website section: luminous particle streams over clinical white glass, grounded by an authoritative deep midnight telemetry footer.
LAYOUT
Structured as a vertical stack consisting of an elevated light CTA container above a 5-to-6 column footer grid. The CTA uses an asymmetrical 55/45 split: left-aligned marketing copy and buttons, right-aligned generative light field. The footer opens with brand identity and status telemetry on the left, three to four equal-width taxonomy columns in the center, and newsletter capture on the far right, terminating in a horizontal legal bar.
PALETTE (use these exact hex values)
- #0B121E — Midnight Slate Base: deep background canvas for the global footer, telemetry widgets, and technical sub-navigation
- #FFFFFF — Pure White Canvas: main background for the elevated CTA showcase card container
- #2563EB — Cobalt Accelerator: primary action buttons, emphasized headline spans, section indicator pips, and interactive highlights
- #38BDF8 — Photon Cyan: bright spectral trailing light and futuristic particle accents across the CTA banner visual
- #10B981 — Operational Emerald: system health badge status dot indicating active uptime and operational telemetry
- #0F172A — Deep Obsidian: high-contrast primary headline and display typography inside the white CTA banner
- #94A3B8 — Ghost Slate: secondary footer link labels, copyright notice, legal links, and system timestamps
- #1E293B — Navy Border Muted: subtle boundaries for the footer status card, newsletter inputs, and icon buttons
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Display, Geist), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 16px body-lg, 20px subheading, 48px display. Tracking -0.03em at display, 0.05em on micro-caps. The voice is hyper-precise, engineered, and forward-leaning without resorting to sci-fi tropes. Clean neo-grotesque sans (Inter or Plus Jakarta Sans) provides machine-like legibility in dense lists while projecting executive confidence at 48px display scale. Muted tracking on headers and uppercase tracking on micro-labels deliver high information density.
GEOMETRY & SPACING
Corner radii — cards 24px, links 4px, inputs 10px, buttons 10px. Spacing on a 8px unit, 24px gaps, 64px between sections, 1360px container, comfortable density.
DEPTH
Depth is created primarily through extreme luminance contrast rather than layered drop shadows. The top CTA card floats cleanly over the dark footer boundary, while internal footer widgets use subtle 1px border outlines (#1E293B) and slight value shifts (#111C2E over #0B121E). Primary buttons utilize a soft chromatic blue halo (0 8px 20px rgba(37,99,235,0.25)) to suggest optical luminescence.
IMAGERY
Features abstract generative high-speed particle tracks, light streaks, and vector motion paths glowing in cyan and cobalt against clean white. No photorealistic robotics or literal hardware is shown; intelligence and autonomy are symbolized through directional optical velocity. Dark, gritty, or noisy photography is strictly off-brand.
MUST
- Anchor section titles in the footer with a small cyan/cobalt bullet point (#2563EB).
- Pair delicate line icons (stroke 1.5px) with footer link labels to reinforce technical taxonomy.
- Maintain strict 12px vertical rhythm between category links in the dark footer.
- Split large display headlines with a cobalt blue (#2563EB) colored terminal phrase.
AVOID
- Do not use dark backgrounds inside the top hero CTA card.
- Do not drop the leading blue bullets before footer column headings.
- Never use serif or expressive display typefaces anywhere in this interface.
- Do not make footer navigation links pure white; keep them muted at #94A3B8.
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. Try in DraPub 
