Design a dark-mode website section: dense mission-control dark surfaces wired with high-frequency telemetry, glowing cyan nodes, and surgical electric blue accents.
LAYOUT
Structured as an asymmetrical product tour split into two unequal macro columns. The left column (approx 30% width) anchors the narrative with a hero title, subtitle, and vertical 4-step progressive disclosure menu. The right column (approx 70% width) renders the live bento command dashboard arranged into modular operations, live agents, integration grids, and compound outcomes.
PALETTE (use these exact hex values)
- #070C16 — Canvas Background: Deepest primary canvas background behind all modular card containers
- #0D172A — Card Surface: Level 1 container background for primary dashboard panels and steps
- #131F37 — Nested Inset Surface: Level 2 inner surface for metric tiles, inputs, and icon tiles
- #1E2F4A — Structural Border: 1px hairline borders delineating cards, sections, and row dividers
- #1D75FE — Electric Brand Blue: Active step highlights, primary action buttons, active pill numbers, and toggles
- #10B981 — Telemetry Emerald: Operational status dot, sparkline trends, positive percentage gains, and success badges
- #F59E0B — Warning Amber: Alert warning icons and fraud notification badges
- #F8FAFC — Text High Contrast: Main headlines, active list titles, and primary numerical values
- #8493A8 — Text Muted Slate: Descriptive body copy, inactive step headers, and timestamp metadata
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Display, Helvetica Neue), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 14px body, 16px subheading, 20px heading, 24px heading-lg, 36px display. Tracking -0.02em on headings, 0 on body. Surgical, quantitative, and authoritative. A clean neo-grotesque sans-serif (Inter/SF Pro match) handles dense tabular data, tiny 11px system captions, and 36px display titles with equal precision. Its neutral geometry reinforces the feeling of an enterprise-grade AI operations engine.
GEOMETRY & SPACING
Corner radii — cards 14px, links 4px, inputs 8px, buttons 6px. Spacing on a 4px unit, 16px gaps, 64px between sections, 1440px container, tight density.
DEPTH
Depth is created entirely through surface luminosity stacking rather than blur shadows. Background canvas sits at #070C16, cards step up to #0D172A, and nested interactive widgets lift to #131F37. Active focal elements utilize a localized soft radial glow in electric blue (#1D75FE) to float above adjacent panels.
IMAGERY
Contains zero photographic imagery; the visual language is entirely programmatic and data-driven. UI elements consist of vector line charts, smoothed glowing splines, node-graph constellations, and vendor integration logomarks set into dark squared rounded chips.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-state Interactive Stepper + Live Bento mirror: the left step navigation card uses an illuminated electric blue perimeter (#1D75FE) that visually orchestrates the multi-panel operational preview on the right.
MUST
- Use 1px solid #1E2F4A borders on cards to maintain structural separation against the dark ground.
- Highlight the single active step with an exact 1px solid #1D75FE stroke and glowing pill.
- Pair emerald green (#10B981) exclusively with positive metrics, system-operational status, and compounding gains.
- Enclose secondary controls inside 6px-radius button frames with high-contrast text.
AVOID
- Do not introduce pure white container cards; all surfaces must stay between #070C16 and #131F37.
- Do not use heavy drop shadows; rely on hairline borders and color luminosity for depth.
- Avoid warm reds or bright yellows except for specific amber warning flags (#F59E0B).
- Never let line heights in dense dashboard tables exceed 1.4, which breaks dashboard compactness.
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 
