# Biglink · contexto de marca e assets

Arquivo de contexto para assistente de código (Claude Code, Cursor, Copilot e
afins) e para quem vai integrar a marca Biglink em qualquer projeto. Descreve
onde cada asset mora no CDN, o padrão de URL de cada família e as regras de
marca que valem em toda implementação.

- CDN: `https://cdn.biglink.io`
- Prefixo de versão: `/brand/v1/`
- Gerado em 2026-10-15 a partir dos arquivos realmente publicados

Este arquivo é gerado pelo `gerar-paginas.py` junto com as páginas do CDN, a
partir do conteúdo do disco. Não edite à mão: a próxima geração desfaz.

Duas cópias, mesmo conteúdo: `https://cdn.biglink.io/llms.txt`, que é onde os agentes
procuram, e `https://cdn.biglink.io/CONTEXTO.md`, para leitura humana.

---

## Como usar

Aponte o assistente para `https://cdn.biglink.io/llms.txt` ou cole este arquivo no contexto.

Três regras ao gerar código com assets da Biglink:

1. Monte a URL a partir dos padrões deste arquivo. Não invente caminho nem
   nome de arquivo: se o nome não está nas listas abaixo, ele não existe.
2. Prefira o token de cor e a variável CSS ao valor cru. `var(--bl-bangladesh)`
   envelhece melhor que `#03614d` espalhado pelo projeto.
3. Não copie asset para dentro do repositório. Consuma pela URL do CDN, que
   tem cache imutável de um ano e CORS liberado.

## Regras de marca que não se negociam

- Não recolorir, distorcer, girar, aplicar sombra, contorno ou gradiente no
  logotipo. Use um dos arquivos prontos na cor que precisa.
- Não recriar o símbolo, nem redesenhar a letra. Não usar o logo dentro de
  frase corrida como se fosse palavra.
- Área de proteção em volta do logo equivalente à altura do símbolo.
- Caribbean `#00ed82` tem contraste 1,56:1 sobre branco e Mountain `#2bc294`
  tem 2,27:1. Nenhum dos dois serve para texto sobre fundo claro. Para texto,
  use Bangladesh `#03614d`, que dá 7,44:1. Os dois claros servem para fundo,
  preenchimento, gráfico e detalhe.
- Fundo escuro pede o logo `white` ou `caribbean`. Fundo claro pede
  `bangladesh` ou `rich-black`.
- Onest nos títulos e na interface. Inter no texto corrido. Nunca o contrário.
- Em aplicação que aceita animação, o logo pulsa: use `.bl-pulsar` da folha
  `/brand/v1/logos/logo.css`. Logo parado em produto está fora do padrão. Em
  e-mail é o oposto: sempre estático, porque cliente de e-mail remove animação.
- A marca é de propriedade exclusiva da Biglink AI Brasil LTDA. Os arquivos
  serem públicos não é licença de uso livre: valem os termos em
  `https://cdn.biglink.io/direitos`.

## Árvore geral

```
cdn.biglink.io/
└── brand/v1/
    ├── tokens/          cores da marca em CSS e em JSON
    ├── fontes/          Onest e Inter variáveis, mais o CSS de @font-face
    ├── logos/
    │   ├── logo.css     o logo em CSS: forma, cor, tema e a batida de coração
    │   ├── svg/         15 arquivos, primeira escolha para tela
    │   ├── png/         15 arquivos, para onde SVG não entra
    │   ├── webp/        15 arquivos em 2x, para web pesada de imagem
    │   └── sobre-fundo/ 120 composições prontas, quadrado e 16x9
    ├── icones/
    │   ├── tabler/      6.184 icones, o acervo atual
    │   │   ├── outline/ 5.130, em svg (8 cores) e png (7 cores x 32/128)
    │   │   └── filled/  1.054, mesma estrutura
    │   ├── svg/         acervo Feather antigo, CONGELADO
    │   └── png/         idem
    ├── favicons/        conjunto completo, mais head-tags.html
    ├── email/           logotipo em PNG para HTML de e-mail
    ├── assinatura/      logotipo da assinatura de e-mail
    ├── apps/            ícone de app sobre fundo, 21 arquivos
    ├── backgrounds/     fundos de videochamada
    └── docs/            brand guide e paleta em PDF
```

