Trevor Curtis

Aileron

American Airline’s digital design system

Aileron is a design system documentation website I created for American Airlines

— PROJECT NAME

Aileron Design System


— ROLE

UI/UX Design

HTML / CSS / JS

Development Support


— DATE

Launched 2018

Aileron is the ultimate collection of visual design and user experience materials for all the digital products designed at American Airlines. In 2018, the design team at American began unifying around a single design language to make it easier to develop future digital products.


Aileron is based on an open-source design system site project called Fractal. In 2018 I began exploring how I could customize it to create a design system site for use at American Airlines.

AILERON

You can view the design system site for Aileron as it existed in 2019. Further refinements have been made since my departure. All library files have been removed and some links will not work without valid AA credentials.


CHECK IT OUT: Aileron Design System

Aileron is a combination of Sketch and Axure RP component libraries, font files for the American Sans typeface, custom icon fonts, and code. HTML, CSS, and JavaScript were written for an Angular front-end to produce new digital products at American Airlines.


Aileron made extensive use of Storybook to show live, coded design components for both designers and developers to inspect.