Design a dark-mode website section: deep void engineering where neon amber signal routes through sovereign enterprise infrastructure.
LAYOUT
The view uses a disciplined two-column hero: left side anchors headline, body, and CTA triggers; right side hosts the large interactive architecture card. Below the split hero sits a 4-column balanced feature ribbon with uniform height and padding. Top navigation spans the full container width with balanced breathing room.
PALETTE (use these exact hex values)
- #030508 — Canvas Void: Global application background beneath mesh fields and layout grids
- #0c1017 — Panel Slate: Background fill for interactive diagram stages and bottom feature cards
- #131924 — Node Elevation: Fill for nested interactive workflow chips, audio triggers, and integration modules
- #18202c — Circuit Border: Structural 1px outlines on cards, buttons, connectors, and badges
- #ff4d15 — Signal Amber: Primary CTA fill, brand logo glyph, badge text, and waveform active state
- #22c55e — Status Green: Operational status indicator dot for online agent state
- #f8fafc — Signal White: Primary titles, hero heading, active button labels, and logo logotype
- #8f99a8 — Muted Slate: Hero paragraph descriptions, inactive nav links, and secondary attributes
- #495366 — Dim Steel: Metadata, connector labels, secondary workflow subtitles, and footer specs
TYPOGRAPHY
Typeface Geist Sans (or Inter, SF Pro Display), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 16px body-lg, 20px heading, 56px display. Tracking -0.03em for headlines, 0.05em for caps badges, 0 for body. The typography conveys cold precision and enterprise reliability via a modern geometric neo-grotesque like Geist Sans or Inter. Tight negative tracking at display scales gives the 3-line heading a heavy, monolithic presence, while generous line-height on 13-14px technical text ensures effortless parsing.
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
Depth is achieved through planar layering rather than optical drop shadows. Level 0 is the infinite dark void carrying a dot-mesh wave; Level 1 panels (#0c1017) mask the wave behind subtle 1px borders (#18202c); Level 2 modules (#131924) sit within panels like physical circuit blocks.
IMAGERY
Avoid photography completely. Visuals consist exclusively of clean technical schematics, vector circuit routing diagrams, and an ethereal, high-density particle-wave simulation that visualizes voice frequency and network topology.
SIGNATURE DETAIL — the thing that makes this design itself
The singular identity anchor is the glowing particle-wave field flowing behind a crisp dark architectural diagram, punctuated by an explosive single-point amber CTA (#ff4d15). Misusing it means adding multiple colored buttons or replacing the vector network schematic with generic SaaS dashboard mockups.
MUST
- Keep background surfaces within 5% luminance of absolute black to preserve particle glow contrast.
- Limit vivid orange (#ff4d15) strictly to single primary focal points and small brand moments.
- Use 1px borders (#18202c) instead of heavy drop shadows to define edge separation.
- Render headline breaks deliberately across three short, impactful statement lines.
AVOID
- Never introduce colorful gradient fills or bright saturated backgrounds behind the text.
- Avoid blurry or thick diffused drop shadows; cards must remain crisp and planar.
- Do not set body typography above 16px; technical authority relies on restrained scale.
- Never tint panel borders with orange unless the element is explicitly focused or active.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1440:896. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
