Design a dark-mode website section: tactical aerospace telemetry fused with deep obsidian surfaces, volumetric cobalt radar sweeps, and precision wireframe targets.
LAYOUT
The viewport is structured into three primary horizontal zones. The topmost zone houses a floating utility bar spanning edge-to-edge with maximum 1360px inner padding. The middle zone is a 2-column asymmetric hero: left holds eyebrow, display headline, body copy, and twin CTA buttons, while the right expands into the 3D radar hemisphere. The bottom zone features a 4-card sequence pipeline spanning the full content width.
PALETTE (use these exact hex values)
- #02040A — Obsidian Void: Deep ground canvas for the entire viewport and cinematic wireframe backdrop.
- #080D1A — Sub-surface Slate: Background fill for lower process cards and glass telemetry callout containers.
- #3B6DF0 — Tactical Cobalt: Primary interactive buttons, key display text emphasis, step indicators, and radar beams.
- #F43F5E — Target Reticle Crimson: Telemetry target acquisition frames, tracking dashed vectors, and high-threat confidence markers.
- #FFFFFF — Signal White: Primary display headings, active navigation links, and high-priority button typography.
- #8F9CAE — Telemetry Slate: Hero explainer body text, inactive navigation links, and step descriptive copy.
- #172136 — Border Horizon: Structural 1px outlines on bottom step cards, secondary buttons, and telemetry overlays.
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, Geist Sans), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 16px body, 20px subheading, 24px heading, 56px display. Tracking -0.03em at display, 0 at body. The typographic tone is authoritative, defense-grade, and computational. Inter delivers neutral geometric legibility at massive scale, while JetBrains Mono injects cold technical credibility into numerical readouts and HUD overlays.
GEOMETRY & SPACING
Corner radii — cards 10px, links 4px, inputs 8px, buttons 10px. Spacing on a 8px unit, 20px gaps, 80px between sections, 1360px container, comfortable density.
DEPTH
Depth is created entirely through optical luminescence, point-cloud density, and subtle 1px structural outlines rather than drop shadows. Layering relies on translucent dark planes (rgba(8, 13, 26, 0.75)) hovering directly over illuminated 3D wireframe graphics.
IMAGERY
Photorealistic 3D point-cloud and LiDAR-style wireframe renderings of terrains, cities, and hardware models. Visual assets must appear as active digital sensor captures rather than glossy rendered lifestyle photography or abstract SaaS vectors.
SIGNATURE DETAIL — the thing that makes this design itself
The volumetric glowing cobalt radar hemisphere paired with floating micro-HUD telemetry cards. It anchors the defense-tech narrative by turning abstract drone tracking into an intuitive, glowing volumetric spatial volume in the center-right canvas.
MUST
- Reserve the bright cobalt blue (#3B6DF0) strictly for primary actions, critical status, and singular keyword highlights.
- Use monospace font variants exclusively for data readings, coordinates, and system status telemetry.
- Maintain high figure-ground contrast by keeping panel borders at 1px thickness using #172136.
- Anchor workflow sequences with connected, horizontally flowing numbered cards separated by subtle directional arrows.
AVOID
- Never introduce warm surface fills, gradients, or non-tactical pastel colors onto this dark slate base.
- Avoid thick button borders or multi-color gradients on CTA buttons.
- Do not use generic illustrative iconography; stick strictly to LiDAR point clouds, wireframes, and tactical HUD markers.
- Never center-align the hero text lockup; it must remain crisp and left-aligned.
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 中尝试 
