About

The Morningstar Product System provides a shared language and approach for building our products and enhancing collaboration between designers, engineers, and product leaders. By designing and building with the system, teams create cohesive customer experiences and stay aligned with the latest design standards as our language evolves.

Guidelines

Foundational assets and standards for building Morningstar-branded product experiences include color palettes, type, UI icons, spacing, illustrations, and micro animations.

Components

The Product System translates foundational guidelines into reusable Vue 3 components like buttons, cards, and data tables. By solving many common implementation challenges, Product System components offer the most robust path for teams to build and maintain Morningstar-branded product experiences.

Teams using Product System components have full access to support to resolve technical issues. If teams choose not to build with Product System components, they are responsible for maintaining their implementation, resolving issues, and updating their code as standards evolve.

Design Assets

Figma libraries of all Product System components and charts are available to allow teams to design, share, and build Morningstar-branded products and capabilities.

Assets Not Provided

The Product System does not provide complex capabilities or fully configured experiences. Instead we deliver simple, composable elements that teams can apply to their needs. Product System components:

  • Do not contain hard-coded assumptions about data or business logic.
  • Are stateless. State is managed by applications, not components.
  • 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 Product System tokens and guidelines to build their own implementation. Our team will continue to reassess the need to support other frameworks.