Brandbook Salll

01 · A marca

Salll com três L. Sempre em minúscula no logo.

O nome se escreve Salll em texto corrido (maiúscula inicial) e salll no logotipo, que é desenhado em caixa baixa. Nunca SALLL em caixa alta, nunca Sall, nunca Sal.

O que a Salll é

Empresa de execução de prateleira digital. Monitora e executa a página de produto da marca em cada varejo, todo dia, até o combinado estar no ar e a página estar no nível máximo.

A promessa

Três pilares, nesta ordem: Conformidade é o piso, Competitividade é o placar, Performance é o teto. E o teto virou o jogo.

O que se contrata

Duas ações: Monitorar (enxergamos, priorizamos) e Executar (criamos, acionamos, confirmamos). Entrada única: Diagnóstico Salll.

Hierarquia de nomes. Metodologia Salll é a mãe. Dentro dela vivem os métodos: Método Salll VALOR (imagens), Método Salll VERBO (títulos e descrições) e Método Salll VITRINE (conteúdo enriquecido). Método nunca é chamado de metodologia. A palavra "pilar" fica reservada aos três pilares, nada mais.

02 · Logo

Duas versões do logotipo e um símbolo.

O logotipo é a palavra "salll" acompanhada do símbolo: quatro camadas empilhadas dentro de um quadrado de cantos arredondados. A escolha da versão depende do fundo, nunca do gosto.

Logo escuro

logo-salll-escuro.png · 849 × 363 · fundo claro

Baixar

Logo branco

logo-salll-branco.png · 849 × 363 · fundo escuro

Baixar

Ícone

app, avatar, favicon grande

Baixar

Favicon 192

favicon-192.png · aba do navegador

Baixar

Sobre laranja

só a versão branca funciona aqui

Área de proteção

A margem livre em volta do logo é a altura do símbolo em cada lado. Nada entra nessa faixa: nem texto, nem foto, nem borda de card, nem outro logo.

margem = altura do símbolo

Tamanho mínimo

Abaixo destes tamanhos os três L colam visualmente e o símbolo perde as camadas. Se o espaço for menor que o mínimo, usar o ícone sozinho.

Aplicação	Mínimo
Logotipo em tela	22 px de altura
Logotipo impresso	12 mm de largura
Ícone em tela	16 px
Abaixo disso	usar só o ícone, nunca o logotipo apertado

Contraste manda na escolha. Fundo claro pede o logo escuro. Fundo escuro, foto ou laranja pedem o branco. Na dúvida entre os dois, escolher o que dá mais contraste, não o que é mais bonito.

O que não fazer com o logo

Não distorcerEscala sempre proporcional. Nada de esticar, achatar ou condensar.

Não girarO logo é horizontal. Sem inclinação, sem vertical, sem arco.

Não recolorirAs camadas do símbolo têm ordem e cor fixas. Só existem as duas versões oficiais.

Não aplicar efeitoSem sombra, contorno, brilho, bisel, gradiente por cima ou 3D.

Não jogar sobre foto agitadaSobre imagem, usar o branco com véu escuro por baixo (74% de preto resolve).

Não usar a versão errada de fundoFundo colorido escuro pede o logo branco. O escuro só vive em fundo claro.

03 · Símbolo e assinatura

As camadas empilhadas e a barra de identidade.

O símbolo lê camada sobre camada: a prateleira digital tem níveis, e a Salll trabalha em todos. A mesma sequência de cor vira a barra que assina toda peça.

Símbolo

Quadrado de cantos arredondados com quatro faixas empilhadas, de cima para baixo: dourado, laranja, vermelho, roxo. A ordem é fixa. O símbolo pode viver sozinho quando a marca já foi apresentada na peça.

Barra de identidade

Cinco faixas, ordem fixa: laranja, dourado, vermelho, roxo, azul. Altura de 5 px em tela. Vai no topo da página, no rodapé do slide ou na borda do documento. As proporções entre as faixas podem variar, a ordem não.

