Design a light-mode website section: warm peach-violet atmospheric blur grounding a precise dark terminal and developer-focused hero typography.
LAYOUT
The header spans the top in a three-zone flex row (logo left, links center, button right). Below, the hero splits into an asymmetric 50/50 two-column grid: left column carries the pill badge, display heading, paragraph, button group, and 4-column feature list; right column holds the large terminal window. The bottom of the viewport centers an anchored horizontal metrics card spanning ~70% width.
PALETTE (use these exact hex values)
- #FAF8F5 — Canvas Warm Base: Light parchment-like background layer across the entire viewport
- #191E2C — Terminal Slate: Deep slate background for the interactive code and live telemetry console
- #111827 — Text Primary: Main heading text, logo, and high-emphasis labels
- #4B5563 — Text Secondary: Hero paragraph descriptions, navigation links, and sub-labels
- #5F57FF — Brand Violet: Primary CTA button background, headline accent text, and glow accents
- #FFB2A5 — Gradient Aura Coral: Soft atmospheric radial and linear streaks in the backdrop
- #10B981 — Terminal Active Green: Live indicator pulse dot and real-time status cues
- #E5E7EB — Hairline Border: Outlines on pill tags, secondary buttons, stat cards, and dividing rules
TYPOGRAPHY
Typeface Inter (or Plus Jakarta Sans, Geist, SF Pro Display), weights 400/500/600/700. Sizes 11px caption, 12px body-sm, 14px body, 16px body-lg, 18px subheading, 24px heading, 56px display. Tracking -0.03em at display, -0.01em at body. The typography is clean, ultra-modern, and engineering-centric. Inter provides neutral precision with tight display tracking, while the violet accent line injects optimism and energy. Monospace font JetBrains Mono provides uncompromised technical legitimacy in the terminal block.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 10px. Spacing on a 8px unit, 24px gaps, 80px between sections, 1240px container, comfortable density.
DEPTH
Depth is created through luminosity contrast rather than layered shadows. The dark terminal (#191E2C) naturally advances against the illuminated, warm parchment backdrop (#FAF8F5). The KPI ribbon uses translucent white (rgba(255, 255, 255, 0.75)) and 12px backdrop-filter blur with a delicate 1px hairline border.
IMAGERY
No photographic imagery is present; visual texture is generated entirely through soft atmospheric gradient light curtains (peach and lilac vertical streaks) and precise technical diagramming. The system architecture inside the terminal uses glowing neon line-art icons linked by clean directional arrows. Avoid editorial photos, 3D hand illustrations, or generic corporate stock.
SIGNATURE DETAIL — the thing that makes this design itself
The juxtaposition of an airy, warm peach/lilac vertical atmospheric glow on the left canvas with an unapologetically dark slate developer terminal on the right. This dual-temperature aesthetic signals both consumer-grade design elegance and raw backend infrastructure power.
MUST
- Use a two-color split for the primary hero title: dark charcoal for the first line, violet-blue for the second.
- Place the dark terminal card against the warm ambient peach background for maximal focal contrast.
- Use subtle hairline borders (#E5E7EB on light, #2E3547 on dark) rather than heavy drop shadows.
- Keep technical telemetry and code snippets strictly inside JetBrains Mono or monospace equivalents.
AVOID
- Do not use harsh, opaque dark dropshadows under the terminal window or stat card.
- Do not saturate the full canvas with bright neon colors; limit vibrancy to the second title line and the glow.
- Do not make the floating KPI card fully opaque white; maintain backdrop blur transparency.
- Do not use rounded bubble buttons; keep radius disciplined between 8px and 10px.
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 中尝试 
