For more information and forms visit tuition waiver.
Style Guide
Colors & Variables
Section Colors
The following colors are used to represent the site's different sections and have been selected to complement the UH System brand colors. They can only be used with white (white text, never black, when used as a background color or a white background with colored text) to comply with accessibility standards (level AA). They are used in the overview icons, breadcrumbs bar, for section titles on the left, and in the dropdown menus when logged in. The darker colors are used for hover and focus states in the dropdown menus.
Benefits & Leaves
$teal
#118080
$teal-darker
#0f7374
Compensation & Employee Relations
$purple
#735e7c
$purple-darker
#64496a
Forms & Docs
$green
#5f7b3f
$green-darker
#4f6736
Help & Training
$blue
#007d95
$blue-darker
#00677b
HR Staff & Admin (Restricted Pages)
$red
#b24b66
$red-darker
#9a3f58
UH System Colors
UH System
$uh-system
#b3995d
Used for System logos
UH System - Dark
$uh-system-darker
#a5875c
Used with white text to comply with accessibility standards (level AA)
UH System - 50% Tint
$uh-system-50
#d6c9b6
Used in the breadcrumbs bar on public pages with $black text
UH System - 30% Tint
$uh-system-30
#e7ded3
Used as a background color for hover states in the menu
UH System - 20% Tint
$uh-system-20
#efe9e2
Used as a background color in the menu
UH System - 12% Tint
$uh-system-12
#f5f2ed
Used as a background for accordion content and overview cards
Grays & Other
Black
$black
#333
Used as a background in the primary header (when logged-in) and footer and text
Darker Gray
$darker-gray
#4d4d4d
Used for the logged in header and text
Dark Gray
$dark-gray
#666
Used for links to child pages in the menus on aggregate pages, best used over a white background
Gray
$gray
#757575
Used for anchored links in the menus on aggregate pages, best used over a white background
Light Gray
$light-gray
#808080
Lightest Gray
$lightest-gray
#f2f2f2
Used in the primary menu against a $black background
Light Gray
$light-gray
#808080
Link Blue
$link-blue
#00748a
Used for links within the text
Typography
Primary Typeface: Open Sans
Open Sans,Helvetica,Arial,sans-serif
The primary typeface is Open Sans, a humanist sans serif typeface available on Google Fonts. We use Regular, Semi-Bold, and Bold weights along with their italic styles. We do not use light weight because it is less legible on low-resolution screens.
Regular 400
a b c d e f g h i j k l m n o p q r s t u v w x y z
a b c d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9
Semi-Bold 600
a b c d e f g h i j k l m n o p q r s t u v w x y z
a b c d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9
Bold 700
a b c d e f g h i j k l m n o p q r s t u v w x y z
a b c d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9
Italic
a b c d e f g h i j k l m n o p q r s t u v w x y z
a b c d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9
Headings, Paragraphs, Lists, & Content
The font sizes of the following headings and text may vary depending on the location of the items and/or the resolution of the screen or device.
Page Title/Main Heading Link
The main page header of this guide is an
<h1>element. Any header element may include links, as depicted in the example.Second-Level Heading/Section Heading Link
The secondary header above is an
<h2>element, which may be used for any form of important page-level header. More than one may be used per page. Consider using an h2 unless you need a header level of less importance, or as a sub-header to an existing h2 element.Third-Level Header Link
The header above is an
<h3>element, which may be used for any form of page-level header which falls below the h2 header in a document hierarchy.Fourth-Level Header Link
The header above is an
<h4>element, which may be used for any form of page-level header which falls below the h3 header in a document hierarchy.Fifth-Level Header Link
The header above is an
<h5>element, which may be used for any form of page-level header which falls below the h4 header in a document hierarchy.Sixth-Level Header Link
The header above is an
<h6>element, which may be used for any form of page-level header which falls below the h5 header in a document hierarchy.
Paragraphs & Links
Paragraphs are set at a comfortable size and line height. Links appear in the $link-blue color. PDFs will be automatically prepended with a PDF icon and links that go to another site are automatically appended with an external link icon. I am a PDF link while I am an external link.
Unordered List ul
- Item
- Item
- Cras elementum lacinia tortor, nec porttitor nulla suscipit nec. Cras tempus, sem id pharetra pellentesque, enim nunc tempor diam
- Non mattis nisi sem eget eros. Suspendisse dictum orci eget rutrum interdum. Donec hendrerit sapien molestie, hendrerit odio eu, volutpat nibh.
- Sub-item
- Sub-item
- Vivamus eget nibh ac velit pretium lobortis vel bibendum dui. Nulla erat augue, finibus ac dignissim quis, molestie quis nisi.
- Donec sagittis nunc sed lacus dignissim dictum. In hac habitasse platea dictumst. Cras tempus semper consectetur.
Ordered List ol
- Item 1
- Sub-item 1
- Sub-item 2
- Item 2
- Item 3
- Item 4
- Sub-item 1
- Sub-item 2
- Item 5
Blockquote
The blockquote element represents a section that is being quoted from another source.
This is how a blockquote looks in the content.
Tables
Tables are used to display tabular data only. It is not recommended for layout. The text in the tables will appear slightly smaller than the primary text to fit within the limited spaces. You must specify title headers and their scope.
Table Headersth |
Code | When to Use |
|---|---|---|
| Column Header | th scope="col" |
Use for title headers for columns (vertical) |
| Row Header | th scope="row" |
Use for title headers for rows (horizontal) |
Alerts
The site uses a few alert types based off of the Bootstrap framework.
This is a basic alert.
This is a warning alert. Sorry, but the page you were trying to view does not exist.
This is a warning used on restricted pages.
In this warning alert, we have prepended a lock icon.
Buttons
Buttons have a red background with white text.
Components & Blocks
Accordions & FAQs
Accordions add supplemental content to a section in an aggregate page. Individual FAQs are displayed within an accordion.
Cards
Supervisor or HR Staff & Admin Section
Announcements & Events Blocks
Urgent Announcement Title
Urgent announcement content goes here. Lorem ipsum dolor sit amet consectetur adipiscing.
Basic Announcement Example
Basic announcements have no prepended icons. Announcement blurbs that do not fit will be cut off and linked … Continued
Event, Training or Info Session
September 15, 2017
Events, training events, and info sessions are prepended with an event icon and include the event date.
Sidebar Types
Left Nav
The left navigation list appears on aggregate pages. Anchor links note section headers on a page. Indented links note child pages.