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.
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.
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.
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.
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.
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.
