Secondary

Use for supportive text, such as placeholder text in Forms, Data Table column headers, and metadata.

On White

$mds-text-color-secondary-on-light

#5e5e5e

AA

On Light

$mds-text-color-secondary-on-light

#5e5e5e

AA

On Dark

$mds-text-color-secondary-on-dark

#ababab

AA

On Black

$mds-text-color-secondary-on-dark

#ababab

AA

In this example, mds-text-color-secondary-on-light is used for text box placeholder text in Forms, as well as for the readout of disclosure information in small type (metadata).

Links

Link on White

$mds-text-color-link-on-light

#006fba

AA

Link on Light

$mds-text-color-link-on-light

#006fba

AA

Link on Dark

$mds-text-color-link-on-dark

#008dde

AA

Link on Black

$mds-text-color-link-on-dark

#008dde

AA

Error

Use to highlight errors. Error text color doesn't meet accessibility benchmarks for color contrast, so MDS is evaluating alternatives. In the interim, teams can still use this color in production.

On White

$mds-text-color-error-on-light

#ff0000

DNP

On Light

$mds-text-color-error-on-light

#ff0000

DNP

On Dark

$mds-text-color-error-on-dark

#ff0000

DNP

On Black

$mds-text-color-error-on-dark

#ff0000

DNP

Disabled

Use to indicate components that cannot be used. Disabled components are exempt from minimum contrast ratios.

On White

@include disabled-text()

On Light

@include disabled-text()

On Dark

@include disabled-text()

On Black

@include disabled-text()

Use the @include disabled-text(text-color) mixin on a component to render the disabled text color.

Visualization & Charts

We assign specific meanings and orders to colors to create clarity and consistency across widely-used data visualizations.

Asset Allocation

Use to tie data to asset classes.

Local Stocks

$mds-visualization-color-asset-allocation-local-stocks

#1f55a5

Non-Local Stocks

$mds-visualization-color-asset-allocation-non-local-stocks

#8faad2

Bonds

$mds-visualization-color-asset-allocation-bonds

#ef7622

Real Estate

$mds-visualization-color-asset-allocation-real-estate

#a50032

Cash

$mds-visualization-color-asset-allocation-cash

#518428

Other

$mds-visualization-color-asset-allocation-other

#f5c400

Not Classified

$mds-visualization-color-asset-allocation-not-classified

#e5e5e5

If a product does not use these exact terms when breaking down asset classes, use the color associated with the closest asset type. For example, Alternatives would use the color ascribed to Real Estate.

Never apply these colors to type, as they don’t meet Accessibility guidelines.

Sectors that underlie a larger Super Sector should inherit the color of the Super Sector. For example, Basic Materials would use the color ascribed to Cyclical.

Never apply these colors to type, as they don’t meet Accessibility guidelines.

Sustainability

Use to represent data related to the Morningstar Sustainability Rating.

Sustainability

$mds-visualization-color-sustainability

#1f55a5

Valuation

Use to represent under, fair, or over valuation.

Under

$mds-visualization-color-valuation-under

#00a8e1

Fair

$mds-visualization-color-valuation-fair

#e5efef

Over

$mds-visualization-color-valuation-over

#ef7622

Never apply these colors to type, as they don’t meet Accessibility guidelines.

Performance

Use to show positive, neutral, or negative performance in both text and visualizations. Positive and negative colors used on text don't meet accessibility benchmarks for color contrast, so MDS is evaluating alternatives. In the interim, teams can still use these colors in production.

Positive

$mds-visualization-color-performance-positive

#00af41

DNP

Neutral, Text

$mds-visualization-color-performance-neutral-text

#5e5e5e

AA

Neutral, Chart

$mds-visualization-color-performance-neutral-chart

#cccccc

DNP

Negative

$mds-visualization-color-performance-negative

#ff0000

DNP

Apply $mds-font-weight-bold as the font weight to typography using performance colors.

Do
use Neutral, Text in tables.
Don‘t
use Neutral, Chart in tables.

Do
use Neutral, Chart in visualizations.
Don‘t
use Neutral, Text in visualizations.

Use colors in order, starting with $mds-chart-color-1 and ascending in order to $mds-chart-color-15. If there are more than 15 items, begin again with $mds-chart-color-1.

This color order is intended to be a default for when there are not specific color meanings assigned to the data. Designers may deviate from the default when color can be used to communicate meaning.

Borders

Borders define and structure content.

Separators

On White

$mds-border-separator-default

solid 1px #e5e5e5

On Light

$mds-border-separator-on-light

solid 1px #cccccc

On Dark

$mds-border-separator-on-dark

solid 1px #333333

On Black

$mds-border-separator-on-dark

solid 1px #333333

Controls

On White

$mds-border-control-default

solid 1px #808080

On Light

$mds-border-control-default

solid 1px #808080

On Dark

$mds-border-control-default

solid 1px #808080

On Black

$mds-border-control-default

solid 1px #808080

Accessibility

Color contrast refers to the difference between foreground and background. The World Wide Web Consortium established specific color-contrast ratios for achieving compliance. The guidelines are split into three levels: A, AA, and AAA. The organizational benchmark for Morningstar products is Level AA.

The color decisions shared here reflect an adherence to a contrast ratio of at least 4.5:1. When possible, we recommend a ratio near 5.5:1, just to be safe. Never use any combinations that do not meet Level AA Guidelines.