Design a dark-mode website section: deep midnight canvas electrified by fuchsia radiance, precise schematic nodes, and enterprise telemetry.
LAYOUT
The layout is divided into two primary zones: an upper encapsulated hero card and an expansive multi-column dark footer. The hero is split 45/55 between a strong left-aligned headline cluster and a centered relational schematic diagram. Below the main card enclosure, the footer spans horizontally with brand metadata and subscription on the left, four balanced category link stacks in the center, and a direct CTA contact module on the right, grounded by a legal bottom bar.
PALETTE (use these exact hex values)
- #06080d — Void Black: Deepest canvas background surrounding the hero container and grounding the footer
- #0b0f17 — Elevated Obsidian: Hero module card background providing contrast against the base void
- #111726 — Node Slate: Background fill for schematic satellite nodes, secondary buttons, and form inputs
- #1d2433 — Border Hairline: Subtle 1px boundary stroke on container cards, input fields, and pill chips
- #a855f7 — Fuchsia Primary: Primary interactive fill on primary CTA button, active icons, and brand badge text
- #c026d3 — Neon Violet Glow: Accent halo glow, central core hub border, and circuit connector lines
- #10b981 — Success Emerald: Status indicator checkmarks inside diagram nodes signifying compliance
- #ffffff — Pure White: Display headings, primary button text, and core hub title label
- #94a3b8 — Muted Slate: Secondary body text, value prop bullets, and inactive navigation links
- #64748b — Dim Gray: Diagram subtitle microcopy, input placeholder, and copyright line
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, Geist, SF Pro Display), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 16px body-lg, 18px subheading, 22px heading, 44px display. Tracking -0.03em at display, 0.01em at body. The typographical voice is engineered, precise, and authoritative, echoing modern infrastructure-grade developer tools. A neutral geometric sans-serif (Inter match) provides high legibility at micro sizes (10-12px) in diagram nodes, while remaining confident and muscular at 44px display headlines. If Inter is unavailable, Plus Jakarta Sans or Geist seamlessly preserves the technical compliance tone.
GEOMETRY & SPACING
Corner radii — cards 20px, links 999px, inputs 8px, buttons 10px. Spacing on a 4px unit, 20px gaps, 80px between sections, 1280px container, comfortable density.
DEPTH
Depth is achieved through luminance layering rather than traditional drop shadows. The bottom plane (#06080d) recedes, while the hero container (#0b0f17) steps forward using a crisp 1px stroke (#1d2433). The ultimate visual elevation comes from the radiant magenta-fuchsia bloom behind the central diagram hub (box-shadow 0 0 35px rgba(168, 85, 247, 0.3)).
IMAGERY
This interface avoids photorealistic human imagery in favor of schematic, technical system architecture diagrams. Graphics rely on vector-based geometric iconography, crisp pill containers, and clean orthogonal telemetry lines. Off-brand imagery would include complex 3D glossy renders, human lifestyle photography, or playful cartoon illustrations.
SIGNATURE DETAIL — the thing that makes this design itself
The standout signature move is the glowing compliance hub diagram: a central violet-bordered card pulsing with a soft fuchsia aura, linked via orthogonal hairline circuit routes to six peripheral status nodes with emerald checkmarks. It transforms abstract regulatory compliance into an tangible, automated nervous system. Misusing it involves making lines overly thick or misaligning satellite nodes so the visual equilibrium is broken.
MUST
- Retain the sharp distinction between the #06080d root background and the elevated #0b0f17 hero container card.
- Use fuchsia (#a855f7) sparingly as a targeted spotlight color exclusively for primary actions, glow cores, and key badges.
- Keep circuit connector lines strictly hairline (1px to 1.5px) in dark purple tones to avoid cluttering diagram legibility.
- Pair emerald green checkmarks (#10b981) with microcopy to immediately communicate verified compliance status.
AVOID
- Do not use full-width white backgrounds anywhere; this interface is strictly native dark mode.
- Do not saturate diagram connector lines with thick strokes or neon gradients that overpower the textual nodes.
- Do not omit the 1px subtle border (#1d2433) around dark cards, as surfaces will collapse into the base background.
- Do not use square corners; all buttons, inputs, satellite cards, and frames require calculated rounding (8px to 20px).
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 中尝试 
