# Hosted Widget Branding and Customization

Este artigo refere-se ao widget multi-região
O conteúdo deste artigo refere-se ao widget multi-região (aplicável para Empregos e Fiscal no México, bem como Empregos no Brasil). Se você deseja operar no Brasil, por favor veja nosso Hosted Widget para OFDA Regulamentado.

Com o Hosted Widget da Belvo, você pode personalizar e marcar o widget de duas maneiras: através do seu pedido de token de acesso e através da ferramenta de painel Custom Widget.

## Configurar via solicitação de token de acesso

As configurações abaixo são enviadas como JSON na mesma chamada de backend que sua solicitação para gerar um `access_token`.

### Adicionar um ícone da empresa

Você pode adicionar o ícone da sua empresa ao widget para que ele fique mais alinhado com a sua marca.
Quando você adiciona o ícone da sua empresa, ele aparece nas seguintes telas:

- início inicial do widget


Certifique-se de que seu ícone tenha dimensões quadradas, esteja no formato SVG, tenha um fundo transparente e não contenha espaços em branco ao redor. Se o seu ícone não seguir essas especificações, o widget da Belvo exibirá o seguinte ícone:

**Instruções**
Para adicionar um ícone personalizado da empresa, basta adicionar a URL para sua imagem SVG na chave `company_icon`.

```json Exemplo de Ícone da Empresa
{
  "widget": {
    "branding": {
      "company_icon": "https://mysite.com/icon.svg",
        }
     }
}
```

### Adicionar o logotipo da empresa

Você pode adicionar o logotipo da sua empresa ao widget para que ele fique mais alinhado com a sua marca. Quando você adiciona o logotipo da sua empresa, ele aparece nas seguintes telas:

- enquanto a conta está sendo vinculada
- uma vez que uma conta é vinculada com sucesso
- quando um usuário opta por cancelar o processo de vinculação


Certifique-se de que seu logotipo esteja no formato SVG, tenha um fundo transparente e não contenha espaços em branco ao redor. Para melhor visibilidade e escalonamento, sugerimos que você use um logotipo horizontal (veja o exemplo no canto superior esquerdo da imagem abaixo).

**Instruções**
Para adicionar um logotipo personalizado da empresa, basta adicionar a URL da sua imagem SVG à chave `company_logo`.

```json Exemplo de Logotipo da Empresa
{
  "widget": {
    "branding": {
      "company_logo": "https://mysite.com/logo.svg",
        }
     }
}
```

### Adicione o nome da sua empresa

Você pode adicionar o nome da sua empresa para ser exibido quando o widget iniciar pela primeira vez. Por padrão, será exibido apenas "Conecte sua conta". Quando você adiciona o nome da sua empresa, a mensagem seguirá o formato "[company_name] usa Belvo para conectar sua conta".

Por favor, note que apenas o nome da empresa é personalizável na frase introdutória

**Instruções**

Para adicionar o nome da sua empresa, basta adicioná-lo à chave `company_name`.

```json Company Name
{
  "widget": {
    "branding": {
      "company_name": "ACME",
        }
     }
}
```

### Adicione um link para sua política de privacidade

Você pode adicionar um link para sua política de privacidade (ou termos e condições) na tela inicial do widget que, ao ser clicado, redirecionará seus usuários para a página web vinculada. Isso ajuda seus usuários a entenderem melhor qual é o seu caso de uso em relação aos dados que você está solicitando. Por padrão, o widget incluirá a URL para a política de privacidade da Belvo (`<https://belvo.com/terms-service/`>).

**Instruções**
Para adicionar um link para sua política de privacidade na tela inicial de conexão, basta adicionar a URL da sua política à chave `company_terms_url`.

```json Show Belvo Middle Logo
{
  "widget": {
    "branding": {
      "company_terms_url": "https://belvo.com/terms-service/",
        }
     }
}
```

### Acompanhe a versão dos seus termos e condições

Ao usar uma URL personalizada para termos e condições (via `company_terms_url`), você pode acompanhar qual versão dos seus T&C o usuário aceitou durante o fluxo do widget. Isso é útil para fins de conformidade e auditoria, especialmente quando seus termos são atualizados ao longo do tempo.

