Backgrounds and surfaces
Skip to main content
Careers Contact us

Backgrounds and surfaces

Foundation library

Color swatches displaying all background and surface options from the TxDOT Design System color palette.

In the Foundation Library, backgrounds and surfaces are distinguished by purpose and user interaction.
A surface is an interactive element, such as a button, card, or form field. A background is a non-interactive area that provides structure, groups related content, or visually separates sections.

Backgrounds

Backgrounds are non-interactive areas, typically behind content, used to establish structure, hierarchy, and visual separation. Common uses include page backgrounds, section containers, content grouping, and section dividers.

Page

HEX: #ffffff (Gray 0)
RGB: 255 / 255 / 255

Accent

HEX: #f8f8f8 (Gray 5)
RGB: 248 / 248 / 248

Emphasis

HEX: #0056a9 (Blue 50)
RGB: 0 / 86 / 169

Gradient

HEX: #0056a9 (Blue 50),
           #002262 (Blue 80)
RGB: 0 / 86 / 169,
           0 / 34 /98

For detailed color tokens, palettes, and usage guidance, see the Color page.

Background types

  • Page: Used as the primary page background for standard content areas.
  • Accent: Used to group related content or create visual separation from surrounding content.
  • Emphasis: Used to highlight important content or interface areas.
  • Gradient: Used to draw attention to featured or promotional content.

Guidance

  • Use backgrounds to separate sections or group related content.
  • Background colors should remain consistent and should not have interactive states.

Surfaces

Surfaces are interactive or functional areas where users engage with content or interface elements. Common uses include buttons, cards, menus, accordions, input fields, dialogs, and modals.

Surfaces solid

Brand

HEX: #0056a9 (Blue 50)
RGB: 0 / 86 / 169

Invert

HEX: #ffffff (Gray 0)
RGB: 255 / 255 / 255

Neutral Light

HEX: #f8f8f8 (Gray 5)
RGB: 248 / 248 / 248

Disabled

HEX: #cecece (Gray 20)
RGB: 206 / 206 / 206

Surfaces with outline

Info

Surface fill
HEX: #e5f8ff (Blue 5)
RGB: 229 / 248 / 255

Surface border
Border: #3288cb (Blue 40)
RGB: 50 / 136 / 203

Success

Surface fill
HEX: #e8ffd9 (Green 5)
RGB: 232 / 255 / 217

Surface border
HEX: #2c6d0d (Green 60)
RGB: 44 / 109 / 13

Warning

Surface fill
HEX: #fefadd (Yellow 5)
RGB: 254 / 250 / 221

Surface border
HEX: #8c6f08 (Yellow 80)
RGB: 140 / 111 / 8

Error

Surface fill
HEX: #ffe5e5 (Red 5)
RGB: 255 / 229 / 229

Surface border
HEX: #b60909 (Red 60)
RGB: 182 / 9 / 9

Neutral

Surface fill
HEX: #f8f8f8 (Gray 5)
RGB: 248 / 248 / 248

Surface border
HEX: #949494 (Gray 40)
RGB: 148 / 148 / 148

Guidance

  • Surface colors should communicate interactivity and affordance.
  • Interactive surfaces may have hover, focus, active, and disabled states.
  • Use sufficient contrast between surfaces and surrounding backgrounds.

Accessibility

Background and surface colors must support readability, usability, and relevant requirements for all users.

Text and meaningful images must meet the following minimum contrast requirements:

  • 4.5:1 for standard text (15-18px or 14px bold)
  • 3:1 for large text (18px and larger)

Example: Text displayed on buttons, cards, banners, colored backgrounds, or other surfaces should have sufficient contrast to remain easy to read. This includes button labels, headings, body content, links, and other text that communicates information.

Interactive elements and graphical objects must have a color contrast ratio of at least 3:1 against the surrounding background or surface.

Example: Icons, buttons, form fields, and other interactive elements should be easy to distinguish from the background behind them. For example, an icon displayed on a colored background should have enough contrast to remain clearly visible and recognizable.

Contrast requirements apply to content that users need to read, understand, or interact with, including:

  • Body copy
  • Button labels
  • Link text
  • Placeholder text
  • Any text that conveys meaning

Contrast requirements generally do not apply to:

  • Logos
  • Decorative or purely stylistic text
  • Hidden, inactive, or disabled text