Audited what each acquisition brought
If the acquired company had a design system, we mapped it. If not, we structured one — then planned adoption from their real product surfaces, not from a blank template.
FNZ · 2021 - 2023
A design system for acquisitions.
How FNZ's acquisitions adopt one design language — in months, not years.
FNZ
Enterprise WealthTech
Every acquisition arrived with a different interface — and adoption took years.
FNZ's growth model meant buying companies and bringing their products into the platform. Each one had its own visual language — or no system at all. The old process was slow: workshops with every acquired team, long alignment cycles, and months before anything looked or felt like FNZ. Average adoption took around 27 months. That was the bottleneck — not ambition, but how we onboarded design language after a deal closed.
Before
Workshop-heavy onboarding
Long cycles with acquired product teams before the FNZ language started to land in live interfaces.
Constraint
Technology does not flip overnight
The stack could not migrate 100% on day one — so the interface had to move first, as close to FNZ as possible while backends caught up.
After
Repeatable adoption model
Audit, tokenize, adopt in layers — cutting average onboarding from 27 months to 6 without forcing a big-bang rewrite.
My contribution
I built the three layers, ran the rollout across squads, and made adoption something every team could measure.
Not a Figma library on a shelf — an adoption model I rolled out across squads and measured in design, engineering, and product, for acquired companies and white-label clients alike.
Built three library layers
Tokens first for maximum impact, then standalone components, then page-level patterns — so teams could adopt progressively without stopping delivery.
Made adoption measurable
Tracked rollout in design, development, and product — a holistic view of what was actually shipping, not just what was documented.
Three libraries
Tokens first. Components next. Patterns when the page needs to standardize.
I structured the layers to double as adoption checkpoints. Any squad could see whether a product sat at token level, component level, pattern level, or full system maturity. That made rollout legible — design, engineering, and product read the same stage and knew what came next.
01 · Tokens
Highest-impact layer
Typography, color, spacing, radius, elevation, motion, and icon rules — the semantic foundation. Adopting tokens first made every screen feel closer to FNZ before components were rebuilt.
02 · Components
Loose, reusable pieces
Buttons, inputs, tables, navigation elements — standalone building blocks teams could drop into existing products without waiting for full page templates.
03 · Patterns
Page-level standardization
Dashboards, onboarding flows, settings, data tables — composed patterns that made whole surfaces consistent and sped up white-label delivery once the model was lean.
04 · Templates
White-label ready
Once adoption was streamlined, pre-built white-label models became practical — new clients and acquisitions could start from proven structures instead of from zero.
01 · Audit
Map what the acquisition already has — or treat it as day zero.
Audit is faster when the acquired company already runs a design system. We inventory tokens, components, and patterns, compare them against FNZ foundations, and build a gap map for gradual adoption.
When there is no system, we do not pretend one exists. We audit the live product surfaces, extract recurring UI decisions, and structure a net-new foundation — then adopt as if starting from zero, but anchored in what users already see in production.
Relative audit effort — illustrative, not a fixed timeline.
- Typography scale
- Font weights
- Line height
- Letter spacing
- Color primitives
- Semantic color
- Spacing scale
- Grid & layout
- Border radius
- Border width
- Elevation & shadow
- Motion & duration
- Icon size & stroke
- Opacity & focus
- Breakpoints
- Z-index layers
Token adoption propagates widest — highest leverage per change.
02 · Tokenize
Align the language before rebuilding every component.
Tokenize is the fastest path to visual coherence. Typography, color, spacing, radius, elevation, motion, icons, breakpoints — semantic tokens mapped to roles, not one-off values on each screen.
On acquisitions with an existing system, we mapped their tokens to FNZ equivalents where possible. Without a system, we defined the token layer first so every subsequent component inherited the same rules — web and mobile, acquired product and white-label client.
03 · Inject
Bring the FNZ interface into existing products — one surface at a time.
Inject is not a big-bang rewrite. We introduce FNZ navigation, forms, tables, and patterns inside acquired interfaces while legacy areas still run underneath. Users see progress in weeks; technology migration can follow over months.
Each micro-frontend squad shipped what its architecture allowed — some took new UI slices inside the old shell, others needed wrapper-level changes. I kept the principle constant: inject the FNZ interface into theirs until the product reads as FNZ, without blocking teams that still had clients to serve.
New system surfaces ship inside the existing product frame.
04 · Measure
Adoption you can see — in design files, Storybook, and live product.
The three library layers are also the yardstick. We tracked whether a product had reached token adoption, component adoption, pattern adoption, or full system maturity — and whether design, engineering, and product were aligned on the same stage.
The maturity model replaced guesswork with a shared vocabulary. PMs saw rollout progress, designers knew which layer to target next, and engineers measured Storybook coverage against what was still legacy in prod. Each squad learned to run its own adoption without me in the loop — the system outlived my involvement in it.
Simple
Token-level adoption
~32% of UI on FNZ tokens. Fast first win — color, type, and spacing aligned.
Medium
Tokens + components
~62% adopted. Reusable buttons, inputs, and tables replacing one-offs.
Full
Tokens + components + patterns
~92% adopted. Page patterns and templates — ready for white-label scale.
Illustrative maturity model — tracked per product in design, dev, and PM tooling.
The charts
Adoption speed and delivery output had to become visible.
The design system changed how fast acquired products could adopt the FNZ language — and how many projects the team could ship once the model was repeatable. Not a technology swap overnight; a faster path to visual and structural alignment.
Impact
Three layers to adopt. One model to measure. A platform that could scale.
The libraries were not only documentation — they were how we monitored rollout. A product at token level looked different from one at pattern level, and that clarity is what took adoption from 27 months to 6.
27 → 6 mo
Adoption per acquisition
Average time for an acquired product to reach FNZ design language maturity — from workshop-heavy onboarding to a repeatable rollout model.
746%
Delivery output
Relative increase in projects delivered once the system, templates, and adoption playbook scaled across products.
Holistic
Design · Dev · Product
Adoption tracked in Figma libraries, Storybook coverage, and live product surfaces — one view of progress, not three conflicting stories.
01 · Token level
First signal of adoption
Color, type, spacing, and motion aligned — the fastest path to visual coherence. When tokens land, every screen starts to read as FNZ before a single component is rebuilt.
02 · Component level
Reusable UI in production
Buttons, inputs, tables, and navigation shipping from the shared library — replacing one-offs in acquired products and cutting rework for every new feature.
03 · Pattern level
Whole pages standardized
Dashboards, settings, and flows composed from proven patterns — not redesigned screen by screen. The product starts to feel like one platform, not a patchwork of acquisitions.
04 · System level
White-label ready
Templates and full maturity — new clients and acquisitions onboard from a proven base instead of starting from zero. This is where rollout speed compounds.
27 → 6 moDesign language adoption
746%Increase in deliveries
3 layersTokens, components, patterns
4 stagesToken → component → pattern → system