Design a dark-mode website section: a threshold split between chaotic monochrome sensor noise and hyper-precise cybernetic nighttime intelligence.
LAYOUT
The layout executes a classic pyramid structure that branches into horizontal polarity. A clean sticky navigation bar anchors the top, followed by a tight centered vertical stack (pill, H1, description, dual CTAs, proof badge). Below the CTA cluster, the visual plane splits symmetrically across an interactive divider, balancing noisy CCTV inputs on the left against structured AI detections on the right.
PALETTE (use these exact hex values)
- #030508 — Obsidian Deep: Primary full-bleed page background and dark tone base
- #0C121E — HUD Glass: Semi-translucent container background for telemetry boxes and pills
- #1E2738 — Subtle Wire: Hairline borders on interactive pills, cards, and divider widgets
- #3B66FF — Action Cobalt: Primary CTA button background, navigation action fill, and core branding
- linear-gradient(90deg, #4E95FF 0%, #9B51E0 100%) — Clarity Beam: Display headline gradient on 'To instant clarity.' text span
- #2CE5C0 — Telemetry Cyan: Positive checkmarks, target bounding boxes, and AI-state indicators
- #FF3366 — Hazard Crimson: Legacy camera notification badges and system failure points
- #FFFFFF — Phosphor White: Primary headlines, action labels, and active UI titles
- #8E98A8 — Sensor Gray: Body copy, secondary metadata, and inactive state descriptions
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, Geist, SF Pro Display), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px subheading, 32px heading, 56px display. Tracking -0.03em at display, 0.08em at micro uppercase. The typographic tone is algorithmic, confident, and clinical. Inter or an equivalent modern sans provides neutral legibility at micro telemetry sizes while feeling monolithic and resolute at 56px. The letterforms convey software rigor and enterprise-grade reliability without leaning into playful startup quirks.
GEOMETRY & SPACING
Corner radii — cards 8px, links 999px, inputs 8px, buttons 10px. Spacing on a 4px unit, 20px gaps, 80px between sections, 1360px container, comfortable density.
DEPTH
Depth is created purely through luminous emission, particle z-layers, and selective optical blur rather than conventional drop shadows. Visual tiers emerge from the black void (#030508), stepping up through frosted backdrop-filtered cards (12px blur), and culminating in razor-sharp neon overlays that appear to float 10px above the 3D scene.
IMAGERY
The visual narrative is an explicit dual-reality split: the left side consists of grainy, monochrome surveillance point-clouds dotted with legacy red camera feeds, while the right features high-clarity nighttime corporate architecture scanned by luminous cyan telemetry paths and object-detection wireframes. Generic daytime photography or illustrated human vectors would completely break the enterprise intelligence mood.
SIGNATURE DETAIL — the thing that makes this design itself
The horizontal before-and-after threshold that visually splits chaotic 3D point-cloud static on the left into razor-sharp, cyan-bounded nighttime architectural computer vision on the right. To use it properly, ensure the divider line features an interactive slider handle and that both sides share the same physical perspective. It is commonly misused by treating it as a generic split-screen without the perceptual transition from noise to intelligence.
MUST
- Reserve vibrant cyan (#2CE5C0) and purple-blue gradients strictly for verified AI clarity states.
- Maintain high particle density on the left canvas to visually communicate noise and cognitive friction.
- Use 10px border radius consistently on primary and secondary action buttons.
- Use hairline (1px) borders with semi-transparent color for HUD tags and glass overlays.
AVOID
- Do not use solid white cards; all secondary surfaces must maintain dark glass transparency.
- Avoid warm colors (amber, orange, yellow); alert states must strictly utilize hazard crimson (#FF3366).
- Never drop shadows with positive Y-offsets; depth must rely on particle emission and edge glow.
- Do not render the comparison states as identical visual styles; chaos must look noisy and AI must look crisp.
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 中尝试 