**Instruções**
Para acompanhar a versão dos T&C, adicione o identificador de versão à chave `company_terms_version`. Este parâmetro é obrigatório quando você fornece um `company_terms_url` personalizado (não usando o padrão da Belvo).

Formato recomendado
Recomendamos usar um formato de data (por exemplo, `2024-03-15` ou `20240315`) para indicar claramente quando seus termos foram atualizados pela última vez. Isso facilita o acompanhamento das mudanças ao longo do tempo em comparação com números de versão.

```json Company Terms and Conditions
{
  "widget": {
    "branding": {
      "company_terms_url": "https://yourcompany.com/terms",
      "company_terms_version": "2024-03-15",
        }
     }
}
```

### Adicionar texto à tela de conexão

Você pode adicionar uma mensagem personalizada na tela inicial do widget para fornecer informações adicionais aos seus usuários sobre por que eles precisam conectar suas contas usando o Belvo. Isso ajuda a aumentar a conversão e a confiança do usuário final para vincular sua conta.

**Instruções**
Para adicionar texto personalizado na tela inicial de conexão:

1. Adicione o título da caixa expansível à chave `company_benefit_header`.
📝 O comprimento máximo (incluindo espaços) para o título é de 30 caracteres.
2. Adicione o conteúdo para a caixa expansível à chave `company_benefit_content`.
📝 O comprimento máximo (incluindo espaços) para o conteúdo é de 140 caracteres.


Você deve fornecer conteúdo para ambas as chaves `company_benefit_header` e `company_benefit_content`. Se você não fornecer conteúdo para ambas, nada aparecerá.

```json Benefits
{
  "widget": {
    "branding": {
      "company_benefit_header": "Aprovações mais rápidas",
      "company_benefit_content": "Usar o Belvo reduz o tempo de aprovação do seu empréstimo em até 15 dias.",
        }
     }
}
```

### Adicionar uma mensagem de saída

Você pode adicionar uma mensagem personalizada para ser exibida quando um usuário final optar por cancelar a conexão de sua conta. A mensagem aparece abaixo de um prompt padrão "Tem certeza de que deseja cancelar?". Você pode destacar os benefícios de continuar a vincular a conta usando o widget em comparação com métodos tradicionais.

**Instruções**

Para adicionar uma mensagem de saída personalizada, adicione o conteúdo a ser exibido na chave `opportunity_loss`.

📝 Sua mensagem pode ter no máximo 120 caracteres, incluindo espaços.

```json Mensagem de Saída
{
  "widget": {
    "branding": {
      ...
      "opportunity_loss": "Pode levar até 20 dias para avaliar sua solicitação usando métodos tradicionais.",
      ...
        }
     }
}
```

### Ocultar mensagem na tela de conexão de conta

Você pode optar por ocultar a mensagem "*+1m usuários conectaram suas contas com segurança usando Belvo*" que aparece quando o usuário chega à tela de conexão de conta no widget. Por padrão, essa mensagem é visível no widget (`true`).

**Instruções**

Para ocultar a mensagem na tela de conexão de conta, basta definir o parâmetro `social_proof` como `false`.

```json Ocultar Mensagem Social
{
  "widget": {
    "branding": {
      "social_proof": false,
        }
     }
}
```

## Configurar via a ferramenta de dashboard do Custom Widget

As variáveis CSS são configuradas visualmente através da ferramenta **Custom Widget** no seu painel do Belvo.

**Instruções**

No seu painel do Belvo, vá para **Ferramentas de Desenvolvedor > Custom Widget**.

Se sua organização já tiver uma personalização salva, clique em **Carregar personalização atual** no canto superior direito da página para carregá-la diretamente no editor e na **Pré-visualização do Widget**, em vez de começar do zero. Se sua organização tiver mais de uma personalização salva, você será solicitado a escolher qual delas carregar.

Página Custom Widget com o botão Carregar personalização atual destacado no canto superior direito
Para configurar uma nova personalização, na seção **Configuração do Widget** defina:

1. **Localidade**: o idioma de exibição do widget: `en` (Inglês), `es` (Espanhol) ou `pt-BR` (Português).
2. **Tipo de Integração**: `Open Finance` para o widget do Open Finance Brasil (OFDA), ou `Credentials` para o widget multirregional.
3. **Esquema de Cores**: Claro ou Escuro. Variáveis CSS específicas para o modo escuro usam o sufixo `-dark`, por exemplo, `--color-primary-base-dark` define a cor primária especificamente para o modo escuro.
4. **Códigos de País**: quais países e instituições aparecem na pré-visualização do widget.
5. **Tipos de Instituição**: quais tipos de instituições aparecem na pré-visualização: `Fiscal` (conexões com autoridades fiscais), `Retail` (banco pessoal), `Business` (banco corporativo) ou `Employment` (sistemas de empregador/folha de pagamento).


Painel de Configuração do Widget com campos numerados: Localidade, Tipo de Integração, Esquema de Cores, Códigos de País, Tipos de Instituição e Carregar Widget
Depois de clicar em **Carregar Widget**, ou carregar uma personalização existente, você poderá acessar o painel de **Variáveis CSS**. Pesquise ou use os filtros de categoria (Fonte, Navbar, Botão, Banner, Texto de Entrada e mais) para encontrar uma variável, depois insira um valor. A **Pré-visualização do Widget** à direita é atualizada ao vivo enquanto você digita, para que você possa verificar cada alteração antes de finalizá-la.

Painel de Variáveis CSS com campos de variáveis editáveis ao lado de uma Pré-visualização do Widget ao vivo
Clique em **Exportar Configuração**. Isso cria automaticamente um ticket de suporte no Zendesk com seu JSON de personalização anexado, que a equipe do Belvo usa para aplicá-lo à sua conta. Use **Importar** para carregar uma configuração previamente exportada de volta na ferramenta se você quiser continuar editando-a.

Esta página lista os parâmetros `css_key` disponíveis, seus valores padrão e o que cada um controla. Para qualquer variável com um equivalente `-dark`, a chave `-dark` define a substituição especificamente para o modo escuro. Veja a seção acima para saber como aplicá-los.

### Cores Primárias

| Variável CSS | Padrão | Descrição |
|  --- | --- | --- |
| `--color-primary-base` | `#0663f9` | Define a cor primária para botões, caixas de seleção e a barra de progresso. |
| `--color-primary-base-dark` | `#0663f9` | Define a cor primária no modo escuro. |


### Tipografia

| Variável CSS | Padrão | Descrição |
|  --- | --- | --- |
| `--font-family-primary` | `Geist` | Define a família de fontes primária usada em todo o widget. Fonte de fallback quando nenhuma fonte personalizada é fornecida. |
| `--font-family-regular-file-name` | `—` | Arquivo de fonte a ser usado para texto de peso regular (400). Sem padrão — usado apenas se uma fonte personalizada for fornecida. |
| `--font-family-semibold-file-name` | `—` | Arquivo de fonte a ser usado para texto de peso semibold (600). Sem padrão — usado apenas se uma fonte personalizada for fornecida. |
| `--font-family-bold-file-name` | `—` | Arquivo de fonte a ser usado para texto de peso bold (700). Sem padrão — usado apenas se uma fonte personalizada for fornecida. |


### Links

| Variável CSS | Padrão | Descrição |
|  --- | --- | --- |
| `--link-font-color` | `#0663f9` | Define a cor da fonte para hiperlinks (por exemplo, o link da política de privacidade). |
| `--link-font-color-dark` | `#0663f9` | Define a cor da fonte para hiperlinks no modo escuro. |
| `--link-text-decoration` | `none` | Define a decoração do texto (por exemplo, sublinhado) para hiperlinks. |


### Texto em Nível de Página

| Variável CSS | Padrão | Descrição |
|  --- | --- | --- |
| `--text-title-color` | `#161a1d` | Define a cor dos títulos em nível de página. |
| `--text-title-color-dark` | `#eef3f8` | Define a cor dos títulos em nível de página no modo escuro. |
| `--text-title-font-size` | `1.125rem` | Define o tamanho da fonte dos títulos em nível de página. |
| `--text-title-line-height` | `1.75rem (26px)` | Define a altura da linha dos títulos em nível de página. |
| `--text-body-color` | `#414d58` | Define a cor do texto do corpo em nível de página. |
| `--text-body-color-dark` | `#c2cfd9` | Define a cor do texto do corpo em nível de página no modo escuro. |
| `--text-body-font-size` | `1rem` | Define o tamanho da fonte do texto do corpo em nível de página. |
| `--text-body-line-height` | `1.5rem (24px)` | Define a altura da linha do texto do corpo em nível de página. |


