Skip to main content

An Official Vermont Government Website

Vermont State Logo

Web Look and Feel Standards

Overview

The purpose of the Web Look and Feel Standards is to establish the minimally-acceptable components that every website or web application must include that is produced and maintained for the purpose of conducting official State business. The adoption of these standards will aid visitors in the identification of official state websites and promote a clear and consistent user experience across agencies, departments, programs, and applications.

To aid in the adoption of these standards, the State provides a free website template (SOV Web Template) that is available for use by any State entity. The template provides a wide variety of tools and functionality that can be customized and "mixed and matched" as needed, all within an overall design environment that provides a consistent look and feel for State websites. Further, the template provides a fully-supported Content Management System (CMS), with training and support from the Vermont Agency of Digital Services, as well as a secure hosting environment and software upgrades, all at no cost to the State agency, department or program. As such, all state entities are expected to use the SOV Web Template whenever possible. All of the requirements set forth in these Web Look and Feel Standards are already built into the SOV Web Template.

The State does recognize there may be some cases where the SOV Web Template does not provide an adequate solution for the digital needs of a particular agency, department or program, and that the entity will need to create a custom website or application. It is in these custom cases where State entities – and their web design/development contractors – need to pay particular attention to the Web Look and Feel Standards.

Learn about the SOV Web Template minimally-acceptable components, including:

Find general guidelines and best practices, including:

Are you and internal State of Vermont entity and contracting for website or web application work?

A link to these Web Look and Feel Standards should be part of any contract documents or Statements of Work with outside contractors, and adherence to these requirements should be part of the performance measures for these contractors.

SOV Web Template Minimally Acceptable Components

Header

State of Vermont Web Template Header

The top of every page will be taken up by the site header. The required elements include the following.

Branding Bar in Dark Green

  • Background color of #033003 
  • Words “An Official Vermont Government Website” in sans serif, white text. Word ‘Vermont’ in heavier font weight.
  • Horizontal arrangement of the Moon Over Mountains logo in white with a transparent background. The logo will be a live link to the state web portal at https://www.vermont.gov/.

Site Owner Identification Area

  • Visually displayed below branding bar
  • Name of agency (or State of Vermont if independent) and site owner (department or division) on a separate line in larger and heavier font weight.
  • Optional agency/department/program logo (not Moon Over Mountains, but another CMO-approved logo such as the Vermont State Police logo) only to be displayed on all site pages in the header. These may not be displayed anywhere else on the site except in the body section where appropriate. Partner or sponsor logos should be displayed only in the body section.
State of Vermont Web Template Header with Optional Approved Department Logo

Search Box

The exact styling of a search box is not dictated by this standard, but prominent secondary navigation must be included directly beneath the dark green branding bar (on the right side of the display area, underneath the Moon over the Mountains logo and within the Site Owner Identification Area), in the form of a button, box or another visual element that allows a user to type in a search term to find content within the site.

About and Contact Information

The exact styling or placement of the About (or similar terminology) and Contact Information is not dictated by this standard, but a prominent link is required to each item on the home page. Such content will specify the relationship of the site owner to the State of Vermont.

Footer

State of Vermont Web Template Footer

The footer will appear at the bottom of the display area on all pages contained in a particular site. The required elements of the footer include the following.

Branding Bar in Dark Green

  • Background color of #033003 
  • Words ‘Copyright © [current year] State of Vermont. All rights reserved.’ in white, centered-, sans-serif text.
  • Consider adding live links for an Accessibility Policy and Privacy Policy that are specific to your agency, department, or project.

Request an Exception or Modification

If your website or application requires exception or modification to any of the standards outlined herein, contact the Chief Marketing Office at marketing@vermont.gov. We review requests and advise on solutions that are in accordance with the State of Vermont Brand Standards and Guidelines.

General Guidelines and Best Practices

Typography

Sans-serif fonts are recommended for all body text. The preferred typefaces for web applications, in accordance with the overarching State of Vermont Brand Standards and Guidelines, are Open Sans and Lato. Header text must be noticeably larger than body text. At a minimum, every state website will use a font size set to 1em and a weight of ‘normal’ for body text.

Color Palette

A standard set of colors was selected for the SOV Web Template to supplement the overarching State of Vermont Color Palette. The color values below are preferred for design elements (buttons, widgets, etc.), page headers and any prominent areas of color on state websites. Accent colors may not be used for text. These color values have been tested for readability and will provide a visual consistency to the majority of state websites built within the SOV Web Template.

Primary Colors

  1. Green (Default)
  2. #033003
 
  1. Blue
  2. #174A7C
 
  1. Tan
  2. #8B5F3A
 
  1. Red
  2. #8B2929
 
  1. Orange
  2. #B85423
 

Secondary/Background Colors

  1. #303030
 
  1. #BEBEBE
 
  1. #F0F0F0
 

The use of background colors can easily make a web page unreadable and must be avoided. The main content area must have a white background with the body text displayed as black.

Alternative Text

All images and graphic elements must include detailed information in the alt attribute to provide users who may not be able to see images on web pages with a description of the image or graphic.

Links

Active links used to navigate to additional content must behave consistently and must be displayed in a way that provides visual distinction.

  • Inline links (links within the body copy) must incorporate two visual cues to distinguish the link from the rest of the body text. The preferred style is to apply an underline and a contrasting color that is has been tested for readability.
  • Links to external sites (web pages not part of the current site) and documents (PDFs, Word documents, etc.) should open in a new browser window.
  • Link titles should be descriptive of the action that will happen when the user activates the link, e.g., ‘Download grant application’ or ‘Read more about the grant program.’ Using terms such as ‘Click here’ or ‘PDF’ for link titles is not acceptable as the titles provide no information to users utilizing screen readers or other assistive technology as to what content will be accessed or where the link will go if clicked.

PDF Documents

All PDFs must be tagged to be accessible by screen readers.

iframe Elements

Inline Frames (iframes) may be used in the body of a site, but not in any of the navigation areas. If iframes are used, they must be accompanied by an alternate text link to the content contained in the frame to accommodate users utilizing screen readers.

Responsive Design

All state websites must utilize responsive design techniques to re-stack and re-size navigation, body areas and all content automatically in accordance with the display size of the viewing device (e.g., desktop, tablet or mobile). It is acceptable for menus to collapse into a menu button that a user must click to open, but these menu buttons must appear and stick at the top or bottom of a tablet or mobile screen.

Request an Exception or Modification

If your website or application requires exception or modification to any of the standards outlined herein, contact the Chief Marketing Office at marketing@vermont.gov. We review requests and advise on solutions that are in accordance with the State of Vermont Brand Standards and Guidelines.