- Project
Dot Studio design system
- Website address
- dotstudio.uk
- Role
- Design and build
- Stack
- Figma, tokens, Storybook
- Year
- 2024
- What I owned
- Tokens, components, documentation, and using the system to ship the site.
- What I shipped
- Tokenised components in Figma and Storybook, then the live site built from them. About 50% faster than building the site from scratch; 45% faster handoff.
Overview
A new studio needed a site quickly, and a system it would actually use afterwards. We designed the components, coded them in Storybook, and built the website from the same library.
The problem
Build fast without painting every future page into a corner. The system had to be the website, not a parallel artefact.
The process
Discovery of the pages we needed, then core components with responsive variants, tokens for colour, type, and space, and coded counterparts in Storybook. The live site was the first consumer, which kept the library honest.
Measuring success
About 50% faster than building the site from scratch (target 40%). 45% faster design-to-development handoff. Components reusable for later pages.
Outcomes
A tokenised library in Figma and Storybook, and a live site built from it. New pages can be assembled from what already exists, instead of designed freehand each time.