Sample project: an illustrative engagement showing how we scope and build this kind of work.
- LCP target on mobile
- < 1.2s
- accessibility target
- WCAG 2.2 AA
- target from signed-off design to launch
- 4 weeks
Context
This sample engagement describes a small brand and design studio that wins website projects on the strength of its visual work, but has no developers on staff. In the past it relied on freelancers, which meant a different build quality, stack and handover on every project.
Challenge
The studio needed a development partner that could work invisibly inside its process. Clients had to experience one team. The studio also wanted predictable estimates it could put into proposals, consistent technical quality across projects, and sites that its clients’ marketing teams could edit without coming back for every change.
What we built
Rather than treating each site as a one-off, we built a shared foundation the studio can sell repeatedly:
- A starter codebase with Astro, a Sanity schema for common page types (home, service, case study, article, contact) and a library of flexible sections. Each new project starts from this and is styled from the studio’s Figma files.
- A handoff checklist for designers covering breakpoints, component states, content limits and motion notes, so fewer questions come up mid-build.
- An estimate template that maps design complexity to build effort, which the studio uses to price its proposals.
- Unbranded editor guides and short screen recordings the studio sends to clients under its own name.
For each client project, we work in the studio’s Slack and Linear, commit to repositories the studio owns, and join client calls as members of the studio’s team when asked. AI tools speed up the conversion of Figma components into code and generate realistic test content for every section, which keeps build time focused on the details designers care about.
Architecture
Sites are statically generated with Astro and deployed to Vercel, with Sanity as the headless CMS and on-demand rebuilds triggered by content changes. Images go through Sanity’s image pipeline with responsive sizes and modern formats. Each project has preview deployments for every pull request, which the studio shares with its clients for review.
Quality gates run in CI on every change: Lighthouse budgets for performance, automated accessibility checks, link checking and visual regression on key templates. A manual QA pass on real devices happens before each launch.
Stack
Astro, Tailwind CSS, Sanity, TypeScript, Vercel, GitHub Actions, Playwright for visual regression, with Figma as the design source of truth.
