A paleta de cores deste site foi inspirada nas imagens da revista Akira.
Buscando criar uma paleta com um tema urbano, me deparei com as incríveis imagens dessa revista durante minhas pesquisas.
Observe que a imagem acima apresenta um nível intrigante de camadas. As cores pálidas estão posicionadas ao fundo, enquanto as cores vívidas aparecem à frente, criando profundidade e destacando o ponto focal desejado.
O design deste site busca reproduzir essa ideia de profundidade e destaque em cada página.
Com o Next.js, é possível incorporar layouts dentro de layouts (ou camadas sobre camadas), permitindo explorar os limites da profundidade em páginas web.
Além disso, a paleta de cores pode mudar sutilmente ao longo do tempo, já que utilizei variáveis globais no CSS. Isso facilita ajustes na paleta, aplicando as alterações de forma centralizada e propagando-as por todas as páginas e componentes do site.
No WordPress podemos adicionar nossas cores em Global Colors, que pode ser acessado rapidamente quando definir as cores do Tema.
Também adiciono minhas cores no Global.css do Tema, para quando estiver editando html pelo Plugin Elementum fazendo o link por variáveis globais.
Veja como declarar suas cores globalmente no css abaixo:
Declaração das variáveis globais no CSS Global :
:root{
–A1:#ffffff;
–A2:#e9d1bf;
–A3:#ceb69c;
–A4:#8d6969;
–I1:#EBD3F8;
–I2:#C8A1E0;
–I3:#AD49E1;
–I4:#7A1CAC;
}
Fazendo uso das variáveis globais no CSS de cada Pagina HTML:
.subtitulo{
background-color: var(–I4);
}
Veja mais no site do Maujor.com
No React e Next.js também existe um Global.css e podemos acessar da mesma forma as cores quando criamos páginas e componentes.
A cor transmite uma emoção e se pretendemos entender que emoção transmitimos com nossa paleta, devemos estudar a Psicologia das Cores isso tem relação direta com Marketing;
Agora , conhecendo o seu público alvo, crie um tema e uma paleta adequado ao seu público.