Logotipos no código

Duas formas de aplicar

Imagem

Um <img> apontando para o arquivo. Simples, tem alt de graça e continua legível se o arquivo não carregar. É o certo para o logo principal de um cabeçalho, e o único caminho em e-mail.

Classe CSS

Uma máscara: a silhueta vem do SVG e a cor vem de uma variável. Uma classe cobre as três formas em qualquer cor, e o tema vira um token. É o certo quando o logo precisa mudar de cor sozinho.

O preço da máscara

Elemento mascarado não tem alt: declare role="img" aria-label="Biglink". E se o SVG não carregar, ele não fica quebrado, fica invisível, porque a máscara vazia esconde tudo. Em cabeçalho crítico, prefira <img>.

Padrão de URL

https://cdn.biglink.io/brand/v1/logos/svg/<forma>-<cor>.svg
https://cdn.biglink.io/brand/v1/logos/png/<forma>-<cor>.png
https://cdn.biglink.io/brand/v1/logos/webp/<forma>-<cor>-2x.webp

forma: horizontal | vertical | simbolo
cor:   bangladesh | caribbean | mountain | rich-black | white

Como aplicar em imagem

<img src="https://cdn.biglink.io/brand/v1/logos/svg/logo-horizontal-bangladesh.svg"
     width="200" height="51" alt="Biglink">

Sempre com width e height, para o layout não pular no carregamento. O alt é "Biglink" quando o logo identifica a página, e "" quando ele acompanha o nome já escrito ao lado, para o leitor de tela não repetir.

Qual formato em cada lugar

SVG

Primeira escolha em site, app e apresentação. Não perde qualidade e pesa pouco.

PNG

E-mail, documento do Office e qualquer ferramenta que não aceite vetor.

WebP 2x

Web pesada de imagem. Nunca em e-mail: o Outlook não renderiza WebP.

Escolher a cor pelo fundo

/* fundo escuro */   logo-horizontal-white.svg      ou  -caribbean.svg
/* fundo claro */    logo-horizontal-bangladesh.svg ou  -rich-black.svg

Em vez de decidir caso a caso, use as composições já aprovadas em Logotipos, na seção de fundo colorido. As combinações em que o logo sumia foram removidas de lá.

O logo pulsa

Onde couber animação, o coração bate

O símbolo é um coração, e em produto ele bate. É a identidade em movimento, e não enfeite: aplicação nossa com logo parado está fora do padrão. A batida tem dois toques por ciclo, o primeiro mais forte, com pausa longa até o próximo, porque pulso único e uniforme parece respiração e não coração.

Se você pediu menos movimento no seu sistema, os logos acima estão parados de propósito.

Carregar

<link rel="stylesheet" href="https://cdn.biglink.io/brand/v1/logos/logo.css">

Usar

<!-- o logo completo: forma, cor e batida -->
<span class="bl-logo bl-logo--horizontal bl-pulsar" role="img" aria-label="Biglink"></span>

<!-- so a batida, num <img> que voce ja tem -->
<img src="https://cdn.biglink.io/brand/v1/logos/svg/logo-horizontal-bangladesh.svg"
     class="bl-pulsar" width="200" height="51" alt="Biglink">

As classes

/* forma, obrigatoria em .bl-logo */
.bl-logo--horizontal  .bl-logo--vertical  .bl-logo--simbolo

/* cor. Sem nenhuma delas, o logo segue o tema */
.bl-logo--bangladesh  .bl-logo--caribbean  .bl-logo--mountain
.bl-logo--rich-black  .bl-logo--branco     .bl-logo--herdar

/* altura. Ou defina --bl-logo-altura direto */
.bl-logo--p (24px)  .bl-logo--m (40px)  .bl-logo--g (64px)

/* batida. Funciona sozinha em img, svg e qualquer elemento */
.bl-pulsar  .bl-pulsar--devagar (3s)  .bl-pulsar--rapido (1.2s)

Tema claro, escuro e sistema

Sem nenhuma classe de cor, o logo segue o sistema pelo prefers-color-scheme. Quando você oferece um seletor de tema, a escolha da pessoa precisa vencer o sistema nos dois sentidos, e é o que estas âncoras fazem:

<!-- qualquer uma destas no <html> ou num container -->
<html data-tema="dark">      <html data-theme="dark">      <html class="dark">
<html data-tema="light">     <html data-theme="light">     <html class="bl-claro">

/* sistema: nao coloque ancora nenhuma */

A classe .dark está na lista porque é o que Tailwind e Flux usam, então projeto Laravel nosso já funciona sem adaptar nada.

