Brand settings inheritance

Last updated:

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.

Brand settings variables

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.

Colors

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]}}
      brand-colors-primary
  • Secondary: {{brand_settings.secondaryColor}}
    brand-colors-secondary
  • Accent colors:
    • {{brand_settings.accentColor1}}
    • {{brand_settings.accentColor2}}
    • {{brand_settings.accentColor3}}
      brand-colors-accent
  • Additional colors:
    • {{brand_settings.colors[1]}}
    • {{brand_settings.colors[2]}}
    • {{brand_settings.colors[3]}}
      brand-colors-additional

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: 

//Example of using the primary color in within a theme's // field.json file { "name": "branding_color", "label": "branding_color", "type": "color", "default": { "color": "#26ff55", "opacity": 60 }, "inherited_value": { "property_value_paths": { "color": "brand_settings.primaryColor" } } }

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 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]}}
brand-settings-logo0

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}}

Favicons

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]}}

brand-settings-favicon0

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}}.

Was this article helpful?
This form is used for documentation feedback only. Learn how to get help with HubSpot.