Design & Appearance

The basic elements of every website are a header, body, and footer.

[insert diagram]

Our standards for every University website’s design are as follows:

Header

The header of every University website is made up of two rows of elements – the UConn banner and the Identification & Navigation Bar.

UConn Banner

The UConn banner is a row at the top of every website that consistently reflects the University’s brand and provides visitors with access to search or browse our A-Z index.

Container
  • Location: Top of every website with no margin at the top or sides.
  • Size: Height measures 60px tall. Spans 100% of the website’s width. 
  • Background Color: Navy blue (#000E2F) or white (#FFFFFF)
Branding

A special, one-line version of our logo is required and reserved for the UConn banner. There are variations for the top-level websites of every school/college (e.g. https://engineering.uconn.edu). For more information on the variations, please email webstandards@uconn.edu.

  • Alignment: The logo can be:
    • Anchored to the far left of a full-width website with at least 18px of padding required on the left edge.
    • Aligned with the left side of a fixed-width website.
  • UConn
    • Font: UConn Extended
    • Styling: Displayed in capital letters (UCONN)
    • Font Size: 32px
    • Color: White (#FFFFFF) when used with a navy blue banner. Navy blue (#000E2F) when used with a white banner.
  • Separating Line: University websites require a thin line (a.k.a. rule) to separate the word UConn from University of Connecticut or the name of the school/college.
    • Thickness: 2px 
    • Height: Is there a height or padding?
    • Color: The rule must be gray (#3F4760) when used on navy blue banners. It should be navy blue (#000E2F) when used on white banners.
  • Full Name of University, School/College, or Health 
    • Font: Proxima Nova
    • Styling: Displayed in capital letters (e.g. UNIVERSITY OF CONNECTICUT, COLLEGE OF LIBERAL ARTS AND SCIENCES, HEALTH)
    • Font Size: 18px
    • Color: Gray (#7C878E) when used with a navy blue banner. Navy blue (#000E2F) when used with a white banner.
    • Resizing for Screens Smaller than 680px Wide:
      • University of Connecticut – The full name wraps to two lines. 
      • School/College –
      • UConn Health – No change.
    • Resizing for Screens Smaller than 510px Wide:
      • University of Connecticut – The full name disappears. 
      • School/College – 

UConn Health – The size reduces proportionally to the monitor.

Search & A-Z Index
  • Icons:
    • The Search button is a magnifying glass icon 
    • The A-Z button is an icon with the letters A-Z
  • Hyperlinks:
    • The Search button links to https://uconn.edu/search 
    • The A-Z button links to https://uconn.edu/az/. 
    • The link must not contain visible text. Use a title attribute on the link or visually hidden text.
    • The visual component of the link must be hidden from screen-readers with aria-hidden=”true”
  • Size: 32px square
  • Color: White (#FFFFFF) or navy blue (#000E2F)
  • Hover & Focus: The buttons must respond to both hover or focus events.
    • Horizontal Line: Appears above the icons on hover or focus.
      • Color: White (#FFFFFF)
      • Thickness: 2px
      • Width: 32px
      • Placement: Top of the line starts at the top of the icon
    • Tooltip: Displayed below the icons on hover or focus events.
      • Text: Labeled as “Search UConn” or “UConn A to Z Index” using Proxima Nova font, font weight bold, font size 14px, and color navy blue (#000E2F).
      • Background: Grey (#EDEDED) rectangle surrounding the text label. The top of the background should align with the bottom of the UConn Banner
      • Padding: Approximately 18px on all sides. 
      • Border: None
      • Triangle: The background should include a triangular pointer aimed at the center of the button. There must not be a gap between the pointer and the background
Additional Elements

No additional elements are allowed in the UConn banner.

Identification & Navigation Bar

There are two levels of site titles found on University websites.

Container
  • Location: Immediately below the UConn banner with no margin at the top or sides.
  • Background Color: Navy blue (#000E2F) or white (#FFFFFF)
Site Title

The site title is a required element on every University and UConn Health website. The title must match the official name of the school, department, program, etc. that it is created for.

  • Font: Proxima Nova, semi-bold with a font weight of 500
  • Font Size: No larger than 30px 
  • Letter Case: Must be written in title case where all major words begin with a capital letter and remaining letters are lowercase. All lowercase and all capitals are not allowed. (e.g. University Communications, not university communications or UNIVERSITY COMMUNICATIONS)
  • Font Color: Site titles must be display in white (#FFFFFF) when used on a navy blue banner or navy blue (#000E2F) when used on a white banner.
  • Alignment: Aligned with the same left edge as the UConn banner, whether you have selected a full-width or fixed-width website.
  • Padding: 30px of padding is required between the top of the site title and the bottom of the UConn banner.
Parent Site Title

A parent site title is a required element in order to reflect the site’s parent organization or main affiliation. This may be a school/college, regional campus, department, office, or division. The only exception allowed is for websites of schools/colleges and the top-most units. For example, the Division of Student Life & Enrollment.

  • Font: Proxima Nova
  • Font Size: 11px
  • Letter Spacing: 1px 
  • Letter Case: The ‘all capitals’ style is used, 
  • Placement & Padding: The parent site title is located directly above the primary site title, with 5px between them.
  • Alignment: Aligned with the same left edge as the UConn banner, whether you have selected a full-width or fixed-width website.
  • Font Color: The primary color options are: blue (#000E2F), white (#FFFFFF), grey (#7C878E) or any variation of grey, and black (#000000).

Need help adding a parent site title?
Fast forward to 5:36 in ITS’ theme customization tutorial video.

Navigation
  • Styling:
    • Font: 
    • Font Size: 
    • Font Color: 
    • Letter Case: Menus should be written in title case where all major words begin with a capital letter and remaining letters are lowercase. All lowercase and all capitals are not allowed.
  • Required Elements:
    • Contact Page: A contact page is required on every UConn website in the main menu. Preference is for the page to be located in the top-level navigation, but one-level down (e.g. under an About menu) is acceptable. Contact information displayed in just the footer or on the homepage is not sufficient. The following details should be included:
      • Email address and/or phone number, as applicable.
      • For offices that expect visitors, a room number and building should be specified.
      • Mailing address when available.
Additional Elements
  • 1 additional search field may be added to offer a site-specific search.
  • Up to 2 utility page links may be added.

Additional logos, text, links, icons, images, social sharing bars, etc. may not be added to this area.

Body

The body of your website is the entire space between the header and footer. The only requirement is that UConn’s color palette must be primarily used. Additional, complementary colors are allowed if used with restraint.

Footer

The footer can serve as a secondary way for users to find information on your website, so it should be simple and well-organized. 

  • Styling: 
    • Background Color: Navy blue (#000E2F) or white (#FFFFFF)
    • Font Styles: There are no specifications for the exact font, font size, and font color used in your footer, however, it should complement the rest of your website.
  • Required Elements:
    • © University of Connecticut – The words ‘University of Connecticut’ are linked to the main uconn.edu site. Or © UConn Health – the words ‘UConn Health’ are linked to the main health.uconn.edu site.
    • Disclaimers, Privacy & Copyright – The words ‘Disclaimers, Privacy & Copyright’ are linked to the main uconn.edu Disclaimers, Privacy & Copyright, or in the case of UConn Health, both the health.uconn.edu Disclaimers and Statements page and the Notice of Privacy Practices page.
    • Accessibility – The word ‘Accessibility’ is linked to accessibility.uconn.edu