Graphics and Identity
The UF/IFAS Web Template
It is strongly recommended and preferred that UF/IFAS websites use the current UF/IFAS web template. The UF/IFAS template already meets web policy and accessibility standards and visually convey affiliation with UF and IFAS. The template for UF/IFAS websites is available through the TERMINALFOUR (T4) Web Content Management System (WCMS) after gaining access. An overview of the UF/IFAS template can be found here. The template will dictate other parameters to promote consistency across our web presence. All UF/IFAS T4 templates are mobile-friendly. You can use 20+ pre-loaded content pieces to build your website. Before customizing these pre-loaded content pieces be sure to review the AA accessibility standards information.
Header - Mandatory and persistent
UF/IFAS websites are required to include the following:
- Header Background color - Hex#0021a5.
- Name of the unit under the UF/IFAS logo. As an example, see The University of Florida's Department of Agricultural and Biological Engineering Unit page at https://abe.ufl.edu/. Units may substitute a unit name with a units' graphic identity.
- UF/IFAS logo on the left. UF/IFAS branding clearly visible in the upper left-hand area of your web page. The UF/IFAS logo should link to http://ifas.ufl.edu. (Remember that the UF/IFAS logo always needs to be surrounded on all sides by clear space that is no less than one-half the height of the “UF” monogram. See pg. 16 of this guide.)
- Header requirements are different for UF/IFAS Extension websites and are located in the UF/IFAS Branding Guidelines on pages 49-50.
Footer - Mandatory and persistent
UF/IFAS websites are required to include the following:
- Footer Background color - Hex#0021a5.
- A way to contact persons responsible for web updates. This should be included in the footer
- Date of last revision. This is required on the homepage but recommended for all pages.
- An active logo or text link to the UF homepage. Please add to the footer.
- An active logo or text link to the UF/IFAS homepage.
- Other footer requirements are located in the UF/IFAS Branding Guidelines on pages 49-52. These pages include a list and explanation of required privacy and other policy links as well as placement of other graphic identity elements in the footer.
Coding and Identity
UF/IFAS Favicon
The UF/IFAS favicon is mandatory for all UF/IFAS websites and is available at https://tinyurl.com/ifasfavicon.
Other coding requirements are located in the UF/IFAS Branding Guidelines on pages 48-49. These pages include an explanation of the required meta code to improve the findability and searchability of all UF/IFAS websites.
Mandatory Colors and Use
Web Colors (Meet WCAG 2.0 AA guidelines)
| Color | RGB | HEX | Recommended Use For |
|---|---|---|---|
| Blue (Web) |
0, 82, 155 | #00529b | For contrast against #fff white or the inverse. |
| Blue (UF) |
0, 33, 165 | #0021a5 | For contrast against #fff white or the inverse. |
| Orange (Web) |
188, 88, 26 | #bc581a | High contrast version for #f36812. |
| Orange (UF) |
243, 104,18 | #f36812 | White on orange is applicable for use when the text size is large. Large text is defined as 14 point (typically 18.66px, or 1.2em) and bold or larger, or 18 point (typically 24px, or 1.5em) or larger. |
| Grey | 51, 51, 51 | #33333 | Body text (paragraphs and lists). For contrast against #fff white or the inverse. |
Colors to Promote Unit Individualization
Web Colors (Meet WCAG 2.0 AA guidelines)
| Color | RGB | HEX | Recommended Use For |
|---|---|---|---|
| Blue | 52, 74, 150 | #344a96 | For contrast against #fff white or the inverse. |
| Brown | 83, 62, 11 | #533e0b | For contrast against #fff white or the inverse. |
| Purple (BRIGHT) |
87, 57, 114 | #573972 | For contrast against #fff white or the inverse. |
| Green (BRIGHT) |
94, 142, 63 | #5e8e3f | White on the green is applicable for use when the text size is large. Large text is defined as 14 point (typically 18.66px or 1.2em) and bold or larger, or 18 point (typically 24px or 1.5em) or larger. |
| Blue (MUTED) |
107, 153, 194 | #6b99c2 | White on blue is applicable for use when the text size is large. Large text is defined as 14 point (typically 18.66px or 1.2em) and bold or larger, or 18 point (typically 24px or 1.5em) or larger. |
| Orange (MUTED) |
222, 123, 30 | #de7b1e | White on orange is applicable for use when the text size is large. Large text is defined as 14 point (typically 18.66px or 1.2em) and bold or larger, or 18 point (typically 24px or 1.5em) or larger. |
| White | 255, 255, 255 | #ffffff | Background color |
| Purple | 223, 226, 243 | #dfe2f3 | Background color |
| Grey | 245, 245, 245 | #f5f5f5 | Background color |
Other Colors
Some UF/IFAS initiatives have preexisting style guides. Generally, the UF/IFAS color guide should supersede preexisting style guides. Preexisting style guides should select the closest colors in the above UF/IFAS color palettes. For questions about integrating your style guide with UF/IFAS colors, contact webteam@ifas.ufl.edu.
