Invessio
Building a multi-brand design system from zero
Invessio, Yrefy’s digital product suite, had duplicate components, inconsistent UI, and no scalable way to white-label client solutions.
I used Figma and Claude Code to design and ship a token-based, Angular ready design system, adopted by 5 engineering teams, that unified shared components and cut white-labeling from months to hours.
*This page is an overview of the work. Want to see the full case study?*
Invessio, Yrefy’s digital product suite, had duplicate components, inconsistent UI, and no scalable way to white-label client solutions.
I used Figma and Claude Code to design and ship a token-based, Angular ready design system, adopted by 5 engineering teams, that unified shared components and cut white-labeling from months to hours.
*This page is an overview of the work. Want to see the full case study?*
Invessio, Yrefy’s digital product suite, had duplicate components, inconsistent UI, and no scalable way to white-label client solutions.
I used Figma and Claude Code to design and ship a token-based, Angular ready design system, adopted by 5 engineering teams, that unified shared components and cut white-labeling from months to hours.
*This page is an overview of the work. Want to see the full case study?*
One PrimeNG Architecture, 3 Product Themes
One PrimeNG Architecture, 3 Product Themes
One PrimeNG Architecture, 3 Product Themes
Invessio Default Theme
Invessio Default Theme
Primary (blue.500, #163060)
Primary (blue.500, #163060)
Accent (amber.500, #dca519)
Accent (amber.500, #dca519)
Impact
Impact
Primary (blue.500, #1c213f)
Primary (blue.500, #1c213f)
Accent (red.600, #c5143e)
Accent (red.600, #c5143e)
Ignyte
Primary (red.500, #e31f26)
Primary (red.500, #e31f26)
Accent (yellow.300, #f6f080)
Accent (yellow.300, #f6f080)
Process
Different teams, different implementations
Different teams, different implementations
Invessio products were previously built by 3 different teams using inconsistent Material UI implementations, leading to similar industry tools with different visual styles and component structures.
At the same time, prospective customers were beginning to request white-labeled instances with custom branding instead of just slapping their logo on the side-nav.
Invessio products were previously built by 3 different teams using inconsistent Material UI implementations, leading to similar industry tools with different visual styles and component structures.
At the same time, prospective customers were beginning to request white-labeled instances with custom branding instead of just slapping their logo on the side-nav.
Defining the look and feel of an Invessio product
Defining the look and feel of an Invessio product
Defining the look and feel of an Invessio product
I chose PrimeNG to give Invessio products a modern fintech UI while still supporting distinct branding for products like Ignyte, internal tools, and flagship SaaS offerings.
I also selected Geist and Geist Mono as the default typography to create a technical, polished, and trustworthy feel while preserving readability for complex data.
I chose PrimeNG to give Invessio products a modern fintech UI while still supporting distinct branding for products like Ignyte, internal tools, and flagship SaaS offerings.
I also selected Geist and Geist Mono as the default typography to create a technical, polished, and trustworthy feel while preserving readability for complex data.
Behavior, state, and accessibility are all part of the component
Behavior, state, and accessibility are all part of the component
Behavior, state, and accessibility are all part of the component
Responsive Behavior, Not Responsive Scaling
Responsive Behavior, Not Responsive Scaling
Responsive Behavior, Not Responsive Scaling
Approach
Brand-agnostic component logic
Brand-agnostic component logic
I established a three-tier token hierarchy (primitive -> semantic -> component) so brand differences lived above the component layer instead of within.
I also chose deploy-time theming (one theme preset per build) versus runtime theme-switching, favoring simplicity and performance over unnecessary flexibility.
I established a three-tier token hierarchy (primitive -> semantic -> component) so brand differences lived above the component layer instead of within.
I also chose deploy-time theming (one theme preset per build) versus runtime theme-switching, favoring simplicity and performance over unnecessary flexibility.
A theming pipeline anyone can run
A theming pipeline anyone can run
New themes start from the PrimeUI Figma kit, take token edits via the Design Tokens Manager plugin and Claude Code, and export as JSON through the PrimeUI Theme Generator. No bespoke engineering needed.
This takes white-labeling products from being a month-long engineering effort into a request that could be fulfilled in a couple hours.
New themes start from the PrimeUI Figma kit, take token edits via the Design Tokens Manager plugin and Claude Code, and export as JSON through the PrimeUI Theme Generator. No bespoke engineering needed.
This takes white-labeling products from being a month-long engineering effort into a request that could be fulfilled in a couple hours.
Change the tokens, not the components
Change the tokens, not the components
Change the tokens, not the components
Shared Patterns, Specialized Workflows
Shared Patterns, Specialized Workflows
Shared Patterns, Specialized Workflows
Outcomes
99%
faster white-labeling
99%
faster white-labeling
99%
faster white-labeling
0
hard coding
0
hard coding
0
hard coding
5
teams adopted
5
teams adopted
5
teams adopted
40+
engineers onboarded
40+
engineers onboarded
White-labeling products for clients no longer requires manually detaching and editing base styles of Material, a 2 month long effort when simultaneously dedicating resources to feature development. The workflow I set up using Claude Code to edit design tokens and factor in client brand guidelines now takes less than 2 hours.
3 months post-adoption, there have been zero instances of hard-coded color or text values enforced by a stylelint rule in CI.
White-labeling products for clients no longer requires manually detaching and editing base styles of Material, a 2 month long effort when simultaneously dedicating resources to feature development. The workflow I set up using Claude Code to edit design tokens and factor in client brand guidelines now takes less than 2 hours.
3 months post-adoption, there have been zero instances of hard-coded color or text values enforced by a stylelint rule in CI.
White-labeling products for clients no longer requires manually detaching and editing base styles of Material, a 2 month long effort when simultaneously dedicating resources to feature development. The workflow I set up using Claude Code to edit design tokens and factor in client brand guidelines now takes less than 2 hours.
3 months post-adoption, there have been zero instances of hard-coded color or text values enforced by a stylelint rule in CI.
A shared PrimeNG foundation for complex, specialized products
A shared PrimeNG foundation for complex, specialized products
A shared PrimeNG foundation for complex, specialized products.
Say hello
Let's talk
Let's talk
Let's talk
Looking for someone that can drive measurable outcomes, but also values clarity and craft? Get in touch.
Open to full-time roles and fractional assignments, remote or on-site.
Based in Phoenix, AZ - Able to relocate.
Looking for someone that can drive measurable outcomes, but also values clarity and craft? Get in touch.
Open to full-time roles and fractional assignments, remote or on-site.
Based in Phoenix, AZ - Able to relocate.
Made with Framer
© 2026
Made with Framer
© 2026