The Morningstar Design System is a collection of brand, visual, UX, and technical standards built into a central library so that teams can quickly build high-quality, consistent experiences.
The MDS UI components you know and love, written in vanilla JavaScript, and now available for production use as custom elements with built-in support for interactions and behaviors.
New constants, new documentation, and updated UI component interactions provide the foundation for animation in the Morningstar Design System.
MDS now offers touch target-sized variations of many components—like Buttons, Forms, and List Groups—providing products with the parts to build accessible touch-screen experiences. See our release notes for a full list of supported components.
Here are some of the highlights of recent releases:
- Added a new Search Results web component.
- Published documentation for the Background Container component.
- Published documentation for the Button container.
- Added brand-approved favicon assets to the MDS package and published documentation for how to use these new assets.
- Added a new List Group with image variation, allowing you to pair an image with a list group item.
In addition to ongoing support for adopting teams and continuing to extend and support existing capabilities, the MDS team is actively working on:
- Extending our growing library of MDS UI Components with a redesigned, Web Component version of our existing Data Tables component. Check out the component status page for a list of available components.
- Improving the usability of our iconography, and aligning on a single set of icons to be used by all products.
- Modularizing our library by component, giving us more flexibility to quickly respond to customer and market needs.
- Supporting and enhancing MDS Web Components, while simultaneously helping product teams improve the overall depth and resilience of their MDS implementation.
The Morningstar Design System is powered and improved by the teams that use it. We’d love to hear your feedback.