Skip to main content

Design and Brand Plays


facebook icon   twitter icon   print icon

The U.S. Web Design System (USWDS) provides design guidelines and code to help you quickly create trustworthy, accessible, and consistent digital government services. Whether you’re creating simple wireframes or detailed visual design comps, the U.S. Web Design System has the design resources you need to get started. The USWDS encourages modular, iterative, user-centered design. It is meant to help you develop consistent design with a foundation for growth. In other words, by using the USWDS, what you design today, can be leveraged across the USDA and your agency in the future.

The U.S. Web Design System is an invaluable resource for updating your site. It includes:

  • UI Components

  • Page Templates

  • Documentation

  • and more!

The 21st Century Integrated Digital Experience Act states that any website of an executive agency that is made available to the public needs to be in compliance with the website standards of the General Services Administration (GSA). Section 3; E.


You should use USWDS elements (particularly UI components) as much as possible instead of creating custom elements. The USWDS Design Principles guide USDA’s digital look-and-feel, and we encourage design and development teams to review these before you propose or start work. You should always keep the focus of your web design on reusing elements across USDA’s digital assets. Be sure to also follow the USWDS guidelines for responsive design.

documentation screenshot
U.S. Web Design System offers a lot of resources for developing government websites
search screenshot
Designer resources include Sketch design files, fonts, and colors

 

U.S. Web Design System 2.0

USWDS is an ever-evolving product with rolling releases that include bug fixes, new features, and other updates. USWDS 2.0 was released in 2019 and is a new foundation for the future of the design system. This new version was designed to make it easier for any project to integrate USWDS and use it to support both your mission and the needs of your audience.

If you are currently redesigning your website, be sure to use USWDS 2.0.

If you are already using USWDS 1.0, you have time to migrate to the newest version; this change can be placed in your backlog and prioritized as needed against other product improvements.
 

Becoming Part of the Community

USWDS is an active open source community of government engineers, content specialists, and designers. There are several ways to provide feedback or engage with the team. You can reach out via USWDS’s Github, Slack and email.
 

Tools (Downloadable Templates and Resources)

Additional Resources

USDA.gov uses the Source Sans Pro font family. As detailed in the U.S. Web Design System (USWDS), this font was selected for its approachability and legibility. Text should be treated with the same simple, clean approach used in the overall design of the site. Hyperlinks, bolded text, popovers, and other text modifications should be used only when absolutely necessary.

Things to know:

  • Your agency can use its discretion when selecting fonts. Please make sure your typeface is easily readable and conforms to all Section 508 requirements.

  • The fonts suggested by the U.S. Web Design System are Source Sans Pro, Merriweather, Public Sans, and Roboto Mono. Public Sans is new with the version 2.0 release of the USWDS.

  • Be sure to use best practices for your layout by carefully considering font size, text alignment, line length, and line height.

  • Ensure a contrast ratio of at least 4.5:1 exists between all text (and images of text) and background behind the text to meet Section 508 requirements (WCAG 2.0)

USWDS fonts
Use U.S. Web Design System recommended fonts

 

Additional Resources

In an effort to standardize the masthead across all official USDA websites, all USDA websites must adhere to the new masthead requirements as stated in the OneUSDA Strategy. Some links in the header/footer are required, while some are specific to the website. The Office of Communications can help you assess your site’s specific headers and footers.

Masthead

The USDA.gov masthead contains the USDA symbol and signature lockup for the Department title, background image/color, navigation tabs, links, and the USDA Search tool.
 

All USDA website mastheads must:

  A checkmark iconUse the Official United States Government callout

  A checkmark iconUse the correct USDA symbol and location

  A checkmark iconNot use Agency symbols

  A checkmark iconUse the signature subidentity lockup for the Department and Agency titles

  A checkmark iconUse the USDA standard navigation tab placement

  A checkmark iconHave the USDA search
 

USDA website mastheads can also include a user login (For example the “Sign Up | Sign In” element on Farmers.gov).

design current usda masthead sample
Use of current USDA masthead requirements
design current usda old sample.
Out-of-date masthead

Signature Lockup

The new signature subidentity lockup requires that the Department title be below the Agency title, and directly to the right of the USDA symbol. The USDA symbol and signature lockup should be at the top left corner of your website. The USDA symbol should link back to the homepage of your website.

design usda logo signature lockup image.
Approved lock-up
This variation has been granted an exception for use on websites only. All other variations, including print, must conform with the USDA Visual Standards Guide.


Background Colors

The background of the masthead directly behind the USDA symbol and signature lockup must be a solid color. 
 

Notes:

  • If the USDA symbol is color and the signature lockup is black, the background color should be white or a light shade with enough contrast from the symbol and text.

  • If the symbol and text is white, the background should be a dark solid color.

  • You may not use a background image or photo directly behind the USDA symbol and signature lockup, however, you may use a background photo or other design behind other areas of the masthead to the right of the symbol and lockup.

design usda logo background colors
Sample of lock-ups on background colors

 

Tools (Downloadable Templates and Resources)

