Design a light-mode website section: clinical enterprise reliability nested inside warm, sunlit landscape photography with editorial serif typography.
LAYOUT
The page follows an asymmetric top-heavy hero structure. The left column holds the pill badge, display title, copy, and CTAs, while the right landscape recedes into rolling hills. Below, an expansive full-width 4-step pipeline card anchors the visual balance, intersected at the base by a centered floating proof badge.
PALETTE (use these exact hex values)
- #fbfaf6 — Canvas Bone: Global page background tone blending gently into the natural landscape photograph above the fold
- #ffffff — Pure White: Background for workflow execution cards, pill badges, and secondary action button containers
- #0c3b33 — Pine Shadow: Primary brand fill for CTAs, display typography accents, sequence step badges, and metric pills
- #1b2a26 — Forest Ink: High-contrast text color for primary headings, step titles, and lead navigation labels
- #5e6d67 — Muted Sage: Secondary copy, paragraph explanations, metadata tags, and step subtitle text
- #dbe3de — Border Meadow: Outline strokes for secondary buttons, workflow step sub-panels, and launching pill frames
- #27ae60 — Vibrant Mint: Active status indicators, completion checkmark badges, and live pulse dots
- #edf4f0 — Tinted Sage Fill: Background container fill for workflow step icon enclosures and checkmark circles
TYPOGRAPHY
Typeface Newsreader (or Fraunces, Source Serif Pro, Georgia), weights 400/500. Sizes 11px caption, 13px body-sm, 15px body, 16px body-lg, 18px subheading, 40px heading, 56px display. Tracking -0.02em. The typography evokes the quiet authority of a medical or scientific journal crossed with modern Silicon Valley engineering. The headline's italic flourish ('you heal') brings human warmth to technical autonomy. Newsreader or Georgia can easily substitute the serif, while Inter maintains pristine legibility in the execution diagrams.
GEOMETRY & SPACING
Corner radii — cards 20px, links 4px, inputs 8px, buttons 8px. Spacing on a 8px unit, 24px gaps, 80px between sections, 1200px container, comfortable density.
DEPTH
Depth is created organically through layering rather than aggressive drop shadows. The primary pipeline card floats cleanly over the soft photographic terrain using a very broad, faint ambient shadow (rgba(12, 59, 51, 0.06) with 30px blur). The dark floating metric pill sits one level above, using an anchor overlap to establish physical foreground presence.
IMAGERY
Photography consists of real-world, cinematic landscape visuals: lush green sunlit ridgelines, soft afternoon light, and wildflower meadows with gentle motion blur. Avoid tech clichés like server rooms, wireframe globes, or synthetic floating UI holograms.
SIGNATURE DETAIL — the thing that makes this design itself
The distinctive blend of expansive, sunny pastoral landscape photography directly underpinning an ultra-clean white automated workflow diagram, highlighted by italic serif accents and a deep pine metric anchor pill.
MUST
- Use warm, sun-drenched outdoor landscape imagery with organic green hills and natural blooms.
- Pair an elegant editorial serif display face with a clean, low-contrast sans-serif for UI clarity.
- Accent key emotive words in headlines with fluid italicized serifs to soften clinical topics.
- Ground large photographic backdrops with structured, white-backed pipeline diagram cards.
AVOID
- Do not use dark tech cyberpunk gradients, neon purple accents, or grid meshes.
- Never replace natural photography with abstract 3D clay renders or flat vector illustrations.
- Avoid harsh high-contrast black shadows; let the white card float gently above the landscape.
- Do not set UI interaction controls or body copy in serif typefaces.
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 中尝试 
