Skip to content
UNCODED

Koen Vaessen

A site for a somatic coach where the home page breathes with you, at six breaths a minute.

Built for Koen Vaessen, somatic coach. In development, not yet on his own domain.

Sector
Somatic coaching · Coach site
Year
2026
Services
Web design, Development, Interaction design
Stack
HTML, CSS, JavaScript, Canvas, Vercel

(01)The idea

Somatic coaching is hard to explain and easy to feel. Instead of describing breathwork, the site had to let a visitor try it within seconds, then show them how to start.

Koen coaches people to get stronger, breathe better and feel at home in their own body. The site had to make that felt, not just read, within the first few seconds.

Starting is deliberately simple and personal: send START to @koenvaessen on Instagram, and Koen replies himself with a few questions.

Screens

Koen Vaessen's home page: the headline Strong body. Quiet mind. over teal contour lines around an amber dot, with a Breathe in cue.
Home: the contour field breathes, and the cue under the headline counts along.
Koen Vaessen's breathwork page with three practice buttons and a large circle reading Ready.
Breathwork: pick a practice and follow the circle.
Koen Vaessen's coaching page moving from a chalk section into a teal section titled What you get.
Coaching: chalk and teal bands alternate down the page.
Koen Vaessen's home page on a phone.
Phone: the field and the cue, right under the headline.
The breathwork timer on a phone.
The timer fits one hand.

(02)Design choices

Colour

  • Tide#0F3B3CHero and dark bands
  • Kelp#1B5451Surfaces on dark
  • Chalk#EDEFEALight pages
  • Ink#122423Text on chalk
  • Oxygen#C4ECE4Text and lines on tide
  • Pulse#F0B03FCalls to action only

Type

  • Bricolage GrotesqueDisplay: heavy, tight statements.
  • LiterataBody: a reading serif for everything you take in slowly.

Colour

"Tidewater": deep teal fields alternate with cool chalk pages. Amber is reserved for calls to action, so the one thing to do next is always the one warm thing on screen.

Type

Bricolage Grotesque, heavy and tightly set, for short statements like "Strong body. Quiet mind." Literata for the text, set to a 38 rem measure. A modular scale with a 1.333 ratio and fluid display sizes.

Motion

One loud thing per page. On the home page that is the breathing field; everything else is quiet type and space. The field holds still for anyone who prefers reduced motion.

Layout

Pages read as a rhythm of dark and light bands. Content keeps to one gutter that scales from 20 to 72 px, and the navigation keeps a single amber button: Send START.

(03)The approach

  1. 01

    A home hero of contour lines on a canvas that breathes at coherent-breathing pace (five seconds in, five out), with a live cue under the headline. It holds still for anyone who prefers reduced motion.

  2. 02

    A guided breathwork timer with box breathing, coherent breathing and a long exhale, each with a note on when to use it.

  3. 03

    A "tidewater" palette: deep teal and cool chalk, with amber kept for calls to action only. Starting is one clear step: send "START" on Instagram.

(04)The stack

HTML
Six hand-written pages and no framework, because nothing on the site needs one.
CSS
One stylesheet. Colours, type sizes and spacing are tokens at the top.
JavaScript
Three small scripts: the breathing field, the breathwork timer, and the phone menu with a copy button.
Canvas 2D
Draws 26 contour lines that swell and settle with each breath, sharp on high-density screens.
Vercel
Static hosting with no build step.

(05)In the details

  1. 01

    A hero that breathes at six breaths a minute

    Five seconds in, five seconds out, eased like a real inhale and exhale. A live cue under the headline says what to do and counts the seconds.

  2. 02

    A timer with practices he actually teaches

    Box breathing (4-4-4-4, four rounds) to steady you before something hard, coherent breathing (5-5) for everyday calm, and a long exhale (4-8). Each comes with a note on when to use it.

  3. 03

    Starting is one message

    The Start page explains one step: send START on Instagram. A copy button puts the word on your clipboard, and Koen replies personally.

  4. 04

    No dependencies at all

    No framework, no package manager, no build. The whole site runs from `python3 -m http.server`.

(06) The outcome

Six static pages with no build step and no dependencies: plain HTML, one stylesheet of tokens and three small scripts.

Let’s talk

Let’s build
something uncommon.

A free, no-pressure intake call. You’ll leave with a clear scope and a fixed quote.

Start a project