Web Design Requirements

Following these design requirements will help web developers build HHS sites quickly and provide consistency in the branding, user experience and visual design. Refer to the HHS Storybook for a complete guide on available components and how to use them.

Theme

Using the Gesso USWDS Drupal theme is highly recommended. Gesso USWDS combines the United States Web Design System's starting code with components from the Gesso starting theme, making it easier to build accessible and mobile-first responsive websites. The theme is Sass-based and Webpack-based, with Storybook integration built-in. Refer to the HHS Storybook documentation for an example homepage, landing page, basic site page and article.

Header

The header provides a persistent area for site branding and navigation. It should include a banner or wordmark bar (the bar running across the top of the website). Your site name should appear in text left-aligned underneath the banner or wordmark and link back to your site’s homepage. Refer to the HHS Storybook documentation for guidelines on when to use the banner vs. the wordmark bar.

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/
Good Food, Good Move: https://goodfoodgoodmove.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. Refer to the HHS Storybook footer documentation for footer color options and more information.

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. Refer to the HHS Storybook color palette documentation to learn how to customize color tokens for the Gesso USWDS Drupal theme.

Colors that aren’t part of the brand palette must be approved by the HHSC Office of Communications or the DSHS Office of Communications.

Base
ColorRGBHex* USWDS Color TokenApplication
Base Darkest27, 27, 271b1b1bbase-darkesttext (alerts, body, buttons, input placeholder)
Base Darker61, 69, 813d4551base-darkerfacet terms, tags
Base Dark86, 92, 101565c65base-darkbackgrounds
Base113, 118, 12271767abasebackgrounds
Base Light169, 174, 177a9aeb1base-lightborders, box-shadows
Base Lighter223, 225, 226dfe1e2base-lighterbackgrounds, thead
Base Lightest240, 240, 240f0f0f0base-lightestbackgrounds, borders

Refer to the USWDS documentation to learn more about how to use color tokens.

Primary
ColorRGBHex* USWDS Color TokenApplication
Primary Darker22, 46, 81162e51primary-darkerheader, footer, primary navigation
Primary Dark26, 68, 1281a4480primary-darkbackgrounds, borders
Primary Vivid0, 80, 2160050d8primary-vividbutton hover/focus states, links
Primary0, 94, 162005ea2primarybackgrounds, borders, buttons, link hover/focus states
Primary Light115, 179, 23173b3e7primary-lightborders
Primary Lighter217, 232, 246d9e8f6primary-lighterlow-level alerts

Refer to the USWDS documentation to learn more about how to use color tokens.

Secondary: Frequently used with the primary palette colors, but in lesser amounts.
ColorRGBHex* USWDS Color TokenApplication
Secondary Darker Red169, 174, 177a9aeb1secondary-darkerbackgrounds, borders
Secondary Dark Red181, 9, 9b50909secondary-darkborders
Secondary Vivid Red228, 29, 61e41d3dsecondary-vividbackgrounds
Secondary Light Red242, 147, 140f2938csecondary-lighthigh-level alerts
Secondary Dark Gold229, 160, 0e5a000gold-30vborders
Secondary Gold255, 190, 46ffbe2egold-20vbackgrounds, borders
Secondary Yellow250, 206, 0face00yellow-20vbuttons
Secondary Light Yellow254, 230, 133fee685yellow-20vmedium-level alerts

Refer to the USWDS documentation to learn more about how to use color tokens.

Tertiary: Sometimes used with the primary palette colors, but in lesser amounts.
ColorRGBHex* USWDS Color TokenApplication
Tertiary Gold221, 170, 1ddaa01yellow-30vbackgrounds, borders
Tertiary Maroon92, 17, 175c1111magenta-70vbackgrounds, borders
Tertiary Gray61, 69, 813d4551base-darkerbackgrounds, borders
Tertiary Teal0, 163, 15200a398mint-cool-40vbackgrounds, borders
Tertiary Green59, 0, 90, 06cc24agreen-cool-40vbackgrounds, borders

Refer to the USWDS documentation to learn more about how to use color tokens.