Marca
Kit de marca
Os arquivos oficiais da NimboCDN e as regras para usá-los. Está tudo aqui para que ninguém precise recortar o logotipo de uma captura de tela.
ZIP de 476 KB · logotipos, ícones, cores, tipografias e as licenças
1. O nome
NimboCDN é uma palavra só, com N maiúsculo e CDN em maiúsculas. Sem espaço, sem hífen, sem caixa alta inteira.
- Certo: NimboCDN
- Errado: Nimbo CDN · NIMBOCDN · Nimbocdn · NimboCdn
«CDN» pode aparecer em outro tom que «Nimbo» — é a categoria, não o nome — e assim se vê onde a marca termina sem meter um espaço. Em monocromo os dois vão iguais: um tom não sobrevive a uma tinta só.
Em texto corrido, na primeira menção escreva o nome completo. Depois disso, «NimboCDN» sozinho basta; não abrevie para «Nimbo».
2. O logotipo
Quatro peças. A horizontal é a principal: se você está em dúvida, é essa.
Uma tinta só
Cada peça tem sua versão monocromática: positivo para fundo claro, negativo para fundo escuro. Nelas o bloco é recortado, não pintado de branco — assim o substrato passa através. Pintar de branco funcionaria só sobre papel branco; sobre papel de cor, sobre uma imagem ou sobre qualquer fundo colorido, esse branco vira uma mancha colada por cima.
O que o símbolo diz
O bloco é uma imagem que perde 32 % da sua altura. Essa massa reaparece embaixo como a borda de lima a partir da qual a imagem é entregue. Os 32 % não foram escolhidos a olho: são a medição que o produto publica. O AVIF precisa de 32 % menos bytes que o JPEG, medido sobre catorze imagens de duas lojas reais a igual qualidade percebida. Se essa medição mudar, o símbolo muda com ela. Não é uma decoração com forma de dado: é o dado.
3. O favicon não leva glifo
A 16 px existem 256 pixels no total, e ali o sol e os morros viram uma mancha que suja o bloco. Por isso existe um arquivo separado, sem o glifo, e é o que deve ser usado de 16 a 48 px.
| Arquivo | Retenção de forma a 16 px |
|---|---|
Com glifo (nimbocdn-symbol.svg) | 0,807 |
Sem glifo (nimbocdn-symbol-small.svg) | 0,882 |
Medido rasterizando a 16 px, devolvendo a 256 px sem interpolar e correlacionando contra o nativo. Simplificar o símbolo no tamanho mínimo é prática padrão, não uma exceção: a 16 px o que precisa sobreviver é a silhueta.
4. Área de respeito e tamanho mínimo
Três unidades das 24 do símbolo, pelos quatro lados — ou seja, 1/8 da altura. Sai da altura da borda de lima (1,5 u) vezes dois. Toma-se um elemento do próprio símbolo, não um número solto. Assim a área cresce quando a marca cresce.
| Peça | Mínimo | Por quê |
|---|---|---|
| Símbolo | 16 px | É o favicon, e nesse tamanho vai sem glifo |
| Horizontal | 96 px de largura | Abaixo disso o nome cai para menos de 10 px de caixa óptica e deixa de se ler |
| Vertical | 72 px de largura | O mesmo |
Em layout apertado, aumente o espaço em volta em vez de encolher o logotipo abaixo do mínimo.
5. As cores
Cinco cores de marca. O contraste de cada uma está medido sobre branco, porque é o que decide se um texto naquela cor se lê ou não.
A proporção de uso é 55 % ameixa, 32 % neutros, 8 % lima e 5 % semânticos. O lima é acento: se aparece em toda parte, deixa de acentuar.
As três semânticas não são cores de marca
O feedback tem cores próprias, de propósito. O ameixa da NimboCDN não é um erro e o lima não é um sucesso. Se o aviso e o acento de marca se parecem, o leitor para de ler o aviso.
Baixar todos os tokens em JSON — inclui o tema escuro, os raios, a elevação e os tempos de animação. A paleta em SVG.
6. A tipografia
Bricolage Grotesque
Títulos e o nome da marca. Eixo de peso 200–800; usamos 500 a 800. SIL Open Font License 1.1.
Figtree — texto, interface e números
Corpo de texto e interface. Eixo de peso 300–900; usamos 400 a 700. SIL Open Font License 1.1.
As duas são fontes variáveis com um padrão que engana: Bricolage abre em 800 e Figtree em 300. Qualquer regra de CSS que use essas famílias tem que declarar font-weight. Se não declarar, os títulos saem em 800 e o corpo em 300, e ninguém percebe até colocar o texto ao lado do mesmo texto em outra máquina.
O nome da marca não se digita. É contorno vetorial, gerado com o kerning real de HarfBuzz, em wght 700 · opsz 96 · wdth 100 com tracking de −30/1000 em. Digitá-lo em Bricolage dá outro entreletramento.
Bricolage woff2Figtree woff2Licença OFLLicença OFL
7. O corte
Uma barra e a mesma barra a 68 %. É a proporção do símbolo virada textura: a trama não ilustra a marca, é a marca em outra escala. É a única — não existe uma segunda.
Como o produto usa: ameixa a 4,2 % e 2,6 %, ladrilho de 44 × 28 px sobre o lavado claro. É exatamente o fundo do cartão Pro do painel.
E sobre escuro: rosa a 7 % e 4,5 %, ladrilho de 66 × 42 px. É o fundo deste rodapé — role até o fim da página.
O mesmo ladrilho ampliado e sem transparência, só para ver a forma. Não é um uso válido.
A trama vai plana e discreta: se ela chama a atenção, está forte demais. O arquivo é o ladrilho de 22 × 14 unidades, com as barras de 16 e 10,88 — que é 16 × 0,68.
O símbolo em movimento
O símbolo também tem uma versão em movimento, com ciclo de 2400 ms. O bloco desce de 13 a 8,84 unidades e as 4,16 que perde reaparecem embaixo como a borda. O envolvente não muda em nenhum momento. O arquivo respeita prefers-reduced-motion: para quem pediu menos movimento, fica parado.
Símbolo animado, SVGA trama, SVGÍcone animado, GIF
8. Sobre que fundos
O logotipo colorido pede um fundo claro e neutro. Sobre qualquer outra coisa, use o monocromo que corresponder.
Sobre branco
Colorido. O caso principal.
Sobre #f0f0f1
Colorido. O cinza do painel do WordPress.
Sobre escuro
Monocromo negativo.
Sobre o campo
Monocromo negativo, sobre ameixa.
9. A mascote
A chita aparece no site e nas campanhas. Não está no pacote e não pode ser usada por terceiros, nem mesmo em uma matéria. Ela representa a NimboCDN falando, e nas mãos de outra pessoa passa a dizer coisas que não dissemos. Para ilustrar uma matéria, use o logotipo.
As regras internas, publicadas aqui para que se saiba o que esperar. A mascote nunca substitui o símbolo. Nunca entra no favicon nem no painel, e só usa ameixa, lima e rosa.
Entregando
Acenando
10. Seis maneiras de quebrar isto
Cada uma tem o seu porquê. Não são regras de gosto: são as que fazem o símbolo deixar de significar o que significa, ou deixar de se ler.
✕ Esticar ou desproporcionar
O bloco está a 68 % exatos do envolvente. Deformá-lo quebra o único dado que o símbolo carrega.
✕ Recolorir o bloco ou a borda
O rosa e o lima não são decoração intercambiável: são o bloco recortado e a borda. Se você precisa de uma tinta só, existe o monocromo.
✕ Pôr sombra, relevo ou degradê
O símbolo é plano por desenho. Um degradê o devolve à estética da categoria da qual ele se separou.
✕ Girar ou inclinar
O bloco e a borda são horizontais porque o corte é vertical. Inclinado, o gesto deixa de se ler.
✕ Usar o símbolo com glifo a 16 px
Nesse tamanho o sol e os morros se fundem. Existe nimbocdn-symbol-small.svg, medido: 0,882 de retenção contra 0,807.
✕ Recompor o nome com tipografia viva
O nome é contorno, com kerning de HarfBuzz. Digitá-lo em Bricolage dá outro entreletramento — e, sem font-weight declarado, sai em 800.
11. O que você pode e o que não pode
A regra curta: o nome é permissivo, o logotipo é restrito. Citar uma marca para se referir ao produto que ela nomeia é uso legítimo e não precisa da nossa autorização. Reproduzir o desenho do logotipo, sim.
Você pode, sem nos perguntar
- Escrever «NimboCDN» em texto para se referir ao produto ou à empresa.
- Dizer que o seu site, o seu tema ou o seu plugin funciona com NimboCDN, se for verdade.
- Comparar a NimboCDN com outros produtos, inclusive de forma desfavorável, se o que você diz for verificável.
- Usar o logotipo para linkar para nimbocdn.net, ou como ícone de um botão de integração.
- Publicar notícia, resenha, tutorial ou vídeo sobre a NimboCDN, com o logotipo e as capturas do kit de imprensa.
Você não pode
- Alterar, recolorir, girar, deformar, recortar ou redesenhar o logotipo — nem em parte.
- Usar o nome ou o logotipo no nome da sua empresa, do seu produto, do seu domínio, do seu aplicativo ou do seu perfil em rede social.
- Combinar a nossa marca com a sua em um bloco único, nem criar um logotipo derivado.
- Sugerir parceria, patrocínio, certificação ou aprovação que não exista.
- Deixar a nossa marca mais destacada que a sua na mesma peça: o seu nome e o seu logotipo têm que ser visivelmente maiores.
- Vender produtos com a nossa marca, nem usá-la ao lado de conteúdo ilegal ou ofensivo.
Precisa de um uso que não está aqui? Escreva para press@nimbocdn.net com uma maquete do que você pretende fazer. Respondemos rápido.
12. Marcas de terceiros
O logotipo do WordPress aparece no nosso site sem nenhuma alteração e só para indicar compatibilidade. WordPress é marca da WordPress Foundation, e nós não temos vínculo com ela. Aplicamos a nós mesmos a regra que pedimos acima.
O mesmo vale para os produtos que comparamos: as comparativas nomeiam concorrentes para identificá-los, e nada ali sugere associação, patrocínio ou aprovação de nenhum deles.
13. A marca e o contato
NimboCDN™ é uma marca da DIO Digital E-Commerce Services LLC.
Se você precisa de uma atribuição em uma peça, esta serve:
NimboCDN e o desenho do símbolo da NimboCDN são marcas da DIO Digital E-Commerce Services LLC.
Permissões, dúvidas e avisos de uso indevido: press@nimbocdn.net.
14. Todos os arquivos
ZIP de 476 KB
| O que é | Arquivos |
|---|---|
| Logotipo horizontal | SVG · 512 · 1024 · 2048 · mono positivo · mono negativo |
| Logotipo vertical | SVG · 512 · 1024 · mono positivo SVG · mono positivo PNG · mono negativo SVG · mono negativo PNG |
| Símbolo | SVG · 512 · 1024 · mono positivo · mono negativo · animado |
| Símbolo para 16–48 px | SVG sem glifo |
| O nome | SVG · 512 · 1024 · 2048 |
| Ícones e favicons | favicon.ico · 16 · 32 · 48 · 180 · SVG · 256 · GIF animado |
| Cor e trama | tokens JSON · paleta SVG · trama |
| Tipografias | Bricolage · Figtree · OFL · OFL |
| Capturas do produto | Painel, plano gratuito · Painel, plano Pro |
As tipografias são SIL Open Font License 1.1: podem ser usadas e redistribuídas com a licença ao lado, e não podem ser vendidas por si só. Todo o resto é da DIO Digital E-Commerce Services LLC e vale sob as regras da seção 11.