TNF Design System | Lilia Sanabria Portfolio

THE NORTH FACE DESIGN SYSTEM

Design systems, component design, e-commerce

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.

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.

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.