Style Guide — Web


Colors

Maroon
#7A0019
Maroon Dark
#580013
Maroon Light
#900021
Gold
#FFCC33
Gold Dark
#FFB71E
Gold Light
#FFDE7A
Black
#000000
White
#FFFFFF
Off White
#F7F7F7
Grey Lightest
#F1F1F1
Grey Lighter
#EEEEEE
Grey Light
#D5D5D5
Grey Mid Light
#AAAAAA
Grey Mid
#757575
Grey Mid Dark
#5A5A5A
Grey Dark
#444444
Grey Darker
#333333
Grey Darkest
#232323

Headings

Font: Source Serif 4

Heading 1 — 40px Desktop, 36px Mobile

Heading 2 — 32px Desktop, 28px Mobile

Heading 3 — 24px

Heading 4 — 20px

Heading 5 — 18px
Heading 6— 16px

Brand Font - Proxima Nova — close TO Gotham

Proxima Nova, 16px. Lorem ipsum dolor sit amet ligula taciti. Habitasse tempus ante rhoncus dictum penatibus. Hac bibendum egestas habitasse ridiculus efficitur erat nostra senectus aliquam id mattis. Dis inceptos diam vitae convallis rhoncus nec mattis eget mus. A taciti ut dignissim risus morbi dictumst nullam. Amet vestibulum fusce porta id convallis vivamus. Id nostra nibh eleifend luctus blandit ultricies vulputate. Viverra elementum placerat sapien justo fames est maximus eget etiam vestibulum taciti.


Paragraph

Open Sans, 16px. The default color for body text is #333333, Grey Darker. It is less fatiguing than pure black. A paragraph (from the Greek paragraphos, “to write beside” or “written beside”) is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.

Lorem ipsum dolor sit amet facilisis vestibulum sem elit pulvinar ligula iaculis. Lacus ullamcorper lacinia augue sit himenaeos mi viverra consectetuer erat hendrerit malesuada. Urna commodo dictum nibh metus malesuada. Purus fames lobortis sagittis maecenas ornare.


Inline elements

This is a text link. Links are Maroon Light (#900021) and have a bottom border of 20% opacity body text (Grey Darker, #333333)

This small text is small for for fine print, etc. Font size is 80% <small>

Strong is used to indicate strong importance <strong>. In normal circumstances, font-weight is 700 (bold)

This text has added emphasis <em>.

The u element is text with an unarticulated, though explicitly rendered, non-textual annotation <u>.

This text is deleted <del>, and This text is inserted. <ins>

This text has a strikethrough. <s>

Superscript®. <sup>

Subscript for things like H2O <sub>


Images

No <figure> element

Image alt text

Wrapped in a <figure> element, with a <figcaption>

Image alt text

Here is a caption for this image.

Buttons

UMN buttons

a.btn a.btn.btn-outline

a.btn.btn-maroon.btn-small a.btn.btn-maroon a.btn.btn-maroon.btn-wide

a.btn.btn-maroon.btn-full

a.btn.btn-gold a.btn.btn-grey a.btn.btn-give a.btn.btn-transparent