TOMMY HILFIGER
Tommy Hilfiger’s tokenized design system and gated experiences
As an Experience Designer consultant for PVH, I helped build a design system for Calvin Klein and Tommy Hilfiger to standardize their commerce platform across brands and geographies.
I helped implement the motion design system, and also worked on the gated design experience, where certain pages and drops are only open to members, creating a more exclusive atmosphere and encouraging members to convert.
TEAM
Sharon Jia, Michael Benning, Nathan Walsh
TIMELINE
6 months
MY ROLE
Design Systems, UX Design
OVERVIEW
We extended PVH’s scalable commerce design system to Tommy Hilfiger while creating premium gated experiences that strengthened member engagement and reinforced the brand’s identity.
As a Senior Product Designer consultant at PVH, I worked on the Global Digital Commerce (GDC) initiative across brands including Tommy Hilfiger and Calvin Klein. Following the launch of the Calvin Klein design system, the next phase of the program involved adapting the same foundational architecture to Tommy Hilfiger while preserving the distinct visual and emotional identity of the brand. The goal was to create a scalable multi-brand framework that allowed teams to share components, tokens, and workflows across brands while still enabling Tommy Hilfiger to feel bold, expressive, and uniquely its own.
PROCESS
Tommy Hilfiger needed a scalable design system that could maintain consistency across teams while still feeling visually distinct from Calvin Klein.
The Calvin Klein system established a shared foundation for components, tokens, and workflows across PVH brands. Tommy Hilfiger adopted the same underlying architecture, but required a more energetic and editorial visual language that aligned with its brand identity.
The challenge was creating a system flexible enough to support multiple brands without duplicating components or compromising consistency.
Core foundations such as spacing, typography, grids, and breakpoints remained consistent across brands, while visual styling and interaction behaviors were adapted through Figma Variables and token overrides. This allowed shared components to dynamically adapt between Calvin Klein and Tommy Hilfiger without creating separate systems.
PROCESS
We extended the Calvin Klein design system into a scalable multi-brand framework that could support Tommy Hilfiger through shared components and tokenized styling.
I helped implement the motion design system across the platform by defining consistent behaviors for transitions, hover states, loading interactions, and micro-animations. Motion guidelines standardized easing, timing, and interaction feedback to create a more polished and cohesive experience across the site. Using shared foundations and brand-specific overrides, the team was able to maintain consistency across PVH while still allowing Tommy Hilfiger to feel visually distinct and true to its brand.
PROCESS
Converting tokens between Calvin Klein and Tommy Hilfiger enabled components to dynamically adapt between brands without requiring duplicate builds, improving both operational efficiency and design consistency across teams.
To support scalability across brands, we extended the Calvin Klein system into a shared architecture powered by reusable components and tokenized styling. Shared foundations such as grids, typography structures, spacing rules, and interaction logic remained centralized, while Tommy Hilfiger-specific styling was introduced through variable overrides and component variants.
By building on the Calvin Klein foundation rather than creating a separate system from scratch, the team significantly improved scalability and operational efficiency across brands. Shared components and tokenized workflows reduced duplication between design and engineering teams while enabling faster iteration and implementation.
DESIGNS
Before & after
Use the slider to view how the Figma tokens translate between Calvin Klein and Tommy Hilfiger.
IMPACT