Design a dark-mode website section: precision-engineered dark canvas connecting agentic nodes through neon metrics, hairline borders, and glowing telemetry.
LAYOUT
The section adopts a two-tiered grid layout. The top tier features an asymmetric 50/50 split containing the headline block with category badge on the left, paired with an interactive node diagram card on the right. The bottom tier arranges five modular cards in an aligned horizontal row: a wide feature list on the left, three uniform metric cards in the center, and an enterprise checklist card on the right.
PALETTE (use these exact hex values)
- #07090e — Void Canvas: Primary deep space background behind all cards and structural layouts
- #0d121d — Panel Background: Background fill for all feature modules, metric cards, and node panels
- #1a2336 — Hairline Stroke: 1px container boundaries providing structural contrast against dark ground
- #ffffff — Pure White: Primary headings, display titles, and strong semantic card headers
- #828c9e — Muted Slate: Supporting descriptions, secondary metadata, and diagram label text
- #4e75ff — Electric Cobalt: Primary brand color, node badges, success rate metric, and lead sparkline
- #b37ff9 — Lilac Violet: Speed multiplier metric, intermediate diagram nodes, and headline gradient stop
- #4ade80 — Emerald Mint: Enterprise tag, compliance checkmarks, and satisfaction rating metric line
- linear-gradient(90deg, #4e75ff 0%, #b37ff9 100%) — Hero Text Gradient: Used exclusively on the high-emphasis keyphrase human expertise in display title
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Display, Roboto), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px subheading, 20px heading, 44px heading-lg, 52px display. Tracking -0.02em at display, 0.05em at caps. The typography is cold, precise, and authoritative, matching high-reliability infrastructure software. The clean geometric grotesk style of Inter gives equal weight to code-level API mentions and executive-level security certifications. Tight negative tracking on display headlines creates a dense, modern editorial presence that requires no custom decorative fonts.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 999px. Spacing on a 8px unit, 16px gaps, 80px between sections, 1240px container, comfortable density.
DEPTH
Elevation is achieved through stroke luminance and selective ambient glow rather than drop shadows. Cards rely on a 1px perimeter border (#1a2336) against the #07090e background to define boundaries. Interactive nodes and sparkline endpoints utilize subtle radial box-shadow glows matching their respective accent colors to suggest active power.
IMAGERY
This interface eschews photography and skeuomorphic illustration entirely in favor of abstract technical schematics and telemetry curves. Visual assets are limited to clean line-art icons, node-link diagrams with dashed elliptical paths, and single-stroke mathematical bezier charts. Any photographic asset or 3D render would contradict this precise, developer-first aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The design's signature element is the trio of metric telemetry cards, where oversized 52px numbers each inherit a distinct neon signature (blue, violet, mint) that flows directly into a baseline sparkline ending in a concentric glowing node dot. It visually translates abstract platform stats into live hardware-like diagnostic readouts.
MUST
- Maintain strict 1:1 color pairing between a metric stat number and its bottom sparkline path.
- Use 1px borders (#1a2336) on all cards to preserve architectural definition without heavy shadows.
- Limit the text gradient exclusively to high-impact keywords in major section headlines.
- Reserve neon mint green (#4ade80) strictly for trust, security, and enterprise status markers.
AVOID
- Never use solid bright white for secondary descriptive copy; use #828c9e to prevent glare.
- Avoid floating drop shadows; depth is strictly created via stroke luminance and solid surface offsets.
- Do not mix round pill tags with square metric cards; keep badge radii 999px and cards 16px.
- Never plot multi-colored lines within a single metric card sparkline.
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 中尝试 
