Precision at Every Layer
Client:
Audemars Piguet
Project Details
Client
Year
TYPE
Role
Agency
Audemars Piguet is one of the world's most prestigious luxury watchmakers, a brand where precision, heritage, and craftsmanship are non-negotiable at every level. As part of my work within my current agency, I joined an ongoing Design System project to evolve, maintain, and scale the existing component library built for the AP digital ecosystem. Working in close collaboration with the development team, my contribution spanned the full spectrum of Design System work: from component architecture in Figma to token management, developer handoff, and documentation.
The objective was to bring greater consistency, scalability, and developer-readiness to a Design System that needed to grow alongside an expanding digital ecosystem. This meant not only updating and refining existing components, but establishing a more rigorous token architecture using Tokens Studio, ensuring that every visual decision, from color and typography to spacing and border radius, was systematically documented and directly connected to the codebase. The ultimate goal was to create a seamless bridge between design and development, where both teams could work from the same single source of truth.
The work unfolded across four interconnected layers. On the Figma side, I updated and extended the component library, covering a wide range of UI elements including headers, buttons, inputs, quotes, icons, and typography scales, each documented with their full set of variants, states, and responsive behaviors across all breakpoints from small to xlarge. In parallel, I managed the token architecture using Tokens Studio, structuring component tokens, color palettes, border radius scales, spacing values, shadow definitions, and typography references into a clean, hierarchical JSON system directly linked to the development environment. The ZeroHeight documentation platform was then used to translate this technical work into clear, accessible guidelines for the entire product team, with dedicated pages covering component principles, anatomy, use cases, rules, and changelogs. Throughout the process, I maintained a close and ongoing collaboration with the development team to ensure that every token and component update was accurately reflected in Storybook and in production.
This project strengthened my expertise at the most technical and strategic layer of Design System work: the invisible architecture that makes everything else possible. By contributing to a system used by one of the world's most recognized luxury brands, I developed a deep understanding of how to maintain and evolve a complex, multi-team design infrastructure with the precision and rigor that a brand like Audemars Piguet demands. The improved token structure and documentation significantly reduced friction between design and development, accelerating delivery while raising the overall quality bar across the entire digital ecosystem.
