GU Home About Gonzaga Academics Admissions Athletics

Tool Kit Logos & Guidelines Create a Gonzaga University Email Signature Gonzaga Approved Logo Vendors Writing Style Standards - Part I Writing Style Standards - Part II

Web Style Guide

Web Photos

Web Style Guide

Gonzaga University Institutional Color Palette

The following colors are recommended for use in Gonzaga University advertising, marketing, publications, etc. When reproducing these colors, always visually match approved color swatches.

Primary Colors

These are the official university logo colors. PMS 541, blue, should be used as the predominant color in design applications.

PMS 541C
R0 G63 B114
HTML: #003f72
Web Safe: #003366
R0 G51 B102

PMS 174C
R154 G59 B38
HTML: #9a3b26
Web Safe: #993333
R153 G51 B51

Website Colors

These shades of Gonzaga's Primary Colors can be utilized when adding color to tables within your page designs. Yet we recommend that you refrain from adding color to your pages except through the use of official font and table styles.

#0b2a50	#9a3b26	#333333
#003f72	#d8c4b6	#666666
#1d4e95	#ece2db	#999999
#6385b6	#f4eee9	#bbbbbb
#7795bf	#f6f2ee	#cccccc
#c7cfe2		#dddddd
#dde2ee		#eeeeee
#eaeff5		#ffffff
#f4f7f9

Website Headers and Text

All previous pages styles will be updated to the new format. If you used <font> tags on your pages, you may need to update them to use the current color scheme and type styles.

Header 1	Times New Roman, 22px, HTML: #9a3b26
Header 2	Georgia/Times, 16px, italic, HTML: #0b2a50
Header 3	Georgia/Times, 17px, HTML: #222222
Header 4	Georgia/Times, 18px, HTML: #9A3B26
Header 5	Arial 14px, Bold, HTML: #333333
Header 6	Arial 13px, HTML: #9A3B26
Address	Arial 11px, HTML: #444444

Header Usage Rules

Header 1 – used for the page title only (Gonzaga Red)
Header 2 – used with Heading 1 as a subtitle, improves search engine optimization (Italic)
Header 3 – used for introductory copy and content headlines
Header 4 – used for main section headlines (Gonzaga Red)
Header 5 – used for subsection headlines (Bold)
Header 6 – used as a headline within tables (Bold, Gonzaga Red)

Blue is the standard link color and should not be used to color Headings.
Bold should only be used for small headings or in main body copy to show emphasis.

Link Styles

Link with an arrow icon (class="link_arrow")
Link with an download icon (class="link_download")
Link with an pdf icon (class="link_pdf")

Lists

Ordered List

First Item
Second Item
Third Item

Unordered List

First Item
Second Item
Third Item

Tables

Table styled using class "table-1"
Tables used to display calendar information may benefit from being styled using "table-1." We also recommend utilizing Google Calendar to display calendar information on your web pages. To see an example of how a Google Calendar might look embedded in your page, visit the "When to Visit" page.

Table styled using class "table-2"
We do not recommend using this table style, its use has been retired.

Table Header using Header 6	Header 6
Sample Paragraph of information that wraps in the allotted space. It can run on and on and will push the content in the right column so that it will also wrap unless a td width is added to the smaller column.	Download (class="link_pdf")
Table Cell Information	Download (class="link_pdf")
Table Cell Information	Download (class="link_pdf")

Table styled using class "table-3"
This is the table style we recommend using for most lists with multiple columns of information. Be sure to set the width of the table to a width equal to or narrower than the width of the column containing. For instance, the width of the content for the 2 column template is 690pixels while the width of the column for the 3 column template is 450pixels.

Table Header using Header 6	Header 6
Table Cell Information	Download (class="link_pdf")
Table Cell Information	Download (class="link_pdf")
Table Cell Information	Download (class="link_pdf")

Image Alignment

Align Left or Right

To align an image left or right, place the image in the page, resize it to the desired size and then add the style "float-left" or "float-right" and any surrounding copy will wrap around the image with a margin added to the side and bottom so that the text does not run directly up against the image. We recommend that you resize the image below 320x320 pixels prior to uploading it to the server using an image editing program like Photoshop. This will help with page loading speed because images resized after they are uploaded to the server will still have the same file size as the original image even though their presentation size is smaller.

Align Left or Right with border around image

Image Left with Border To align an image left or right, place the image in the page, resize it to the desired size and then add the style "img_lt" or "img_rt" and any surrounding copy will wrap around the image with a margin added to the side and bottom so that the text does not run directly up against the image. We recommend that you resize the image below 320x320 pixels prior to uploading it to the server using an image editing program like Photoshop. This will help with page loading speed because images resized after they are uploaded to the server will still have the same file size as the original image even though their presentation size is smaller.

Adding a caption underneath an image

Image with caption using "address" font style.

An easy way to add a caption underneath an image is to first insert a table with two rows. In the top row, insert your image and in the bottom row, insert the caption. You can then align and style the table using either of the styles listed above for images. Be sure to add the style to the table and not the image. Advanced users should add style="border-collapse:separate;" to the table and style="padding:0px;" to the td cell containing the image in addition to setting the cellpadding, cellspacing and border to "0" for the table.