Design a dark-mode website section: deep-space developer console anchored by glowing data waves and precision telemetry metrics.
LAYOUT
The page follows a centered single-column stack on the vertical axis. It flows from a sparse top navbar directly into a tightly centered display headline, paragraph subtext, metric validation strip, paired action buttons, and finally expands into the wide product console card resting on the wave horizon.
PALETTE (use these exact hex values)
- #030712 — Void Black: deep background canvas underpinning the entire viewport and hero landscape
- #0B0F19 — Console Slate: background for the interactive API console card and floating navigation elements
- #1E293B — Subtle Border: 1px hairline boundary for cards, secondary buttons, and vertical metric dividers
- #FFFFFF — Text Primary: main headline text, active navigation links, and primary CTA labels
- #94A3B8 — Text Muted: subheadings, descriptive paragraph text, JSON property keys, and inactive navigation links
- linear-gradient(90deg, #4F86F7 0%, #C084FC 100%) — Accent Gradient: used exclusively on the ServiceNow target keyword in the primary display headline
- #4378FF — Electric Blue: fill for the primary CTA button and active endpoint method pill
- #10B981 — Success Green: live production heartbeat indicator dot and 200 OK HTTP response badge
TYPOGRAPHY
Typeface Inter (or Geist, SF Pro Display, Plus Jakarta Sans), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 18px body-lg, 24px subheading, 56px display. Tracking -0.03em at display, -0.01em at body. The typographic tone is ultra-precise, technical, and declarative. A clean grotesque sans-serif provides clarity and corporate authority, while the monospace layer injects authentic engineering credibility without feeling utilitarian or dated.
GEOMETRY & SPACING
Corner radii — cards 16px, links 999px, inputs 8px, buttons 8px. Spacing on a 8px unit, 16px gaps, 80px between sections, 1200px container, comfortable density.
DEPTH
Depth is created via deep dark contrast, delicate 1px borders (#1E293B), and a subtle atmospheric radial glow positioned directly behind the API console card. Traditional drop shadows are omitted entirely in favor of luminous backlights that bleed through the particle field.
IMAGERY
The imagery language consists of a generative, undulating blue and indigo particle landscape evoking fiber-optic arrays or a global compute grid. Photography is entirely absent; all visual richness comes from synthetic glowing nodes, vectors, and the code terminal itself.
SIGNATURE DETAIL — the thing that makes this design itself
The singular signature is the crisp, dark-mode API terminal floating directly above a luminescent blue particle grid, paired with a competitor-disrupting gradient keyword in the title. Misusing it means making the particle field an overwhelming animated background instead of a subtle atmospheric stage beneath the product card.
MUST
- Keep typography predominantly monochrome to allow the blue-violet gradient headline to pop.
- Enclose code payloads in genuine monospace type with distinct muted keys and colored values.
- Use hairline 1px borders in #1E293B to define spatial boundaries without heavy drop shadows.
- Maintain strict symmetry in the top-of-funnel hero column above the asymmetric code mockup.
AVOID
- Do not apply multi-color gradients to standard body or navigational copy.
- Do not use high-opacity white cards or light-mode modals that shatter the dark void immersion.
- Avoid thick rounded button radii greater than 10px on non-pill actions.
- Do not omit line numbers or HTTP status codes in developer-facing console mockups.
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 中尝试 
