[Case 04]
Foundations & Arcane - Owning the Synaps Design System
Design System
Standards over reinvention and the discipline to commit
[Project Overview]
In July 2024, I took ownership of Synaps' Design System already in place since 2023, but suffering from drift between design and code. Over the following year, I migrated it to a token-driven architecture split across two libraries: Foundations (primitives, semantic tokens, three brand themes) and Arcane (the shared component library). The system served seven products across three brand identities.
[Problem Statement]
The original DS was custom from the ground up. Design moved faster than dev, gaps accumulated, components started diverging from their implementations. We needed a system that could carry three brand identities without doubling the maintenance, and a process that prevented drift from coming back.
[Industry]
Design System
[My Role]
Design System Owner
[Platforms]
Figma · Tailwind · 7 products
[Timeline]
Jul 2024 – Aug 2025 · 12 months
View Live Project
[How we structured it]
Two libraries, two token layers, three brands
Foundations holds the tokens. Arcane holds the components.
"The DS doesn't need to invent everything. It needs to enforce coherence and stay out of the way once the team adopts it."
Primitives 244 raw values
Semantic tokens usage-named
3 Brands
Consumed by 7 products and 3 designers
[The deeper problem]
Drift between design and code gaps accumulated over months.
Custom-everything wasn't sustainable with our team size.
Three brand identities needed coherent infrastructure, not forks.
[Constraints]
Small team one designer co-owner, one front-end lead.
Tailwind imposed on dev design tokens had to align.
Poor mobile optimization that slows her down.
[Process]
Split into two libraries
Foundations primitives, semantic tokens, three brand themes.
Arcane the shared component library, inheriting from Foundations.
Custom product components live in product files, not in Arcane.
Adopt shadcn/ui as the default base
Buttons, inputs, badges inherit from shadcn/ui.
Our tokens layer on top same primitives, our brand language.
Frees the team to invest where it matters: custom components.
Align design tokens with Tailwind
Tokens renamed to match Tailwind nomenclature.
JSON export via TokenStudio direct ingestion on the dev side.
No manual translation layer between Figma and code.
Govern via branches, reviews, and templated docs
Each component update flows through a Figma branch and review.
Documentation page per component — When to use, Anatomy, Rules.
Linear + Notion track dev migration progress across products.
[Outcome]
One token architecture serving three brand identities without forking the library.
7 products, all consuming the same system.
Forty shared components in Arcane, plus ~40 custom per product, one process.
[Key Learnings]
Adopt standards, customize at the edges
Reinventing default primitives is rarely worth it. shadcn/ui freed us to invest where products differentiated.
Token alignment beats translation layers
Matching Tailwind in Figma killed a whole category of bugs. Single source of truth, end-to-end.
Inheritance is a debt you pay later
Component inheritance compounds debt silently. Next time: reset cleanly before scaling, not patch in flight.
