Design a dark-mode website section: tactical sovereign tech aesthetics balancing high-stakes problem framing with glowing neon operational capability.
LAYOUT
Centered presentation hierarchy beginning with a micro-kicker at the top, followed by a bold two-line display thesis. The core content is staged as an asymmetric dual-pane comparison grid: an understated failure-mode panel on the left leading across a glowing directional vector into a dominant, feature-complete software console on the right.
PALETTE (use these exact hex values)
- #07090E — Void Black: Deepest canvas background framing the entire presentation space.
- #0D1117 — Stealth Surface: Background for outer comparison panels and top-level cards.
- #111622 — Cockpit Surface: Inner dashboard background within the solution showcase.
- #1E293B — Tactical Slate: Subtle perimeter outlines for deactivated/problem list items.
- #3B82F6 — Electric Cyan Glow: Primary active glow, glowing borders, active tabs, and solution accents.
- #60A5FA — Sky Highlight: Hero text emphasis highlight and secondary glowing states.
- #E05A47 — Threat Coral: Warning badge icons and category kicker text for the problem frame.
- #10B981 — Radar Green: Active telemetry pips, success indicators, and positive metric deltas.
- #FFFFFF — Pure White: Display headings, strong titles, and high-contrast numbers.
- #94A3B8 — Muted Spec Gray: Body copy descriptions, breadcrumbs, and non-active metadata.
TYPOGRAPHY
Typeface Inter Display (or Geist,SF Pro Display,National 2), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 14px body, 16px body-lg, 20px subheading, 24px heading, 40px display. Tracking -0.02em on headings, 0.08em on mono uppercase tags. Engineered, mission-critical, and highly authoritative. The clean geometric neo-grotesque evokes aerospace operations, defense procurement consoles, and advanced sovereign technology, where clarity and rapid parsing under pressure are paramount.
GEOMETRY & SPACING
Corner radii — cards 20px, links 4px, inputs 8px, buttons 6px. Spacing on a 8px unit, 24px gaps, 64px between sections, 1280px container, comfortable density.
DEPTH
Depth is produced purely through luminous optical edges rather than multi-layered drop shadows. The solution container employs a 1px solid border at rgba(59,130,246,0.6) paired with a wide 40px soft radial outer bloom in rgba(59,130,246,0.15), while the problem card sits completely flat with a 1px #1E293B border.
IMAGERY
Vector wireframes, 3D orthographic aircraft blueprints on isometric grids, and technical CAD-inspired line illustrations. Photography is strictly avoided in favor of crisp UI telemetry, HUD elements, and telemetry data tables.
SIGNATURE DETAIL — the thing that makes this design itself
The asymmetric contrast battle: placing a matte, coral-accented diagnosis panel immediately adjacent to an oversized, neon-haloed defense intelligence operating system mockup.
MUST
- Use semantic split coloring: desaturated coral for systemic flaws, high-vibrancy cyan for technological solutions.
- Enclose complex SaaS dashboard previews inside a glowing 1.5px #3B82F6 outer stroke to establish primary visual weight.
- Set category kickers in all-caps with generous letter-spacing (0.08em) paired with four-point star icons.
- Maintain high contrast on numeric metrics using pure #FFFFFF alongside tiny positive delta tags in #10B981.
AVOID
- Never apply colored glow effects to the left-hand problem container; keep it subdued and matte.
- Avoid generic colorful gradients; stick strictly to monochromatic navy fades with precise electric cyan accents.
- Do not use serif or playful rounded typefaces; this interface requires cold aerospace-grade precision.
- Never make both columns equal width; the solution card must visually dominate via wider footprint and luminance.
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 中尝试 
