Design a dark-mode website section: deep-ocean autonomy framed by stealth dark surfaces, focused bioluminescent spotlights, and tactical aerospace typography.
LAYOUT
The layout uses a single-column, center-aligned stack bounded to a 1280px grid. The top tier features a high-impact self-contained CTA container split into a 55/45 asymmetrical text-to-render composition. Below, an expansive two-zone footer pairs a heavy brand/metadata block on the left with a four-column navigation grid on the right, capped by a hairline-divided copyright baseline.
PALETTE (use these exact hex values)
- #090d14 — Abyssal Void: Deepest canvas background providing absolute darkness and high-contrast backdrop across entire footer
- #0e141f — Submersible Hull: Elevated card surface background for the primary featured CTA enclosure
- linear-gradient(135deg, #4338ca 0%, #6366f1 100%) — Tactical Indigo: Primary interactive button fill commanding direct attention against the dark hull
- #38bdf8 — Sonar Cyan: Subsea vehicle spotlight highlight and subtle bioluminescent illumination accents
- #fb7185 — Telemetry Coral: Uppercase mission status badges, eyebrow indicators, and critical callout tags
- #a5b4fc — Signal Violet: Uppercase column headers in navigation footer establishing clear category grouping
- #ffffff — Starlight White: Primary headline text, active labels, and high-priority brand logotype
- #94a3b8 — Muted Sonar Slate: Body copy, secondary text, and footer link items
- #1e293b — Deep Sea Hairline: Subtle bounding strokes for cards, horizontal rules, and social action buttons
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans,SF Pro Text,system-ui), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 16px body-lg, 18px subheading, 28px heading, 48px heading-lg, 64px display. Tracking -0.02em at display, 0.05em at micro caps. The typography conveys deep-mission tactical precision, cold engineering rigor, and absolute operational authority. Inter (or neutral geometric grotesque) provides frictionless legibility in complex technical specifications. Bebas Neue delivers an imposing, monolithic maritime presence that anchors the footer with institutional defense credibility.
GEOMETRY & SPACING
Corner radii — cards 24px, links 4px, inputs 8px, buttons 10px. Spacing on a 8px unit, 32px gaps, 80px between sections, 1280px container, comfortable density.
DEPTH
Elevation is handled entirely through dark-value stepping and luminous focal points rather than traditional drop shadows. The card surface rises from the canvas through a slightly lighter navy tone (#0e141f over #090d14) bordered with a 1px boundary. The vehicle's forward cyan spotlight creates perceived volumetric 3D depth directly out of the screen.
IMAGERY
Features hyper-realistic, desaturated industrial 3D hardware renders—specifically autonomous marine defense technology. The craft is matte carbon or gunmetal gray with pinpoint operational lighting (cyan forward beam, red stern indicator). Stock photography, warm human lifestyle shots, or playful vector illustrations are strictly incompatible.
SIGNATURE DETAIL — the thing that makes this design itself
The vehicle's nose spotlight slicing through an otherwise impenetrable matte card creates the unmistakable identity of an abyssal drone mission. It links the high-tech defense hardware directly to the user conversion point, making the CTA feel like an active mission control terminal rather than a generic software banner.
MUST
- Keep the CTA card floating within the dark canvas with at least 48px margin around it.
- Use uppercase tracking (0.08em) strictly for functional eyebrows like 'FINAL CTA' and category labels.
- Constrain colorful accents to one purposeful spot: the primary button gradient and vehicle spotlight.
- Use condensed industrial typography exclusively for the primary enterprise wordmark.
AVOID
- Do not use high-saturation bright colors across broad surface backgrounds.
- Do not eliminate the hairline borders, or dark cards will bleed indistinguishably into the canvas.
- Do not set footer body copy or link text in pure white; reserve white for headings.
- Do not use playful, humanist, or serif fonts anywhere in this defense-tech hierarchy.
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 中尝试 
