Skip to main content
MENU

UF/IFAS Communications

UF/IFAS Communications

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.

UF/IFAS Web Services - mandatory website pieces- example

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.

The UF/IFAS favicon is mandatory for all UF/IFAS websites and is available at https://tinyurl.com/ifasfavicon

Mandatory Colors and Use

Web Colors (Meet WCAG 2.0 AA guidelines)

ColorRGBHEXRecommended 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)

ColorRGBHEXRecommended 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.

Web Fonts

Adding Official Branding Typefaces to images: A limited selection of official UF branding typefaces, Gentona and Quadon, are available as web fonts, free of charge for communicators and their staff by contacting University Communications. See the Fonts section to apply for a license (http://identity.ufl.edu/ typography/).

STYLES

The UF/IFAS Web Template Styles

Most UF/IFAS styles are part of the UF/IFAS Template. This page will display the styles and demonstrate the appropriate hierarchy.

HEADINGS

HEADING 1

HEADING 2

HEADING 3

HEADING 4

HEADING 5
HEADING 6

Body Text

Bolded Body Text 

LIST STYLES

  1. <ol><li>Ordered List item 1</li>
  2. <li>Ordered List item 2</li>
  3. <li>Ordered List item 3</li></ol>
Column 1Column 2Column 3
Row 1 Some text Some text
Row 2 Some text Some text

SPECIAL STYLES

You can use special CSS classes on <ul> tags to change the look of bulleted lists (linked and unlinked).

You can use special CSS classes on some heading tags to change the color (linked and unlinked).

You can use special CSS classes to large tables so they scroll when viewed on a cellphone, but you will need to wrap the table tag in a div tag.

You can use special CSS classes on images, to float images left or right within a page. See how to float images.

You can use special CSS classes on some text and elements for centering.

For videos, we prefer that you embed them on the webpage by using both of the following special CSS classes.

For sidebars, we prefer that you use the following special CSS classes.

AA Accessibility Standards

The WCGA AA Accessibility standards explain how to make web content more accessible to people with disabilities. WCAG defines web content as what you see (text, images, and sounds) and do not see (code or markup that defines the structure, presentation, etc.). All UF/IFAS websites, web applications, and blogs must comply with University standards and meet at least AA accessibility standards.

UF/IFAS White Web Template In TERMINALFOUR (T4)

Our latest web template meets accessibility and performance requirements. When a web moderator requests the UF/IFAS white template, the template is issued with the following *Google Lighthouse score:

*We recognize that the above scoring is only one benchmark used to measure accessibility and performance.

Resources

UF/IFAS Accessibility Webinar Recording
https://youtu.be/kyIYed6EtjE

UF/IFAS Accessibility Cheat Sheet (.pdf file)
This resource is for content providers, editors, writers, and web moderators

VOX Media Resource
https://accessibility.voxmedia.com/

 

Third-party Web Builders

Information on UF/IFAS web policies and practices is found at https://ics.ifas.ufl.edu/our-services/web-services/ and may easily be found by searching for UF IFAS Web Services in any browser.

It is critical that any IFAS faculty or staff member interested in creating, editing or revamping their website first contact the web team at webteam@ifas.ufl.edu to discuss the project. Making this contact at the initial stages of the project will save time, money and frustration of all involved.

If you are considering contracting with an outside vendor to work on your website, please first contact the web team. We request that any outside vendor meet with the web team and possibly with other members of IFAS Communications to learn about web and branding standards before embarking on a project. There are preferred design templates and requirements that should be followed.

Third-party web builders should adhere to the web standards provided as UF/IFAS Web Branding guidelines and as stated on the following page sections: graphics and identity, colors, web fonts, styles, and aa accessibility standards.


This third-party collaborator is embedding their application in a UF/IFAS template.

UF/IFAS Web Services - Third-Party Web Builders Policy Example


This third-party collaborator partnered with UF/IFAS Web Services to create this lead generating page.

Web Services-Screenshot-Example-EntNem