Overview

Overview

UPS runs one of the largest logistics networks on earth, and its digital footprint had grown just as fast: a mobile app, web ordering, and a spread of internal tools, each built by different teams on different timelines. The problem wasn't a lack of design. It was a lack of system. The same buttons, forms, and flows were being rebuilt from scratch across surfaces, each with subtle differences.

I architected the UPS Design Library: a tokenized, atomic component system that gave design and engineering a shared language and a single source of truth — scalable across platforms, adaptable across devices, and durable as the brand evolves.

UPS runs one of the largest logistics networks on earth, and its digital footprint had grown just as fast: a mobile app, web ordering, and a spread of internal tools, each built by different teams on different timelines. The problem wasn’t a lack of design. It was a lack of system. The same buttons, forms, and flows were being rebuilt from scratch across surfaces, each with subtle differences.

I architected the UPS Design Library: a tokenized, atomic component system that gave design and engineering a shared language and a single source of truth — scalable across platforms, adaptable across devices, and durable as the brand evolves.

Impact

Impact

  • 35% reduction in engineering time implementing reusable components built in code

  • One consistent experience across multiple platforms.

  • A shared design–engineering language and a single source of truth

  • A system built to scale: new surfaces ship faster and stay on-brand by default

  • 35% reduction in engineering time implementing reusable components built in code

  • One consistent experience across multiple platforms.

  • A shared design–engineering language and a single source of truth

  • A system built to scale: new surfaces ship faster and stay on-brand by default

My Role

Product Designer

Product
Designer

Timeline

3 months

Team

Product Manager

Project Manager
Designers: 3

Tools

Figma

Miro

Foundations

Foundations

Foundations form the backbone of any great user interface, providing essential standards and patterns that guide layout, interaction, and overall design consistency. These principles ensure a cohesive and intuitive user experience while offering a solid framework for scaling and adapting interfaces across various platforms and devices.

Foundations form the backbone of any great user interface, providing essential standards and patterns that guide layout, interaction, and overall design consistency. These principles ensure a cohesive and intuitive user experience while offering a solid framework for scaling and adapting interfaces across various platforms and devices.

Principles

Principles

User-Centric Design

Simplicity & Intuitiveness

Simplicity & Intuitiveness

Consistency & Brand Identity

Consistency & Brand Identity

Accessibility and Inclusivity

Accessibility and Inclusivity

Seamless Cross-Platform Experience

Seamless Cross-Platform Experience

Atoms

Atoms

Atoms are the base elements: color, typography, icons, buttons, form fields. Getting them right is what makes everything above them coherent.

COLORS

The palette is built as a semantic elevation and role system, not a raw swatch list.
Colors are labeled by the job they do: background elevations, CTA hierarchy, text states, legal copy.


Elevations 1 - Main Background

Elevations 1 - Main Background

#120806

Elevations 2 - Cards, Auction Sheets

#33231F

Elevations 3 - Toasts, Notifications

#483D3D

Elevations 4 - My Choice Price Badge

Elevations 4 - My Choice Price Badge

#120806

Elevations 5 - Alerts, Toasts

Elevations 5 - Alerts, Toasts

#FFC400

TYPOGRAPHY

A fluid Roboto scale that adapts size and line height to the viewport, keeping text legible and consistent from the largest title down to body copy across every device.

Roboto Font

Style

Title 1

Title 2

Title 3

Headline

Body

Preview

Moving our world

Moving our world

Moving our world

SemiBold

Regular

Size / Leading

24/28

20/24

18/22

16/20

16/18

GRIDS & SPACING

The arrangement of visual elements on a screen is known as the layout.
It guides users to the most relevant information and enables them to take action effortlessly.

The arrangement of visual elements on a screen is known as the layout.
It guides users to the most relevant information and enables them to take action effortlessly.

iOS Mobile Devices

iOS Mobile Devices

375X812

Android Mobile Devices

Android Mobile Devices

360X760

Buttons & Labels

ICONS

ILLUSTRATIONS

Molecules

Molecules

Two or more atoms combined into a single functional unit: form elements, navigation, cards, the chat bot interface. Each is a reusable pattern with its states and behavior defined once, then used everywhere.

Form Elements

Navigation

Cards

Chat Bot

Organisms

Organisms

Molecules assembled into complete, distinct sections of the interface — widgets and balance sheets — the larger building blocks teams compose screens from without reinventing structure each time.

WIDGETS

Balance Sheets

Where the system pays off: design → engineering

Because every component mapped 1:1 to code, engineers stopped rebuilding UI per project and started composing screens from a shared library. Design handoff went from interpretation to assembly.

A system built for engineering, not just for designers to reference is what turned the library from a style guide into infrastructure.

Reflection

The strongest design systems aren't the most beautiful ones. They're the ones people actually build on. The win here wasn't the component library itself; it was designing the architecture (semantic tokens, clean code mapping, cross-platform foundations) so that consistency became the path of least resistance for every team downstream.

The strongest design systems aren’t the most beautiful ones. They’re the ones people actually build on. The win here wasn’t the component library itself; it was designing the architecture (semantic tokens, clean code mapping, cross-platform foundations) so that consistency became the path of least resistance for every team downstream.