Design a light-mode website section: tactical computer-vision telemetry framed by crisp off-white canvas and deep dark-mode product theater.
LAYOUT
Asymmetric hero split into two primary zones: left column holds metadata pill, 56px headline, copy, and CTAs; right side commands attention with a wide 680px dark comparative product simulator. A terminal-style developer API preview anchors the composition across the full container width below.
PALETTE (use these exact hex values)
- #F7F7F8 — Canvas Background: Light page background carrying fine radial background glow in hero corners
- #080B10 — Obsidian Deep: Solid primary dark background for main header bar, console shell, and lower code card
- #0F1420 — Slate Surface: Background for comparison sub-panels, metrics bars, and code snippet backgrounds
- #3865FB — LiDAR Laser Blue: Gradient start in primary headline, active pill tag, and volumetric sensor beam
- #E53565 — Precision Magenta: Gradient finish in headline, critical alert icons, and low-fidelity point cloud meshes
- #22C55E — Sensor Green: System status ping dot, verification badges, and positive metrics checkmarks
- #0D1117 — Charcoal Text: Headlines and high-contrast labels on light surfaces
- #5A6578 — Muted Text Grey: Sub-headings on light canvas and secondary metadata on dark cards
- #1E2638 — Card Border Dark: Hairline 1px borders surrounding panels and code modules in dark mode
TYPOGRAPHY
Typeface Inter (or Geist, SF Pro Display, Plus Jakarta Sans), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px body-lg, 24px subheading, 32px heading, 56px display. Tracking -0.03em display, -0.01em body. Engineered, authoritative, and clinical. The tight tracking (-0.03em) in the display typography communicates machine-grade precision, perfectly supported by monospace telemetry accents.
GEOMETRY & SPACING
Corner radii — cards 20px, links 6px, inputs 8px, buttons 10px. Spacing on a 4px unit, 20px gaps, 64px between sections, 1280px container, comfortable density.
DEPTH
Depth is created structurally rather than with ambient shadows. Deep charcoal panels (#080B10) slice sharply through the off-white canvas, while laser point-cloud glows inside dark cards create recessed volumetric depth.
IMAGERY
Synthetic computer-vision aesthetic combining physical industrial security camera hardware with cyan-and-purple 3D point-cloud LiDAR scans of freight logistics. Photography must look industrial, tactical, and digitally measured; never stock lifestyle or warehouse workers.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-state comparison theater card: an obsidian chassis dividing red manual operational pain from automated blue LiDAR camera tracking, linked by a floating circular slider knob.
MUST
- Use a two-tone text gradient (Laser Blue to Precision Magenta) exclusively on punchy anchor words in headings.
- Pair dark console units (radius 20px) directly against a stark off-white (#F7F7F8) page background.
- Tag operational systems with live pulsing green status dots (#22C55E) enclosed in pill badges.
- Use 1px border strokes (#1E2638) to separate modules within dark frames instead of drop shadows.
AVOID
- Do not invert the layout to all-dark; the light background framing dark hardware is the core visual tension.
- Avoid blurred or soft raster photos; imagery must be synthetic 3D point clouds or sharp LiDAR visualisations.
- Do not use heavy multi-colored illustration or cartoonish iconography.
- Never omit the 1px interior divider separating the API bar from the comparison console.
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 中尝试 
