Design a dark-mode website section: deep midnight canvas anchored by brilliant azure luminescence and crisp developer-grade terminal interfaces.
LAYOUT
Centered single-column marketing flow built atop a strict symmetrical axis. From top to bottom: sticky header, status chip, massive centered two-line display headline, concise body summary, dual CTA cluster, metric proofs, and a wide terminal interface showcase sitting half-peeked above the fold.
PALETTE (use these exact hex values)
- #030712 — Deep Obsidian: Root background canvas providing maximum contrast for glowing blue atmospheric lighting.
- #060D1A — Console Surface: Dark semi-translucent fill for the interactive mock terminal interface and cards.
- #1E40AF — Cobalt Glow: Bilateral atmospheric volumetric lighting and ambient outer card glow.
- #2563EB — Electric Blue: Primary interactive buttons, glowing keylines, and action triggers.
- #10B981 — Neon Mint: Status indicators, active pill borders, and API terminal confirmation output.
- #FFFFFF — Crisp White: Primary display titles, navbar brand, and high-emphasis button text.
- #94A3B8 — Slate Muted: Subheadlines, navigation links, and terminal labels.
- #38BDF8 — Border Glow Rim: Delicate 1px outer stroke defining interactive window contours and tabs.
TYPOGRAPHY
Typeface Inter (or Geist, SF Pro Display, Plus Jakarta Sans), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px subheading, 32px heading, 56px display. Tracking -0.03em at display, -0.01em at body. Technical, authoritative, and frictionless. The crisp geometric neo-grotesque sans evokes developer platform precision, balanced by tabular monospace numerals that reinforce an API-first infrastructure ethos.
GEOMETRY & SPACING
Corner radii — cards 16px, links 999px, inputs 8px, buttons 10px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1200px container, comfortable density.
DEPTH
Depth is created purely through luminous layering rather than conventional drop shadows. Dark navy cards (#070E1E) float over the obsidian baseline accompanied by soft blue radial blooms and faint cyan 1px bounding strokes that convey an illuminated glass feel.
IMAGERY
No photographic imagery is present. The visual interest is generated through programmatic abstract vector light waves on the lateral margins, paired with ultra-crisp interactive UI mockups demonstrating developer agent flows.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the bilateral electric blue wave bloom framing an ultra-clean floating terminal console. It transforms an abstract infrastructure concept into a tangible, high-tech agentic console via cyan perimeter backlighting.
MUST
- Keep ambient light focused on horizontal flanks to avoid washing out the center headline.
- Use JetBrains Mono exclusively for parameter blocks, timestamps, IDs, and code outputs.
- Emphasize the primary CTA button using rich saturated royal blue (#2563EB).
- Wrap interactive showcase containers in a soft translucent border with light bloom.
AVOID
- Never use flat gray drop shadows; use colored glowing blurs with low opacity instead.
- Do not place warm colors (red, orange, yellow) into primary marketing or glow elements.
- Avoid solid opaque light backgrounds for card components.
- Do not center-align terminal text; code blocks must stay strictly left-aligned.
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 中尝试 
