Design a dark-mode website section: deep tech developer tooling bathed in the atmospheric dusk of autonomous rural rangelands.
LAYOUT
The header sits at the top with a brand wordmark on the left, centered navigation links in muted text, and a framed key action button on the right. Below, the hero splits into two balanced columns across a 1240px grid: the left handles the release badge, three-line display headline, explanatory paragraph, CTA pair, and feature metrics. The right column is dedicated entirely to the multi-segment live simulation console and architecture topology graph.
PALETTE (use these exact hex values)
- #080b11 — Canvas Void: Deepest background base layer across the viewport
- #0d131f — Terminal Surface: Background fill for the primary code and architecture console card
- #111a2c — Card Interior: Fill for nested node containers within the diagram view
- #3b82f6 — Electric Cyan Glow: Hero primary button background, active glow effects, and focused state accents
- #1e293b — Terminal Border: Delicate 1px borders dividing terminal headers, node cards, and outlines
- #34d399 — Telemetry Emerald: Status indicator dot and 202 Accepted status badge text
- #f8fafc — Primary Text: Display headlines, primary button text, and active node titles
- #94a3b8 — Secondary Muted Text: Body copy, sub-labels, architecture descriptions, and inactive nav items
TYPOGRAPHY
Typeface Inter Display (or Plus Jakarta Sans,Geist Sans,system-ui), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 14px body, 16px body-lg, 18px subheading, 56px display. Tracking -0.03em at display, -0.01em at body. The voice is confident, hyper-modern, and unapologetically technical. By pairing a punchy display sans with strict mechanical monospace code, the design projects absolute reliability and infrastructure-grade engineering. It trades whimsical tech tropes for serious industrial developer tooling aesthetics.
GEOMETRY & SPACING
Corner radii — cards 14px, links 6px, inputs 8px, buttons 10px. Spacing on a 4px unit, 24px gaps, 80px between sections, 1280px container, comfortable density.
DEPTH
Elevation is achieved through luminous radial back-glows and tonal border stratification rather than conventional heavy drop shadows. The main terminal card casts an ambient deep blue spread (0 20px 50px rgba(0,0,0,0.6)) complemented by delicate 1px interior boundary lines. Buttons emit localized colored light onto the dark canvas beneath them.
IMAGERY
Photography is strictly contextual and backgrounded: a moody, purple-tinged dusk mountain range layered under a radial black mask that covers 70% of the canvas. Visual diagrams avoid cartoon illustrations in favor of clean, single-weight line art and technical isometric vector glyphs. Realistic imagery must never intrude directly into the UI card surfaces.
SIGNATURE DETAIL — the thing that makes this design itself
The integrated terminal-to-topology panel that blends real JavaScript SDK code directly into a live node-based architecture flow with connected dashed vectors. It grounds speculative deep tech (autonomous robotics) into familiar, tangible developer abstractions.
MUST
- Keep background tones deep slate-black (#080b11) to let luminous blue and emerald accents pop cleanly.
- Use tight negative letter-spacing (-0.03em) on large bold display headers for an authoritative technical posture.
- Encase code samples and architecture diagrams within a single unified console card rather than floating them separately.
- Use 1px borders with 15-20% opacity white or subtle slate (#1e293b) to define component edges crisply.
AVOID
- Never use raw high-saturation green or red; stick to telemetry emerald (#34d399) and electric cyan (#3b82f6).
- Avoid thick borders or heavy solid drop shadows; keep borders strictly at 1px and shadows atmospheric.
- Do not allow the background nature image to overpower the central developer terminal or text contrast.
- Never mix serif fonts into technical panels or headings; stay firmly neo-grotesque and monospace.
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 中尝试 
