Creating a design system for a leading travel company

Creating a design system for a leading travel company

Creating a design system for a leading travel company

Overview

Overseas Adventure Travel (O.A.T.) is a leading travel company with roots in print material. They aim to pivot and be more web-focused in 2025 and beyond. I helped the company set its framework and expand into the digital world with a new design system.

Issue

O.A.T. didn't have a design system when I joined. With the new focus on web, we needed a cohesive and engaging design system to set the foundation for the brand and its new CMS.

Solution

Created a design system to use across all of web. This includes typography, colors, buttons, icons, components, documentation, and so on and so forth. The system follows atomic design methodology to help streamline processes and ensure consistency.

Did it work?

Yes! Designers and developers both benefit from this new system. We saw less time spent on designing and coding new projects, improved QA, and consistency across pages new and old. Our biggest win was launching our site in our new CMS on time.

Typography

Switched from Open Sans to Circular, upgrading from a common free typeface to a more distinctive paid one.

Flexible system that supports all screen sizes. Defined specific use cases, font sizes, font weights, responsive sizes, and line heights for consistent styling.

Colors

Full suite of colors with tints and shades to help with accessibility, hierarchy, brand recognition, and visual appeal.

Buttons

Assortment of buttons and chips to help users navigate and use our site. Interaction states and different variations to help with accessibility and hierarchy

Components

Reusable components to speed up the design and developing process and ensure consistency.

Buttons

Assortment of buttons and chips to help users navigate and use our site. Interaction states and different types to help with accessibility and hierarchy

Thanks for reading🙂

Thanks for reading🙂

Feel free to reach out if you’d like to learn more. In the meantime, check out more of my work below!

© 2025 Designed by Alex Fraser
Thanks for stopping by ✌️
© 2025 Designed by Alex Fraser
Thanks for stopping by ✌️
© 2025 Designed by Alex Fraser
Thanks for stopping by ✌️
© 2025 Designed by Alex Fraser
Thanks for stopping by ✌️