Design a dark-mode website section: deep midnight canvas punctuated by electric cyan and emerald telemetry glow.
LAYOUT
The section employs a balanced two-column hero layout with a 45/55 split. The left column stacks an eyebrow badge, a 48px heading with colored accent text, descriptive paragraph, a four-row feature list, and dual CTAs. The right column showcases a large interactive proxy routing diagram stacked directly above a four-cell KPI metric bar and a monochrome logo trust band.
PALETTE (use these exact hex values)
- #040810 — Canvas Deep Navy: Deepest background layer behind all sections and structural containers.
- #0a101d — Card Surface Dark: Background fill for primary diagram panels and KPI stat boxes.
- #182234 — Border Subtle Slate: Delicate 1px outline for cards, outer wrappers, and divider strokes.
- #2d82fe — Brand Neon Azure: Primary CTA fill, headline gradient endpoint, and glowing node halos.
- #2de38e — Telemetry Emerald: Status indicator dots, tag badges, and headline stat metrics.
- #ffffff — Text Primary White: Primary headings, active labels, and emphasized KPI numbers.
- #828e9e — Text Muted Slate: Body copy, secondary labels, disabled icons, and explanatory microcopy.
- #0e1828 — Subtle Pill Fill: Background fill for internal sub-nodes, pill tabs, and inactive buttons.
TYPOGRAPHY
Typeface Inter (or Geist, SF Pro Text, Plus Jakarta Sans), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 16px body-lg, 18px subheading, 32px heading, 48px display. Tracking -0.03em at display, 0.05em at uppercase caps. The typography relies on Inter or a pristine neo-grotesque sans, conveying clinical precision, security infrastructure reliability, and modern developer tooling. High contrast between massive tightly tracked headings (-0.03em) and delicate, spaced-out microcopy (0.08em tracking) projects an enterprise-grade cloud architecture authority.
GEOMETRY & SPACING
Corner radii — cards 16px, links 6px, inputs 8px, buttons 10px. Spacing on a 8px unit, 20px gaps, 80px between sections, 1240px container, comfortable density.
DEPTH
Elevation is achieved through luminous border accents and ambient radial glows rather than traditional drop shadows. Panels sit flat against the deep navy canvas, separated by 1px slate borders (#182234), while the hero proxy node achieves perceived z-index elevation via a soft 15-20px cyan and emerald blur filter radiating outward.
IMAGERY
Imagery is entirely schematic and diagrammatic, relying on UI-native vector nodes, dashed telemetry connectors, and minimal line iconography. Photorealistic imagery or 3D character illustrations are strictly excluded in favor of structural software architecture blueprints.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-tone illuminated central proxy node: a rounded dark square enveloped by an electric cyan-to-mint gradient border glow that radiates outward into faint dotted circuit lines. It visually demonstrates traffic interception and governance. Misusing it by placing glow on secondary cards flattens the visual hierarchy and breaks the proxy metaphor.
MUST
- Use a subtle 1px border (#182234) on every card and nested surface container.
- Restrict vibrant neon colors (#2d82fe, #2de38e) strictly to interactive points and focal proxy elements.
- Keep text hierarchy stark: pure white (#ffffff) for titles, muted slate (#828e9e) for supporting copy.
- Maintain generous 24px to 32px padding inside data visualization and diagram cards.
AVOID
- Do not use high-opacity white borders; borders must stay below 20% opacity or hex #182234.
- Do not apply neon gradients to full card backgrounds; keep surfaces dark navy and flat.
- Do not use saturated warm colors like red, orange, or yellow anywhere in this palette.
- Do not omit the glowing perimeter on the central proxy node—it anchors the diagram.
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 中尝试 
