Dark

The University of Michigan School of Dentistry uses a style guide to maintain consistency and clarity across all platforms. In general, the School's website uses the Bootstrap 4 framework.

COLORS

The School of Dentistry follows the color guidelines expressed on University of Michigan's Brand & Visual Guidelines.

COLOR HEX RGB PRIMARY USE
#00274c rgb(0, 39, 76) Background color, headers
#0071b3 rgb(0, 113, 179) Links
#ffcb05 rgb(255, 203, 5) Links (when background is #00274c), warning band background
#cc6600 rgb(204, 102, 0) Buttons, sub-headers

TYPOGRAPHY

The School of Dentistry uses Roboto Condensed for both body text and headers.

HEADERS

<h1>, <h2>, and <h3> headers use hex color #00274c.

<h1> is 3.3em with font-weight 700.

EXAMPLE

The University of Michigan School of Dentistry

HTML
<h1>The University of Michigan School of Dentistry</h1>

<h2> font-size is 2em and should be ALL CAPS.

EXAMPLE

DOCTOR OF DENTAL SURGERY

HTML
<h2>DOCTOR OF DENTAL SURGERY</h2>

For extra section separation, <h2> can be centered with a gray background. Use custom class "bg-um-gray".

EXAMPLE

DOCTOR OF DENTAL SURGERY

HTML
<h2 class="text-center bg-um-gray">DOCTOR OF DENTAL SURGERY</h2>

BODY TEXT

EXAMPLE

The University of Michigan School of Dentistry's mission is to advance health through education, service, research and discovery.

HTML
<p>The University of Michigan School of Dentistry's mission is to advance health through education, service, research and discovery.</p>

BUTTONS

The School of Dentistry uses three button styles. Use custom class "btn-um-orange" for most buttons.

EXAMPLE

ORANGE BUTTON
HTML
<a class="btn-um-orange" href="#">ORANGE BUTTON</a>

If a blue fill makes more sense in your design, use custom class "btn-um".

EXAMPLE

BLUE BUTTON
HTML
<a class="btn-um" href="#">BLUE BUTTON</a>

The alternate button color is yellow and often denotes a warning. Use custom class "btn-warning".

EXAMPLE

YELLOW BUTTON
HTML
<a class="btn-warning" href="#">YELLOW BUTTON</a>

TABLES