Design a light-mode web interface screen: pristine arch-framed wellness aesthetics balanced by vibrant cobalt anchors and disciplined editorial breathing room.
LAYOUT
The page flows as an alternating zig-zag editorial narrative within a 1200px centered grid. The hero deploys a 55/45 split with left typography and right arch-masked photo accompanied by floating stat cards. Subsequent sections swap between left-aligned image collages and right-aligned text blocks, punctuated by subtle decorative leaf motifs and dot-matrix patterns to guide the eye downward toward mobile app mockups.
PALETTE (use these exact hex values)
- #FFFFFF — Canvas White: primary page background and crisp floating card surface
- #F8FAFC — Wash Tint: subtle background separation for alternating lower sections
- #EEF4FF — Arch Mist: pastel blue-tinted fill for silhouette backplate arches
- #3164F4 — Cobalt Anchor: primary interactive buttons, active indicators, and checkmarks
- #E8F0FE — Soft Cobalt Tint: background fill for square feature badges and icons
- #F06553 — Studio Coral: stat numbers and active tracking pips on floating cards
- #0F172A — Ink Navy: high-contrast headlines, primary labels, and strong typography
- #64748B — Slate Body: body copy, inactive navigation items, and helper text
TYPOGRAPHY
Typeface Plus Jakarta Sans (or DM Sans, Outfit, Inter), weights 400/500/600/700. Sizes 12px caption, 14px body-sm, 16px body, 18px body-lg, 20px subheading, 36px heading, 52px display. Tracking -0.03em display, 0.08em eyebrows. The typography conveys modern mindfulness: quiet, disciplined, and structurally sound. Plus Jakarta Sans provides crisp geometric circularity without feeling clinical or overly corporate. Display titles feel grounded and calm at -0.03em tracking, while uppercase tracked eyebrows establish quiet editorial confidence. DM Sans or Inter can serve as accessible drop-in replacements.
GEOMETRY & SPACING
Corner radii — cards 16px, links 2px, inputs 8px, buttons 8px. Spacing on a 8px unit, 32px gaps, 120px between sections, 1200px container, airy density.
DEPTH
Elevation is achieved primarily through layered graphic overlap rather than dense shadows. A subtle ambient drop shadow (0 10px 30px rgba(15,23,42,0.06)) is reserved exclusively for floating stats cards and mobile mockups to lift them slightly above the plane. Base images, arch panels, and buttons sit completely flush with zero elevation.
IMAGERY
Photography consists of bright, studio-lit lifestyle portraits of practitioners performing yoga against clean, warm neutral interiors. Subjects are meticulously cut out from their surroundings and overlaid against geometric arch backings and delicate indoor greenery. Stock photography with dark vignettes, high-grain filters, or chaotic urban backgrounds is strictly prohibited.
SIGNATURE DETAIL — the thing that makes this design itself
The monumental archway mask and floating backplate geometry, which frames organic human movement inside crisp architectural curves, serves as the defining brand signature. It must always frame active human poses with elements subtly spilling over the boundary, and should never be flattened into a plain rectangle or cluttered with dense text inside the arch itself.
MUST
- Anchor asymmetric editorial imagery with geometric solid backdrop arches (e.g., #EEF4FF).
- Maintain a generous 120px vertical spacing rhythm between content modules to preserve serenity.
- Use solid cobalt (#3164F4) sparingly for primary conversion points and key interactive affordances.
- Pair cutout subject photography so it breaks outward past the boundaries of its mask.
AVOID
- Never use dark, muddy, or heavily saturated background panels that disrupt airy lightness.
- Do not introduce sharp 0px corners; maintain soft, organic rounding across buttons and frames.
- Avoid multi-colored icon palettes; stick strictly to monochromatic cobalt against pastel blue tins.
- Do not crowd text blocks into multi-column walls; preserve asymmetrical negative space.
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 中尝试 
