Stardust Design System

Design system supporting the Playbook ecosystem

Like so many other software tools, Playbook started out as an amalgamation of many visual styles, user interface components, and snippets of code. However, as Playbook was adapted for use in other domains, complexity increased and the need to unify became more and more apparent. The Stardust Design System is an effort to address these needs. It is a self-directed, from-the-ground-up effort with the goals of standardizing many of Playbook’s components and improving usability tool-wide. At the same time, the design system has the benefit of revamping both the design and implementation processes of the Playbook development team.

Role: Design Lead

Contribution: Design System Development, UX/UI Design, Design Strategy, Design Education

Team/Timeframe: NASA/Current

Color

Color use is an extremely important topic for spaceflight tools. Historically, NASA software has reserved certain colors to indicate certain states; for example, shades of red typically alert users to various states of failure, while greens are assigned to affordances that convey positive action. These existing principles helped our team develop an expanded, systematic color palette for Playbook. With Stardust, color use within the Playbook is purposeful and consistent.

Iconography & Typography

While many aspects of NASA’s flight software systems date back decades, Playbook is meant to be a next-generation tool. This means our team strives to bring as much of the usability standards from modern consumer applications to Playbook as possible. Stardust’s custom iconography and typography plays a huge part in conveying usability, as they are primary affordances for what users can do within the tool.

Elevation

In Stardust, elevation is used as a conceptual model for the “how” and “why” of Playbook behavior. The tool is divided into multiple “layers,” with each have a specific purpose. Having these concepts clearly defined in the design system speeds up the design process because decisions that previously had to have been made ad hoc are now embedded within a standardized document.