Funções de cor e tokens

O sistema de cores expressivas do Wear Material 3 usa três camadas de destaque (primária, secundária e terciária) para componentes principais e duas camadas de superfície neutra. Cada função oferece uma variedade de valores com contraste consistente, permitindo combinações de cores expressivas, mas acessíveis, para uma experiência unificada em qualquer tema.

Exemplo de um tema de cores com funções.

O que são funções de cores?

As funções de cores são como os "números" em uma tela de pintura por números. Eles são o tecido conjuntivo entre os elementos da interface e onde cada cor vai.

  • As funções de cor são mapeadas para componentes do Material Design:você vai usar essas funções de cor, seja usando o esquema estático de valor de referência ou a cor dinâmica. Se o produto tiver componentes personalizados, eles precisarão ser mapeados corretamente para esse conjunto de funções de cores.
  • As funções de cor oferecem suporte à acessibilidade:o sistema de cores é criado com combinações de cores mais acessíveis. Esses pares de cores oferecem um contraste mínimo de 3:1.
  • Funções de cor são tokenizadas:as funções são implementadas no design e no código por tokens. Um token de design representa uma decisão de design pequena e reutilizável que faz parte do estilo visual de um sistema de design.

Termos essenciais

Confira os termos-chave que aparecem nos nomes das funções de cor:

  • Superfície:uma função usada para planos de fundo e áreas grandes e de baixa ênfase da tela.
  • Primária, secundária e terciária:funções de cores de destaque usadas para enfatizar ou reduzir a ênfase em elementos de primeiro plano.
  • Contêiner:funções usadas como cor de preenchimento para elementos de primeiro plano, como botões. Eles não devem ser usados para texto ou ícones.
  • Ativado:as funções que começam com esse termo indicam uma cor para texto ou ícones sobrepostos à cor principal pareada. Por exemplo, "on primary" é usado para texto e ícones em relação à cor de preenchimento primária.
  • Variante:as funções que terminam com esse termo oferecem uma alternativa de menor ênfase ao par não variante. Por exemplo, a variante de contorno é uma versão menos enfatizada da cor do contorno.

Funções principais

As funções principais são usadas para componentes importantes na interface, como botões de ajuste de borda, botões em destaque, estados ativos e ícones nos estilos de botões tonais.

Principal

  1. Principal
  2. On-Primary

Use a função principal para as ações mais importantes na interface, como botões principais ou calls-to-action. Essa cor precisa se destacar e ser reconhecida instantaneamente para guiar o usuário em direção às interações principais.

Primary-Dim

  1. Principal-Dim
  2. On-Primary

As funções de atenuação são usadas normalmente para elementos que precisam ser visualmente distintos da ação principal, mas não exigem atenção ou interação imediata do usuário.

Primary-Container

  1. Primary-Container
  2. On-Primary-Container

Aplique o contêiner principal para elementos de segundo plano, como cards ou modais, para destacar seções ou estados selecionados. Ele ajuda a chamar a atenção para conteúdo importante ou atividades em andamento na interface.

Funções secundárias

As funções secundárias são usadas para componentes importantes na interface, que não são tão importantes quanto a função principal, mas ainda precisam se destacar. As cores primária e secundária podem ser usadas juntas em layouts para criar diferenciação e foco.

Secundário

  1. Secundária
  2. On-Secondary

Use a função secundária para ações de suporte em áreas com interface densa, como botões secundários ou ações complementares. Ela mantém a visibilidade sem ofuscar os elementos principais em layouts complexos.

Secondary-Dim

  1. Secondary-Dim
  2. Secundária

A função "Secondary-Dim" oferece um contraste discreto para elementos passivos em áreas densas. Ele complementa a cor secundária e adiciona uma profundidade sutil, mantendo a interface limpa e ajudando os usuários a navegar.

Secondary-Container

  1. Secondary-Container
  2. On-Secondary-Container

Aplique o Secondary-Container para organizar elementos secundários em layouts densos. Ele cria estrutura e separação, garantindo que o conteúdo secundário seja distinguível mas não dominante.

Funções terciárias

As funções terciárias são usadas para dar destaque a contrastes que equilibram cores primárias e secundárias ou chamam a atenção para um elemento, como um campo de entrada. As funções terciárias também podem ajudar a indicar quando o conteúdo muda ou precisa se destacar, como quando uma meta é alcançada.

Terciário

  1. Terciária
  2. On-Tertiary

A função terciária é usada para chamar a atenção para elementos importantes. As funções terciárias são particularmente eficazes para componentes que precisam se destacar, como selos, adesivos ou elementos de ação especiais.

Tertiary-Dim

  1. Tertiary-Dim
  2. Terciária

Use a função "Tertiary Dim" para botões ou ações relacionadas a ações terciárias, mas que não exigem foco imediato.

Tertiary-Container

  1. Tertiary-Container
  2. On-Tertiary-Container

Aplique o contêiner terciário para planos de fundo que agrupam conteúdo relacionado a esse nível, como coleções de selos ou adesivos. Ele enfatiza elementos terciários, mantendo o equilíbrio e a estrutura na interface.

Funções semânticas

O vermelho de erro é usado para indicar problemas críticos, como erro, exclusão e qualquer coisa relacionada a emergência. Ele foi projetado para chamar a atenção imediata para problemas ou avisos, garantindo que os usuários possam identificar rapidamente as áreas que precisam de correção. O tom do vermelho de erro precisa manter contraste suficiente com os planos de fundo para atender aos padrões de acessibilidade, garantindo que ele esteja claramente visível e seja distinguível de outras cores de status, como avisos ou mensagens de sucesso.

Erro

  1. Erro
  2. On-Error

Um vermelho semântico, mas levemente matizado, que indica ações de remoção, exclusão, fechamento ou dispensa, como deslizar para revelar. Adicionada como uma alternativa de contêiner que é um pouco menos alarmante e urgente do que a cor de erro esmaecida.

Error-Dim

  1. Error-Dim
  2. On-Error

Um vermelho semântico, mas levemente matizado, que indica erros de alta prioridade ou ações de emergência, como alertas de segurança, sobreposições de caixa de diálogo com falha ou botões de parada.

Error-Container

  1. Error-Container
  2. On-Error-Container

Cor do contêiner menos proeminente para componentes que usam o estado de erro. Também pode indicar um estado de erro ativo que parece menos interativo do que um estado preenchido, como um botão ou card de compartilhamento de emergência ativo ou em uma caixa de diálogo de sobreposição com falha.

Contêineres de superfície e elevação

Os contêineres de superfície são essenciais para definir profundidade e elevação na interface, fornecendo estrutura e hierarquia por meio da cor, ajudando a diferenciar componentes com base na importância e na interação deles.

Surface-Container-Low

  1. Surface-Container-Low
  2. On-Surface
  3. On-Surface-Variant

Ótimo para um contêiner expandido que precisa ficar abaixo de Surface-Container, como um card expandido na notificação. Também pode ser usado para cards não interativos, em que o conteúdo ainda se beneficia da contenção.

Surface-Container

  1. Surface-Container
  2. On-Surface
  3. On-Surface-Variant

A cor padrão do contêiner para a maioria dos elementos. Ela oferece uma elevação neutra e moderada, sendo adequada para componentes gerais de UI.

Surface-Container-High

  1. Surface-Container-High
  2. On-Surface
  3. On-Surface-Variant

Ideal para componentes de alta ênfase que precisam ficar em cima ou em combinação com o contêiner de superfície. Essa cor ajuda a dar foco e hierarquia a áreas críticas da interface.