Design a dark-mode website section: pure carbon surfaces pierced by ambient particle fields and surgical periwinkle accents.
LAYOUT
The header spans full-width with a left logo lockup, centered clean text navigation, and right-aligned auth actions. Below, the hero splits into an asymmetric 50/50 layout: left-aligned headline stack with double CTA and compliance seals, facing a high-tech runtime monitor card on the right. Below the hero visualization, a unified 4-column metrics ribbon anchors the fold, followed by a muted centered client category bar.
PALETTE (use these exact hex values)
- #08090C — Void Canvas: Deepest canvas background behind all hero content and particle backdrops
- #0E1118 — Carbon Panel: Background fill for floating metric cards, runtime diagrams, and elevated surfaces
- #1F2430 — Wire Border: Hairline borders on metric panels, interactive diagram nodes, and secondary pill buttons
- #5D68FB — Signal Violet: Primary CTA fill, glowing central logo glyph, and active accent state
- #7380FD — Electric Periwinkle: Hover highlight and secondary gradient tone on primary buttons and icons
- #22C55E — Optimal Green: Live status indicator dot, success badges, and positive telemetry deltas
- #EF4444 — Critical Coral: Threat blocked notification badges and defensive security telemetry
- #FFFFFF — Pure Frost: Headlines, high-level metrics, and high-priority navigational labels
- #8A94A6 — Muted Slate: Subtitles, table/card descriptors, secondary metrics, and inactive link text
TYPOGRAPHY
Typeface Inter Display (or Geist, Plus Jakarta Sans, SF Pro Display), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px body-lg, 28px heading, 56px display. Tracking -0.03em at display, 0.04em at caps. The typographic tone is authoritative, analytical, and uncompromisingly modern. Using a dense geometric grotesque with tight tracking conveys infrastructure-grade reliability and precision engineering. If Inter Display is unavailable, Geist or Plus Jakarta Sans capture the identical crisp developer-tool aesthetic.
GEOMETRY & SPACING
Corner radii — cards 14px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 20px gaps, 96px between sections, 1240px container, comfortable density.
DEPTH
Depth is created entirely through surface contrast and subtle hairline borders rather than blurred drop shadows. The background particle cloud creates atmospheric perspective, while foreground cards use slightly higher luminance fills (#0D1016 over #08090C) bordered by 1px subtle wireframes (#1F2430) to sit above the void.
IMAGERY
Visual assets consist of an intricate, mathematical vector particle wave converging into an AI telemetry decision node. It feels scientific, simulated, and computational—strictly devoid of human photography, abstract 3D blobbiness, or cartoon illustrations.
SIGNATURE DETAIL — the thing that makes this design itself
The focal convergence of an organic particulate vector cloud into a central glowing 4-point star telemetry node. It physically illustrates 'runtime AI filtering' visually on the right half of the hero. Misusing it involves turning it into a generic neon gradient mesh rather than a tightly channeled, focused stream of data points.
MUST
- Use solid #5D68FB periwinkle sparingly to direct immediate attention to key conversion points.
- Pair heavy 56px display titles with subtle, low-opacity (#8A94A6) 16px body copy.
- Enclose all telemetry panels and metric items in 1px solid #1F2430 hairline borders.
- Maintain strict 4-column metric distribution aligned neatly beneath the hero visualization.
AVOID
- Never introduce colorful saturated gradients across surfaces; limit saturation strictly to accents.
- Do not use drop shadows with high opacity; use subtle 1px border highlights instead.
- Avoid pill shapes for primary metric cards; confine 999px radius to tags and interactive badges.
- Do not use warm tones like yellows, oranges, or warm browns anywhere in the interface.
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 中尝试 
