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.
$grey-600
#222222
$gold-400
#f1b82d
$red-400
#900000
Text
Note: Gold text on a white background, or reversed text on gold background, do not pass accessibility requirements for contrast.
$grey-600
#222222
$gold-400
#f1b82d
$red-400
#900000
$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
#ffffff
$grey-600
#222222
$grey-100
#f0f0f0
$gold-400
#f1b82d
$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
List Styles
list--button
makes button lists.
Inset Image Styles
Square images can be cropped in a circle with the circle
class. Linked images will have a hover effect.
Tiger fur backgrounds
Used to add emphasis to main call to action layers.
Black tiger fur
Gold tiger fur