Bringing the Astro Web Design System to iOS
This story has been updated for a new version of Astro and Astro Platforms.
Bringing a web design system to native mobile is not a simple task. Interface paradigms, user expectations, hardware capabilities, technologies, and tools differ widely between the platforms.
The Astro Space UX Design System is a web design system created by Rocket Communications for the US Air Force and the US Space Force, intended for complex technical applications, such as satellite control or predictions of collisions in space. Astro web apps are replacing legacy desktop apps in an effort to bring changes to warfighters faster.
Astro users and stakeholders, however, want to go beyond the desktop. They want modern companion apps on phones and tablets, for access to critical information on-the-go. We decided to bring Astro’s foundations to iOS to support those apps in the future.
We began by identifying the most meaningful and unique parts of the design system. What makes an Astro app recognizable and provides consistency, precision, and accessibility? What parts of a web design system make sense in a mobile environment?
We introduced Astro into Xcode, the iOS programming environment, through a pair of open source Swift packages, Astro Swift Core and Astro Swift Foundation, and Astro Stations, an open source sample application.
Colors
The first thing you’re likely to notice about an Astro application is the dark blue color theme. (Although Astro has both light and dark themes, developers and users typically prefer the dark theme.) Bringing Astro’s signature colors to iOS was the appropriate place to start.
Astro includes four broad palettes of Core UI Colors. These are applied to specific uses, like table cells or labels, as named Semantic UI Colors, which include light and dark variants that automatically respond to system changes.
Astro also includes six special Status Colors, which are key to Astro’s success in technical space apps, where previously a cacophony of status colors confused and misled users. These are also imported to iOS with light and dark variants.
And finally, Classification Colors indicate government secrecy levels.
All Astro colors are included as both Xcode assets (for use in the design environment), and as extensions to UIColor (for use in code).
iOS apps are not built for color themes. There is no single point where colors can be applied for use throughout. Instead, customization must be applied to individual UI elements, which is often tricky. The Astro Stations sample application demonstrates the application of Astro colors throughout a UIKit application.
iOS’s sophisticated translucency causes some UI colors to be influenced by content beneath. We’ve found that these small variations do not compromise Astro’s color harmony.
Fonts
In contrast to Astro’s distinctive color theme, Astro’s web font is less fundamental to its identity. Astro version 5 switched from Open Sans to Roboto to unify with other design systems used in US Space Force Cross Mission Ground (ECX), with the goal of having a readable, familiar, functional sans-serif font.
iOS fonts have also changed over the years, recently shifting to the SF family of fonts, which are specially developed for readability on high resolution screens, and which support the important accessibility features not available with web fonts.
As with colors, iOS apps are not built for simple font customization. Each component must be customized-though it is not always feasible-leading to an inevitable mix of fonts throughout an app.
We felt that the advanced features of the SF font family, its high readability, and the familiar native appearance warranted its use as the Astro font on iOS.
Images and Icons
Just as Astro’s Status Colors have been key to improving user success, so have the associated Status Symbols. These symbols match the Status Colors with distinct shapes, to improve rapid recognition, and aid users with limited vision.
Astro also includes a small number of standard icons, which have also been imported to iOS. Images and Icons are included both as xCode assets, and as extensions to UIImage.
In Astro’s Web SDK, images are in vector format as SVG. iOS is traditionally a bitmap environment, but offers limited support for vector images as PDF and SVG.
A great new way to support small images in iOS is custom SF Symbols, which are time consuming to create, but excel at matching the weights and styles of the system font. We’ve experimented with importing Astro’s antenna icon as an SF Symbol in the sample app, with promising results.
In the first edition of the Astro Swift Packages, we introduced images and icons as PDF. Going forward, we plan to shift to SVG, bitmap, and SF Symbols as appropriate.
Components
The web is a blank slate, so web design systems are centered on consistent and complete sets of UI components. iOS, however, has its own familiar components, optimized for touch. Importing basic web components is unnecessary, and may even diminish the mobile experience.
Astro also includes specialized components for space and government applications, including a mission clock, classification markings, and complex monitoring icons.
The first edition of the Astro Swift Packages includes a Status View component, built upon Astro’s Status Colors and Status Symbols. Future versions will import more of the specialized space components, tuned for mobile devices.
One More Thing
Astro Swift Core and Astro Swift Foundation also bring Astro to macOS, watchOS and tvOS! We’re happy to bring Astro to these platforms and are excited about the unique and useful space applications that our community will build. We continue to look for ways to better support our developers and users and bring them the technologies they need.
About the Author: Jeff Hokit is a UX Fellow at Rocket, and led Astro’s original design.
