Design a light-mode website section: precision aerospace telemetry bridging crisp operational white space with stealth-navy infrastructure intelligence.
LAYOUT
The viewport splits into two stark thematic zones: a spacious two-column 60/40 CTA hero on pure white, and an enterprise multi-column footer on deep navy. The CTA section stacks an eyebrow pill, display headline, body copy, paired buttons, and a 3-part micro-feature row on the left, balancing a symmetrical node diagram on the right. The footer distributes brand metadata, four link columns, and a newsletter card horizontally before resolving into a segmented bottom copyright/status bar.
PALETTE (use these exact hex values)
- #ffffff — Canvas Crisp White: Primary surface for CTA, display copy, and interactive ingest node cards
- #080d1a — Deep Recon Navy: Monolithic background for the comprehensive footer section and bottom legal row
- #1b64fa — Tactical Blue: High-intent CTAs, central diagram glowing ring, active icons, and key button fills
- radial-gradient(50% 50% at 50% 50%, rgba(27, 100, 250, 0.12) 0%, rgba(255, 255, 255, 0) 100%) — Subtle Radar Halo: Soft atmospheric back-glow highlighting the central processing engine node
- #0a1124 — Dark Navy Text: Primary heading typography, diagram labels, and core callout titles
- #64748b — Slate Neutral: Body copy, supporting node descriptions, and footer link typography
- #e2e8f0 — Light Border Stroke: 1px hairline borders for node cards, badge boundaries, and vertical dividers
- #19243a — Dark Border Stroke: Sub-footer divider rule, social icon borders, and dark email field outline
- #10b981 — Operational Green: System status heartbeat indicator dot in sub-footer bar
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Display, Roboto), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 14px body, 15px body-lg, 18px subheading, 44px display. Tracking -0.03em on display, 0.05em on technical uppercase tags. The typographic tone is ultra-composed, technical, and mission-critical, typical of defense tech and aerospace telemetry platforms. Set in clean neo-grotesque sans-serif (Inter match), it pairs tight, assertive -0.03em tracking on display headlines with wide, rhythmic tracking on micro uppercase labels. It projects clinical precision and unquestionable auditability.
GEOMETRY & SPACING
Corner radii — cards 10px, links 4px, inputs 8px, buttons 8px. Spacing on a 4px unit, 20px gaps, 96px between sections, 1280px container, comfortable density.
DEPTH
Depth is created through clean architectural layering rather than heavy drop shadows. The hero schematic floats over a crisp white base with diffuse radial glows (#dbeafe to transparent) and faint, featherweight shadows (0 4px 12px rgba(15, 23, 42, 0.04)) around white nodes. The dark footer achieves complete visual grounding through flat obsidian absorption (#080d1a) with recessed inputs.
IMAGERY
Zero raster photography is present in this system. Visual language relies entirely on refined line iconography (radar, waves, shields, maps), geometric concentric circular dials, and structured orthogonal node trees. Any photographic drone or military asset would disrupt the objective software telemetry aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The concentric radar processing hub that bridges ingest sensors to operational outcomes via thin orthogonal dashed lines. This central radial focal point transforms a standard SaaS conversion section into a live defense architecture schematic; misuse occurs when substituting curved bezier curves or removing the central glowing dial.
MUST
- Anchor the CTA text hierarchy with a tight display line height of exactly 1.1.
- Use 1px dashed slate connectors (#cbd5e1) for structural diagram wiring.
- Reserve solid blue (#1b64fa) exclusively for active triggers and telemetry focus.
- Maintain high contrast between the upper pure white canvas and the dark navy footer.
AVOID
- Do not introduce photographic textures; rely strictly on vector geometry and gradients.
- Never use dark backgrounds for diagram nodes in the top hero canvas.
- Avoid colored pills in the footer; stick to muted text (#94a3b8) with white hover states.
- Do not curve connection lines; keep diagram connectors strictly orthogonal with 90-degree elbows.
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 中尝试 
