Astro is a design system that brings together UX guidelines, an HTML/CSS framework, and web components. Astro is for both designers and developers.
Astro is provided by the US Air Force Space and Missile System Center (SMC) and is currently sanctioned for designing Enterprise Ground Services (EGS) and SATOPS web apps.
Astro’s user-centered design approach includes interviews and design validation with many SMC and commercial space systems operators. By incorporating operators and subject matter experts in our research and gaining their feedback during the design process, Astro ensures future space apps meet the needs of their users. Refer to the information provided in the Research page for more information on incorporating a user-centered approach in your designs.
Astro’s designs stem from continuous exploration and research. Astro includes standard HTML and CSS sample code as a starting point for development. Astro’s UI Components are provided as Web Components, a platform neutral technology. While the Astro Components are not production-ready code, they do provide a blueprint of intended behavior and interaction to facilitate integration into your development workflow.
Before reading any further, we recommend you take a look at a live Astro sample application.
- Updated UI Components from EGS Monitoring Icon, Tree, Pop Up Menu, and Table
- New Storybook Component Sandbox
- New EGS Service Specific UX Designs for Telemetry, Tracking & Command (TT&C) and Ground Resource Management (GRM) services, including:
- Downloadable Design Specifications and Wireframes
- Astro Sample Apps with downloadable source code
- For GRM UX Design and sample apps, see About the GRM Designs
- For TT&C UX Design and sample apps, see About the TT&C Designs
- Expanded Downloads section with direct links to downloadable assets
- Preview release of Service Specific UX Design for TT&C and GRM based applications
- Expanded Support section with direct links to downloadable assets
- Astro 3.0 Design Language
- Almost every element in the library has been revisited improving legibility, accessibility and aesthetics
- Light user interface theme
- Astro now supports a light version of all components for use in brightly lit operational environments
- Polymer 3.0 support
- The elements in the web component library have been updated to support the latest release of Polymer
- Standardized color palettes with RGB, Hex and CSS Custom Property values
- Updated and expanded typography guidelines
- Grid spec recommendation
- Updated status colors and guidelines to ensure compatibility with WCAG 2.0, MIL Standard 2525D and 1472G
- Updated sample application supporting light and dark themes
- A new component sample sandbox to see all Astro components in a single area
- Expanded standard CSS library to include some library element previously only availble in the Web Component Library
- Bug fixes and performance improvements to CSS and Web Components