Design a light-mode website section: clinical aerospace engineering translated into high-contrast white space, illuminated hardware exploded views, and telemetry-style metrics.
LAYOUT
The section adopts a two-tier architectural composition. The top zone is a split hero: the left half holds an eyebrow badge, two-line bold statement, short paragraph, and dual CTAs, while the right half features the exploded vehicle with micro-HUD badges and schematic crosshairs. Below, an aligned four-column grid organizes high-level telemetry statistics, which directly map into four modular feature link cards across the base.
PALETTE (use these exact hex values)
- #FAFAFC — Canvas White: Global background providing clinical clarity and spatial depth behind hardware renders
- #FFFFFF — Surface Card: Background for floating callouts and interactive payload navigation cards
- #0062FF — Avionics Blue: Primary action fill, prominent stat typography, badge icons, and key visual accents
- #0F172A — Deep Slate: Primary display headlines, card titles, and high-emphasis tactical figures
- #5A6679 — Telemetry Grey: Body descriptions, metric subtitles, and secondary mission metadata
- #E2E8F0 — Subtle Border: Hairline 1px bounding boxes on lower cards, metric dividers, and floating overlays
- #10B981 — Mint Accent: Status indicator and icon accent for risk reduction and mission readiness
- #F59E0B — Amber Tint: Icon container background for fiscal efficiency and payload telemetry
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Display, Roboto), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px subheading, 38px heading, 48px display. Tracking -0.03em on display, 0.05em on badges. The typographical voice is objective, authoritative, and mission-focused. Rendered in a high-clarity neo-grotesque sans-serif (Inter match), tight tracking on large headings creates technical compression, while generous leading on supporting paragraphs ensures quick legibility under operational scrutiny.
GEOMETRY & SPACING
Corner radii — cards 12px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 20px gaps, 96px between sections, 1360px container, comfortable density.
DEPTH
Depth is handled through optical separation rather than heavy physical drop shadows. Floating cards and badges rely on subtle translucent white backing with faint 1px slate-tinted borders and a delicate blur (0 4px 16px rgba(15, 23, 42, 0.04)). The exploded 3D render generates its own photorealistic cast shadow, grounding the hardware firmly above the canvas.
IMAGERY
The visual anchor is a high-fidelity, studio-lit 3D CAD exploded render of an autonomous drone, revealing sensors, optical payload gimbals, and battery assemblies floating in alignment. Lighting is crisp and directional with an internal cool blue LED glow. Hand-drawn illustrations, flat vector graphics, or generic military photography would contradict this surgical hardware aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the combination of the photorealistic exploded modular hardware visual paired directly with telemetry-style metric columns and matching four-column micro-cards. It communicates plug-and-play capability at a single glance. Misusing this pattern by crowding the 3D space with text or eliminating the metric alignment breaks the clean engineering narrative.
MUST
- Anchor data metrics with oversized blue figures (36-40px) over bold, compact supporting labels.
- Use 1px borders (#E2E8F0) and minimal shadows (0 2px 8px rgba(0,0,0,0.04)) on white surface cards.
- Position registration crosshairs (+) subtly in the background to reinforce engineering schematics.
- Ensure the hero render is exploded neatly into distinct modular components along a diagonal axis.
AVOID
- Do not use heavy, pitch-black drop shadows that dirty the clinical white field.
- Do not switch the primary blue (#0062FF) to navy or saturated cyan; it must feel aerospace-certified.
- Do not use fully dark mode or dense textures; lightness is essential to the brand's precision feel.
- Do not hide hover cues; each lower card must clearly display a forward-pointing arrow.
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 中尝试 
