You are viewing legacy documentation. View the most recent documentation.

Adopting MDS

The Design System is flexible and allows for progressive adoption by product teams. The MDS team monitors adoption across the Morningstar product portfolio by tracking product progress across steps.


The Design System is adopted per product across gradual steps in priority order. These steps serve as milestones to track adoption across all products no matter the pace of an individual product team.

Step Criteria
Step 0
Non Adopter
  • Branding / visual language is out of date.
  • Product is obviously not complying with System.
  • Interface is dated and inconsistent with latest conventions.
Step 1
Plan & Dependency
  • Codebase has system NPM dependency.
  • Team has compiled, tuned, and organized System assets for integration and extension.
  • Team shows adoption commitment via roadmap and backlog.
Step 2
Visual Language
  • Color
  • Typography
  • Icons
  • Constants applied to non-MDS components.

No more than 9 months behind latest release

Step 3
Priority Components
  • Buttons
  • Forms: Checkboxes, Radios, Text, Select
  • Switches
  • Data Tables
  • List Groups

No more than 6 months behind latest release

Step 4
Full Adoption

Team has adopted every relevant UI component, including:

  • Modals
  • Dialogs
  • Notifications

No more than 3 months behind latest release



Product teams tend to adopt a design system’s UI Component library using one of two approaches:

  • Big Bang: Across several sprints, a product team stops all other work to remove an old system and install the Morningstar Design System. This concentrated period slows a product’s work on new features, defects, and optimizations, but it cleanly and quickly applies the Design System so that a product can move forward confident that adoption is complete.
  • Incremental: Due to existing commitments and competing priorities, a product team may choose to adopt MDS over a longer period of time. As such, the team may fold in tasks of replacing existing product features with MDS features alongside other work. Adoption steps tied to specific dates or sprints can provide a helpful barometer of intermediate goals and also help teams understand in what order MDS features should be adopted.

Working With the MDS Team

When considering adoption, contact the MDS team at [email protected] to schedule time to discuss your objectives and approach. This collaborative conversation will help you identify the following for your product’s adoption:

  • Approach: Will it be a “Big Bang” or “Incremental” adoption of the System?
  • Timing: When might you start design and engineering work (potentially need more support) and complete the adoption process?
  • Priorities: What MDS features are most relevant to your product? Knowing this will help the MDS team to recommend effective techniques and shortcuts for planning and breaking down the work.
  • Depth: Not every MDS feature may be relevant or feasible to integrate into your product. What are the priorities and/or limitations?
  • Customization: How can you extend MDS to suit your product’s needs, and are any of those extensions relevant for the MDS team to support within the library itself?
©2020 Morningstar, Inc. All rights reserved. Terms of Use