Design a light-mode website section: clinical nutrition intelligence cloaked in the quiet confidence of literary warmth and dawn alpine light.
LAYOUT
The layout is horizontally centered with an airy vertical tempo. It begins with a transparent utility header containing centered navigation links and a periwinkle CTA. The hero text block clusters tightly in the center: overline sparkle badge, 64px serif headline, two-sentence descriptive copy, two trust badges, and dual action buttons. The bottom half is anchored by an overlapping phone frame and card widget flanked symmetrically by two scientific metric callouts.
PALETTE (use these exact hex values)
- #FAF6F0 — Warm Parchment: dominant light background canvas fading into imagery towards lower viewport
- #FFFFFF — Pure Card Surface: floating app interfaces, UI panels, and secondary buttons
- #1A2333 — Deep Midnight Slate: display headings, brand lockup, and high-emphasis interface values
- #5A657A — Muted Alpine Slate: body copy, navigation links, secondary metadata, and inactive labels
- #7B74E7 — Periwinkle Violet: primary pill buttons, sparkle iconography, active donut chart segments
- #EE8B70 — Sunlit Peach: secondary metric tracks, ambient glow waveforms, and carb indicators
- #62A8D9 — Glacial Mist: fiber metric nodes, right-side ambient waveform, and status indicators
- #E8E2D6 — Subtle Border Khaki: delicate hairline dividers and secondary pill button outlines
TYPOGRAPHY
Typeface Newsreader (or EB Garamond, Fraunces, Canela), weights 400/500. Sizes 11px caption, 13px body-sm, 15px body, 17px body-lg, 20px subheading, 36px heading, 64px display. Tracking -0.02em. The type voice communicates intellectual trustworthiness and calm mastery. The headline utilizes a classical editorial serif (reminiscent of Newsreader or Canela) with razor-sharp terminals and delicate contrast, evoking scientific journals and prestige lifestyle periodicals. The UI counterbalances this with neutral, tabular-ready sans-serif, ensuring biometric numbers and diet trackers feel strictly clinical and effortless.
GEOMETRY & SPACING
Corner radii — cards 24px, links 4px, inputs 10px, buttons 10px. Spacing on a 8px unit, 20px gaps, 80px between sections, 1200px container, comfortable density.
DEPTH
Elevation is achieved through luminous softness rather than standard directional drop shadows. The floating 'AI Coach' card uses an omnidirectional periwinkle glow combined with a faint blur (box-shadow: 0 8px 32px rgba(123, 116, 231, 0.18)), making the element appear backlit by intelligent software. The mobile phone mockup provides physical grounding with a crisp 1px perimeter edge against the blurred landscape behind it.
IMAGERY
Photography consists of an expansive, low-contrast alpine mountain ridge during golden dawn, layered with evergreen tree silhouettes and rising valley mist. The image seamlessly dissolves into the #FAF6F0 canvas via an alpha gradient across its upper boundary. Harsh urban photography, oversaturated stock wellness figures, or vector cartoon illustrations would instantly destroy the calm editorial integrity.
SIGNATURE DETAIL — the thing that makes this design itself
The harmonious seam where an ivory literary hero canvas dissolves downward into misty pine-covered alpine peaks, interrupted cleanly by an illuminated floating smartphone and coach widget. To execute it properly, the landscape image must have its top 30% feathered with a linear CSS gradient mask directly matching the #FAF6F0 surface color.
MUST
- Retain ample breathing room above the headline using at least 48px top spacing below header.
- Pair the high-contrast serif strictly with clean, neutral sans-serif for numbers and captions.
- Use subtle purple light halos (#7B74E7 at 18-25% opacity) only around floating foreground cards.
- Keep background imagery grounded at the bottom 45% of the viewport with a soft vertical gradient fade.
AVOID
- Do not use harsh pure black text (#000000); always opt for deep slate navy (#1A2333).
- Never replace the editorial serif headline with a modern heavy geometric sans.
- Avoid solid drop shadows; keep elevation gentle, blurred, and slightly chromatic.
- Do not tint the top cream canvas with harsh artificial greens, cool blues, or pure whites.
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 中尝试 
