PICKURPAGE

This is our own site. There was no client brief: we were the client, the strategist, the designer and the engineer — which is also the test of whether our way of working holds up when nobody else sets the constraints.

The previous site, built in 2020, called us a “Creative Media Studio” — not the product engineering work we actually do. It was a client-rendered React application: visitors saw a loading indicator while a large JavaScript bundle downloaded and the page was rendered in the browser. Its illustration and motion came from stock Lottie animations rather than a visual system of our own.

Rebuild the site as one system — design language, motion and code — so every page is assembled from the same parts, renders as HTML on the server, and describes the work accurately.

Technical drawing became the visual language: a full-width 12-column grid instead of a max-width container, hairline frames and construction lines, and a mark built on exact 45° geometry. Every colour, type size and spacing value is a design token, so pages are assembled rather than styled one by one. Motion is limited to three primitives — DRAW for structure, WIPE for text, NUDGE for interaction — each with one fixed curve, and the hero runs on a single choreographed timeline. The system is documented in the open, on the identity page.

The new site replaces that foundation with a server-rendered Next.js architecture and a purpose-built visual system: Next.js 16 with React 19, TypeScript and Tailwind CSS v4, with the tokens defined once in CSS. Pages render on the server, so content arrives as HTML and stays readable without JavaScript; motion is layered on top and turns off for visitors who prefer reduced motion. Animation runs on Motion. The contact form validates with Zod and emails each enquiry through Resend. The site is hosted on Vercel.

• Next.js 16
• React 19
• TypeScript
• Tailwind CSS v4
• Motion
• Zod
• Resend
• Vercel

The site as it is now, and the 2020 site it replaced — captured before the switch.