Design a dark-mode website section: airborne defense intelligence rendered in stealth obsidian with mission-critical electric blue telemetry and tactile terminal controls.
LAYOUT
The header spans full-width with a discrete left logo, center navigation links, and right-aligned dual access actions. The hero narrative is anchored to the left two-thirds, while the realistic drone and sweeping light wave dominate the right upper quadrant. The centerpiece Command Console anchors the middle viewport, flowing into a four-column horizontal telemetry KPI bar at the bottom.
PALETTE (use these exact hex values)
- #030712 — Obsidian Base: Primary page background canvas providing extreme contrast for illuminated telemetry and 3D assets.
- #070d18 — Console Slate: Background fill for the interactive command console card and input panels.
- #172338 — Subtle Border: Hairline perimeter stroke for cards, input containers, and tactical tag chips.
- #1d64f2 — Mission Blue: High-visibility primary action fill on main CTAs, execute buttons, and reticle highlights.
- #5b8bf7 — Periwinkle Glow: Accent hue for eyebrow tags, system status indicators, and subtle ribbon reflections.
- #ffffff — Optic White: Highest-contrast text for display headings, metric values, and active console labels.
- #94a3b8 — Muted Slate: Secondary text for body copy, metric titles, navigation links, and terminal suggestions.
- #475569 — Ghost Slate: Input placeholder text, terminal chevrons, and deactivated telemetry markers.
TYPOGRAPHY
Typeface Geist Sans (or Inter, SF Pro Text, Roobert), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px body-lg, 28px heading, 52px display. Tracking -0.03em at display, +0.06em at uppercase labels. The typographic tone is austere, operational, and clinical, reflecting precision aerospace engineering and autonomous edge intelligence. A clean neo-grotesque like Geist Sans or Inter provides uncompromised legibility across both massive display headlines and dense 11px system telemetry. Free Google Font alternatives include Inter and Roboto Mono for metadata tags.
GEOMETRY & SPACING
Corner radii — cards 12px, links 4px, inputs 8px, buttons 8px. Spacing on a 4px unit, 20px gaps, 80px between sections, 1200px container, comfortable density.
DEPTH
Depth is created without blurred drop shadows by layering deep obsidian surfaces against luminous backdrop gradients and translucent chrome ribbons. Surfaces use 1px perimeter borders (#172338) to define discrete functional zones in the dark. Inner inputs sit recessed through slightly darker fills and tight bounding lines.
IMAGERY
Imagery features high-fidelity 3D military surveillance drones integrated seamlessly with fluid, volumetric glass ribbons reflecting ambient cobalt light. Vector assets consist of minimal HUD coordinate grids, reticles, and thin-line telemetry icons. Stock photography of soldiers or generic corporate office spaces is strictly forbidden.
SIGNATURE DETAIL — the thing that makes this design itself
The integrated hero Command Console, which bridges promotional landing page copy directly into a working mission-planning terminal. It features a prompt input prefixed with '>_', a selector for autonomous swarms, and pre-baked mission preset chips. It fails if transformed into a generic email capture form or stripped of its monospaced terminal styling.
MUST
- Use pure obsidian (#030712) for the canvas to maintain defense-grade contrast and atmospheric depth.
- Restrict electric blue (#1d64f2) exclusively to interactive conversion buttons and active status beacons.
- Set tactical metadata in uppercase with generous letter spacing (+0.08em) alongside geometric icons.
- Enclose terminal inputs in sharp 1px borders (#172338) to emulate precision avionics displays.
AVOID
- Do not use warm accent colors like orange, red, or yellow outside of active mission hazard alerts.
- Do not round interactive container cards into full pill shapes; keep radii strictly at 8px to 12px.
- Do not place busy background textures behind text blocks that degrade technical readability.
- Never use soft drop shadows; create depth exclusively through subtle backlights and perimeter strokes.
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 中尝试 