### Barra de Navegação

| Variável CSS | Padrão | Descrição |
|  --- | --- | --- |
| `--nav-bar-title-color` | `#161a1d` | Define a cor do título da barra de navegação. |
| `--nav-bar-title-color-dark` | `#eef3f8` | Define a cor do título da barra de navegação no modo escuro. |
| `--nav-bar-title-align` | `center` | Especifica o alinhamento do título da barra de navegação. As posições possíveis são `center`, `start` e `end`. |
| `--nav-bar-icon-color` | `#161a1d` | Define a cor dos ícones da barra de navegação. |
| `--nav-bar-icon-color-dark` | `#eef3f8` | Define a cor dos ícones da barra de navegação no modo escuro. |
| `--nav-bar-background-color` | `#ffffff` | Define a cor de fundo da barra de navegação. |
| `--nav-bar-background-color-dark` | `#011432` | Define a cor de fundo da barra de navegação no modo escuro. |
| `--nav-bar-left-icon` | `arrow_back` | Define um ícone personalizado para a ação à esquerda da barra de navegação (por exemplo, seta de voltar). |
| `--nav-bar-left-icon-dark` | `arrow_back` | Define um ícone personalizado para a ação à esquerda no modo escuro. |
| `--nav-bar-right-icon` | `—` | Define um ícone personalizado para a ação à direita da barra de navegação (por exemplo, ajuda). Sem padrão — definido via uma prop de componente, não pelo tema. |
| `--nav-bar-right-icon-dark` | `—` | Define um ícone personalizado para a ação à direita no modo escuro. Sem padrão — definido via uma prop de componente, não pelo tema. |
| `--nav-bar-icon-size` | `24px` | Define o tamanho dos ícones da barra de navegação. |


### Botões

| Variável CSS | Padrão | Descrição |
|  --- | --- | --- |
| `--text-button-font-color` | `—` | Define a cor da fonte para botões apenas com texto (não preenchidos). |
| `--text-button-font-color-dark` | `—` | Define a cor da fonte para botões apenas com texto (não preenchidos) no modo escuro. |
| `--button-font-color` | `#ffffff` | Define a cor da fonte para botões. |
| `--button-font-color-dark` | `—` | Define a cor da fonte para botões no modo escuro. |
| `--button-font-color-disabled` | `#ffffff` | Define a cor da fonte para botões desativados. |
| `--button-font-color-disabled-dark` | `—` | Define a cor da fonte para botões desativados no modo escuro. |
| `--button-border-radius` | `8px` | Especifica o raio da borda dos botões. |
| `--button-background-color-disabled` | `#009EE3` | Define a cor de fundo para botões desativados. |
| `--button-background-color-disabled-dark` | `—` | Define a cor de fundo para botões desativados no modo escuro. |
| `--button-opacity-disabled` | `0.2` | Especifica a opacidade para botões desativados. |


### Banners

