Design a light-mode website section: crisp developer ergonomics resting weightlessly over an expansive, sun-bleached pastoral landscape.
LAYOUT
The header sits at the very top on a transparent track. The hero splits cleanly into a balanced 50/50 two-column layout: left column contains the product hook (badge, multi-line display headline, explanatory paragraph, dual CTA button group); right column orchestrates the cloud node, dark code terminal, and trailing vertical stack of target device nodes. At the bottom baseline, a subtle curved cutout introduces the section divider label.
PALETTE (use these exact hex values)
- #F8FAFC — Canvas Sky Top: uppermost light atmospheric background fading smoothly toward the horizon
- #131B24 — Terminal Dark: deep navy-black ground for the code JSON response container
- #FFFFFF — Card Surface Light: white background for device target cards, badges, and secondary buttons
- #1B64F4 — Brand Blue: headline accentuation on sandbox phrase and primary CTA background fill
- #0F172A — Text Primary: main headline and navbar logo text with high contrast
- #475569 — Text Muted: subordinate body copy, nav links, and secondary button labels
- #10B981 — Success Mint: indicator dots, 201 Created status pill, and feature badge text
- #CBD5E1 — Wire Line Grey: node graph paths connecting cloud, terminal, and platform nodes
TYPOGRAPHY
Typeface Inter (or Geist, SF Pro Text, Helvetica Neue), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 16px body, 18px body-lg, 24px subheading, 56px display. Tracking -0.03em at display, -0.01em at body. The typographic tone is crisp, capable, and unpretentious. The neo-grotesque sans-serif provides authoritative neutrality that lets the product proposition stand out cleanly, while JetBrains Mono injects authentic developer credibility inside the interactive console. Geist or SF Pro serve as seamless drop-in replacements for digital screens.
GEOMETRY & SPACING
Corner radii — cards 16px, links 6px, inputs 12px, buttons 10px. Spacing on a 4px unit, 20px gaps, 80px between sections, 1200px container, airy density.
DEPTH
Depth is created through soft, wide-dispersion shadows rather than heavy borders. The dark terminal window floats above the horizon with a diffuse 0 20px 40px -12px rgba(15, 23, 42, 0.18) shadow, while device node cards use minimal 0 2px 8px rgba(0, 0, 0, 0.04) elevation.
IMAGERY
The visual anchor is a real-world, wide-angle pastoral landscape of rolling green hills speckled with wildflowers under an overcast, hazy blue-white sky. Avoid synthetic 3D shapes, abstract isometric cubes, or futuristic cyberpunk grids; the aesthetic depends entirely on the contrast of human nature and digital infrastructure.
SIGNATURE DETAIL — the thing that makes this design itself
The juxtaposition of an ultra-technical dark IDE sandbox node graph hovering weightlessly above a serene, misty green meadow horizon. The design loses its entire soul if the natural landscape is replaced with a generic tech gradient or abstract 3D mesh.
MUST
- Retain the peaceful, pale blue atmospheric sky gradient before fading into photographic hills.
- Pair the dark navy terminal (#131B24) with bright syntax coloring to keep developer focus immediate.
- Use pill badges (999px radius) exclusively for status announcements and micro-tags.
- Keep interactive connector lines thin (1.5px) in neutral slate gray with circular node terminals.
AVOID
- Do not introduce harsh dark mode canvases; the sky and pastoral floor must remain sunlit.
- Do not crowd the right-hand diagram against the headline; preserve at least 48px horizontal space.
- Do not round the primary terminal corners past 20px, which breaks its developer tooling vernacular.
- Never use serif typefaces anywhere in this interface system.
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 中尝试 
