Design a light-mode website section: crisp enterprise bento balancing pristine corporate white with vivid acoustic neon telemetry and high-contrast terminal surfaces.
LAYOUT
The section employs an asymmetric two-part layout: the left 38% width houses a sticky introduction with eyebrow pill, 44px headline, summary text, and a vertical 4-tier icon-benefit stack. The right 62% width arranges cards in a 3-column bento: top row has three equal cards, middle row pairs a 2-column dark console with a 1-column stat card. A spanning horizontal 4-segment trust card anchors the bottom across the entire grid.
PALETTE (use these exact hex values)
- #F7F9FC — Canvas Ice: overall page background canvas providing subtle contrast against pure white cards
- #FFFFFF — Card Surface: primary background for metric cards, bento blocks, and bottom trust bar
- #151922 — Terminal Obsidian: dark accent background specifically for the live conversation waveform terminal module
- #0F172A — Ink Slate: primary headlines, card titles, and high-emphasis metric copy
- #64748B — Muted Slate: secondary descriptions, body text, subheadings, and terminal quote labels
- #2563EB — Cobalt Accent: headline highlight, primary pill tags, card bottom border strip, and waveform base
- #D946EF — Magenta Neon: performance indicator bar, secondary waveform gradient peaks, and decorative punctuation
- #06B6D4 — Cyan Edge: language capability indicator border strip and badge iconography accents
- #E2E8F0 — Subtle Border: hairline boundary strokes for cards, vertical dividers, and icon containers
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, SF Pro Display, Roboto), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 15px body-lg, 16px subheading, 18px heading, 36px heading-lg, 44px display. Tracking -0.03em for headlines, 0.05em for uppercase pills. The typographic tone is authoritative, enterprise-grade, and technically austere. Using a robust geometric neo-grotesque like Inter or Plus Jakarta Sans grounds the high-tech voice AI subject matter in compliance and corporate reliability. Tight display letter-spacing communicates precision software engineering.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 9999px. Spacing on a 4px unit, 20px gaps, 64px between sections, 1200px container, comfortable density.
DEPTH
Depth is created primarily through flat surface layering against a cool #F7F9FC tinted canvas. White cards utilize a faint 1px border (#E2E8F0) combined with a soft, diffused shadow (0 4px 12px -2px rgba(15, 23, 42, 0.04)). The dark terminal card achieves elevation through pure tonal contrast rather than exaggerated drop shadows.
IMAGERY
Vector-only and programmatic graphics; no photorealistic imagery is used. Graphic elements include a stylized frequency audio waveform built from vertical rounded pill strokes, a dotted matrix world map, and thin 1.5px monoline Lucide-style system icons. Any photographic human element would break the sovereign infrastructure aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the dark obsidian audio console (#151922) embedded directly within an otherwise pure-light bento grid, featuring the multi-hued voice waveform in cobalt and magenta. It instantly demonstrates the live capability of the product without requiring an entirely dark-mode interface.
MUST
- Anchor the right bento grid with exactly one dark obsidian module (#151922) to hold visual focus.
- Use 3px bottom accent borders on white feature cards to signal specific functional categories.
- Ensure the left text group maintains a strong 2-column balance against the 3-column right grid.
- Style icon backgrounds with ultra-soft tints (8-12% opacity) matching their respective icon stroke hue.
AVOID
- Do not invert the entire section to dark mode; only the live conversation console should be dark.
- Do not omit the colored accent base strips on the upper three bento cards.
- Never use solid black (#000000) for text; rely on deep ink slate (#0F172A).
- Avoid harsh multi-stop linear card shadows; use a delicate 1px border with soft 4px blur shadows.
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 中尝试 
