One shared vocabulary for eight products.
Eight apps, eight personalities.
Workshopr had grown to more than eight apps, each built independently with its own look. Moving between products felt jarring. The root problem was that there was no shared vocabulary: what shade of red is "Workshopr red," exactly how round are the corners? Without answers, every new screen drifted a little further from the last.
A system in three layers.
I built it in Figma, then brought it into Claude Code to generate the guidelines, components, tokens, and an AI layer. Layer one is a single CSS token file that captures every design decision, from the cream background to the ink text. If it isn't a token, it doesn't exist. Layer two is a library of 30+ PHP helper functions (now moving to React) that render components consistently. Layer three lets each app theme itself by overriding a single accent token. And the distinctive part: every component and guideline is mirrored into a machine-readable JSON layer, read through design.md and Claude.md on every prompt, so the AI follows the same rules I do when it builds. Canvas designs for humans and AI alike.
One product family, documented.
Canvas brought 8+ products under one roof in three weeks and shipped with 40+ pages of documentation, so any new screen starts from shared answers instead of fresh guesses. It's the foundation the rest of the Workshopr ecosystem is built on.