Design a light-mode web interface screen: sunlit clinical warmth wrapped in organic curves and reassuring editorial typography.
LAYOUT
The page flows chronologically from top-level trust to detailed offerings: beginning with a balanced hero featuring left-aligned copy and an asymmetric right-side photo mask. Below the fold, a three-column grid showcases service cards with generous gutter margins (24px). This flows into a comprehensive split-column practitioner bio framed in an expansive tinted box, followed by a serene centered testimonial unit punctuated by floating circular motifs.
PALETTE (use these exact hex values)
- #FAF9F7 — Canvas Off-White: Primary background canvas creating a soft, warm, non-sterile foundation across all major page sections
- #F2F6FA — Ice Tint: Contained section backgrounds and bio cards creating gentle tonal contrast without harsh lines
- #FFFFFF — Pure White: Elevated card backgrounds and floating service panels to pop cleanly off the off-white canvas
- #2A6ECF — Sanctuary Blue: Primary interactive buttons, text links, hero headline accents, and active status indicators
- #0E1B2E — Midnight Slate: Display headings, titles, practitioner introductions, and dark footer banner surface
- #606F7F — Muted Slate: Body copy, service card descriptions, subtitles, and secondary metadata descriptions
- #F89E89 — Warm Terracotta: Organic accent discs, background hero decorative semicircles, and microneedling service badge
- #52B69A — Eucalyptus Mint: Icon container badge for Magnet Therapy card emphasizing herbal vitality and balance
TYPOGRAPHY
Typeface Playfair Display (or Cormorant Garamond, Freight Display Pro, EB Garamond), weights 400/500/600. Sizes 11px caption, 13px body-sm, 15px body, 18px body-lg, 20px subheading, 32px heading, 40px heading-lg, 52px display. Tracking -0.015em at display, 0 at heading. The typography balances traditional apothecary heritage with modern high-end studio elegance. Playfair Display delivers classical gravitas and emotional reassurance through its sculpted serifs, while Plus Jakarta Sans brings accessible, uncluttered modern usability. In production, Cormorant Garamond or Freight Display serve as seamless serif substitutes without sacrificing the brand's bespoke wellness character.
GEOMETRY & SPACING
Corner radii — cards 20px, links 2px, inputs 8px, buttons 8px. Spacing on a 8px unit, 24px gaps, 96px between sections, 1200px container, airy density.
DEPTH
Depth is created almost entirely through soft chromatic shifts between the cream canvas (#FAF9F7) and ice-tinted surfaces (#F2F6FA). Physical shadows are kept to a minimum, appearing only beneath white service cards as an ethereal blur: 0 10px 30px rgba(14, 27, 46, 0.04). Layers overlap gently, such as photo masks layering across background dots and terracotta half-moons.
IMAGERY
Warm, natural lifestyle photography capturing organic ingredients, clay bowls, wooden utensils, and empathetic human touch in soft daylight. Lighting must feel domestic, calm, and grounded rather than artificial or laboratory-clinical. High-gloss stock photos, neon medical machinery, or sterile white clinic environments are strictly off-brand.
SIGNATURE DETAIL — the thing that makes this design itself
The asymmetric organic photo arch layered over miniature dot matrices and geometric terracotta discs. This signature motif breaks the rigid grid of standard healthcare design, communicating gentle natural healing while maintaining polished structure. It must never be applied to utility cards, only to hero anchors and feature bio portraits.
MUST
- Use serif fonts exclusively for editorial headings and italicized emotional quotes.
- Maintain high whitespace ratios around cards with at least 80px between major sections.
- Reserve the bright cobalt blue (#2A6ECF) for primary actions and selective headline accents.
- Clip lifestyle photography inside smooth organic curves or pill-radii cards (16px to 24px).
AVOID
- Do not use stark clinical pure black (#000000); always use midnight slate (#0E1B2E).
- Never make cards or hero imagery sharp-cornered (0px radius breaks the nurturing aesthetic).
- Avoid using saturated primary colors for secondary badges; stick to dusty pastels.
- Do not crowd text against images; allow minimum 48px breathing room in split columns.
OUTPUT
Render as a clean, pixel-crisp UI design at roughly 1888:3840. Flat vector rendering, real legible text, no browser chrome, no device mockup frame, no watermark, no lorem ipsum placeholder blocks. 在 DraPub 中尝试 
