The problem
Tale Detail, an architectural visualization and urban representation studio, had no website at all, only word of mouth and a Figma file with a fully designed system. They needed a site that matched that design system exactly and that they could keep updating themselves (portfolio, testimonials, case studies) without depending on a developer for every change.
Role and impact
- Freelance project, solo, frontend.
- Gave the client their first web presence, live in production at taledetail.design.
- Implementation matches the client's Figma design system, translated into reusable Tailwind tokens.
- Portfolio, testimonials, and case studies are editable by the client through Sanity Studio, with no code changes needed.
Technical decisions and challenges
The client handed off a complete design system in Figma: color scales, spacing, and typography, built for a design tool, not a codebase. I compared hardcoding the values I saw in each screen versus extracting the Figma variables into a shared token layer first.
I chose to map the Figma variables directly onto Tailwind's theme configuration before building any screen, since it meant every component pulled from the same source of truth and a future design update only requires changing the token, not hunting down every place a color or spacing value was hardcoded.
The client's portfolio, case studies, and testimonials change often as they land new projects, and they aren't developers. I evaluated hardcoding that content in MDX versus wiring up a headless CMS with a client-facing editing interface.
I went with Sanity as a headless CMS with a custom Studio schema, because it gave the client a friendly editing interface for exactly the content types they update regularly, without needing me involved in every content change or redeploy.
Detailed stack
| Layer | Technology | Why |
|---|---|---|
| Frontend | Next.js, Tailwind CSS | Design-system tokens map cleanly onto Tailwind's theme config |
| Animation | Motion | Declarative scroll and transition animations for a portfolio feel |
| Content | Sanity | Client-editable portfolio, testimonials, and case studies |
| Hosting | Vercel | Zero-config deploys straight from the Next.js app |
Gallery
What I would do differently
I would set up the Sanity schema and content model before starting on the Figma-to-Tailwind token work instead of in parallel. A couple of content types needed reshaping once real portfolio entries were added, which meant revisiting components that had already been styled against placeholder data.