Design System Rebuild
A ground-up rebuild of the design system behind Sherpany's board meeting platform, timed to a company rebrand.
Client
Sherpany
Year
Jan 2023 – ongoing
Role
Design Systems Designer. Owner of the system. Bridge between design and engineering.
Stack
Figma · Tokens Studio · Style Dictionary · Storybook · Supernova.io
Context
Sherpany's product had a design library, but it wasn't really a system. Four years of decisions had stacked up inside a single Figma file imported from Sketch — design system primitives and product-specific components living in the same library, rules tangled with feature logic. Components had survived the Sketch-to-Figma migration but hadn't kept up with Figma's evolution: broken overrides, variant structures too large to maintain, specs that no longer matched what shipped.
Problem
I was hired in January 2023 to prepare the system for a company-wide rebrand landing in May 2024. That was the brief. The real problem underneath it was bigger: the design library and production had drifted far enough apart that the same component often had different specs in each. Rebranding on top of that foundation would have shipped the drift forward, not fixed it.
Approach
The rebuild ran in four phases, each sequenced to ship value without blocking the squads working toward the rebrand deadline. Phase one was typography and icons. Highest visual impact, lowest technical risk, the product got an immediate brand signal while the infrastructure work was still underway. Phase two brought in the global colour system and light theme, completing the visible transformation and laying the semantic token layer that turns future rebrands into a values-only change. Phases three and four moved into components: high-frequency elements first like buttons, inputs, the patterns touching most workflows; then the complex systems: navigation, tables, filtering. Each phase kept the squads unblocked. That was the constraint the sequencing was built around.
The first decision was whether to refactor or rebuild.The first decision was whether to refactor or rebuild. Refactoring felt safer but the legacy was deep enough that fixing it in place would have taken longer than starting over. With one window to get it right before the rebrand landed, I chose to rebuild. The hardest part wasn't the work itself. It was making that call early in the role, before I'd earned the trust to make it.
The second decision shaped everything that followed. When I built the token architecture, I didn't start from a design-led ideal and ask engineering to adopt it. I started from what production actually used. Tokens mirrored the code, not the other way around. Instead of handing engineering a new language to learn, design adopted the existing one and gave it structure. That closed the gap at the foundation rather than patching it at the component level.
The third piece was governance. A new system without new ways of working would drift again within a year. I introduced a branching workflow in Figma, locked the master and production files behind review, and required merges to go through a design review step. The goal was making consistency the default path, not the disciplined one.
Work
I separated the design system from the product library so each had a clear boundary and a clear owner. The system holds primitives, tokens, and core components. The product library holds feature-specific compositions built from them.
The token system was built from scratch in Tokens Studio, piped through Style Dictionary, and aligned one-to-one with production variables in Storybook. Semantic tokens sit between primitives and components so when the rebrand lands, it changes values at the semantic layer without touching a single component.
Outcome
| Metric | Before | After |
|---|---|---|
| Components in sync with code | ~40% | 100% |
| Components | 40 | 54 |
| Token layers | 0 | 3 (primitive · semantic · component) |
| Figma libraries | 1 mixed | 4 (core + rays + specialized + squads) |
| Rebrand scope | Full rewrite | Semantic layer only |
| Conflicts | 34 | 0 |
The team stopped debating whether the design file or the code was right because they now agree by default. The rebrand that triggered all of this became a semantic-layer change instead of a library-wide rewrite.
The design system introduced and driven by Francisco unified our app’s visual language, improved usability, sped up development, and made fixes scalable across the entire product.
Daniel Vieira · Squad Lead · Atlas · Sherpany
Reflection
Rebuilding a system is a political project as much as a technical one. The token decision, matching production instead of leading it — was the one that earned trust fastest, because engineering saw design solving a shared problem instead of creating a new one.
Images by @stefano-gemmiti 👍
Other Projects
