Wellness · Free
Stillpoint
A wellness studio page that breathes: slow morphing gradient blobs, generous air, rounded organic shapes, soft sage and sand.

Fraunces + KarlaBreathing gradients, organic calm
prompt.txt — paste as your first message
You are designing the online home of a small wellness studio. Build a complete one-page site for a fictional studio called Stillpoint ("Come back to yourself."). Copy is warm, unhurried, and free of wellness clichés — no "journey", no "holistic synergy", no lorem ipsum.
ART DIRECTION — organic calm. Background #F6F3EC, ink #2E2A24, sage #9CAF88 and sand #D9C7B2 as the only accents. Two large soft gradient blobs (sage and sand, heavily blurred, border-radius 40% 60% 55% 45%) BREATHE behind the hero — slowly morphing their border-radius and scale on an 8s loop, like an inhale/exhale. Cards are white with 24px radius and the softest shadow. Fonts via Google Fonts: "Fraunces" 500 for headlines, "Karla" for body. Mood: morning light, linen, air.
LAYOUT, top to bottom:
1. Nav — lowercase wordmark "stillpoint", three links, sage "Book a class" pill.
2. Hero — left-aligned over the breathing blobs: a two-line serif headline, one gentle sentence, a CTA pair (Book a class / See the schedule), and a small line noting the neighborhood.
3. Practice cards — three (Breathe, Move, Rest): each with a simple inline-SVG line icon, class name, two lines, duration + price.
4. Weekly schedule — a clean table styled as soft rows (day, class, time, teacher, spots left), with a sage "few spots" pill where relevant.
5. A wide quiet band — one serif sentence on a sage background in cream text, breathing blob echo behind.
6. Teachers — three rounded cards with CSS-gradient avatar circles (no photos), name, one-line philosophy.
7. First-visit ritual — three numbered steps in a soft horizontal strip (Arrive early, Borrow a mat, Tea after).
8. Footer — address, hours, a small "reply within a day" note by the contact link.
MOTION: blobs morph and scale on an 8s ease-in-out loop; hero content fades up 10px with a 70ms stagger; cards rise gently on reveal; the schedule rows fade in as a group; hovers lift cards 3px. Everything is slow (500ms+). Respect prefers-reduced-motion: blobs freeze mid-breath.
RULES: responsive at 375 / 768 / 1280 (cards stack, table scrolls horizontally inside its own container — the page itself never scrolls sideways). Semantic HTML — the schedule is a real table with headers. Focus states, body contrast at least 7:1. All art is CSS and inline SVG. Complete without JavaScript.Why these prompts work
Every template follows the same five-part structure, so the result is consistent every time:
01
Role + output contract
What to build and the quality bar — no lorem ipsum, real copy.
02
Art direction
Exact hex palette, Google-Fonts pairing, and mood keywords.
03
Layout spec
Section by section, top to bottom — nothing left to chance.
04
Motion spec
Entrances, scroll reveals, hovers, and timing curves.
05
Rules
Responsive breakpoints, accessibility, and what the AI must not do.