Cores

A cor fornece uma maneira intuitiva de comunicar informações nas interfaces, podendo ser usada para indicar interatividade, fornecer feedback às ações do usuário, e dar à interface uma sensação de continuidade visual.

O CPS Design System emprega cor para ajudar usuários a se concentrarem em suas tarefas, construindo uma hierarquia visual e criando estrutura entre elementos de interface, a partir de diversos tons neutros pontualmente interrompidos por cores mais proeminente, enfatizando itens significativos somente quando necessário.

Isto é obtido através da combinação de três paletas de cores completas, isto é, compostas por uma cor base e três níveis de cores mais claras e três níveis de cores mais escuras, sendo uma Paleta de Cinzas Neutros, uma Paleta de Cor de Marca (brand color), e uma Paleta de Cor de Ênfase (accent color), mais uma semi-paleta de Cores de Estado.

Mas antes de abordar cada uma das paletas de cores, é necessário compreender como este design system foi estruturado para ser flexível a dois modos de cor.

Modos de Cor

Uma das mais fortes tendências de design dos últimos anos está em oferecer não apenas um esquema de cores, mas sim dois: modo claro (ou light mode) e modo escuro (dark mode). Cada modo consiste em um conjunto de valores de cores neutras que são ajustados automaticamente para garantir o contraste ideal, em seguida com as paletas de cores de marca e de ênfase sendo usadas conforme o nível de brilho desejado por cima de cada superfície.

Em ambos os modos de cor claro e escuro, cores mais escuras indicam superfícies de fundo de menos importância, com as superfícies importantes realçadas com cores mais claras e brilhantes. Vale lembrar, entretanto, que outras características influenciam na sensação de importância das superfícies, conforme abordado em Camadas e Materiais e em Elevação.

Modo escuro é importante mesmo?

Existem ótimos argumentos a favor (opens new window) e contra (opens new window) à utilização de modo escuro.

A característica mais importante do UX design moderno é ser inclusivo e apropriadamente adaptável às eventuais necessidades e preferências do usuário, por exemplo:

• Respeitar preferências de tamanho de fonte;
• Navegação por teclado e por leitores de tela funcional;
• Tipografia que prioriza legibilidade;
• Contrastes de cores adequados;
• Não utilizar cores como único mecanismo de identificação de estados da interface (atenção aos diferentes tipos de daltonismo);
• Respeitar preferências de redução de movimentos (fonte de vertigens e epilepsias para determinadas pessoas, ou ainda meras distrações que alguns preferem evitar);
• Oferecer conteúdo alternativo textual (ou quando o principal não carrega, ou o usuário não pode vê-lo);
• Respeitar preferências de exibição da interface (e o modo escuro entra aí).

Ou seja, oferecer uma interface preparada para modo escuro não é apenas um luxo visual, é uma característica de acessibilidade para parte do público, e uma característica de respeito às preferências para todo o público.

Falando em camadas, cada modo de cor é fundamentalmente um conjunto de quatro preenchimentos sólidos, conforme apresentado abaixo, para serem utilizados nas camadas básicas da aplicação. Assim, os elementos da interface são posicionados acima se utilizando de ajustes de cores em diferentes níveis de opacidade, para gerar o resultado mais adequado para cada modo de cor, tirando proveito das características de material Translúcido sempre que possível.

Paleta de Cinzas Neutros

Muitos design systems modernos se utilizam de paletas de cores com tons de cinza neutros, com o intuito de oferecer uma variedade de contrastes adequado para diversas necessidades, sem interferir em questões de identidade ou desviar a atenção desnecessariamente por causa do uso exagerado de cores.

Neste sentido, o CPS Design System é similar. Entretanto, diferencia-se fortemente de vários outros design systems por respaldar sua paleta de cores neutras em apenas duas cores: preto e branco. Todas as outras tonalidades são obtidas através de variações de opacidade:

Conforme já discutido, ao utilizar-se das características de material Translúcido, tais tons neutros podem facilmente se adaptar em cima de tons coloridos das outras paletas de cores, bem como podem se mesclar uns aos outros de forma inteligente. Por exemplo, um elemento utilizando a cor base da paleta de cinzas teria aparência de cinza #959595 quando por cima de uma camada quartenária do modo claro (cujo preenchimento é branco #FFFFFF), mas sutilmente e coerentemente ajustado à aparência de cinza #8E8E8E quando por cima de uma camada primária do modo claro (cujo preenchimento é cinza claro #F3F3F3).

Dica

A paleta de cinzas neutros, diferente das outras, é apenas uma referência. Ou seja, se determinada intensidade de opacidade não existente na paleta for necessária para algum cenário ou componente específico, não é problema ajustar, desde que se mantendo as mesmas características visuais do restante do design system.

