Design a light-mode website section: crisp computational finance floating effortlessly over calm, photorealistic rolling pastureland.
LAYOUT
The screen uses a two-column desktop arrangement anchored within a 1240px container. Left column contains brand framing, category pill, 56px display heading, subtext, and dual CTA buttons. Right column hosts a composite mockup stack: a prompt container above a 3-column metric grid and reasoning strip. A wide glassmorphism dock sits horizontally across the lower screen.
PALETTE (use these exact hex values)
- #FFFFFF — Optic White: structural container background for interactive AI console and metric cards
- #1F69FF — Electric Cobalt: brand keyword accent, primary CTA fill, active input outline, and data visualization highlights
- #0F172A — Deep Obsidian: high-contrast display headline, navigation links, key metric numbers, and demo CTA background
- #64748B — Slate Heather: body copy, card labels, metadata text, and secondary icon glyphs
- #E2E8F0 — Subtle Mist: divider lines, unselected pill borders, and outer container structural definition
- #EEF2FF — Periwinkle Tint: background for the category badge and metric icon circular backdrops
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, DM Sans, SF Pro Display), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px subheading, 24px heading, 56px display. Tracking -0.03em on display titles, -0.01em on body. The voice is confident, mathematical, and restrained, carried entirely by a modern geometric sans-serif (Plus Jakarta Sans). The tight letter-spacing on display headlines prevents the design from feeling tech-generic, infusing it with modern editorial fintech authority.
GEOMETRY & SPACING
Corner radii — cards 20px, links 999px, inputs 12px, buttons 10px. Spacing on a 8px unit, 20px gaps, 80px between sections, 1240px container, comfortable density.
DEPTH
Depth is created strictly through atmospheric layering rather than stacked shadows. The photorealistic earth-and-sky backplane provides organic depth, while card surfaces sit on top like precise frosted acrylic and enamel tiles with ultra-soft ambient occlusion (0 12px 32px rgba(15, 23, 42, 0.05)).
IMAGERY
A photorealistic, serene landscape of rolling grassy dunes and knolls under a wide, overcast, glowing sky. Imagery must evoke expansive calm, stability, and scale; 3D renders of abstract coins, floating spheres, or generic corporate handshakes would completely break the aesthetic.
SIGNATURE DETAIL — the thing that makes this design itself
The jarring yet harmonic juxtaposition of an organic, photorealistic grassy knoll background underneath hyper-clean, surgical white enterprise actuarial widgets. Misuse usually occurs when designers either remove the natural landscape (making it look like a standard SaaS dashboard) or over-saturate the grass, ruining the serene daylight palette.
MUST
- Reserve electric cobalt (#1F69FF) exclusively for key brand moments and active interactive surfaces.
- Ensure all primary UI panels have pure white backgrounds to stand distinctly apart from the landscape imagery.
- Keep typography tight with negative tracking (-0.03em) on display headlines for an authoritative editorial tone.
- Use backdrop-filter: blur() only on the bottom dock banner to ground the page over the photographic terrain.
AVOID
- Do not tint the main AI cards with colors or heavy gradients; keep them surgical white.
- Do not allow the background landscape to obscure headline contrast; use atmospheric white sky behind text.
- Do not use harsh black drop shadows; keep elevation ambient with opacity below 8%.
- Do not use sharp 0px or small 4px corners on modular cards.
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. Try in DraPub 
