Design a dark-mode website section: deep void obsidian canvas illuminated by flowing spectral ribbons and disciplined technical data architecture.
LAYOUT
The layout is stacked in two primary visual bands spanning a maximum container width of 1240px. The upper tier is a centered conversion CTA block comprising a pill tag, stacked display typography, explanatory paragraph, and dual button row. The lower tier is a five-column informational footer containing brand identity on the far left, three categorized navigation columns, and a dedicated newsletter card on the right, terminating in a horizontal legal bar.
PALETTE (use these exact hex values)
- #030712 — Obsidian Base: Primary page background canvas across hero CTA and footer grid
- #0B1120 — Surface Raised: Background fill for the newsletter subscribe card and social icon buttons
- #1E293B — Surface Border: Subtle bounding strokes on inputs, pill badges, and section dividers
- #3B82F6 — Cobalt Primary: Primary interactive action button fill and subtle gradient origin
- #06B6D4 — Cyan Accent: Status indicator dot and right endpoint of the subscribe button gradient
- linear-gradient(90deg, #3B82F6 0%, #06B6D4 100%) — Electric Gradient: High-visibility gradient applied to submit buttons and display text highlights
- #F8FAFC — Text Primary: Headings, button labels, and high-emphasis column headers
- #94A3B8 — Text Secondary: Footer navigation links, descriptive summaries, and body copy
- #64748B — Text Muted: Copyright text, input placeholders, and secondary legal disclaimers
TYPOGRAPHY
Typeface Inter (or Geist Sans,SF Pro Display,-apple-system), weights 400/500/600/700. Sizes 12px caption, 13px body-sm, 14px body, 16px body-lg, 18px subheading, 24px heading, 40px display. Tracking -0.02em at display, 0.01em at caption. The typography exudes engineering rigor, infrastructure scalability, and clean modern execution. Inter (or Geist Sans as an alternative) delivers an objective, system-native voice without superfluous ornament. Display text leverages tightened letter spacing (-0.02em) to command authority, while the technical link hierarchy uses disciplined scale steps from 12px to 14px.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 24px gaps, 80px between sections, 1240px container, comfortable density.
DEPTH
Elevation is achieved entirely through chromatic luminance and surface tonal shifts rather than cast shadows. Background elements sit at absolute zero (#030712), while actionable modules like the newsletter card lift slightly to #0B1120 with a 1px perimeter stroke (#1E293B). Buttons and highlights visually float via subtle radial backlights and saturated color gradients.
IMAGERY
The imagery features an abstract, high-definition luminous wave ribbon flowing diagonally across the horizontal dividing line. Its color trajectory sweeps from deep indigo into electric cyan and magenta-tinted highlights against pure darkness. Photorealistic imagery or generic corporate 3D renders would feel completely off-brand in this technical, infrastructure-driven context.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the horizontal transition horizon where a photoluminescent ethereal cyan-blue wave crests precisely between the marketing call-to-action and the operational footer grid. It grounds high-level product messaging into utilitarian infrastructure. Misusing this effect involves applying it uniformly across page sections, which dilutes its role as a dramatic focal transition.
MUST
- Use pure obsidian (#030712) for background surfaces to maximize contrast with glowing neon wave imagery.
- Restrict vibrant cyan-blue gradients strictly to primary conversion actions and key keyword highlights.
- Maintain a strict 8px radius across interactive form inputs and utility buttons.
- Group footer links logically into categorized columns with consistent 10px vertical item spacing.
AVOID
- Do not introduce bright solid background fills; depth must rely on dark tonal stepping and subtle strokes.
- Do not use multi-color saturation for secondary buttons or passive social media links.
- Never drop below 12px for utility typography, copyright labels, or compliance links.
- Avoid harsh high-contrast white dividers; rely on low-opacity borders (#1E293B) instead.
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 中尝试 
