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.30.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
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 Objectives
What’s Next?
  • Complete
  • In Progress
  • Upcoming
UI Components
Extend our library of UI components
Status
Name
Multi-Select Combo Box
Search Results
Empty State
Data Tables
Tabs
MDS Coverage
Help product teams improve the depth and resilience of MDS coverage
Status
Name
Office hours
Self-service coverage tool
MDS Tutorial
Component Packaging
Modularize packaging to respond more quickly to customer and market needs
Status
Name
Establish repository
Package components
Encapsulate styles
Iconography
Improve visual language by updating our iconography
Status
Name
Consolidate to single set of icons
Refresh style (stroke width, etc.)
Redesign selected icons
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)