Design a dark-mode website section: deep midnight instrumentation canvas illuminated by bioluminescent green accents and translucent code execution modules.
LAYOUT
Structured in a disciplined 12-column grid. The hero section is split into two primary columns: the left 5 columns hold product positioning, CTA cluster, micro-stats, and the 3D brand artifact; the right 7 columns feature the oversized live API console directly above a three-column integration and capability footer.
PALETTE (use these exact hex values)
- #060913 — Canvas Midnight: Root page background canvas providing maximum contrast for bioluminescent glows
- #0a1326 — Card Trench: Background fill for API terminal, stat blocks, and feature tiles
- #070e1c — Card Inset: Sunken background for code editor blocks and schema views
- #1d63ed — Electric Cobalt: Primary interactive button fill and execution state active indicators
- #34d399 — Biolab Mint: Headline emphasis, verification checks, live indicators, and success telemetry
- #38bdf8 — Cyan Glow: Icon strokes, active step icons, and code syntax parameter strings
- #1b2c4e — Panel Border: 1px stroke defining cards, code blocks, and inactive stepper lines
- #ffffff — Pure White: Display headlines, active badges, and prominent quantitative metrics
- #8ba0be — Muted Slate: Supporting paragraph body, navigation links, and code line numbers
TYPOGRAPHY
Typeface Inter (or Geist, Plus Jakarta Sans, SF Pro Display), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px subheading, 24px heading, 48px display. Tracking -0.03em at display, -0.01em at body. Authoritative, technical, and frictionless. The combination of Inter's clean industrial geometry with JetBrains Mono gives the interface the serious pedigree of enterprise infrastructure software combined with modern developer tooling appeal.
GEOMETRY & SPACING
Corner radii — cards 14px, links 9999px, inputs 8px, buttons 10px. Spacing on a 8px unit, 20px gaps, 80px between sections, 1240px container, comfortable density.
DEPTH
Depth is achieved through luminance layering and colored radial glow fields rather than standard drop shadows. Cards have 1px semi-translucent perimeter borders that catch simulated light from behind. Inset regions (such as code payloads) drop to a lower luminance level (#070e1c), creating tactile recess.
IMAGERY
Features physical scientific motifs rendered as hyper-clean, translucent 3D glass artifacts (such as the illuminated DNA double helix cube). Avoid stock photography of human scientists or cluttered real-world lab tables; maintain an abstract, futuristic, high-precision instrumentation aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The horizontal execution pipeline stepper nested immediately below the live syntax-highlighted code console, bridging the gap between natural language input and verifiable scientific hardware actions.
MUST
- Reserve the emerald gradient exclusively for the key value proposition in the main headline.
- Use 1px borders (#1b2c4e) with low opacity on all card containers to define geometry against black.
- Enforce monospace (JetBrains Mono) for code snippets, routes, payloads, and execution metrics.
- Keep card backgrounds tinted with deep blue (#0a1326) instead of neutral gray or pitch black.
AVOID
- Never use pure black (#000000) for surface cards; it destroys depth separation from the canvas.
- Do not use warm hues (red, orange, yellow) except for critical server-level error codes.
- Never make API card header text proportional or sans-serif; keep it strictly monospaced.
- Avoid fully opaque borders; always let container edges softly blend into surrounding ambient glow.
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 中尝试 
