Morningstar Design System

Community Driven, Shared Value, Accessible Experiences

MDS is a collection of design and technical standards to help teams build high-quality, cohesive experiences.

Get Started
Illustration of components

What’s New

Introducing: MDS Patterns for Page Shell and Filter

Documented pattern standards and examples to help teams build cohesive and user friendly products.

Read Blog Post

MDS Adds Support for Vue 3

Updating MDS Components and Chart Elements to support Vue 3.

Read Announcement


Getting Started

Learn about the essential points of using and contributing to the Morningstar Design System.

MDS Blog

Stay up to date with the info on new features, best practices, what's to come in the future.

Figma Design Library

Customizable components and styles to help you design with MDS.


Looking to report a bug, request something new, or get additional help with the system?

Explore, Connect, and Contribute

The Morningstar Design System is powered and improved by the teams that use it. We’d love to hear your feedback.

Microsoft Teams: Morningstar Design System (MDS)
Email: [email protected]