ONE Design System
Helped optimize and refine a multi-brand design system, supporting component migration and ensuring quality across twelve brands.
Date
2024
Role
Design System Designer
Client
Telefónica Germany
Situation
Telefónica Germany operates a multi-brand design system called ONE, serving twelve distinct brands from a single, shared design foundation. The system relies on a 3-tier token architecture that enables each brand to maintain its own visual identity — covering surface colors, text styles, borders, icons, page layouts, and elevation — while sharing a common component library.
When I joined the team, the design system was at a pivotal moment. Figma had introduced Variables as a native feature, opening up the opportunity to replace the existing token workflow with a more integrated, maintainable approach. At the same time, a growing number of components needed refinement and migration to keep up with evolving brand requirements. UX and UI teams across the organization relied on the design system daily, but inconsistencies between components and gaps in whitelabel flexibility were creating friction in their workflows.
Situation
Telefónica Germany operates a multi-brand design system called ONE, serving twelve distinct brands from a single, shared design foundation. The system relies on a 3-tier token architecture that enables each brand to maintain its own visual identity — covering surface colors, text styles, borders, icons, page layouts, and elevation — while sharing a common component library.
When I joined the team, the design system was at a pivotal moment. Figma had introduced Variables as a native feature, opening up the opportunity to replace the existing token workflow with a more integrated, maintainable approach. At the same time, a growing number of components needed refinement and migration to keep up with evolving brand requirements. UX and UI teams across the organization relied on the design system daily, but inconsistencies between components and gaps in whitelabel flexibility were creating friction in their workflows.
Situation
Telefónica Germany operates a multi-brand design system called ONE, serving twelve distinct brands from a single, shared design foundation. The system relies on a 3-tier token architecture that enables each brand to maintain its own visual identity — covering surface colors, text styles, borders, icons, page layouts, and elevation — while sharing a common component library.
When I joined the team, the design system was at a pivotal moment. Figma had introduced Variables as a native feature, opening up the opportunity to replace the existing token workflow with a more integrated, maintainable approach. At the same time, a growing number of components needed refinement and migration to keep up with evolving brand requirements. UX and UI teams across the organization relied on the design system daily, but inconsistencies between components and gaps in whitelabel flexibility were creating friction in their workflows.
Task
My role as Design System Designer was to help drive the system's next evolution. Specifically, I was responsible for:
Component migration & optimization: Reviewing, refactoring, and upgrading existing components to meet current quality standards and whitelabel requirements across all twelve brands.
Token architecture refinement: Streamlining the alias-level token structure to improve flexibility and reduce complexity for brand-specific customization.
Figma Variables integration: Preparing and transitioning the design system to leverage Figma's native Variables, generated from the existing token sets, to establish a single source of truth between design and development.
Cross-team support: Acting as a hands-on partner for UX and UI teams — building and adjusting components based on their feedback, resolving implementation questions, and ensuring consistent application of the design system across projects.
Task
My role as Design System Designer was to help drive the system's next evolution. Specifically, I was responsible for:
Component migration & optimization: Reviewing, refactoring, and upgrading existing components to meet current quality standards and whitelabel requirements across all twelve brands.
Token architecture refinement: Streamlining the alias-level token structure to improve flexibility and reduce complexity for brand-specific customization.
Figma Variables integration: Preparing and transitioning the design system to leverage Figma's native Variables, generated from the existing token sets, to establish a single source of truth between design and development.
Cross-team support: Acting as a hands-on partner for UX and UI teams — building and adjusting components based on their feedback, resolving implementation questions, and ensuring consistent application of the design system across projects.
Task
My role as Design System Designer was to help drive the system's next evolution. Specifically, I was responsible for:
Component migration & optimization: Reviewing, refactoring, and upgrading existing components to meet current quality standards and whitelabel requirements across all twelve brands.
Token architecture refinement: Streamlining the alias-level token structure to improve flexibility and reduce complexity for brand-specific customization.
Figma Variables integration: Preparing and transitioning the design system to leverage Figma's native Variables, generated from the existing token sets, to establish a single source of truth between design and development.
Cross-team support: Acting as a hands-on partner for UX and UI teams — building and adjusting components based on their feedback, resolving implementation questions, and ensuring consistent application of the design system across projects.
Action
I embedded myself in the team's daily workflows and took a structured, collaborative approach:
Auditing & prioritizing components I assessed the existing component library to identify inconsistencies, outdated patterns, and gaps in multi-brand support. This helped the team focus migration efforts where the impact was greatest.
Refactoring the token structure I worked on streamlining the alias-level tokens — the layer that connects raw design values to semantic, brand-aware usage. The goal was to make the whitelabel mechanism more predictable and easier to extend when onboarding new brands or updating existing ones.
Building the Figma Variables foundation A central initiative was translating the existing token architecture into Figma's native Variables system. This meant mapping token hierarchies to Figma's modes and collections, testing how components behaved across brand themes, and iterating until the setup was reliable and scalable.
Partnering with product teams Rather than working in isolation, I actively supported UX and UI designers in applying the design system. This included building new components based on their requirements, optimizing existing ones based on real-world usage feedback, and helping teams navigate whitelabel edge cases.
Action
I embedded myself in the team's daily workflows and took a structured, collaborative approach:
Auditing & prioritizing components I assessed the existing component library to identify inconsistencies, outdated patterns, and gaps in multi-brand support. This helped the team focus migration efforts where the impact was greatest.
Refactoring the token structure I worked on streamlining the alias-level tokens — the layer that connects raw design values to semantic, brand-aware usage. The goal was to make the whitelabel mechanism more predictable and easier to extend when onboarding new brands or updating existing ones.
Building the Figma Variables foundation A central initiative was translating the existing token architecture into Figma's native Variables system. This meant mapping token hierarchies to Figma's modes and collections, testing how components behaved across brand themes, and iterating until the setup was reliable and scalable.
Partnering with product teams Rather than working in isolation, I actively supported UX and UI designers in applying the design system. This included building new components based on their requirements, optimizing existing ones based on real-world usage feedback, and helping teams navigate whitelabel edge cases.
Action
I embedded myself in the team's daily workflows and took a structured, collaborative approach:
Auditing & prioritizing components I assessed the existing component library to identify inconsistencies, outdated patterns, and gaps in multi-brand support. This helped the team focus migration efforts where the impact was greatest.
Refactoring the token structure I worked on streamlining the alias-level tokens — the layer that connects raw design values to semantic, brand-aware usage. The goal was to make the whitelabel mechanism more predictable and easier to extend when onboarding new brands or updating existing ones.
Building the Figma Variables foundation A central initiative was translating the existing token architecture into Figma's native Variables system. This meant mapping token hierarchies to Figma's modes and collections, testing how components behaved across brand themes, and iterating until the setup was reliable and scalable.
Partnering with product teams Rather than working in isolation, I actively supported UX and UI designers in applying the design system. This included building new components based on their requirements, optimizing existing ones based on real-world usage feedback, and helping teams navigate whitelabel edge cases.
Result
Through these efforts, the design system became more robust, flexible, and easier to use:
Improved consistency across twelve brands by migrating and refining shared components to a higher quality standard.
Reduced complexity in the token architecture, making brand-level customization more straightforward for both designers and developers.
Established a single source of truth by integrating Figma Variables, bridging the gap between design and development workflows.
Strengthened adoption by actively supporting product teams, reducing friction and building trust in the design system as a reliable foundation.
These improvements laid the groundwork for the system's next chapter — internally called "TWO" — a comprehensive multi-brand Figma library that enables faster transitions from wireframe to branded UI and smoother development handoff.
Result
Through these efforts, the design system became more robust, flexible, and easier to use:
Improved consistency across twelve brands by migrating and refining shared components to a higher quality standard.
Reduced complexity in the token architecture, making brand-level customization more straightforward for both designers and developers.
Established a single source of truth by integrating Figma Variables, bridging the gap between design and development workflows.
Strengthened adoption by actively supporting product teams, reducing friction and building trust in the design system as a reliable foundation.
These improvements laid the groundwork for the system's next chapter — internally called "TWO" — a comprehensive multi-brand Figma library that enables faster transitions from wireframe to branded UI and smoother development handoff.
Result
Through these efforts, the design system became more robust, flexible, and easier to use:
Improved consistency across twelve brands by migrating and refining shared components to a higher quality standard.
Reduced complexity in the token architecture, making brand-level customization more straightforward for both designers and developers.
Established a single source of truth by integrating Figma Variables, bridging the gap between design and development workflows.
Strengthened adoption by actively supporting product teams, reducing friction and building trust in the design system as a reliable foundation.
These improvements laid the groundwork for the system's next chapter — internally called "TWO" — a comprehensive multi-brand Figma library that enables faster transitions from wireframe to branded UI and smoother development handoff.