Cache: tudo sob `/brand/**` responde com
`Cache-Control: public, max-age=31536000, immutable` e
`Access-Control-Allow-Origin: *`. Asset publicado nunca muda de conteúdo. Se
mudar, muda de nome ou de prefixo de versão.

---

## 1. Cores

Duas formas de consumir. CSS pronto:

```html
<link rel="stylesheet" href="https://cdn.biglink.io/brand/v1/tokens/cores.css">
```

Ou o JSON, para gerar tema em build, Tailwind, Figma ou app nativo:

```
https://cdn.biglink.io/brand/v1/tokens/cores.json
```

O CSS declara `--bl-<nome>` para cada cor e ainda um conjunto de papéis
semânticos, que é por onde você deve começar em vez de escolher cor a cor:

```
--bl-texto        --bl-fundo         --bl-borda
--bl-texto-suave  --bl-fundo-suave   --bl-marca
--bl-texto-fraco
```

### Primárias

| Nome | Token CSS | Hex | RGB | Pantone |
|---|---|---|---|---|
| rich-black | `--bl-rich-black` | `#262626` | 38, 38, 38 | 426 |
| bangladesh | `--bl-bangladesh` | `#03614d` | 3, 97, 77 | 3292 |
| mountain | `--bl-mountain` | `#2bc294` | 43, 194, 148 | 2240 U |
| caribbean | `--bl-caribbean` | `#00ed82` | 0, 237, 130 | 7487 U |
| off-white | `--bl-off-white` | `#f2f7f5` | 242, 247, 245 | Cool Grey |

### Secundárias

| Nome | Token CSS | Hex | RGB | Pantone |
|---|---|---|---|---|
| pine | `--bl-pine` | `#05302b` | 5, 48, 43 | 627 U |
| basil | `--bl-basil` | `#0a4538` | 10, 69, 56 | 3308 |
| forest | `--bl-forest` | `#09634e` | 9, 99, 78 | 555 |
| frog | `--bl-frog` | `#17876e` | 23, 135, 110 | 569 |
| mint | `--bl-mint` | `#2ea88c` | 46, 168, 140 | 3268 |
| pistachio | `--bl-pistachio` | `#abccc2` | 171, 204, 194 | 5503 |
| stone | `--bl-stone` | `#707d7d` | 112, 125, 125 | 418 U |

## 2. Tipografia

```html
<link rel="stylesheet" href="https://cdn.biglink.io/brand/v1/fontes/fontes.css">
```

O arquivo declara os dois `@font-face` e expõe `--bl-fonte-titulo` e
`--bl-fonte-texto`. As duas são fontes variáveis, então um arquivo cobre a
faixa de peso 100 a 900 inteira.

| Uso | Família | Arquivo |
|---|---|---|
| Título e interface | Onest | `https://cdn.biglink.io/brand/v1/fontes/onest-variable.woff2` |
| Texto corrido | Inter | `https://cdn.biglink.io/brand/v1/fontes/inter-variable.woff2` |

Licença das duas: SIL Open Font License 1.1. Permite uso comercial, modificação
e incorporação. Proíbe vender a fonte sozinha e exige que o aviso de copyright
e o texto da licença acompanhem cada cópia redistribuída. Consumir pela URL do
CDN não é redistribuir; copiar o `.woff2` para dentro de um projeto é, e aí o
arquivo de licença precisa ir junto:

```
https://cdn.biglink.io/brand/v1/fontes/LICENCA-ONEST.txt
https://cdn.biglink.io/brand/v1/fontes/LICENCA-INTER.txt
```

Pilha de fallback recomendada:
`'Onest', 'Segoe UI', Arial, Helvetica, sans-serif`.

Em e-mail, WebFont não é confiável. Use
`font-family:'Onest',Arial,Helvetica,sans-serif` e aceite o fallback.

## 3. Logotipos

Padrão de URL:

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

Os `<arquivo>` disponíveis, iguais nos três formatos:

```
logo-horizontal-bangladesh      logo-horizontal-caribbean       logo-horizontal-mountain
logo-horizontal-rich-black      logo-horizontal-white           logo-vertical-bangladesh
logo-vertical-caribbean         logo-vertical-mountain          logo-vertical-rich-black
logo-vertical-white             simbolo-bangladesh              simbolo-caribbean
simbolo-mountain                simbolo-rich-black              simbolo-white
```

