Design a dark-mode website section: deep-space developer infrastructure lit by bioluminescent particle clouds and razor-sharp cyan interfaces.
LAYOUT
Structured around an asymmetrical two-column desktop hero grid. The left column hosts product authority: badge, bold headline, descriptive lead copy, CTA button group, and three horizontal feature bullets. The right column is dominated by the organic particle visualization topped by the interactive floating query terminal.
PALETTE (use these exact hex values)
- #020409 — Void Black: Deepest canvas background behind typography and graphics
- #060d1a — Console Navy: Interactive query console fill creating subtle separation from the void
- linear-gradient(90deg, #1d4ed8 0%, #38bdf8 100%) — Electric Gradient: High-intent CTAs and keyword text highlights in headlines
- #38bdf8 — Neon Cyan: Search glow borders, active focus indicators, and key icons
- #10b981 — Emerald Mint: Security badge checkmarks and trust section markers
- #ffffff — Pure White: Primary headline text, card titles, and high-emphasis labels
- #94a3b8 — Slate Steel: Body paragraphs, filter tags, and inactive navigation links
- #0e2a4a — Card Border Glow: Subtle stroke along card perimeters and horizontal rule dividers
TYPOGRAPHY
Typeface Inter Display (or Geist Sans, Plus Jakarta Sans, SF Pro Display), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 18px body-lg, 20px subheading, 56px display. Tracking -0.03em at display, -0.01em at body. The typography is clinical, modern, and relentlessly precise. Using a neo-grotesque sans-serif with tight negative tracking at scale conveys enterprise-grade reliability and low latency. Geist Sans or Inter Display are ideal fits, providing clean geometric figures that look natural alongside terminal prompts.
GEOMETRY & SPACING
Corner radii — cards 20px, links 999px, inputs 8px, buttons 10px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1280px container, comfortable density.
DEPTH
Depth is created strictly through optical luminescence rather than drop shadows. A bioluminescent particle cloud casts a vibrant cyan back-glow, while the foreground console card uses an electric perimeter stroke to appear floating over the data field. Ambient light from the gradient CTAs reinforces a glowing, illuminated-in-the-dark atmosphere.
IMAGERY
Features a dense, three-dimensional point-cloud or particle mesh resembling a digitized brain or fluid neural wave. Particles range in luminosity from dim deep blue to bright cyan-white, signifying data density and memory retrieval. Real photography or flat vector illustrations would completely break the technical immersion.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the cyan-haloed interactive query console floating directly atop a bioluminescent 3D point-cloud wave. To execute correctly, the card border must mirror the electric blue hue of the underlying cloud, bridging the gap between abstract AI power and practical developer tooling. A common mistake is rendering the particle mesh as a separate background image with no light interaction on the UI card.
MUST
- Anchor the query card directly over the particle mesh so the cyan glow feels illuminated by the graphic.
- Limit the vibrant blue-to-cyan gradient exclusively to primary CTAs and the headline highlight.
- Keep navigation links understated in muted slate (#94a3b8) with generous 28px horizontal gaps.
- Use 20px corner radii on major containers to balance high-tech precision with modern approachable softness.
AVOID
- Never introduce warm colors like orange, red, or yellow into the primary interface palette.
- Do not make the query card fully opaque; it must visually interlock with the neural cloud beneath it.
- Avoid thick, harsh white borders; use low-opacity cyan or navy borders under 1.5px.
- Never use serif or expressive display typefaces that contradict the technical infrastructure aesthetic.
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 中尝试 
