Design a dark-mode website section: an authoritative midnight canvas where architectural precision meets luminous cyan pipelines and high-stakes enterprise confidence.
LAYOUT
The header spans full width with an inline navigation bar terminating in secondary sign-in and gradient CTA. Below, the viewport splits into a 45/55 asymmetric hero layout: left copy stack with dual CTAs and checkmark assurances, right large-format architecture canvas. The section concludes with a balanced four-column grid of modular proof tiles atop a quiet client trust bar.
PALETTE (use these exact hex values)
- #060b14 — Obsidian Void: Global background canvas beneath the hero content and decorative wave mesh
- #0b1626 — Slate Card Base: Primary surface for modular cards, architecture containers, and lower proof blocks
- #0f1f33 — Deep Sub-Node: Inner card surfaces for data sources, action nodes, and integration grid cells
- #1a2a40 — Vector Boundary: Single-pixel borders framing cards, buttons, connectors, and node items
- #38d9d0 — Cyan Flare: Emphasized headline metrics, active connector pins, telemetry line graphs, and node icons
- linear-gradient(90deg, #2dd4bf 0%, #6366f1 100%) — Action Gradient: Primary interactive action buttons and central agent orchestration highlight box
- #ffffff — Pure Illumination: Display headlines, primary card headings, and active status text
- #7f95b0 — Cool Muted Slate: Body descriptions, secondary labels, subtext under metrics, and disabled nav items
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, General Sans, system-ui), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 17px body-lg, 20px subheading, 32px heading, 54px display. Tracking -0.025em at display, 0.01em at micro. Plus Jakarta Sans delivers a pristine, hyper-competent enterprise voice that blends software engineering discipline with modern B2B SaaS clarity. The tight letter-spacing on display headlines conveys gravity, while the generous aperture at 11-13px ensures complex schema labels remain effortlessly legible. Inter serves as a pixel-accurate replacement without compromising structural integrity.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 10px. Spacing on a 4px unit, 20px gaps, 64px between sections, 1280px container, tight density.
DEPTH
Elevation is achieved entirely without dark drop shadows. Depth relies on surface step-ups from background (#060b14) to card panel (#0b1626) to node chip (#0f1f33), enclosed by crisp 1px borders (#1a2a40). Radial luminescence in cyan (#38d9d0) provides ambient backlighting behind critical system nodes.
IMAGERY
Visual assets are strictly schematic and computational: fine-line vector node diagrams, SVG enterprise security shields, and miniature sparkline analytics. The sole background decoration is an abstract, undulating 3D point-cloud wave pattern in deep midnight blue that suggests immense data volume. Photographic imagery of human subjects is completely prohibited.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the interactive Growth Architecture schematic: a multi-tiered, circuit-like node diagram where orthogonal tracks funnel disparate data sources into a central glowing agent brain before dispensing measurable business outcomes. Misusing it involves turning it into static non-functional decorative art or overloading the connectors with multicolored animations.
MUST
- Reserve the vivid cyan-to-indigo gradient strictly for key conversions and the central orchestration core.
- Enforce 1px solid borders (#1a2a40) across all dark cards to ensure structure without visual weight.
- Maintain strict horizontal alignment between the left hero text block and the right architecture canvas.
- Keep typography high-contrast by setting headlines in #ffffff and body prose strictly in cool slate #7f95b0.
AVOID
- Do not introduce fuzzy multi-layer drop shadows; depth is strictly outline- and glow-driven.
- Never apply warm accent colors like orange, red, or yellow to status elements or data visualizations.
- Do not set body copy in pure white, which flattens the hierarchy against the primary headline.
- Never replace vector architectural schematics with generic stock photography or screenshots.
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 中尝试 