PROPORÇÃO IGUAL · PROPORÇÃO LIVRE

04 · Cor

Cor identifica território, não decora.

Esta é a regra mais fácil de quebrar e a que mais custou correção. Cada cor tem um trabalho. Quando duas cores disputam o mesmo card, quem lê perde a referência de onde está.

A regra. O acento de um card ou de uma seção é a cor da ação ou página. O pilar aparece só na tag de pilar. Máximo de duas cores por card. Clique em qualquer amostra para copiar o hex.

Paleta de marca

Salll Orange

#FE7021

A cor da marca. CTA, home, pilar Performance. É a que pede o clique.

Salll Gold

#FBA839

Ação Executar, verbo Criar, páginas de metodologia. Realização e entrega.

Salll Red

#E4384A

Só alerta, ruptura e erro. Nunca é identidade de seção.

Salll Purple

#7F61A4

Ação Monitorar, verbo Enxergar. Vigília e visão.

Salll Blue

#5E50C1

Verbo Priorizar, links e destaque tecnológico. Não confundir com o azul do pilar.

Teal

#17A398

Pilar Conformidade. Confiança, verificado, o piso da operação.

Blue 2

#6E7BD8

Pilar Competitividade. Inteligência e estratégia, o placar do jogo.

Pink

#F26386

Reservado ao Método Salll VITRINE. Bloco inteiro ou nada, nunca palavra solta.

Apoio e estado

Green

#25D366

WhatsApp, confirmação, verbo Confirmar.

Slate

#8B97A8

Camada de dado: gráficos neutros, séries sem território.

Gold escuro

#E0951F

Dourado sobre fundo claro, quando o #FBA839 reprova em contraste.

Green escuro

#1FA958

Verde sobre fundo claro, mesma função do dourado escuro.

Fundos e texto

Fundo

#141414

Fundo padrão de toda peça digital.

Fundo profundo

#0E0E10

Hero, rodapé, blocos de respiro.

Card

#1E1E1E

Superfície de card sobre o fundo padrão.

Texto

#F0F0F0

Texto principal sobre escuro. Secundário #9A9A9A, apagado #5C5C5C.

Tints para fundo claro e impressão

Orange tint

#FFF1E9

Gold tint

#FFF8EC

Red tint

#FEECEE

Blue tint

#EFEFF9

Quem usa cada cor

Entidade	Cor	Por quê
Marca e CTA	Laranja	Energia e ação. É a cor que pede o clique.
Pilar Conformidade	Teal	Confiança, verificado. O piso.
Pilar Competitividade	Azul 2	Inteligência e estratégia. O placar.
Pilar Performance	Laranja	A cor da marca no pilar herói. O teto que virou o jogo.
Ação Monitorar	Roxo	Vigília e visão. Herda do verbo Enxergar.
Ação Executar	Dourado	Realização e entrega. Herda do verbo Criar.
Método Salll VITRINE	Rosa	Território exclusivo. Aparece como bloco inteiro, nunca solto.
Alerta e ruptura	Vermelho	Estado, não identidade. Não existe seção vermelha.

As duas exceções declaradas. O ciclo dos cinco verbos (Enxergar, Priorizar, Criar, Acionar, Confirmar) e a galeria V/A/L/O/R do Método Salll VALOR mantêm paleta própria. Ali a cor codifica sequência, não território. Fora dessas duas, a regra vale sem exceção.

Como o acento vira variável por página

<body style="--acc:var(--purple)">   monitorar
<body style="--acc:var(--gold)">     executar, metodologia
<body style="--acc:var(--orange)">   home, serviços, contato

.stitle .acc, .card-h .acc { color: var(--acc, var(--orange)) }

05 · Tipografia

Três famílias, três trabalhos distintos.

