Design a dark-mode website section: deep midnight canvas orchestrating complex data flows through glowing cyan conduits and rounded telemetry cards.
LAYOUT
The section header anchors the top-left while a linear 5-step horizontal flow sits on the top-right. Below, the layout divides into an asymmetric two-column grid: a dominant left card spanning roughly 50% width houses the full neural architecture diagram, while the right side is organized into a balanced 2x2 grid of modular process cards.
PALETTE (use these exact hex values)
- #080c11 — Void Canvas: Deepest background layer across the entire page.
- #0f1722 — Elevated Surface: Primary fill for large feature cards and grid panels.
- #1e293b — Surface Border: Structural borders delineating cards, pills, and input boxes.
- #131d2b — Inner Widget Surface: Background fill for nested metrics, integration tiles, and prompt bars.
- #22d3ee — Electric Cyan: Primary brand accent, glowing circuit traces, active step badge, and core nexus icon.
- #22c55e — Telemetry Emerald: Positive metrics, 'Live' tag, status checkmarks, and automated sequence indicators.
- #f8fafc — Text Primary: High-contrast headings, active values, and metric values.
- #94a3b8 — Text Secondary: Subtitles, body copy, descriptions, and passive step titles.
- #64748b — Text Muted: Overline category tags, metadata labels, and subtle connection paths.
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, Geist, SF Pro Display), weights 400/500/600/700. Sizes 10px caption, 11px body-sm, 13px body, 14px body-lg, 16px subheading, 18px heading, 22px heading-lg, 36px display. Tracking -0.02em at display, 0.01em at caption. The typographic tone is authoritative, highly technical, and calm, typical of enterprise developer tools and AI infrastructure. Inter (or Geist/Plus Jakarta Sans) conveys precise engineering without distraction, using negative tracking on large headings to feel compact and tight.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 20px gaps, 72px between sections, 1360px container, comfortable density.
DEPTH
Depth is created purely through surface luminance stacking (from #080c11 base to #0f1722 cards and #131d2b nested containers) combined with crisp 1px borders (#1e293b). Box shadows are entirely avoided in favor of architectural border definition. A soft localized radial glow emerges only from behind the central orchestration icon.
IMAGERY
The visual language is purely schematic and UI-driven: technical vector flow diagrams, micro-connectors, app icons (Outlook, Google Calendar, Teams), and telemetry data tables. No photographic elements or 3D character illustrations are permitted. Technical iconography is strictly line-based at 1.5px stroke weight.
SIGNATURE DETAIL — the thing that makes this design itself
The horizontal neural nexus diagram: a central glowing cyan hexagon with radiating circuit traces connecting left-side inputs to right-side outputs. Misusing it as a generic decorative background rather than a literal data-transformation pipe destroys its explanatory power.
MUST
- Keep borders hairline thin (1px solid #1e293b) around all surface blocks.
- Use electric cyan (#22d3ee) strictly for the central orchestration state and active step.
- Render metrics with tabular figures and muted suffix symbols.
- Nest inner UI widgets with a slightly lightened surface (#131d2b) to build depth without shadows.
AVOID
- Never introduce heavy drop shadows or colored ambient glows outside the central node.
- Do not use saturated background fills; canvas must remain nearly black slate (#080c11).
- Avoid bright white borders or thick lines exceeding 1px.
- Do not mix multiple accent hues; reserve green purely for success and live telemetry.
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 
