> ## Documentation Index
> Fetch the complete documentation index at: https://br.developers.hubspot.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Herança de configurações de marca

> Saiba como usar as configurações de marca, como logotipos e cores de marca, em um tema ou em arquivos HubL/HTML e CSS. 

Com as [configurações de marca](https://knowledge.hubspot.com/settings/customize-branding-for-your-hubspot-content#customize-your-company-logo-and-colors), os usuários podem definir as cores da marca da empresa, logotipos e favicons para serem usados no conteúdo do HubSpot. Isso permite que você acesse as configurações da marca com tokens no arquivo `fields.json` de um tema e dentro de arquivos HTML/HubL e CSS. Você também pode acessar as cores da marca no arquivo `fields.json` de um módulo.

Depois de adicionar esses tokens em um arquivo `fields.json`, os criadores de conteúdo podem editar seus valores no editor de configurações de tema. Ao adicionar esses tokens em um HTML, HubL ou CSS, os valores serão codificados e não poderão ser modificados no editor de páginas pelos criadores de conteúdo.

Abaixo, saiba mais sobre as variáveis de configuração de marca disponíveis, juntamente com exemplos de implementação.

## Variáveis das configurações de marca

A seguir está uma lista de opções que podem ser acessadas da área de configurações da marca dentro do valor do objeto `property_value_paths` ou em arquivos HTML/HubL e CSS.

### Cores

As cores da marca podem ser acessadas no [arquivo fields.json](#fields-json-color) de um tema ou módulo e nos arquivos HTML/HubL e CSS usando os seguintes tokens do HubL:

* **Principal:**

  * `{{brand_settings.primaryColor}}`
  * `{{brand_settings.colors[0]}}`

<Frame>
  <img src="https://knowledge.hubspot.com/hubfs/Knowledge_Base_2023_2024/brand-colors-primary.png" alt="brand-colors-primary" />
</Frame>

* **Secundário:** `{{brand_settings.secondaryColor}}`

<Frame>
  <img src="https://knowledge.hubspot.com/hubfs/Knowledge_Base_2023_2024/brand-colors-secondary.png" alt="brand-colors-secondary" />
</Frame>

* **Cores de destaque:**

  * `{{brand_settings.accentColor1}}`
  * `{{brand_settings.accentColor2}}`
  * `{{brand_settings.accentColor3}}`

<Frame>
  <img src="https://knowledge.hubspot.com/hubfs/Knowledge_Base_2023_2024/brand-colors-accent.png" alt="brand-colors-accent" />
</Frame>

* **Cores adicionais:**

  * `{{brand_settings.colors[1]}}`
  * `{{brand_settings.colors[2]}}`
  * `{{brand_settings.colors[3]}}`

<Frame>
  <img src="https://knowledge.hubspot.com/hubfs/Knowledge_Base_2023_2024/brand-colors-additional.png" alt="brand-colors-additional" />
</Frame>

Para acessar diretamente o código hexadecimal de uma cor, inclua um filtro `hex` no token. Por exemplo, `{{brand_settings.primaryColor.hex}}`.

Para incluir as cores das configurações da marca em um arquivo `fields.json` de tema ou módulo, use o seguinte formato:

```json theme={null}
//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"
    }
  }
}
```

<Warning>
  Pode ser que as contas não tenham cores adicionais definidas nas configurações da marca. Se o seu código fizer referência a uma cor herdada que não existe nas configurações da marca, a seguinte lógica de fallback será usada:

  * `secondaryColor` assumirá a primeira cor adicional (`colors[1]`).
  * `accentColor1` assumirá a primeira cor adicional (`colors[2]`).
  * `accentColor2` assumirá a primeira cor adicional (`colors[3]`).
  * `accentColor3` assumirá a primeira cor adicional (`colors[4]`).
  * Cores adicionais (por exemplo, `colors[3]`) voltará para o valor `default`. Se não houver um conjunto de cores de propriedade padrão, `primaryColor` será usado.
</Warning>

### Logotipos

Os logotipos da marca podem ser acessados nos arquivos `fields.json` e HTML/HubL e CSS.

Você pode usar os seguintes tokens para acessar o conjunto de logotipos principais nas configurações da marca:

* `{{brand_settings.primaryLogo}}`
* `{{brand_settings.logos[0]}}`

<Frame>
  <img src="https://www.hubspot.com/hubfs/Knowledge_Base_2021/Developer/brand-settings-logo0.png" alt="brand-settings-logo0" />
</Frame>

Todos os logotipos adicionais podem ser acessados usando `{{brand_settings.logos[1-19]}}`.

Além disso, você pode acessar os seguintes atributos de logotipo:

* **URL do logotipo:** `{{brand_settings.primaryLogo.link}}`
* **Texto alternativo do logotipo:** `{{brand_settings.primaryLogo.alt}}`
* **Altura do logotipo:** `{{brand_settings.primaryLogo.height}}`
* **Largura do logotipo:** `{{brand_settings.primaryLogo.width}}`
* **Link para a imagem do logotipo:** `{{brand_settings.primaryLogo.src}}`

### Favicons

Os favicons de marcas podem ser acessados somente nos arquivos HTML/HubL e CSS.

Você pode usar os seguintes tokens para acessar o conjunto de logotipos principais nas configurações da marca:

* `{{brand_settings.primaryFavicon}}`
* `{{brand_settings.favicons[0]}}`

<Frame>
  <img src="https://www.hubspot.com/hubfs/Knowledge_Base_2021/Developer/brand-settings-favicon0.png" alt="brand-settings-favicon0" />
</Frame>

Todos os favicons adicionais podem ser acessados usando `{{brand_settings.favicons[1-19]}}`.

Você pode acessar o URL do logotipo diretamente incluindo um filtro `src`. Por exemplo, `{{brand_settings.primaryFavicon.src}}`.