Nenhuma família faz o trabalho da outra. Título não é escrito em Inter, corpo de texto não é escrito em Outfit, e Space Mono nunca vira parágrafo.

Outfit

Display

Aa Salll

Títulos, números grandes, botões, nomes de produto e de módulo. É a voz alta da marca.

400 · 500 · 600 · 700 · 800 · 900

Inter

Corpo

Aa Salll

Todo texto corrido, parágrafo de proposta, corpo de card, legenda longa. Feita para ler, não para impressionar.

300 · 400 · 500 · 600 · 700

Space Mono

Dado e label

Aa Salll

Kickers, rótulos de seção, chips, datas, códigos, unidades. Sempre em caixa alta com espaçamento de 1.5 a 2.8 px.

400 · 700

Escala

H1 · 900 · -2.6px

Prateleira digital

H2 · 800 · -1.2px

Prateleira digital

H3 · 700 · -0.3px

Prateleira digital

Corpo · Inter 400

Prateleira digital

Label · Mono 700

PRATELEIRA DIGITAL

Regras de composição

O quê	Como
Entrelinha do corpo	1.6 a 1.75. Texto de proposta puxa para 1.75.
Tracking de título	Negativo. Quanto maior o corpo, mais negativo: -2.6px em capa, -0.3px em H3.
Largura de linha	Máximo 70 caracteres. Acima disso o olho perde a linha de retorno.
Caixa alta	Só em Space Mono e em botão. Nunca em título nem em parágrafo.
Itálico	Só em citação. Não usar para dar ênfase, isso é trabalho do peso.
Fallback	`system-ui, sans-serif`. Em e-mail e cliente que não carrega fonte externa: Arial ou Helvetica.

Carregamento

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800;900&family=Inter:wght@300;400;500;600;700&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet">

06 · Fundos

Escuro por padrão. Vivo quando precisa respirar.

A Salll é uma marca escura. Fundo claro existe para documento impresso e para mostrar produto do cliente. Os três efeitos vivos abaixo desligam sozinhos em prefers-reduced-motion.

Wallpaper oficial

A massa de luz da marca, congelada em imagem: laranja no alto, vermelho na borda, azul embaixo, tudo dissolvendo no preto. É o fundo de capa de deck, de tela de apresentação, de plano de fundo de reunião e de peça que precisa de presença sem competir com texto.

Original	4096 × 2304 · PNG · impressão e telão
Web	2560 × 1440 · WebP · 19 KB
Como usar	A luz fica de um lado, o texto do outro. Sobre a área acesa, véu escuro antes de escrever.
Não fazer	Espelhar, recolorir, cortar só a parte colorida ou usar como textura repetida.

PNG 4K WebP web

Chumbo #141414 · padrão

Profundo #0E0E10 · hero

Claro #F8F9FA · impresso

Gradiente de marca

Wallpaper vivo

.bg-drift

Três gradientes radiais derivando em 24 s atrás de seções escuras. A cor vem da ação da página, via --fx-a/-b/-c. Nunca fixa.

Massa orgânica

.live-blob

Massa desfocada que muda de forma (15 s) e de posição (26 s). Vive no hero das páginas internas. Blur 56 px, opacidade 42%.

Vídeo com véu

Vídeo de hero

Sempre com véu de rgba(15,15,15,.74) por cima e degradê para o fundo na base. No celular o vídeo some e fica o poster.

Fundo nunca disputa com o conteúdo. Se o texto por cima precisa de peso extra ou de sombra para ser lido, o fundo está errado, não a tipografia. Foto de produto do cliente sempre em fundo neutro, sem efeito vivo por baixo.

07 · Ícones

Traço geométrico, uma cor só por ícone.

Ícone Salll é desenho de linha, não de preenchimento. Herda a cor do texto ao redor via currentColor, o que faz o mesmo arquivo funcionar em qualquer território de cor.

Enxergar

Priorizar

Criar

Acionar

Confirmar

Página

Busca

Placar

