Lead Design Systems Engineer at Condé Nast
Verso is Condé Nast’s multi-brand design system for 15+ publications. I helped architect the shared component foundation, token-driven theming, and tooling that allow brands like Vogue, The New Yorker, WIRED, Vanity Fair, Bon Appétit, and Pitchfork to keep distinct editorial identities inside one system.
Verso: Condé Nast’s Global Design System
Verso gives Condé Nast one system foundation for a wide range of editorial brands, including Vogue, The New Yorker, WIRED, Vanity Fair, Bon Appétit, and Pitchfork. The system uses shared components and token-driven theming so each publication can express its own visual language without rebuilding the interface from scratch.
Token-driven design
Verso’s components are built around explicit token decisions. In this annotated card example, each color and type token maps a visual choice back to the system, making it clear which parts of the component are shared and which parts can change by brand.
12, 3, 45, 67, 89, 10Multi-brand theming through design tokens
Brand Identity JSON files act as the theming layer for shared components. Each brand can define its own color, typography, and decorative tokens while using the same component structure.
The card examples show one component responding to different brand configurations. The system keeps the implementation consistent while letting each publication carry its own editorial tone.
Editorial expression through layout options
Verso supports editorial variation through layout options and brand tokens. Article headers can shift tone across publications while staying inside the same system architecture.
The examples show how different brands can use composition, typography, color, and decorative details to shape the reading experience. The system gives teams room for editorial expression without requiring a separate implementation for every brand.
Figma tooling for design-to-code workflows
I built a custom Figma plugin for exporting and importing Brand Identity files inside the design tool. The plugin connected design decisions to JSON used by the web application, keeping tokens and implementation pointed at the same source of truth.
Color, typography, and decoration tokens
Verso’s Brand Identity files include tokens for color, typography, and decorative details. These token groups give each brand a defined place to express visual choices while keeping component APIs consistent.
Color tokens control theme values used across components, from text and backgrounds to borders and accents.
Typography tokens define responsive type choices so publications can tune hierarchy, scale, and voice within the shared system.
Decoration tokens handle details such as border radius, line styles, badges, borders, and brand-specific assets. They give the system a way to support expressive editorial surfaces without hard-coding those details into components.
Documentation through a design system portal
I created a portal for Verso documentation, component guidance, implementation examples, and usage patterns. The site gives designers and engineers a shared place to understand the system, find component APIs, review variations, and contribute back to the platform.
This case study shows the kind of system work I build: architecture for shared UI, tokens that carry brand decisions, tooling that connects Figma and code, and documentation that helps teams adopt the system.
If your team is building a design system, UI platform, or design-to-code workflow across multiple products or brands, let’s talk.