Morrill Style Tile

This style tile includes common, base styles determined as part of the Office of the President redesign in 2015. Please contact urweb@umn.edu with any questions.

Color

The default text color is "dark gray" (#414042). First-level headings are also "dark gray". Second- and fourth-level headings are "dark blue" (#283868). Third-, fifth-, and sixth-level headings, as well as callouts are "blue green" (#3c7689).

  • maroon (#7a0019) with white for foreground/text color
  • dark blue (#283868)
    text-only
    with white for foreground/text color
  • blue green (#3c7689) with white for foreground/text color
  • light blue (#97bfbc) with dark-blue for foreground/text color
  • dark gray (#414042) with white for foreground/text color
  • med. gray (#66676a) with white for foreground/text color
  • light gray (#d5d6d2) with stormy for foreground/text color
  • lighter gray (#f0efee) with stormy for foreground/text color
  • off-white (#f9f7f6) with stormy for foreground/text color

Typography

Open Sans is used for headings. Georgia is used for body copy and callouts.

font-family: 'Open Sans', Helvetica, 'Helvetica Neue', 'Futura', Verdana, 'Geneva', sans-serif;
  font-family: Georgia, Times, "Times New Roman", serif;

Body Text

For standard body text we use a base font-size of 16px with a line-height of 24px (1.5em). On paragraph elements, there is a bottom margin of 10px (0.625em) and no margins in the other directions.

Callout

For callouts use Georgia 400 italic font-size of 17px (1.0625rem) and a line-height of 22px (1.375rem). The text color is blue-green (#3c7689). There is a bottom margin of 10px (0.625rem) and no margins in the other directions.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse at nisi vitae sem convallis blandit ut at diam. Cras ut eleifend mi.

Headings

Heading font-size ranges from 0.9375rem–1.75rem (15-28px). All headings use Open Sans for the font.

  1. Heading 1
  2. font-size: 1.75rem; // 28px
    line-height: 2.125rem; // 34px
    color: #414042;
    font-weight: 300;
    margin: 0 0 1rem; // 0 0 16px
    
  3. Heading 2
  4. font-size: 1.5rem; // 24px
    line-height: 1.9375rem; // 31px
    color: #283868;
    font-weight: 300;
    margin: 1.25rem 0 0.625rem; // 20px 0 10px
    
  5. Heading 3
  6. font-size: 1.0625rem; // 17px
    line-height: 1.4375rem; // 23px
    color: #3c7689;
    font-weight: 400;
    margin: 0.625rem 0 0.5rem; // 10px 0 8px
    
  7. Heading 4
  8. font-size: 0.9375rem; // 15px
    line-height: 1.25rem; // 20px
    color: #283868;
    font-weight: 400;
    margin: 0.625rem 0 0.125rem; // 10px 0 2px