Design a dark-mode website section: deep navy devops terminal meets glow-accented network architecture with high-contrast geometric precision.
LAYOUT
The page divides into two distinct horizontal modules: an upper interactive system preview split 45/55 between text narrative and network architecture, followed by a segmented horizontal rule into a multi-column global footer. The architecture visualizer frames a central hub flanked symmetrically by input edge sources on the left and output services on the right. Below, the footer organizes identity and newsletter capture at opposite margins with four equidistant link columns bridging the center.
PALETTE (use these exact hex values)
- #0a0d14 — Canvas Midnight: Deepest canvas background across hero CTA and footer environments
- #0f172a — Node Surface: Background fill for terminal boxes, endpoint cards, and input fields
- #1e293b — Hairline Border: Single-pixel stroke for structural cards, dividers, and node containers
- #4361ee — Electric Indigo: Primary solid CTA button background, focal badge icon, and headline gradient accents
- #38bdf8 — Neon Cyan Glaze: Luminescent accents, connection node dots, and code syntax highlights
- #253358 — Trace Blueprint: Curved vector lines interconnecting data sources to the central intelligence hub
- #f8fafc — Text Primary: High-contrast headings, active button labels, and prominent titles
- #94a3b8 — Text Muted: Descriptive body copy, input placeholders, and inactive navigational links
- #64748b — Text Dim: Sub-labels, camera count microcopy, and copyright legal strings
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans,SF Pro Display,Geist), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 15px subheading, 16px body-lg, 20px heading, 44px display. Tracking -0.025em for display, 0 for body. Engineered, clinical, and reassuringly corporate. The sans-serif typography (modeled after Inter) balances technical precision with high legibility at micro sizes, while the monospaced accent confers authentic developer-tooling pedigree. For zero-cost compliance, self-host Inter and JetBrains Mono under the SIL Open Font License.
GEOMETRY & SPACING
Corner radii — cards 10px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1280px container, comfortable density.
DEPTH
Depth is flattened and architectural, relying almost entirely on single-pixel boundary strokes (#1e293b) over subtle surface steps (#0f172a on #0a0d14). Shadows are avoided except for a faint, atmospheric radial bloom emanating from behind the core processing node. Components appear as flush panels in a high-tech console rather than stacked floating layers.
IMAGERY
Imagery is entirely abstract, schematic, and programmatic; photography is strictly excluded. Vector icons are uniform 1.5px hairline strokes contained within geometric bounding frames. Visual interest is generated purely through network graph nodes, connecting data pathways, and live terminal syntax.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-sided pipeline schematic where curved blue traces (#253358) channel peripheral edge inputs through a glowing central intelligence emblem into categorized enterprise actions. Its power lies in visually explaining abstract machine-learning infrastructure without screenshot complexity. It is commonly misused by cluttering line intersections or omitting the strict terminal connector dots.
MUST
- Use 1px borders in #1e293b to delineate architectural nodes against the midnight canvas.
- Keep terminal code previews in a legitimate monospaced font with accurate JSON indentation.
- Align the CTA section alongside the architecture diagram with equal visual weighting.
- Render connection traces using smooth cubic beziers terminating in solid circular node pins.
AVOID
- Never introduce skeuomorphic gradients or heavy multi-layered drop shadows on cards.
- Avoid high-saturation backgrounds; the canvas must remain near-black (#0a0d14).
- Do not use sharp 0px borders; keep a disciplined 8px to 10px radius across panels.
- Do not mix sans-serif fonts in the API/JSON blocks.
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 中尝试 