Be sure to follow USDA footer guidelines. If your Agency does not have specific statements and policies, please use the Department links on USDA.gov.

At a minimum, your website footer should contain the following links:

  A checkmark iconPrivacy Policy

  A checkmark iconUSDA.gov

  A checkmark iconUSA.gov

  A checkmark iconWhiteHouse.gov

  A checkmark iconFOIA

  A checkmark iconAccessibility Statement

  A checkmark iconNon-­Discrimination Statement

  A checkmark iconInformation Quality

  A checkmark iconPlain Writing

design usda footer sample.
USDA Footer


Tools (Downloadable Templates and Resources)

Official USDA symbol colors are listed here.

Green color symbol
 

Dark Green

PMS: 343
CMYK: 100, 0, 69, 60
#005440
RGB: 0, 84, 64

Blue color symbol
 

Dark Blue

PMS: 288
CMYK: 100, 65, 0, 30
#002D72
RGB: 0, 45, 114

 

 

U.S. Web Design System Colors

Beyond the use of USDA colors, use USWDS color tokens and avoid custom colors whenever possible. In the long run, it’s a better user experience across government when there’s coherence across sites and services. While your mission, project needs, and user needs always come first, using USWDS colors and system allows the system to learn, adapt, and improve over time.

USWDS  standard color wheel
USWDS standard system color wheel
design uswds color vivid.
USWDS vivid system color tokens wheel

 

Using the USWDS color system helps ensure accessible color pairings by taking into account contrast and readability. As color impacts a users understanding, impressions, and often conveys emotion, use the USWDS Color Guidance when solidifying your site’s color palette and use the following guidelines:

  • Start in black and white

  • Put the practical before the emotional

  • Use mood boards for guidance

  • Ask visual designers

  • Don’t use color exclusively to convey meaning
     

Tools (Downloadable Templates and Resources)

Additional Resources

Social Media Icons

USDA uses a series of Social Media Icons in the footer, which you should use to provide consistency across all USDA sites. To provide a functional experience for older browsers, use SVG Fallbacks.

design usda social media icons


Icons

Icons communicate meaning in a graphical user interface. USWDS uses a subset of Font Awesome icons, and we recommend USDA sites use them as well.

When using icons, be sure to follow the usage guidance from USDWS.

Font Awesome Free fonts are free and open source. These icons are licensed under the Creative Commons Attribution 4.0 International license. 
 

Tools (Downloadable Templates and Resources)

Additional Resources

USDA.gov uses photos throughout the site, but especially on the home and main landing pages of the site. Use photos to support the message on your page, engage the consumer with identifiable images, and build trust.
 

Photo Sources

USDA’s Flickr presence is the official photostream of the U.S. Department of Agriculture and is a great resource for photos you can use on your site. You can use these photos with attribution, though you’re not permitted to edit them. These photos depict the work and activities of the Department of Agriculture and its agencies.

design usda flickr.
USDA Flickr is the official photostream of the U.S. Department of Agriculture.

If you use commercial photos, be sure that you have the appropriate rights and license to use the photography and/or visual material on your website.
 

Optimizing Images for Web

If your image sizes are too large, your page will load more slowly, which can hurt your Search Engine Optimization (SEO) ranking, particularly if your page isn’t optimized for mobile. If your page loads too slowly, your customer’s experience will also be hurt. Be sure to optimize your site’s images: they should be the smallest possible file size that maintains high quality (e.g. without pixelation or compression artifacts). 
 

Optimization Checklist

Do

  • Remove any unneeded images
  • Include keyword optimized alternative (Alt) text. Be sure your description is meaningful and clear
  • Ensure appropriate color contrast particularly for charts or graphs
  • Use SVGs for vector images to reduce file size and avoid pixelation, especially for logos and icons
  • Use PNGs and JPEGs for rasterized images (e.g., photographs)
  • Use two different versions of the same image for mobile and desktop; a smaller image for mobile, and a larger image for desktop (this will allow mobile pages to load more quickly)
  • Compress images to the smallest possible file size while maintaining image quality

Don't

  • Don’t use low resolution and blurry images
  • Don’t use oversized images
  • Don’t allow images to be “squished” horizontally or vertically. Maintain the image’s proportions
  • Don’t use color alone to convey meaning, particularly for charts or graphs
  • Don’t use fast flickering or flashing images
  •  

Man riding horse
High resolution and clear photo
 

 

Man riding horse
Low resolution and blurry photo

Hero Images

The hero module is the main messaging area for the first-tier landing page templates. The main hero space has a minimum width of 2000px, and should react to the user's browser. The image within the hero container should always scale up or down depending on the browser size, mobile, or tablet views.
 

Photo Style

The hero image on the USDA homepage incorporates a soft, out-of-focus background with a sharp foreground image that focuses on the face or subject-in-action. This styling connects the site visitor with the person photographed on a more personal level. The photograph should convey confidence and ease, promoting a sense of comfort and trust. This is precisely how we want USDA.gov visitors to feel.
 

Additional Resources

 

 

Previous: Design and Brand  Next: Development

This page was last updated July 31, 2019.