Design a light-mode website section: sun-drenched pastoral serenity grounding developer-grade artificial intelligence and primary care.
LAYOUT
The page follows a classic centered hero rhythm anchored by an overflowing product preview. A lean 64px navigation bar introduces the brand, followed by a vertically stacked 480px text block: pill badge, 2-line title, 2-line subcopy, trust metrics, and dual CTAs. The layout culminates in an oversized 1040px wide developer console that straddles the rolling hills, grounding the composition.
PALETTE (use these exact hex values)
- #F9F7F1 — Canvas Ivory: Warm atmospheric sky background creating organic warmth behind the hero copy
- #0B332D — Deep Pine: Primary brand anchor used for primary action buttons, dark hero console, and italic display accents
- #081E1A — Console Slate: Deepest green-black background for the API console and lower docked navigation ribbon
- #34D399 — Clinical Mint: System status lights, active code endpoints, and verification checkmark glyphs
- #192421 — Charcoal Text: Display title and high-emphasis textual elements on light surfaces
- #52625D — Muted Sage: Body copy, navigation links, and credentialing subtext
- #E3DFD5 — Warm Border: Subtle borders on pill badges, secondary buttons, and divider lines
- #F59E0B — Rating Amber: Star rating icon indicating social proof score
TYPOGRAPHY
Typeface Instrument Serif (or Fraunces, Playfair Display, EB Garamond), weights 400. Sizes 11px caption, 13px body-sm, 15px body, 18px body-lg, 24px subheading, 64px display. Tracking -0.02em. The voice is intellectual, calm, and trustworthy. Instrument Serif brings historical credibility reminiscent of medical journals and literary publications, while Inter ensures modern operational clarity. Fraunces or Playfair Display can substitute the serif as long as the italic variant exhibits graceful calligraphic penmanship.
GEOMETRY & SPACING
Corner radii — cards 16px, links 4px, inputs 8px, buttons 10px. Spacing on a 8px unit, 20px gaps, 80px between sections, 1200px container, comfortable density.
DEPTH
Depth is created organically by layering surfaces rather than using dramatic drop shadows. The pastoral image acts as a natural backdrop, while the dark console floats slightly over the horizon line using a soft, wide-spread 32px blur shadow with low opacity (rgba(0, 20, 15, 0.18)) and a crisp 1px perimeter border (rgba(255, 255, 255, 0.08)).
IMAGERY
A wide-angle, sunlit cinematic photograph of gentle rolling green hills blanketed in subtle wildflowers under a hazy, warm morning sky. The photo is treated to blend seamlessly into the ivory background at the top, avoiding hard image cutoffs. Urban architectural, clinical hospital, or abstract tech renders would destroy the natural wellness feeling.
SIGNATURE DETAIL — the thing that makes this design itself
The juxtaposition of an editorial italicized headline and a dark API console resting atop rolling wildflower hills. The entire identity relies on anchoring high-throughput medical technology within serene, agrarian pastoral beauty; removing the hills or the code card instantly reduces it to a standard SaaS template.
MUST
- Ground digital coldness by pairing technical consoles with warm organic ivory canvases and landscape imagery.
- Use Instrument Serif italics selectively on exactly two to three consecutive words to add elegance.
- Keep CTA buttons softly rounded at 10px rather than fully circular pills to maintain developer credibility.
- Maintain high contrast on the dark console using #34D399 for positive indicators and status highlights.
AVOID
- Never replace the pastoral landscape with abstract gradients, 3D clay objects, or neon cyber shapes.
- Do not use full 999px pills on primary conversion buttons; reserve pill styling for metadata badges.
- Avoid harsh pure black (#000000); always tint dark tones with pine and forest undertones (#0B2521).
- Do not italicize the entire headline; only italicize the terminal semantic phrase.
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 中尝试 
