A marca se aplica pelo arquivo, nunca pela digitação.

Seis arquivos, seis papéis

Todos em PNG com fundo transparente, sem folga embutida na moldura. A dimensão nativa está em mono na ficha de cada um, e ela importa: é ela que define até onde a marca pode crescer antes de serrilhar.

logo-celere-digital.png

dimensão nativa · 1913 × 871
arte útil · 1909 × 869
wordmark celere · 1477 × 452
altura do c · 336
caixa alta de DIGITAL · 113
símbolo · Ø 432, centro em 1695, 216

Quando usar: é o lockup padrão. Assinatura de site, deck, proposta, contrato, rodapé e qualquer peça em que a Celere se apresenta pela primeira vez.

A arte encosta na moldura: 2px de folga à esquerda e 1px acima. A área de segurança não vem no arquivo, ela é construída no layout.

logo-celere-digital-branco.png

dimensão nativa · 1913 × 871
geometria idêntica à versão colorida
wordmark celere · branco
DIGITAL · teal #00AFAF
símbolo · cores originais

Quando usar: fundo escuro em ink, seção .dark, e foto com overlay. Só o wordmark vira branco: o símbolo e a palavra DIGITAL mantêm a cor de marca.

Sobre fundo claro ele desaparece. Se o fundo tiver menos de 40% de escurecimento, volte para a versão colorida.

logo-celere.png

dimensão nativa · 1956 × 939
arte útil · 1909 × 653
wordmark celere · 1477 × 452
símbolo · Ø 432, centro em 1703, 288
proporção da arte · 2,92 : 1

Quando usar: assinatura curta, mais horizontal, para barra de topo estreita e faixa de rodapé. A regra de escolha entre esta e a completa está aberta, veja a 07.8.

Não é uma versão reduzida da completa. É outro lockup, com outro enquadramento do símbolo.

logo-celere-branco.png

dimensão nativa · 1142 × 390
arte útil · 1080 × 368
símbolo · Ø 244
folga embutida · 41px à esquerda, 18px acima

Quando usar: a curta em fundo escuro. É o único arquivo com alguma folga já embutida, e a menor resolução do conjunto: em tela retina ele estoura antes dos outros.

Não usar acima de 540px de largura na tela. Acima disso, pedir o vetor em vez de escalar o PNG.

simbolo-celere.png

dimensão nativa · 433 × 435
símbolo · Ø 432, raio medido 216,4
núcleo laranja · Ø 89
o círculo encosta na borda esquerda: 0,9px cortado

Quando usar: avatar, selo, ícone de aplicativo, marcador de mapa, e qualquer lugar em que o nome já esteja escrito por perto.

O símbolo sozinho não substitui a assinatura em documento externo. Contrato, proposta e deck levam o lockup completo.

apple-touch-icon.png

dimensão nativa · 180 × 180
símbolo · Ø 167, folga de 6px
teal medido · #00B1B1
laranja medido · #FF9723

Quando usar: ícone de atalho iOS, já pronto. É o único arquivo do conjunto em que a cor não bate com o token.

Não amostrar cor deste arquivo. O desvio de #00AFAF para #00B1B1 e de #F79633 para #FF9723 é recompressão, não decisão.

// o token carrega o valor medido, #727376, sem arredondar. É o mesmo cinza que reprovava AA quando o site antigo o usava em texto, e por isso ele é exclusivo da marca e nunca entra em texto.

A roseta, traçada de volta

O símbolo é uma roseta de oito pétalas em teal com um núcleo laranja, separadas por vãos brancos que abrem em direção ao centro. O vetor abaixo foi traçado a partir do PNG por amostragem de contorno, e não é um desenho novo: é o mesmo desenho, agora resolvido.

simbolo-celere.svg

viewBox · 0 0 100 100
raio externo · 50, centro 50 50
pétalas · 8, eixo em 22,5 + k · 45 graus
meia largura na borda · 20,55 graus
vão entre pétalas na borda · 3,9 graus
ponta interna · raio 21,63
núcleo laranja · raio 10,417
erro máximo do traço · 0,06 unidade de viewBox

Como o teal entra: as pétalas herdam currentColor do contexto. Aberto sozinho, o arquivo aplica o teal oficial por svg:root; embutido no HTML, ele herda a cor de quem o chama.

O laranja do núcleo é fixo no arquivo. Ele nunca segue a cor do texto, porque o núcleo é o ponto de decisão da marca e não um detalhe.

O vetor é reconstrução, não é o arquivo de origem do Raphael. Para corte, bordado, fachada e placa, pedir o vetor original.

Escala de 16px a 128px

