Design a dark-mode website section: deep midnight canvas anchored by electric blue gradients, cybernetic line diagrams, and crisp metrics.
LAYOUT
Asymmetric two-column hero layout with a 50/50 split on desktop. The left column stacks metadata tag, display heading, body narrative, and dual CTA buttons. The right column houses a technical flowchart panel encapsulating connectors, engine modules, and outputs. A full-width metric ribbon spans underneath both columns before transitioning into the logo ticker.
PALETTE (use these exact hex values)
- #030712 — Canvas Deep: Absolute background canvas for the entire viewport.
- #070d1d — Panel Background: Background fill for the interactive architecture frame and bottom metrics bar.
- #0b1528 — Inner Card Fill: Sub-cards and node pills inside the system architecture diagram.
- #1e293b — Hairline Border: 1px hairline strokes separating navigational items, container cards, and metric dividers.
- #1d4ed8 — Brand Blue Primary: Primary CTA button background and glow accent anchor.
- #3b82f6 — Electric Accent Blue: Hero heading highlighted text, glowing card border, and connector active states.
- #f8fafc — Text Primary: Primary headline text, active labels, and emphasized numerical figures.
- #94a3b8 — Text Muted: Body paragraph, inactive nav links, and architectural node descriptions.
- #64748b — Text Dimmed: Uppercase section labels and metric helper captions.
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, Geist, Roboto), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px subheading, 22px heading, 52px display. Tracking -0.03em on display titles, 0.05em on uppercase tags. Clean, authoritative, and engineering-centric. Inter or similar neo-grotesque sans typefaces communicate rigor and precision without stylistic quirks. The tight letter-spacing on display sizes ensures headlines feel modern, compact, and confident.
GEOMETRY & SPACING
Corner radii — cards 14px, links 4px, inputs 8px, buttons 8px. Spacing on a 4px unit, 20px gaps, 80px between sections, 1240px container, comfortable density.
DEPTH
Depth is created through luminescence and border transparency rather than drop shadows. Surface layers elevate by stepping up from deep navy-black (#030712) to dark slate (#070e1c), illuminated along edges by faint gradient strokes. The central active card uses a radiant blue outer glow (0 0 16px rgba(37,99,235,0.4)) to simulate hardware-level focus.
IMAGERY
Abstract data filaments and sinusoidal particle waves float faintly in the lower background beneath the architectural schematic, evoking streaming telemetry. Avoid photographic human imagery or stock enterprise photos. All visual diagrams must be schematic, vector-based, and modular.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-state architecture node diagram where the central 'AI Audit Engine' is highlighted with an intense electric-blue border glow while surrounded by muted connector pipelines. It immediately communicates internal automation logic without leaving the hero section.
MUST
- Use high-contrast pure white (#f8fafc) for primary headings and blue highlights for key phrases.
- Maintain hairline 1px borders (#1e293b) to delineate panels against the deep canvas.
- Keep architectural diagrams structured with clean orthogonal dashed connectors.
- Accentuate the most critical processing node with a vibrant 1px electric blue border and glow.
AVOID
- Do not introduce warm color gradients like orange, red, or yellow into the primary interface.
- Avoid heavy drop shadows; rely on luminous neon glows and subtle edge borders instead.
- Do not use thick button borders or skeuomorphic bevels.
- Never drop container backgrounds to pure black (#000000); keep a faint midnight blue undertone.
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 中尝试 