| Variável CSS | Padrão | Descrição |
|  --- | --- | --- |
| `--banner-border-radius` | `8px` | Especifica o raio da borda dos banners. |
| `--banner-background-color` | `#ffffff` | Define a cor de fundo dos banners. |
| `--banner-background-color-dark` | `#011432` | Define a cor de fundo dos banners no modo escuro. |
| `--banner-background-color-error` | `#ffffff` | Define a cor de fundo para banners de erro. |
| `--banner-background-color-error-dark` | `#011432` | Define a cor de fundo para banners de erro no modo escuro. |
| `--banner-background-color-info` | `#ffffff` | Define a cor de fundo para banners de informação. *(não estava na lista original de 183 itens — adicionado desde que já foi lançado)* |
| `--banner-background-color-info-dark` | `#011432` | Define a cor de fundo para banners de informação no modo escuro. *(não estava na lista original de 183 itens — adicionado desde que já foi lançado)* |
| `--banner-background-color-success` | `#ffffff` | Define a cor de fundo para banners de sucesso. *(não estava na lista original de 183 itens — adicionado desde que já foi lançado)* |
| `--banner-background-color-success-dark` | `#011432` | Define a cor de fundo para banners de sucesso no modo escuro. *(não estava na lista original de 183 itens — adicionado desde que já foi lançado)* |
| `--banner-background-color-warning` | `#ffffff` | Define a cor de fundo para banners de aviso. *(não estava na lista original de 183 itens — adicionado desde que já foi lançado)* |
| `--banner-background-color-warning-dark` | `#011432` | Define a cor de fundo para banners de aviso no modo escuro. *(não estava na lista original de 183 itens — adicionado desde que já foi lançado)* |
| `--banner-border-color` | `#e2e6e9` | Especifica a cor da borda dos banners. |
| `--banner-border-color-dark` | `#2b3d54` | Especifica a cor da borda dos banners no modo escuro. |
| `--banner-border-color-left-error` | `#f90e06` | Cor da borda esquerda para banners de erro. |
| `--banner-border-color-left-error-dark` | `#e04a39` | Cor da borda esquerda para banners de erro no modo escuro. |
| `--banner-border-color-left-success` | `#59c837` | Cor da borda esquerda para banners de sucesso. |
| `--banner-border-color-left-success-dark` | `#59c837` | Cor da borda esquerda para banners de sucesso no modo escuro. |
| `--banner-border-color-left-info` | `#0663f9` | Cor da borda esquerda para banners de informação. |
| `--banner-border-color-left-info-dark` | `#0663f9` | Cor da borda esquerda para banners de informação no modo escuro. |
| `--banner-border-color-left-warning` | `#f9c806` | Cor da borda esquerda para banners de aviso. |
| `--banner-border-color-left-warning-dark` | `#f9c806` | Cor da borda esquerda para banners de aviso no modo escuro. |
| `--banner-border-left-width` | `0.25rem` | Controla a espessura da borda esquerda para variantes de banner. Defina como `0` para remover a borda esquerda e confiar apenas na cor de fundo. |
| `--banner-icon-color-error` | `#f90e06` | Cor do ícone para banners de erro. |
| `--banner-icon-color-error-dark` | `#e04a39` | Cor do ícone para banners de erro no modo escuro. |
| `--banner-icon-color-success` | `#59c837` | Cor do ícone para banners de sucesso. |
| `--banner-icon-color-success-dark` | `#59c837` | Cor do ícone para banners de sucesso no modo escuro. |
| `--banner-icon-color-info` | `#0663f9` | Cor do ícone para banners de informação. |
| `--banner-icon-color-info-dark` | `#0663f9` | Cor do ícone para banners de informação no modo escuro. |
| `--banner-icon-color-warning` | `#f9c806` | Cor do ícone para banners de aviso. |
| `--banner-icon-color-warning-dark` | `#f9c806` | Cor do ícone para banners de aviso no modo escuro. |
| `--banner-icon-size` | `24px` | Define o tamanho do ícone para ícones de banner. |
| `--banner-icon-name-error` | `—` | Define o ícone usado para banners de erro. Sem padrão — nenhum ícone mostrado a menos que fornecido. |
| `--banner-icon-name-success` | `—` | Define o ícone usado para banners de sucesso. Sem padrão — nenhum ícone mostrado a menos que fornecido. |
| `--banner-icon-name-info` | `—` | Define o ícone usado para banners de informação. Sem padrão — nenhum ícone mostrado a menos que fornecido. |
| `--banner-icon-name-warning` | `—` | Define o ícone usado para banners de aviso. Sem padrão — nenhum ícone mostrado a menos que fornecido. |
| `--banner-title-color` | `#161a1d` | Define a cor dos títulos dos banners. |
| `--banner-title-color-dark` | `#eef3f8` | Define a cor dos títulos dos banners no modo escuro. |
| `--banner-body-color` | `#576775` | Especifica a cor do texto do corpo dos banners. |
| `--banner-body-color-dark` | `#a6b4c3` | Especifica a cor do texto do corpo dos banners no modo escuro. |
| `--banner-title-font-weight` | `600` | Define o peso da fonte dos títulos dos banners. |
| `--banner-body-font-weight` | `600` | Especifica o peso da fonte do texto do corpo dos banners. |
| `--banner-box-shadow` | `0 2px 4px 0 rgb(0 0 0 / 5%)` | Adiciona um efeito de sombra aos banners. |


