Design Guidelines

In this guide

Color Palette and Usage
Typography
Image Guidelines
Site Components
Accessibility

This guide is for the Office of Analytics, Technology and Planning (ATP) to create consistent web content for the Allegheny County Analytics site. It outlines key design elements and components, and provides descriptions on how and when to use them.

Following this guide will ensure consistent results when posting to the site, and serve as a resource hub for the ATP team and their contractors on concepts like accessibility and design principles.

Color Palette and Usage

Main Palette

The primary palette for Allegheny County Analytics consists of two blues (bright and dark), a yellow to introduce some vibrancy, and a cool gray to serve as a background color. The components and elements on the site have this palette baked into their styling, so you’ll likely not need to add much outside of them in most cases. Color options for text and background colors are available in the “Block” section in the WordPress right sidebar. The color and text combinations on this page all meet the minimum contrast ratio of 4.5:1 to ensure they’re readable by the majority of visitors to your site. Use these combinations as guidance if you want to use any of these colors as a background.

Secondary Colors

These are additional options for use on the site, and are meant to be used in combination with the primary palette.

#373F41
Black

#FFFFFF text

#003B71
Medium Blue

#FFFFFF text

#98CFFB
Light Blue

#232323 text

#C4C4C4
Dark Gray

Default text

Typography

Fonts

Merriweather

Aa

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890

Merriweather is the font for body copy on the site. As with Poppins, it’s a highly readable, well-designed font that straddles classic design (e.g.; times new roman) with modern sensibilities (e.g.; slab serifs).

Download Merriweather from Google Fonts.

Image Guidelines

There are several options for image placement on the site. This section outlines what’s available, and provides guidance on how to approach image selection. You can read more about image types and our recommendations for image selection in the Content Style Guide.

Choosing the right kind of imagery

The overarching visual language for the Allegheny County Analytics site is meant to convey a strong sense of community, approachability, and trustworthiness. Image choice goes a long way to reinforcing these concepts, so care must be taken when making selections for the site. Ideally, the site will present a mix of vibrant illustrations, data visualizations, and authentic, human-centered photography. Here are guidelines on what imagery to chose for your posts, and some points to consider:

Focus on human-centered images

Since the people of Allegheny County are ultimately who this site is for, they should see themselves reflected in it. The site should represent people from all walks of life, depicting humans in a variety of color, culture, shapes and sizes. All imagery that’s not data-focused should suggest the presence of people — though this doesn’t mean all images must feature full people in frame, they should strongly suggest human presence or reference. An image can, for instance, only feature human hands or iconography depicting people.

Using illustrations

Illustrations generally allow for more variety and flexibility in style and tone, and give you more options for inclusivity. An illustration can easily include a wider swath of unique individuals, for instance, than a staged photograph. In addition, the site already contains a good amount of vector-based data visualizations, so illustrations will naturally fall in line tonally with those.

We compiled an image board on iStockphoto as a visual guideline for the kind of illustrations to consider.

While style can and should vary slightly from image to image depending on the tone of the post, here are the primary considerations for selecting illustrations for the site:

• Find images that include at least one human element
• Full color images are ideal, though desaturated or grayscale images can be used if appropriate for the post or publication
• Aim for hand-drawn or organic shapes as opposed to sharp, rigid forms
• Choose images with a horizontal or panoramic orientation, especially for hero images
• When available, download source vector files (EPS, AI, or SVG) to maintain an editable original, then convert them to JPG or PNG to post to the site

Using photography

There may be instances where stock or original photography are more appropriate as a hero or featured image than an illustration. While we generally lean toward illustrations due to their flexibility, a photo of actual human beings may be more appropriate for certain posts. Some cases for using a photo over an illustration in a post would be to:

• Depict a location or building in Allegheny County
• Highlight a real-world event
• Include real images of members of the community

The guidelines for illustrations mostly apply to photography choices as well:

• Choose diverse, human-centered imagery
• Aim for authenticity — find real people in realistic settings and situations, not overly staged or cheesy
• Default to full color/saturated photos unless the post specifically calls for otherwise
• Download high or full res JPGs when available, then resize and compress them before uploading to the site
• Horizontal or panoramic-oriented images work best for hero images
  

You can download and use authentic, free stock photography from sites like Unsplash or Pixels. The only caveat is this photography must be attributed to the original author — which can be done via image caption in WordPress. Attribution information is available with each download.

Image placement options

The three primary options for image placement on the site are hero, featured, and on-page. Here is a template built using Figma with instructions on how to place and export hero and featured images. Note: you will need to create a free Figma account in order to edit the file.

Hero Image

Hero images are at the top of content pages and are an opportunity to establish the theme of your content visually. While not required, they’re highly recommended to give your content a more cinematic introduction and set an expectation for your audience. A situation where you may not want to use hero images, however, are Dashboard pages, as they push the main focus of these pages further down the page. You can add a hero image to a page using the “Hero Image” section available in every WordPress post.

Information about hero images:

