Migration

The Morningstar Design Product System, also referred simply as “Product System,” is a completely new library built on newly designed foundations, including new color and typography styles. This introduces a refreshed user interface for product teams to comply with the updated brand standards.

While this is a brand-new library, it builds on packages and components from previous MDS libraries to support a smoother transition with minimal changes. Designers and developers can expect new design and code resources that maintain similar properties to past MDS releases, though they may look visually different and include some breaking changes. Any breaking changes will be detailed in the Migration tab for each component.

Design

MDPS is published in a new Figma library. In addition to this migration guide, there are additional migration notes more specific to the library component properties in the library file. See Design for more information about accessing and using the Figma library.

Develop

Components are distributed under the @mdps scope and are compatible with the Vue 3 framework. See Develop for installation and usage details.

In addition to the updates outlined in each component’s Migration tab, there are general updates that apply across all components. These should be treated as an additional step to consider when planning your migration for your product.

Components and packages have been renamed:

• Name space has been updated to mdps
• Constants renamed to Tokens
• Alert renamed to Block Message
• Button Group renamed to Segmented Button
• Profile Image renamed to Avatar

Additional foundational changes include:

• Color and token updates across components

• A new type scale, which affects overall component sizing

• An updated icon library and footprint, also impacting component sizing

• Spacing and padding adjustments that contribute to sizing changes

Color tokens have been updated and extended to support 9 core colors along with defined tints for each color. Only neutral has a 0 and 100 stop since those tokens contain solid white and black values.

All token names for colors have been renamed. See Tokens for a complete list of all color tokens. See Color Palettes for more design guidance on color application.

Typography has undergone a new system and calculation to support the new font, Morningstar Intrinsic. Sizes are now calculated relative to a base size. heading has been renamed to display. See Type for more guidance on typography application.

Typography mixins have been renamed and updated. body and heading mixins have been combined and now accept a prop to toggle display styles. See Code for Type for more guidance.

Space continues to use the same base-8 model with proportional tokens. More sizes have been added such as $mdps-space-1-and-a-quarter-x or 10px, $mdps-space-1-and-three-quarter-x or 14px, and $mdps-space-2-and-a-quarter-x or 18px. See Tokens for a complete list of all space tokens. See Space for more guidance on space application.