A cor é um dos principais elementos, senão o principal. É importante ter em conta o contraste entre elas, bem como manter a identidade visual da marca.
Para utilizar as classes na cor de fundo de um elemento utiliza-se a classe .gra-background-(cor)-(referência), para alterar a cor da fonte utiliza-se .gra-text-(cor)-(referência) como mostra nos exemplos abaixo.
As cores primárias são aplicadas em todos os elementos interativos, como botões, links e campos de entrada. Esta cor desempenha um papel fundamental na definição da atmosfera geral e na evocação de emoções.
<div class="square gra-background-blue-100"></div>
<p class="gra-text-blue-100"></p>
<div class="square gra-background-blue-200"></div>
<p class="gra-text-blue-200"></p>
<div class="square gra-background-blue-300"></div>
<p class="gra-text-blue-300"></p>
<div class="square gra-background-blue-400"></div>
<p class="gra-text-blue-400"></p>
<div class="square gra-background-blue-500"></div>
<p class="gra-text-blue-500"></p>
<div class="square gra-background-blue-600"></div>
<p class="gra-text-blue-600"></p>
<div class="square gra-background-blue-700"></div>
<p class="gra-text-blue-700"></p>
<div class="square gra-background-blue-800"></div>
<p class="gra-text-blue-800"></p>
<div class="square gra-background-blue-900"></div>
<p class="gra-text-blue-900"></p>
As cores secundárias realçam ou complementam a cor principal. Devem ser utilizadas com moderação para destacar elementos específicos da interface do utilizador, seguindo as diretrizes da marca
<div class="square gra-background-lime-100"></div>
<p class="gra-text-lime-100"></p>
<div class="square gra-background-lime-200"></div>
<p class="gra-text-lime-200"></p>
<div class="square gra-background-lime-300"></div>
<p class="gra-text-lime-300"></p>
<div class="square gra-background-lime-400"></div>
<p class="gra-text-lime-400"></p>
<div class="square gra-background-lime-500"></div>
<p class="gra-text-lime-500"></p>
<div class="square gra-background-lime-600"></div>
<p class="gra-text-lime-600"></p>
<div class="square gra-background-lime-700"></div>
<p class="gra-text-lime-700"></p>
<div class="square gra-background-lime-800"></div>
<p class="gra-text-lime-800"></p>
<div class="square gra-background-lime-900"></div>
<p class="gra-text-lime-900"></p>
As cores terciárias acrescentam uma nota de destaque e luminosidade quando são aplicadas estrategicamente. É reservada para elementos específicos que requerem um realce ou contraste distintivo, contribuindo para uma experiência visual equilibrada e diferenciada.
<div class="square gra-background-yellow-100"></div>
<p class="gra-text-yellow-100"></p>
<div class="square gra-background-yellow-200"></div>
<p class="gra-text-yellow-200"></p>
<div class="square gra-background-yellow-300"></div>
<p class="gra-text-yellow-300"></p>
<div class="square gra-background-yellow-400"></div>
<p class="gra-text-yellow-400"></p>
<div class="square gra-background-yellow-500"></div>
<p class="gra-text-yellow-500"></p>
<div class="square gra-background-yellow-600"></div>
<p class="gra-text-yellow-600"></p>
<div class="square gra-background-yellow-700"></div>
<p class="gra-text-yellow-700"></p>
<div class="square gra-background-yellow-800"></div>
<p class="gra-text-yellow-800"></p>
<div class="square gra-background-yellow-900"></div>
<p class="gra-text-yellow-900"></p>
As cores neutras, como branco, cinza e preto, desempenham um papel fundamental no nosso Design System. São cuidadosamente selecionadas para oferecer contraste suave e permitir que outras cores se destaquem. Utilizadas como fundo ou base em interfaces de design, garantem legibilidade e coesão visual em textos e elementos de interface. Contribuem significativamente para uma estética equilibrada e sofisticada, sendo essenciais para uma experiência de utilizador harmoniosa.
<div class="square gra-background-white"></div>
<p class="gra-text-white"></p>
<div class="square gra-background-gray-100"></div>
<p class="gra-text-gray-100"></p>
<div class="square gra-background-gray-200"></div>
<p class="gra-text-gray-200"></p>
<div class="square gra-background-gray-300"></div>
<p class="gra-text-gray-300"></p>
<div class="square gra-background-gray-400"></div>
<p class="gra-text-gray-400"></p>
<div class="square gra-background-gray-500"></div>
<p class="gra-text-gray-500"></p>
<div class="square gra-background-gray-600"></div>
<p class="gra-text-gray-600"></p>
<div class="square gra-background-gray-700"></div>
<p class="gra-text-gray-700"></p>
<div class="square gra-background-gray-800"></div>
<p class="gra-text-gray-800"></p>
<div class="square gra-background-gray-900"></div>
<p class="gra-text-gray-900"></p>
<div class="square gra-background-black"></div>
<p class="gra-text-black"></p>
O amarelo é uma cor de aviso, alertando para situações que requerem atenção, mas que não são necessariamente críticas. Ao ver amarelo, é recomendado tomar nota e considerar possíveis ajustes.
<div class="square gra-background-alert-200"></div>
<p class="gra-text-alert-200"></p>
<div class="square gra-background-alert-400"></div>
<p class="gra-text-alert-400"></p>
<div class="square gra-background-alert-600"></div>
<p class="gra-text-alert-600"></p>
O vermelho é usado para chamar a sua atenção para possíveis problemas ou erros. Quando vê vermelho, é importante revisar com cuidado e corrigir qualquer questão que possa ter surgido.
<div class="square gra-background-error-200"></div>
<p class="gra-text-error-200"></p>
<div class="square gra-background-error-400"></div>
<p class="gra-text-error-400"></p>
<div class="square gra-background-error-600"></div>
<p class="gra-text-error-600"></p>
O azul é utilizado para fornecer informações úteis ou contextuais. Esta cor não indica sucesso nem falha, fornece detalhes adicionais ou orientações para ajudá-lo a navegar com eficiência.
<div class="square gra-background-info-200"></div>
<p class="gra-text-info-200"></p>
<div class="square gra-background-info-400"></div>
<p class="gra-text-info-400"></p>
<div class="square gra-background-info-600"></div>
<p class="gra-text-info-600"></p>
Quando vê verde, é um sinal de sucesso! Esta cor é utilizada para indicar que uma ação foi concluída com êxito. Pode prosseguir com confiança sabendo que tudo correu como esperado.
<div class="square gra-background-success-200"></div>
<p class="gra-text-success-200"></p>
<div class="square gra-background-success-400"></div>
<p class="gra-text-success-400"></p>
<div class="square gra-background-success-600"></div>
<p class="gra-text-success-600"></p>
O contorno de acessibilidade, facilita a identificação e compreensão dos utilizadores de uma ação. Um contraste de cor suficiente torna o texto e as imagens mais fáceis de ler e compreender.
<div class="square gra-background-contour"></div>
<p class="gra-text-contour"></p>