Design a dark-mode website section: dark substrate interface anchored by deep oceanic gradients, radiant cyan edges, and crisp structured audit typography.
LAYOUT
The vertical composition is split into two primary zones: an upper floating CTA card and a lower five-column footer. The CTA card centers content along a single vertical axis with progressive disclosure (eyebrow, title, supporting body, action cluster). Below, the footer unfolds horizontally into a 1.2:1:1:1:1.5 distribution, concluding with an ultra-slim two-sided sub-footer row.
PALETTE (use these exact hex values)
- #020712 — Void Canvas: Deepest dark navy background covering the entire page viewport and footer base
- #071329 — Luminescent Well: Dark teal-tinted navy interior fill for the primary CTA box
- #1e3a5f — Card Glow Stroke: Translucent cyan-blue 1px perimeter stroke highlighting elevated containers
- #38bdf8 — Electric Cyan: High-visibility brand accent applied to logo bars, headline highlights, and button gradients
- #34d399 — Action Aqua: Complementary bright green-teal used in submit button gradients and icon highlights
- linear-gradient(135deg, #0284c7 0%, #0d9488 100%) — Button Gradient Primary: Main CTA fill gradient providing rich dimensional color punch
- #ffffff — Text Crisp White: Top-level headings, active button labels, and logo typography
- #94a3b8 — Text Muted Slate: Body copy, supporting explanatory phrases, and column headers
- #64748b — Text Dim Slate: Footer navigation links, metadata descriptions, and input placeholders
- #091424 — Field Charcoal: Dark input field background for newsletter and utility cards
TYPOGRAPHY
Typeface Inter (or Geist, Plus Jakarta Sans, SF Pro Display), weights 400/500/600/700. Sizes 12px caption, 13px body-sm, 14px body, 16px body-lg, 20px subheading, 44px display. Tracking -0.02em at display, 0.01em at body. The type choice (Inter or close grotesque geometric) feels technical, analytical, and authoritative. Clean letterforms with neutral stems allow dense compliance jargon to read without fatigue, while negative display tracking (-0.025em) gives the headline an executive punch.
GEOMETRY & SPACING
Corner radii — cards 24px, links 6px, inputs 10px, buttons 10px. Spacing on a 4px unit, 32px gaps, 80px between sections, 1200px container, comfortable density.
DEPTH
Depth is rendered purely through optical luminescence rather than physical drop shadows. A dark teal radial under-glow (#0284c7 at 12% opacity) peeks out beneath the primary CTA card, while elevated interactive elements use semi-transparent cyan strokes (rgba(56, 189, 248, 0.2)) against #071329 surfaces to appear closer to the viewer.
IMAGERY
This interface avoids raster photographic assets entirely, substituting graphic iconography and glowing geometric vectors. Icons are thin-stroke 1.5px linear pictograms representing security shields, flow branches, and layers. Any photographic imagery introduced would break the sleek developer-infrastructure precision.
SIGNATURE DETAIL — the thing that makes this design itself
The standout signature is the floating oceanic CTA capsule featuring an electric cyan word highlight and bottom-edge bloom. It elevates what is normally a flat dark footer into an illuminated destination point. It is commonly misused by making the glow too opaque or the headline text gradient unreadable.
MUST
- Keep CTA card borders at 1px with blue-tinted transparency to suggest luminescence.
- Use electric cyan (#38bdf8) strictly for active elements and deliberate headline emphasis.
- Maintain high contrast by keeping display headers in pure #ffffff against dark backdrops.
- Group footer columns with consistent 16px outline icons preceding each section title.
AVOID
- Do not use sharp 0px corners; all cards, inputs, and buttons require rounded radii.
- Avoid harsh multi-color rainbow gradients; stick exclusively to teal-through-cyan ramps.
- Never set column links in pure white; reserve white exclusively for section headers.
- Do not let the CTA container touch viewport edges; float it inside standard container gutters.
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 中尝试 
