Design a dark-mode website section: precision dark telemetry canvas with circuit-like node graphs and electric developer accents.
LAYOUT
The viewport is organized into two primary vertical chapters: a split conversion hero over a multi-column sitemap footer. The conversion tier dedicates the left column to value proposition copy and CTA buttons, while the right column hosts an integrated node network showing financial workflow orchestration. A full-bleed horizontal divider rule demarcates the footer, which arranges identity, four link columns, and an email capture form in a six-column rhythm.
PALETTE (use these exact hex values)
- #05070B — Canvas Dark: Deepest background base for entire page canvas and footer
- #0B0F17 — Surface Raised: Background fill for telemetry nodes, terminal windows, and social icon buttons
- #1E293B — Border Subtle: Hairline 1px borders on diagram nodes, input fields, and icon frames
- #0F172A — Border Divider: Horizontal dividing rule between CTA section and footer columns
- #2563EB — Electric Brand Blue: Primary action button background, highlighted hero brand span, and active connections
- #10B981 — System Green: Status indicator dot, 'Go live' gradient text start, and 200 OK code status
- #EF4444 — Runtime Coral: Target node highlight for 'Agent Runtime' core processing node
- #FFFFFF — Text Primary: Headings, active link headers, and primary node labels
- #94A3B8 — Text Secondary: Body copy, subheaders, and footer navigation links
- #475569 — Text Muted: Node subtext, metadata labels, and copyright notices
TYPOGRAPHY
Typeface Inter (or Geist,SF Pro Text,Helvetica Neue), weights 400/500/600. Sizes 11px caption, 12px body-sm, 14px body, 16px body-lg, 20px subheading, 48px display. Tracking -0.03em at display, -0.01em at body. The typographic tone is authoritative, quantitative, and engineering-grade. The pairing of neutral geometric grotesque (Inter) with an uncompromising developer mono (JetBrains Mono) conveys institutional finance reliability married to modern agentic automation. Free open-source substitutes include Geist Sans and Geist Mono.
GEOMETRY & SPACING
Corner radii — cards 10px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 24px gaps, 80px between sections, 1280px container, comfortable density.
DEPTH
Depth is created entirely without ambient blur or drop shadows. Structural hierarchy relies on surface luminosity steps from deep black (#05070B) to elevated node fill (#0B0F17), bound by precise 1px stroke boundaries (#1E293B). Glowing node borders (such as the coral accent on Agent Runtime) use focused 1px colored strokes rather than diffuse box-shadows.
IMAGERY
The interface contains no photography or generic editorial artwork. Visual expression is purely structural and telemetry-driven, rendered via wire-routed node diagrams, interactive execution graphs, and authentic mono code snippets. Off-brand graphics would include 3D renders, human lifestyle photography, or abstract gradient blobs.
SIGNATURE DETAIL — the thing that makes this design itself
The interactive circuit schematic diagram floating directly beside the primary conversion pitch. It materializes abstract financial AI architecture into concrete, interconnected nodes (Market Data -> Risk Controls -> Runtime -> Execution) connected by fine bezier wiring, anchoring the product's promise in visible engineering reality.
MUST
- Use JetBrains Mono or similar coding monospace exclusively for metadata kickers, schema keys, and status pills.
- Route all diagrammatic connector curves using smooth cubic beziers with 1.5px stroke weight.
- Restrict pure white (#FFFFFF) strictly to display titles, primary active labels, and button labels.
- Maintain high horizontal breathing room between the CTA hero copy (left 50%) and the visual node architecture (right 50%).
AVOID
- Do not introduce light mode surfaces or stark contrast cards; the canvas must remain pitch-dark (#05070B).
- Never use drop shadows or blurred glows behind text; depth is strictly vector-stroke and border defined.
- Do not make interactive buttons fully rounded pills; lock them strictly to an 8px radius.
- Avoid multi-color illustrations; graphic content must consist purely of technical schematics and code widgets.
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 中尝试 
