Design a light-mode website section: frosted glass telemetry floating over a sunlit pastoral meadow, merging organic openness with developer-grade infrastructure.
LAYOUT
A two-column hero composition where the left column houses marketing narrative, CTAs, and trust metrics, while the right column stacks technical API cards in a structured grid. Directly beneath, an inset wide frosted shelf introduces core platform capabilities.
PALETTE (use these exact hex values)
- #0F172A — Pastoral Slate: Background base for developer telemetry, code cards, and terminal consoles with backdrop blur
- #FFFFFF — Ethereal Glass: Light translucent glass layer for top navigation, metric chips, and secondary buttons
- linear-gradient(135deg, #7C5CFC 0%, #FF7B60 100%) — Violet Coral Shift: Signature gradient on display headline phrases, primary CTA button, and 3D architectural rendering
- #1E293B — Deep Charcoal: High-contrast text for left-column display headings and primary marketing copy over sky
- #475569 — Muted Sky Slate: Secondary body copy, inactive nav links, and contextual annotations
- #34D399 — Status Mint: System status lights, 200 OK indicator pills, and operational telemetry badges
- #93C5FD — Code Cyan: JSON keys and syntax highlighting inside frosted code panels
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, SF Pro Display, DM Sans), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 17px body-lg, 20px subheading, 28px heading, 52px display. Tracking -0.03em for display, -0.01em for body. The typography balances human approachability with developer rigor by contrasting a clean geometric sans with an engineered monospace. Plus Jakarta Sans provides friendly geometric warmth in headlines, easily substituted with Inter or SF Pro Display.
GEOMETRY & SPACING
Corner radii — cards 16px, links 999px, inputs 10px, buttons 12px. Spacing on a 4px unit, 20px gaps, 96px between sections, 1280px container, comfortable density.
DEPTH
Depth is achieved through layered frosted translucency and backdrop blurring over the photographic landscape rather than heavy drop shadows. Dark glass panels sit slightly behind lighter foreground pills, while glowing isometric elements radiate an ambient interior light.
IMAGERY
The imagery language is a pristine, cinematic daylight photograph of green grassy meadows beneath an open sky, conveying freshness and scale. Avoid artificial tech mesh grids, harsh sci-fi cityscapes, or fully opaque software mockups.
SIGNATURE DETAIL — the thing that makes this design itself
The distinctive pairing of dark, frosted developer telemetry cards floating directly over a scenic, sun-drenched grassy countryside. Misusing this means either flattening the background to a sterile solid color or dropping the glass translucency.
MUST
- Always apply backdrop-filter blur (16px to 24px) beneath all floating interface panels.
- Enclose all glassmorphic containers in a crisp 1px translucent border (rgba(255, 255, 255, 0.22)).
- Keep marketing copy in deep charcoal (#1E293B) to guarantee readability over bright skies.
- Limit the vibrant violet-coral gradient strictly to key headline words and the primary CTA.
AVOID
- Do not use opaque solid backgrounds for content cards; glass transparency is fundamental.
- Never use dark text inside the telemetry or code cards; rely on white and muted cyan.
- Avoid heavy drop shadows with dark opacity; keep shadows diffused and ambient.
- Do not drop the 1px luminous border, as dark glass dissolves into the photographic background without it.
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 中尝试 
