Design a dark-mode website section: midnight canvas charged with bioluminescent particle fields, precise telemetry typography, and deliberate electric blue accents.
LAYOUT
Asymmetric hero presentation with left-aligned narrative typography occupying 60% width against the generative particle wave on the right. Below a full-width 1px hairline separator, the footer organizes into a 6-column grid: brand and social footprint on the far left, four link groups centrally, and a newsletter capture on the far right. A minimalist bottom bar balances a live status badge against utility legal links.
PALETTE (use these exact hex values)
- #06090f — Obsidian Base: Global background canvas for both hero CTA and footer regions
- #0c121d — Surface Raised: Fill for input fields, badges, and icon button containers
- #141d2d — Hairline Border: Horizontal dividing rule and input/badge outer strokes
- #165dfc — Electric Cobalt: Primary action button background and logo top facet
- #38bdf8 — Cyan Luminescence: Logo secondary facet, keyword accent, and particle field highlights
- #22c55e — Telemetry Green: Operational status pulse dots in badges and telemetry indicators
- #ffffff — Pure White: Primary headline text, logo wordmark, and primary button labels
- #8b9bb4 — Cool Slate: Body copy, input placeholder text, and sub-footer copyright labels
- #64748b — Muted Navigation: Footer link lists, security disclaimer copy, and column headers
TYPOGRAPHY
Typeface Geist Sans (or Inter, SF Pro Display, Plus Jakarta Sans), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 17px body-lg, 24px heading, 48px display. Tracking -0.03em at display, 0.08em at micro labels. Engineered, technical, and hyper-direct. The geometric sans-serif communicates computational precision via tight display tracking and uppercase tracked micro-labels, yet avoids feeling sterile through intentional semantic word coloring in the main headline.
GEOMETRY & SPACING
Corner radii — cards 12px, links 9999px, inputs 8px, buttons 10px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1200px container, comfortable density.
DEPTH
Depth is created purely via luminous chromatic contrast rather than box shadows. The void (#06090f) recedes completely, while the particle cloud and high-luminance buttons appear to hover through additive glow and fine 1px structural outlines (#141d2d).
IMAGERY
A mathematical, high-density point-cloud particle wave sweeping across the right third of the canvas, shifting from deep cobalt to bright cyan and white. The artwork feels algorithmic, scientific, and kinetic; avoid figurative human photography, flat vector illustrations, or blurred pastel blobs.
SIGNATURE DETAIL — the thing that makes this design itself
The juxtaposition of dual-toned headline keywords ('epic.' in cobalt and 'real.' in cyan) anchored over an algorithmic, luminous particle wave, framed by micro-tracked telemetry chips with live status dots.
MUST
- Always separate major vertical sections using a single 1px hairline border (#141d2d).
- Prefix category headers and status chips with a 4px to 6px circular dot.
- Limit electric cobalt (#165dfc) strictly to primary CTA buttons and brand mark accents.
- Color-code focal words in headings with distinct cyan (#38bdf8) and indigo (#5b8bf7) tones.
AVOID
- Do not use solid card containers or floating elevated boxes in the footer layout.
- Never substitute the dark navy void (#06090f) with neutral grayscale blacks (#000000 or #111111).
- Avoid applying full opacity pure white text to paragraph or secondary footer links.
- Do not remove the arrow indicators from primary action buttons or status links.
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 
