Digital Guidelines

Representing the Brand Digitally

One of the greatest opportunities for global proliferation of the Colorado brand lies in our digital assets. From our state's strong web and social media presence to our daily email communications as State employees, our brand knows no state lines or boundaries.

The consistent digital expression of our brand across all departments and State entities will amplify our unified voice to talent, trade, and tourists — helping to boost our economy for the good of all Coloradans. We have an unparalleled opportunity to show and tell our brand to the world and share what we stand for.

The following digital brand guidelines are designed to address the visual representation of the Colorado brand online and provide guidance on best digital practices.

Websites

Hundreds of websites collectively represent our State government. Maintaining a consistent look and feel across these digital properties is critical to reinforce the Colorado brand online and spark immediate consumer/constituent recognition of State agencies and programs.

There are several technical platform options for State websites. When developing a new site or updating an existing site, you may select the platform that best suits your website needs. Drupal and Google Sites are the most frequently used platforms, but are not the exclusive options for the State. Note: Existing Drupal 7 site examples are shown throughout this section but a new Drupal 8 is coming, samples and content will be updated accordingly.

Before you start planning your new site(s), please make sure to consult with the State Internet Portal Authority (SIPA), Colorado Interactive (CI), and Integrated Document Solutions (IDS) to explore the platforms available to you to remain consistent with the State's brand.

Websites: Homepage Guidelines: Layout

The website example below represents the State's standard homepage format and style. This layout should be used as the default for all State-related websites if applicable. Deviations are permitted, but not recommended. All deviations must comply with the general brand guidelines.

Note: Drupal 7 site examples are shown throughout this section. New Drupal 8 samples and content will be updated in the near future. (March 2021)

Websites: Homepage Guidelines: Images

On the website homepage, the large image and the logo lock-up banner image serve as the primary visual focal points. For brand consistency these images should be displayed at approximately the size shown. Exact pixel dimensions are provided for reference although these may vary depending on the exact grid system used.

Logo lock-up banner image
The logo lock-up should be displayed prominently on the site in the area indicated. For best results, the logo lock-up should be displayed with a white or a very light colored background.

Focal images
This may be a static image or a photo carousel alternating between several images.

Websites: Secondary Page Guidelines

The website example below represents the State's standard format and style for secondary or internal webpages. This general layout should be used as the default for all State-related websites. Deviations are permitted, however, all deviations must comply with the general brand guidelines.

Note: Drupal 7 site examples are shown throughout this section. New Drupal 8 samples and content will be updated in the near future. (March 2021)

Websites: Footer Guidelines

The footer examples below highlight a couple ways a webpage footer may be handled. The format and style of a webpage footer are flexible. However, all footers should include the following content: navigation, contact information, copyright, and social media links (if applicable) as a best practice.

Websites: Responsive Grid System

The website template should utilize a responsive grid system, ensuring all web content can be accessed from multiple devices such as smartphones, tablets, and computers. Below are examples of how a responsive website might look on desktop and mobile screens.

Note: Drupal 7 site examples are shown throughout this section. New Drupal 8 samples and content will be updated in the near future. (March 2021)

Websites: Best Content & Copywriting Practices

Web content is one of the most efficient, effective, and direct opportunities to communicate your brand/department message to the world. Your website is your voice and your identity. Leverage this powerful platform to engage your target audience. Below are some helpful tips when creating or updating a website to offer a better customer experience throughout your site.

• Understand your audience
• Write for accessibility
• Write with SEO in mind
• Align content with searched keywords
• Use plenty of headlines
• Use bullet points
• Keep simple/short paragraphs
• Omit unnecessary words
• Most important information first
• Call attention to key terms/phrases
• Implement quality standards
• Keep a content inventory
• Use an analytics tool (Google Analytics)

Websites: Content

• Content is the words, pictures, videos, and documents on a website that make up the site information and dictate the user experience. In order to be effective in the communication of information and maintain control over user experience, departments should have a strategic plan for creation, publication, and governance of content.
• Keeping website content up-to-date is critical for providing accurate and timely information to the public. If there are older versions of the same content on a site, information should be dated and legacy information should clearly link to newer versions.
• Keep posted content for two to three months, max. Save the older content offsite in a web content directory/database, etc.
• If using an outside resource to develop and design a website other than SIPA, the department must maintain the ongoing ability to create, edit, and modify the content on their own.
• Managing site links is an important aspect of keeping content accurate. Departments should be sure to review links regularly and ensure all content editors are following the same linking policy.
• Using a content management tool can help with managing misspellings, broken links, accessibility, and more. (Siteimprove is being used by multiple State agencies already.)
• Content should be written and organized for the audience accessing the site. Using data gathered in analytics to determine who the audience is, and what information is most important to them assists with content design
• Uploading large files such as extensive documents, videos, or graphics can negatively affect the user experience by causing information to load slowly. For performance purposes, uploaded files should be limited to 256MB.
• Content is always the responsibility of the department and as such it is important to review the information for accuracy.
• Personal identifying information (PII) should never be shared as content on a site nor should it be contained in any files posted on the site. If requesting PII from end users via a website, the department is responsible for the security of such information and must have adequate procedures and protections in place.

