Design Guidelines

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.

Bright Blue

#FFFFFF text

Dark Blue

#FFFFFF text

Bright Yellow

#271A3C text

Light Gray

Default text

Secondary Colors

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


#FFFFFF text

Medium Blue

#FFFFFF text

Light Blue

#232323 text

Dark Gray

Default text






The Poppins font family is the primary heading and subheading font for the site. It’s a clean sans serif font with high readability, and is the more casual counterpart to the other site font, Merriweather.

Download Poppins from Google Fonts.




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.

Heading Levels

Heading levels define the hierarchy of content on a page. Every page starts with Heading Level 1 (H1), which is often the title of the page itself. From there, each heading level should appear as needed in ascending order (H2, H3, H4, H5), and are meant to break content down into more manageable segments. Think of an H2 as a section heading, and an H3 as a subsection heading. H4 and H5 can be used to break these down even further as necessary.

Font classCSS stylesDescription
Heading Level 1 (H1)font-size: 2.8rem
font-weight: 700
Heading level 1 is generated by default and is the title of the page. There should only be one H1 per page, so if you spot one being used outside the title on the page, change it to an H2.
Heading Level 2 (H2)font-size: 1.625rem
font-weight: 700
This is the heading level you’ll likely use the most. H2s denote each new section of content on your page. For every main point, use an H2. You can have as many H2s as you need to organize content, and in a lot of cases, this will be the only heading level used on a page.
Heading Level 3 (H3)font-size: 1.375rem
font-weight: 700
Think of heading level 3 as “subheadings” to the larger H2s. If you need to break down large sections, use H3s as the title for each subsection. You can use as many H3s in a row as you need, but they must always follow an H2 in the stack.
Heading Level 4 (H4)font-size: 1.25rem
font-weight: 500
Heading level 4 is meant to break down subsections (H3s) even further. These along with H5s likely won’t be used often as H2s and 3s, and if you’re finding they are, consider simplifying your content.
Heading Level 5 (H5)font-size: 1.125rem
font-weight: 500
H5s break down H4 sections further.
Body Copy Large (P)font-size: 1.125rem
font-weight: 300
There are two sizes of body copy on the site: Large and Regular. Large is meant for publication text, as the increase in size makes line-lengths shorter and text overall more readable.
Body Copy Regular (P)font-size: 1 rem
font-weight: 300
Regular body copy size is found on all non-publication pages. It’s equivalent to 16 pixels, which is the minimum recommended size for web body copy.
Chart outlining primary site font styles

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.

People greeting each other
Illustration of a lot of unique hands clasped together in agreement
People gardening

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.

Screenshot of a hero image

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 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.

Screenshot of a featured image

Information about featured images:

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:

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.


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:


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.

Title 1 (H4)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ornare phasellus phasellus scelerisque sollicitudin bibendum blandit interdum facilisis. Tempor sagittis, cursus cursus sollicitudin duis vitae etiam cras.

Title 2 (H4)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ornare phasellus phasellus scelerisque sollicitudin bibendum blandit interdum facilisis. Tempor sagittis, cursus cursus sollicitudin duis vitae etiam cras.


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:


Column 1 headColumn 2 head
Table dataTable data
Table dataTable data
Example of an accessible table


Column 1 headColumn 2 head
Table dataTable data
Table dataTable data
Table dataTable data
Example of “Stripes” table default


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

  • 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.

Screenshot of the Alternative Text field in WordPress

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.

Screenshot of the Image Settings Alt Text field in WordPress

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.

Screenshot of the WebAIM Color Contrast Checker

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.