Style Guide - its.umich.edu

Color

Color may be used to communicate the meaning of elements on a screen. Color is a great way to provide visual continuity, communicate status information, and give feedback in response to user actions. Use color judiciously for communication.

Dark Blue (Banner)
#00274C
Yellow
#FFCB05
Medium Blue 2 (Menu)
#4A6D95
Medium Blue 3 (Menu Hover)
#57789D
Breadcrumb Banner
#E4E1DF
Breadcrumb Link
#333333
Body Background Color
#FFFEFE
Text Color
#333333
H1
#00274C
H2
#40658F
H3
#666666
a:link
#0D57AA
a:hover
#9A3324
a:focus (background-color)
#0D57AA
a:active
#0D57AA
Login Button
#D86018
Login Button Hover
#9A3324
Footer Background
#333333
Footer Text
#9B9B9B
News Block
RGBA(228, 225, 223, 0.4)
News Purple
#702082
News Maize
#FFCB05
News Blue
#00274C
News Blue 2
#2F65A7
News Green
#388E3C
News Red
#9A3324
News Orange
#D86018

Typography

ITS.umich.edu uses typography to create hierarchies of content and to promote readability. Roboto is the default font for headers and body copy.

Header Type

Information and Technology Services

Information and Technology Services

Information and Technology Services

Information and Technology Services

Copy Type

Information and Technology Services provides technology and communications services in support of U-M Ann Arbor's academic and research needs. ITS also manages the administrative computing systems and executes the IT security strategy for the Ann Arbor campus, the U-M Health System, and the two regional campuses (Flint and Dearborn).

Footnote Type

* Note: We perform hardware repair only on Apple, Dell and HP computers.

Lists

Unordered

For list of items in which the order does not explicitly matter.

  • Information
  • Technology
  • Services

Ordered

For list of items in which the order does explicitly matter.

  1. Information
  2. Technology
  3. Services

Links within the body copy are distinguished by their blue color and are underlined.

Buttons

Buttons are only used for linking to systems and applications (functionality), never to text web pages, surveys, order forms, or other static information.

For indicating the current page's location within a navigational hierarchy. Placed between the page hero graphic and page content.

Table

For accessibility and responsiveness, the table must be coded with all the following attributes.

Normal

Service Rate
Software installation $40/half-hour
Operating system upgrade $120 + purchase of the OS software
Hardware upgrade/installation (RAM, hard drives, network cards, etc.) $40/half hour

Row Stripes

Service Rate
Software installation $40/half-hour
Operating system upgrade $120 + purchase of the OS software
Hardware upgrade/installation (RAM, hard drives, network cards, etc.) $40/half hour

Left Aligned

Service Rate
Software installation $40/half-hour
Operating system upgrade $120 + purchase of the OS software
Hardware upgrade/installation (RAM, hard drives, network cards, etc.) $40/half hour

Wide

Service Rate
Software installation $40/half-hour
Operating system upgrade $120 + purchase of the OS software
Hardware upgrade/installation (RAM, hard drives, network cards, etc.) $40/half hour

Grid

The pages are based on a 12-column responsive grid system. ITS.umich utilizes a two-column layout. First column is reserved for the Navigation Menu while the second column is for content, including optional Sidebar.

Navigation Menu
Content

Placed in the content (the second) column on the Grid system.

Hours & Locations

For service hours & locations, if applicable.

Locations

Central Campus

Michigan Union - Ground Floor
734-763-6181

Fall Hours:
Mon–Fri: 8 a.m.–8 p.m.
Sat: 11 a.m.–5 p.m.
Sun: closed

Alert Boxes

For calling out information that relates to the content of the page.

If you know what you need—a fix, a file transfer, a virus removed—just drop off your equipment during our business hours.

If you know what you need—a fix, a file transfer, a virus removed—just drop off your equipment during our business hours.

If you know what you need—a fix, a file transfer, a virus removed—just drop off your equipment during our business hours.