Identidade da marca

As cores e as imagens da Ervanária Infantil

A paleta da loja online, que desde 7 de agosto passou a ser a identidade de tudo: slides das lives, os oito módulos do curso, os Reels e as páginas de captura. Clica em qualquer cor para a copiar.

Fonte: mira-templates/themes/ervanaria-infantil.css. As cores foram tiradas a olho dos prints do site, porque o site bloqueia leitura automática. Se alguma estiver ao lado do valor certo, corrige-se nesse ficheiro e tudo o resto acompanha.

As cinco cores

Estas são as que fazem o trabalho. Um slide típico usa creme, verde e uma pinta de tijolo, e mais nada.

Creme

--erv-creme

O chão de tudo. Fundo de todos os slides de conteúdo, de todas as páginas.

Verde-floresta

--erv-verde

A tinta. Títulos, texto corrido, rodapés e contornos grossos.

Tijolo

--erv-tijolo

O acento, e só um por slide. Botões, a expressão em itálico do título, o dado em foco.

Âmbar

--erv-amarelo

O destaque. Capas, o cartão que se quer que salte, o aro dos círculos.

Âmbar fundo

--erv-amarelo-2

O mesmo âmbar, mais quente. Existe para fazer gradiente com o de cima.

Os pastéis

A família dos círculos de categoria da loja, sempre com o aro âmbar. Usam-se em blocos sólidos e nesta ordem quando servem nós de um diagrama. Versões mais pálidas só funcionam dentro de um cartão branco; soltas no creme desaparecem.

Há ainda um --erv-menta-2: #8FDDBE, a menta um tom mais fundo, para gradientes.

Para colar num deck

Nunca escrever a cor à mão dentro de um slide. Sempre var(--erv-tijolo) e afins, para que uma mudança de paleta chegue a tudo de uma vez.

CSS · variáveis do tema

:root {
    --erv-creme:      #FDF3E3;   /* fundo de tudo */
    --erv-verde:      #31432F;   /* títulos, texto, contornos */
    --erv-tijolo:     #C4441C;   /* acento: botões, itálico, dado em foco */
    --erv-amarelo:    #F5A93F;   /* destaque: capas, cartões, aros */
    --erv-amarelo-2:  #FBBF5C;   /* o mesmo, mais fundo (gradientes) */

    --erv-menta:      #A8E3C4;
    --erv-menta-2:    #8FDDBE;
    --erv-lavanda:    #D5C6F2;
    --erv-manteiga:   #FBE28E;
    --erv-ceu:        #A9DCF2;
    --erv-salmao:     #F9AFA6;
    --erv-pessego:    #FBC98F;
}

Como se usa

Seis regras que separam um slide que parece da loja de um slide que parece de uma apresentação qualquer.

Fundo: Slides de conteúdo em creme. Capas e slides de destaque em âmbar, com o título em verde.
Títulos: Serifa, com uma expressão em itálico tijolo. Nunca duas. É a assinatura da marca: “Começa pela tua criança, não pela prateleira.”
Rótulos: Maiúsculas com entrelinha larga. Tijolo sobre fundo claro; âmbar sobre fundo verde.
Gráficos: O dado em foco vai a tijolo. O resto vai a menta ou manteiga sólidas, nunca cinzento nem um pastel lavado. É isto que faz um gráfico parecer da loja.
Cantos: 16px em caixas pequenas, 24px em cartões grandes, redondos por completo em pastilhas e botões.
Ornamentos: Formas simples (sol, lua, estrela) em contorno grosso verde, a respirar devagar. Uma por slide, no máximo, e sempre a sangrar por uma margem.

Biblioteca da marca

As que não pertencem a um deck só. Servem lives, módulos, Reels e páginas. Antes de mandar gerar uma imagem nova, ver primeiro se já está aqui. Vivem em decks/_imagens/.