Em e-mail, estático e sempre

Cliente de e-mail remove animação de CSS, e vários removem o CSS inteiro. Em comunicado, use <img> com PNG, sem classe nenhuma. O logo parado ali não é exceção esquecida: é o certo.

O que não fazer no código

Aplicar filter, opacity ou mix-blend-mode para forjar uma cor que já existe pronta.
Esticar com width: 100% sem height: auto, o que distorce a proporção.
Copiar o @keyframes para o seu projeto. Ele muda aqui e o seu fica para trás.
Servir o logo do seu próprio domínio. Use a URL do CDN, que tem cache de um ano e CORS liberado.

O arquivo, inteiro

:root{
  --bl-logo-cor: #03614d;      /* Bangladesh, para fundo claro */
  --bl-logo-altura: 40px;
  --bl-logo-ritmo: 2s;
}

/* Tema. O padrao segue o sistema; a escolha explicita da pessoa vence, nos
   dois sentidos, para quem oferece um seletor claro/escuro/sistema. */
@media (prefers-color-scheme: dark){
  :root{ --bl-logo-cor: #ffffff; }
}
[data-tema="dark"], [data-theme="dark"], .dark, .bl-escuro{ --bl-logo-cor: #ffffff; }
[data-tema="light"], [data-theme="light"], .bl-claro{ --bl-logo-cor: #03614d; }

/* --------------------------------------------------------------- o logo */
/* A mascara usa so o canal alfa do SVG, entao qualquer variante de cor serve
   de fonte: a silhueta e a mesma nas cinco. Fixamos a bangladesh para ter um
   arquivo so no cache. */
.bl-logo{
  display: inline-block;
  flex: none;
  height: var(--bl-logo-altura);
  background-color: var(--bl-logo-cor);
  -webkit-mask: var(--bl-logo-arte) center / contain no-repeat;
          mask: var(--bl-logo-arte) center / contain no-repeat;
}

.bl-logo--horizontal{
  --bl-logo-arte: url(https://cdn.biglink.io/brand/v1/logos/svg/logo-horizontal-bangladesh.svg);
  aspect-ratio: 593.34 / 150;
}
.bl-logo--vertical{
  --bl-logo-arte: url(https://cdn.biglink.io/brand/v1/logos/svg/logo-vertical-bangladesh.svg);
  aspect-ratio: 447.05 / 313.41;
}
.bl-logo--simbolo{
  --bl-logo-arte: url(https://cdn.biglink.io/brand/v1/logos/svg/simbolo-bangladesh.svg);
  aspect-ratio: 139.8 / 140.07;
}

/* Cor fixa, para quando o logo nao deve seguir o tema. */
.bl-logo--bangladesh{ --bl-logo-cor: #03614d; }
.bl-logo--caribbean { --bl-logo-cor: #00ed82; }
.bl-logo--mountain  { --bl-logo-cor: #2bc294; }
.bl-logo--rich-black{ --bl-logo-cor: #262626; }
.bl-logo--branco    { --bl-logo-cor: #ffffff; }
/* Segue a cor do texto do container. Util dentro de botao e de menu. */
.bl-logo--herdar    { --bl-logo-cor: currentColor; }

.bl-logo--p{ --bl-logo-altura: 24px; }
.bl-logo--m{ --bl-logo-altura: 40px; }
.bl-logo--g{ --bl-logo-altura: 64px; }

/* --------------------------------------------------------------- a batida */
/* Dois toques por ciclo, como batimento de verdade: o primeiro mais forte, o
   segundo mais leve, e uma pausa longa ate o proximo. Um pulso unico e
   uniforme parece respiracao, nao coracao. */
@keyframes bl-pulsar{
  0%, 100% { transform: scale(1); }
  14%      { transform: scale(1.06); }
  28%      { transform: scale(1.01); }
  42%      { transform: scale(1.04); }
  70%      { transform: scale(1); }
}

.bl-pulsar{
  animation: bl-pulsar var(--bl-logo-ritmo) ease-in-out infinite;
  transform-origin: center;
  will-change: transform;
}
.bl-pulsar--devagar{ --bl-logo-ritmo: 3s; }
.bl-pulsar--rapido { --bl-logo-ritmo: 1.2s; }

/* Movimento repetido e infinito e gatilho de enxaqueca e de desconforto
   vestibular. Quem pediu menos movimento no sistema recebe o logo parado, e
   isso nao e opcional. */
@media (prefers-reduced-motion: reduce){
  .bl-pulsar{ animation: none; }
}