Design studio

Usually the end client can't see our work directly. That's the arrangement. This time the client was the studio, the work was their own portfolio, and every person reviewing the staging link critiques grids for a living. There's no kinder audience and no harsher one.

Where it started

Their own portfolio had been the cobbler's-children project for three years: designed twice internally, built never. When the second design was finished they sent it over with the sheepish note every studio attaches to their own site. We treated it like any client file, with the same two-day review, the same fixed quote and the same block list, and they said later that was the moment it stopped being a someday project.

As the build went on, the overlay pass turned competitive. Their designers checked staging against the file before we did and filed pixel notes at midnight, and by week four the review calls were less sign-off than sport. The final block shipped with a deviation list of zero, mostly out of pride on both sides.

The build

The case-study builder is a block kit tuned for showing work: full-bleed image, diptych, before/after comparison, a measured text column, and a video block that behaves on a phone. Each project carries its own palette and type-scale fields, so a case study can take on its subject's art direction without anyone touching a stylesheet.

Because the studio would be assembling pages themselves, the control panel mattered as much as the front end. Field instructions are written in their vocabulary, blocks preview with their thumbnails, and anything we'd have had to explain twice got redesigned until we didn't.

A control panel held to the same standard

The palette fields aren't free colour pickers. They store two colours per project and run them through a validation rule that refuses any pair failing contrast at the type sizes the case-study blocks use, which leaves the studio free to be adventurous on a Friday afternoon without publishing something illegible.

Block thumbnails in the picker are exported straight from the studio's own Figma file, so choosing a layout feels like flicking through their design system rather than guessing from names. The video block self-hosts, takes its poster from a frame the studio chooses, and sits still for anyone with reduced motion switched on.

We built in their order of impatience: the case-study template first, so they could start loading real projects while the rest of the kit was still grey boxes. That surfaced two rounds of field-instruction rewrites before launch instead of after, and meant the site went live with fourteen finished case studies rather than a coming-soon page. The before/after comparison is the only custom JavaScript on the page. It drives with keyboard arrows as well as a pointer, and without JavaScript it degrades to the two images stacked.

Interaction

The per-project palette is where Craft's flexibility shows. The two colour fields render as custom properties on the case study's root element, so a project restyles every block it contains without a stylesheet deploy, and the studio can art-direct a new case study on a Friday and publish it the same day. The blocks query their container rather than the viewport, which lets the same diptych sit full-bleed on one page and inside a column on another and lay itself out correctly in both. It's most of why fourteen blocks behave like thirty.

There isn't much motion, so what's there reads as intentional. Blocks enter with a short stagger, once, on first view, and the before/after handle carries a little weight so it settles rather than stops. All of it checks reduced motion first and doesn't run if it's on. The focus states were designed in the file rather than left to the browser, with ring colours drawn from each project's own palette and checked against the same contrast rule as the type, so tabbing through a case study looks considered.

After launch

They've shipped every project since without us, which is the test of a builder. They now introduce us to their clients as their dev team, which is how we met the consultancy above and how this is meant to work. Fourteen case studies were live at launch. They've published nine more since without asking us a single question, which stings slightly and is what we were going for.