Web

Color Palette

The web palette includes a primary and secondary color, text color for body and header text, and two accent colors. These colors are best used for web accessibility and best contrast for digital experiences. Be sure to use colors consistently throughout website and application experiences. Please consult the section in the style guide on "Accessibility" to ensure the use of color meets accessibility guidelines.

Color Name

Usage

RGB

HEX Code

Color

Navy Blue

Primary color: all headers, table and tab header background, buttons, accent color

RGB: 0, 45, 86

#002D56

 

Bright Blue

Secondary color: large headers, tab header background, buttons, accent color

RBG: 0, 85, 150

#005596

 

Process Black

Body text, headers

RGB: 88, 89, 91

#58595B

 

Red Orange

Accent color, emphasis, alerts, button accent, link hover accent

RGB: 217, 83, 30

#D9531E

 

Bright Green

Accent color (limited to decorative only), alerts, Large headers & fonts (over 18px)

RGB: 109, 141, 36

#6D8D24

 


Fonts

For the DenverGov.org website and related applications, Proxima Nova is the official web font. The CSS will dictate the look and feel of this font based on the style and heading selected.

Body

  • Font Family: "proxima-nova",sans-serif;
  • Font-size: 1em;
  • Font-weight: normal;
  • Color: #121212;
  • Font-style: normal;

Headings

Uses the same font family, font style and color as body.

Heading Level

CSS

Heading 1

font-size: 2.111em;

font-weight: 900;

margin: 0px 0px 20px 0px;

Heading 2

 

font-size: 1.778em;

font-weight: 800;

margin: 0px 0px 20px 0px;

Heading 3

 

font-size: 1.444em;

font-weight: bold;

margin: 0px 0px 10px 0px;

Heading 4

 

font-size: 1.333em;

font-weight: bold;

margin: 0px 0px 20px 0px;

Heading 5

 

font-size: 1.222em;

font-weight: bold;

margin: 0px 0px 20px 0px;

Heading 6

 

font-size: 1em;

font-weight: bold;

margin: 0px 0px 10px 0px;


Navigation

Primary Navigation (Denvergov global header)

Our primary navigation is used in full on the Denvergov website. A simplified version should also be used for all custom applications and contains all elements of the Denvergov version except the megamenu and modified version of the translation menu.

Denvergov Primary navigation is made up of two parts:

  1. A navy-blue bar with the full color Denver logo, a right aligned utility bar that includes buttons for “Make a Payment”, “Report a Problem”, and “Services” plus a language translation dropdown menu.
  2. A bright blue global navigation bar, below the logo bar, that includes links to our global pages on Denvergov. Additionally, a megamenu of subpages is included in the Denvergov website’s global navigation.

Denvergov Global Navigation with Megamenu  

Breadcrumb Navigation

Breadcrumbs provide a helpful way-finder within applications websites with a complex information architecture (a site with loads of content, like Denvergov). Breadcrumbs also help increase SEO and reduce bounce rates by giving users one-click access to higher site levels.

Sample of the Denvergov breadcrumb navigation

Secondary Navigation

Navigation Tiles (Denvergov)

Navigation tiles are used on Denvergov for landing page navigation. Tiles images assist in conveying meaning beyond the title and description and can use either high-quality, appropriate photography or icon tiles. Be sure to only choose one style and do not mix photo with icon styles.

Icon Tiles

We currently have an illustrator (AI) template for creating icon tiles. This includes the fractal background and a library of icons. Use only white, solid icons for these tiles to provide maximum contrast and maintain accessibility requirements.

Please contact the web team for access to our template and/or specifications for creating our navigation tile images.

Denvergov icon navigation tiles

Photo Tiles

Photo should be high-quality, meaningful, diverse where possible, and represent the values of the city and community. Be respectful and thoughtful when choosing photos and keep the same style and format for all tiles used on a web page.

Do not mix black and white with color photos for image-based navigation. The exception to this last rule is that you can mix photo styles if it is part of telling a story (see www.denvergov.org/iamdenver for an example of mixed photo styles).

Please contact the web team for access to our template and/or specifications for creating our navigation tile images.

Denvergov photo navigation tiles


Global Footer

The website global footer currently includes three sections of informational links for "Contact 3-1-1", "Visit Other Denver Sites", and Share & Connect" content. Web applications need to at least include the sub footer links in the navy area which include City JobsAccessibilityPrivacy & SecurityTerms of UseOpen Records (CORA), and our current copyright.

Note that a “Jump to Top” button is also included in the right side of the sub footer.

Denvergov website global footer


Graphics & Imagery

Images

Use high-quality images and reduce the size for the web. Make sure the quality and subject matter are clear and easy to read. Be consistent with photos styles and do not mix black and white with color photos for image-based navigation.

You can mix photo styles if it is part of telling a story (see www.denvergov.org/iamdenver for an example of mixed photo styles).

