Design system for a platform in build.
Architecting the foundations, components, and governance for an in-build SaaS platform redesign so that the first ship is fast, and the second is faster.
Role
Design leadership · System architecture · Governance
Scope
Design system · Multi-surface SaaS platform
Status
In build · launching 2026
THE BRIEF
Build the system before the surface.
The platform was being rebuilt. New product surface, new flows, new AI. The temptation in that situation is to design page by page. The trap: by the time you've shipped a dozen pages, you've created a dozen versions of every button, input, and layout pattern, and the next year is spent on cleanup.
I designed the architecture, governance model, and engineering brief that scoped this for build. The system now runs across the platform with a code-enforced human approval gate.
SCOPE OF THE SYSTEM
Not shipped yet. Already at scale.
Real numbers about the system itself. The product launches in 2026
400+
Components architected
FROM PRIMITIVES TO PATTERNS
From idea to publish-ready content pack. The old cycle measured in days now measured in hours.
100+
Tokens defined
COLOR · TYPE · SPACE · MOTION
Semantic tokens that map to brand, theme, and surface. Refactor once, propagate everywhere.
5+
Surfaces in scope
ONE SYSTEM, MANY SURFACES
Admin, mobile and partner, member portal. Designed against one source of truth.
ALSO IN THE WORK
4
10
Page patterns
System tiers
1
1
Contribution model
Naming convention spec
01 · AUDIT
Before designing anything new, I mapped the existing surface. Every button variant, every input style, every navigation pattern, every layout. The point of an audit isn't to judge the past — it's to make the patterns visible so the system has somewhere honest to start.
What the surface looked like before.
02 · ARCHITECT
Foundations first, components second.
The system is layered. Tokens at the base color, type, spacing, motion as a single source of truth. Components built from tokens, so a token change propagates everywhere. Patterns built from components, so the team composes flows from a known vocabulary. The layers exist so the system can evolve without breaking.
Page header, stat row, two-column layout, data table — defined once, reused everywhere.
A new dashboard like this takes a day with the system. Without it, a month.
COMPONENTS COMPOSED
TOKENS IN USE
Navigation, cards, inputs, buttons, badges, tables, charts — all from the component layer.
Color, type, spacing, motion — every value on this screen maps back to a token.
TIME TO BUILD
PATTERNS APPLIED
FROM COMPONENTS TO A REAL SCREEN
Foundations first, components second.
A generic SaaS dashboard built entirely from the system. Every element on this screen, every color, spacing unit, component comes from the token and component layers above. The system's job is to make this screen take a day, not a month.
03 · GOVERN
Rules that keep the system trustworthy.
A design system that nobody trusts gets ignored. A design system that everyone can change gets chaotic. Governance is the middle path. Clear ownership, a contribution model, naming and versioning conventions, and a documented way to retire what stops working.
04 · ROLL OUT
From a Figma library to a daily tool.
A design system isn't done when the components exist. It's done when designers and engineers reach for it without thinking. The roll out plan is the difference. Documentation, adoption rituals, office hours, deprecation cadence, and feedback loops are what turn a library into a practice.
THE BIGGER WIN
The system was built to outlive my involvement. That's the point.
MADE WITH THE TEAM
Systems are a team sport.
A design system at platform scale is not a solo act. I led the architecture, governance model, and rollout strategy but the work shipped because of the designers, engineers, and partners who contributed components, pressure-tested the patterns, and helped the system survive contact with real product work.
What I owned: the system architecture, the four-tier model, the governance and contribution rules, the rollout plan, and design leadership through the build. What the team owned: pattern proposals, component implementations, engineering integration, and the lived-in detail that only comes from people using the system every day.
LED BY
Janco Theron — system architecture, governance, rollout strategy, design leadership.
DESIGN PARTNERS
Component contributors, pattern reviewers, surface designers who pressure-tested the system in real work.
ENGINEERING
Token integration, component implementation, the build that turned Figma files into production code.
PRODUCT + LEADERSHIP
Partnership on scope, surface prioritization, and the discipline to ship in tiers rather than all at once.