Design a light-mode website section: airborne military precision meets warm editorial clarity with a stark divide into deep tactical darkness.
LAYOUT
The canvas executes a deliberate two-stage vertical cadence: an airy, asymmetric top tier where copy is left-aligned against generative right-aligned particle art, followed by an immediate horizontal KPI bar. Below, the interface sharply cuts to a 100% black tactical footer structured into six disciplined columns. The layout terminates with a horizontal sub-footer delimited by a hairline divider separating compliance assurances from legal links.
PALETTE (use these exact hex values)
- #F8F6F2 — Parchment White: Primary warm background for the top hero and credibility tier
- #0B0F14 — Abyssal Navy: Deep structural background grounding the footer and technical sitemap
- #A31D1D — Tactical Crimson: Primary conversion button fill, logomark element, headline accent period, and input submit
- #141414 — Charcoal Black: Hero display headlines, stat figures, and primary button labels on light surfaces
- #635F5A — Stone Muted: Hero body copy and stat label secondary text
- #FFFFFF — Starlight White: Footer wordmark, newsletter headings, and high-emphasis tactical text
- #8A94A6 — Slate Steel: Footer column links, microcopy, social icons, and copyright text
- #1A222D — Telemetry Slate: Background fill for the newsletter input field and social badge chips
TYPOGRAPHY
Typeface Newsreader (or Canela, GT Super, Playfair Display), weights 400/500. Sizes 11px caption, 13px body-sm, 15px body, 17px body-lg, 22px subheading, 54px display. Tracking -0.02em. The typographic tone conveys high-security gravitas and sovereign defense readiness through a literary lens. Newsreader or GT Super brings institutional trust and deliberate speed, avoiding standard SaaS cliches. Inter supplies sterile, cockpit-grade clarity for technical telemetry, sitemaps, and compliance declarations.
GEOMETRY & SPACING
Corner radii — cards 8px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1280px container, comfortable density.
DEPTH
Elevation is completely planar, deliberately eschewing drop shadows in favor of tonal contrast. Depth is established exclusively through hard structural color shifts, moving from atmospheric ivory directly to impenetrable deep tactical black. Interactive elements rely on solid crimson fills or fine 1px structural borders rather than ambient glow.
IMAGERY
The visual hero feature is an ethereal, pointillist particle wave rendered in cool slate-blue ink droplets and halftone screen patterns. It evokes computational fluid dynamics, radar returns, and radio frequency fields without depicting literal military hardware. Any generic photographic drone imagery or stock vector tech art would severely degrade the brand's quiet authority.
SIGNATURE DETAIL — the thing that makes this design itself
The stark horizontal split where a warm ivory editorial hero instantly cuts into a midnight-black command footer, accented by a single tactical crimson period at the end of the serif headline. This move balances intellectual defense gravitas with classified operations. Misuse occurs when adding a soft gradient transition between sections or splashing crimson indiscriminately across larger text blocks.
MUST
- Retain the sharp bisection between the warm parchment canvas and deep navy-black footer.
- Use crimson (#A31D1D) strictly for actionable endpoints and the distinctive headline terminal period.
- Pair classic editorial serifs for display with strict neutral sans-serifs for interface elements.
- Keep telemetry metric badges tinted with soft pastels against the warm off-white canvas.
AVOID
- Do not blur or gradient the boundary separating the light hero and the dark footer.
- Never color entire display headlines in crimson; preserve it strictly for punctuation and CTAs.
- Do not use high-saturation bright neon accents in place of the restrained pastel stat badge fills.
- Avoid using rounded pills (999px) on buttons; keep corners disciplined at 8px radius.
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 中尝试 