### Campos de Entrada

| Variável CSS | Padrão | Descrição |
|  --- | --- | --- |
| `--input-text-font-size` | `1rem` | Define o tamanho da fonte para o texto do campo de entrada. |
| `--input-text-font-color` | `#161a1d` | Define a cor da fonte para o texto do campo de entrada. |
| `--input-text-font-color-dark` | `#eef3f8` | Define a cor da fonte para o texto do campo de entrada no modo escuro. |
| `--input-text-border-radius` | `8px` | Define o raio da borda para os campos de entrada. |
| `--input-text-border-color` | `#161a1d` | Especifica a cor da borda para os campos de entrada. |
| `--input-text-border-color-dark` | `#2b3d54` | Especifica a cor da borda para os campos de entrada no modo escuro. |
| `--input-text-outline-border-color` | `#0663f980` | Define a cor da borda de contorno para os campos de entrada (como um efeito de hover). |
| `--input-text-outline-border-color-dark` | `#0663f980` | Define a cor da borda de contorno para os campos de entrada no modo escuro. |
| `--input-text-border-color-error` | `#f90e06` | Define a cor da borda para os campos de entrada em estado de erro. |
| `--input-text-border-color-error-dark` | `#e04a39` | Define a cor da borda para os campos de entrada em estado de erro, no modo escuro. |
| `--input-text-placeholder-color` | `#8a9aa8` | Define a cor para o texto do placeholder. |
| `--input-text-placeholder-color-dark` | `#2b3d54` | Define a cor para o texto do placeholder no modo escuro. |
| `--input-text-label-color` | `#414d58` | Define a cor do rótulo para os campos de entrada. |
| `--input-text-label-color-dark` | `#eef3f8` | Define a cor do rótulo para os campos de entrada no modo escuro. |
| `--input-text-label-color-error` | `#f90e06` | Especifica a cor do rótulo para os campos de entrada em estado de erro. |
| `--input-text-label-color-error-dark` | `#e04a39` | Especifica a cor do rótulo para os campos de entrada em estado de erro, no modo escuro. |
| `--input-text-label-variation` | `top` | Especifica a variação do rótulo. As opções possíveis são `top` (rótulo acima do campo) e `placeholder` (usa o rótulo como o placeholder do campo de entrada). |
| `--input-text-label-weight` | `600` | Define o peso da fonte para os rótulos dos campos de entrada. |
| `--input-text-label-font-size` | `0.75rem` | Define o tamanho da fonte para os rótulos dos campos de entrada. |
| `--input-text-assistive-color` | `#2b343b` | Define a cor para o texto assistivo (de ajuda) abaixo de um campo de entrada. |
| `--input-text-assistive-color-dark` | `#eef3f8` | Define a cor para o texto assistivo no modo escuro. |
| `--input-text-assistive-color-error` | `#f90e06` | Define a cor para o texto assistivo quando o campo de entrada está em estado de erro. |
| `--input-text-assistive-color-error-dark` | `#e04a39` | Define a cor para o texto assistivo em estado de erro, no modo escuro. |
| `--input-text-assistive-font-weight` | `400` | Define o peso da fonte para o texto assistivo. |
| `--input-text-icon-color` | `#8a9aa8` | Define a cor dos ícones de entrada. |
| `--input-text-icon-color-dark` | `#eef3f8` | Define a cor dos ícones de entrada no modo escuro. |
| `--input-text-icon-opacity` | `—` | Define a opacidade para os ícones do campo de entrada. Sem padrão — atualmente não consumido em CSS. |
| `--input-text-icon-size` | `40px` | Define o tamanho dos ícones do campo de entrada. |
| `--input-text-icon-order` | `1` | Define a ordem de exibição dos ícones dentro de um campo de entrada. |
| `--input-text-password-visible-icon` | `show` | Define o ícone mostrado quando o conteúdo de um campo de senha está visível. |
| `--input-text-password-non-visible-icon` | `hide` | Define o ícone mostrado quando o conteúdo de um campo de senha está oculto. |


