Design a light-mode website section: mission-critical aerospace dark slate meets crisp flight-deck ivory for high-trust enterprise telemetry.
LAYOUT
Two distinct vertical bands organize the screen. The upper band is an asymmetrical two-column layout (50/50 split at 1280px max-width) hosting the headline/CTA/trust-proofs on the left and the oversized console preview on the right. The lower band is a full-width dark-slate footer divided into a six-column grid (brand summary + contact, four link columns, newsletter) capped by a single-line copyright and legal bar.
PALETTE (use these exact hex values)
- #FBFBFA — Canvas Ivory: Dominant background of the upper conversion and CTA section
- #07151C — Cockpit Slate: Background for footer base and deep operational dashboard housing
- #0E212B — Radar Elevation: Fill for nested dashboard widgets, map canvas, and input fields
- #1E6E56 — Avionics Green: Primary CTA button fill and key operational confirmation points
- #32B588 — Telemetry Mint: Footer section eyebrow headers, active flight radar beacons, and submit button fill
- #0F172A — Midnight Charcoal: Primary display headings and high-contrast body text on light canvas
- #475569 — Aero Slate: Body copy and subtext in light mode CTA section
- #8EA0AC — Muted Frost: Footer navigation links, sub-footer copy, and dashboard secondary stats
- #192F3B — Cockpit Rim Border: Structural dividing rules, dashboard card borders, and sub-footer dividing line
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, Public Sans, Roboto), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 16px body-lg, 18px subheading, 24px heading, 40px display. Tracking -0.02em at display, 0.04em at caption caps. Engineered, clinical, and reassuringly precise. The grotesque letterforms in tight display sizes project mission-critical reliability and institutional authority, while technical uppercase microcopy evokes flight-strip printers and avionics glass cockpits. Fully achieved with Inter or Plus Jakarta Sans at no licensing barrier.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 24px gaps, 80px between sections, 1280px container, comfortable density.
DEPTH
Depth is created via deliberate surface contrast rather than blurred drop shadows. The daylight CTA sits flat on #FBFBFA, while the floating dashboard uses a low-opacity dark ambient occlusion shadow (0 20px 40px -15px rgba(7, 21, 28, 0.4)) against the light canvas. Within dark surfaces, hierarchy is achieved through nested stepped fills (#07151C to #0E212B) bordered by 1px rules.
IMAGERY
Vector line illustrations and authentic GIS air-traffic telemetry. The primary visual is a realistic dark vector radar map populated with commercial aircraft icons, flight vectors, connection nodes, and operational status metrics. Photography is completely omitted in favor of tactical interface realism.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-canvas juxtaposition of daylight enterprise marketing alongside a midnight radar cockpit preview, accented by aerospace telemetry green (#32B588). Losing either the light/dark horizon split or the authentic radar map instantly reduces this to a generic SaaS template.
MUST
- Use uppercase tracking (0.08em) strictly for 11-12px category headers and technical indicators.
- Maintain the sharp tonal dichotomy: ivory light mode for commercial persuasion, deep oceanic slate for technical operations.
- Anchor live metrics with glowing emerald (#32B588) status dots and data pips.
- Keep borders on dark surfaces restrained to a thin 1px #192F3B line.
AVOID
- Never replace the deep cockpit teal-black (#07151C) with neutral or purple-tinted blacks.
- Do not use saturated blues or reds; reserve chromatic intensity entirely for telemetry green.
- Avoid pill-shaped roundness on primary action buttons—strictly maintain an 8px precision radius.
- Do not render the footer in light mode; it functions structurally as an anchor deck.
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 中尝试 
