Design Style Guide

These are admissions-specific styles for developers in addition to what the Mizzou Framework provides.

Typography

Headers

Header formatting is styled for H1-H6

Header 1

Header 2

Header 3

Header 4

Header 5
Header 6

Colors

Primary

The Admissions design is based on these three colors. Red is used only for accents. Use beautiful photography to introduce more color in layouts.

Black
$grey-600
#222222
Gold
$gold-400
#f1b82d
Red
$red-400
#900000

Text

Note: Gold text on a white background, or reversed text on gold background, do not pass accessibility requirements for contrast.

Black
$grey-600
#222222
Gold
$gold-400
#f1b82d
Red
$red-400
#900000
Reversed
$grey-100
#f0f0f0

Background

Note: Gold text on a white background, or reversed text on gold background, do not pass accessibility requirements for contrast.

White
$white
#ffffff
Black
$grey-600
#222222
Light Grey
$grey-100
#f0f0f0
Gold
$gold-400
#f1b82d
Light Gold
$gold-100
#fff4d6

Typography

Heading two

Heading three

Heading four

Proxima Nova is the primary typeface. The weights used are $font-light, $font-normal, $font-xbold.

  • $font-light is used for H1 headings and changes to $font-thin on large screens.
  • $font-xbold is used for bold H2-H6 headings and buttons.
  • $font-light is used for body copy.
  • $font-normal is used for navigation links.

Button Styles

Use these for call-to-action links. They inherit the parent element's font size. Base class is button and modifiers are button--apply and button button--outline

Apply to Mizzou Standard Outline

Inset Image Styles

Square images can be cropped in a circle with the circle class. Linked images will have a hover effect.

placeholder
placeholder

Tiger fur backgrounds

Used to add emphasis to main call to action layers.

Black tiger fur





Gold tiger fur