Route

Design System

The Route design system is a scalable framework of reusable components, design patterns, and guidelines that ensure consistency across our products. It serves as a single source of truth, streamlining collaboration between design and engineering while reducing redundancy.

 

By standardizing UI elements, interaction patterns, and accessibility best practices, we created a more cohesive, efficient, and user-friendly experience.

This system not only accelerates product development but also reinforces brand identity—allowing our team to focus on solving real user problems rather than rebuilding the same components over and over.

 

This project was completed during my tenure as Principal Designer at Route. While this was a collaborative effort with contributions from talented team members, the work showcased here focuses primarily on my specific design contributions and creative leadership throughout the project.

Defining the problem

As Route scaled, inconsistencies in UI components, interactions, and brand expression created inefficiencies. Our small team was spending valuable time duplicating work instead of focusing on meaningful user experiences. The challenge was clear: how might we create a unified design system that empowers efficiency, consistency, and scalability across products?

Designing the solution

We built a modular, component-based design system that became a single source of truth for our product and engineering teams. By standardizing typography, spacing, and interactions, we reduced design debt while ensuring a cohesive experience. Our documentation prioritized usability—giving designers and developers the tools to create with confidence and speed.

SORRENTO

BLUE

Color

Inspired by the Italian coastline, Sorrento Blue captures the spirit of travel, adventure, and open horizons. Vibrant yet grounding, it reflects the energy of movement and discovery—because every route tells a story.

Elements & Layout

Every element is designed for clarity, consistency, and scalability. Optimized for both light and dark modes, our icons maintain sharpness and accessibility across all sizes and screens. Simple, intuitive, and unmistakably Route.

 

Designed for legibility across any surface, the Route badge retains its sharpness and impact while showcasing our signature Sorrento Blue—recognizable at a glance, anywhere it appears.

Refine your search with AI

Light / Dark Modes

We designed maps that adapt seamlessly to any environment. In light mode, they’re crisp and clear for daytime visibility. In dark mode, they reduce glare while maintaining contrast and legibility. Every detail is optimized for a smooth, accessible experience—no matter when or where you’re tracking.

Maps

We designed maps that adapt seamlessly to any environment. In light mode, they’re crisp and clear for daytime visibility. In dark mode, they reduce glare while maintaining contrast and legibility. Every detail is optimized for a smooth, accessible experience—no matter when or where you’re tracking.

Mobile

Our design system is optimized for seamless mobile experiences. Every element—from typography to touch targets—is crafted for clarity, responsiveness, and ease of use, ensuring a smooth journey on any screen.

Delivered

BLVCK

4 items

Arrives Tomorrow

BLVCK

4 orders

9:54

Delivered

686

New Order

ASRV

In Transit

Arrives Thursday

Adidas

Shipping

Arrives Mar 29

Protected

Carbon Neutral

Veja

Out for Delivery

Arrives today

2

9:54

Orders

Learnings and results

Adoption was key. We learned that a design system isn’t just a collection of components—it’s a living product that requires advocacy and iteration. Through collaboration and education, our team significantly reduced redundant work, streamlined handoffs, and improved design consistency across Route’s products.

9064 Acorn Way

Timberlakes

UT 84032

hello@werooney.com

© 2025 All Rights Reserved

Route

Design System

The Route design system is a scalable framework of reusable components, design patterns, and guidelines that ensure consistency across our products. It serves as a single source of truth, streamlining collaboration between design and engineering while reducing redundancy.

 

By standardizing UI elements, interaction patterns, and accessibility best practices, we created a more cohesive, efficient, and user-friendly experience.

This system not only accelerates product development but also reinforces brand identity—allowing our team to focus on solving real user problems rather than rebuilding the same components over and over.

 

This project was completed during my tenure as Principal Designer at Route. While this was a collaborative effort with contributions from talented team members, the work showcased here focuses primarily on my specific design contributions and creative leadership throughout the project.

Defining the problem

As Route scaled, inconsistencies in UI components, interactions, and brand expression created inefficiencies. Our small team was spending valuable time duplicating work instead of focusing on meaningful user experiences. The challenge was clear: how might we create a unified design system that empowers efficiency, consistency, and scalability across products?

Designing the solution

We built a modular, component-based design system that became a single source of truth for our product and engineering teams. By standardizing typography, spacing, and interactions, we reduced design debt while ensuring a cohesive experience. Our documentation prioritized usability—giving designers and developers the tools to create with confidence and speed.

Color

Inspired by the Italian coastline, Sorrento Blue captures the spirit of travel, adventure, and open horizons. Vibrant yet grounding, it reflects the energy of movement and discovery—because every route tells a story.

SORRENTO

BLUE

Refine your search with AI

Elements & Layout

Every element is designed for clarity, consistency, and scalability. Optimized for both light and dark modes, our icons maintain sharpness and accessibility across all sizes and screens. Simple, intuitive, and unmistakably Route.

 

