Design a dark-mode website section: developer api precision anchored by glowing cosmic depth and warm coral urgency across dark glass surfaces.
LAYOUT
The page opens with a standard top navigation bar (logo left, centered navigation with dropdown carets, secondary sign-in and primary coral pill CTA right). The hero area is split 50/50: left side contains the status eyebrow, dual-line display headline with keyword accent, short value proposition, dual CTAs, and a launch announcement link; right side showcases a floating code terminal flanked by three connected glass callouts over an orbital light ring. Below this runs a four-column KPI metrics row and a single-line compliance assurance bar before transitioning sharply to a cream developer section.
PALETTE (use these exact hex values)
- #07090E — Void Black: Deepest canvas background for the hero container, grounding the cosmic illumination.
- #111726 — Translucent Slate: Slightly elevated card containers, code blocks, and metrics panels with 60-80% opacity.
- #EE5A52 — Coral Spark: Primary conversion button fill, high-emphasis headline accent, and launch announcement badges.
- #4ADE80 — Active Mint: Status indicator pills, HTTP success status codes, compliance checkmarks, and metric upticks.
- #FFFFFF — Starlight White: Main heading text, prominent metric values, card titles, and high-priority interactive labels.
- #94A3B8 — Muted Nebula: Subheadings, descriptive body paragraphs, parameter keys in code snippets, and inactive nav links.
- #FBF8F3 — Dawn Cream: Light mode baseline surface starting immediately below the hero metrics footer.
- #252E42 — Subtle Border: 1px structural outline on code terminal, floating feature cards, and bottom KPI metric tiles.
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, DM Sans, system-ui), weights 400/500/600/700. Sizes 12px caption, 13px body-sm, 16px body, 18px body-lg, 24px subheading, 32px heading, 54px display. Tracking -0.03em at display, 0 at body. Plus Jakarta Sans delivers a modern, neo-grotesque authority with generous x-height and circular geometric bowls. It strikes an approachable balance between high-end consumer polish and robust fintech infrastructure. JetBrains Mono balances this with rigorous developer-first credibility.
GEOMETRY & SPACING
Corner radii — cards 14px, links 4px, inputs 10px, buttons 10px. Spacing on a 8px unit, 20px gaps, 96px between sections, 1240px container, comfortable density.
DEPTH
Depth is achieved through luminance and atmospheric lighting rather than physical drop shadows. A deep space vortex behind the right-hand panel creates radial ambient illumination that bleeds through semi-transparent glass cards (backdrop-filter: blur(16px)). Foreground interactive elements utilize a 1px border highlight (rgba(255, 255, 255, 0.12)) to lift off the dark canvas.
IMAGERY
The visual focal point is an elliptical cosmic vortex rendered with fine particle trails in cyan, magenta, and celestial white. It communicates speed, computational vastness, and precision without literal photographic clutter. Vector diagrams, glowing connection nodes, and monospace syntax serve as functional iconography.
MUST
- Use coral (#EE5A52) sparingly on hero CTAs and intentional headline keyword emphasis to drive visual focus.
- Maintain high glass translucency using background-blur (16px) combined with subtle 1px translucent borders.
- Pair terminal monospace snippets directly with user-friendly outcome cards using anchored hairline vectors.
- Keep display typography tight (-0.035em tracking) to preserve high density and technical credibility.
AVOID
- Do not use generic blue buttons; coral is the designated conversion action color.
- Do not apply heavy drop shadows with high opacity; rely on glass borders and particle glow for layering.
- Do not allow code font sizes to drop below 12px or lose syntax contrast against the terminal surface.
- Do not center-align the main hero headline; it must remain left-aligned to balance the right-side graphic.
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 中尝试 