A regra de nome é `<forma>-<cor>`, com forma em `horizontal`, `vertical` ou
`simbolo`, e cor em `bangladesh`, `caribbean`, `mountain`, `rich-black` ou
`white`.

Composições sobre fundo, para post, capa e thumbnail, em
`/brand/v1/logos/sobre-fundo/`, 120 arquivos WebP no padrão:

```
fundo-<cor_do_fundo>--<forma>_<cor_do_logo>_<formato>.webp
formato: quadrado | retangular_16x9
```

Exemplo de uso:

```html
<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, e com
`alt="Biglink"` quando o logo é a identificação, ou `alt=""` quando é decoração
ao lado do nome escrito.

### O logo pulsa

O símbolo é um coração e, em qualquer aplicação que aceite animação, ele bate.
É regra de marca, não enfeite: **produto nosso com logo parado está fora do
padrão**. A única exceção é e-mail, que é sempre estático porque cliente de
e-mail remove animação de CSS.

Uma folha de estilo entrega forma, cor, tema e batida:

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

<!-- o logo completo -->
<span class="bl-logo bl-logo--horizontal bl-pulsar" role="img" aria-label="Biglink"></span>

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

Classes:

```
forma  (obrigatoria em .bl-logo): .bl-logo--horizontal .bl-logo--vertical .bl-logo--simbolo
cor    (sem nenhuma, segue o tema): .bl-logo--bangladesh .bl-logo--caribbean
                                    .bl-logo--mountain .bl-logo--rich-black
                                    .bl-logo--branco .bl-logo--herdar
altura: .bl-logo--p (24px) .bl-logo--m (40px) .bl-logo--g (64px)
batida: .bl-pulsar .bl-pulsar--devagar (3s) .bl-pulsar--rapido (1.2s)
```

`.bl-logo` monta o logo como máscara CSS: a silhueta vem do SVG e a cor vem de
uma variável, então uma classe cobre as três formas em qualquer cor. O preço é
que elemento mascarado não tem `alt`, por isso o `role="img" aria-label"`, e se
o SVG não carregar ele fica invisível em vez de quebrado. Em cabeçalho crítico,
prefira `<img>` com `.bl-pulsar`.

Tema: sem âncora nenhuma o logo segue o sistema pelo `prefers-color-scheme`.
Para um seletor claro/escuro, qualquer uma destas âncoras no `<html>` ou num
container vence o sistema nos dois sentidos: `data-tema`, `data-theme`, ou as
classes `.dark` e `.bl-claro`. A classe `.dark` está na lista porque é o que
Tailwind e Flux usam.

A animação respeita `prefers-reduced-motion: reduce` e para sozinha. Nunca
copie o `@keyframes` para dentro de um projeto: consuma a folha pela URL, senão
a sua cópia congela quando a batida mudar aqui.

## 4. Ícones

São **6184 ícones do Tabler**, em 41 categorias, licença MIT, todos no
grid de 24 por 24 com traço 1,75. Inclui as marcas e redes sociais, na
categoria Brand, com prefixo `brand-` no nome.

Padrão de URL:

```
https://cdn.biglink.io/brand/v1/icones/tabler/<estilo>/svg/<cor>/<nome>.svg
https://cdn.biglink.io/brand/v1/icones/tabler/<estilo>/png/<cor>/<tamanho>/<nome>.png
```

- `<estilo>`: `outline` (5.130) ou `filled` (1.054). **Obrigatório.** Os
  preenchidos têm exatamente os mesmos nomes dos contornos, então o estilo é
  segmento do caminho e não sufixo do nome. Omitir dá 404.
- `<cor>`: `rich-black`, `bangladesh`, `mountain`, `stone`, `caribbean`, `white`, `off-white`
- `<cor>` só em SVG: `currentcolor`, que herda a cor do CSS
- `<tamanho>` em PNG: `32`, `128`

O acervo anterior, 288 ícones do Feather, segue publicado e **congelado** em
`/brand/v1/icones/svg/` e `/png/`, porque comunicado já enviado aponta para lá.
Não use em peça nova. Vários nomes mudaram: `globe` virou `world`,
`check-circle` virou `circle-check`, `zap` virou `bolt`, `log-in` virou
`login`, e as redes ganharam o prefixo `brand-`.

