Personalização

Personalizar o tema da ação permite refletir melhor sua marca e fornecer um contexto visual para a experiência do usuário.

Visão geral


Cor

A cor é um identificador de marca forte. É possível personalizar as cores primária e de plano de fundo para representar sua marca. A cor principal é usada para destacar componentes importantes na superfície visual, como o título do card e qualquer botão de ação. Essa cor deve ser a mais associada à sua marca.

Escolha uma cor primária primeiro.

Depois de escolher a cor principal, escolha uma cor de plano de fundo que combine com a cor primária e a cor secundária do texto.

A cor de fundo pode ser uma versão mais clara da cor principal.

A cor do plano de fundo pode ser uma cor complementar.

Para garantir que as cores escolhidas sejam acessíveis, fazemos uma verificação de contraste de cores no console do desenvolvedor para garantir taxas de contraste de cores suficientes entre as cores primária e secundária e entre as cores secundária e de fundo. Para mais orientações sobre como escolher e coordenar as cores primárias e de plano de fundo, visite o site do Material Design.

Imagem de plano de fundo

Uma das maneiras mais eficazes de dar riqueza e dimensão visuais a um cartão é usar uma imagem como plano de fundo em vez de uma cor sólida. Considere o seguinte ao escolher uma imagem como plano de fundo:
Para garantir a legibilidade em primeiro plano, aplicamos uma máscara de proteção escura na imagem de plano de fundo. O texto ficará automaticamente branco.

Este cartão básico usa uma imagem de plano de fundo. Uma imagem de plano de fundo substituirá qualquer cor de plano de fundo, portanto, escolha a opção que melhor representa sua marca.

A imagem precisa ser neutra o suficiente para manter a aparência desejada por meio de várias rodadas de diálogo. Aqui, a mesma imagem de plano de fundo se aplica ao cartão básico acima e a este cartão de carrossel.


Tipografia

A tipografia pode expressar sua marca e, ao mesmo tempo, direcionar a atenção do usuário para as informações mais importantes. Para o maior impacto, você pode personalizar o maior texto, como o título, em cada card do Action. Nesse caso, uma fonte tipográfica expressiva, como uma fonte com serifa, uma fonte com estilo de script ou uma fonte mais pesada, pode chamar atenção e dar contraste ao texto secundário. Para orientações gerais sobre tipografia, consulte a Material Design Foundation.

Escolha uma fonte que funcione bem com texto secundário.

O que fazer:

Com fonte arrojada e cor brilhante, essa fonte se destaca do fundo e atrai a atenção para o título do cartão.

O que não fazer:

Sem um peso maior, essa fonte é difícil de ler e não consegue chamar a atenção para o título antes do texto.


Forma

Formato da imagem

De acordo com os componentes do Material Foundation, o formato das imagens oferece outra dimensão para maior expressividade. No momento, é possível escolher entre formas angulares e curvas para imagens em componentes visuais. Escolha um formato de imagem adequado ao estilo geral da sua marca.

Seu logotipo é um bom lugar para procurar orientação sobre qual forma escolher. Neste exemplo, o logotipo é nítido e angular, portanto, os cantos angulares estão alinhados com a marca.

Outros componentes também podem orientar você na sua decisão. Aqui, as bordas arredondadas do botão de ação e o logotipo correspondem aos cantos curvos da imagem.

Para mais orientações sobre como escolher formas de imagem, acesse o site do Material Design.