Information Security

The State of Colorado's Information Security Policies can be found at www.colorado.gov/oit. When operating and maintaining an independent site or working with a managed service provider, departments will need to ensure the applicable policies are being met.

Websites: Accessibility

Web accessibility means that people with disabilities can perceive, understand, navigate, and interact with the Web, and that they can contribute to the Web. Web accessibility also benefits others, including older people with changing abilities due to aging. Please work with SIPA or your website vendor to accommodate accessibility throughout your site. An SME on staff is recommended for each department to understand what accessibility is and how it affects your site specifically. Below are some guidelines to get your site compliant with the 508 standards.

• All .gov sites or sites that are used to primarily support the government's mission should be Section 508 compliant. (https://www.section508.gov)
• A text equivalent for every non-text element shall be provided (e.g., via alt, long descriptions, or in element content).
• Equivalent alternatives for any multimedia presentation shall be synchronized with the presentation.
• Web pages shall be designed so that all information conveyed with color is also available without color, for example from context or markup.
• Row and column headers shall be identified for data tables.
• Markup shall be used to associate data cells and header cells for data tables that have two or more logical levels of row or column headers.
• Frames shall be titled with text that facilitates frame identification and navigation.
• A text-only page, with equivalent information or functionality, shall be provided to make a website comply with the provisions of this part, when compliance cannot be accomplished in any other way. The content of the text-only page shall be updated whenever the primary page changes.
• When a webpage requires that an applet, plug-in, or other application be present on the client system to interpret page content, the page must provide a link to a plug-in or applet that complies with the basic standards.
• When electronic forms are designed to be completed online, the form shall allow people using assistive technology to access the information, field elements, and functionality required for completion and submission of the form, including all directions and cues.
• When a timed response is required, the user shall be alerted and given sufficient time to indicate more time is required.
• Color-coding shall not be used as the only means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.
• Software shall not use flashing or blinking text, objects, or other elements having a flash or blink frequency greater than 2 Hz and lower than 55 Hz.

Websites: Social Media

Social Media Icons

The following social media icons are available for use on department websites, business cards, email signatures, and other applications to indicate that your department has content available at these social media outlets. The artwork for the icons can be downloaded from the drive shared folder.

Best Practices for Managing Social Media Accounts

• Keep communications short and concise
• Follow back and interact with other like-minded resources
• Establish a consistent voice and tone and stick with it
• Keep the social in social media top-of-mind
• Cater your messaging by channel — e. g. Facebook vs. Twitter
• Be proactive as well as reactive
• Respond to all feedback — negative and positive
• Post frequently, 3 to 5 times per week
• Focus on providing quality content and resource connections

Social Media Identifier for Departments
There are two circumstances where a Emblem may be deployed independently of the Colorado C. These include favicons and social media identifiers. Your department or office Emblem should be used independently when deployed as an identifying social media icon.

Websites: Email Signatures

Minimum Requirements

All State of Colorado employee email signatures should conform to the typesetting standards outlined below. Please replicate the signature format as closely as possible and consult your in-house communications team and/or IT for assistance.

Setting up an Accessible Email Signature with a Logo Lock-up

Logo lock-ups for each department and department sub-brand have been sized for optimal viewing results when used in Gmail. These email-friendly logo lock-ups are available on Google Drive via each department’s brand folder under “email signatures.” Subsequent instructions should be provided to department employees for linking to the department-hosted email signature files through their communications or IT team. Be sure to meet accessibility requirements by adding a descriptive Alt Tag to your department logo. This is done by adding Alt Text to the image in a Google Doc (Right click on image and click “Alt Text”, or select image and press Ctrl+Alt+Y ), and then cutting and pasting it into the Gmail signature field in your Gmail settings. Be sure to hyperlink your email address and department website. Also add an Alt Tag and hyperlink to any social media icons used.

Digital Letterhead

Digital Letterhead Templates are housed on Google Drive in each department's brand folder. Those containing previous branding can be updated by replacing existing logos with the new versions available as letterhead-sized PNGs. Additionally, all text should be changed to black. Due to the increased width of the C/Emblem, it may also be necessary to increase the indent of text aligned under the logo.

Presentations

Two customized PowerPoint presentation templates are available for department use and customization. Templates are housed on Google Drive in each department's brand folder. Other formats may be used but keep consistent and include current brands and colors in your layouts.

PowerPoint Sample: Template A

PowerPoint Sample: Template B