Design a dark-mode website section: deep void canvas illuminated by focused blue telemetry, rendering spatial physical intelligence through rigorous glass interfaces.
LAYOUT
Structured around a persistent top navigation bar (logo left, central text links, dual action CTAs right) followed by a 2-column hero partition. The left column commands attention with an eyebrow pill badge, a multi-line display headline, explanatory paragraph, dual CTA buttons, and inline trust features. The right column showcases the perception console card, while the section terminates in a horizontal 4-column metric band.
PALETTE (use these exact hex values)
- #05070E — Obsidian Void: Deep background surface underpinning the entire hero section and viewport.
- #0B101B — Console Slate: Translucent card surface for the primary API and architecture display frame.
- #1B2333 — Subtle Outline: One-pixel container borders, hairline dividers, and ghost button outlines.
- #4D77FF — Agent Blue: Primary call-to-action fills, headline keyword highlights, and active pipeline badges.
- #638CFF — Electric Glow: Radial glow gradients and particle point-cloud luminescence in background imagery.
- #FFFFFF — Luminescent White: High-emphasis display typography, primary button labels, and selected tabs.
- #8E9BAE — Muted Spec: Body copy, supporting architecture descriptions, metric labels, and inactive navigation links.
- #34D399 — Telemetry Node Green: Used selectively in hardware action icons and endpoint status indicators.
TYPOGRAPHY
Typeface Inter (or Geist Sans,SF Pro Text), weights 400/500/600. Sizes 11px caption, 13px body-sm, 15px body, 17px body-lg, 20px subheading, 32px heading, 54px display. Tracking -0.02em at display, 0 at body, 0.08em at caps. The typographic tone is architectural, rational, and unembellished, mirroring elite developer infrastructure tools like Stripe and Vercel. Inter provides ultra-legible neutral geometry that lets code and data lead, while tight headline letter-spacing conveys precision. Geist or SF Pro Text serve as drop-in visual twins without altering the tone.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 24px gaps, 88px between sections, 1280px container, comfortable density.
DEPTH
Depth is created entirely through optical transparency and layered luminance rather than traditional blurry drop shadows. Surfaces step from #05070E ground up to #0B101B panels using crisp 1px strokes (#1B2333) and a diffuse, low-opacity electric blue radial back-glow behind the hardware console.
IMAGERY
Visual assets lean exclusively into technical spatial telemetry: 3D point clouds, LiDAR ray fields, and sparse particle matrices rendered in monochrome cyan and cobalt. Avoid stock photography, human lifestyle portraits, or cartoon illustrations that compromise the physical engineering tone.
SIGNATURE DETAIL — the thing that makes this design itself
The defining identity signature is the dual-mode 'Console Card' that reconciles pure raw code on the left with modular physical hardware flow nodes on the right, joined by an illuminated blue signal arrow. To use it correctly, ensure the code on the left directly correlates to the pipeline nodes visualized on the right; decoupling them turns it into generic decorative tech filler.
MUST
- Reserve the saturated electric blue (#4D77FF) strictly for brand nouns, active primary actions, and live telemetry signals.
- Use JetBrains Mono exclusively for syntax, endpoints, and machine-readable data payloads.
- Maintain high contrast by pairing pure white (#FFFFFF) for titles and slate (#8E9BAE) for secondary explanations.
- Keep container borders to exactly 1px using dark slate (#1B2333) to preserve technical crispness.
AVOID
- Do not introduce warm hues like orange, yellow, or red outside of functional error alerts.
- Avoid heavy drop shadows; use low-opacity border strokes and soft localized radial glows instead.
- Never apply rounded corners greater than 8px to standard buttons or interactive input controls.
- Do not set long prose or marketing body copy in monospace type.
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 中尝试 
