Design a dark-mode website section: deep dark infrastructure with electric cyan neural lines routing autonomous pipeline intelligence.
LAYOUT
The composition is structured as an asymmetrical two-column hero stack over a grounded telemetry ribbon. Left column holds the badge, display typography, copy block, and twin CTAs with left alignment. Right column houses the visual interactive schematic. Below this hero split, a unified 4-column metric ribbon spans the grid width to anchor the section.
PALETTE (use these exact hex values)
- #03070c — Obsidian Void: Root background canvas framing the entire hero and interface mockup.
- #080e18 — Panel Dark: Background for the interactive schematic container and bottom metrics card.
- #0d1624 — Node Slate: Fill for input source chips and telemetry metric containers within the diagram.
- #38bdf8 — Cyan Beam: Primary brand accent, glowing route lines, text emphasis, and primary CTA fill.
- #4ade80 — Emerald Signal: Badge indicator dot, status percentages, and conversion KPI circles.
- #1a293d — Wire Stroke: Hairline structural borders around cards, pill badges, and node containers.
- #ffffff — Primary Text: Display headings, active stat values, and focused system labels.
- #8fa0b5 — Muted Slate: Supporting descriptive paragraph, unit labels, and secondary icon glyphs.
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans,Geist,System UI), weights 400/500/600/700. Sizes 12px caption, 14px body-sm, 15px body, 16px body-lg, 20px subheading, 28px heading, 52px display. Tracking -0.025em on display, 0 on body. The typography is clinical, modern, and authoritative. Using an unadorned neo-grotesque sans-serif like Inter with condensed headline tracking gives the interface an engineered, high-velocity feel. Inter or Geist are ideal open-source matches that ensure clean numeric legibility for dashboard readouts.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 10px, buttons 10px. Spacing on a 8px unit, 24px gaps, 80px between sections, 1240px container, comfortable density.
DEPTH
Depth is created purely through luminance and colored backlighting rather than black drop-shadows. The darkest tone is the base void, while cards sit on slightly lighter tinted dark slate (#070c16) outlined in hairline borders. Key operational hubs project a diffuse cyan glow (0 0 40px rgba(56, 189, 248, 0.25)) outward onto the canvas.
IMAGERY
Vector-only technical schematics replace photographic imagery. Diagrams consist of clean rounded geometry, monoline system icons, curved routing traces, and minimalist sparklines. Photography or skeuomorphic textures would break the cybernetic, agent-first product narrative.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-sided cyan synaptic wiring diagram where input sources funnel through an electric-glowing central core into live telemetry cards. This visual establishes the 'agentic routing engine' concept instantaneously.
MUST
- Use electric cyan (#38bdf8) strictly for active connectivity, focus states, and the primary CTA.
- Maintain high value contrast between the #03070c base canvas and pure white typography.
- Use soft cyan outer glow filters (blur 30px to 60px at 20-30% opacity) beneath core interface panels.
- Keep node connector paths smooth with bezier curves and exact dot-terminal anchors.
AVOID
- Do not introduce warm color spectrums like orange, red, or yellow into the primary palette.
- Never use heavy drop shadows on cards; use subtle 1px border highlights and low-opacity colored glows.
- Do not use sharp 0px corners; maintain deliberate 10px-16px curvature across all components.
- Avoid filling node cards with bright backgrounds; reserve solid fills exclusively for primary actions.
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. 在 DraPub 中尝试 
