Mitti Studio
A ceramics studio's identity, kept as live tokens
Mitti Studio is a sample brief. We imagined a ceramics studio making quiet, beautiful objects under a loud, borrowed logo, and asked what an identity that matched the work would look like. The studio is imaginary. The brand system isn't: we designed and engineered it, and you can change its tokens in the live build below.
A sample brief, a real product. We wrote this brief ourselves. The business is imaginary; the product is not: we designed and engineered it, and you can use it above. We publish results only for work a client has let us verify, so this page shows none.
The brief
We imagined a small ceramics studio: thrown stoneware, kiln labels, a stall at design fairs, and a logo borrowed from a template that said nothing about the work. We built an identity that matches it, then the system that keeps it consistent.
The problem
Craft brands drift into cliché fast. We wanted warmth without the rustic costume and rigour without going cold, and a brand a two-person studio could keep consistent on its own, from a stamp on a pot to a web page.
- An identity that feels made by hand
- Type and marks that scale down to a stamp
- One source of truth for colour, type and shape
- Guidelines short enough to follow
The approach
We drew the marks from the process itself (the wheel, the glaze line, the kiln) and set them on a strict grid. Then we turned the identity into tokens: change the clay red or the corner radius once, and every component, export and changelog follows.
What would change for a studio like this: the brand stops depending on whoever made the last poster, and a new label or page comes out on-brand the first time.
- A primary mark and a working set, including a kiln stamp
- Colour with contrast checked as you edit
- Tokens exported to CSS, JSON and Swift
- Changes proposed and reviewed before they publish
What shipped
- Palette with a WCAG contrast checker
- Type scale slider
- Mark variants
- A radius token that redraws components
- CSS, JSON and Swift export
- Changelog and publish
- Component gallery and icon set
- Motion tokens
- Token change reviews: propose, approve, decline
Under the surface
How it is built
Design tokens live in Figma, export through Style Dictionary into CSS variables and a typed React kit documented in Storybook; Chromatic gates every visual diff in CI.
- Single token source compiled to web, iOS and print
- Storybook as the contract between design and build
- Chromatic visual regression on every PR
- Versioned brand releases with changelogs
Considered and turned down
A static PDF guideline. We rejected it because brands drift and pipelines don't.
Stack
The mechanism, working
The part of Mitti Studio that was hardest to get right, as a small model you can operate.
Token pipeline
One source of truth compiles to CSS, iOS and print. Every visual diff gates a pull request.