Charles
O-Type · licença comercial · só no logoLUCENA
Geométrica de traço fino e uniforme, caixa alta com espaçamento largo. É o que dá ao logo o ar de precisão e calma. Usada exclusivamente no logotipo.
01
Origem
O nome já é a promessa
Lucena vem do latim lux, luz. O nome significa luminosa, a que ilumina, aquela que ajuda a dar à luz.
É uma coincidência boa demais para ser desperdiçada: uma empresa de energia solar cujo próprio nome quer dizer luminosa. A marca inteira se apoia nisso. Não é metáfora inventada por agência, é etimologia.
Por isso o slogan da casa é "Soluções iluminadas". Ele funciona nos dois sentidos ao mesmo tempo: a solução que traz luz, e a solução que foi pensada com clareza. Os dois descrevem o serviço.
02
Símbolo
A insígnia
Um escudo dividido ao meio. De um lado a folha, do outro o sol. É a empresa inteira num desenho de linha.
O escudo
Forma de brasão, com base arredondada. Diz permanência e responsabilidade técnica. Um sistema fotovoltaico dura 25 anos: a forma precisa dizer isso.
A metade esquerda: as folhas
Duas folhas com nervuras, em traço fino. Representam a posição da marca a favor da consciência ambiental.
A metade direita: o sol
Um sol nascendo no canto superior, com raios que se abrem para baixo. É a fonte de energia e é a luz do nome.
A linha central
Divide e une as duas metades. Natureza e energia não são coisas opostas na Lucena: são o mesmo projeto.
Tudo em traço, nada em massa
A insígnia é desenho de linha de espessura constante, sem preenchimento. Isso mantém a marca leve, permite usá-la grande sem pesar, e é o que a faz funcionar como marca d'água.
03
Aplicação
As versões do logo
Três arranjos e três cores. Escolha pela forma do espaço, não pelo gosto.
Qual usar em cada caso
| Situação | Versão | Por quê |
|---|---|---|
| Cabeçalho de site, papel timbrado, rodapé de e-mail | Horizontal | O espaço é largo e baixo |
| Perfil de rede social, carimbo, adesivo, placa de obra | Vertical | O espaço é quadrado |
| Favicon, ícone de app, selo de relatório, marca d'água | Só a insígnia | Abaixo de 90 px o texto some de qualquer jeito |
| Sobre fundo claro | Azul | É a versão principal. Use esta por padrão |
| Sobre foto, fundo azul ou verde | Branco | Garante contraste. Nunca ponha o azul sobre foto |
| Peça de sustentabilidade, selo ambiental | Verde | Uso pontual. Não vire a versão padrão |
04
Paleta
As cores
Duas cores de marca e uma família de superfícies claras. Os valores abaixo foram medidos no arquivo vetorial original do logo, não em imagem de tela.
Sobre a impressão: o Pantone é a referência de verdade para gráfica. Não converta o hexadecimal para CMYK por conta própria: peça à gráfica a conversão a partir do Pantone, porque cada papel e cada máquina fecham a cor de um jeito. Os hexadecimais desta página são para tela.
Superfícies e texto
A marca vive em fundo claro. Estas são as superfícies e os tons de texto do sistema.
Proporção de uso
A regra que impede a marca de virar carnaval: o claro domina, o azul estrutura, o verde pontua.
70%claro
22%azul
8%verde
05
Tipografia
As letras
Decisão pendente sobre a fonte da marca. O logo foi desenhado em Charles, da foundry escocesa O-Type. Os arquivos que a Lucena tem são de licença desktop, que cobre impresso e arte, mas não cobre uso como fonte de site. No logo isso não é problema, porque ele está vetorizado, a letra já virou desenho. Para o texto do site, enquanto a licença web não for comprada, usamos as substitutas abaixo.
Jost
títulos · livre · Google FontsSoluções iluminadas
Geométrica da mesma família visual da Charles: mesmo desenho de círculo, mesmo peso leve possível. É a substituta mais próxima que existe livre. Títulos e números grandes.
Inter
interface e texto curto · livreProjeto dimensionado por engenheiro
Altura de x alta e formas abertas: é a fonte mais legível em tela pequena e em leitura rápida. Menu, botão, legenda, tabela e todo o painel interno.
Source Serif 4
artigo longo · livreO performance ratio mede o que a usina entregou contra o que ela deveria ter entregue.
Serifada de leitura, desenhada para texto corrido. É o que dá ao blog cara de publicação técnica e não de post de rede social. Só no corpo dos artigos.
IBM Plex Mono
número e etiqueta · livre256,59 kWp · 799.061 kWh
Monoespaçada com números de largura fixa: coluna de tabela alinha, número não dança quando atualiza. Todo dado medido, etiqueta de seção e código.
Escala tipográfica
| Papel | Fonte | Peso | Tamanho | Entrelinha |
|---|---|---|---|---|
| Título de página | Jost | 400 | clamp(2.5rem, 5.6vw, 4.6rem) | 1.08 |
| Título de seção | Jost | 400 | clamp(1.85rem, 3.4vw, 2.9rem) | 1.08 |
| Subtítulo | Jost | 500 | 1.22rem | 1.3 |
| Corpo de interface | Inter | 400 | 17px | 1.6 |
| Corpo de artigo | Source Serif 4 | 400 | 1.16rem | 1.72 |
| Etiqueta / olho | IBM Plex Mono | 500 | 0.70rem | tracking .18em, caixa alta |
| Número grande | Jost | 400 | clamp(2rem, 3.6vw, 3rem) | 1.0, tabular |
06
Textura
A marca d'água
A insígnia é feita de linha fina, então ela aguenta ser usada enorme e quase invisível. É o recurso de textura da marca: dá profundidade sem sujar o fundo e sem precisar de foto.
5% · padrão
Fundo de seção clara. É o valor usado no site. Percebe-se sem competir com o texto.
10% · destaque
Bloco de citação, capa de relatório, folha de rosto. Já é visível de propósito.
10% · sobre azul
Sobre fundo azul, use a versão branca da insígnia.
Regras da marca d'água
- Opacidade entre 4% e 10%. Acima disso ela vira ruído e o texto perde legibilidade.
- Sempre sangrando pela borda, nunca centralizada e inteira: cortada pela margem ela parece textura, inteira parece logo mal colocado.
- Só uma por tela. Duas marcas d'água na mesma página é enfeite, não sistema.
- Nunca atrás de tabela, gráfico ou número. Dado precisa de fundo limpo.
- Sobre fundo claro use a insígnia azul; sobre fundo azul ou verde, a branca.
07
Movimento
Como a marca se mexe
Movimento com número, não com adjetivo. Animação lenta demais é o sinal mais óbvio de site feito às pressas, e animação em tudo é o sinal mais óbvio de site feito por IA.
Durações
| O quê | Duração | Curva |
|---|---|---|
| Cor de botão, link, ícone | 140ms | cubic-bezier(.2,0,0,1) |
| Estado de cartão, sombra, hover | 200ms | cubic-bezier(.2,0,0,1) |
| Revelação no scroll, abrir painel | 280ms | cubic-bezier(.2,0,0,1) |
| Contador de número subindo | 1100ms | saída cúbica |
| Contorno vivo do botão | 2400ms | linear, em laço |
O que não se faz
- Teto de 300ms. Nada que responde a um clique ou a um hover passa disso.
- Nunca
ease-inem interface. Começar devagar faz a tela parecer travada. Use saída. - Nunca
transition: all. Declare a propriedade. Senão o navegador anima coisa que você não pediu e engasga. - Nada pisca, nada pulsa, nada balança. Isto é engenharia, não promoção.
- Não anima número que muda sozinho. Dado ao vivo trocando com animação faz o leitor duvidar do dado.
- Tudo respeita
prefers-reduced-motion. Quem pediu para não ver movimento não vê.
Passe o mouse
08
Limites
O que não fazer com a marca
09
Escrita
Como a Lucena fala
A Lucena é uma empresa de engenharia num mercado onde muita gente que vende projeto solar não é engenheiro. A voz precisa deixar isso claro sem precisar dizer.
Assim sim
- Número antes de adjetivo. "256,59 kWp em 19 usinas" vale mais que "grande experiência".
- Diga o que mede. Performance ratio, kWh por kWp, saldo de crédito. O cliente não entende, mas entende que você entende.
- Frase curta e afirmativa. O leitor é ocupado.
- Admita limite. "Se não fizer sentido, a gente também diz" vale mais que qualquer garantia.
- Fale de projeto, não de placa. Placa é commodity, projeto é serviço.
Assim não
- "Economia de até 90%". É o que todo vendedor de placa diz. Competir aí é competir no terreno do outro.
- Superlativo sem prova. "A melhor", "líder", "referência" sem número atrás.
- Urgência falsa. "Últimas vagas", "aproveite agora". Sistema fotovoltaico é decisão de 25 anos.
- Jargão de marketing. "Soluções inovadoras", "excelência", "compromisso com o cliente".
- Emoji em documento técnico. Proposta, relatório e artigo não levam.
10
Downloads
Os arquivos da marca
Os vetores abaixo foram gerados a partir do arquivo original da marca. São SVG, então não perdem qualidade em nenhum tamanho.
Onde está o material completo: o kit original, com
.ai editável, PDFs vetoriais, PNGs sem fundo, cartão de visita, pasta institucional, envelope e assinatura de e-mail, está no Dropbox em 01 Empório Dom Pedro / 09 Projetos / 15 Lucena Energia / 00_LUCENA ENERGIA_MARKETING.