Building Alaska Airlines’ cross-functional design system

The first hurdle towards creating any design system is explaining the difference between a style guide and a design system. These are the definitions that we agreed upon at Alaska Airlines:

A style guide is built and maintained separately from the code— a recipe for error and inconsistency.

A design system provides structure, governance, and consistency around a design—a way to implement a consistent look, feel, and usage.

The second hurdle is socializing the idea of a design system because they are far more complex than a style guide. A design system includes efforts from both dev and design, developing fully realized components adds development time when a product team produces them, and a dedicated team of PMs, designers, and devs that can often be designing components in a vacuum.

The following is a presentation that Dale and I gave to the entire e-commerce organization at Alaska to introduce them to the concept of design systems and, specifically, the Orion Design System (or ODS).

Building Adoption Across Design

Dale and I attended a design system conference in New York. Among the topics was the concept of convincing your organization to buy-in to the idea of using design systems as a practice. We heard many stories about how it was challenging to convince engineers to use a design system. Strangely, we had the opposite challenge at Alaska Airlines. The engineering team immediately saw value in the design system and were completely onboard. It was the designers that were reluctant to sign on to using a design system.

To assuage concerns, I hosted a round table discussion with the design team and we discussed the pros and cons of leveraging a design system. Most of their hesitancy revolved around their design work potentially being limited by the perceived constraints of a design system. It helped to explain the difference between “components” and “patterns” in the ODS:

Components are the atomic building blocks for your experience - typography, buttons, text entry fields, etc. – elements that should be consistent across your product.

Patterns are combinations or arrangements of components that are used repeatedly in an experience. Typically, I don’t like to define a Pattern until I know that it will be used 3 or more times in an experience.

Once it became clear that the design system was going to save time and create consistency through the use of components, the designers were less reluctant about using Orion.

The Guidance Itself

So I wrote the training and gave it to the design org. It starts with how screen readers actually behave: top to bottom, one line at a time, pausing at punctuation, spelling out acronyms they cannot pronounce, saying nothing at all for an image with no alt text. From there it works through the four concepts that matter most for blind customers: perceivable, operable, understandable, robust.

The rest is specific enough to design against. Semantic emphasis rather than visual, because a screen reader announces strong and ignores bold. Real heading tags, so a user can hear an outline of the page and jump to the part they want. Link text that survives being read out of context, since a screen reader user never hears the sentence around it. Native platform controls over custom ones, because they arrive already labelled and focusable. The deck puts the whole problem in one comparison: someone using a screen reader experiences a page like a decision tree in an automated phone system, where not all the options are revealed at once.

It closes on the part designers own outright. Tab order following the visual flow, skip-navigation links, and the focus states for every interactive element in the system: buttons, hyperlinks, text inputs, radios, checkboxes, icon buttons, tooltips, and dropdown menus.

Extending Alaska’s Brand Palette

Alaska’s Experience Design teams worked closely with Brand Design to maintain alignment between the airline’s digital interfaces and marketing materials. Orion’s creation followed Alaska’s acquisition of Virgin America. As the companies came together, the Brand team wanted to introduce some of Virgin America’s energy through a warmer, more California-influenced visual direction.

Alaska’s established palette was distinctly Pacific Northwest: muted blues, teal, and apple green inspired by the region’s natural environment. While harmonious and recognizable, these colors did not provide enough emphasis for primary calls to action within the interface.

Building on the new California direction, I created a set of warmer secondary colors that complemented the existing palette. The colors were derived from brand photography and refined through systematic HEX-value adjustments, giving Orion stronger accent options without losing its connection to Alaska’s visual identity. This color extension was approved by the Brand team and was subsequently integrated into the marketing brand guidelines.