Design a light-mode website section: deep twilight descending into luminous white infrastructure with electric cyan and cobalt gradient conduits.
LAYOUT
The hero uses an asymmetric two-column composition inside a 1240px container. The left column (approximately 45% width) stacks the live status pill, display headline, supporting copy, dual CTAs, and compliance bar. The right column houses the vertical architectural diagram that flows top-to-bottom: category input nodes, central API hub, connector tray, and baseline clearing systems.
PALETTE (use these exact hex values)
- #030712 — Deep Twilight: Forms the top backdrop behind the navigation bar before bleeding downward.
- #ffffff — Pristine Canvas: Main canvas background and solid card surface for high-elevation UI components.
- #f8fafc — Subtle Tray: Background fill for lower connector trays and badge housings.
- linear-gradient(135deg, #2563eb 0%, #06b6d4 100%) — Electric Gradient: Primary CTA fill and typographic gradient highlight on action keywords.
- #2563eb — Cobalt Blue: Node connector stroke lines and active icon badges.
- #06b6d4 — Cyan Flare: Secondary brand accent for gradient terminal endpoints and badges.
- #0b0f19 — Ink Slate: Primary display headings, card titles, and high-emphasis labels.
- #64748b — Muted Slate: Body copy, secondary navigation links, and connector meta-labels.
- #e2e8f0 — Card Border: 1px hairline stroke defining architectural node cards and inputs.
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, SF Pro Display, Manrope), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px body-lg, 24px subheading, 56px display. Tracking -0.03em at display, -0.01em at body. Plus Jakarta Sans delivers a clinical, hyper-modern financial engineering voice with geometric clarity and humanist friendliness. The tight letter tracking (-0.03em) on the headline conveys institutional authority and architectural precision. Inter or SF Pro Display serve as direct, drop-in substitutes without disrupting layout rhythm.
GEOMETRY & SPACING
Corner radii — cards 18px, links 999px, inputs 10px, buttons 12px. Spacing on a 4px unit, 20px gaps, 96px between sections, 1240px container, comfortable density.
DEPTH
Depth is created through an atmospheric layered gradient: a deep navy upper field transitions to pure white, giving the illusion of daylight breaking from below. Floating cards use subtle 1px borders (#e2e8f0) and soft, expansive box-shadows (0 12px 32px rgba(15, 23, 42, 0.04)) to hover effortlessly above the illuminated canvas.
IMAGERY
The design eschews photographic imagery completely in favor of an architectural schematics diagram. High-fidelity floating cards represent inputs, core API infrastructure, and financial networks, connected via crisp vector circuit lines. Any photorealistic imagery or illustrative doodles would instantly erode the bank-grade infrastructure feel.
SIGNATURE DETAIL — the thing that makes this design itself
The dual-atmosphere canvas: a nocturnal deep navy top edge melting down into an ethereal white platform illuminated by electric blue-cyan vector conduits. If converted to a flat single-color background or deprived of its glowing top-down light leak, the signature futuristic infrastructure identity vanishes.
MUST
- Use lush aurora radial gradients exclusively at the upper backdrop boundary.
- Maintain strict 18px corner radii on all floating diagram cards.
- Highlight key verbs within headings using electric blue-to-cyan gradient text clips.
- Keep connector lines precisely 1.5px with rounded 90-degree corner paths.
AVOID
- Do not extend the dark twilight background into the bottom two-thirds of the hero.
- Avoid harsh high-contrast drop shadows; use diffuse multi-layered blurs under 10% opacity.
- Never use solid neon backgrounds for large card containers.
- Do not use sharp 90-degree uncurved elbows on pipeline connector lines.
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 中尝试 
