Morningstar Design System (MDS)

The Morningstar Design System (MDS) is the design system behind Morningstar's professional and customer-facing products, published at designsystem.morningstar.com. Keeping a design system alive takes regular updates and constant syncs with developers, and the products it serves include data-dense financial pages like Advisor Workstation, where readability is everything.

Decisions

Typography built for data-dense pages. For my typography contribution I defined the type scale, line heights, and font pairing rules. Financial pages are data-dense, so readability was everything.

Motion that stays out of the way of the data. For animation I set timing curves, duration standards, and interaction patterns that feel consistent without distracting from the data.

Outcome

The updated MDS shipped with the redesigned Advisor Workstation and rolled out across Morningstar's professional and customer-facing products. I was a contributor to MDS, not its owner. Working on the Advisor Workstation team, from 2016 as Senior Visual Designer and in 2021 as Design Lead, I implemented MDS in Advisor Workstation and contributed components, patterns, and the typography and animation guidelines to the system.

Screens

The home page of the public MDS documentation site.