Manual de marca e direcionamentos visuais

Construção do logotipo

Proporções medidas diretamente no vetorial de origem. Não redesenhar: usar sempre o SVG fornecido.

A linha tracejada é a área de proteção: 2 M livres em toda a volta. A malha fina são módulos de 1 M.

Versões

Seis assinaturas, uma decisão: escolhe-se pela largura disponível, não pelo gosto.

Comportamento sobre fundos

O “a”, o traço e o ponto carregam sempre a cor de destaque — exceto sobre verde, onde o logotipo passa a monocromático.

Branco sobre verde tem apenas 1,73:1 de contraste. Funciona como forma grande — nunca abaixo do dobro do tamanho mínimo, e nunca em impressão de baixa qualidade. Em dúvida, usar a versão a tinta: 10,58:1.

Índice de arquivos

Os SVGs em logos/svg/ chegam numerados como “Ativo N”. Tradução:

Principais

Secundárias

Aparecem em campanhas, sub-linhas e sistemas de categorização — nunca no mesmo bloco que o verde com o mesmo peso. Máximo uma secundária por peça.

Proporção

Uma peça bolda. lê-se ao longe pelo contraste, não pela saturação. A regra prática:

60 terreno (tinta ou branco) · 30 neutros e superfícies · 10 verde. As secundárias saem dos 10% — não se somam a eles.

Contraste

Rácios WCAG 2.1 calculados. Verde = passa AA para texto corrente (4,5:1). Âmbar = só texto grande, ≥ 24 px ou ≥ 19 px bold (3:1). Vermelho = não usar como texto.

A regra do “a”

Sempre que a palavra bolda aparece escrita — num título, num parágrafo, numa legenda de post, na assinatura de e-mail — o “a” final leva a cor de destaque. Não é licença de designer: é padrão da marca. É o que amarra o texto corrente à assinatura sem ter de colar o logotipo em todo o lado.

<!-- uma classe, um <i> sem itálico -->
<span class="wb">bold<i>a</i></span>.

