Design a dark-mode website section: deep midnight canvas anchored by luminous cyan energy flows and architectural schematics.
LAYOUT
The layout is split into two primary zones: an upper split-screen hero consisting of display typography on the left (spanning roughly 40% width) and an isometric systems diagram on the right (60% width), followed by a lower utility deck. The utility deck transitions cleanly into a comprehensive six-column footer containing company info, four product/legal navigation columns, and a right-aligned newsletter subscription card.
PALETTE (use these exact hex values)
- #02050A — Void Black: Absolute bottom footer background and deep canvas tone
- #050C16 — Midnight Card: Background fill for telemetry modules and input fields with faint transparency
- #162536 — Blueprint Stroke: Subtle perimeter lines for system boxes, input fields, and vertical column dividers
- #00F0D0 — Cyber Cyan: Primary CTA fill, flowline glows, and high-impact telemetry values
- #0099FF — Electric Azure: Eyebrow tag text, secondary hero highlights, and solar schematic glows
- #DE356A — Infrared Crimson: Subtle ambient vertical fluting backlight on the extreme right horizon
- #FFFFFF — Pure White: Display headings, logo text, and primary metric readouts
- #8B9BB4 — Slate Steel: Body copy, footer navigational links, and secondary metric labels
- #0D1520 — Dark Charcoal: Newsletter input background and social media button container fill
TYPOGRAPHY
Typeface Inter (or Geist, SF Pro Display, Plus Jakarta Sans), weights 400/500/600/700. Sizes 10px caption, 11px body-sm, 13px body, 14px body-lg, 16px subheading, 20px heading, 36px display. Tracking -0.02em at display, +0.08em at micro uppercase. Clean, authoritative, and computational. Inter (or equivalent precise neo-grotesque) conveys high-reliability infrastructure and enterprise readiness without distracting ornamentation. The heavy use of tracked uppercase labels gives the interface the feeling of a mission-critical SCADA or aerospace control deck.
GEOMETRY & SPACING
Corner radii — cards 8px, links 2px, inputs 6px, buttons 6px. Spacing on a 4px unit, 24px gaps, 80px between sections, 1240px container, comfortable density.
DEPTH
Depth is produced through layered illumination rather than drop shadows. Backgrounds emit subtle vertical blue/magenta fluting gradients, while foreground elements sit inside translucent dark panels with sharp 1px hairline borders (#162536) that mimic illuminated architectural schematics.
IMAGERY
Visual imagery is entirely synthetic and architectural: isometric, wireframe-rendered server racks, modular solar arrays, and high-voltage transmission towers illuminated with neon cyan and blue edge-lighting. Realistic photography or organic illustration is completely forbidden.
SIGNATURE DETAIL — the thing that makes this design itself
The glowing cyan architectural schematic circuit that connects modular infrastructure nodes across a faint topographic wireframe map directly into a live telemetry box.
MUST
- Use solid bright cyan (#00F0D0) strictly for active telemetry, data links, and primary action buttons.
- Enclose all schematic diagram nodes within fine 1px strokes of #162536 with subtle 8px corners.
- Keep typography strictly sans-serif, using letter-spaced uppercase (10-11px) exclusively for technical headers.
- Maintain high contrast between display text (pure white) and metadata body copy (#8B9BB4).
AVOID
- Do not use warm yellows, oranges, or saturated greens; rely exclusively on cyan, electric blue, and faint infrared.
- Never apply drop shadows or heavy blur cards; depth is created strictly by thin vector line-work and gradient lighting.
- Do not round card corners beyond 8px; pill radius is strictly reserved for buttons.
- Never set column links to full white; white is reserved for category highlights and primary titles.
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 中尝试 
