
Web Brand Guide
The Office of External Relations has developed the Web Brand Guide for all public facing websites at Pima Community College to ensure design consistency and brand identity.
By following consistent standards, we exude expertise and maturity in our college and brand, creating a positive impact for our current and future students, staff, faculty, parents, stakeholders and all who experience Pima's presence.
This guide provides instructions for all website design areas. If you have questions or uncertainty about a design decision that is not listed in this guide, please reach out directly to Web Systems.
Main Design Elements
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.
Primary
- Hex: #045594
- Rgb: 4, 85, 148
- Hsb: 206° 97% 58%
Secondary
- Hex: #f7902d
- Rgb: 247, 144, 45
- Hsb: 29° 82% 97%
Supporting Cyan
- Hex: #00aeef
- Rgb: 0, 174, 239
- Hsb: 196° 100% 94%
Primary Hover
- Hex: #03406f
- Rgb: 3, 64, 111
- Hsb: 206° 97% 44%
Secondary Hover
- Hex: #ec7709
- Rgb: 236, 119, 9
- Hsb: 29° 96% 93%
Supporting Hover
- Hex: #0092c7
- Rgb: 0, 146, 199
- Hsb: 196° 100% 78%
Supporting Black
- Hex: #000000
- Rgb: 0, 0, 0
- Hsb: 0° 0% 0%
Supporting Dark Grey
- Hex: #808080
- Rgb: 128, 128, 128
- Hsb: 0° 0% 50%
Supporting Light Gray
- Hex: #E3E3E3
- Rgb: 227, 227, 227
- Hsb: 0° 0% 89%
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.
Stag Bold
Font PurchasingHelvetica Neue
Font PurchasingIf 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.
h1
Top Page Header
Font Size: 44px Font Weight: 700
h2
Supporting Page Header
Font Size: 32px Font Weight: 600
h3
Internal Content Header
Font Size: 22px Font Weight: 700
h4
Internal Content Subheader
Font Size: 19px Font Weight: 600
h5
Internal Content Subheader
Font Size: 17px Font Weight: 500
p
Body Copy
Font Size: 17px Font Weight: 400
Alt
Alternative Style A
Font Size: 25px Font Weight: 300
Alt
Alternative Style B
Font Size: 17px + Font Weight: 700
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.
Favicon
Here is an example of our favicon for Pima.edu that should be utilized throughout Pima sites.
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.
Graphic Elements
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.
Click Action Icons
Social Media Icons
Supporting Content Icons
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.
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.
Buttons
On some occasions, a button is a better alternative to a link. It provides a clear call-to-action the user can access with little thought.
All buttons on our web platforms share similar styles in sizing with color adjustments, as seen in the list featured. The codes for the button, text and hover colors for the button examples below that can be found in the color section above.
Button CSS Styles
border: 1px solid button color
margin-bottom: 16px;
padding: 9.6px 12px;
width: 230px;
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.
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
Call Out Header
This is a call out example.
Call Out Header
This is a call out example.
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.
"I trust that the education I receive through Pima for this program will again allow me to reach my goals."
35% higher average weekly earnings*