Design a dark-mode website section: deep celestial midnight canvas grounding high-precision developer infrastructure alongside trustworthy home-service metrics.
LAYOUT
The hero employs an asymmetric two-column split within a 1280px container: left 45% houses category chip, massive 3-line display headline, supporting paragraph, CTA button cluster, and inline trust indicators. The right 55% presents the interactive API terminal window stacked directly atop a four-step pipeline execution rail. Below the fold, a horizontal five-part KPI and quote ticker bridges the dark midnight section into a bright white canvas.
PALETTE (use these exact hex values)
- #070e1b — Midnight Space: Deepest canvas background providing contrast for glowing nebula atmospheric effects
- #0b1528 — Terminal Void: Background fill for code terminal card and glassmorphic telemetry panels
- #2563eb — Electric Cobalt: Primary conversion button fills, active tab pills, and directional link accents
- #38bdf8 — Cyan Flare: Decorative hairline borders, method indicators, and logo star glyphs
- #22c55e — Verified Mint: Checkmark icons, pipeline completion indicators, and live execution badges
- #ffffff — Starlight White: High-emphasis hero headers, active tab labels, and primary numeric statistics
- #94a3b8 — Slate Nebula: Body copy, inactive tab navigation links, and descriptive sub-labels
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, Geist Sans, SF Pro Display), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 16px body, 18px subheading, 28px heading, 56px display. Tracking -0.02em display, 0.05em micro-caps. The typographic tone is authoritative, technical, yet direct. The use of a dense neo-grotesque sans-serif gives commercial weight to home service automation, while clean monospace figures provide developer credibility. For open-source implementations, Inter or Plus Jakarta Sans for UI pairs effortlessly with JetBrains Mono for code blocks.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1280px container, comfortable density.
DEPTH
Depth is created through photographic atmospheric lighting rather than box shadows. The galactic spiral serves as a natural backlight beneath translucent cards (rgba(11,21,40,0.75)) that possess faint 1px white strokes (rgba(255,255,255,0.12)). Drop shadows are nearly absent, replaced by ambient glow diffusion around highlighted cards.
IMAGERY
A photorealistic astrophotography backdrop displaying a swirling spiral galaxy arching across a dark mountain silhouette. The imagery feels vast, technically calculated, and serene rather than chaotic or sci-fi illustrative. Cartoon icons, 3D geometric shapes, or abstract 90s floating blobs would completely break the enterprise-grade tone.
SIGNATURE DETAIL — the thing that makes this design itself
The integrated terminal-to-pipeline card: a dark glassmorphic window pairing active JSON payload preview with a connected chronological timeline of four execution chips underneath (Lead captured -> Intent identified -> Agent responded -> Job booked). This move transforms complex backend AI logic into an immediate, visual, 18-second customer outcome.
MUST
- Keep the galactic sky illumination centered behind the right-hand terminal card to guide user eyes to product capabilities.
- Use JetBrains Mono exclusively for code snippets, JSON payloads, HTTP verbs, and latency metrics.
- Ensure secondary buttons retain transparent fills with 1px translucent white borders to avoid competing with cobalt CTAs.
- Enforce strict 16px to 20px outer corner radii on multi-element preview panels.
AVOID
- Do not saturate text elements with heavy neon gradients; reserve pure white and slate-400 for crisp readability.
- Never drop opaque dark cards onto the cosmic background; always utilize 10-15% translucent stroke borders.
- Do not use sharp 0px or pill 999px radii on functional interactive cards; reserve pills solely for tags and primary buttons.
- Avoid warm colors like orange or red in the hero area unless signifying fatal error states.
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 中尝试 
