Sosafe
Used AI to migrate the entire system from primitive to semantic tokens with Claude and the new documentation I created in Supernova. While being an AI enabler by building a new workflow with product teams to allow them to shift their workflow from design directly into code.
Used AI to migrate the entire system from primitive to semantic tokens with Claude and the new documentation I created in Supernova. While being an AI enabler by building a new workflow with product teams to allow them to shift their workflow from design directly into code.
Used AI to migrate the entire system from primitive to semantic tokens with Claude and the new documentation I created in Supernova. While being an AI enabler by building a new workflow with product teams to allow them to shift their workflow from design directly into code.
SoSafe is a human-centered cybersecurity platform that trains employees to recognize and respond to threats through gamified microlearning and phishing simulations. Its approach is grounded in behavioral science to build strong security cultures, meeting standards such as ISO 27001 and GDPR.
Context
I joined the team during a period of rapid growth, with no mature Design System or prior culture of working with one in place. I collaborated cross-functionally with design and engineering to lay the foundations of the system tokens, components, governance, and IA implementation.
Objective
Restructure the Design System's token architecture and establish clear governance processes, with a strong focus on IA implementation, so it could operate as a true business enabler, not just a visual toolkit. Turn the system into the foundation for the rebrand and the product's ongoing evolution, driving consistency, speed, and measurable impact across design and engineering teams.
Solution
Designed a token architecture (primitive → semantic) on top of Mantine, defined the governance model and contribution processes, and leveraged existing libraries (Mantine, Tabler Icons, Apache Charts) to accelerate delivery instead of starting from scratch. Also integrated AI (Supernova + Claude + Figma Make) directly into the Design System's own workflow, both to migrate tokens and to enable code-level prototyping for design teams.
SoSafe is a human-centered cybersecurity platform that trains employees to recognize and respond to threats through gamified microlearning and phishing simulations. Its approach is grounded in behavioral science to build strong security cultures, meeting standards such as ISO 27001 and GDPR.
Context
I joined the team during a period of rapid growth, with no mature Design System or prior culture of working with one in place. I collaborated cross-functionally with design and engineering to lay the foundations of the system tokens, components, governance, and IA implementation.
Objective
Restructure the Design System's token architecture and establish clear governance processes, with a strong focus on IA implementation, so it could operate as a true business enabler, not just a visual toolkit. Turn the system into the foundation for the rebrand and the product's ongoing evolution, driving consistency, speed, and measurable impact across design and engineering teams.
Solution
Designed a token architecture (primitive → semantic) on top of Mantine, defined the governance model and contribution processes, and leveraged existing libraries (Mantine, Tabler Icons, Apache Charts) to accelerate delivery instead of starting from scratch. Also integrated AI (Supernova + Claude + Figma Make) directly into the Design System's own workflow, both to migrate tokens and to enable code-level prototyping for design teams.
SoSafe is a human-centered cybersecurity platform that trains employees to recognize and respond to threats through gamified microlearning and phishing simulations. Its approach is grounded in behavioral science to build strong security cultures, meeting standards such as ISO 27001 and GDPR.
Context
I joined the team during a period of rapid growth, with no mature Design System or prior culture of working with one in place. I collaborated cross-functionally with design and engineering to lay the foundations of the system tokens, components, governance, and IA implementation.
Objective
Restructure the Design System's token architecture and establish clear governance processes, with a strong focus on IA implementation, so it could operate as a true business enabler, not just a visual toolkit. Turn the system into the foundation for the rebrand and the product's ongoing evolution, driving consistency, speed, and measurable impact across design and engineering teams.
Solution
Designed a token architecture (primitive → semantic) on top of Mantine, defined the governance model and contribution processes, and leveraged existing libraries (Mantine, Tabler Icons, Apache Charts) to accelerate delivery instead of starting from scratch. Also integrated AI (Supernova + Claude + Figma Make) directly into the Design System's own workflow, both to migrate tokens and to enable code-level prototyping for design teams.
AI-assisted design systems: from token migration to AI-native workflows
Conducted workshops and meetings to align stakeholders on the objectives and benefits of the design system.
Advocated for cross-functional collaboration to ensure a shared vision and understanding of design goals.
Facilitated communication channels to foster ongoing alignment and feedback loops.
Established clear roles and responsibilities to promote accountability and ownership.
Leveraged data to demonstrate the impact of the Design System on business outcomes.
Implemented strategies to address stakeholder concerns and maintain momentum towards shared objectives.
Token Strategy: Rebranding under a 2-month deadline with no existing token layer
Leveraged primitive tokens and Mantine’s theming engine to shift the entire interface’s primary color from turquoise blue to a deeper green without rebuilding component styles from scratch.
Delivered a fully functional, on-brand MVP within the deadline while keeping the system flexible for future palette changes.
Prioritized speed without sacrificing scalability, laying the groundwork for the semantic token layer that followed.
Made trade-off calls on where to allow exceptions versus enforce consistency under time pressure.
Coordinated with product and brand stakeholders to validate the new palette against the existing design language.
Before
After
Building a complete semantic token layer at the pace the business needed
Defined semantic tokens for color, typography, and shadows across the entire product.
Leveraged existing libraries (Mantine, Tabler Icons, Apache Charts) instead of building from scratch, accelerating delivery without compromising quality.
Established a consistent naming and structure convention to keep the token system scalable as the product grew.
Balanced “build vs. leverage” decisions to maximize team velocity.
Set the technical foundation that made later token migration and AI-assisted workflows possible.
Restructuring navigation and layout to fix usability, not just visuals
Led a multi-month restructuring of the product’s navigation and information architecture.
Ensured every page was properly indexed and structured for usability, beyond surface-level visual changes.
Redesigned the overall layout to improve navigation flow between pages and give content more breathing room.
Collaborated cross-functionally with product and engineering to validate the new architecture against real usage patterns.
Used the Design System as the single source of truth to keep the new structure consistent across the product.
Selected works
Restructuring navigation and layout to fix usability, not just visuals
Led a multi-month restructuring of the product’s navigation and information architecture.
Ensured every page was properly indexed and structured for usability, beyond surface-level visual changes.
Redesigned the overall layout to improve navigation flow between pages and give content more breathing room.
Collaborated cross-functionally with product and engineering to validate the new architecture against real usage patterns.
Used the Design System as the single source of truth to keep the new structure consistent across the product.
Building a complete semantic token layer at the pace the business neededengagement, Design Ops and mentoring
Defined semantic tokens for color, typography, and shadows across the entire product.
Leveraged existing libraries (Mantine, Tabler Icons, Apache Charts) instead of building from scratch, accelerating delivery without compromising quality.
Established a consistent naming and structure convention to keep the token system scalable as the product grew.
Balanced “build vs. leverage” decisions to maximize team velocity.
Set the technical foundation that made later token migration and AI-assisted workflows possible.
Token Strategy: Rebranding under a 2-month deadline with no existing token layer
Leveraged primitive tokens and Mantine’s theming engine to shift the entire interface’s primary color from turquoise blue to a deeper green without rebuilding component styles from scratch.
Delivered a fully functional, on-brand MVP within the deadline while keeping the system flexible for future palette changes.
Prioritized speed without sacrificing scalability, laying the groundwork for the semantic token layer that followed.
Made trade-off calls on where to allow exceptions versus enforce consistency under time pressure.
Coordinated with product and brand stakeholders to validate the new palette against the existing design language.
Before
After
AI-assisted design systems: from token migration to AI-native workflows
Conducted workshops and meetings to align stakeholders on the objectives and benefits of the design system.
Advocated for cross-functional collaboration to ensure a shared vision and understanding of design goals.
Facilitated communication channels to foster ongoing alignment and feedback loops.
Established clear roles and responsibilities to promote accountability and ownership.
Leveraged data to demonstrate the impact of the Design System on business outcomes.
Implemented strategies to address stakeholder concerns and maintain momentum towards shared objectives.
Restructuring navigation and layout to fix usability, not just visuals
Restructuring navigation and layout to fix usability, not just visuals
Led a multi-month restructuring of the product’s navigation and information architecture.
Ensured every page was properly indexed and structured for usability, beyond surface-level visual changes.
Redesigned the overall layout to improve navigation flow between pages and give content more breathing room.
Collaborated cross-functionally with product and engineering to validate the new architecture against real usage patterns.
Used the Design System as the single source of truth to keep the new structure consistent across the product.
Building a complete semantic token layer at the pace the business needed
Building a complete semantic token layer at the pace the business needed
Defined semantic tokens for color, typography, and shadows across the entire product.
Leveraged existing libraries (Mantine, Tabler Icons, Apache Charts) instead of building from scratch, accelerating delivery without compromising quality.
Established a consistent naming and structure convention to keep the token system scalable as the product grew.
Balanced “build vs. leverage” decisions to maximize team velocity.
Set the technical foundation that made later token migration and AI-assisted workflows possible.
Token Strategy: Rebranding under a 2-month deadline with no existing token layer
Token Strategy: Rebranding under a 2-month deadline with no existing token layer
Leveraged primitive tokens and Mantine’s theming engine to shift the entire interface’s primary color from turquoise blue to a deeper green without rebuilding component styles from scratch.
Delivered a fully functional, on-brand MVP within the deadline while keeping the system flexible for future palette changes.
Prioritized speed without sacrificing scalability, laying the groundwork for the semantic token layer that followed.
Made trade-off calls on where to allow exceptions versus enforce consistency under time pressure.
Coordinated with product and brand stakeholders to validate the new palette against the existing design language.
Before
After
AI-assisted design systems: from token migration to AI-native workflows
AI-assisted design systems: from token migration to AI-native workflows
Conducted workshops and meetings to align stakeholders on the objectives and benefits of the design system.
Advocated for cross-functional collaboration to ensure a shared vision and understanding of design goals.
Facilitated communication channels to foster ongoing alignment and feedback loops.
Established clear roles and responsibilities to promote accountability and ownership.
Leveraged data to demonstrate the impact of the Design System on business outcomes.
Implemented strategies to address stakeholder concerns and maintain momentum towards shared objectives.
Wait! Before you go, I have some free resources for you :)
Wait! Before you go, I have some free resources for you :)
Wait! Before you go, I have some free resources for you :)
Selected works
Selected works