Mentoria CRIE
Mini guia de identidade visual
Uma referência rápida da marca — paleta, tokens, tipografia e exemplos de uso — para que qualquer peça mantenha o mesmo tom: quente, editorial e decidido.
Paleta
Cores e tokens
Background
--backgroundoklch(0.16 0.008 55)Fundo carvão quente de toda a página.
Bone
--boneoklch(0.95 0.015 85)Marfim do blazer. Títulos e textos de destaque.
Ember
--emberoklch(0.78 0.085 70)Champagne / rose-gold. Acento, CTAs e itálicos.
Card
--cardoklch(0.20 0.010 55)Superfícies elevadas, caixas e blocos.
Muted foreground
--muted-foregroundoklch(0.72 0.018 70)Texto de apoio, legendas e respirações.
Border
--borderoklch(1 0 0 / 8%)Divisórias sutis entre seções.
Textura
Gradiente e sombras
--gradient-emberBotões principais e molduras de aplicação.
--shadow-emberBrilho quente sob elementos de conversão.
--shadow-elegantProfundidade discreta em cards de conteúdo.
Tipografia
Duas vozes, um discurso
--font-displayInstrument Serif · títulos, frases de virada e itálicos emocionais.
Empresas não crescem.
Empresárias crescem.
Classe: text-display · tracking -0.03em
--font-sansInter Tight · corpo de texto, listas, legendas e microcopy.
A empresa cresce até o limite da identidade da empresária que a lidera. Esse é o tom do corpo de texto: direto, respirado, sem ornamento.
Eyebrow · uppercase tracking 0.35em
Aplicação
Exemplos de uso
Botões
CTA principal: pill, gradiente ember, texto em ember-foreground.
Secundário
Destaque citado
A empresa nunca foi o problema.
Eu era.
Barra ember de 2px + serif. Use no máximo uma vez por seção.
Regras
Faça e não faça
- Faça
- Use tokens semânticos (text-ember, bg-card) em vez de cores fixas.
- Reserve o itálico ember para a frase de virada.
- Deixe respiro: seções com py-20 e divisórias sutis.
- Fotografia quente, com sombra e pele real.
- Não faça
- Não use branco puro nem preto puro — use bone e background.
- Não empilhe vários gradientes ember na mesma tela.
- Não use serif em textos longos de corpo.
- Não introduza uma terceira cor de acento.