Calvin Klein
Overview
Calvin Klein partnered with Publicis Sapient to rebuild its ecommerce design system across multiple global sites. The goal was to create a scalable foundation that balanced modern retail performance with Calvin Klein’s iconic simplicity.
Design Systems Lead at Publicis.Sapient
Design System Architecture
Component Library Redesign
Figma Tokens and Automation Setup
Documentation and Accessibility Guidelines
The mission was to create a scalable foundation that balanced performance and accessibility while preserving the brand's iconic visual simplicity. As Design Systems Lead, I led the transition toward a modular, token-based structure that redefined how design and engineering collaborated.
Context
The redesign was part of PVH’s broader initiative to modernize multiple brand experiences using Salesforce Commerce Cloud. Calvin Klein was the flagship, meaning every design decision would ripple across Tommy Hilfiger and others. The team adopted Atomic Design principles to ensure components could scale with consistency and efficiency.
Before I joined, the system had drifted. Tokens existed in theory, but the connection between styles, components, and engineering was broken. Layers were inconsistent, variants duplicated, and the system became too rigid and heavy to evolve.
Challenges
My first goal was to restore trust. I audited every component and token, relinking them manually to Figma Variables. Colors, spacing, typography, and breakpoints were all restructured to follow a naming logic that made sense to both designers and developers. Once the base was solid, I created a new governance model with accessibility rules, semantic naming, and review checkpoints. Each token and component was mapped directly to front-end code, ensuring parity between design and GitHub repos. To accelerate workflows, I reorganized variants and rebuilt key components for responsiveness. Everything was hooked into Figma Variables, so components adapted to screen sizes and brand themes without manual rework. One search component could now scale across light/dark modes and brand styles instantly. We also set up automation. Tokens in Figma exported JSON directly to a PVH GitHub repo, which was converted into CSS variables and published as NPM packages. This made the design system truly living — constantly synced, always up to date.
Solution
The result was a unified, tokenized system powering four major templates: PLP, PDP, Cart, and My Account. Designers could go from idea to hi-fi in minutes, and developers always had a matching codebase. More than a library, the new Calvin Klein system became a platform for collaboration: responsive, accessible, and fully scalable across PVH.