Tips for web images:

  1. Do not mix icons with photos.
  2. Do not use pixelated or fuzzy images. Fuzziness can only be used stylistically to obscure a background and bring focus to an object.
  3. Be sure to include image descriptions (alt-text). See accessibility guidelines for tips on how to add descriptions.
  4. Images for the web must be under 1 MB. Using photoshop or other editing tools will allow you to save for the web easily without losing quality.

laptop on a table displaying the Denvergov homepage on screen Concert at Red Rocks Amphitheater, at early duskHistorice black and white photo of a zookeeper and bear in on one the habitats at the Denver Zoo

 

 

 

Iconography

Icons are graphic elements that may be used on official city websites to enhance the meaning of content. Icons should aid users with accomplishing key tasks and should be used sparingly and for specific purposes such as navigation. The overuse of icons, or what the Web UX/UI team likes to call "icon mania", can hurt usability, as can a mixture of iconographic styles.

We generally use solid color glyph styles due to their high level of readability. To avoid confusion and create consistency, we have icons and icon libraries approved for use on city sites. Additionally, our development team has access to our icon library and other icon sets through Fort Awesome.

Contact Denver's Web Team or Application Development Team if you need customized iconography for special user scenarios.

Icon Styles

Navy on White

sample of navy glyph icons on white background

Process Black on White

sample of grey glyph icons on white background

White on Navy

Sample of white glyph icons on navy background

White on Fractal Background

sample of white glyph icons on blue fractal background


Lists

Ordered List

  1. Do this
  2. Then this
    1. Also this
    2. And this
      1. And then this
  3. And then this

    Unordered List

Unordered List

  • I’m a bullet
  • I’m also a bullet
    • I’m a sub-bullet
    • And so am I
      • I’m a sub-sub-bullet
  • And I’m a first level bullet again

Buttons

Buttons should be clean and consistent. Be sure to use text on your button or link that informs the user of what they will be doing when they click the button. Will they learn, register, subscribe to something? What will they learn, register, or subscribe to?

Additionally, do not mix button styles for the same functions. Stick with one style and use the buttons as they are described below. 

Standard Button

Used for standard information such as “Learn More About Our Government Services”.

Standard Button Style

Call to Action Button

Used to direct users to an action such as registering, paying, submitting feedback, etc. It is designed to capture the viewers’ attention, not only by the style of the button but by the “call to action” of the text. Make sure that your button text is clear in telling the user what action they are taking and what they will get when they take that action such as, “Register for an Upcoming Class”.

Call to Action Button Style

Document Styled Button

The file type indicator and file size should display for all documents that are linked as either a standard link or as a button. This is required for accessibility. If the document is a PDF, make sure you indicate that the "named document opens in new window" in the link title and choose "new window" for the link target.

PDF Document Button Style(PDF, 1MB)

Word Document Button Style(DOCX, 1MB)

Excel Document Button Style(XLSX, 10KB)

Featured Buttons

Feature buttons are generally used to show an array of resources or services related to other content on the page. They are often used on Denvergov agency landing pages as tertiary (third level) navigation to feature things that are important but not at the same level of importance as the tile navigation buttons.

Be sure to indicate whether a link is internal or external by configuring the link target and identifying external targets using the Title function for opening in a new window. Additionally, be sure that featured links maintain heading hierarchy within the rest of the content of your pages.

You can configure these buttons in Denvergov to these 4 layouts and these layouts can be replicated for applications, as needed:

Option 1 - 1 column

Option 2 – 1 column continuous

Option 3 – 3 columns

Option 4 - 4 columns


Links

Links should be clean and consistent and should use text that informs the user of what they will be doing when they click the link. Will they learn, register, subscribe to something? What will they learn, register, or subscribe to?

Make sure that external web links and PDF documents open in a new window and that the title of that link indicates the links "opens in new window".

Webpage Link

Document Link


Accordions

Accordion menus are an established method of reducing the visible content on a page, only revealing the content a user is interested in when an accordion tab is activated. That said, accordions should be used sparingly. It's much easier to scroll a page than to have to open/close content on the page. Users like to scan, not hunt-and-peck. Preferably, accordions should be reserved for secondary content or long sections of content that is easier to break up than to scroll such as “Frequently Asked Questions”.

For developers, be sure to apply the .active class to the selected accordion panel. The state of panels should be preserved as users navigate the rest of a web page. Accordions should never be nested inside of accordions.

Panel 1

Accordion panels are set to closed by default. They are styled with a white header on navy background. The hover effect style is a bright blue background with text underline on the header.

Panel 2

Active tabs have a Bright Blue background with white header font.

Panel 3

A few additional notes:

  1. Don't add accordions within a set of accordions (or tabs).
  2. Make sure headers are set accurately within the rest of the content of your page. If a section header is using an H2 and your accordion element is under that header, set the accordion header to H3.

Tabs

Use tabs to alternate between views within the same context (not to navigate to different sections of a site). Logically label and group content behind tabs so users can easily predict what they'll find when they select a given tab. Always make sure the currently selected tab is highlighted with the {.active} class.

