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.
Our Approach
The Product System is built around a simple idea: shared work benefits everyone. By partnering with teams across the organization, the system curates tools and standards that meet the most common needs for the most product teams, including what's broadly useful, omitting what isn't. The result is a design system that helps teams build branded, cohesive products that are accessible to all users, responsive across devices, and adaptable as needs evolve.
Using This Section
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.
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.
Patterns
Patterns provide documented standards and reusable combinations of components for common user problems and interactions. Using patterns help create experiences that feel cohesive and natural for our users as they move between applications. Patterns are designed using the system guidelines and components.