Embora um tanto quanto evidente, por ser totalmente baseada em opacidades, resta destacar que a paleta de cinzas neutros sofre influencia do modo de cor atual.

Paleta de Cor de Marca

Conforme o Manual de Identidade Visual (opens new window) destaca, a cor de marca do CPS é o vermelho (#B20000), servindo tal cor como base para a paleta de cor de marca deste design system:

Por ser justamente uma cor intermediária e de brilho intenso, fez-se necessário construir uma paleta de cores derivadas com três tons mais claros e três tons mais escuros. Existem diversas teorias e formulações válidas para geração de tons a partir de uma cor base, sendo que a paleta de marca deste design system foi construída utilizando-se de ajustes específicos (opens new window) na ferramenta Color Scale Generator de Hayk An (opens new window), considerando-se os seguintes valores de referência:

• Tons claros: Luminosidade em +55%, Ângulo de Matiz em -24° e Desvio de Saturação em +100%.
• Tons escuros: Luminosidade em -38%, Ângulo de Matiz em -2° e Desvio de Saturação em -33%.

Uma vez que esta cor de marca vermelha é muito intensa, marcante e cheia de significados intrínsecos nas interfaces gráficas (em geral, vermelhos denotam mensagens de erro ou problemas de preenchimento em formulários), não seria prudente utilizar a paleta de cor de marca para elementos diversos da interface, ficando esta restrita a:

• Evidentemente, o logo do CPS, o qual nunca deve ter suas cores modificadas;
• O logo dos sistemas internos que queiram seguir a mesma cor de marca;
• Elementos decorativos associados à estrutura de navegação geral (como a barra lateral de navegação deste design system).
• Os elementos específicos e não persistentes (como o ícone de voltar ao topo da página deste design system).

Por fim, destaca-se que a paleta de cor de marca não sofre interferência dos Modos de Cor, isto é, as cores não são modificadas entre os dois modos. Porém, com exceção à cor base, as outras tonalidades podem sofrer ajuste de opacidade para se misturem melhor às camadas base dos modos de cor distintos.

Paleta de Cor de Ênfase

Uma técnica comum de obtenção de cor de ênfase, quando a cor de marca não é pertinente para ser utilizada de forma persistente na interface, é buscar a tonalidade totalmente inversa à cor de marca. Conforme o Guia de Estilo Site CPS (opens new window) destaca, a cor inversa ao vermelho da marca do CPS é um tom turquesa. Na verdade, a cor inversa imediata é um tom de turquesa muito claro e brilhante e, portante, este design system optou por seguir o ajuste de intensidade previamente realizado pela equipe da Assessoria de Comunicação no guia supracitado, adotando o tom turquesa mais escuro (#005C6E) como a cor base da paleta de cor de ênfase.

Em busca da versatilidade necessária para utilização da cor de ênfase em cenários distintos, tanto no modo claro quanto no modo escuro, mais uma vez fez-se necessário construir uma paleta de cores derivadas com três tons mais claros e três tons mais escuros, utilizando novamente a ferramenta Color Scale Generator com um conjunto de ajustes específicos (opens new window), considerando-se os seguintes valores de referência:

• Tons claros: Luminosidade em +75%, Ângulo de Matiz em 3° e Desvio de Saturação em +100%.
• Tons escuros: Luminosidade em -55%, Ângulo de Matiz em -4° e Desvio de Saturação em -40%.

Uma vez que tons azulados, como esta cor turquesa de ênfase apresentada, são mais suaves aos olhos e possuem menos conflitos com significados intrínsecos na interface gráfica, tal paleta de cor de ênfase é o conjunto de cores ideal para uso recorrente nos elementos da interface que precisam ser destacados dos tons de cinzas neutros (como botões de ação e efeitos visuais em geral)

Por fim, destaca-se que a paleta de cor de ênfase não sofre interferência dos Modos de Cor, isto é, as cores não são modificadas entre os dois modos. Porém, com exceção à cor base, as outras tonalidades podem sofrer ajuste de opacidade para se misturem melhor às camadas base dos modos de cor distintos.

Cores de Estado

Complementarmente às três Paletas de Cores principais, há um pequeno grupo de cores que denotam diferentes estados das informações, sendo tipicamente utilizadas em caixas de notificação e rótulos informativos.

Destaca-se que, assim como a paleta de cinzas neutros, as cores de estado também sofrem influencia do modo de cor atual, ou seja, possui variações especificamente pensadas tanto para claro quanto para escuro.

Atenção

Dadas as eventuais limitações que indivíduos podem ter quanto à percepção de cores, em especial vermelho, verde e azul (protanomalia, deuteranomalia, tritanomalia, protanopia, deuteranopia, tritanopia e acromatopsia), a utilização de Ícones é fortemente recomenda em conjunto com tais cores de estado das informações.