USF student laughing while working on laptop

Color Options

The USF site uses a basic yet varied palette of colors that is intended to provide users with a diverse set of options for presenting content while reinforcing the USF brand and minimizing clashing color choices. All colors are defined in CSS files and should be easy to select through the CMS.

1. USF green

We have defined USF green for the purposes of this Web site as hex color #00543C.

Foreground     Background

This color should be used anywhere on the site that calls for USF green or, in fact, any place where a standard green color is desired. It should be the only medium green used on the site. As a rule all links are set in USF green, so it shouldn't be used for standard site text.

2. Complementary color palette

A basic set of colors represents most of the color wheel, using colors which work harmoniously with USF green.

These colors are specified in the general USF CSS document, and can be used as needed on your pages. As a general principle, no more than two or three colors should be used on a page.

3. Specific color options for template elements

  • The persistent global meta navigation in the top right of the site template is always orange.
  • Navigation headers on vertical grouped navigations are usually orange, although green headers can be substituted if need be.
  • Navigation headers on horizontal dropdown navigations can be brown or green. These headers should roll over to orange on mouseover/dropdown.
  • Links are always USF green, and are almost always underlined.
  • Headers related to news items are always bright blue. Headers related to events are always bright green. Blocks of color containing news items and events are dark blue and USF green, respectively.
  • Use of the bright blue color within a web page should be reserved only for references associated with the Pool.

    Navigation Header Color Options
    1. Orange vertical nav headers
      Orange Header
    2. Green alternate headers
      Green Alternate Header
    3. Brown alternate headers
      Brown Alternate Header
    News and Events Colors

    News items always appear in blue
    News Box


    Events always appear in green
    Events Box

Next page: Use of marks and other logos »