Skip to main content
Texas Design System

Getting Started

The Texas Design System is a library of Hypertext Markup Language (HTML) components and Cascading Style Sheets (CSS) design tokens for Texas state agency websites. Drop in the stylesheet and start using components — no JavaScript framework or build step needed.

This deliverable is intentionally lightweight: component examples plus best-practice guidance.

Version
Version 1.0.0
Delivered May 2026
Status Complete — reference delivery

Installation

Option 1 — Hosted CSS (recommended)

Copy the design system stylesheet into your project and link to it in your HTML <head>:

Use this option only if you are loading Geologica from Google Fonts.

Preconnect lines are recommended for performance. You can remove them for a minimal setup, and fonts will still load.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Agency Site</title>

  <!-- Google Fonts (Geologica) -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Geologica:wght@400;500;600;700;800&display=swap" rel="stylesheet">

  <!-- Bootstrap Icons -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">

  <!-- Texas Design System -->
  <link rel="stylesheet" href="design-system.css">
</head>
<body>

  <!-- Your content here -->

  <!-- Texas Design System interactions (accordion, modal, mega menu) -->
  <script src="design-system.js" defer></script>

</body>
</html>

Option 2 — Self-hosted fonts (offline / intranet)

If your agency cannot access Google Fonts (e.g. air-gapped networks), download the Geologica font files and host them locally:

Use this option instead of Google Fonts (do not load both).

/* fonts.css — load before design-system.css */
@font-face {
  font-family: 'Geologica';
  src: url('fonts/Geologica-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Geologica';
  src: url('fonts/Geologica-Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}
/* Add additional weights as needed (500, 600, 800) */

Basic HTML Template

Use this template as a starting point for any page that uses the design system:

Choose one font-loading method:

  • Hosted fonts: keep the Google Fonts lines below.
  • Self-hosted fonts: remove the Google Fonts lines and include your local fonts.css before design-system.css.
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Page Title — Agency Name</title>
  <!-- Font option A: Hosted Google Fonts (remove these 3 lines if self-hosting fonts) -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Geologica:wght@400;500;600;700;800&display=swap" rel="stylesheet">
  <!-- Font option B: Self-hosted fonts (uncomment if self-hosting) -->
  <!-- <link rel="stylesheet" href="fonts.css"> -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
  <link rel="stylesheet" href="design-system.css">
  <!-- Optional: your agency brand overrides -->
  <link rel="stylesheet" href="my-agency.css">
</head>
<body>

  <!-- Skip navigation (required for accessibility) -->
  <a class="txds-skipnav" href="#main-content">Skip to main content</a>

  <!-- Header -->
  <header class="txds-header">
    <!-- See Header Bar component for full markup -->
  </header>

  <!-- Main content -->
  <main id="main-content">
    <!-- Your page content here -->
  </main>

  <!-- Footer -->
  <footer class="txds-footer">
    <!-- See Footer component for full markup -->
  </footer>

  <!-- Optional: only required for interactive components -->
  <script src="design-system.js" defer></script>

</body>
</html>

Icons

This design system uses Bootstrap Icons through CSS classes.

Example:

<span class="txds-alert-banner__icon" aria-hidden="true">
  <i class="bi bi-exclamation-triangle" aria-hidden="true"></i>
</span>

Use aria-hidden="true" on decorative icons and rely on adjacent text for meaning.

Naming Convention

All classes use the Block Element Modifier (BEM) pattern with a txds- namespace:

txds-[component]__[element]--[modifier]

Examples:

  • txds-button — base button
  • txds-button--primary — primary modifier
  • txds-alert__heading — heading element inside alert
  • txds-card--featured — featured modifier on card

Changelog

v1.0.0 — May 2026

  • Initial release
  • 37 components: Header, Footer, Hero, Search, Cards, Buttons, Alerts, Forms, and more
  • Design token system (--txds-* CSS custom properties)
  • WCAG 2.2 AA targeted
  • Mobile-responsive
  • Aligned to Figma source

CMS Integration

The Texas Design System delivers plain HTML and CSS — it works with any CMS or framework. CMS-specific integration guides are available:

CMS Guide
Static HTML Static HTML integration
Drupal Drupal integration

For all CMSes, the approach is the same: include design-system.css in your theme, include design-system.js for interactive components, then copy the component HTML markup into your templates, blocks, or shortcodes.

Next Steps