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.32.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.

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
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
MDS Coverage
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
MDS Objectives
What’s Next?
  • Complete
  • In Progress
  • Upcoming
UI Components
Extend our library of UI components
Status
Item
Multi-Select Combo Box
Search Results
Empty State
MDS Coverage
Help product teams improve the depth and resilience of MDS coverage
Status
Item
Office hours
Self-service coverage tool
Iconography
Improve visual language by updating our iconography
Status
Item
Consolidate to single set of icons
Refresh style (stroke width, etc.)
Redesign selected icons
MDS Version 3 Coming in 2020
MDS components for Vue, modular packaging, improved components, and more!
Status
Item
MDS Components for Vue
Component packaging
Improved Data Tables
Alpha Release
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)