• Ideal dimensions: 2560 pixels wide by 1060 pixels tall
• In order to maximize the hero image space, find images where the main focus is contained in the middle third of the image
• WordPress will automatically shrink images above 2560px down to that width, and height will adjust proportionately
• Images less than 2560px width will be stretched to fit the area, so higher resolution images are highly recommended

Featured Images

Featured images display in cards on landing pages and the homepage. Similar to hero images, they are an opportunity to set the visual tone for your publication. While you don’t need to use the same image as the hero here, it’s recommended to maintain the expectation for your audience when clicking through the site. You can add a featured image to your post via the right sidebar in the WordPress editor.

For Dashboard posts, we recommend cropping or recreating one of the key data visualizations from the data and using that as the featured image.

Information about featured images:

• Ideal dimensions: 1000 pixels wide by 600 pixels tall
• A template with these dimensions and guidelines around placement is available in Figma

On-page Image

WordPress allows you to place images within the body of your posts. It’s as easy as selecting the “image” block from the visual builder, and either uploading or using an image from the media library. Similar to hero and featured images, on-page images should be relevant to your content, not distracting, and should be used selectively to reinforce certain points, or provide a visual that can’t be described solely with content. Since these types of images only appear on specific pages, you can deviate from the “illustrative” recommendation that applies to hero and featured images.

Since these images can be automatically resized by WordPress, there is less of a need to follow specific dimensions. It’s recommended you run all images through image compression software before uploading to the site, which will keep load times low. A recommended free piece of software for download is ImageOptim. If you’re unable to download software, you can try an online alternative like Optimizailla.

How to edit images in Figma:

• Cropping images
• Add images to design files

Site Components

There are several built-in components you can use to construct and organize your content. Here are examples of these tools, along with guidance on usage.

Buttons

Use a button when you need a single clear call to action (CTA). In most cases text links are fine, but if you need more visual impact, a button is appropriate.

Recommended color combinations for buttons are:

Accordions

Use accordions to nest longer supplemental information under a single header. A good use for accordions would be on an FAQ page, or a page with a lot of topics that aren’t totally necessary for your audience to dive into. Take care to assign accordion titles with the proper heading level — which in most cases will likely be an H3 or H4.

Tables

Use tables for tabular data or information with logical relationships, like contact information. To ensure the table is accessible to screen readers, you must include both a caption and table headers, which can be selected in the “Block” panel on the right side of your browser window. There are currently two default styles for tables:

“Default”

“Stripes”

Accessibility

All components and styles on this site are aligned with W3C Web Content Accessibility Guidelines (WCAG) 2.1 standards to comply with requirements of Section 508. As the site grows and new needs are identified, it’s important to follow the basic tenets of accessibility when developing new standards. WCAG 2.1 is built around 4 principles (read the full WCAG 2.1 guidelines at w3.org):

• Perceivable — information and user interface components must be presentable to users in ways they can perceive.
• Operable — user interface components and navigation must be operable.
• Understandable — information and the operation of user interface must be understandable.
• Robust — content must be robust enough that it can be interpreted by by a wide variety of user agents, including assistive technologies
  

Here are a few accessibility concepts you’re likely to encounter when updating and maintaining the site

Alternative (Alt) Text

Alt text allows people using screen readers to know what’s in an image they normally wouldn’t be able to see. When a screen reader highlights an image, it’ll also read the alt text if available.

All hero, featured, and on-page images should have alt text unless the image is intended to be decorative only. To add alt text to an image in WordPress, navigate to the Media Library and upload or select an image. On the right of the image modal box, the first entry field is “Alternative Text”. Write a brief but descriptive summary of the content of the image. You should also take this time to make the title of your image logical and descriptive too.

If your image is already placed in WordPress, you can enter or edit alt text in the “Block” panel on the right side of the browser window, under the “Image Settings” section.

Color Contrast

Foreground text must be visually distinct from the background it’s placed on so users with moderately low vision are able to read it. The threshold for acceptable color contrast is a ratio of 4.5:1 and above, according to WCAG 2.1 guidelines. The default styles across the site for text meet or exceed this threshold, so using them will guarantee you meet this requirement. However, if you want to check color contrast for yourself, you can do so with the free, web-based WebAIM contrast checker.

See the color palette section for specific guidance on text and background color combinations that are acceptable within the site palette.

Use descriptive link text

Link language should set an expectation for your audience. Additionally, screen readers orate hyperlinked text as it’s written — so a link titled “Read More” or “Click Here” doesn’t mean anything without additional context. Here are a few tips to writing good link copy:

• Write different link content for each unique URL on a given page
• Explain the action the user is expected to take if they click the link, like “read about…” or “view the…”
• If you can’t understand what will happen when you click link text without any additional context, rewrite it!

Use heading levels correctly

Review the Headline Level section on this page for more information on this topic.

• There should be only one H1 per page, and that’s the title of the page
• Heading levels must appear sequentially — an H3 must always follow an H2, for instance
• Heading levels visually go from largest (H1) to smallest (H5)
• You only need to use the heading levels that are appropriate for your content
• Don’t assign text a heading level to mimic a particular typographic style, use the “Typography” option in the right sidebar of WordPress to edit font style
  

The content in this guide should be considered “in progress”, and updated as new components are added to the site.