Case Study
Building a Design System
Arrivia Cobalt Design System
Seven platforms. One design language. Cobalt was built to unify all of Arrivia's products under a single, scalable design system. It uses atomic design principles, building from foundational elements up to full pages to bring consistency to the whole suite.
What is a Design System?
A design system is a centralized framework of guidelines, components, and assets that keeps products looking and working consistently. It gives design and development teams a shared reference point for UI elements, interactions, and visual styles, so they can move faster and produce more coherent work.
Cobalt
The UX team was designing across 7+ platforms with no shared foundation. Cobalt was created to change that. It uses atomic design principles to assemble foundational elements into a progressively unified system, bringing visual consistency to all of Arrivia's products and improving the user experience in the process.
Why do we need Cobalt?
Cobalt keeps the brand consistent across every platform it touches. It gives designers and developers reusable components and clear guidelines, so teams can build new interfaces faster without starting from scratch. That consistency pays off in brand recognition and in a better experience for users.
How it was set up
1. Atoms
Basic building blocks such as buttons, form fields, and icons.
2. Molecules
Combinations of atoms that form more complex components.
Examples: a search bar combining an input field and button, or a navigation menu.
3. Organisms
Complete sections of a UI (like a header or footer) with integrated molecules and atoms.
4. Templates
Frameworks that structure the layout of a page.
5. Pages
Define the placement and relationship of organisms within a specific context.
The final, specific instances of templates filled with actual content.
Represent fully realized web pages with a unique combination of elements.
The “Atoms”
Below are some of the atoms the team and I built out. Atoms are the core of the system: the smallest, most reusable pieces (buttons, form fields, icons) that everything else gets built from.
Icons
Buttons
Inputs and Fields
Chips
The “Molecules”
Our First Organism!
The Continuation of Cobalt
Cobalt has already brought more consistency to the brand and interface across products. There are still components to design, and the system is actively being expanded toward its first full template. The goal is a complete design system that unifies every interface at Arrivia.
Read more of my case studies