.wb i { font-style: normal; color: var(--accent); }
.wb--inv i { color: #FFFFFF; }  /* sobre verde  */
.wb--mono i { color: inherit; }  /* uma cor só   */

Escala

Um único conjunto de degraus. Tudo o que aparece numa tela bolda. sai desta lista.

Grelha de tela

Espaçamento

Base 8. Só estes valores; nada de números soltos.

Raios

O raio da marca vem do ícone de app: 1 M, ou 11,3% do lado. Nada é mais redondo do que isso, exceto pílulas.

Formatos fixos

Redes sociais

Mesma grelha de 24, mesmo traço de 2 — mas a silhueta de cada plataforma mantém-se. É o que as torna reconhecíveis num rodapé de 20 px, e é o que as próprias plataformas exigem. Onde a forma oficial é sólida (X, TikTok, o play do YouTube), o glifo é cheio; o resto é contorno.

Versão A · barra de carregamento

Para quando há progresso real a comunicar — envio de arquivos do cliente, exportação de relatório, uma galeria pesada. A barra é o traço da marca a encher-se; a percentagem entra em mono, porque é dado.

Versão B · as letras tornam-se o logotipo

A versão por defeito: site institucional e qualquer entrada onde não há progresso a medir. As cinco letras sobem para o lugar, o “a” assume o verde, e o traço e o ponto fecham a assinatura. É a regra do “a” a acontecer em movimento.

As letras sobem 26 unidades do viewBox — não pixels, para o percurso escalar junto com o logotipo. Cada letra é um path do Ativo 18: não há tipografia envolvida, e por isso o que se forma no fim é o logotipo exato, não uma aproximação.

No código

/* a tela sai no load, ou ao fim de 1,6 s — o que vier primeiro */
const tela = document.getElementById('loader');

function sair() {
  tela.classList.add('is-done');              /* fade 220 ms */
  sessionStorage.setItem('bolda-loader', '1');
}

if (sessionStorage.getItem('bolda-loader')) {
  tela.remove();                              /* já viu nesta sessão */
} else {
  window.addEventListener('load', sair);
  setTimeout(sair, 1600);                    /* teto          */
  setTimeout(() => tela.remove(), 3000);        /* rede de segurança */
}

Cartão de visita · 85 × 55 mm

Frente a tinta com órbita a 16%; verso em campo de verde cheio com o logotipo a tinta. O logotipo nunca sangra — 8 mm de margem, sempre acima dos 2 M exigidos.

Redes sociais

Apresentação · 16:9

Slide de tinta para os momentos de tese; slide claro para listas e dados. A marca fica sempre no canto inferior direito, a 64 px de largura.

Assinatura de e-mail

Largura máxima 520 px. Uma barra verde de 3 px como único elemento gráfico — sem imagens de fundo, que os clientes de e-mail bloqueiam.

Etiquetas, selos e merch

CSS

/* 1 — constantes de marca: iguais em qualquer tema */
:root {
  --green:        #80DC10;  /* primária                              */
  --green-deep:   #63A90D;  /* séries de gráfico, tema escuro        */
  --green-mid:    #519009;  /* display sobre claro — 3,93:1          */
  --green-ink:    #437707;  /* texto sobre claro — 5,41:1            */
  --ink:          #151515;
  --grey-dark:    #3C3C3C;
  --grey-light:   #C6C6C6;
  --violet:       #5550F2;
  --magenta:      #A6036D;
  --white:        #FFFFFF;

  --font-display: "Tajawal","Poppins",system-ui,sans-serif;
  --font-body:    "Poppins",system-ui,sans-serif;
  --font-mono:    "JetBrains Mono",ui-monospace,monospace;

  --container:    1240px;
  --gutter:       clamp(20px, 5vw, 48px);
  --radius:       14px;
  --radius-lg:    24px;

  --ease:         cubic-bezier(.22, 1, .36, 1);
  --ease-in-out:  cubic-bezier(.65, 0, .35, 1);
  --dur-micro:    120ms;
  --dur-base:     250ms;
  --dur-slow:     400ms;
  --dur-reveal:   800ms;
}

/* 2 — tokens semânticos: tema escuro (default) */
:root, :root[data-theme="dark"] {
  color-scheme: dark;
  --bg:        #0B0B0B;
  --surface:   #111111;
  --surface-2: #181818;
  --line:      rgba(255,255,255,.10);
  --heading:   #FFFFFF;
  --text:      #F2F2F2;
  --text-muted: #A6A6A6;
  --accent:    var(--green);
}

/* 3 — tema claro */
:root[data-theme="light"] {
  color-scheme: light;
  --bg:        #FFFFFF;
  --surface:   #F5F5F3;
  --surface-2: #EBEBE7;
  --line:      rgba(21,21,21,.12);
  --heading:   #151515;
  --text:      #232323;
  --text-muted: #5C5C5C;
  --accent:    var(--green-ink);
}

JSON

Para Figma, Style Dictionary ou qualquer pipeline de tokens.

{
  "brand": {
    "green":   { "value": "#80DC10", "type": "color" },
    "ink":     { "value": "#151515", "type": "color" },
    "white":   { "value": "#FFFFFF", "type": "color" },
    "greyDark":{ "value": "#3C3C3C", "type": "color" },
    "greyLight":{ "value": "#C6C6C6", "type": "color" },
    "violet":  { "value": "#5550F2", "type": "color" },
    "magenta": { "value": "#A6036D", "type": "color" }
  },
  "font": {
    "display": { "value": "Tajawal",        "weights": [700, 800, 900] },
    "body":    { "value": "Poppins",        "weights": [300, 400, 500, 600] },
    "mono":    { "value": "JetBrains Mono", "weights": [400, 500] }
  },
  "space":  { "scale": [4, 8, 12, 16, 24, 32, 48, 64, 96, 128] },
  "radius": { "scale": [0, 8, 14, 24, 9999] },
  "motion": {
    "ease":     "cubic-bezier(.22,1,.36,1)",
    "easeInOut":"cubic-bezier(.65,0,.35,1)",
    "duration": { "micro": 120, "base": 250, "slow": 400, "reveal": 800 }
  }
}

Mapa de decisão

Nunca escrever um hex diretamente num componente. Escolher pelo papel:

A última linha é a excepção que confirma a regra: o verde de preenchimento não é semântico. Um bloco verde é verde nos dois temas — é a marca, não a interface.