Design a dark-mode website section: dual-stratum defense-tech interface bridging military night-vision cockpit dashboards with immaculate corporate clarity.
LAYOUT
Structured around a stacked vertical dichotomy. The top zone is a split hero: left-hand 45% textual value proposition and dual CTAs, right-hand 55% complex operations telemetry card. Below the continuous red datum line, the footer shifts to a light 5-column corporate grid flanked by brand metadata on the left and newsletter capture on the right.
PALETTE (use these exact hex values)
- #090B0E — Void Black: Primary hero and dashboard background canvas representing stealth and nocturnal operation.
- #0F131A — Radar Console Slate: Background container fill for the embedded tactical telemetry card.
- #F7F8F8 — Pure Sand White: High-contrast lower section canvas providing immaculate readability for links and forms.
- #EB4335 — Threat Crimson: Key focal points, high-priority primary CTA buttons, and headline threat highlights.
- #D83A34 — Border Horizon Red: 1px hairline divider rule spanning full width between dark and light domains.
- #34C759 — Radar Cyan Green: Online beacons, system health indicators, verified checks, and positive deltas.
- #1E242F — Tactical Stroke Dark: Subtle hairline perimeter borders on dark dashboard panels and input containers.
- #5E6573 — Footer Muted Text: Footer navigation links, copyright notes, and secondary helper copy in the light section.
- #8A94A6 — Console Muted Text: Subhead descriptive text, table headers, and dormant status labels on dark surfaces.
TYPOGRAPHY
Typeface Inter (or Geist, Plus Jakarta Sans, Helvetica Neue), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 16px body-lg, 20px subheading, 44px display. Tracking -0.03em for display headings, 0 for body. Disciplined, clinical, and uncompromisingly authoritative. It channels the precision of avionics readouts and defense procurement briefs while maintaining modern digital product accessibility. Inter or Geist perfectly reproduce this neutral, technical stance.
GEOMETRY & SPACING
Corner radii — cards 12px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 24px gaps, 80px between sections, 1200px container, comfortable density.
DEPTH
Depth is strictly structural rather than atmospheric. No diffuse Gaussian drop shadows are permitted; elevation is achieved via layered matte fills (from #090B0E to #0F131A to #161B24) framed with sharp 1px border strokes (#1E242F).
IMAGERY
Abstract vectors and live telemetry replace photographic illustration. UI mockups resemble authentic airborne target acquisition displays with sector sweeps, pinpoint threat coordinates, and austere technical sans labels. Stock photography or human portraits are strictly off-brand.
SIGNATURE DETAIL — the thing that makes this design itself
The full-width razor-sharp Threat Crimson horizon line (#D83A34) that cleanly cleaves the midnight radar console above from the bone-white corporate footer below. To implement correctly, ensure zero gradient feathering along the boundary; the transition from void dark to ivory light must occur exactly along that single 1px vector line.
MUST
- Retain the sharp bisection between dark command theme and light corporate footer.
- Use Threat Crimson (#EB4335) sparingly: reserved for calls to action and target telemetry.
- Ensure green status beacons (#34C759) stay small (6-8px) to feel like real instrumentation LEDs.
- Keep dashboard typography tabular and monospace-aligned for operational numbers.
AVOID
- Never apply rounded organic pills (>12px radius) to primary buttons or dashboard frames.
- Do not use blurry neon glows or futuristic cyber gradients on radar elements.
- Avoid soft pastel fills; keep colors restricted to charcoal, bone white, crimson, and radar green.
- Never blend the footer and hero into a dark-to-light gradient; the horizon cut must remain crisp.
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 中尝试