Conformidade

Competitividade

Performance

Varejo

Alerta

Dado

Campanha

Catálogo

Especificação

Grade24 × 24

Traço1.75 px

Pontasround

Juntasround

Preenchimentonone

CorcurrentColor

Margem interna de 2 px em toda a grade: nenhum traço encosta na borda do viewBox. Tamanhos de uso: 16, 20, 24, 34 e 48 px.

O que não fazer

Sem duas cores	Ícone bicolor vira ilustração e briga com a regra de território.
Sem preenchimento	Sólido só no símbolo da marca e nas bonequinhas.
Sem emoji no lugar de ícone	Vale para peça e para código.
Sem misturar biblioteca	Ícone de outro pacote entra só se for redesenhado nesta grade.

08 · Personagens

Dois personagens, nunca na mesma peça.

A caricatura 3D e as bonequinhas geométricas são famílias distintas, com trabalhos distintos. Misturar as duas na mesma peça faz a marca parecer duas marcas.

Caricatura 3D

A cara da marca. Jaqueta puffer com as faixas da paleta na ordem, calça preta, tênis branco. Aparece em capa de ebook, abertura de deck, post de LinkedIn e material de palestra. Sempre em fundo claro ou recortada.

Poses

Apresentando, comemorando, corpo inteiro. Sempre gesto aberto, expressão positiva. Nada de braço cruzado, dedo em riste ou expressão de cobrança: a Salll não fala de cima.

Bonequinhas geométricas

Doodle plano: cabeça redonda, corpo em forma simples, braço em arco fino, sorriso de uma linha. Cada uma numa cor da paleta. Servem para diagrama, explicação de método, produto e ilustração de time. Nunca ganham detalhe, textura nem sombra.

O tom que o personagem carrega. Não é descanso, é paz para fazer o que importa. O gestor que aparece na cena está com o problema resolvido e olhando para frente, não deitado na rede.

09 · Componentes

As peças que se repetem em toda superfície.

Site, deck, proposta, ebook e estudo usam os mesmos componentes. Quem constrói peça nova copia daqui em vez de inventar variação.

Botões

Diagnóstico Salll Ver como funciona

Primário laranja para a ação única da página. Secundário em contorno para tudo mais. Outfit 700, caixa alta, tracking 1.2 px, raio 8 px. Nunca dois primários na mesma dobra.

Kicker e chips

Prateleira digital Conformidade Competitividade Performance

Kicker abre a seção em Space Mono com tint da cor da página. Chip de pilar usa a cor do pilar e só aparece dentro do card, nunca no título da seção.

Número de destaque

320

páginas monitoradas

Outfit 900 na cor da página, rótulo em Space Mono. Número sempre verificável: cálculo de esforço, nunca promessa de resultado.

Card com acento

Borda superior de 3 px na cor do território. Fundo #1E1E1E, borda de 1 px em branco a 7%, raio 14 px, respiro interno de 22 px.

Barra de identidade

Assina a peça sem precisar de logo. Topo da página, rodapé do slide, borda lateral do documento impresso.

Token	Valor	Onde
Raio	`6px` chip · `8px` botão · `12–14px` card	Nada com canto vivo, nada com pílula em card.
Borda	`1px rgba(255,255,255,.07)`	Linha padrão. Em hover sobe para `.14`.
Respiro de seção	`92–104px` vertical	Em tela. No impresso, margem de 20 mm.
Largura de conteúdo	`1140px`	Coluna central de toda página.
Sombra	`0 12px 28px rgba(254,112,33,.28)`	Só em hover de botão primário. Card não tem sombra.
Transição	`.2s–.25s ease`	Tudo que muda com o mouse.

10 · Voz e escrita

Português máximo. Número verificável. Zero travessão.

A Salll fala com gestor de trade e de e-commerce, que identifica métrica inventada na hora. A voz é direta, específica e honesta sobre o limite do que a operação entrega.

