Design a dark-mode website section: a deep cockpit framed by opposing cyan and magenta laser curtains converging on automated intelligence.
LAYOUT
The page follows a precise vertical stack centered on a 1200px grid. It starts with a minimal 64px header, descends to an update pill badge, followed by a tight 2-line headline, subtitle, and dual CTA buttons. Below, a 4-column metric grid sits directly above the hero orchestration console, concluding with a centered trust logo banner.
PALETTE (use these exact hex values)
- #030509 — Void Black: deep primary canvas absorbing surrounding optical bloom and anchoring all floating elements
- #0A0E17 — Console Dark: glassmorphic card and dashboard canvas with subtle inner glow and dark transparency
- #2563EB — Beam Blue: primary call-to-action background, left-side energy beams, and focal loan intake nodes
- #38BDF8 — Electric Cyan: left gradient text stop, data intake indicators, and vertical laser bloom
- #EC4899 — Hyper Magenta: right vertical beam bloom, headline gradient finish, and monetary stat accent
- #FFFFFF — Optic White: primary heading text, active navigation labels, and critical numeric values
- #94A3B8 — Slate Muted: supporting body copy, inactive nav links, and metadata descriptions
- #1E2638 — Subtle Outline: delicate 1px borders surrounding metric tiles, navigation pills, and console housing
TYPOGRAPHY
Typeface Inter Display (or Geist Sans, Plus Jakarta Sans, SF Pro Display), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 16px body-lg, 18px subheading, 28px heading, 52px display. Tracking -0.03em for headlines, 0 for body, 0.05em for caps. The typographic tone is authoritative, automated, and mathematically clean, embodying modern institutional fintech. The tight tracking (-0.03em) on large headings conveys density and speed, while clear separation between 28px statistics and 11px labels makes complex data instantly scannable. A geometric sans like Inter or Geist perfectly communicates zero-error algorithmic efficiency.
GEOMETRY & SPACING
Corner radii — cards 12px, links 9999px, inputs 8px, buttons 8px. Spacing on a 4px unit, 16px gaps, 80px between sections, 1200px container, comfortable density.
DEPTH
Depth is created purely through luminous optical layering rather than physical drop shadows. The background holds an ambient void at level 0, illuminated from behind by cyan and magenta light leaks. The metric cards and main console hover on level 1 through semi-transparent glass fills and fine border strokes, while active glowing nodes emit forward-facing radial halos.
IMAGERY
The imagery is non-photographic, leaning on high-fidelity schematic mockups and kinetic digital lighting. The centerpiece is a high-tech automation schematic composed of status pills, progress bars, and glowing vector fibers converging into an engine. Generic stock photography of bankers or offices would completely destroy the high-tech infrastructure premise.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-flanked chromatic laser columns: vertical electric cyan speed lines washing down the left margin and magenta-pink lines cascading down the right margin, creating an unmistakable theatrical portal that focuses attention onto the central black console.
MUST
- Anchor the left side in electric cyan and the right side in vivid magenta light effects.
- Keep card backgrounds semi-translucent (#0A0E17) over the black canvas to catch ambient bloom.
- Use 1px borders in #1E2638 on all interactive cards, pills, and containers.
- Reserve the cyan-to-magenta linear text gradient exclusively for the primary headline punchline.
AVOID
- Do not use white or light backgrounds anywhere; the aesthetic requires pitch black.
- Avoid using bright yellow or orange light leaks; stay within cyan, blue, and magenta.
- Never drop heavy solid drop-shadows; rely purely on soft radial optical glows.
- Do not exceed 1px border stroke thickness on cards or badges.
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 中尝试 
