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 10 is implemented; 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: Existing Drupal 7 site examples are shown throughout this section but a new Drupal 10 has been implemented; samples and content will be updated accordingly. 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: 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: Existing Drupal 7 site examples are shown throughout this section but a new Drupal 10 has been implemented; samples and content will be updated accordingly. 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: 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: Existing Drupal 8 site examples are shown throughout this section but a new Drupal 10 is implemented; samples and content will be updated accordingly.

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

State of Colorado website managers must ensure that websites meet or exceed Levels A and AA success criteria in the most recent official version of the Web Content Accessibility Guidelines (WCAG). WCAG guidelines not only help make web content accessible to people with sensory, cognitive, and mobility disabilities but ultimately to all people, regardless of ability. 

Accessibility Rules and Standards

State accessibility compliance is informed by:

• The State of Colorado’s Technical Standard TS-OEA-002: Technology Accessibility for Web Content and Applications (Google Doc)
• Colorado Laws for Persons with Disabilities (House Bill 21-1110)

HB21-1110 makes it a state civil rights violation for a government agency to exclude people with disabilities from receiving services or benefits because of lack of accessibility.

Any Colorado government entity that doesn’t meet OIT’s web accessibility standards could be subject to injunctive relief, meaning a court order to fix the problem; actual monetary damages; or a fine of $3,500 payable to the plaintiff, who must be someone from the disability community.

Where to Start

• Become familiar with accessibility fundamentals and the current WCAG standards, W3C.
• Reference OIT’s Accessibility Guide for help in managing and creating accessible site content.
• Contact your department accessibility liaison or OIT's Testing Solutions and Services team to learn about manual accessibility testing for websites and applications.
• Sign up for OIT's State of Colorado Accessibility Newsletter

Testing Resources for Website Accessibility

Both automated and manual accessibility and quality testing processes are essential to ensure website content is accessible. Examples of resources and processes that can help identify and resolve potential accessibility and quality issues include:

• Automated evaluation with Siteimprove
• Automated and on-demand evaluation with Web Accessibility Evaluation Tool (WAVE) by WebAIM
• On-demand evaluation using ANDI by the Accessible Solutions Branch of the Social Security Administration
• Human-led content reviews
• Human-led testing with screen readers
• Human-led testing with visual difference emulators

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 Gmail settings. (Right click on image and click “Alt Text”, or select image and press Ctrl+Alt+Y). Standard Alt tag content for your department logo should include the following hierarchy of information;
  Colorado State Department Name, followed by the Division, Office, Program, or Unit.
• Add a hyperlink your email address and department website. If links are added to third-party utilities, such as scheduling tools, the resource(s) must be formally approved of or endorsed by OIT.
• Also add a descriptive Alt Tag and hyperlink to any social media icons used. Social media icons are not required, they are optional.

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.

Google Docs Letterhead Template 

The example shown on the left, is the basic letterhead design. 

Typesetting 

Use styles palette inside Google docs letterhead template for typesetting styles, making sure all text is black. Use 12 pt text for the body copy and 1.5 line spacing. 

Images 

Add alternative text to all images. Right-click on the image. Select “Alt text.” Enter relevant, meaningful text in the description field, not just the filename. 

Content Formatting 

Avoid using tables. Use built-in title, subtitle and heading styles (H1, H2, H3) as this helps the reader determine structure. For emphasis use bold type, but not both bold and italic type. Use inline, left-aligned text for a consistent left margin.

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