Web Molecules

Molecules are a collection of atoms. For example, a search form is a molecule consisting of text boxes and buttons (atoms). Read this article on atomic design methodology for more information.

Call-to-action example to sign up for email updates.

Sign Up


This option is for text, links, simple graphics and buttons only. Yellow should be reserved for the buttons only. Red should be reserved for high priority messages only.

Search Forms

Having a well-designed search form(s) on your site allows users to interact with your content and find what they are looking for, creating a positive user experience.

  • Search forms should be used to allow users to search for specific keywords and even filter by different types of content.
  • Form fields should be clearly labeled and display help text if necessary.
  • Make sure your help text is clear and easy to read.
  • The form button should be easy to identify on the page as this is an important call-to-action.


All website design elements and photographs should follow the HHS brand guidelines. Learn more about these requirements in the imagery section.

Image Specifications

All graphics should be saved for the web as:

  • File formats: .jpg, .png
  • Quality: 80%
  • Resolution: 72 dpi

Alignment: Options for aligning images are left, center, and right.

Alt Text is essential for both accessibility standards and Search Engine Optimization. When using images, ensure alt text is entered for images that convey meaning or data. Decorative images may leave alt text blank, but the attribute should still be present. Example: alt=””

File Naming Conventions

These guidelines for naming files (images or documents) will help you maintain your asset library and improve SEO.

    • Never use spaces within the filename. Instead use "-" (dash) to separate words.
    • Never use special characters - i.e. @#$%^&+().
    • Use lowercase letters only.
    • Examples:
      • woman-caring-for-child.jpg
      • legislative-report-behavioral-health-mar-2021.pdf