Constants

A constant is a reusable design decision expressed as a property-value pair. Constants are threaded throughout MDS components to maintain a consistent visual style and are available for use by product teams.

About Constants

Constants include not just official System Colors, but how color is predictably applied to backgrounds, text, and borders in specific settings. Similarly, engineers are not limited to generic spacer values, but can instead compose components more intentionally with Space insets, stack values, and other choices.

Constants as Data and Variables

Constants are managed in constants/constants.yaml, using YAML syntax to encode property-value pairs with a hierarchy.

The MDS build process transforms constants.yaml into additional generated files for use within this System site and by those using MDS:

  • constants/constants.json
    to automate documentation produced by MDS documentation templates.
  • constants/constants.scss
    used by MDS components (in components/[component-name]/[component-name].scss), and for product teams when composing custom styles.

Constants in MDS Components

Constants are used throughout the MDS library. For example, the Pagination component style in components/pagination/pagination.scss includes constants for border color, text color, font family and font size:

border: $mds-border-control-on-all-backgrounds;
color: $mds-text-color-primary-default;
font-family: $mds-font-family-sans-serif;
font-size: $mds-font-size-s;

All components are built with and reviewed for appropriate constant use.

Styling Custom Components With Constants

A product team may want to adopt the Morningstar visual language but has limited or no bandwidth to change HTML markup within their product. In this case, a product team can apply MDS constants using SASS variables by following these steps:

  1. Integrate a dependency on node_modules/morningstar-design-system/constants/constants.scss within their style compilation, enabling access to constants as variables within a product’s environment.
  2. Apply constants to components and features developed within their product.

For example, consider a module repeated across a view. If a team wanted to update the module’s header (div.layout__header), but were unable to modify the markup, they could apply constants as SASS variables to update only CSS.

Existing Markup

<div class=”layout__component”>
    <div class=”layout__header”>
    </div>
    <div class=”layout__component-wrapper”>
    </div>
</div>

Existing Style

.layout__header {
    background-color: #ccc;
    border-bottom: 1px solid rgba(0, 0, 0, 0.02);
}

Revised Style, With Constants

.layout__header {
    background-color: $mds-background-color-light;
    border-bottom: $mds-border-separator-default;
}

Editing and Proposing Constants

Constants are managed by MDS designers in collaboration with the Morningstar design community. We add constants conservatively. Please be prepared to justify the addition of a constant by showing how it would be used across many MDS components. To request extensions or changes to the constants, email [email protected].

Current Constants

Border

See the Borders page for guidelines on constant use.

Variable Name Value
$mds-border-header-primary-on-white solid 2px #333333
$mds-border-header-primary-on-light-gray solid 2px #1e1e1e
$mds-border-header-primary-on-dark-gray solid 2px #e5e5e5
$mds-border-header-primary-on-black solid 2px #e5e5e5
$mds-border-header-secondary-on-white solid 1px #808080
$mds-border-header-secondary-on-light-gray solid 1px #808080
$mds-border-header-secondary-on-dark-gray solid 1px #808080
$mds-border-header-secondary-on-black solid 1px #808080
$mds-border-header-tertiary-on-white solid 1px #e5e5e5
$mds-border-header-tertiary-on-light-gray solid 1px #cccccc
$mds-border-header-tertiary-on-dark-gray solid 1px #333333
$mds-border-header-tertiary-on-black solid 1px #333333
$mds-border-separator-on-white solid 1px #e5e5e5
$mds-border-separator-on-light-gray solid 1px #cccccc
$mds-border-separator-on-dark-gray solid 1px #333333
$mds-border-separator-on-black solid 1px #333333
$mds-border-separator-on-title solid 2px #333333
$mds-border-separator-color-on-white
#e5e5e5
$mds-border-separator-color-on-light-gray
#cccccc
$mds-border-separator-color-on-dark-gray
#333333
$mds-border-separator-color-on-black
#333333
$mds-border-control-on-all-backgrounds solid 1px #808080
$mds-border-control-color
#808080
$mds-border-container-on-all-backgrounds solid 1px #cccccc
$mds-border-container-color-default
#cccccc
$mds-border-disabled solid 1px #808080
$mds-border-radius-panel 6px
$mds-border-radius-pill 24px
$mds-border-radius-round 50%
$mds-border-radius-s 2px

Color

Background

See the Backgrounds section of the Color page for guidelines on constant use.

Variable Name Value
$mds-background-color-white
#ffffff
$mds-background-color-light-gray
#f2f2f2
$mds-background-color-dark-gray
#1e1e1e
$mds-background-color-black
#000000
$mds-background-color-alternative-row-default
#e5e5e5
$mds-background-color-alternative-row-on-light
#e5e5e5
$mds-background-color-alternative-row-on-dark
#333333

