# Brand Styleguide

Themes automatically receive a `brand` object at the root of their settings. This object contains site-wide branding settings controlled through the Kajabi admin at `https://app.kajabi.com/admin/sites/<SITE_ID>/brand_styleguide`.

Kajabi's default themes use these site-wide brand settings as fallbacks. When a theme's branding value is blank (an empty string `""`), the theme automatically inherits the brand settings from your Kajabi admin. This keeps your visual branding consistent across all themes unless you override a specific value in an individual theme.

<figure><img src="/files/o8zQDUJ2GuWCsqnQARz4" alt=""><figcaption></figcaption></figure>

***

### The brand object

The `brand` object gets injected into the root of each page when it renders.

```json
{
  "brand": {
    "primary_color": "#0072EF",
    "accent_color": "#10B981",
    "logo": "<path to Kajabi hosted logo image>",
    "favicon": "<path to Kajabi hosted favicon image>",
    "font_family_heading": "Fira Sans",
    "font_family_body": "Open Sans",
    "social": {
      "facebook": "https://facebook.com/example",
      "instagram": "https://instagram.com/example",
      "x": "https://x.com/example",
      "youtube": "https://youtube.com/example",
      "linkedin": "https://linkedin.com/company/example",
      "tiktok": "https://tiktok.com/@example"
    }
  }
}
```

***

### How to implement brand fallbacks

Kajabi's default themes allow you to override brand settings while still providing fallback values. This requires configuration in both your schema and Liquid markup.

#### Schema setup

Configure your schema definition with these requirements:

* Add a `default_global_settings_attribute` that points to a value in the `brand` object
* Set the `default` value to blank (`""`) so the brand value applies on initial install

This configuration tells the theme editor WYSIWYG that a fallback exists and provides UI controls to reset to the brand default.

**Example schema:**

```json
{
  "type": "color",
  "id": "btn_background_color",
  "label": "Button",
  "default": "",
  "allow_blank": true,
  "default_global_settings_attribute": "brand.accent_color"
}
```

#### Liquid markup

Use the [Liquid default filter](https://shopify.github.io/liquid/filters/default/) to handle the fallback display.

**Example markup:**

```liquid
{% assign btn_color = section.settings.btn_background_color | default: settings.brand.accent_color %}

<style>
  #my-btn {
    background-color: {{ btn_color }};
  }
</style>

<button id="my-btn">Call To Action</button>
```

This code displays the brand accent color when the override color is blank.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://themes.kajabi.com/liquid/core-concepts/brand-styleguide.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.