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.36.0 Release Notes
Watch Latest Showcase Download Sketch Assets
MDS Version 3 beta components are now available

Built in Vue, with a modular architecture and encapsulated styles, this release will change the way product teams consume and contribute to MDS, while remaining true to the mission that has guided MDS since its first release in 2017.

Beta components are available for internal testing purposes only, and are not supported for production use. For details, see the release announcement.

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)
Email
designsystem@morningstar.com