Personalizações

O by Unico oferece algumas opções de personalização em sua interface, permitindo que você a adapte à identidade visual da empresa e proporcione um visual personalizado da jornada.

Personalização do Logotipo

É possível personalizar o logotipo exibido aos usuários que acessam as jornadas do by Unico. Essa personalização reforça a parceria entre a empresa e a Unico, indicando que a verificação é realizada pela Unico a pedido do cliente ou parceiro.

Para solicitar a inclusão do logotipo, envie ao time da Unico uma URL onde o logotipo esteja hospedado em um diretório online (ou seja, o logotipo precisa ser acessível via URL no navegador).

• Ex: https://storage.googleapis.com/portal-orca-unico-prod/apps/orca/logo-default.png.

Não é possível cadastrar uma URL que seja um base64 (geralmente essas URLs iniciam em "data:image/jpeg;base64,/9j/4AAQ...").

Personalização do logotipo

Grids de logotipo aceitos

Recomendações:

• Envie o logotipo preferencialmente no formato de logo ícone, devido à sua melhor legibilidade em tamanhos reduzidos.

Regras:

• Certifique-se de que o logotipo seja quadrado, respeite o grid proporcional e garanta que seja exportado com no mínimo 192x192 pixels.

• Formatos aceitos: SVG, PNG e JPEG.

Formatos de logotipo não aceitos

Formato de logotipo não aceitos

Regras:

• Priorize a aplicação do logotipo em planos de fundo que garantam a legibilidade.

• Não utilize logotipos que não respeitem o grid quadrado.

• Evite o uso de logotipos em baixa resolução.

• Não aplique o logotipo em fundos transparentes.

Recomendações:

• Priorize cores com contraste legível de no mínimo 4.5:1, seguindo os parâmetros de acessibilidade da WCAG.

  • Utilize o hexadecimal das cores para verificar a escala de contraste. Exemplo: Foreground ColorPicker: #000000, Background Color: #FFFFFF, Contrast Ratio: 21.00:1.

Personalização da cor e formato dos botões

Personalize os botões de ação do by Unico. Defina a cor do texto, fundo e arredondamento dos cantos do botão para reforçar a identidade visual da sua empresa.

Personalização do botão

Exemplos de contraste

Recomendações:

• Escolha cores acessíveis: Ao personalizar as cores dos botões no by Unico, opte por um esquema de cores acessível, que garanta a visualização para todos os usuários, incluindo aqueles com deficiência visual.

• Taxas de contraste: Busque uma taxa de contraste superior a 4.51:1 para obter os melhores resultados.

Cores acessíveis facilitam a navegação para todos, especialmente para pessoas com baixa visão. Utilize o hexadecimal das cores para verificar o contraste e siga as recomendações da WCAG.

• Exemplo: #FFFFFF (texto) em #000000 (fundo) resulta em uma taxa de contraste de 21.00:1.

Arredondamento dos cantos dos botões

Além das cores do texto e de fundo, você também pode definir o arredondamento dos cantos (border radius) em pixels, conforme a escala abaixo:

Arredondamento dos cantos no botão

Configurações de personalização

Para realizar as configurações da identidade visual do cliente ou parceiro para o botão, compartilhe com o time de implantação da Unico as seguintes informações:

• Código hexadecimal da cor de background no botão.

  • Ex: #000000.

• Código hexadecimal da cor de texto no botão.

  • Ex: #ffffff.

• Arredondamento dos cantos no botão em pixels.

  • Ex: 10px.