Design a light-mode web interface screen: breathable modern wellness framed in deep mineral teal, rounded geometry, and calm slate typography.
LAYOUT
The page flows along a strict 1200px grid system with centered alignment and generous vertical padding (96px). The hero employs an asymmetrical 50/50 split between left-aligned typography/actions and a tall rounded image container. Beneath, a balanced 3-column grid organizes key features, culminating in a wide monolithic dark showcase container housing dual mobile screenshots and store links.
PALETTE (use these exact hex values)
- #ffffff — Canvas White: Dominant background canvas across the page and primary card surfaces
- #17656e — Deep Mineral Teal: Primary interactive buttons, key progress indicators, and prominent branding anchors
- #eaf4f4 — Soft Sage Wash: Background tint for live class badges and primary category icon containers
- #111827 — Midnight Slate: High-contrast headings, main display typography, and metric counters
- #64748b — Slate Neutral: Secondary descriptive body copy, nav links, and subtle metadata labels
- #f3e8ff — Lavender Mist: Background surface for the live session calendar feature icon
- #ffedd5 — Warm Peach Wash: Background surface for the community practice feature icon
- #e2e8f0 — Card Border Tint: Subtle 1px perimeter outlines defining feature cards and status pills
- linear-gradient(135deg, #0a1128 0%, #1e1b4b 55%, #312e81 100%) — App Showcase Gradient: Immersive dark midnight gradient grounding the mobile download section
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Inter, Outfit, DM Sans), weights 400/500/600/700. Sizes 12px caption, 14px body-sm, 16px body, 18px subheading, 20px heading, 36px heading-lg, 52px display. Tracking -0.02em at display, 0 at body. The typographic tone is reassuring, capable, and modern, anchored by Plus Jakarta Sans. Its circular counters and clean geometry feel friendly without losing professional credibility. Line heights are intentionally relaxed at display sizes to prevent visual tension. If substituting, choose Inter for clinical precision or DM Sans to retain geometric warmth.
GEOMETRY & SPACING
Corner radii — cards 24px, links 4px, inputs 8px, buttons 10px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1200px container, airy density.
DEPTH
Depth is achieved predominantly through boundary delineation rather than heavy drop shadows. Hero floating metrics utilize an ultra-subtle diffuse elevation (0 10px 25px rgba(0, 0, 0, 0.06)), while standard cards rely solely on crisp 1px borders (#f1f5f9). The mobile showcase generates visual depth by layering realistic screen frames over an atmospheric deep gradient.
IMAGERY
Photography focuses on authentic, high-key wellness scenarios: serene yogis in bright, sunlit domestic studios with neutral timber and organic greenery. Subjects are captured in disciplined postures wearing soft-toned athletic apparel, avoiding artificial neon gym lighting or high-gloss studio sets. Cutout device assets sit flat and unskewed.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the contrast-grounding app banner: a deep midnight-to-indigo gradient pill container (24px radius) embedding clean white mobile UIs against a predominantly pure white landing page. This anchors the bottom of an otherwise high-key, airy composition without fracturing visual continuity. Misusing it involves making the entire page dark, which destroys the restorative lightness.
MUST
- Use deep mineral teal (#17656e) sparingly to signal clickable intent or meaningful state changes.
- Maintain generous line-height (1.6) on gray body text (#64748b) to reinforce a tranquil, uncrowded feel.
- Wrap category iconography inside 48px pastel tinted circles (sage, lilac, peach) with 2px line-weight glyphs.
- Use 20px to 24px outer border-radii consistently across feature cards, image frames, and app containers.
AVOID
- Do not use harsh, saturated primary blues or warm reds; stick to mineral and earthy pastels.
- Do not make buttons pill-shaped (full radius); keep them strictly at 10px rounded corners.
- Avoid heavy drop shadows; elevate cards using micro-borders (#e2e8f0) and ample empty space.
- Never use dark backgrounds for the entire page; confine deep tones strictly to the mobile app banner.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1408:3840. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
