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.35.0 Release Notes
Watch Latest Showcase Download Sketch Assets
MDS Version 3

Coming in 2020, the full library of MDS UI components will be re-engineered and available as Vue components and the existing library of V2 web components will be deprecated. The new release will also feature a modular architecture, a redesigned documentation site, and many other updates and enhancements.

To learn more about why we are making these changes and what they mean for product teams, read this blog post.

VueJS logo.
Visual Language
Animation

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

See Our Guidance
Animated gif displaying examples of Morningstar's animation style.
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
Morningstar buttons in small, medium, large and touch sizes.
MDS Adoption
MDS Coverage Tool

The MDS Coverage Tool allows product teams to assess their MDS adoption by highlighting MDS components used within an application. Click the button below to learn more.

Try It Yourself
Example diagram of the coverage tool highlighting MDS components on a page.
MDS Objectives
What’s Next?
  • Complete
  • In Progress
  • Upcoming
MDS Adoption
Help product teams assess their MDS coverage & utilization
Status
Item
Coverage tool
Component usage
Stress-testing tool
MDS Version 3
MDS components for Vue, modular packaging, improved components, and more!
Status
Item
MDS Components for Vue
Component packaging
Enhanced Data Table
Iconography
Improve visual language by updating our iconography
Status
Item
Consolidate to single set of icons
Refresh style (stroke width, etc.)
Redesign selected icons
Data Visualization Discovery
Establish plans for the next iteration of our data visualization library
Status
Item
Establish working group
Principles and objectives
Road map & prioritization
Illustration of floating chat bubbles.
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)