How we built this.

Case study — self-referential, on purpose 2026
01The premise

The portfolio piece is the page itself.

A design studio’s site can’t describe capability. It has to demonstrate it on sight — before a single case study is opened. So this site runs on a written system, the Digital Atelier, and every rule below is enforced on the page you’re reading.

The aside in italics, the numbered labels, the sentence-case headlines ending in periods — all inherited from our sister company’s brand voice, translated from advisory into build.

02Surface hierarchy

No lines. Layers.

One-pixel borders are prohibited everywhere on this site. Every boundary you’ve perceived has been a surface shift — four tones of charcoal stacked like sheets of paper. Below: the actual stack, unstyled, no tricks.

Recessedsurface-container-lowest · #0E0E0E
Basesurface · #131313
Cardsurface-container-low · #1B1C1C
Elevatedsurface-container-high · #2A2A2A
Signatureprimary gradient · 135°
03Typography

Tension, on purpose.

Newsreader carries the storytelling at −0.02em tracking; Inter carries the function at 1.6 line-height. The system’s identity is the extreme scale contrast — a display headline sitting directly against an 11px uppercase meta-tag.

04Motion architecture

Slow and purposeful.

Eight techniques, all at 400ms ease-in-out or slower, all of which you have already met. Each one degrades to a static layout under prefers-reduced-motion and without JavaScript.

  1. 01

    Preloader.

    A 0–100 counter in Newsreader, a rapid flash of the work gradients, then the shell lifts.

  2. 02

    Kinetic type.

    Display lines mask-revealed with a stagger as each section enters.

  3. 03

    Pinned storytelling.

    The approach section pins the viewport while three beats swap in place.

  4. 04

    Hover-reveal work list.

    Project names at display scale; a monolith panel follows the cursor.

  5. 05

    Magnetic cursor.

    A lerped dot that swells on interactive elements and pulls toward targets.

  6. 06

    Marquee strips.

    Capability keywords in label style, drifting at reading pace.

  7. 07

    Smooth scroll.

    Lenis, synced to GSAP’s ticker, tuned just under the default.

  8. 08

    Hard surface cuts.

    Section transitions by surface shift and clip-path reveal — never a line.

← Back to the work