Appearance

Com Appearance você pode implementar a estratégia visual e a personalização do seu Developer Portal, definindo imagens, cores e fontes dos principais elementos de interface.

Logo no topo da página, você tem o link para ver como seu portal fica com as alterações. Lembre-se de primeiro clicar em SAVE para salvar as alterações e, após acessar o link, atualizar a página (pressionando F5 ou clicando no ícone correspondente no seu navegador).

Pode experimentar à vontade. Se não gostar do resultado, clique em RESET APPEARANCE para voltar para a configuração inicial.

Você também tem a opção de clicar em DISCARD CHANGES para descartar as últimas alterações feitas.

Branding

Carregue as imagens que vão compor a sua identidade visual.

Passe o mouse acima da imagem até ver o botão + e clique para escolher uma nova imagem.

A tabela abaixo mostra as imagens que podem ser personalizadas, sua resolução máxima, formatos de arquivos aceitos e o tamanho limite.

Imagem Resolução máxima Formatos aceitos Tamanho limite

Default logo

-

JPG, JPEG e PNG

1 MB

Favicon

32 x 32

Home page banner

3000 x 1200

Catalog banner

3000 x 1200

Apps banner

3000 x 1200

gif mostrando como trocar imagem em Branding

Fontes

Você pode escolher as fontes utilizadas nos cabeçalhos e no corpo do texto. As fontes disponíveis são:

  • Roboto

  • Inter e

  • Nunito

O texto de exemplo ao lado do campo com o nome da fonte reflete imediatamente a sua escolha.

Cores de fundo

Escolha as cores de fundo para o cabeçalho, corpo e rodapé do seu Developer Portal.

Você pode informar o código hexadecimal, RGB ou HSL, ou escolher a cor clicando na paleta de cores. A cor escolhida fica exemplificada no quadrado ao lado do campo com o código hexadecimal da cor.

Mesmo que você escolha a cor da palheta ou informe o código RGB ou HSL da cor, o campo sempre exibirá o código hexadecimal.

animação ilustrando as opções para escolha de cor

Cores do botão

Veja mais abaixo em dicas de acessibilidade as recomendações de contraste e escolha cores para os botões:

  • Fill: São os botões que possuem um fundo sólido. Escolha uma cor para esse fundo e para a fonte.

  • Outline: São botões que têm sempre o fundo branco. Escolha a cor da fonte e do contorno.

  • Text: É um tipo de botão que não tem contorno. Escolha a cor da fonte.

Dicas de acessibilidade

A sua página pode ficar mais agradável aos olhos e fácil de ler se você se atentar para as cores utilizadas.

O alto contraste é essencial para melhores condiçoes de visibilidade e legibilidade e para abranger a maior extensão possível de indivíduos com diversas habilidades visuais.

Uma das ferramentas recomendadas pela W3C (World Wide Web Consortium) e WAI (Web Accessibility Initiative) é este verificador automático de contraste:

Informe as cores da fonte (em "Foreground color") e do fundo (em "Background color") e veja se as cores recebem "Pass" (está em conformidade com as recomendações de acessibilidade) ou "Fail" (é recomendado escolher outras cores).

Thanks for your feedback!
EDIT
How useful was this article to you?