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
Current Release v2.22.0 Download Sketch Assets
New Feature
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
New UX Pattern
Responsive Data Tables

A new UX pattern provides details on the different ways we approach data table responsiveness, as well as guidance on choosing the approach best suited for your product’s content.

Read the Pattern
Tech Talks
Building a Framework-Agnostic UI Library with Web Components

The Design System team hosts a Morningstar Tech Talk to share our journey building web components.

Watch on Vimeo
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:

  • Continuing to expand our growing library of MDS web components. Check out the component status page for more details.
  • Establishing and documenting our principles for adding animation to product experiences.
  • Providing responsive and touch-friendly variations of our UI components.
  • Exploring strategies for managing style dependencies within and across components.
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
Slack
#mds-design and #mds-engineering
Email
designsystem@morningstar.com