Designed for legibility across any surface, the Route badge retains its sharpness and impact while showcasing our signature Sorrento Blue—recognizable at a glance, anywhere it appears.

10x Bigger.

10x Smarter.

When you’re powered by data, you don’t just compete—you dominate.

Light / Dark Modes

We designed maps that adapt seamlessly to any environment. In light mode, they’re crisp and clear for daytime visibility. In dark mode, they reduce glare while maintaining contrast and legibility. Every detail is optimized for a smooth, accessible experience—no matter when or where you’re tracking.

Maps

We designed maps that adapt seamlessly to any environment. In light mode, they’re crisp and clear for daytime visibility. In dark mode, they reduce glare while maintaining contrast and legibility. Every detail is optimized for a smooth, accessible experience—no matter when or where you’re tracking.

Mobile

Our design system is optimized for seamless mobile experiences. Every element—from typography to touch targets—is crafted for clarity, responsiveness, and ease of use, ensuring a smooth journey on any screen.

Delivered

BLVCK

4 items

Arrives Tomorrow

BLVCK

4 orders

9:54

Delivered

686

New Order

ASRV

In Transit

Arrives Thursday

Adidas

Shipping

Arrives Mar 29

Protected

Carbon Neutral

Veja

Out for Delivery

Arrives today

2

9:54

Orders

Learnings and results

Adoption was key. We learned that a design system isn’t just a collection of components—it’s a living product that requires advocacy and iteration. Through collaboration and education, our team significantly reduced redundant work, streamlined handoffs, and improved design consistency across Route’s products.

9064 Acorn Way

Timberlakes

UT 84032

hello@werooney.com

© 2025 All Rights Reserved

Route

Design System

The Route design system is a scalable framework of reusable components, design patterns, and guidelines that ensure consistency across our products. It serves as a single source of truth, streamlining collaboration between design and engineering while reducing redundancy.

 

By standardizing UI elements, interaction patterns, and accessibility best practices, we created a more cohesive, efficient, and user-friendly experience.

This system not only accelerates product development but also reinforces brand identity—allowing our team to focus on solving real user problems rather than rebuilding the same components over and over.

 

This project was completed during my tenure as Principal Designer at Route. While this was a collaborative effort with contributions from talented team members, the work showcased here focuses primarily on my specific design contributions and creative leadership throughout the project.

Defining the problem

As Route scaled, inconsistencies in UI components, interactions, and brand expression created inefficiencies. Our small team was spending valuable time duplicating work instead of focusing on meaningful user experiences. The challenge was clear: how might we create a unified design system that empowers efficiency, consistency, and scalability across products?

Designing the solution

We built a modular, component-based design system that became a single source of truth for our product and engineering teams. By standardizing typography, spacing, and interactions, we reduced design debt while ensuring a cohesive experience. Our documentation prioritized usability—giving designers and developers the tools to create with confidence and speed.

Color

Inspired by the Italian coastline, Sorrento Blue captures the spirit of travel, adventure, and open horizons. Vibrant yet grounding, it reflects the energy of movement and discovery—because every route tells a story.

SORRENTO

BLUE

Refine your search with AI

Elements & Layout

Every element is designed for clarity, consistency, and scalability. Optimized for both light and dark modes, our icons maintain sharpness and accessibility across all sizes and screens. Simple, intuitive, and unmistakably Route.

 

Designed for legibility across any surface, the Route badge retains its sharpness and impact while showcasing our signature Sorrento Blue—recognizable at a glance, anywhere it appears.

10x Bigger.

10x Smarter.

When you’re powered by data, you don’t just compete—you dominate.

Light / Dark Modes

We designed maps that adapt seamlessly to any environment. In light mode, they’re crisp and clear for daytime visibility. In dark mode, they reduce glare while maintaining contrast and legibility. Every detail is optimized for a smooth, accessible experience—no matter when or where you’re tracking.

Maps

We designed maps that adapt seamlessly to any environment. In light mode, they’re crisp and clear for daytime visibility. In dark mode, they reduce glare while maintaining contrast and legibility. Every detail is optimized for a smooth, accessible experience—no matter when or where you’re tracking.

Mobile

Our design system is optimized for seamless mobile experiences. Every element—from typography to touch targets—is crafted for clarity, responsiveness, and ease of use, ensuring a smooth journey on any screen.

Delivered

BLVCK

4 items

Arrives Tomorrow

BLVCK

4 orders

9:54

Delivered

686

New Order

ASRV

In Transit

Arrives Thursday

Adidas

Shipping

Arrives Mar 29

Protected

Carbon Neutral

Veja

Out for Delivery

Arrives today

2

9:54

Orders

Learnings and results

Adoption was key. We learned that a design system isn’t just a collection of components—it’s a living product that requires advocacy and iteration. Through collaboration and education, our team significantly reduced redundant work, streamlined handoffs, and improved design consistency across Route’s products.