Design a dark-mode website section: deep navy void charged by electric blue luminescence and precise infrastructure schematics.
LAYOUT
The page opens with a top bar navigation spanning 1280px with centered menu links and right-aligned dual action items. The hero body splits into an asymmetric 5:7 grid: left contains the category badge, display headline, body paragraph, CTA cluster, and mini-features; right hosts the horizontal schematic diagram centered around the debit card. Beneath, a full-width metrics container grounds the view above the particle wave floor.
PALETTE (use these exact hex values)
- #030712 — Obsidian Canvas: Deep structural background absorbing ambient light
- #070E1E — Node Surface: Translucent dark fill for schematic cards and system modules
- #2563EB — Electric Cobalt: Primary CTA buttons, active glows, and headline gradient emphasis
- #38BDF8 — Cyan Glow: Card chip highlights, focal illumination, and badge dots
- #1E293B — Structural Stroke: 1px containment outlines, node frames, and schematic dotted connectors
- #FFFFFF — Pristine White: Primary titles, display typography, and prominent metric values
- #94A3B8 — Slate Muted: Body paragraphs, metric sub-labels, and tertiary navigation links
- #0F172A — Deep Faint Blue: Pill badge backdrop and subtle button hover surfaces
TYPOGRAPHY
Typeface Inter Display (or Plus Jakarta Sans,Geist,SF Pro Display), weights 400/500/600/700/800. Sizes 10px caption, 12px body-sm, 14px body, 18px body-lg, 20px subheading, 32px heading, 64px display. Tracking -0.03em at display, 0.05em at caps microcopy. Engineered, crystalline, and ultra-authoritative. The neo-grotesque sans (Inter Display or Geist match) brings clinical precision suited for developer tooling and programmatic finance. Tight display kerning (-0.035em) gives headlines immense structural presence while expanded micro-caps guarantee instant legibility in complex technical diagrams.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 8px. Spacing on a 4px unit, 24px gaps, 80px between sections, 1280px container, comfortable density.
DEPTH
Depth is created purely through luminous exposure against flat darkness rather than multi-stage drop shadows. The central debit card projects a spherical neon blur that diffuses behind dotted circuitry, while nodes remain nearly flat with razor-thin translucent borders. Low-level particle waves provide atmospheric ground plane depth at the base of the viewport.
IMAGERY
Abstract mathematical particle fields forming an undulating blue topographical wave represent data flow at the base. Technical schematic line art and strict geometric glyphs (microchips, padlocks, radars) represent platform capabilities. Stock photography or human portraits are strictly off-brand.
SIGNATURE DETAIL — the thing that makes this design itself
The glowing blue agent debit card positioned as an optical network nexus between dotted schematic nodes. It functions as both product proof and data-flow diagram center. It is commonly misused by making the connecting lines too thick or blowing out the radial glow so it obscures the fine hairline borders of surrounding nodes.
MUST
- Keep background tones strictly in the near-black navy spectrum (#030712 to #070E1E).
- Use uppercase tracking (0.06em to 0.08em) for micro-labels, node headers, and category tags.
- Rely on fine 1px borders in slate tones (#1E293B) to demarcate cards without heavy visual fills.
- Restrict neon cyan (#38BDF8) to functional focal points like connection highlights and the card aura.
AVOID
- Never introduce warm colors like orange, yellow, or red outside of specific error states.
- Avoid solid, opaque grey card backgrounds that kill the deep-space void atmosphere.
- Do not drop border radiuses below 8px on buttons or 12px on node cards.
- Never clutter the diagram with thick solid connector lines; use delicate dotted filaments.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1440:896. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
