Design a light-mode mobile app interface screen: sun-drenched morning wellness studio with rounded friendly pastels and warm editorial clarity.
LAYOUT
Vertical mobile stack following a rhythmic compression-expansion pattern: loose editorial greeting at the top, followed by a tight search utility, a dense four-column navigational cluster, and an expansive focal card anchored by a bottom horizontal dash carousel.
PALETTE (use these exact hex values)
- #FAF7F5 — Alabaster Warm Canvas: ambient background fill beneath all elevated content surfaces
- #FFFFFF — Card Elevated Surface: white fill for search bar and category selection panel
- #181A20 — Charcoal Black: primary display typography, header icons, and dark card surface overlays
- #767B86 — Muted Slate Gray: body copy, search placeholders, metadata, and inactive controls
- #F86B5A — Studio Coral: hero branded keyword accent, illustration focal ring, and live status badge
- #5D9CF6 — Sky Indigo: background fill for the courses squircle category icon
- #3DBB9B — Mint Emerald: background fill for community squircle category icon
- #AB94F6 — Soft Lilac: background fill for my studio bookmark icon tile
TYPOGRAPHY
Typeface Plus Jakarta Sans (or Outfit, DM Sans, Urbanist), weights 400/500/600/700. Sizes 11px caption, 13px body-sm, 15px body, 18px subheading, 22px heading, 32px display. Tracking -0.03em at display, 0em at body. The geometric grotesque font delivers contemporary warmth, bridging boutique editorial publishing and accessible mobile utility. Tight display line-heights (1.12) create high visual impact in the header, while relaxed body tracking maintains effortless legibility at 13-15px. Outfit or Urbanist serve as direct drop-in open-source replacements.
GEOMETRY & SPACING
Corner radii — cards 24px, links 8px, inputs 20px, buttons 999px. Spacing on a 4px unit, 16px gaps, 20px between sections, 390px container, comfortable density.
DEPTH
Depth is created primarily through soft tonal separation rather than heavy drop shadows. Elevated surfaces use pure white set against an off-white warm base with an ambient 0 4px 20px rgba(24, 26, 32, 0.03) shadow, while media cards rely on dark photography to achieve optical contrast.
IMAGERY
Editorial wellness and movement photography paired with gentle flat vector spot illustrations. Visuals spotlight single practitioners in calm natural poses, supported by warm geometric circles and botanical line art; chaotic gym imagery and harsh neon lighting are strictly off-brand.
SIGNATURE DETAIL — the thing that makes this design itself
The four-color pastel squircle cluster (coral, sky blue, teal, lilac) anchored inside an expansive pure white rounded tray directly below the search bar. This provides instant tactile wayfinding without cluttering the editorial canvas.
MUST
- Wrap multi-category action buttons inside a single unified white surface card.
- Use deep 24px rounded corners consistently for all standalone card surfaces.
- Highlight key brand nouns inside headings with #F86B5A while keeping adjacent words charcoal.
- Reserve the live badge pill strictly for ongoing real-time interactive classes.
AVOID
- Never use pure cold black (#000000); always tint dark neutrals to charcoal (#181A20).
- Do not drop category icons directly onto the canvas without the white grouping card.
- Avoid sharp or sub-16px border radii on primary content cards.
- Do not use high-saturation backgrounds for the main canvas; keep it #FAF7F5 warm.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1280:3840. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
