For over 40 years, investors worldwide have depended on Morningstar for its trusted research and data. While the core of what Morningstar delivers hasn’t changed, the way it’s delivered has.

Morningstar Design System was originally released in 2017 with a basic library of components and guidelines that teams used to build products more quickly. However, as the number of products multiplied, technical and design debt grew. Greater expectation for consistency across complex customer journeys, along with increasing regulations around accessibility, led teams to override styles and fork components.

Design systems begin with strong points of view on foundational elements like color, typography, and layout. While these styles should be rooted in good design craft, they must also be governed by an underlying mathematical logic of ratios, sequences, and other measurable relationships to handle the demands of a modern design system.

Drawn from the Morningstar color palette, the colors used in the design system are mathematically defined and organized sequentially into ramps with predictable steps from light to dark. Special attention was taken to ensure similar contrast ratios across colors to simplify theme creation and achieve minimum contrast ratios as required by Web Content Accessibility Guidelines (WCAG).

Like colors, the typography in the design system is mathematically defined where ratios determine the sizes of headings, body text, and micro text. Starting from a base unit of 16 pixels, text sizes moves up and down the type scale at a defined ratio. And because the typeface, Morningstar Intrinsic, was custom drawn to perform well on text- and data-heavy layouts, it remains remarkably readable even at the smallest sizes.

Icons share similar formal qualities with the typeface and scale proportionally to the type scale. They are organized into a library where each icon is tagged with common metaphors to encourage consistent use.

The foundational elements come together to form the components of the system. Designed with modularity in mind and organized into semantic and contextual layers, the components balance both maintainability and flexibility. Variants of the same component share the identical structure and behavior but allow the design system to adapt to all digital experiences, from product interfaces to marketing landing pages.

In products, users perform a diverse set of tasks like navigating dashboards, analyzing investment data, or creating client reports. To most efficiently organize content-heavy screens and guide users through complex tasks, styles and components need to be chosen and assembled purposefully. When products are built in a predictable manner, their consistency builds trust and confidence.

Whereas products demand restraint, marketing experiences open up the possibility to rich visual storytelling. More expressive variants of the same components used in product now bring color, texture, and depth to a marketing layout.

Documentation is critical. Otherwise, a design system remains a disorganized collection of components, tokens, and code. The documentation site showcases system components and patterns in use and serves as the authoritative repository and knowledge base designers and developers need. An artificial intelligence interface layer fed by site content and data help them navigate the guidance faster.