Design file to production marketing site
A finished Figma file for a six-page marketing site, built as a responsive Next.js application with a typed content layer the client edits without touching code.
- Role
- Sole developer
- Period
- 2025
- Stack
- Next.js
- TypeScript
- Tailwind CSS
- Vercel
This is a seeded example project, not client work. It is here so the structure of a case study is right from day one, and it is replaced before this site goes live.
Measured
98
Lighthouse performance
Mobile preset, run against the deployed home page
1.4s
Largest Contentful Paint
Mobile throttled, measured on the deployed site
Every screen and state
Design fidelity
Side-by-side review against the source file before handover
Problem
The client had a finished design file and no front-end capacity. Two previous quotes had proposed rebuilding the design in a page builder, which would have lost the typography and spacing the designer had spent weeks on.
They also needed to edit copy after launch without booking developer time, and had been burned before by a site only its original author could change.
Approach
I read the whole file first and listed every screen, state, and breakpoint, including the ones the design implied but did not draw, such as empty states and long-name overflow. That list became the scope, agreed before any code.
The token layer was built before any page, so spacing, colour, and type came from one place and stayed consistent as the site grew.
- Every screen and state enumerated before the build started
- Design tokens ported first, pages second
- Each page reviewed on a staging URL as it landed
Architecture
Next.js App Router with server components throughout, so the client bundle carried only the two interactive islands the design actually needed.
All copy lives in typed content modules, which means a wrong field fails the build rather than rendering an empty section.
- Static generation for every route
- Typed content modules instead of a CMS, given the page count
- Two client components: the mobile menu and the contact form
Outcome
The site matched the design at every breakpoint and scored 98 on mobile Lighthouse performance.
The client has since made several copy changes themselves by editing the content modules, which was the point.