Visual style

A typography suite and color palette designed to meet the highest standards of usability and accessibility, while setting a consistent visual voice of credibility, warmth, and simplicity within USAJOBS.

Design Complete

Typography

USAJOBS uses the two open-source font families from the U.S. Web Design Standards: Source Sans Pro and Merriweather. We use only the regular and bold font weight files, relying on CSS to adjust the typesetting for italic.

Pairings + Styles

For the most part we stick to just using the Source Sans Pro family for headings and body. In a few select instances we've used Merriweather.

Typesetting

Section Header

USAJOBS introduces several section headers which separate and describe blocks of content.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. End of previous section content.

Your Documents

Start of the next section.

Resumes (4/5) Help

Usability

  • The section header separates blocks of content and associates the header with the content that follows.
  • If there is help for the entire section then a link can be used in the section header.

Implementation

  • The U.S. Web Design Standards already underline links within a paragraph element.
  • Do not add text-decoration to any anchor element. Instead, add text-decoration to any anchor element within our main-content area and then defeat that rule for specific elements (buttons, etc).

Usability

  • For mobile usage we've decided to always underline links in main content areas and not only rely on color for link affordance. In areas where a link is also a title we've opted to not underline those links.

Colors

USAJOBS extends the U.S. Web Design Standards color palette with one additional secondary shade of green.

Palette

Tertiary colors

These colors are used primarily for content-specific needs, such as alerts and illustrations. They should never overpower the primary colors.

#2d8700

green-dark

Text Accessibility

WCAG (Web Content Accessibility Guidelines) ensure that content is accessible by everyone, regardless of disability or user device. To meet these standards, text and interactive elements should have a color contrast ratio of at least 4.5:1. This ensures that viewers who cannot see the full color spectrum are able to read the text.

The options below offer color palette combinations that fall within the range of Section 508 compliant foreground/background color contrast ratios. To ensure that text remains accessible, use only these permitted color combinations.

If you choose to customize beyond this palette, this color contrast tool is a useful resource for testing the compliance of any color combination.

Fully accessible combinations

Neutrals on a colored background
white on green

Design Complete

USAJOBS Logo - PNG

Red
Black
White

USAJOBS Logo - SVG

Red
Black
White

Accessibility

  • WCAG (Web Content Accessibility Guidelines) ensure that content is accessible by everyone, regardless of disability or user device. To meet these standards, text and interactive elements should have a color contrast ratio of at least 4.5:1. This ensures that viewers who cannot see the full color spectrum are able to read the text.

Usability

When to use
  • The red version of the logo should be used as the default. The white version should be used on dark backgrounds when the red version would not pass the aforementioned contrast guidelines.
  • In addition to the issues of contrast or color blindness, placing areas of brightly colored hues together can be hard for users with color vision to read. Bright colors cause an afterimage effect which when two colors are together can cause them to interfere with one another causing "visual vibration". While the red version of the logo is dark it is still unadvisable to place it on a bright background. Our recommendation is to use the white version of the logo on any colored background.

Implementation

  • The SVG version of the logo should be used for the USAJOBS site and whenever it will appear online. SVG has reasonable browser support and the PNG versions can act as a backup.
  • The logo should be responsive and scale down as necessary. The PNG versions should NEVER be scaled beyond the dimensions of the original image (376px wide by 90px tall). The SVG image can scale in this manner if necessary but, the original apsect ratio should be respected. When the logo appears in navigation it has specific size requirements.
  • The PNG versions of the image have already been optimized using image compression best practices.

Open Opportunities Logo - PNG

Open Opportunities Logo - SVG