> ## Documentation Index
> Fetch the complete documentation index at: https://developers.hubspot.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.
---
id: 1e9f62fd-4dd0-44e7-a466-daf650121e02
---
# Brand settings inheritance
> Learn how to use brand settings, such as logos and brand colors, within a theme or across HubL/HTML and CSS files.
In HubSpot, users can configure [brand settings](https://knowledge.hubspot.com/branding/edit-your-logo-favicon-and-brand-colors) to set up the company's brand colors, logos, and favicons to be used across HubSpot content. With brand settings configured, you can access these settings via `{{brand_settings.*}}` HubL variables in HTML/HubL and CSS files, as well as theme and module field configuration files (`fields.json`).
Below, learn about the available brand setting variables along with examples of implementation.
## Quick reference
The following table lists all available brand settings HubL variables, with links to relevant sections below for more information.
| Setting | Variables |
| ---------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------- |
| [Primary color](#colors) | `{{brand_settings.primaryColor}}` `{{brand_settings.colors[0]}}` |
| [Secondary color](#colors) | `{{brand_settings.secondaryColor}}` |
| [Accent colors](#colors) | `{{brand_settings.accentColor1}}` `{{brand_settings.accentColor2}}` `{{brand_settings.accentColor3}}` |
| [Additional colors](#colors) | `{{brand_settings.colors[1-19]}}` |
| [Primary logo](#logos) | `{{brand_settings.primaryLogo}}` `{{brand_settings.logos[0]}}` |
| [Domain logo](#logos) (with [fallback](#logo-fallback-logic)) | `{{brand_settings.logo}}` |
| [Secondary logo](#logos) | `{{brand_settings.logos[1]}}` `{{brand_settings.logos[0]}}` |
| [Additional logos](#logos) | `{{brand_settings.logos[1-19]}}` |
| [Primary favicon](#favicons) | `{{brand_settings.primaryFavicon}}` `{{brand_settings.favicons[0]}}` |
| [Additional favicons](#favicons) | `{{brand_settings.favicons[1-19]}}` |
| [Domain favicon](#favicons) (with [fallback](#favicon-fallback-logic)) | `{{brand_settings.favicon}}` |
Filters are available for retrieving specific values, depending on the variable:
* **Color variables:** use the [`hex` filter](#color-filter) to access the color's hex value.
* **Logo variables:** use the [set of logo filters](#logo-filters) to access image attributes such as `src` and `width`.
* **Favicon variables:** use the [`src` filter](#favicon-filter) to access the favicon image source URL.
Implementation and usage will differ slightly between `fields.json` and HTML/HubL/CSS files:
* **Module and theme fields:** in the `fields.json` file, include `brand_settings.*` values within the `inherited_value` and `property_value_paths` fields. This configures the module or theme to use the brand kit settings by default. Users will be able to edit these values as needed in the theme settings editor. When no settings are found, HubSpot will fall back to the `default` field values.
**Please note:**
Favicon variables cannot be used in module or theme `fields.json` files.
* **HTML/HubL/CSS files:** in a HTML/HubL or CSS file, include `brand_settings.*` values within HubL tokens (e.g., `{{brand_settings.primaryColor}}`). Values will be hardcoded and cannot be modified by users in HubSpot.
See sections below for usage examples.
## Colors
Brand color variables can be used in module and theme `fields.json` files and in HTML/HubL and CSS files.
| Setting | Tokens |
| ----------------- | ----------------------------------------------------------------------------------------------------- |
| Primary color | `{{brand_settings.primaryColor}}` `{{brand_settings.colors[0]}}` |
| Secondary color | `{{brand_settings.secondaryColor}}` |
| Accent colors | `{{brand_settings.accentColor1}}` `{{brand_settings.accentColor2}}` `{{brand_settings.accentColor3}}` |
| Additional colors | `{{brand_settings.colors[1-19]}}` |
The `hex` filter is available if you need to directly access the color's hex code (see CSS example below).
```json example.json theme={null}
{
"name": "branding_color",
"label": "branding_color",
"type": "color",
"default": {
"color": "#26ff55",
"opacity": 60
},
"inherited_value": {
"property_value_paths": {
"color": "brand_settings.primaryColor"
}
}
}
```
```css example.css theme={null}
:root {
--primary-color: {{brand_settings.primaryColor.hex}};
--secondary-color: {{brand_settings.secondaryColor.hex}};
}
.header {
background-color: var(--primary-color);
color: {{brand_settings.secondaryColor.hex}};
}
```
### Color fallback logic
There are times when accounts may not have any additional colors configured in its brand settings. If your code is referencing an inherited color that does not exist in brand settings, the following fallback logic is used:
* `secondaryColor` falls back to the first additional color (`colors[1]`).
* `accentColor1` falls back to the second additional color (`colors[2]`).
* `accentColor2` falls back to the third additional color (`colors[3]`).
* `accentColor3` falls back to the fourth additional color (`colors[4]`).
* Additional colors (e.g., `colors[3]`) will fall back to the `default` value. If there is no default property color set, `primaryColor` will be used.
## Logos
Brand logo variables can be used in module and theme `fields.json` files, as well as within HTML/HubL and CSS files.
| Setting | Tokens |
| --------------------------------------------------- | -------------------------------------------------------------- |
| Primary logo | `{{brand_settings.primaryLogo}}` `{{brand_settings.logos[0]}}` |
| Secondary logo | `{{brand_settings.logos[1]}}` `{{brand_settings.logos[0]}}` |
| Additional logos | `{{brand_settings.logos[1-19]}}` |
| Domain logo (with [fallback](#logo-fallback-logic)) | `{{brand_settings.logo}}` |
The following filters are available if you need to directly access logo image attributes:
* **Logo URL:** `{{brand_settings.primaryLogo.link}}`
* **Logo alt text:** `{{brand_settings.primaryLogo.alt}}`
* **Logo height:** `{{brand_settings.primaryLogo.height}}`
* **Logo width:** `{{brand_settings.primaryLogo.width}}`
* **Logo image URL:** `{{brand_settings.primaryLogo.src}}`
```json example.json theme={null}
{
"name": "site_logo",
"label": "Site Logo",
"type": "image",
"default": {
"src": "https://example.com/default-logo.png",
"alt": "Default Logo",
"width": 128,
"height": 128
},
"inherited_value": {
"property_value_paths": {
"src": "brand_settings.primaryLogo.src",
"alt": "brand_settings.primaryLogo.alt",
"width": "brand_settings.primaryLogo.width",
"height": "brand_settings.primaryLogo.height"
}
}
}
```
```html example.html theme={null}
```
### Logo fallback logic
The `{{brand_settings.logo}}` variable will render the logo set for the domain. If no logo is set for the domain, it will render the primary logo instead.
## Favicons
Brand favicon variables can only be used in HTML/HubL and CSS files.
| Setting | Tokens |
| --------------------------------------------------------- | -------------------------------------------------------------------- |
| Primary favicon | `{{brand_settings.primaryFavicon}}` `{{brand_settings.favicons[0]}}` |
| Additional favicons | `{{brand_settings.favicons[1-19]}}` |
| Domain favicon (with [fallback](#favicon-fallback-logic)) | `{{brand_settings.favicon}}` |
The `src` filter is available if you need to access the favicon image's source URL. For example: `{{brand_settings.favicon.src}}`.
```html theme={null}
{{content.html_title}}
```
### Favicon fallback logic
The `{{brand_settings.favicon}}` variable will render the favicon set for the domain. If no favicon is set for the domain, it will render the primary favicon instead.