Design a dark-mode website section: deep cosmic dark mode engineered with bioluminescent telemetry nodes and precision supply chain intelligence.
LAYOUT
The page opens with a standard 64px fixed-width header spanning 1280px maxWidth. The hero split-screen assigns approximately 45% width to editorial value propositions and compliance badges on the left, while the right 55% is occupied by the large 16px-radius orbital network simulator. Below the hero break, a 5-column grid cleanly distributes four identical KPI metric cards and one double-width agent swarm radar.
PALETTE (use these exact hex values)
- #050914 — Deep Cosmos Base: Primary full-bleed background canvas underpinning all navigation and layout containers.
- #091122 — Obsidian Surface: Background fill for the hero interactive globe viewport and metric telemetry cards.
- #15223c — Telemetry Border: 1px hairline strokes separating metric cards, badges, and dashboard interactive boundaries.
- #1b64f2 — Electric Cobalt: Primary CTA fill, active node indicators, and the initial headline gradient wash.
- #4ee2cb — Bioluminescent Cyan: Sparkline accents, on-time supplier telemetry, and the step 02 node indicator.
- #e14ca0 — Pulse Magenta: Inventory reduction metric line, step 03 node tag, and particle horizon highlights.
- #ffffff — Starlight White: Primary headlines, KPI numerals, and white CTA label typography.
- #7f90a6 — Muted Slate: Secondary descriptors, navigation links, and comparative metric footer annotations.
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, Geist, Roboto), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 14px body, 16px body-lg, 20px subheading, 40px heading, 54px display. Tracking -0.02em at display, 0 at body, +0.06em on badges. The type selection conveys clinical engineering authority, computational precision, and enterprise stability. Rendered in Inter or a comparable Swiss neo-grotesque, the letterforms remain razor-sharp at high display sizes (-0.025em tracking) while retaining impeccable legibility in 11px micro telemetry tags. Free open-source alternatives like Plus Jakarta Sans or Geist preserve this austere aerospace tone.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 8px. Spacing on a 4px unit, 16px gaps, 64px between sections, 1240px container, comfortable density.
DEPTH
Depth is created entirely through luminous optical stratification rather than drop shadows. Surface layers step gently from #050914 background to #091122 card containers, delineated by 1px #15223c strokes. Bioluminescent cyan and cobalt glow gradients cast soft ambient halos behind point-cloud graphics, creating an impression of backlit optical instruments floating in a vacuum.
IMAGERY
Visual assets consist exclusively of procedural particle fields, 3D point-cloud globes, and fine glowing spline networks. Imagery emphasizes computational density, mathematical elegance, and aerospace-grade telemetry. Stock photography, photorealistic human portraits, or illustrative cartoon assets are strictly forbidden.
SIGNATURE DETAIL — the thing that makes this design itself
The standout identity driver is the bioluminescent planetary horizon graphic paired with numbered, floating frosted-glass telemetry badges (01 Plan, 02 Source, 03 Negotiate, 04 Resolve) tethered by delicate glowing spline arcs. This specific visual metaphor transforms abstract autonomous software into a physical orbital command console.
MUST
- Keep card surfaces at #091122 with 1px #15223c borders to ensure deep visual depth.
- Pair every numerical metric with its dedicated colored neon trend sparkline.
- Use distinct accent colors strictly to code functional workflow steps: blue (01), cyan (02), magenta (03).
- Restrain typography to single neo-grotesque families with tabular numbers for data modules.
AVOID
- Do not use heavy drop shadows with black blur; use subtle 1px border highlights instead.
- Never replace the deep indigo/black canvas (#050914) with neutral gray or pure #000000.
- Avoid solid bright colored backgrounds on large cards; keep luminescence confined to lines and particles.
- Do not set display headings in all-caps; reserve uppercase strictly for eyebrow pills and technical tags.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1440:896. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. Try in DraPub 
