Customization Guide

Every visual property in this system — colors, fonts, spacing, borders — is a CSS custom property (design token). You can rebrand without touching the source files.

Need layout utilities for page composition? See Layout Grid Utility.

Quick start

1. Include the design system CSS (and JS for interactive components)

Add the design system stylesheet to your site's <head>:

<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">

Bootstrap Icons provides the icon glyphs used by components via classes like bi bi-bell.

If your page uses interactive components (for example accordion, modal, or mega menu), include the design system JavaScript before </body>:

<script src="design-system.js" defer></script>

2. Add your brand overrides

Create your own CSS file that overrides the tokens, and load it after the design system 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">
<link rel="stylesheet" href="my-agency.css">

3. Override the tokens

In your agency file, redefine the tokens you want to change:

/* my-agency.css */
:root {
  /* Primary brand color (used on buttons, links, header background) */
  --txds-color-primary-50: #8b0000;   /* your brand color */
  --txds-color-primary-60: #5c0000;   /* darker shade for hover/backgrounds */

  /* Accent / CTA color (search button, highlights) */
  --txds-color-secondary-50: #f0a500;
  --txds-color-secondary-60: #c07e00;

  /* Typography — swap to your licensed font */
  --txds-font-family: 'Source Sans Pro', sans-serif;
  --txds-font-family-header: 'Source Serif Pro', serif;

  /* Corner radius — set to 0 for a sharper/official look */
  --txds-border-radius: 0;
  --txds-border-radius-lg: 4px;
}

That's it — all 37 components will update automatically.

See also: The Design Tokens page documents which tokens are safe to override, which require caution, and which must not be changed.

What you can customize

Category	Tokens	Notes
Primary brand color	`--txds-color-primary-50`, `--txds-color-primary-60`	Used on buttons, links, nav header background
Accent / CTA color	`--txds-color-secondary-50`, `--txds-color-secondary-60`	Search button, highlighted actions
Typography	`--txds-font-family`, `--txds-font-family-header`	Body and header font families
Font sizes	`--txds-font-size-h1` through `--txds-font-size-body-sm`	Full type scale — change carefully
Corner radius	`--txds-border-radius`, `--txds-border-radius-lg`, `--txds-border-radius-xxl`	Controls rounding across cards, inputs, search bar
Grays	`--txds-color-gray-*`	Used for text, borders, backgrounds — test contrast after changing
Focus indicator	`--txds-focus-color`, `--txds-focus-width`	Keyboard focus ring color and width

Advanced: per-component overrides

You can scope overrides to a specific component without affecting others:

/* Make only buttons have pill-shaped corners */
.txds-button {
  --txds-border-radius: 50px;
}

/* Give your header a different background */
.txds-header {
  --txds-color-primary-60: #1a0a2e;
}

Naming convention

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

Block: txds-button, txds-card, txds-alert-banner
Element: txds-card__title, txds-card__body
Modifier: txds-button--primary, txds-alert-banner--danger

This means:

Classes are human-readable and self-documenting
No collisions with your existing CSS — the txds- prefix isolates the design system
Easy to search in templates and stylesheets

File structure for your project

your-site/
├── css/
│   ├── design-system.css   ← copy from dist/ folder
│   └── my-agency.css       ← your brand overrides (load after)
├── js/
│   └── design-system.js    ← required for interactive components
├── fonts/                  ← optional: self-hosted fonts for offline use
│   └── Geologica-*.woff2
└── index.html