Design a light-mode website section: enterprise fintech precision suspended over a sunlit pastoral meadow with glowing porcelain cards.
LAYOUT
Asymmetric two-column composition framed inside a 1240px container. The left column hosts title messaging, value checklist, and dual CTA stack with subtext guarantees. The right column showcases a multi-tier flow diagram with upstream third-party sources, mid-tier code execution nodes flanking a core identity icon, and four bottom feature cards. A single centered trust badge pins the boundary between UI and nature.
PALETTE (use these exact hex values)
- #ffffff — Canvas White: Primary surface background across top and mid visual sections
- #f8fafc — Slate Cloud: Subtle container fill and pill badge backgrounds
- #0f172a — Terminal Navy: Background for raw JSON and HTTP route status blocks
- #175cd3 — Primary Blue: Primary CTA fill, standout title emphasis, and main engine icon
- #0a0d12 — Ink Primary: High-contrast headings and active card titles
- #475467 — Muted Slate: Body copy, subheaders, and descriptive bullet metadata
- #12b76a — Mint Emerald: Checkmark indicators and HTTP 200 OK status indicators
- #e4e7ec — Hairline Border: Subtle card outlines, button strokes, and dotted connection traces
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, SF Pro Display, General Sans), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px body-lg, 20px subheading, 56px display. Tracking -0.03em at display, -0.01em at body. The typographical voice is authoritative yet clean and frictionless. Plus Jakarta Sans provides crisp geometric apertures and robust terminals that look precise in large title weights (-0.035em display tracking). Paired with JetBrains Mono, the system establishes clear financial and engineering credibility.
GEOMETRY & SPACING
Corner radii — cards 12px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1240px container, comfortable density.
DEPTH
Depth is created via soft multi-layered atmospheric drop shadows (y: 8px, blur: 24px, color: rgba(16, 24, 40, 0.06)) beneath white cards, lifting them off the pure canvas. Dark terminal cards feature slightly heavier shadows to simulate floating physical displays. The central engine icon utilizes a faint radial blue glow to emphasize authority.
IMAGERY
A photorealistic, bright pastoral scene filled with rolling green grass and subtle wild daisies grounds the lower edge of the layout. The photo feels crisp, morning-lit, and tranquil, intentionally counterbalancing complex financial code architecture. Abstract 3D shapes or harsh studio illustrations would contradict this organic groundedness.
SIGNATURE DETAIL — the thing that makes this design itself
The juxtaposition of an ultra-clean, diagrammatic developer architecture floating directly above a serene, sunlit meadow landscape. To reproduce it faithfully, keep the technical interface components completely clinical and pristine, allowing only the natural horizon line below to introduce organic warmth. Misusing it involves letting photo textures bleed behind the white cards, which destroys readability.
MUST
- Anchor photographic scenery strictly to the bottom third of the viewport.
- Keep typography high in visual hierarchy using heavy weights and tight negative tracking.
- Render connector lines with exact 1px dashed or dotted strokes in #cbd5e1.
- Use pastel tinted backgrounds (10% opacity) behind colored feature card glyphs.
AVOID
- Never tint the entire screen background with heavy color; preserve crisp white dominance.
- Do not overlap dark terminal cards with the grassy landscape photo directly.
- Avoid solid heavy borders; keep strokes strictly at 1px using #e4e7ec or #eaecf0.
- Do not remove the dotted routing lines between architecture nodes.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1792:1024. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
