The Maersk Design System includes a theming system based on design tokens that supports multiple brands e.g. Maersk and APM Terminals and mulitple appearances per brand e.g. light and dark.
The following themes are available as part of the Maersk Design System:
- Maersk light
- Maersk dark
- APM Terminals light
- APM Terminals dark
- Aliança light
- Aliança dark
- Captain Peter light
- Captain Peter dark
How to use the theme tokens
Designers
Out MDS:UI library to supports theme based variables allowing designers to switch between themes within design files.
You can find out more about Figma variable support in our video walkthrough.
Developers
For developers, we provide CSS variables that can be used to apply a theme in your web solution.
You can read more about how to use themes in the Develop section.