Manual de marca primesite
O guia rápido de como a primesite se apresenta: símbolo, logotipo, cores, tipografia e tom de voz. Para manter tudo coerente em sites, redes, propostas e anúncios.
O guia rápido de como a primesite se apresenta: símbolo, logotipo, cores, tipografia e tom de voz. Para manter tudo coerente em sites, redes, propostas e anúncios.
O símbolo é uma janela de site com um spark (brilho de 4 pontas) no canto, sobre um quadrado de cantos arredondados em laranja sólido. Resume a promessa da marca: a gente cria o seu site (a janela) e faz ele brilhar / se destacar (o spark).
Use sempre a que tiver melhor contraste com o fundo. O colorido é o padrão; o mono se adapta sozinho a qualquer cor. Nunca recolora o ícone colorido.
A mesma arte num quadrado de cor sólida. Os vazados (janela, traços, contorno do spark) deixam o fundo aparecer, então ele se ajusta a qualquer cor — clara ou escura.
A palavra primesite é sempre em minúsculas, na fonte Fraunces (peso 700, corte de texto). O pingo do primeiro “i” é um círculo perfeito; o segundo “i” (o de “site”) é laranja, e o pingo dele vira um spark — o mesmo brilho do símbolo. O texto já vem convertido em vetor (outlines), então não depende da fonte estar instalada. O lockup horizontal é o padrão; a versão empilhada serve para espaços quadrados (perfil de rede, selo).
Lockup horizontal — o padrão. Esquerda: fundo claro · direita: fundo escuro.
Versão empilhada — para espaços quadrados (perfil de rede, selo).
Mantenha ao redor do logo um respiro igual à altura do símbolo. Tamanho mínimo: símbolo 24px / logo horizontal 120px de largura.
Tudo o que é preciso para reconstruir o logotipo do zero. As medidas estão no sistema de coordenadas do próprio SVG (viewBox -14 90 923.66 275), com a linha de base em y = 300 e o eixo Y crescendo para baixo.
brand/fraunces.ttf. Instância: wght 700, opsz 30 (corte de texto), SOFT 0, WONK 0.p r ı m e s ı t e — os dois “i” são sem pingo (ı, U+0131). O 2º “i” é laranja #FF6A3D.translate(startX, 300) scale(0.1, −0.1) (escala 0,1 = 200/2000 upm; baseline y=300; Y invertido para outline).<circle cx="246.64" cy="173.89" r="18.9"/> na cor do texto.M564.78 157.83 C569.76 174.27 573.25 177.75 589.68 182.73 C573.25 187.71 569.76 191.2 564.78 207.63 C559.8 191.2 556.31 187.71 539.88 182.73 C556.31 177.75 559.8 174.27 564.78 157.83 Ztranslate(684.07 173.73) scale(1.0442) translate(-564.78 -182.73) → equivale a cx 684,07 · cy 173,73 · r 26 (raio natural do path 24,9; k = r/24,9).-14 90 923.66 275.#1C1814 (logo) / #F4ECDD (inverse) · laranja #FF6A3D.brand/make-logo.py (fontTools) gera logo.svg + logo-inverse.svg idênticos.| Métricas do texto | |
| Topo do texto (demais letras, exceto “t”) | y 202,52 |
| Ascendente do “t” | y 179,54 |
| Base do texto (baseline) | y 300,00 |
| Base do “p” (descida) | y 346,61 |
| 1º pingo (círculo, r 18,9) | |
| Centro (x · y) | 246,64 · 173,89 |
| Topo · base | 154,99 · 192,79 |
| Esquerda · direita | 227,74 · 265,54 |
| 2º pingo / spark (r 26) | |
| Centro (x · y) | 684,07 · 173,73 |
| Topo · base | 147,73 · 199,73 |
| Esquerda · direita | 658,07 · 710,07 |
Quando o símbolo já aparece por perto (ou não cabe), use a palavra sozinha. Sempre a partir do arquivo vetorizado: logo.svg em fundos claros e logo-inverse.svg em fundos escuros.
Areia de fundo, tinta para texto, e a tangerina como cor de ação. Verde e ouro são apoios. Clique num tom para copiar o código.
Um par com personalidade: um serif editorial com caráter para títulos, e um grotesco limpo e moderno para leitura. Ambos gratuitos no Google Fonts.
O símbolo simplificado vira o favicon do site. Já está ligado em primesite.com.br.
primesite — Coloque o seu comércio no mapa ✕
primesite.com.br
Próximo, simples e sem jargão. Falamos com o dono do comércio, não com técnico.
Trata por “você”, de pessoa pra pessoa. Nada corporativo ou distante.
Sem termos técnicos. Explica o benefício, não a tecnologia.
Direto e claro, com pontuação leve. Evita o travessão “—” nas mensagens.