The task
Yoga studio sites look almost the same everywhere: beige, a woman meditating at sunset, a lotus, “find your inner peace”, and the schedule as a foreign widget from a booking platform at the very bottom. Yet the schedule is the reason people open the site. I wanted to show a studio site where the schedule and booking are the centre, with its own character. This is a sample project: the studio, its address and its teachers are made up, and the photos are generated.
Role
Concept, art direction, design, development, photos
What I did
- Art direction first: an honest list of what makes yoga sites look generic, a moodboard with two palettes on the same screen and three font pairs. The chosen look is concrete grey with one ultramarine for actions only, and a type pair that reads like a timetable. The name comes from the place: the sky over the Ruhr used to be grey and is blue now, and “blau machen” is German for taking time off.
- The schedule as the heart of the site: the whole week as one band, filters by style, level and teacher, and booking right inside the row, or in a bottom sheet on a phone. 22 dots show the free mats, a bar keeps your place in view on every page, and links from anywhere open the right class.
- Breathing as the system: every course has its own tempo (Vinyasa 4/4, Yin 5/7, Pilates 3/2, Atem 4/7/8). A circle breathes in that tempo on the course page, the header line breathes with it, and you can breathe along for a minute, with a short vibration on the phone.
- Pages that answer real questions: a price calculator that says honestly when a 10-class card is not worth it, teachers with their weekly hours taken from the schedule, the way from the tram stop to the mat, and a journal in the studio’s own voice. No reviews or star ratings.
- Details with a job: the header is a departure board of the next free classes, and behind the big wordmark is a sky drawn by a 1.8 KB WebGL shader with a CSS fallback. German and English, Reduce Motion respected everywhere, published as static files on Cloudflare.
Result
The demo works: pick a class and book a place yourself. The booking stays in your browser, nothing is sent anywhere. A studio, a dance school or a practice can run its schedule the same way on its own site.
Built with
Next.js 16, React 19, Tailwind CSS 4, Motion, Zustand, WebGL · Cloudflare Workers · ElevenLabs (photos) · Inter Tight, IBM Plex Mono