Style Guide

HTML tags define default Heading styles. Use Heading classes when the typography style doesn't match the default HTML tag.

Heading 1

Heading Style H1

Heading 1

Heading 2

Heading Style H2

Heading 2

Headign 3

Heading Style H3

Headign 3

Heading 4

Heading Style H4

Heading 4

Other HTML Tags

HTML tags define default text styles.

All paragraphs

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

All links

All Links

All quotes

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website.

All Ordered Lists

Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present.

All Unordered Lists

Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present.

Text Classes

Text classes when typography style doesn't match the default HTML tag.

Text Sizes

Text Size Large

Sample text is being used as a placeholder for real text that is normally present.

Text Size Medium

Sample text is being used as a placeholder for real text that is normally present on your website.

Text Size Regular

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website.

Text Size Small

Sample text is being used as a placeholder for real text that is normally present on your website. Sample text helps you understand how real text may look on your website.

Text Size Tiny

Sample text is being used as a placeholder for real text that is normally present on your website. Sample text helps you understand how real text may look on your website.

Text Styles

Text Style Strikethrough

Text Style Italic

Style Guide Label

Text Style Muted

Text Style Allcaps

Text Style Nowrap

Text Style Link

Text Weights

Text Weight Xbold

Text Weight Bold

Text Weight Semibold

Text Weight Medium

Text Weight Normal

Text Weight Light

Text Alignments

Text Align Left

Text Align Center

Text Align Right

Spacers

Unified spacer system for the project.

spacer-tiny

spacer-xxsmall

spacer-xsmall

spacer-small

spacer-medium

spacer-large

spacer-xlarge

spacer-xxlarge

spacer-huge

Colors

Our design system leverages a purposeful set of color styles as the perfect starting point for any brand or project. When it comes to color, contrast is critical for ensuring text is legible. We've added WCAG 2.2 contrast ratios to our color system so you can make sure you're designing with accessibility in mind.

#FDFDFD

#FAFAFA

100

#FDFDFD

200

#F5F5F5

300

#D5D7DA

400

#A4A7AE

500

#A4A7AE

600

#A4A7AE

700

#A4A7AE

800

#A4A7AE

900

#181D27

#E6F3F3

#CEE6E7

100

#B5DADB

200

#9DCDCF

300

#84C1C3

400

#A4A7AE

500

#53A8AB

600

#3A9B9F

700

#218286

800

#054E51

900

#043436

White

#FFFFFF

Black

#000000

Sea Green

#36A756

Cinnabar

#E7433A

Orange-Yellow

#A4A7AE

Waterspout

#9CF1F4

Sea Serpent

#49C2C6

MSU Green

#174042

Charleston

#272727

Text Colors

Text Color Primary

Text Color White

Text Color Black

Text Color Gray/500

Text Color Alternate

Text Color Secondary

Style Guide

Heading 1

Heading 1

Heading 2

Heading 2

Headign 3

Headign 3

Heading 4

Heading 4

Sample text is being used as a placeholder. Sample text helps you understand how real text may look. Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look.

Sample text is being used as a placeholder. Sample text helps you understand how real text may look. Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look.

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look. Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look.

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look. Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look.

Other HTML Tags

Text Classes

Text Sizes

Text Styles

Text Weights

Text Alignments

Spacers

Colors

Text Colors