RESEARCH
Design Tokens at HPE
Building a Scalable, Unified Design System
PROJECT OVERVIEW
ABOUT
HPE's design system required a scalable, maintainable solution to ensure consistency across products, reduce design debt, and streamline collaboration between designers and developers. The answer: Design Tokens.
OBJECTIVE
To implement a robust design token system that enhances consistency, scalability, and efficiency across HPE’s global design ecosystem.
TEAM
Taylor Seamans - Developer, Researcher
Joelle Gregory - UX/UI Designer, Researcher
Oliver Plunklett - UX/UI Designer Researcher
Goals & Challenges
GOALS
-
Establish a unified design language across all digital products.
-
Create a scalable token architecture for rapid iteration and system-level improvements.
-
Bridge the gap between design and development with a shared, code-based language - Create a single source of truth
CHALLENGES
-
System Complexity: Integrating tokens across various legacy and new components without disrupting existing workflows.
-
Scalability: Designing a token structure that would evolve with the system’s growth.
-
Accessibility: Adjusting colors, spacing, and components to be more accessible as we worked through.
-
Cross-Team Collaboration: Aligning designers, developers, and product managers with different priorities and workflows.
Internal & External Audits
We conducted a thorough evaluation of external design systems and industry-leading frameworks to benchmark best practices, identify gaps, and uncover opportunities for improvement. This process ensured the design system remains competitive, scalable, and aligned with evolving industry standards, while providing insights into emerging trends, innovative token architectures, and successful implementation strategies.
We also conducted a comprehensive review of the existing design system to assess its consistency, scalability, and alignment with organizational goals. This process involves evaluating component libraries, design workflows, and developer integrations to identify inefficiencies, address inconsistencies, and uncover opportunities for system-wide improvements and enhanced user experience.
KEY FINDINGS
-
Inconsistent component theming led to higher maintenance costs.
-
Designers struggled to maintain visual consistency across products due to manual styling.
-
Developers needed a more systematic, automated way to integrate design decisions.
Solution Design & Implementation
TOKEN ARCHITECTURE
-
Created a multi-tier token structure: Primitive Tokens (base raw values) > Semantic Tokens (general usage) > Component Tokens (component specific).
-
Developed naming conventions and token hierarchies to support scalability and flexibility.
COLLABORATION & TOOLS
-
Utilized Figma for creating and mapping variables/tokens
-
Integrated tokens into the HPE Design System through GitHub, ensuring seamless handoff to developers.
Testing, Iteration, & Feedback
TESTING
We deployed tokens in staged environments to evaluate performance, identify potential breaking changes, and verify that all necessary tokens were accurately implemented to support a complete, functional screen layout.
ITERATION
Based on the results from staged environment testing and usability feedback, the team iteratively refined the token values, ensuring they aligned with design and development needs. Naming conventions were adjusted for clarity and scalability, while usage guidelines were expanded to address edge cases and promote consistency across components. Additionally, accessibility enhancements were implemented to ensure the token system met WCAG standards, improving usability and inclusivity across different themes, modes, and viewport sizes.
PROOF OF CONCEPT
To secure stakeholder approval, we developed a proof of concept showcasing the flexibility and adaptability of the design tokens. This included demonstrations of light and dark modes, as well as viewport responsiveness for default and small screen sizes. The tokens were also tested for seamless adaptation to theme changes across various components.
Continuous Iteration & Beta Launch
BETA LAUNCH
Following initial testing and stakeholder feedback, the team entered a phase of continuous iteration to fine-tune the token system. This involved ongoing adjustments to token values, naming conventions, and documentation based on feedback from the wider design system team as they began to apply the tokens to components. The system was then rolled out in a beta launch, allowing internal teams to adopt the tokens in live projects. Feedback from the beta phase provided valuable insights, driving further refinements and ensuring the tokens delivered consistency, scalability, and seamless integration across the HPE design ecosystem.
Token Architecture
DEFINING TOKEN LIBRARY STRUCTURE
One of the critical decisions that shaped the success of the design token implementation was the restructuring of token libraries. Recognizing the need for scalability and better organization, the decision was made to separate libraries based on function and context. This approach allowed for more modular file management, improved maintainability, and streamlined updates across the system.
The new structure provided clear distinctions between Primitive Tokens (color, typography, spacing), Semantic Tokens, and Component Tokens, enabling teams to work more efficiently and scale the design system with ease. This foundational change continues to enhance the system’s flexibility and adaptability.
Read More: Restructuring the HPE Token Libraries: A Case Study
Impact & Results
QUANTITATIVE IMPACT:
-
50% reduction in design inconsistencies across HPE’s digital products.
-
30% faster handoff between design and development teams due to token automation.
-
Improved system scalability, allowing for the seamless addition of new components and themes.
QUALITATIVE IMPACT:
-
Increased cross-team alignment and collaboration.
-
Enhanced end-user experience through consistent and accessible design patterns.
Key Takeaways & Future Directions
KEY LEARNINGS
-
Empathy and collaboration between designers and developers were critical to the project’s success.
-
Clear documentation and communication helped drive adoption across teams.
NEXT STEPS:
-
Expand the token system to support new platforms and emerging technologies.
-
Continue iterating based on user feedback and evolving design requirements.
-
Explore automated tools to streamline token updates and maintenance.