Case study

Our own site, built like client work.

Every studio site claims quality. This one has to demonstrate it: the pages you just browsed are the proof, documented decision by decision. Here is how it was built, what it cost, and what we would do differently.

TypeStudio project
DeliveredDesign · Build · AI
First sketch to launch-ready6 days
Build window2 days · 63 commits
StackNext.js · React · Claude

The problem

Decisions and trade-offs

01

Two designs died before one lived. A paper-and-ink direction and a white glass direction were both rejected before the current editorial system was approved. The system that shipped is hand-written CSS, about 23KB of it, with no CSS framework and no UI library. Four runtime dependencies in total.

02

The demos are real. The chat on the home page is a live Claude model behind our own API route. Before launch we tested it against off-topic questions and prompt-injection attempts, and verified that prompt caching works so repeat answers stay fast and cheap.

03

Anything not real is labeled. The architecture trace beside the chat animates the production pipeline we build for clients. Our own site is deliberately simpler, so the panel is labeled simulated and stays that way until its timings are real. A receipt-reading demo was cut entirely rather than shipped as a teaser.

04

We rebuilt five patterns, then kept the originals. Late in the build we redesigned the hero, the timeline, the chips, the nav state and the divider to push the design further from its references. We reviewed all five and reverted all five: the originals were already ours, rebuilt from scratch and shaped through review. That decision is in the design log like every other.

05

Prices took four iterations to say honestly. Thai visitors see baht, everyone else sees US dollars, and the written agreement always carries the binding number. Getting one price line to read honestly in both currencies took four logged revisions.

06

Performance was tuned last, measured always. The final pass moved images to the framework optimizer, cut the body font from three files to one variable file, and stopped two animation loops that ran even when nothing moved. The numbers below are from that build.

Measured results

01Page weight, home0.5MB
02Loads in1.0s (desktop LCP)
03Lighthouse, home89 mobile · 99 desktop
04Runtime dependencies4
05Running cost$21.99/yr + API usage

Measured 2026-08-07 on the production build. They are a snapshot of that build, not a live readout, which is why they carry a date. Hosting, email and booking all run on free tiers, so the cash cost of running this site is the domain plus what the chat answers cost us.

What we would do differently

Next

Since this study shipped, delivered client work joined it on file. Read The Scoreboard →

Want yours built this way?

A 30-minute call. We show our working.
Start yours