PROCESS
One Design System
The problem: a site that looked stitched together
Earlier this year our own website failed the most basic test we hold our products to: it didn't feel like one thing. The homepage borrowed from one design language, the product pages from another, the legal pages from a third. Each page was fine in isolation. Together they read like a patchwork — and the honest verdict from inside the studio was exactly that: "it feels stitched together."
That matters more than aesthetics. A studio that says "small, honest tools" and then ships an incoherent website is contradicting itself on its own front door.
The decision: one benchmark, measured — not vibes
The fix was a constraint, not a redesign brief: pick one reference system and rebuild everything inside it. We chose a single benchmark, opened it in a real browser, and measured it block by block — the grid and max content width, the spacing rhythm, the type scale and line heights, the exact color tokens for background, text, borders and hover in both themes, the card and button anatomy, the footer structure, the motion timing.
Those measurements became a written spec in our repo before a single page was touched. Design by measurement instead of design by memory — it turns taste into something reviewable.
The rebuild: 21 pages, one set of tokens
Every page — English and Chinese mirrors, product pages, purpose, values, posts, legal, even the 404 — was rewritten from the same token file. No page keeps private styles. Twelve products present themselves through one card system. The three homepage illustrations were redrawn as isometric line art at the same density as the rest of the page, because a sparse icon floating in whitespace was another small dishonesty: it looked like a placeholder for effort we hadn't spent.
Then we did the harder part: the words. A site can share tokens and still say twelve unrelated things. We wrote a single narrative arc — claim, proof, why, how, process, invitation, commitment — and rewrote every page's copy so that each page serves one sentence and hands off to the next.
What it taught us
Coherence is a feature, and it is cheap to fake and expensive to build. The shortcut — borrowing the best block from five different sites — produces exactly the patchwork we started with. The honest path is slower: pick one system, measure it, and rebuild everything, including the words, inside it.
The site you are reading is the result. If a page still feels off, that's a bug — tell us.
Written by the Zalize studio
-- zalize.com