Não escrever assim

"Aumente suas vendas em 30%"
"Nossa solução end-to-end de digital shelf"
"Melhore o score de compliance do seu PDP"
"Somos líderes em transformação digital"
"Otimizamos a jornada omnichannel do consumidor"
Travessão no meio da frase

Escrever assim

"40 SKUs × 8 varejos = 320 páginas para acompanhar"
"Monitoramos e executamos a prateleira digital"
"Sobe a Nota Salll da sua página de produto"
"Acionamos o varejo, cobramos o prazo e confirmamos"
"O combinado está no ar? Com prova fotográfica datada"
Vírgula, dois-pontos ou ponto, conforme a função

As cinco regras de escrita

1. Zero travessão	Cada um vira vírgula, dois-pontos ou ponto conforme a função na frase. Não é apagar o caractere, é reescrever.
2. Número com fonte	Cálculo de esforço em vez de promessa de resultado. Se for estimativa, dizer que é.
3. Sem prometer venda	A Salll dá ferramenta para o básico sair perfeito. Quem promete "vender mais" perde a credibilidade na primeira reunião.
4. Nunca depreciar o próprio produto	Vender um módulo diminuindo outro é confissão de portfólio fraco.
5. Zero emoji	Em peça, em código e em nome de arquivo.

Glossário português máximo

O termo em português lidera. A sigla vira ponte de jargão na primeira menção, entre parênteses, e some depois. Nome próprio de plataforma não se traduz.

Evitar	Usar
PDP	página de produto (PDP)
SERP	página de busca (SERP)
share of search	participação na busca
score	Nota Salll
dashboard	painel
compliance	conformidade
out of stock	ruptura, sem estoque
digital shelf	prateleira digital
JBP	plano anual com o varejo (JBP)
A+ genérico	conteúdo enriquecido

Permanecem como estão: Amazon, Rufus, Buy Box, Brand Registry, Mercado Livre, e as siglas de disciplina com explicação na primeira menção (SEO, GEO, AEO, ROAS, CTR, SKU, GTIN).

Nomes oficiais

Nome antigo	Nome atual
Salll PDP	Salll Página de Produto
Salll SERP	Salll Busca
Salll Insight	Salll Inteligência
Salll Gestão de Marketplaces	Salll Operação
Salll Scan	Diagnóstico Salll
Score Salll, ECHO Score	Nota Salll (0 a 100)
Score Compliance	Nota de Conformidade
Método VALOR	Método Salll VALOR (o "Salll" nunca sai)

Assinatura oficial. "Enxergamos. Priorizamos. Criamos. Acionamos. Confirmamos." Cinco verbos, ordem fixa, ponto entre eles. Não abreviar, não reordenar, não trocar por sinônimo.

11 · Arquivos

Baixe daqui, não do Google.

Logo achado em busca de imagem é sempre a versão velha, em baixa e com fundo branco queimado. Estes são os arquivos oficiais.

Pacote completo

Logos, ícone, favicons, personagens e tokens de cor num arquivo só.

Baixar .zip

Logos

Versão escura, versão branca, ícone e favicons em PNG com fundo transparente.

Logo escuro Logo branco Ícone

Tokens de cor

Variáveis CSS prontas para colar no :root de qualquer projeto Salll.

tokens.css tokens.json

Personagens

Caricatura 3D em três poses e as bonequinhas geométricas, em PNG transparente.

Corpo inteiro Apresenta Bonequinhas

Fundos

Wallpaper oficial em 4K para telão e impressão, e a versão WebP leve para web.

Wallpaper 4K Wallpaper WebP

Fontes

As três famílias são gratuitas no Google Fonts. Baixe do próprio Google para instalar no computador.

Outfit Inter Space Mono

Precisa de algo que não está aqui

Peça de formato novo, versão vetorial, aplicação em material de terceiro ou uso da marca por parceiro.

Falar com a Salll