Consider converting tabs to accordions in a mobile context to prevent wrapping tabs to two lines. Note that this functionality is something that already happens by default in Denvergov. Tabs (or accordions) should never be nested inside of tabs.

Tab 1

The active tab has a white background with bright blue text header. You can set the header in our CMS version of tabs so that the heading hierarchy can be maintained.

Tab 2

Inactive tabs have a Bright Blue background with white header font. The also have a navy blue background hover effect.

Tab 3

A few additional notes:

  1. Don't add accordions or tabs within a set of tabs
  2. Try not to have more than 4 tabs or tab titles that are too long. Tabs will automatically convert to an accordion if there is not enough room to display as tabs.
  3. Make sure headers are set accurately within the rest of the content of your page. if a section header is using an H2 and this tabs element is under that header, set the tabs header to H3.

Tables

Our table style is simple, easy to read, and scales to different devices (responsive). Make sure to always indicate the header row and do not merge cells. Each cell should be distinct and provide information for users to tab through and read. Tables in our CMS can be set to the Responsive Class so that the table scales and adjusts layout for different screen sizes.

Apples Grapes Oranges Pears
 Fuji  Concord  Naval  Bosc
 Honeycrisp  Champagne  Mandarin  Anjou
 Granny Smith Muscadine Blood  Asian

Pagination

Used for long lists of content such as news article archives, search pages, and data in multi-page tables.

Note that a page counter appears when a user clicks on the ellipses (...) in the mid section of the pagination that allows access to other pages not shown within the otal range of pages. Additionally, the active page is indicated by a bright blue bottom border. The hover style for inactive pages within the pagination are indicated by a bright blue background.

Sample of Denvergov Pagination


Forms

There's an extensive body of research on form usability and accessibility; Accessible forms are usable forms. We aren't the industry's leading experts, but we draw from expert research on the topic. We suggest reading The Ultimate Guide to Creating Accessible Submission Forms by Freedom Ahn or Best Practices and Usability for Online Forms by Stefanie Braun for guidance.

Best Practice Tips for Web Forms

  1. Avoid use of multi-column form layouts. This can cause confusion for the user and results in incomplete forms and user frustration.
  2. Do not capitalize labels.
  3. Use simple language for field labels.
  4. Labels should be bolded and top aligned above inputs to create uniformity and aid with scanning.
  5. Create tighter spacing between labels and form fields to be sure labels are visually associated with their related fields.
  6. Labels should never be substituted for placeholder text or placed inside fields.
  7. Do not put placeholder text inside of form labels; place the text below fields but above other status indicators such as field confirmation indicators that would appear below the form field.
  8. Clearly indicate mandatory fields by denoting them with a red asterisk (*) symbol.
  9. Use input masks such as dashes for phone numbers to help format the data and prevent errors. Avoid making the person filling out your form do the hard work of putting data into the right format when you can process and format that data on the server side.
  10. Keep the number of mandatory fields to a minimum.
  11. Group related fields into field sets (i.e., contact information, income verification, etc.).
  12. Provide hints and tooltips for questions (below the form field) that may require additional explanation (such as why we're asking for personal information).
  13. Set a tab index on each form field.
  14. Use Aria labels where needed to help define various functions for screen reader technology.
  15. Password fields should include "good, bad, or excellent" indicators and clearly state password selection criteria in the field helper text.
  16. Make sure you're choosing the right field for the right task. See Sensible Forms: A Usability Checklist.

Search

Be sure that the search box is labeled and includes related ARIA labels for both the button and icon.

Denvergov Global Search

Our global search box allows users to search content from anywhere in the Denvergov website.

Denvergov Global Search example

Denvergov Side Bar Search

The Side bar Search is used in pages such as our Bidding opportunities page and Citywide News Articles page, and searches content only based on the type of content pulled into the page (e.g., bidding opportunities and news, respectively).

Denvergov Side bar Search example


Indicators

Indicators are an important part of helping users through an online interaction. They should warn users before making a final, permanent choice such as deleting a record, erasing, or clearing input fields, or submitting a payment.

  • Alerts: Alert box wording is critical to helping users complete tasks successfully. Alerts are even more helpful in guiding them away from mistakes. For error messaging, avoid using error codes like. "Cannot do such-and-such properly error : 321." Users don't care about error codes, nor do they convey anything meaningful or useful to the average person. So, to put it frankly, be precise and brief about the error or alert in your message. The alert title should immediately convey the nature of the problem and the body of the message should properly explain it.
  • Emphasis: Emphasis blocks are similar to alerts but used more for notifications to relay important or related information to the viewer
  • Labels: Indicator labels are great for dashboards, administrative screens, and user profile pages where users may need to be alerted to the state of a particular record, or some action they need to take.
  • Badges: Badges also make for great indicators on dashboards, administrative screens, and user profile pages where the number of records or changes may be of interest to users.

Progress bars

Progress bars help keep users from abandoning their session while data loads in the background of an app. Progress bars should be combined with a dialog that indicates approximately how much longer a user will have to wait for a given event to be completed.