Design a dark-mode website section: deep midnight telemetry for enterprise autonomous intelligence with high-voltage chromatic data points.
LAYOUT
Asymmetric two-column split layout on top, transitioning into a full-width 4-cell metric dock below. The left column holds editorial framing and core product values, while the right holds an expansive process canvas detailing autonomous agent routing. The lower strip unifies quantified business impact across an evenly spaced horizontal bar.
PALETTE (use these exact hex values)
- #070B14 — Canvas Midnight: Global application viewport background and deep negative space
- #0D1524 — Card Surface: Background fill for the interactive flow diagram and bottom metrics panel
- #121D33 — Inner Tile Surface: Background for workflow sub-cards and icon container tiles
- #38BDF8 — Telemetry Cyan: Headline emphasis, eyebrow text, central node aura, and data fill metric
- #34D399 — Yield Emerald: Working capital metric highlight and optimization icon indicators
- #A855F7 — Velocity Violet: Decision velocity metric value and time-related node highlights
- #FFFFFF — Primary Text: Display headings, diagram node titles, and card headers
- #8899B5 — Secondary Text: Body descriptions, explanatory notes, and metadata sublabels
- #1E2C47 — Subtle Border: 1px structural borders dividing cards, tiles, and horizontal metric units
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, SF Pro Display, General Sans), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px subheading, 22px heading, 36px display, 44px heading-lg. Tracking -0.02em at display, 0.08em at uppercase labels. Clean, authoritative, and computationally precise. The grotesque sans-serif delivers low-friction enterprise readability, utilizing tight headline tracking (-0.02em) to evoke cutting-edge tech infrastructure. Substitute with Inter or General Sans without losing the systematic product tone.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 24px gaps, 64px between sections, 1360px container, comfortable density.
DEPTH
Depth is created purely through luminosity layering on an obsidian field rather than traditional drop shadows. Background starts at base #070B14, structural modules elevate to #0D1524 with subtle 1px strokes, and focal components emit volumetric neon blooms (e.g. 0 0 25px rgba(56, 189, 248, 0.3)).
IMAGERY
No photographic imagery or figurative illustrations are used. The visual identity relies exclusively on architectural telemetry, clean technical line icons (2px stroke), subtle vector connection graphs, and high-precision typographic metrics.
SIGNATURE DETAIL — the thing that makes this design itself
The glowing central agent squircle bridging multi-source input streams to execution outputs with curved luminous telemetry lines. Misusing this pattern by turning the glow into an uncontrolled gradient spread or cluttering the vectors with text tags ruins the clean computational balance.
MUST
- Use distinct semantic colors (cyan, emerald, violet) solely for data figures and corresponding icons.
- Maintain high value contrast between #FFFFFF titles and #8899B5 supporting descriptions.
- Keep card surfaces at #0D1524 with a strict 1px border (#1E2C47) to preserve crisp boundaries.
- Use soft neon glow filters strictly around central AI core nodes or active diagram focal points.
AVOID
- Never use warm colors (red, orange, yellow) unless explicitly indicating critical operational failure.
- Do not drop box shadows onto surfaces without cyan or deep blue chromatic light leakage.
- Never set paragraph body copy to pure white; keep body text at #8899B5.
- Do not use sharp 0px corners; all cards must conform to 12px-20px radii.
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 
