Design a dark-mode website section: deep obsidian canvas illuminated by volumetric lidar telemetry and precision infrastructure metrics.
LAYOUT
Asymmetric two-column composition inside a 1360px container. The left 50% contains the category badge, display headline, paragraph, dual CTAs, and a 4-column metric grid. The right 50% holds the 3D perspective viewport overlapping into a floating developer terminal.
PALETTE (use these exact hex values)
- #08080A — Obsidian Ground: Dominant deep background for the entire hero section, absorbing visual noise.
- #111215 — Subtle Surface: Background fill for KPI stat cards and floating code terminal containers.
- #202227 — Surface Border: Fine structural borders framing metrics cards, pills, and secondary buttons.
- #DE3B3B — Crimson Primary: Primary conversion button fill, status badge indicator, and high-priority action point.
- #42C0A5 — Lidar Cyan: Color accent for uptime metrics, live radar indicators, and code highlights.
- #8490E8 — Lidar Violet: Gradient anchor on the headline emphasis word 'Built to Overshoot.' and telemetry dots.
- #FFFFFF — Pure White: Primary headline text, top navbar logo, and navigation header CTA button.
- #8E919A — Muted Slate: Body paragraph explanation, subheadings, and secondary metric labels.
- #F4EFEA — Warm Foundation: High-contrast off-white section background peeking from the bottom diagonal edge.
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, 22px subheading, 28px heading, 54px display. Tracking -0.03em on display, 0.05em on mono/caps. The voice is architectural, authoritative, and developer-first. Clean grotesque sans-serifs at tight negative tracking convey infrastructure-grade reliability, while monospace snippets ground the system in production code reality.
GEOMETRY & SPACING
Corner radii — cards 14px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 16px gaps, 96px between sections, 1360px container, comfortable density.
DEPTH
Depth is created via volumetric 3D lidar point-cloud graphics emerging out of pure black. UI cards use subtle 1px semi-translucent borders (#202227) without heavy drop shadows to preserve optical flatness against the 3D space.
IMAGERY
Volumetric cyan and electric-blue wireframe lidar scans showing vehicles and urban roadways with bounding boxes. Avoid raster photography or flat cartoon illustrations; imagery must represent low-level machine vision data.
SIGNATURE DETAIL — the thing that makes this design itself
The juxtaposition of a glowing point-cloud lidar vehicle scan with a live floating JSON terminal snippet anchored by a four-up latency metric ribbon.
MUST
- Use high-contrast white typography on the obsidian background for immediate visual impact.
- Accent key value-proposition terms with subtle soft gradient shifts (blue-to-lavender or cyan-to-green).
- Frame code terminal outputs strictly in fixed-width monospace with realistic network headers.
- Keep stat cards compact and modular, allocating equal column widths in four-card arrays.
AVOID
- Never use generic photography; vision models must be represented via lidar or point-cloud renderings.
- Avoid high-contrast neon borders around cards; keep strokes subdued at #202227.
- Do not center the hero headline; left-align all copy to balance the right-side visual depth.
- Never clutter the top navigation bar with dropdown menus or heavy button groups.
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 中尝试 
