Design a dark-mode website section: deep navy telemetry canvas glowing with luminous violet nodes, precision diagramming, and frosted dark glass cards.
LAYOUT
The section adopts a multi-row asymmetric bento grid. The top section splits between an editorial intro anchor on the left and a double-width hero feature card with an interactive orbit visual on the right. Subsequent rows contain paired half-width and third-width cards showcasing integrations, bug reproduction flows, CI/CD code blocks, agent scaling, and security compliance.
PALETTE (use these exact hex values)
- #07090e — Canvas Abyss: Root background canvas behind all bento cards and dotted routing paths
- #0e131f — Card Surface: Background fill for all primary and secondary bento feature cards
- #1e2638 — Card Stroke: 1px hairline borders for card containers, orbit guides, and connecting dashed wires
- #141b2b — Subtle Well: Inner inset containers such as code blocks, tag badges, and icon tiles
- #8b5cf6 — AI Violet Core: Gradient focal point for autonomous AI agent nodes and checkmark highlights
- #38bdf8 — Swarm Cyan: Data point particles representing parallel runner nodes and telemetry points
- #f87171 — Security Salmon: Shield glyph and bug alert indicator gradient accents
- #ffffff — Heading Crisp: Primary headings, modal text, and high-emphasis labels
- #94a3b8 — Muted Slate: Secondary description copy, inactive node text, and code snippet keys
TYPOGRAPHY
Typeface Inter (or Geist Sans, SF Pro Display, Plus Jakarta Sans), weights 400/500/600/700. Sizes 10px caption, 12px body-sm, 14px body, 16px body-lg, 20px subheading, 24px heading, 38px heading-lg. Tracking -0.02em at headings, +0.06em at uppercase badges. The typography conveys surgical engineering authority through an ultra-clean geometric neo-grotesque (Inter or Geist). Tight tracking (-0.02em) on bold headings keeps statements compact and impactful, while generous line heights on body copy preserve technical legibility against dark surfaces.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 20px gaps, 80px between sections, 1240px container, comfortable density.
DEPTH
Depth is created entirely through surface contrast and ambient illumination rather than conventional drop shadows. Cards sit slightly elevated above the void canvas through their subtle blue-gray borders (#1e2638) and dark navy fill (#0e131f). Key diagrams emit a soft, localized radial glow behind their focal glyphs to simulate back-lit instrument dials.
IMAGERY
Visual assets are exclusively bespoke vector schematics, wireframes, and data diagrams. They mimic engineering schematics—including orbital rings, dashed circuit routes, code snippets, and abstract swarm particles. Photography, 3D clay characters, or cartoon illustrations are strictly forbidden.
SIGNATURE DETAIL — the thing that makes this design itself
The signature move is the telemetric schematic graphic language: concentric orbit rings, dashed signal wires, and pill-shaped satellite nodes orbiting a central luminous gradient icon. When replicating, maintain strict 1px stroke weight on all orbital rings and keep node pills styled with subtle borders against the dark card surface.
MUST
- Keep all card backgrounds at solid #0e131f with 1px border #1e2638 and 16px corner radius.
- Prefix card titles with a two-digit index inside a dedicated pill tag before category copy.
- Use radial glows sparingly behind key glyphs, keeping blur radius between 40px and 80px.
- Render schematic diagram tracks in precise 1px solid or dashed lines (#1e2638).
AVOID
- Never use pure black (#000000) for cards; panels must remain tinted navy (#0e131f).
- Do not use colorful drop shadows; illumination must come from background radial gradients.
- Never omit the numeric category tags (e.g., '01 AI-POWERED TESTER') above card headings.
- Avoid bright solid fills on buttons or cards; preserve the deep telemetry aesthetic.
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 中尝试 