Text

See the Text section of the Color page for guidelines on constant use.

Variable Name Value
$mds-text-color-primary-default
#1e1e1e
$mds-text-color-primary-on-light
#1e1e1e
$mds-text-color-primary-on-dark
#ffffff
$mds-text-color-secondary-default
#5e5e5e
$mds-text-color-secondary-on-light
#5e5e5e
$mds-text-color-secondary-on-dark
#ababab
$mds-text-color-link-default
#006fba
$mds-text-color-link-on-light
#006fba
$mds-text-color-link-on-dark
#008dde
$mds-text-color-error-default
#de0000
$mds-text-color-error-on-light
#de0000
$mds-text-color-error-on-dark
#ff3300
$mds-text-color-performance-negative-on-light
#de0000
$mds-text-color-performance-negative-on-dark
#ff3300
$mds-text-color-performance-neutral-on-light
#5e5e5e
$mds-text-color-performance-neutral-on-dark
#ababab
$mds-text-color-performance-positive-on-light
#008020
$mds-text-color-performance-positive-on-dark
#00af41

Interactive

See the Interactive section of the Color page for guidelines on constant use.

Variable Name Value
$mds-interactive-color-primary-default
#0077cf
$mds-interactive-color-primary-hover
#005ba1
$mds-interactive-color-primary-focus
#005ba1
$mds-interactive-color-primary-active
#004376
$mds-interactive-color-secondary-primary transparent
$mds-interactive-color-secondary-hover
#5e5e5e
$mds-interactive-color-secondary-focus
#5e5e5e
$mds-interactive-color-secondary-active-on-light
#333333
$mds-interactive-color-secondary-active-on-dark
#e5e5e5
$mds-interactive-color-disabled-on-light
#808080
$mds-interactive-color-disabled-on-dark
#ababab

Feedback

Variable Name Value
$mds-feedback-color-info
#f2f2f2
$mds-feedback-color-error
#ff0000
$mds-feedback-color-error-background
#ffe5e5
$mds-feedback-color-warning
#f5c400
$mds-feedback-color-warning-background
#fef9e5
$mds-feedback-color-success
#00af41
$mds-feedback-color-success-background
#e5f7eb

Visualization

See the Color section of the Charts Visual Language page for guidelines on constant use.

Variable Name Value
$mds-visualization-color-asset-allocation-equity
#1f55a5
$mds-visualization-color-asset-allocation-fixed-income
#ef7622
$mds-visualization-color-asset-allocation-alternative
#a50032
$mds-visualization-color-asset-allocation-cash
#518428
$mds-visualization-color-asset-allocation-other
#f5c400
$mds-visualization-color-asset-allocation-not-classified
#e5e5e5
$mds-visualization-color-correlation-positive
#1f55a5
$mds-visualization-color-correlation-negative
#ef7622
$mds-visualization-color-sector-cyclical
#ef7622
$mds-visualization-color-sector-sensitive
#1f55a5
$mds-visualization-color-sector-defensive
#518428
$mds-visualization-color-sustainability
#1f55a5
$mds-visualization-color-valuation-under
#00a8e1
$mds-visualization-color-valuation-fair
#e5efef
$mds-visualization-color-valuation-over
#ef7622
$mds-visualization-color-performance-positive
#00af41
$mds-visualization-color-performance-neutral
#e5e5e5
$mds-visualization-color-performance-negative
#ff0000

Chart

See the Chart section of the Charts Visual Language page for guidelines on constant use.

Variable Name Value
$mds-chart-color-1
#1f55a5
$mds-chart-color-2
#a50032
$mds-chart-color-3
#f5c400
$mds-chart-color-4
#518428
$mds-chart-color-5
#00a8e1
$mds-chart-color-6
#6a4c9e
$mds-chart-color-7
#ef7622
$mds-chart-color-8
#005f5f
$mds-chart-color-9
#00af41
$mds-chart-color-10
#e60546
$mds-chart-color-11
#7d256f
$mds-chart-color-12
#c19c31
$mds-chart-color-13
#00beaf
$mds-chart-color-14
#ff3c00
$mds-chart-color-15
#89bd40

Generic

See the Generic section of the Color page for guidelines on constant use.