A menor feição do desenho é o vão entre pétalas na borda: 3,9 graus, ou 3,4% do diâmetro. É ele que decide o piso, e é ele que fecha primeiro.

Em 16px a roseta fecha

A comparação abaixo é o mesmo símbolo desenhado em 16 e em 24 pixels reais, ampliado em 8 vezes sem interpolação. Em 16px o vão da borda vale 0,54px: o antialiasing preenche, as pontas se encostam e a roseta lê como um anel com uma estrela dentro. Em 24px o vão vale 0,8px e as oito pétalas voltam a se separar.

A unidade sai da própria marca

A área de segurança não usa px nem rem: usa u, o raio do núcleo laranja. É a única medida do desenho que escala junto com a marca em qualquer aplicação, e ela vale 10,4% do diâmetro do símbolo. Na arte nativa, com o símbolo em Ø 432, u mede 45px.

4u 4u

// 4u = 9,4% da largura da arte. Com o lockup em 480px, são 45px em cada lado.

2u 2u

// 2u = 20,8% do diâmetro. Com o símbolo em 160px, são 33px em cada lado.

// dentro da folga não entra texto, hairline, ícone, borda de card, cota nem grafismo. A hachura do exemplo é só para enxergar a área: ela não é desenhada na peça final.

O piso não é gosto, é a feição que fecha

Cada lockup tem uma feição mais fina que todas as outras, e é ela que define o piso. Na marca completa é a caixa alta de DIGITAL, que mede 113px em 1913 de largura, ou 5,9% da largura. Na curta e no símbolo é o vão da roseta, que vale 3,4% do diâmetro do símbolo.

// o piso de impressão sai de dois limites de ofício: traço fino de 0,20 mm em ofsete e caixa alta legível de 1,5 mm. Em serigrafia, bordado e fachada, dobrar todos os valores e usar só o vetor.

Onde ela pode pousar, e onde não

Marca é objeto gráfico, então o piso é 3:1 de contraste, não 4,5:1. Os números abaixo são de contraste real entre a cor da marca e a cor do fundo, calculados pela fórmula da WCAG.

Permitido paper

A aplicação preferencial. Cinza da marca sobre paper dá 4,57:1, e o teal de DIGITAL dá 2,61:1, suficiente para arte de marca.

Permitido ink

Wordmark branco sobre ink dá 17,59:1 e o símbolo teal sobre ink dá 6,49:1. É a segunda aplicação mais forte.

Reprova teal cheio

Branco sobre teal dá 2,71:1, abaixo do piso de 3:1. Pior: as pétalas teal do símbolo somem dentro do próprio fundo.

Reprova laranja cheio

Cinza da marca sobre laranja dá 2,11:1 e branco dá 2,24:1. Some o núcleo laranja no fundo laranja, e a marca perde o ponto de decisão.

Permitido cartela sobre cor cheia

A saída para teal e laranja é a mesma do resto do sistema: cartela em white com radius-s e o par de sombra com hairline.

Permitido foto com overlay

Só a versão branca, e só com o overlay ink por baixo. O overlay tem que garantir pelo menos 86% de escurecimento onde a marca pousa.

Reprova foto sem overlay

Sem overlay a marca branca cai em cima de concreto claro e de céu. O contraste varia dentro da própria assinatura, e isso é reprovação.

Permitido blueprint com cartela

A malha de 24px cruza o wordmark e briga com a linha de base das letras. Sobre blueprint, a marca vai em cartela, igual a qualquer prosa.

Reprova blueprint sem cartela

Direto na malha, a linha atravessa as letras e o símbolo. A marca deixa de ser objeto e vira parte da textura.

Reprova versão branca em fundo claro

Sobra o símbolo e a palavra DIGITAL, e o nome desaparece. Fundo claro pede sempre o arquivo colorido, nunca o branco.

As quatro regras do manual, e onde elas caem no sistema

A revisão da v0 pediu para respeitar os usos do manual de marca, avisando que o logotipo dos anexos é o antigo. As regras de aplicação portam sem problema, e é o que está abaixo: quatro páginas do manual redesenhadas com a marca atual. O que muda de lá para cá é a unidade. O manual é de impressão e fala em %K e %C; a tela fala em contraste. Os cinzas abaixo são a conversão exata, 255 × (1 − K/100), e a última tabela amarra as duas réguas uma na outra.

Regra 1 · colorida positiva só de 0% a 25% Karquivo logo-celere-digital.png

0% K

12% K

25% K

50% K

100% K

Regra 2 · colorida negativa só de 50% a 100% Karquivo logo-celere-digital-branco.png

0% K

12% K

25% K

50% K

100% K

