> ## Documentation Index
> Fetch the complete documentation index at: https://learn.catalogbuilderapp.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Theme Variables (Colors & Fonts)

> Master global styling in CatalogBuilderApp: create, edit, and delete custom colors and typography variables that automatically cascade across every template element.

**Theme Variables** are the foundation of CatalogBuilderApp's design system. Instead of manually applying colors and fonts to individual shapes, text layers, and product cards, Theme Variables establish a centralized, single-source-of-truth style guide for your entire catalog.

<Frame caption="Theme Colors & Theme Fonts Panels in the Template Builder — Light & Dark Modes">
  <img className="block dark:hidden rounded-lg max-w-sm mx-auto shadow-md" src="https://mintcdn.com/catalog-builder-app/UQegYxYgA66MpEc3/images/template-builder/theme-variables-light.png?fit=max&auto=format&n=UQegYxYgA66MpEc3&q=85&s=a4e6b90f9d1106ef4d3c26ea47b0c607" alt="Theme Variables Light Mode" width="608" height="696" data-path="images/template-builder/theme-variables-light.png" />

  <img className="hidden dark:block rounded-lg max-w-sm mx-auto shadow-md" src="https://mintcdn.com/catalog-builder-app/UQegYxYgA66MpEc3/images/template-builder/theme-variables-dark.png?fit=max&auto=format&n=UQegYxYgA66MpEc3&q=85&s=c8c35a523bfee7cfc4d83e766c0f0513" alt="Theme Variables Dark Mode" width="598" height="694" data-path="images/template-builder/theme-variables-dark.png" />
</Frame>

***

## Why Use Theme Variables?

When designing multi-page catalogs with hundreds of products, updating a color or changing a brand typeface across every individual element is time-consuming and error-prone.

With Theme Variables:

* **Instant Cascading Updates**: Change a color swatch or font pairing once, and every bound element across your catalog updates in real time.
* **Brand Consistency**: Ensure every product card, price badge, header, and divider line adheres strictly to your brand guidelines.
* **Unlimited Flexibility**: Create, rename, edit, or delete as many custom colors and typography roles as your publication requires.

***

## Theme Colors

The **Theme Colors** accordion in the left sidebar manages all global color swatches.

### 1. Default System Colors

Every template initializes with core tokens:

* **Primary**: The main brand accent color, typically applied to headlines, prominent callouts, and key interaction buttons.
* **Secondary**: A complementary accent tone used for secondary badges, price highlights, and borders.
* **Background**: The base canvas tone for pages and containers (e.g., clean white, slate, or warm cream).
* **Subtle Text**: A muted tone for SKU numbers, dimension labels, specifications, and fine print.

### 2. Creating Custom Colors

You can create an unlimited number of custom color tokens:

1. Click the orange **`+`** button in the **THEME COLORS** header.
2. A new custom color token is generated automatically.
3. Click the color swatch box to open the color picker.
4. Select your desired shade or enter an exact 6-character HEX code (e.g., `#192C4D`).

### 3. Editing and Renaming Colors

* **Change Swatch**: Click the square color preview anytime to update the hex value.
* **Rename Variable**: Double-click the label or click the pencil icon (`✎`) that appears on hover. Enter a descriptive title (such as *Gold Accent*, *Sale Badge*, or *Border Gray*). Spaces are automatically converted to clean system tokens.
* **Live HEX Inspector**: Hover over any color row to reveal its exact hex code on the right side.

### 4. Deleting Custom Colors

* Hover over any custom color row to reveal the red trash can icon (`🗑️`).
* Click the icon to permanently delete the custom variable.
* *(Note: Core tokens like `Primary`, `Secondary`, and `Background` are protected from deletion to safeguard template layout integrity).*

***

## Theme Fonts

The **Theme Fonts** section governs the typographic hierarchy across your template.

### 1. Default Typography Roles

* **Display Font**: An expressive, high-impact font family curated for catalog titles, cover headlines, and hero product names (e.g., *Playfair Display*, *Cinzel*, *Montserrat*).
* **Body Font**: A clean, highly legible typeface engineered for descriptions, specifications, pricing, and table of contents entries (e.g., *Inter*, *Roboto*, *Outfit*).

### 2. Creating Custom Font Roles

Need dedicated typography for special elements? You can create as many custom font roles as you need:

1. Click the orange **`+`** button in the **THEME FONTS** header.
2. A new custom font variable is created.
3. Select the font family from the searchable dropdown list.
4. Double-click the name or click the pencil icon (`✎`) to give it a role name (such as *Price Tag Font*, *Disclaimer Font*, or *Badge Font*).

### 3. Editing & Deleting Fonts

* **Change Family**: Use the font picker dropdown to browse professional Google Fonts and web-safe typography.
* **Change Weight**: Select variant weights (Regular, Medium, Bold, Extra Bold) where supported by the typeface.
* **Delete Font**: Click the trash can icon (`🗑️`) on hover to remove any custom font role.

***

## How to Bind Variables to Canvas Elements

Once your theme variables are defined, binding them to canvas elements is simple:

<Steps>
  <Step title="Select an Element">
    Click any text layer, vector shape, rectangle, or product card on the central canvas.
  </Step>

  <Step title="Open the Inspector Panel">
    Navigate to the right-hand **Inspector Panel** to view the element's style settings.
  </Step>

  <Step title="Bind to a Theme Variable">
    In the **Fill Color**, **Stroke Color**, or **Font Family** properties, choose your Theme Variable from the dropdown menu instead of typing a static value.
  </Step>

  <Step title="Enjoy Automated Cascading">
    Whenever you tweak the color or font in the left panel, the element updates automatically!
  </Step>
</Steps>

***

## Best Practices

<CardGroup cols={2}>
  <Card title="Dark & Light Mode Harmony" icon="circle-half-stroke">
    Verify that your `Background` and `Subtle Text` colors maintain strong WCAG contrast ratios in both Dark and Light reader viewing modes.
  </Card>

  <Card title="Consistent Product Cards" icon="clone">
    Bind product card component presets to theme variables so every product in your catalog shares identical fonts and price styling.
  </Card>
</CardGroup>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.