About MDS
MDS is a collection of design and technical standards to help teams build high-quality, Morningstar-branded products.
MDS Mission
- Help Morningstar teams build branded, cohesive products that are accessible to all users, responsive across devices, and adaptable to changing market needs.
- Promote a collaborative culture that allows people, capabilities, and expertise to be shared across business units so that improvements to the design system introduced by one team are available to all.
Building For Shared Need
MDS partners with the community to curate tools and standards the meet the most common use cases for the largest number of product teams, following the mantra to include what is shared, omit what is not. For more on how we work, see our guiding principles.
What’s Included?
Assets maintained and supported by the MDS team include:
-
MDS Visual Language. Foundational assets and standards for building Morningstar-branded product experiences, including color, typography, iconography, spacing, illustrations, and animation.
-
MDS Vue components. A library of composable elements that translate MDS visual language into live components, with support for continuous delivery, automated updates, accessibile behaviors and brand standards built in. By solving many common implementation challenges, MDS Vue components offer the most robust path for teams to build and maintain Morningstar-branded product experiences.
-
Design Assets. Figma libraries of all MDS Components and charts, allowing teams to design, share, and collaborate to build Morningstar-branded products and capabilities.
How Can Teams Work With MDS
Product teams can integrate MDS assets in the manner that best fits the needs of their product.
-
MDS Vue Components offer the most robust implementation of MDS and Morningstar brand standards. Teams using MDS Vue components also have full access to MDS engineering support to resolve technical issues with MDS components.
-
Teams that choose not to build with MDS Vue components can adapt MDS constants and visual language to the needs of their product. Teams building in this manner have flexibility in the technologies they choose, but are responsible for maintaining their implementation, resolving issues, and updating their code as standards evolve.
-
All teams can make use of MDS design assets to design branded product experiences, colloborate with other designers, and share specifications with engineering partners.
MDS anchors a vibrant community of partners and contributors who collaborate through MS Teams, Figma, Showcases, and other ceremonies to build Morningstar product experiences.
What’s Not Included?
Following our guiding principle to put control for user experience in the hands of product teams, MDS does not provide complex capabilities or fully-configured experiences. Instead we deliver simple, composable elements that teams can adapt to their needs.
MDS elements:
- Do not contain hard-coded assumptions about data or business logic.
- Are stateless. State is managed by applications, not elements.
- Are not “accessible out of the box,” although they do include features to make accessibility as easy as possible to implement.
- Are not currently supported for frameworks other than Vue. Teams that require a different framework can use MDS constants and visual language to build their own implementation. MDS can still offer design support, and will continue to reassess the need to support other frameworks.
If your team needs a capability that is not supported by MDS, you can build it using existing MDS parts and share it with the design system. We welcome contributions!