Skip to main content
Texas Design System

Design Tokens

Design tokens are the shared visual values used by every component. Use this page as your map, then go to a specific category page for details.

Token categories Design assets Override guidance White-labeling steps

Token Categories

Colors

Primary, secondary, status, gray, and accent palettes.

Typography

Font families, sizes, weights, and line-heights.

Link Patterns

Guidance for inline links, states, and document links.

Spacing

8px spacing scale for margins, padding, and gaps.

Elevation

Shadow tokens that define depth and layering.

Borders

Radius, border width, and border color values.

Grids

Desktop and mobile column grid specifications.

Design Assets

Icons

Lucide interface icons and social media brand icons.

Imagery

Photo library and background pattern references.

Agency Theming: What to Override

Use these groups to decide which token changes are safe for agency branding.

Safe to override (branding)
TokenDefaultPurpose
--txds-color-primary-50#486687Primary action color for buttons, links, highlights.
--txds-color-primary-60#2a3d4eDark primary for search hero and header.
--txds-color-secondary-50#ebb445Accent and call to action (CTA) color.
--txds-color-secondary-60#b07f1cAccent hover state.
--txds-font-family'Geologica', sans-serifBody font family.
--txds-font-family-header'Geologica', sans-serifHeader font family.
--txds-border-radius4pxBase corner radius.
--txds-border-radius-lg8pxLarger corner radius for cards and panels.
Override with caution
TokenRisk
--txds-color-gray-*Used for text, borders, and backgrounds. Changes can break contrast.
--txds-font-size-*Type scale updates affect every component layout.
--txds-font-weight-*Weight changes can alter Geologica variable font rendering.
Do not override
TokenReason
--txds-color-tx-blueTexas official site banner color.
--txds-color-tx-redTexas official site banner color.
--txds-color-destructive-*Critical error-state color behavior.

White-labeling Guide

  1. Create a new override file (example: agency-brand.css).
  2. Define only your brand token overrides in :root.
  3. Load that file after design-system.css.

Example override file:

/* agency-brand.css */
:root {
  /* 1. Replace primary color with your agency's brand color */
  --txds-color-primary-50: #8b0000;   /* agency red */
  --txds-color-primary-60: #5c0000;   /* agency dark red */

  /* 2. Replace accent/CTA color */
  --txds-color-secondary-50: #f0a500; /* agency gold */
  --txds-color-secondary-60: #c07e00;

  /* 3. Replace typeface (if licensed) */
  --txds-font-family: 'Source Sans Pro', sans-serif;
  --txds-font-family-header: 'Source Serif Pro', serif;

  /* 4. Adjust border radius if your brand uses sharper/rounder corners */
  --txds-border-radius: 0;
  --txds-border-radius-lg: 4px;
}

All components automatically reflect these overrides. For full implementation details, see Customization Guide.