Design a dark-mode website section: deep obsidian canvas illuminated by volcanic embers, connecting modular infrastructure through frosted translucent surfaces.
LAYOUT
The header spans full width with spaced navigation links and dual sign-in actions. The main hero splits into a 50/50 two-column grid: left column features category pill, heavy three-line display headline, explanatory copy, action pair, and value pillars. Right column is reserved for the live-system architecture diagram and code execution payload card.
PALETTE (use these exact hex values)
- #0A0818 — Obsidian Base: Deepest canvas background providing contrast across all layout regions
- #FF3542 — Magma Core Glow: Diffuse radial backlight driving the primary energetic warm glow
- #111422 — Code Panel Surface: Dense dark surface used strictly for the bottom API response card
- #FFFFFF — Text Primary: Main headlines, active labels, and primary CTA text fill
- #9E9EAF — Text Muted: Body copy, supporting captions, and inactive navigation links
- linear-gradient(135deg, #FFA3BA 0%, #FF3E6C 100%) — Headline Gradient: Highlight phrase 'All payments.' in the main display title
- #22C55E — Status Emerald: Success dots, verification checkmarks, and 200 OK badges
TYPOGRAPHY
Typeface Inter Display (or Plus Jakarta Sans, SF Pro Display, General Sans), weights 400/500/600/700. Sizes 12px caption, 13px body-sm, 14px subheading, 15px body, 16px heading, 18px body-lg, 60px display. Tracking -0.03em at display, -0.01em at body. The typography communicates hyper-refined fintech precision. The display scale uses heavy geometric sans weights with tight letter-spacing for commanding authority, while the monospace accent invokes developer trust. Standardizing on Inter Display or Plus Jakarta Sans preserves this high-velocity, modern software aesthetic without licensing hurdles.
GEOMETRY & SPACING
Corner radii — cards 16px, links 999px, inputs 10px, buttons 10px. Spacing on a 8px unit, 20px gaps, 80px between sections, 1280px container, comfortable density.
DEPTH
Depth is achieved through luminance layering rather than traditional drop shadows. Translucent frosted cards sit directly over an intense red-orange radial mesh gradient, causing background illumination to bleed through their semi-opaque surfaces. Key hub elements receive a subtle, high-spread colored bloom to simulate internal light generation.
IMAGERY
Abstract schematics replace photographic imagery entirely. The visual focus is a functional network diagram showing transaction flows from sources through a central core to multi-chain destinations. Vector brand tokens, hairline connection paths, and code terminals communicate institutional developer readiness.
SIGNATURE DETAIL — the thing that makes this design itself
The distinctive graphic hallmark is the central glowing squircle core dispatching fine bezier rails outward across frosted destination cards, underlaid by a dramatic volcanic ambient backlight. Replicate this with an ambient CSS radial gradient (#FF3542) masked behind semi-transparent panels and an SVG curved-path connector graph.
MUST
- Anchor visual weight with high-contrast pure white typography against deep chromatic backdrops.
- Reserve vibrant gradients strictly for key headline phrases and interactive visual anchors.
- Enclose secondary interactive items in frosted glass with precise 1px translucent borders.
- Use soft curved bezier connectors with micro-dots to diagram infrastructure relationships.
AVOID
- Do not use sharp 0px corners; maintain systematic rounded curves across all elements.
- Avoid applying flat opaque grey fills to floating cards; preserve backdrop blur.
- Do not tint the primary action button; keep it pure white for immediate affordance.
- Avoid multi-colored connector strokes; use unified soft translucent connecting paths.
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 中尝试 
