Design a dark-mode website section: deep midnight command interface engineered for geopolitical intelligence and sovereign executive foresight.
LAYOUT
The vertical composition is bifurcated into two distinct modules: an upper CTA deck and a lower navigation matrix. The CTA deck is split horizontally—left-aligned proposition copy and dual buttons on the left (60% width), with a 4-column metric array on the right. Below a clean separation, the footer distributes brand metadata on the far left, a 4-column vertical link directory in the center, and newsletter capture on the far right, terminating in a single-row utility bar.
PALETTE (use these exact hex values)
- #02050b — Obsidian Deep: Lowest surface canvas grounding the bottom legal and copyright tier.
- #060d1b — Abyssal Navy: Background fill for the primary footer link matrix and navigation structure.
- #0a172e — Midnight Gradient Stop: Radial and linear gradient origin in the top CTA banner suggesting deep radar illumination.
- #5e5ce6 — Signal Violet: Primary conversion button gradient start and strategic badge accent.
- #7d67ff — Electric Iris: Primary conversion button gradient end and subtle icon halo glow.
- #f1f5f9 — Ghost White: High-emphasis hero headlines, key metrics figures, and brand wordmark.
- #94a3b8 — Slate Steel: Descriptive copy, secondary labels, and active navigation text.
- #475569 — Submerged Slate: Tertiary metadata, copyright notices, and inactive icon borders.
- #0f1d33 — Trench Line: Hairline horizontal dividers, input borders, and badge frames.
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, Geist Sans, SF Pro Display), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 15px body-lg, 18px subheading, 24px heading, 44px display. Tracking -0.025em for display titles, +0.12em for uppercase tracking. The typographic register is authoritative, sovereign, and intensely strategic. Its wide uppercase trackers emulate military consoles and intelligence dossiers, while the condensed headline tracking feels urgent and executive. Clean substitutes like Inter or SF Pro Display must be configured with tabular lining for numbers to maintain data integrity.
GEOMETRY & SPACING
Corner radii — cards 12px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 32px gaps, 80px between sections, 1280px container, comfortable density.
DEPTH
Depth is rendered purely through atmospheric illumination rather than dropped shadows. The CTA panel employs a subtle cyan-blue radial back-glow bleeding into deep space, while interactive elements emerge via 1px low-opacity borders (#1c2d48) and gradient fills.
IMAGERY
Visual imagery is restricted to cartographic and topographic vector contour lines hinting at global terrain, radar scans, and orbital geometry. Any photographic imagery, playful illustrations, or 3D cartoon models are entirely prohibited.
SIGNATURE DETAIL — the thing that makes this design itself
The juxtaposition of an executive command proposition beside a 4-unit data cluster overlaid on faint cartographic contour lines. It transforms a standard marketing banner into what resembles a high-level geopolitical crisis monitoring station. It fails if the map contours become too opaque or if the data columns lose their balanced spatial cadence.
MUST
- Keep typography tight and disciplined; reserve pure white exclusively for numerical statistics and primary display headers.
- Use subtle, thin line weights (1px) for icons and borders to maintain an analytical instrument aesthetic.
- Ensure the top banner's right-hand topographic map watermark remains faint (10-15% opacity) to avoid clashing with stat columns.
- Maintain uniform 4-column alignment across links in the footer, headed by all-caps labels with wide tracking.
AVOID
- Do not introduce warm accents like amber, red, or green except in precise status alert states.
- Never make footer category header links interactive; they serve as structural taxonomies.
- Avoid high-contrast borders; boundaries must dissolve into the background using deep navy tones.
- Do not use playful, rounded sans-serifs or display serifs; stick to clinical, geometric neo-grotesques.
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 中尝试 
