Brand settings inheritance
With brand settings, users can set up the company's brand colors, logos, and favicons to be used across HubSpot content. This enables you to access those brand settings with tokens in a theme's fields.json
file and within HTML/HubL and CSS files. You can also access brand colors within a module's fields.json
file.
After adding these tokens within a fields.json
file, content creators can edit their values within the theme settings editor. When adding these tokens in a HTML, HubL, or CSS, the values will be hardcoded and cannot be modified in the page editor by content creators.
Below, learn about the available brand setting variables along with examples of implementation.
The following is a list of options that can be accessed from the brand settings area within the value of the property_value_paths
object or within HTML/HubL and CSS files.
Brand colors can be accessed both within a theme or module's fields.json file, and within HTML/HubL and CSS files by using the following HubL tokens:
- Primary:
{{brand_settings.primaryColor}}
{{brand_settings.colors[0]}}
- Secondary:
{{brand_settings.secondaryColor}}
- Accent colors:
{{brand_settings.accentColor1}}
{{brand_settings.accentColor2}}
{{brand_settings.accentColor3}}
- Additional colors:
{{brand_settings.colors[1]}}
{{brand_settings.colors[2]}}
{{brand_settings.colors[3]}}
To access a color's hex code directly, include a hex
filter in the token. For example: {{brand_settings.primaryColor.hex}}
To include brand settings colors in a theme or module's fields.json
file, use the following format:
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 thedefault
value. If there is no default property color set,primaryColor
will be used.
Brand logos can be accessed within a module's fields.json
file, and within HTML/HubL and CSS files.
You can use the following tokens to access the primary logo set within brand settings:
{{brand_settings.primaryLogo}}
{{brand_settings.logos[0]}}
All additional logos can be accessed by using {{brand_settings.logos[1-19]}}
.
In addition, you can access the following logo 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}}
- Link to the logo's image:
{{brand_settings.primaryLogo.src}}
Brand favicons can be accessed only within HTML/HubL and CSS files.
You can use the following tokens to access the primary logo set within brand settings:
{{brand_settings.primaryFavicon}}
{{brand_settings.favicons[0]}}
All additional favicons can be accessed by using {{brand_settings.favicons[1-19]}}
.
You can access the URL of the logo directly by including an src
filter. For example: {{brand_settings.primaryFavicon.src}}
.
Thank you for your feedback, it means a lot to us.