Fable 13 · Guide 11 · Coach / consultant

Building Margin Notes

The brief: a personal-brand/coach site — long-form scroll, about, services, testimonials, booking CTA. The idea: a coach whose whole product is margin, presented as an annotated letter rather than a landing page.

The signature — marks that read with you

The page behaves like a document someone worked through with a pen: the hero's marker stroke draws under "margin" on load (hand-drawn SVG path, pathLength + WAAPI); yellow highlighter sweeps across key phrases as they enter view (scaling pseudo-bars with mix-blend-mode: multiply); a clay pen circles "what you own"; and real margin notes — rotated sticky notes — sit in the actual margin at desktop widths, folding inline on mobile. A marker-yellow reading-progress bar runs the top via Motion's scroll().

The voice

Fraunces (with its SOFT and WONK axes gently on) gives the humanist-editorial tone; Inter stays out of the way. Chalk, slate green, one clay accent and the marker. The copy is the conversion strategy: "who this is not for" is the most trust-building section on the page, and the booking flow only offers Tuesdays — scarcity that's true to the service, generated from today's date.

Process — three passes

Pass 1 (visual): highlighter bars moved behind text (z-index) so sweeps never obscure a word mid-animation; hero underline path re-drawn to sit under the descenders instead of through them.
Pass 2 (complexify): margin note №2 foreshadows a testimonial ("session three is the expensive one") — the page quotes itself, like a real annotated draft.
Pass 3 (QA): 390px pass (notes fold inline), reduced motion shows all marks pre-drawn, Tuesday picker verified against the real calendar, zero console errors.

← All thirteen sites