Em web, prefira `currentcolor`, seja embutindo o SVG, seja por máscara CSS. É
um arquivo só para todas as cores:

```css
.icone{
  width:24px; height:24px;
  background: var(--bl-bangladesh);
  -webkit-mask: url(https://cdn.biglink.io/brand/v1/icones/tabler/outline/svg/currentcolor/check.svg) center/contain no-repeat;
          mask: url(https://cdn.biglink.io/brand/v1/icones/tabler/outline/svg/currentcolor/check.svg) center/contain no-repeat;
}
```

As pastas por cor existem para onde não dá para controlar CSS: e-mail,
documento e apresentação. Em e-mail, use PNG, porque Outlook para desktop não
renderiza SVG. Baixe o PNG de 32 e exiba em 16, para ficar nítido em retina:

```html
<img src="https://cdn.biglink.io/brand/v1/icones/tabler/outline/png/stone/32/world.png"
     width="16" height="16" alt="" style="display:block; border:0;">
```

As 41 categorias, com quantos ícones cada uma:

```
Animals (22)                  Arrows (433)                  Badges (37)
Brand (411)                   Buildings (102)               Charts (53)
Communication (128)           Computers (48)                Currencies (76)
Database (47)                 Design (444)                  Development (69)
Devices (403)                 Document (269)                E-commerce (180)
Electrical (19)               Extensions (13)               Food (124)
Games (77)                    Gender (18)                   Gestures (17)
Health (103)                  Laundry (45)                  Letters (318)
Logic (8)                     Map (305)                     Math (90)
Media (182)                   Mood (62)                     Nature (65)
Numbers (236)                 Photography (63)              Shapes (232)
Sport (89)                    Symbols (45)                  System (913)
Text (222)                    Vehicles (121)                Version control (11)
Weather (72)                  Zodiac (12)
```

A lista completa dos 6184 nomes, com estilo e categoria, está em
`https://cdn.biglink.io/brand/v1/icones/tabler/catalogo.json`. Busque lá em vez de adivinhar
nome, e use o catálogo em `https://cdn.biglink.io/assets/icones` quando quiser procurar
visualmente.

Licença em `https://cdn.biglink.io/brand/v1/icones/tabler/LICENCA-TABLER.txt`.

## 5. Favicons e meta tags

O bloco de `<head>` pronto, com todos os caminhos já apontando para o CDN:

```
https://cdn.biglink.io/brand/v1/favicons/head-tags.html
```

Copie de lá em vez de montar à mão, porque o conjunto cobre navegador, aba,
atalho de celular, tile do Windows e prévia de link em rede social. Os
arquivos:

```
apple-touch-icon.png      browserconfig.xml         favicon-16x16.png
favicon-32x32.png         favicon-48x48.png         favicon-96x96.png
favicon.ico               favicon.svg               head-tags.html
icon-192.png              icon-512.png              icon-maskable-192.png
icon-maskable-512.png     icon-round-512.png        mstile-150x150.png
og-image.png              site.webmanifest
```

## 6. E-mail

HTML de e-mail é o ambiente mais restrito da casa. O que vale:

- Tabelas aninhadas, largura fixa de 600px, CSS inline em cada elemento
- Uma media query só, até 620px
- Botão dentro de `<table>`, nunca `<div>` com padding, por causa do Outlook
- Pré-cabeçalho oculto no topo do `<body>`
- Emoji como entidade numérica, `&#9749;` em vez do caractere direto
- Imagem sempre com `width`, `height` e `border:0`

A regra do emoji no Gmail, que quebra silenciosamente sem ela:

```css
/* o Gmail troca emoji por <img>. Sem esta regra, um display:block global
   joga o emoji para a linha de baixo sozinho. */
img[goomoji], img.goomoji{ display:inline !important; vertical-align:-2px; }
```

Logotipo para e-mail, em PNG:

```
https://cdn.biglink.io/brand/v1/email/logo-white.png       para cabeçalho escuro
https://cdn.biglink.io/brand/v1/email/logo-bangladesh.png  para cabeçalho claro
```

Redes da Biglink, para o rodapé:

| Canal | URL |
|---|---|
| Site | `https://biglink.io` |
| WhatsApp | `https://wa.me/551151981130` |
| LinkedIn | `https://www.linkedin.com/company/biglinkai` |
| Instagram | `https://www.instagram.com/biglinkai` |