### Checkbox

| Variável CSS | Padrão | Descrição |
|  --- | --- | --- |
| `--checkbox-border-color` | `#161a1d` | Define a cor da borda para checkboxes. |
| `--checkbox-border-color-dark` | `#2b3d54` | Define a cor da borda para checkboxes no modo escuro. |
| `--checkbox-border-radius` | `4px` | Define o raio da borda para checkboxes. |


### Diálogo

| Variável CSS | Padrão | Descrição |
|  --- | --- | --- |
| `--dialog-title-color` | `#161a1d` | Define a cor dos títulos do diálogo. |
| `--dialog-title-color-dark` | `#eef3f8` | Define a cor dos títulos do diálogo no modo escuro. |
| `--dialog-body-color` | `#8a9aa8` | Define a cor do texto do corpo do diálogo. |
| `--dialog-body-color-dark` | `#6a7e93` | Define a cor do texto do corpo do diálogo no modo escuro. |
| `--dialog-body-font-size` | `1rem` | Define o tamanho da fonte do texto do corpo do diálogo. |
| `--dialog-body-line-height` | `24px` | Define a altura da linha do texto do corpo do diálogo. |


### Abas

| Variável CSS | Padrão | Descrição |
|  --- | --- | --- |
| `--tab-text-color` | `#0663f9` | Define a cor do texto para as abas. |
| `--tab-text-color-dark` | `#0663f9` | Define a cor do texto para as abas no modo escuro. |
| `--tab-border-color` | `#0663f9` | Especifica a cor da borda na parte inferior das abas. |
| `--tab-border-color-dark` | `#0663f9` | Define a cor da borda na parte inferior das abas no modo escuro. |


### Dropdown

| Variável CSS | Padrão | Descrição |
|  --- | --- | --- |
| `--dropdown-border-radius` | `8px` | Define o raio da borda para os campos de dropdown. |
| `--dropdown-font-color` | `#161a1d` | Define a cor da fonte para os campos de dropdown. |
| `--dropdown-font-color-dark` | `#eef3f8` | Define a cor da fonte para os campos de dropdown no modo escuro. |
| `--dropdown-label-display` | `visible` | Controla como o rótulo do dropdown é exibido. |


### Lista de Itens

| Variável CSS | Padrão | Descrição |
|  --- | --- | --- |
| `--item-list-hover-color` | `#f0f2f4` | Define a cor de fundo de um item da lista ao passar o mouse. |
| `--item-list-hover-color-dark` | `#0b1c3c` | Define a cor de fundo de um item da lista ao passar o mouse, no modo escuro. |
| `--item-list-skeleton-color` | `#f0f2f4` | Define a cor do esqueleto de carregamento exibido enquanto uma lista está carregando. |
| `--item-list-skeleton-color-dark` | `#0b1c3c` | Define a cor do esqueleto de carregamento no modo escuro. |
| `--item-list-icon-color` | `#161a1d` | Define a cor dos ícones dentro de um item da lista. |
| `--item-list-icon-color-dark` | `#eef3f8` | Define a cor dos ícones dentro de um item da lista no modo escuro. |
| `--item-list-title-color` | `#161a1d` | Define a cor do título de um item da lista. |
| `--item-list-title-color-dark` | `#eef3f8` | Define a cor do título de um item da lista no modo escuro. |
| `--item-list-body-color` | `#6c8193` | Define a cor do corpo/texto secundário de um item da lista. |
| `--item-list-body-color-dark` | `#dee6ec` | Define a cor do corpo/texto secundário de um item da lista no modo escuro. |


### Accordion

| Variável CSS | Padrão | Descrição |
|  --- | --- | --- |
| `--accordion-icon-color` | `#161a1d` | Define a cor do ícone de expandir/recolher do accordion. |
| `--accordion-icon-color-dark` | `#eef3f8` | Define a cor do ícone de expandir/recolher do accordion no modo escuro. |
| `--accordion-title-color` | `#161a1d` | Define a cor do título do accordion. |
| `--accordion-title-color-dark` | `#eef3f8` | Define a cor do título do accordion no modo escuro. |


