Design a dark-mode website section: deep-space midnight canvases illuminated by electric cyan telemetry lines and structured enterprise workflow nodes.
LAYOUT
The page follows an upper-island, lower-grid cadence. The top section presents an enclosed, wide-aspect card containing a two-column split: left-aligned value proposition with dual CTAs, and right-aligned interactive node flowchart. Directly beneath, the page transitions into a classic 6-column dark footer with company branding, four link lists, and an inline newsletter form, anchored by an edge-to-edge legal sub-footer.
PALETTE (use these exact hex values)
- #000205 — Void Black: Absolute page background framing the entire footer and outer canvas perimeter.
- #070d1a — Deep Midnight: Background fill for the primary rounded hero CTA container.
- #0d1728 — Node Slate: Background fill for workflow step chips and persona cards in the diagram.
- #00a3ff — Electric Cyan: Primary CTA fill, node connection pulses, and active focal highlights.
- #16253b — Cyber Stroke: Subtle structural border on input cards, nodes, and horizontal dividers.
- #ffffff — Pure White: Primary typography for headers, brand wordmark, and active button text.
- #8da2bd — Steel Gray: Subordinate body copy, descriptive microcopy, and inactive navigation links.
TYPOGRAPHY
Typeface Inter (or Geist,Plus Jakarta Sans,SF Pro Display), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px subheading, 24px heading, 40px display. Tracking -0.02em at display, 0.05em at caps microcopy. The typography is cold, precise, and distinctly modern B2B SaaS infrastructure. Set in a clean geometric grotesk matching Inter, it projects mathematical order through strict hierarchy, tight tracking on large display headings, and wide letter-spacing on technical captions. Geist or Plus Jakarta Sans serve as drop-in equivalents.
GEOMETRY & SPACING
Corner radii — cards 24px, links 4px, inputs 8px, buttons 10px. Spacing on a 8px unit, 20px gaps, 64px between sections, 1340px container, comfortable density.
DEPTH
Depth is created purely through luminous contrast and edge luminescence rather than heavy drop shadows. Surfaces rise from void black (#000205) to dark navy (#070d1a), with diagram nodes given further prominence through 1px border highlights and soft cyan radial outer glows. The hexagonal central node projects an ethereal ambient flare that defines it as the light source.
IMAGERY
Avoids literal photographic portraits in favor of structural schematic diagrams, abstract iconography, and minimalist vector node representations. The visual language evokes precision engineering, cloud orchestration, and real-time telemetry. Unrendered 3D renders or generic office photography would destroy the technical rigor.
SIGNATURE DETAIL — the thing that makes this design itself
The glowing cyan synaptic pipeline diagram, which connects peripheral workflow inputs into a central glowing hexagon before distributing them out to multiple personas. Losing this diagram would reduce the interface to a generic corporate SaaS footer, stripping away its visual thesis of automated intelligent routing.
MUST
- Reserve vibrant cyan (#00a3ff) exclusively for actionable buttons and active diagram energy paths.
- Enclose complex CTA content in an island container with large 24px radius borders.
- Use 1px subtle borders (#16253b) to define dark components against deep surfaces.
- Set secondary and tertiary descriptive text in muted slate (#8da2bd) to maintain hierarchy.
AVOID
- Do not use high-saturation backgrounds across the entire canvas; keep the foundation void-black.
- Never use pure white (#ffffff) for paragraph body copy or non-essential secondary labels.
- Avoid sharp 90-degree angular connector paths; use organic bezier curves for circuit routing.
- Do not overload buttons with heavy gradients; stick to solid cyan or dark framed ghost styles.
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 中尝试 
