Overview
UPS Design Library is a comprehensive library of reusable components, tools, and well-defined standards designed to seamlessly build digital products and deliver exceptional user experiences.
This design system empowers designers and developers to work collaboratively by providing a unified framework that ensures consistency across the brand's digital ecosystem.
My Role
Product Designer
UI Design
UX Design
Timeline
3 months
Team
Product Manager
Project Manager
Designers: 3
Tools
Figma
Miro
Foundation
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
User-Centric Design
Simplicity & Intuitiveness
Consistency & Brand Identity
Accessibility and Inclusivity
Seamless Cross-Platform Experience
Atomic Design
The UPS Design System was built following atomic design principles, breaking down the interface into a structured hierarchy of reusable elements. Starting with foundational atoms like buttons, icons, and typography, these components combined into molecules, organisms, templates, and full-page layouts. This modular approach ensured consistency, scalability, and efficiency, allowing teams to quickly assemble and adapt interfaces while maintaining a cohesive user experience across all digital platforms.
Atoms
Atoms are the smallest building blocks of a user interface. They are the basic elements such as buttons, form fields, icons, typography, and colors
COLORS
Color style swatches help to communicate content hierarchy, its meaning and brand presence.
We do not use direct color palette references like “red-500”. Instead we use semantic color labels
that represent a role a color plays in the interface: elevations, UI, CTA etc.
Elevations 1 - Main Background
#120806
Elevations 2 - Cards, Auction Sheets
#33231F
Elevations 3 - Toasts, Push Notification
#483D3D
Elevations 7 - Text Fields, Bottom Tab Nav
#483D3D
Elevations 4 - My Choice Price Badge
#120806
Elevations 5 - Alerts, Toasts
#FFC400
Elevations 6 - My Choice cards
#5D3E27
UI 1 - UPS Logo, Home & Truck Icons (Map)
#330000
UI 2 - Dividers Bright, Selected Card Border
#888382
UI 3 - Active State Text Fields
#FFFFFF
UI 4 - Progress Bar, In-Map UI
#03AAA0
UI 5 - Dividers Muted. Top Bar Divider
#444141
CTA Primary
#FFBE00
CTA Secondary - Outline, Text & Icon
#FFFFFF
CTA Legal - Used for Legal Copy Only
#4DA3F9
Text Primary - Main Text
#FFFFFF
Text Inverse - For DM & LM components with dark bg
#FFFFFF
Text Secondary - Secondary Text
#B5B3B2
Text Off-State Tabs
#999392
Text on Gold - Primary CTA’s, Alert Toasts
#121212
TYPOGRAPHY
Typography styles are used for consistent display of text content across products.
We support fluid typography that adapts size and line height based on a viewport.
Roboto Font
Style
Preview
Weight
Size / Leading
Large Title
Moving our world
Light
32/36
Title 1
Moving our world
Regular
24/28
Title 2
Moving our world
Regular
20/24
Title 3
Moving our world
Regular
18/22
Headline
SemiBold
SemiBold
16/20
Body
Regular
Regular
16/18
Callout 1
Moving our world
Medium
16/20
Callout 2
Moving our world
Regular (Underlined)
16/20
Callout 3
Moving our world
Medium (Underlined)
14/216
Subhead
Moving our world
Regular
14/16
Caption
Moving our world
Medium
12/16
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.
iOS Mobile Devices
375X812
Android Mobile Devices
360X760
Buttons & Labels
ICONS
ILLUSTRATIONS
Molecules
Molecules are the next level up from atoms and are composed of two or more
atoms that work together as a single unit.
Form Elements
Navigation
Cards
Chat Bot
Organisms
Organisms are the next level up from molecules and are composed of multiple molecules that work together to form a distinct section or feature of a user interface.
WIDGETS
Balance Sheets
Impact
The UPS Design System improved how digital products were created by providing a centralized library of reusable components and clear design standards. It streamlined collaboration between teams, ensured a consistent user experience across all platforms, and strengthened the brand’s digital presence. The system also made product development faster, more scalable, and accessible, meeting the diverse needs of users while maintaining high quality.