Boilerplate

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.

Teal

$teal
#118080
$teal-darker
#0f7374

Purple

$purple
#735e7c
$purple-darker
#64496a

Green

$green
#5f7b3f
$green-darker
#4f6736

Blue

$blue
#007d95
$blue-darker
#00677b

Red

$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

Link Blue

$link-blue
#00748a

Used for links within the text

Other Campus Colors

UH Manoa

$uh-manoa
#024731

UH Hilo

$uh-hilo
#DA291C

UH West Oahu

$uh-west-oahu
#a71930

Hawaii Community College

$uh-hawaii-cc
#91004b

Kapiolani Community College

$uh-kapiolani-cc
#002395

Kauai Community College

$uh-kauai-cc
#716fb3

Leeward Community College

$uh-leeward-cc
#3d7edb

Maui College

$uh-maui-c
#005172

Windward Community College

$uh-windward
#7ab800

Typography

Primary Typeface: Gibson

Gibson,Helvetica,Arial,sans-serif

The primary typeface is Gibson Sans, a humanist sans serif typeface available on TypeKit. We use Regular, Semi-Bold, and Bold weights along with their italic styles. This round, geometric font is ideal for displaying data (e.g., labeling charts).


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

Alternate Typeface: Open Sans

Open Sans,Helvetica,Arial,sans-serif

The alternate 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

  1. Item 1
    1. Sub-item 1
    2. Sub-item 2
  2. Item 2
  3. Item 3
  4. Item 4
    • Sub-item 1
    • Sub-item 2
  5. Item 5

Blockquote

The blockquote element represents a section that is being quoted from another source.

Note: You must have a UH login (i.e., be a member of the UH community) to submit a data sharing request. Non-UH individuals or entities must be represented by a UH sponsor who will assume responsibility for the request.
Note: You must have a UH login (i.e., be a member of the UH community) to submit a data sharing request. Non-UH individuals or entities must be represented by a UH sponsor who will assume responsibility for the request.
Note: You must have a UH login (i.e., be a member of the UH community) to submit a data sharing request. Non-UH individuals or entities must be represented by a UH sponsor who will assume responsibility for the request.
Note: You must have a UH login (i.e., be a member of the UH community) to submit a data sharing request. Non-UH individuals or entities must be represented by a UH sponsor who will assume responsibility for the request.

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)
Campus Office Information Available
UH System Institutional Research and Analysis Office General data definitions, multi campus requests
UH Community Colleges Academic Planning, Assessment, and Policy Analysis General Community college inititives, ARPD, etc
UH Mānoa Institutional Research Office Campus specific questions
UH Hilo Institutional Research Office Campus specific questions
UH West Oʻahu Office of Institutional Effectiveness Campus specific questions
Hawaii CC Institutional Research Office Campus specific questions
Honolulu CC Office of Policy, Planning, and Institutional Research Campus specific questions
Kapiolani CC Office of Institutional Effectiveness Campus specific questions
Kauai CC Office of Institutional Research Campus specific questions
Leeward CC Office of Planning, Policy & Assessment Campus specific questions
Maui College Academic Affairs - Vice Chancellor’s Office Campus specific questions
Windward CC Office of Institutional Research Campus specific questions

Form Fields

Form fields must be accessible.

Campuses UH Hilo
UH Mānoa
UH Maui College

Functional Area



Buttons

Buttons have the UH System (darker) background with white text.

View the raw data in table format here. Probably links to something on another site.