In alignment with Corportate Branding and Brandcentral, we’re pleased to announce that the Maersk Design System now fully supports the All The Way Brand Refresh!
This comprehensive update has been applied across the entire product, from Figma and code to what you see on the MDS website.
Automatic updates for designers
For designers using the MDS UI library, these changed will be applied to your new and existing designs when you update the library.
Once updated, simply continue using the components and you’ll benefit from the refreshed visual design language.
Developer updates
For developers, this update will be available when you upgrade to version 2.126.0.
We recommend reading the change log and plan your upgrade to take advantage of the new improvements.
Enhanced visual design language
We’ve introduced a new visual design language for colour roles and corner radius. You can read more about these in our design language section.
Updated buttons
The neutral filled button has been given a makeover to match the other filled buttons. This update makes it easier to differentiate the various neutral button variants and adds more options for your designs.
The secondary filled button for Maersk themes is now accessible and officially supported and the secondary plain button has been redesigned to match our primary link styling 🎉.
Learn more about these updated on our Button page.
New themes
We’re pleased to introduce several new themes:
- APM Terminals dark - A dark variant for APM Terminals
- Aliança light and dark - Complete theme support for Aliança
- Experimental APM Terminals theme - Aligned with our new visual design language for colour roles
Check them out in our Themes section.
Font update
The font has been updated to use the latest version from branding, version 5.0.0, with improvements for the characters I, Ø, O, 0, 8 and a new slash-zero.
Enhanced component exploration
We’ve made it significantly easier to explore and interact with our components on the MDS website. You can now:
- View how components look across our various themes
- Tweak “content, style and mode” options
- See the options to customise components in code with events, slots and CSS parts
Check out the Input component and click “Options” for an example of these new capabilities in action.
What’s next for the brand refresh?
We are working on additional enhancements to support the brand refresh. These include:
Other new MDS features coming soon!
As always, thank you for your continued support and feedback. Coming very soon we have new features including:
- Search in select and mult-select
- Typeahead with multi-select functionality
- New AI guidelines section
Please reach out to us if you have any questions about the All The Way Brand Refresh or need assistance with the upgrade!