Design a light-mode web interface screen: sunlit ocean breeze through clean linen, offering mindful movement in gentle pastel stillness.
LAYOUT
The page follows a balanced single-column vertical stack with alternating content densities, bounded within a 1200px center container. It begins with an asymmetric split hero section where text anchors the left while a sweeping parabolic photo dominates the right. Below, sections alternate between clean centered headings and wide horizontal modular units—three value columns, a widescreen featured class card carousel, and a four-column grid of instructor badges.
PALETTE (use these exact hex values)
- #fbfcfd — Canvas Background: Primary background for the entire page body and outer sections
- #ffffff — Surface White: Raised content containers, cards, and interactive carousel surfaces
- #3b62ec — Primary Indigo Blue: Primary call-to-action buttons, key brand icons, and active slider pagination dots
- #0f172a — Deep Slate Navy: Primary headlines, section titles, instructor names, and navigation links
- #64748b — Muted Slate Gray: Body copy, supporting metadata, class schedules, and secondary button borders
- #5073e5 — Eyebrow Subtitle Blue: All-caps category labels, small badges, and text link accents
- #fdf2f2 — Soft Tint Rose: Background fill for wellness icon container and pill badges
- #eafaf1 — Soft Tint Mint: Background fill for growth icon container
- #e2e8f0 — Border Subtle: Dividers, secondary button borders, and card outlines
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Outfit, Inter, Manrope), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 16px body-lg, 20px subheading, 24px heading, 34px heading-lg, 52px display. Tracking -0.03em at display, 0.08em at uppercase labels. The typographic tone is tranquil, polished, and contemporary, relying on a humanist-geometric sans-serif (closest to Plus Jakarta Sans). Tight letter-spacing on display headlines conveys modern studio exclusivity, while generous leading on slate body copy provides exceptional legibility and calm. If licensing or availability requires a substitute, Outfit or Manrope match the geometric balance and rounded terminal warmth.
GEOMETRY & SPACING
Corner radii — cards 24px, links 4px, inputs 999px, buttons 999px. Spacing on a 4px unit, 28px gaps, 104px between sections, 1200px container, airy density.
DEPTH
Depth is created softly and sparingly through subtle, diffuse drop shadows (0 12px 32px rgba(15, 23, 42, 0.04)) under pure white card surfaces against the near-white canvas. Interactive controls and floating carousel buttons use mild ambient elevation (0 4px 12px rgba(0, 0, 0, 0.06)), avoiding harsh edges or solid outlines. The hero image relies on planar layering and natural outdoor sunlight rather than artificial depth effects.
IMAGERY
Photography emphasizes spacious, sun-drenched wellness environments, coastal horizon views, and serene studio interiors with warm natural wood and diffuse lighting. Figures demonstrate precise, graceful yoga forms with calm, centered expressions wearing neutral-toned athletic apparel. Imagery must avoid busy urban backgrounds, aggressive fitness gym aesthetics, or saturated commercial color grades.
SIGNATURE DETAIL — the thing that makes this design itself
The signature element is the expansive, parabolic swooping image mask in the hero header that curves organically from the upper-center toward the lower-right margin. This curvilinear transition visually represents the concept of 'flow' and somatic release, harmonizing editorial lifestyle imagery with structured interface typography. Misusing this element by converting it into a standard rectangular crop or a harsh diagonal slice immediately strips the design of its graceful, soothing identity.
MUST
- Keep typography strictly high-contrast dark slate (#0f172a) on pristine light surfaces.
- Use generous line spacing and wide negative margins to evoke calm and breathing room.
- Ensure all interactive buttons use 999px full pill border-radii.
- Enclose value icons in 48px circular pastel containers tinted with hue-specific washes.
AVOID
- Do not use harsh black (#000000); always opt for deep navy-slate (#0f172a).
- Do not introduce square corners or sharp 0px radius cards anywhere in the layout.
- Do not use heavy, dark, or muddy shadows; restrict to airy, dispersed diffuse blurs.
- Avoid high-saturation neon colors outside of the primary brand cobalt blue (#3b62ec).
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 2336:3520. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
