# 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="https://2985641664-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LqEz7V8_Y2qCncaUWaD%2Fuploads%2FlV4uvPS9tLlhdvULNF8t%2FAndrew-McIntee_2025-12-16_12-59PM.gif?alt=media&#x26;token=78234801-7915-463c-98c2-ff8e541566d1" 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.