TNF DESIGN SYSTEM | Lilia Sanabria Portfolio

THE NORTH FACE DESIGN SYSTEM

A scalable design system built from the ground up to power a full platform migration.

As part of The North Face's e-commerce platform migration,

I built a scalable design system to support the entire digital experience, establishing the foundational components, tokens, and documentation that design and engineering teams would rely on across the site.

Working closely with UX, developers, PMs, and brand, the system was built to ensure visual consistency at scale, giving the brand a flexible, production-ready foundation while keeping design and development aligned throughout the migration.

My role

Design system architecture
Component library
Design tokens & documentation

Highlights

SKETCH TO FIGMA
Led the team through a full tool transition mid-project, building alignment around component-based thinking while still delivering.

ATOMS FIRST
Built the foundational layer, color, typography, spacing, iconography, then expanded into PDP, PLP, and checkout components.

BUILD TO HAND OFF
Semantic tokens mapped to primitives with a consistent naming convention, designed for scale and handoff clarity.

SHIPPED AND LIVE
The design system launched with the platform migration and is the foundation thenorthface.com runs on today.

Figma file structure

I organized the file into two main areas, foundational elements and components. The foundations covered styles, color, grid and spacing, typography, icons, and logos. Components were separated into individual pages by type, making it easy for designers and developers to navigate the library and find exactly what they needed.

Variables

I structured color variables across light and dark mode collections, with semantic tokens mapped to primitives for surface, border, icon, and text. This separation between primitive and semantic layers ensured the system could scale without breaking existing components.

Tokens

I structured the token naming to be descriptive, intuitive, and aligned with industry best practices, making it easy for both designers and developers to understand the intended use of each token at a glance. Tokens followed a [category]-[property]-[state] naming pattern, ensuring consistency across color, typography, size, and spacing decisions throughout the system.

Typography

I kept the type scale lean, only the styles the system actually needed. Built on Helvetica Neue the type styles cover Display, Header, Body, Link, and Input. Naming follows best practices, making each style easy to apply consistently across components.

Components

I approached component building strategically, identifying the core elements that would make each component easy to update and the system as a whole easier to scale. Components were built with nested structures and clearly defined properties, so changes could be made at the atomic level without breaking anything downstream.