Building with Atmosphere
The Boeing design system offers two entry points for product development teams to begin building using the DLS or transition existings products to the DLS. The Global Assets Library and Global Angular Library are both published as NPM packages, available via the GitLab Package Registry.
NPM Packages
The Global Asset Library offers a framework-independent toolkit for any web-based product, with fonts, icons, global styles, and design tokens represented in multiple formats.
The Global Angular Library is the first framework-specific library, implementing the DLS as an Angular Material theme and custom Angular components.
Documentation
The Global Angular Library publishes a Storybook containing interactive demos of each component.
The Documentation Hub is the first consumer of the Global Angular Library and its source code can be viewed as a reference application for implementing the library.
The DLS technology ecosystem
Global Assets Library
The Global Assets Library provides the following to accelerate development of any web-based UX, according to the Boeing Atmosphere DLS specifications:
- Design tokens in multiple formats (CSS custom properties, SCSS variables, JavaScript, and JSON)
- A set of global styles and utility classes for typography, with font files and @font-face rules included
- SCSS mixins for typography and composite design tokens
- A customized Bootstrap build that includes the responsive grid and all utility classes
- Web-optimized SVG icons and icon sprite
Read more about how to contribute to or use the Global Assets Library in the GitLab repository.
Token service
The token service is a NodeJS application within the Global Assets Library repo that translates design tokens into code. The code outputs (variables or mixins) are all parsed directly from the token set defined in Tokens Studio within the Atmosphere Foundation and Components Library. Through automation the style code stays in sync with the design specification.
Read more about the token service in the GitLab repository.
Global Angular library
The Global Angular Library provides the following to accelerate development of Angular UX, according to the Boeing Atmosphere DLS specifications:
- Everything included in the Global Assets Library (it is installed as a dependency)
- A core Angular Material theme that defines the color palette (dark and light), typography config, and density
- Additional theme customizations for individual Angular Material components
- Angular module that loads the custom icon set as an SvgIconSet for use by the mat-icon component
- Custom Angular components
Read more about how to contribute to or use the Global Assets Library in the GitLab repository.
Other frameworks
While Angular is the first framework-specific implementation of Atmosphere components, the DLS development ecosystem was architected to support the development of multiple component libaries for other framewoks such as React, Vue, or Web Components.
The Global Assets Library should serve as the foundation and be a common dependency for each framework-specific implementation. With this architecture, any updates to design tokens will flow into all component libraries.