// os 25% K aparecem como último degrau permitido da positiva e como primeiro degrau proibido da negativa. Entre 25% e 50% nenhuma das duas coloridas serve, e é essa faixa que o manual deixa vazia de propósito.

Regra 3 · sobre cor, vai a monocromática

O manual é explícito nas duas páginas: "não utilizar a versão colorida em fundos coloridos. Nesses casos utilizar a versão monocromática preta ou branca", escolhida "considerando a preservação da legibilidade do logotipo". Abaixo a arte achatada numa cor só, gerada por filtro sobre o arquivo oficial, sobre as cores cheias que o sistema tem.

branca sobre teal

preta sobre laranja

branca sobre danger

preta sobre ghost

Regra 4 · a exceção do verde da marca

O manual abre uma exceção para o próprio verde do símbolo e suas variações de tonalidade: "as versões coloridas somente são indicadas sobre fundos branco, cinza e preto. Porém é possível aplicá-las sobre a cor verde do símbolo". A positiva vale até o degrau de 40% C; a negativa só no mais fundo, 90% C · 35% Y · 45% K. Na rampa teal deste sistema a mesma lógica cai assim:

Permitido positiva sobre teal-ghost

O degrau claro do verde da casa. Cinza da marca dá 4,22:1, e é o equivalente ao 40% C do manual.

Reprova qualquer colorida sobre teal cheio

O teal cheio equivale a 38% K, dentro da faixa morta entre 25% e 50%. Positiva dá 1,75:1 e negativa 2,71:1: as duas reprovam, exatamente como o manual prevê.

Permitido negativa sobre teal-deep

O degrau fundo do verde, equivalente ao 90% C do manual. Wordmark branco dá 5,31:1 sobre ele.

As duas réguas dão o mesmo veredito

Esta é a tradução que faltava, e o resultado é melhor do que o esperado. Cada superfície do sistema foi convertida para o %K equivalente pela luminância relativa da WCAG, para cair numa das faixas do manual; em seguida mediu-se o contraste do wordmark contra ela. O manual de 2015, que é de impressão, e o piso de 3:1 de objeto gráfico concordam nas doze.

// o critério é o wordmark contra o fundo, não a pétala teal do símbolo. O teal fica em 2,61:1 sobre paper, abaixo do piso, e isso é aceito de propósito desde a v0: o símbolo é marca de várias cores e a leitura dele vem da forma inteira, não do contraste de um elemento isolado.

// as duas cores cheias da casa, teal e laranja, caem juntas na faixa morta de 25% a 50% K. É a mesma reprovação que a 07.5 já tinha chegado por contraste, e a saída continua a mesma: a cartela branca.

Oito erros, cada um renderizado

Nenhum destes exemplos é hipótese. Todos são coisas que acontecem quando a marca chega em deck, planilha e apresentação sem uma página que diga não.

não estique

Esticar ou achatar

A proporção do lockup completo é 1913 por 871. Redimensionar sempre com a proporção travada, nos dois eixos.

não gire

Girar

A marca é sempre horizontal, com o wordmark na linha do olho. Nem a assinatura nem o símbolo giram, em nenhum ângulo.

não troque as cores

Trocar as cores

Teal #00AFAF e laranja #F79633 são fixos. A marca não recolore para combinar com o slide, com o cliente nem com a estação.

não pinte o nome

Laranja no wordmark

O laranja tem um único lugar na marca: o núcleo do símbolo. No wordmark ele rouba a decisão do símbolo e ainda cai para 2,11:1 sobre branco.

Parágrafo escrito no cinza da marca: o valor do wordmark aplicado a texto corrido dá 4,36:1 sobre mist, abaixo do piso.

não é cor de texto

Cinza da marca em texto corrido

O token --celere-brand-grey é exclusivo da marca. Texto usa a escala de ink, com piso em --celere-ink-3, que dá 4,6:1 sobre paper.

não sombreie

Sombra na marca

As duas sombras do sistema são de superfície, não de marca. A assinatura é sempre plana, sem relevo, sem contorno e sem brilho.

não faça degradê

Degradê dentro da marca

Os degradês do sistema são fundo de dado, nunca preenchimento de marca. Marca é cor chapada, sempre nos dois valores oficiais.

celere

// digitado em Plus Jakarta Sans

não digite o nome

Recriar o wordmark digitando

O wordmark é arte, não texto. Nenhuma fonte do sistema reproduz o desenho das letras, e o resultado é sempre um sósia errado.

não reduza tanto

Completa abaixo do mínimo

Em 88px de largura a caixa alta de DIGITAL cai para 5,2px e a palavra vira um borrão teal. Abaixo de 144px, use a curta ou o símbolo sozinho.

De onde vem cada número desta página