## 7. Assinatura de e-mail

Ninguém monta assinatura à mão. O gerador está em
`https://cdn.biglink.io/interno/assinatura`, pede login com conta `@biglink.io` e devolve o
HTML pronto para colar no Gmail.

Logotipo da assinatura, caso precise dele em outro lugar:

```
https://cdn.biglink.io/brand/v1/assinatura/assinatura-logo@2x.png
https://cdn.biglink.io/brand/v1/assinatura/assinatura-logo.svg
```

A linha de identificação sai como `CARGO · TIME · ÁREA`, com o cargo aparecendo
só para sócio, ou `TIME · ÁREA` para todo mundo.

## 8. Fundos e ícone de app

Fundo de videochamada, em `/brand/v1/backgrounds/meet/`:

```
fundo-01.png      fundo-02.png      fundo-03.png
```

Ícone de app sobre fundo, em `/brand/v1/apps/`, no padrão
`b_<cor_do_simbolo>_fundo_<cor_do_fundo>.png`, mais `logo_232x82.png`.

## 9. Documentos

```
https://cdn.biglink.io/brand/v1/docs/brand-guidelines.pdf
https://cdn.biglink.io/brand/v1/docs/paleta-de-cores.pdf
```

## 10. Páginas do CDN

Aberto, sem login:

| URL | Página | O que tem |
|---|---|---|
| `https://cdn.biglink.io/documentos/brand-guide` | Brand Guide | O manual da marca em PDF, com aplicação, área de proteção e usos proibidos. |
| `https://cdn.biglink.io/documentos/paleta` | Paleta de Cores | As doze cores com hex, RGB, Pantone e contraste, mais o CSS e o JSON prontos. |
| `https://cdn.biglink.io/assets/fontes` | Fontes | Onest e Inter em WebFont variável, com o CSS de @font-face pronto para colar. |
| `https://cdn.biglink.io/assets/logotipos` | Logotipos | Horizontal, vertical e símbolo em cinco cores, mais 120 composições sobre fundo. |
| `https://cdn.biglink.io/assets/icones` | Ícones | 6.184 ícones do Tabler em sete cores, com busca, filtro por categoria e download. |

Com login de conta `@biglink.io`:

| URL | Página | O que tem |
|---|---|---|
| `https://cdn.biglink.io/interno/assinatura` | Assinatura de e-mail | Preencha seus dados e copie a assinatura pronta para colar no Gmail. |
| `https://cdn.biglink.io/interno/emails` | Endereços de e-mail | O que existe além de conta paga, e o formulário que monta o pedido para a área certa. |
| `https://cdn.biglink.io/interno/codigo/cores` | Cores no código | Os tokens em CSS e em JSON, os papéis semânticos e a regra de contraste. |
| `https://cdn.biglink.io/interno/codigo/fontes` | Fontes no código | O link do CSS, o @font-face na mão, a pilha de fallback e o caso do e-mail. |
| `https://cdn.biglink.io/interno/codigo/logotipos` | Logotipos no código | O padrão de URL, o logo animado em CSS com tema claro e escuro, e o caso do e-mail. |
| `https://cdn.biglink.io/interno/codigo/icones` | Ícones no código | As quatro formas de aplicar, do currentcolor à máscara CSS, e o caso do e-mail. |
| `https://cdn.biglink.io/interno/favicons` | Favicons e meta tags | O conjunto completo de ícones de app e o bloco de <head> pronto para colar. |
| `https://cdn.biglink.io/interno/contexto` | Contexto para IA | O mapa da marca em um arquivo, para dar de contexto ao Claude Code e afins. |

O login esconde a página, não o conteúdo. Todo arquivo sob `/brand/` é público
e sem autenticação por design, para que qualquer projeto consuma direto. Nunca
publique nada sigiloso ali.

---

## Licença e uso

© Biglink AI Brasil LTDA. Todos os direitos reservados.

A marca Biglink, o símbolo, o logotipo e a identidade visual são de propriedade
exclusiva da Biglink AI Brasil LTDA. Estes arquivos são publicados para uso
operacional em projetos da Biglink e por parceiros autorizados. Publicação não
é licença de uso livre.

Termos completos em `https://cdn.biglink.io/direitos`.
Dúvida sobre uso da marca ou pedido de autorização: `marca@biglink.io`.