Design a dark-mode website section: quiet deep-space enterprise voice infrastructure glowing behind precise cyan audio waveforms.
LAYOUT
The vertical composition is anchored by a centered, massive rounded card containing eyebrow, display headline, two-line value proposition, CTA action pair, and horizontal proof pills. Immediately beneath, separated by 72px, sits an expansive 6-column global footer with brand identity on the far left and email capture on the far right. The viewport closes with an edge-to-edge utility baseline containing hostname and copyright.
PALETTE (use these exact hex values)
- #020611 — Pitch Canvas: Deepest canvas background behind the CTA card and across footer base
- #060e22 — Card Trench: Background fill for the floating CTA box with subtle ambient lighting
- #1a3a6b — Glowing Stroke: Perimeter stroke and ambient glow on the large CTA container
- linear-gradient(90deg, #3867fd 0%, #4ae5c3 100%) — Electric Gradient: Primary conversion button fill and accent text highlights
- #5ce6e6 — Signal Cyan: Category badge icon, text highlight 'Speak 30+ Languages', and left audio waveforms
- #7f5af0 — Voice Violet: Subtle right-side audio waveform frequency bars
- #ffffff — Pure Crisp: Primary headlines, active buttons, and brand logo mark text
- #8ba0be — Muted Slate: Subtitle paragraphs, inactive links, and column body copy
- #425574 — Subtle Rail: Footer subheaders, copyright notice, and social icon glyphs
TYPOGRAPHY
Typeface Inter Display (or Geist Sans, SF Pro Display, Plus Jakarta Sans), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 16px body-lg, 20px subheading, 44px display. Tracking -0.03em at display, 0.05em at caps badge. The typographic tone is authoritative, highly technical, and calm—evoking carrier-grade infrastructure and privacy assurance. Large -0.03em tracking creates density in the headline, while the clean mono-height sans ensures instant legibility across complex multi-column legal and product indices.
GEOMETRY & SPACING
Corner radii — cards 36px, links 999px, inputs 8px, buttons 12px. Spacing on a 8px unit, 32px gaps, 80px between sections, 1240px container, comfortable density.
DEPTH
Depth is rendered entirely through glowing atmospheric lighting rather than physical drop shadows. The floating card radiates an electric blue/cyan ambient halo against a #020611 abyss. The primary gradient button pops forward with maximum saturation while all subsidiary surfaces remain submerged.
IMAGERY
Decorative graphic language is derived from digital acoustics, featuring fine vertical equalizer needles transitioning from aqua-cyan to neon-violet. No raster photography or human portraits are permitted; all visual metaphor relies strictly on geometric vectors, security badges, and glowing audio spectrum lines.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-side audio spectrum waveform emerging from the dark flanks of the glowing pill card. It visually contextualizes the product's acoustic AI focus while framing the central headline without adding visual clutter. Never detach the waveform from the edges or let it overpower the headline text contrast.
MUST
- Keep the CTA card distinctly floating with at least 32px margin from page edges and 36px radius.
- Use the vivid blue-cyan gradient exclusively on the primary interactive button and highlighted punchy headline phrase.
- Render category headers in 11px uppercase with 0.1em tracking in muted blue-grey (#425574).
- Incorporate the audio frequency waveform graphic as low-opacity decorative bookends inside the card.
AVOID
- Do not place high-contrast white borders around the CTA card; rely on subtle dark navy/cyan glows.
- Avoid using flat single-color backgrounds on the primary CTA button; keep the linear gradient transition.
- Do not center footer columns; keep all directory text left-aligned under their respective headers.
- Do not mix serif fonts into this strictly technical, low-latency audio AI visual vernacular.
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 中尝试