Building Morningstar products with a design philosophy delivered in code.

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.

Get Started v2.27.0 Release Notes
Watch Latest Showcase Download Sketch Assets
UI Components
Introducing MDS Web Components

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.

Learn More Component Status
Visual Language

New constants, new documentation, and updated UI component interactions provide the foundation for animation in the Morningstar Design System.

See Our Guidance
UI Components
Touch-Friendly Components

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.

View Release Notes
What’s New

Here are some of the highlights of recent releases:

More Details…

What’s Next

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 new Search Results Web Component, as well as 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.
Talk Bubble Illustration
Explore. Contribute. Connect.

The Morningstar Design System is powered and improved by the teams that use it. We’d love to hear your feedback.

Make a Contribution Request a New Part
Microsoft Teams
Morningstar Design System (MDS)