Variable Name Value
$mds-color-white
#ffffff
$mds-color-black
#000000
$mds-color-neutral-12
#1e1e1e
$mds-color-neutral-20
#333333
$mds-color-neutral-37
#5e5e5e
$mds-color-neutral-50
#808080
$mds-color-neutral-67
#ababab
$mds-color-neutral-80
#cccccc
$mds-color-neutral-90
#e5e5e5
$mds-color-neutral-95
#f2f2f2
$mds-color-blue-38
#1f55a5
$mds-color-green-34
#00af41
$mds-color-dark-green-34
#518428
$mds-color-teal-19
#005f5f
$mds-color-violet-46
#6a4c9e
$mds-color-cyan-44
#00a8e1
$mds-color-maroon-32
#a50032
$mds-color-red-50
#ff0000
$mds-color-yellow-48
#f5c400
$mds-color-orange-54
#ef7622

Font

See the Typography page for guidelines on constant use.

Variable Name Value
$mds-font-family-sans-serif 'Univers', HelveticaNeue, 'Helvetica Neue', Helvetica, Arial, sans-serif
$mds-font-family-monospace 'Lucida Sans Typewriter', 'Lucida Console', monaco, 'Bitstream Vera Sans Mono', monospace
$mds-font-weight-thin 200
$mds-font-weight-light 300
$mds-font-weight-regular 400
$mds-font-weight-bold 600
$mds-font-size-xs 10px
$mds-font-size-s 14px
$mds-font-size-m 16px
$mds-font-size-l 20px
$mds-font-size-heading-level-1 45px
$mds-font-size-heading-level-2 32px
$mds-font-size-heading-level-3 28px
$mds-font-size-heading-level-4 23px
$mds-font-size-heading-level-5 20px
$mds-font-size-heading-level-6 18px
$mds-font-size-code 12px
$mds-font-line-height-headings 1.2
$mds-font-line-height-body 1.375

Layering

See the Layering page for guidelines on constant use.

Variable Name Value
$mds-z-index-low 1
$mds-z-index-sticky 100
$mds-z-index-modal-overlay 800
$mds-z-index-modal-content 810
$mds-z-index-top-of-the-world 900

Opacity

Variable Name Value
$mds-opacity-disabled .4
$mds-opacity-overlay .5

Shadow

Variable Name Value
$mds-box-shadow-drop 0 2px 4px 0 rgba(0, 0, 0, .2)
$mds-box-shadow-focus 0 0 4px 2px rgba(#0077cf, .8)

Size

Variable Name Value
$mds-size-icon-s 15px
$mds-size-icon-m 23px
$mds-size-element-height-s 24px
$mds-size-element-height-m 29px
$mds-size-element-height-l 40px

Space

See the Space page for guidelines on constant use.

Variable Name Value
$mds-space-quarter-x 2px
$mds-space-half-x 4px
$mds-space-three-quarter-x 6px
$mds-space-1-x 8px
$mds-space-1-and-a-half-x 12px
$mds-space-2-x 16px
$mds-space-3-x 24px
$mds-space-4-x 32px
$mds-space-8-x 64px
$mds-space-inset-quarter-x 2px
$mds-space-inset-half-x 4px
$mds-space-inset-three-quarter-x 6px
$mds-space-inset-1-x 8px
$mds-space-inset-1-and-a-half-x 12px
$mds-space-inset-2-x 16px
$mds-space-inset-3-x 24px
$mds-space-inset-4-x 32px
$mds-space-inset-8-x 64px
$mds-space-inset-stretch-s 6px 12px
$mds-space-inset-stretch-m 8px 16px
$mds-space-inset-stretch-l 12px 24px
$mds-space-inline-left-half-x 0 4px 0 0
$mds-space-inline-left-three-quarter-x 0 6px 0 0
$mds-space-inline-left-1-x 0 8px 0 0
$mds-space-inline-left-1-and-a-half-x 0 12px 0 0
$mds-space-inline-left-2-x 0 16px 0 0
$mds-space-inline-right-half-x 0 0 0 4px
$mds-space-inline-right-three-quarter-x 0 0 0 6px
$mds-space-inline-right-1-x 0 0 0 8px
$mds-space-inline-right-1-and-a-half-x 0 0 0 12px
$mds-space-inline-right-2-x 0 0 0 16px
$mds-space-stack-quarter-x 0 0 2px
$mds-space-stack-half-x 0 0 4px
$mds-space-stack-three-quarter-x 0 0 6px
$mds-space-stack-1-x 0 0 8px
$mds-space-stack-1-and-a-half-x 0 0 12px
$mds-space-stack-2-x 0 0 16px
$mds-space-stack-3-x 0 0 24px
$mds-space-stack-4-x 0 0 32px
$mds-space-stack-8-x 0 0 64px

Transition

Variable Name Value
$mds-transition-color-link color, 300ms
©2018 Morningstar, Inc. All rights reserved. Terms of Use