Atlas Design System

Atlas Design System

Project Overview

While at Vrbo, I created and managed the Atlas Design System, a design system built around the work our team was doing for internal productivity tools. This system was built upon the work our teammates did on the larger Vrbo Design System, but was more geared towards internal-facing products.

The Atlas Design System includes a robust Sketch library, the beginnings of a Figma library, a number of React components, and extensive guidelines and documentation around library and component usage. This was a great way for me to utilize my skills as a Design Technologist, since I could make updates to both the design elements in the library and the React components themselves.

Sample view of some of the core elements of the system.
Sample view of several atoms that make up the system.

Building the Sketch Library

Product design work was already underway before I identified a need to create a design system for our team. While the larger design system at Vrbo was excellent, we found ourselves needing new or altered patterns with more of a focus on compact, data-dense UIs. We explored these patterns as a team and I began building up a Sketch library to not only standardize those patterns, but also to speed up each designer’s workflow.

Each time a new pattern was proposed, I conducted extensive audits to understand how the team utilized the same or similar patterns, as well as what kinds of customization and variation would be needed. Patterns needed to be flexible for our designers to fully embrace the library, so there are a lot of customization options through the use of nested symbols and layer styles.


As the library grew, so did its documentation, which was critical for onboarding new designers. The extensive documentation not only covered what was in the library and where to find it, but it also included information on how to customize each symbol, content guidelines, spacing and placement recommendations, and more. I also developed a contribution process to help other designers contribute back to the system, in addition to being able to make suggestions and submit issues. Updates to the library were communicated through several channels, including internal blog posts and a dedicated Slack channel.

React Components

Thanks to my role as a Design Technologist, I was able to take design patterns and bring them to life as reusable React components. This helped speed up our engineering team’s work, as I was often able to hand off a working component that they could plug-and-play. When I wasn’t building the components myself, I also provided front-end assistance and conducted UX audits as other parts of the design system were implemented.

Due to the nature of this work, it is only available upon request.