Web Foundations

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.

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.

Logo Variations

Footer

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:

• Compact with Texans
• File Viewing information
• Homeland Security
• Notice of Privacy Practices
• Report Fraud, Waste or Abuse
• Statewide search
• Texas.gov
• Texas Veteran’s Portal
• Website Policy

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.