Colors

The following colors are our branded colors with supporting HEX, RGB, and HSB values.

When possible, utilize the primary color option first with the secondary as an alternative option. Use supporting colors for secondary color areas when needed.

Our color palettes should also utilize the associated text color shown when the color present is used for a background.

A prime example is Pima.edu's navigation banner being a supporting black with the supporting cyan as the font color.

Typefaces

Pima's primary typeface in print is Stag. This typeface is included in all of our marketing materials as the font choice for our slogan and supporting phrases.

Within our web platforms, however, we use this sparingly for legibility reasons in areas that support our brand. The Stag typeface should only be used for headlines and is always written in Title Case.

To establish Pima’s distinctive appearance on the web, we only use the typefaces listed below.

Typeface Options

The Stag typeface should only be used for headlines on the website, it also and requires a license to use. The Office of External Relations is not responsible for providing licensed typefaces. The Helvetica Neue is currently available as a free web font to use and download from Google Fonts.

If access to any of these fonts is not an option, please reach out to Web Systems directly for direction on how to proceed.

Font Styling Guidelines

Below are a few guidelines for how to properly treat these fonts throughout the web platform, including header styles, weights and sizes.

Color choice for the styles are shown and alternative color options for text can be seen in the color section, listed above.

Logo Usage

The Pima Community College logo is the most immediate representation of the College. It is a valuable asset that must be used consistently in the proper, approved forms. The single most important element of a brand identity system is a distinctive logo, which creates a strong visual expression of our organization.

Within the Pima web areas, the logo currently only needs to be used appropriately in the header and footer of each page. This provides a clear understanding that the webpage is a Pima Community College entity.

Primary Web Logo

We utilize the full white version of the logo on the header and footer background. A clear use case is on the header itself.

Download Logo

Favicon

Here is an example of our favicon for Pima.edu that should be utilized throughout Pima sites.

Download Favicon

Any other use cases of the Pima logo should be brought to the attention of the Web Systems team for proper direction.

Page Layouts

In our Pima web pages, we make plenty of use of white space between elements to allow all areas of text, imagery and graphics breathing room for our users to digest the content throughout. This also allows us to have the ability to use generous sizes, weights and colors of branded elements and graphics.

Web page layouts should always be handled via a responsive grid or flex system. Older fixed-width grids and layout methods should no longer be used since they do not display well across various screen sizes and devices.

Layout Content

Our pages are typically very consistent in our layouts to help provide familiarity when seeing new content.

Primarily, our internal content pages include a left internal page navigation, a breadcrumb area, a supporting image and a page header, followed by the associated content. Within the associated content, we allow for a thin internal right column for Important information, such as contact info or office hours or quick links to supporting items.

In higher level pages used, we forgo the left navigation as the content within these pages usually expresses the navigation for the connecting pages to follow.

Finally, all pima pages include the Pima Header and the Pima Footer as seen on this page. If you have questions or concerns about page layouts, please reach out to Web Systems for direction.

Icons

In all of our Web platforms at Pima Community College, we utilize the free icon library at fontawesome.com

Below you will find some commonly used icons and associated styling throughout Pima.edu.

Supporting Graphics

To coincide with brand elements throughout Pima, we add supporting graphics to areas that are best suited for additional branding support.

These Supporting graphics are used sparingly and typically act as a footer support element or supporting element in images.

If there is an applicable area to add such graphics, please consult with the Web Designer at Web Systems.

Download

Download

Download

Link Styles

Pima has a few different styles of links for different use cases. If you are uncertain about which use case to use, please reach out to the Web Designer at Web Systems.

Inline Links

Inline Links, like this link, should be of the primary color, #1A0DAB, with the darker hue hex color, #03406f, as a hover action. All links are currently underlined, unless in a special circumstance such as a navigation and buttons where the understanding of a the content being a link is given.

Visited links should have a hex color purple, #660099.

Block Links

Links that are outside an associated paragraph can have similar characteristics or can vary. These style examples include links that are in lists, side columns and navigation areas. This does not include links that have been stylized as a button.

View button information and styling.

Buttons

Primary Button Options

Secondary Button Options

Breadcrumbs

As a form of quick navigation and page location, Pima.edu has a linked quick navigation trail referred to as "breadcrumbs". This is a necessary piece of navigation that can help convey the information architecture and should be added in appropriate areas if possible.

Below is an example of Pima's standard for our breadcrumbs.

Home Main Location Internal Location Current Location

Call Out Styles

Throughout many pages on our web platforms at the College, content areas are separated by stylized areas called call outs. The purpose of these call outs is to bring attention to important information or associated content.

Below are a few examples of how these call out areas should be stylized to stay within the Pima brand identity

Blockquotes & Stats

To support long areas of content, it is good to call out important pieces of information and engaging quotes. These styles usually float to the side of the content (except on mobile devices). Below you will see a few examples of how we style this to fit in our brand parameters.