Design a dark-mode website section: precision-engineered dark cybernetics bridging behavioral telemetry streams with luminescent infrastructure nodes.
LAYOUT
The header spans full-width with a centered navigation link cluster and right-aligned ghost CTA. The hero utilizes an asymmetrical two-column layout: left column contains the semantic value proposition, primary dual CTAs, and trust signals, while the right column hosts the interactive node pipeline. Beneath the hero fold sits a cohesive four-metric ribbon, directly preceding the API code demonstration section.
PALETTE (use these exact hex values)
- #04070d — Void Canvas: Primary background canvas creating infinite depth across all sections
- #0a101d — Glass Surface: Semi-translucent container background for interactive nodes, metrics bar, and code previews
- #2fd3f8 — Cyan Luminescence: Primary conversion button fill, active eyebrows, and hero volumetric glow highlight
- #10b981 — Emerald Output: Positive verification badges, feature checkmarks, and ambient green edge backlight
- #f59e0b — Telemetry Amber: Secondary review state indicator in decision output nodes
- #ef4444 — Signal Crimson: Blocked fraud signal state in the decision node architecture diagram
- #1a2436 — Subtle Border: Card borders, divider rules between metrics, and node connector paths
- #f8fafc — Text Primary: Headings, primary CTA text in ghost state, and key numerical metrics
- #8493a8 — Text Muted: Body copy, node descriptive subtext, and navigation link items
TYPOGRAPHY
Typeface Inter (or Geist Sans,SF Pro Display,Plus Jakarta Sans), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 14px body, 16px body-lg, 18px subheading, 32px heading, 54px display. Tracking -0.03em at display, 0.12em at mono eyebrow. The voice is authoritative, deterministic, and engineered for high-scale developer trust. Neutral neo-grotesque type communicates surgical efficiency without quirky humanist distractions, while tracked monospaced labels ground the design in low-level systems infrastructure.
GEOMETRY & SPACING
Corner radii — cards 14px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1240px container, comfortable density.
DEPTH
Depth is created without harsh drop shadows through luminescence layering and surface opacity. Frosted glass panels (#0a101d at 75% opacity) float over radial background blurs of cyan (#0ea5e9 at 15%) and emerald (#10b981 at 12%). Key interactive hubs feature subtle 1px internal highlight borders with linear gradients transitioning from cyan to transparent.
IMAGERY
Completely devoid of stock human imagery or photorealism. Visual weight is carried entirely by isometric telemetry diagrams, glowing wireframe primitives, and precise SVG circuit tracks. Statuses are expressed through clean vector geometry and color-coded node pills.
SIGNATURE DETAIL — the thing that makes this design itself
The three-stage horizontal pipeline diagram: a frosted 'Signal Sources' column routing curved vector traces into a glowing isometric central processor, which dispatches branching decision vectors into color-coded status pills.
MUST
- Use atmospheric backdrop glows (cyan and green) sparingly to anchor focal architectural regions.
- Enforce strict 1px subtle slate borders (#1a2436) around all glass panels to retain structure.
- Keep typography in display titles tightly tracked (-0.035em) with sentence-case punctuation.
- Ensure connector lines between data nodes use smooth cubic beziers with luminescent endpoint dots.
AVOID
- Do not introduce pure white background panels or light mode cards into this deep ecosystem.
- Never use generic photography or human portraits; rely strictly on structural systems diagrams.
- Avoid thick borders (>1px) on containers which would destroy the clinical glassmorphism aesthetic.
- Do not style secondary ghost buttons with colored fills; preserve outline transparency.
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. 在 DraPub 中尝试 