### Overlay, Surface, Divider, Image & Layout

Você pode adicionar uma cor de sobreposição personalizada para quando o widget carregar em sua aplicação desktop. Recomendamos escolher uma cor neutra relacionada à sua marca para manter o contexto ambiental.

Opacidade da sobreposição
Não importa a cor que você escolha, a Belvo define automaticamente a opacidade para 90%. Isso se deve às seguintes práticas recomendadas de UX:

- Com opacidades mais baixas (menos de 70%), os usuários podem ter dificuldade em se concentrar no fluxo, pois terão "ruído visual" no fundo.
- Cores sólidas (opacidade definida em 100%) podem causar uma mudança drástica, resultando em uma experiência desconexa ou não natural.


| Variável CSS | Padrão | Descrição |
|  --- | --- | --- |
| `--overlay-background-color` | `#03286380` | Define a cor de fundo da sobreposição mostrada atrás do widget. O padrão é cinza. |
| `--overlay-background-color-dark` | `#03286380` | Define a cor de fundo da sobreposição no modo escuro. |
| `--surface-color` | `#ffffff` | Define a cor base da superfície (fundo) do widget. |
| `--surface-color-dark` | `#011432` | Define a cor base da superfície (fundo) do widget no modo escuro. |
| `--divider-color` | `#e2e6e9` | Define a cor das linhas divisórias. |
| `--divider-color-dark` | `#2b3d54` | Define a cor das linhas divisórias no modo escuro. |
| `--image-border-radius` | `8px` | Define o raio da borda para imagens exibidas dentro do widget. |
| `--layout-side-padding` | `16px` | Define o preenchimento lateral horizontal para o layout do widget. |


### Tela de Credenciais

| Variável CSS | Padrão | Descrição |
|  --- | --- | --- |
| `--credentials-screen-extra-info-align` | `center` | Define o alinhamento do texto de informações extras na tela de credenciais. |
| `--credentials-screen-extra-info-font-weight` | `400` | Define o peso da fonte do texto de informações extras na tela de credenciais. |
| `--credentials-screen-extra-info-font-size` | `1rem` | Define o tamanho da fonte do texto de informações extras na tela de credenciais. |
| `--credentials-screen-extra-info-line-height` | `24px` | Define a altura da linha do texto de informações extras na tela de credenciais. |
| `--credentials-screen-extra-info-color` | `#161a1d` | Define a cor do texto de informações extras na tela de credenciais. |
| `--credentials-screen-extra-info-color-dark` | `#eef3f8` | Define a cor do texto de informações extras na tela de credenciais no modo escuro. |
| `--credentials-screen-title-align` | `center` | Define o alinhamento do título da tela de credenciais. |
| `--credentials-screen-title-font-weight` | `600` | Define o peso da fonte do título da tela de credenciais. |
| `--credentials-screen-title-font-size` | `1.125rem` | Define o tamanho da fonte do título da tela de credenciais. |
| `--credentials-screen-title-line-height` | `26px` | Define a altura da linha do título da tela de credenciais. |
| `--credentials-screen-title-color` | `#161a1d` | Define a cor do título da tela de credenciais. |
| `--credentials-screen-title-color-dark` | `#eef3f8` | Define a cor do título da tela de credenciais no modo escuro. |
| `--credentials-screen-institution-logo-border-radius` | `8px` | Define o raio da borda do logotipo da instituição na tela de credenciais. |
| `--credentials-screen-header-logo-reversed` | `false` | Inverte a ordem do logotipo da instituição e do cabeçalho (título/informações extras) quando definido como `true`. |
| `--credentials-screen-help-link-align` | `center` | Define o alinhamento do link de ajuda na tela de credenciais. |
| `--credentials-screen-help-link-font-size` | `0.875rem` | Define o tamanho da fonte do link de ajuda na tela de credenciais. |
| `--credentials-screen-counter-border-radius` | `8px` | Define o raio da borda para o contador da tela de credenciais. |
| `--credentials-screen-counter-font-size` | `0.875rem` | Define o tamanho da fonte para o contador da tela de credenciais. |