Three versions of HPE theme driven by design tokens, meaning a team can upgrade to the latest version simply by pointing to the desired package version number.
A design token has a value for both light and dark mode, enabling a user to determine their preference or base it off of the operating system mode.
Context
Prior to design tokens, most product teams had only partial brand alignment because they build in independent tech stacks from the HPE Design System. This meant any branding change (color, typography, interaction state, etc.) required a manual update from each of those teams.
Multiply the thousands of micro design decisions across dozens of globally distributed teams and years of product changes, and the gap between design and shipped product can become significant.
A diagram of the HPE product ecosystem prior to design tokens with most teams requiring manual updates to stay on brand.
Process
Compatibility with other tools by aligning to established and emerging industry standards.
I proposed we commit to the Design Token Community Group (DTCG), a spec and emerging standard for how to store design token data in JSON format. Tools like Figma and Style Dictionary were already building against it, allowing us to more efficiently and effectively integrate with them.
For naming, instead of biasing the architecture towards a specific technology, our tokens would align to HTML and CSS naming wherever possible.
Asking engineers to learn a new naming language — particularly across a global team where English isn't everyone's first language — was effort we could avoid.
Architecting a taxonomy that provides user clarity and confidence that they’re using the right token.
Using HTML and CSS names for components, states, and properties provides a 1:1 pairing between token and CSS style.
Separating state and dimension properties meant that a UI element only needs 2 CSS classes to be fully styled across all interactions.
Building a scalable pipeline to enable design and engineering teams across various tech stacks to achieve and maintain 100% alignment.
Github as the single source of truth, NPM as the versioned package for engineers, and Figma as the equivalent token delivery system to designers. This pipeline was validated against projects built with Tailwind, Material, Angular, Grommet, Stencil, Figma, and more.
Optimizing the designer experience while maintaining source code structure.
The deeply nested structure of design token files resulted in a designer experience that created ambiguity and increased scrolling in Figma when only the last part of the token name was visible in a list. Testing with product designers directly confirmed this was a confusing, inefficient workflow.
I wrote a custom transform from source code to Figma that flattened token names. This increased clarity and efficiency in designer workflows while maintaining source code alignment with DTCG standards.
Outcome
Three versions of HPE theme driven fully by design tokens, meaning a team can update from one version to another simply by pointing to the desired version number.
The system has been validated across three major theme versions — including full dark mode support and HPE’s 2025 corporate rebrand — with tokens resolving consistently across CSS, Grommet (HPE's React component library), and Figma simultaneously.
Adoption has grown to span top priority product organizations, including key acquisitions and teams previously outside of HPE's design system ecosystem entirely. For acquisitions and legacy products, the token system provides a clear migration path to brand alignment without requiring a full platform rewrite.
Next steps
In a future enhancement, I'd prioritize separating token storage from the taxonomy structure. Right now they're coupled which works, but creates a slightly brittle enforcement of the token taxonomy (it’s easy to input a token at the wrong level of the hierarchy when you’re working in a deeply nested JSON file). A dedicated translation layer would let us audit and enforce the taxonomy during translation and make future taxonomy changes without touching source data.
