Web Foundations

Foundations are the main elements used to build a website. The following foundations will help web developers build HHS sites quickly and provide consistency in the branding, user experience and visual design.

Content Management System

HHSC websites must be built using the latest, stable version of Drupal 9, on a LAMP stack. Drupal is an open source content management system that is extremely scalable, flexible, secure and reliable. It is currently used on millions of websites and applications. Drupal is also strongly recommended for other non-HHSC websites.

Theme

Using the United States Web Design System Base Drupal theme is highly recommended. USWDS makes it easier to build accessible and mobile-first websites. The theme is built using a mobile-first flexbox grid based on a 12-column system. Refer to the USWDS website for more information.

Header

The header provides a persistent area for site branding and navigation. It should include a brand bar (the bar running across the top of the website containing the HHS logo in the top left). Your site name should appear in text left-aligned underneath the brand bar and link back to your site’s homepage. Use the following technical specifications for the brand bar:

  • Height: 60px
  • Width: 100% wide across browser window
  • Background color: Light Gray (#eaeaea) or White (#ffffff)
  • Color or monochromatic version of formal web logo
    • File format: SVG or PNG
    • Display size: 184x50px
    • Top margin size: 5px between top edge of the shield and top of the page
    • Bottom margin size: 5px between bottom edge of shield and bottom of the wordmark bar
    • Left margin size: 5px between left edge of shield and left side of wordmark bar
    • Alignment: left edge of wordmark bar
    • Alt text: Texas Health and Human Services
    • Link: https://www.hhs.texas.gov

Below are examples of how the brand bar and site name should be displayed. Logo lockups are not allowed.

Texas Vendor Drug: https://www.txvendordrug.com/
Texas Targeted Opioid Response: https://txopioidresponse.org/

Logo Usage

Vendors and outside groups may only use the HHS logo on materials and websites reviewed by HHSC staff and approved by the HHSC Office of Communications. Vendors and outside groups may only use the DSHS version of the logo on materials and websites reviewed by DSHS staff and approved by the DSHS Office of Communications or the HHSC Office of Communications. Learn more about logo usage for other materials in the logo section.

Do

  • Display the HHS logo prominently on the website.
  • Have adequate free space around the logo.

Don't

  • Do not crowd the logo or put it in a tight box.
  • Do not add a glow, drop shadow or reflection.
  • Do not use the logo as a watermark.
  • Do not put the logo on a low-contrast or background that makes it hard to see.
Approved Web Version of the HHS Logo - Color
Approved Web Version of the HHS Logo - Black and White

Logo Variations

Mobile versions of the site may use just the agency name in place of the logo.
The shield by itself may be used as a favicon for the website. This is the only instance where the shield can be used apart from the logo.

The footer provides persistent navigation, site utilities, legal and privacy protection information. All Texas state agency websites are required to include the links below in their footer:

Websites are also required to include a copyright statement, e.g., © Copyright [year], Texas Health and Human Services Commission. All rights reserved.

Accessibility

HHS is legally required to ensure that all electronic and information resources they create or purchase are accessible. Developers must test their websites to ensure that they are accessible following WCAG 2.0 AA guidelines. Visit the HHS Accessibility Center website for testing resources and tutorials. Developers can request a consultation and review by the HHS Accessibility Unit. Learn more about the requirements for other materials in the accessibility section.

Color System

The HHS color system for the web reflects the HHS brand and leverages browser compatibility and usability best practices — ensuring consistent presentation to our visitors across all platforms. Some of these are slightly modified from the Essential Color Palette to ensure they are web-safe. Developers are responsible for making sure all text + background color combinations meet WCAG 2.0 AA guidelines using a color contrast tool. Learn more about appropriate color usage for other materials in the color section.

Primary
Color RGB Hex
Web Primary Blue 1 0, 51, 153 003399
Web Primary Blue 2 0, 102, 204 0066cc
Secondary: Frequently used with the primary palette colors, but in lesser amounts.
Color RGB Hex
Secondary Blue 1 102, 153, 204 6699cc
Secondary Blue 2 51, 204, 255 33ccff
Secondary Yellow 255, 204, 0 ffcc00
Secondary Red 153, 0, 0 990000
Secondary Gray 1 204, 204, 204 cccccc
Secondary Gray 2 234, 234, 234 eaeaea
Tertiary: Sometimes used with the primary palette colors, but in lesser amounts.
Color RGB Hex
Tertiary Gold 204, 153, 0 cc9900
Tertiary Maroon 102, 0, 0 660000
Tertiary Gray 51, 51, 51 333333
Tertiary Teal 0, 153, 153 009999
Tertiary Green 102, 204, 51 66cc33