Observe que esta é a parte 2 de 2 sobre como projetar o sistema de cores acessível da Hazel. Se você não leu a parte 1, aqui vai !

Eureca!

Qualquer que fosse a solução, eu tinha a sensação de que os tokens de design ofereceriam algumas dicas sobre como sistematizar tudo. E aconteceu que o evento Schema 2021 da Figma estava chegando e incluiu uma apresentação sobre tokens de design no sistema de design da Asana.

Vale a pena assistir a apresentação inteira, mas aqui está a foto do dinheiro:

Eu senti como se eles tivessem aberto este caso.

Os tokens de design da Asana são compostos por 4 atributos semânticos.

O sentimento descrevia a sensação que a cor estava transmitindo. As opções incluíam padrão, sucesso, aviso, perigo, upsell, selecionado e beta.

O uso descreveu o elemento sobre o qual a cor está sendo aplicada. As opções incluíam plano de fundo, texto, ícone e borda.

A proeminência descreveu quanta atenção a cor está chamando. As opções incluíam padrão, fraco, médio e forte.

A interação descreveu como o usuário está interagindo com um elemento colorido. As opções incluíam padrão, foco, ativo e desabilitado.

Ajustando a Fórmula

Começando com o botão principal do meu sistema de design, percebi rapidamente que não poderia simplesmente aplicar a abordagem da Asana como está.

No entanto, eu estava confiante de que ele forneceu uma estrutura sólida que eu poderia adaptar ajustando cada atributo. Eu também os reorganizei para priorizar o que as cores estão sendo aplicadas.

O uso seria nivelado para superfície, conteúdo e borda. O conteúdo aparece em superfícies e contornos de superfícies.

O sentimento incluiria neutro, primário, informação, sucesso, aviso e crítico. Primário cobriria elementos interativos, bem como elementos que são “selecionados”. Posso estar exagerando no significado de “sentimento”, então estou aberto a sugestões.

A proeminência inclui default, subdued, disabled e muted, entre outros. O padrão viria a significar “proeminência máxima”. Este atributo tornou-se minha gaveta pega-tudo, com algum arrependimento que cobrirei mais tarde.

A interação não mudaria.

Injetando significado

Também era importante que os valores dos atributos tivessem definições significativas e consistentes.

Alguns exemplos de superfície:

• A proeminência padrão significa que as cores são ajustadas para atender aos requisitos mínimos de contraste de texto da WCAG em relação ao conteúdo mais provável.
• A proeminência moderada significou que as cores são ajustadas para atender aos requisitos mínimos de contraste sem texto da WCAG em relação ao conteúdo mais provável.
• A proeminência suave significava que as cores são ajustadas para corresponder a uma taxa de contraste de 1,1:1 em relação à cor da superfície padrão.

• A proeminência padrão significa que as cores não neutras são ajustadas para corresponder a uma taxa de contraste de 6,2:1 em relação à cor de superfície padrão.
• A proeminência suave significou que as cores são ajustadas para atender aos requisitos mínimos de contraste de texto da WCAG em relação às suas respectivas cores de superfície suaves.

• A proeminência moderada significou que as cores são ajustadas para atender aos requisitos mínimos de contraste sem texto da WCAG em relação à cor de superfície padrão.
• A proeminência suave significa que a opacidade da cor está definida para 10%.

Um efeito colateral feliz

Um dos desafios de projetar produtos de marca branca é receber ativos de marca que podem não atender aos requisitos de contraste das WCAG. Essa abordagem sistemática das cores garante que seu produto de etiqueta branca seja acessível.

Resultado atual

Com a abordagem de token de design da Asana, consegui passar de uma lista crescente de 206 cores para uma lista relativamente estável de 119 cores.

Isso representou uma redução de ~40% com uma solução que escala!

Vamos a alguns exemplos.

Um trabalho em andamento

Provavelmente existem outras maneiras de assar este bolo, mas esta é a primeira receita com a qual fiquei feliz.

Olhando para trás, não tenho certeza se “invertido” deveria ser um atributo de “proeminência”. Pode ser mais adequado se for colocado em “uso” como uma extensão. Por exemplo, "invertido na superfície" ou "invertido no conteúdo".

A “tela” e o “tecido” também parecem estar mal colocados sob o atributo “proeminência”. Ambos são superfícies por definição, então ainda não tenho certeza do que fazer com eles. Talvez eles devam ser apenas outliers neste sistema? O que você acha?

Seja qual for o caso, agora tenho uma abordagem sã para as cores. Estou ansioso para aplicar isso a um tema escuro. Mas, considerando como a elevação no tema escuro funciona de maneira diferente de um tema claro , estou antecipando alguns ajustes no funcionamento das cores da superfície.