Design a dark-mode website section: deep midnight telemetry illuminated by streaks of acoustic fiber-optic light and iridescent gradients.
LAYOUT
The screen flows from a dual-column hero module (left-hand value proposition and CTA stack; right-hand floating product telemetry card) into a full-bleed horizontal divider. Below the divider lies a structured 5-column footer containing the brand identifier and social links on the left, three directory columns in the center, and a newsletter lead-capture module on the right. The page terminates with a clean copyright and legal sub-bar anchored to the bottom edges.
PALETTE (use these exact hex values)
- #050914 — Void Black Canvas: Deep foundational canvas across the lower hero and full footer grid.
- #0b1220 — Deep Telemetry Surface: Background for dashboard metric cards and interactive input containers.
- #1e293b — Linear Border Subtle: Delicate 1px outline for cards, pills, separators, and inputs.
- #ffffff — Pure White Text: Primary headings, active metrics, logos, and high-priority labels.
- #8493a8 — Slate Text Muted: Body copy, subheaders, navigation links, and inactive metrics.
- #4299e1 — Cyan Spark: Voice visualizer bars, link arrows, and primary button gradient start.
- #cb5eee — Orchid Magenta: Primary button gradient end, text accent highlights, and submit arrows.
- #22c55e — Status Success Emerald: Positive rate trend indicators and live conversation dots.
- linear-gradient(90deg, #3b82f6 0%, #b854d4 100%) — Primary CTA Gradient: Primary action button background fill and send action trigger.
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Display, Geist), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px subheading, 28px heading, 44px display. Tracking -0.02em at display, 0.01em at body, 0.08em uppercase. The type is strictly neutral, crisp, and technical, perfectly embodied by Inter or Plus Jakarta Sans. Its cold clarity balances the warmth of the orange and magenta background glows, keeping the product focused on enterprise reliability and regulatory compliance. Display weights maintain tight letter-spacing (-0.03em) to ensure strong headline impact, while body and caption tiers prioritize extreme legibility.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 32px gaps, 96px between sections, 1240px container, comfortable density.
DEPTH
Depth is created purely through layered luminescence and subtle 1px perimeter outlines rather than drop shadows. Translucent dark panels (#0b1220 with ~85% opacity) sit directly over vibrant, vertical light streaks, letting ambient glows hint at background depth. Active inputs and sub-cards achieve hierarchy via distinct fill darkness (#111a2c) contrasting against card borders.
IMAGERY
The visual anchor is an abstract, hyper-focused generative wave of vertical fiber-optic light rays ranging from cool cobalt to fiery ember-orange. This acoustic frequency visual reflects voice AI processing speed without relying on literal photographs of hardware or humans. Any figurative illustration, flat clipart, or generic stock photography would immediately break the high-end technical aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The distinctive horizontal cyan-to-magenta gradient applied to primary action triggers and inline headline emphasis ('outperform humans'), set against a dense backdrop of vertical acoustic fiber-optic light. It bridges technical audio processing with premium enterprise software aesthetic. It is commonly misused by extending the gradient to entire card borders or large background surfaces, which degrades contrast and credibility.
MUST
- Use a subtle 1px border (#1e293b) to frame translucent dark cards and badge pills.
- Apply the horizontal cyan-to-magenta linear gradient strictly to primary CTA buttons and text highlights.
- Render uppercase category titles with 11px font size and expanded letter-spacing (0.08em).
- Keep background telemetry panels semi-transparent to allow ambient fiber-optic artwork to bleed through.
AVOID
- Do not use opaque light cards or solid white surfaces anywhere on this canvas.
- Avoid harsh high-contrast drop shadows; use subtle surface brightness and 1px borders instead.
- Do not apply bright magenta or cyan fills across large structural surface backgrounds.
- Never drop letter-spacing into negative values for tiny uppercase footer headings.
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 中尝试 
