Marca
Um balão de conversa contendo uma grade de módulos, e um desses módulos ligado por uma aresta a um nó externo. É o produto inteiro em um desenho: a conversa contém o catálogo, e o catálogo alcança o canal.
Símbolo
O painel interno e o halo do nó são vazados. O fundo passa por eles, então o símbolo funciona sobre concreto, sobre branco e sobre foto sem precisar de caixa.
Uma cor só, herdada de currentColor. Para estêncil, gravação, bordado, carimbo, fax e qualquer fundo fotográfico que engula o azul.
Logotipo e a regra das três palavras
O nome se lê Seller HUB IA, e o logotipo divide as três palavras por cor. HUB é sempre laranja: é o mecanismo, e nunca muda. SELLER e IA mudam com o fundo.
| Palavra | Fundo escuro | Fundo claro |
|---|---|---|
| SELLER | Branco sinal #F4F4F1 | Azul #173DB8 |
| HUB | Laranja #FF5400 — sempre | |
| IA | Branco sinal #F4F4F1 | Azul #173DB8 |
SELLER e IA nunca são pretos
No fundo claro eles são azuis. Preto apaga metade da identidade e deixa o laranja sozinho, o que faz a marca parecer de outro produto.
O logotipo ainda é raster
Os arquivos em assets/ são PNG. O símbolo já está vetorizado em brand-kit/marks/; o lettering precisa ser vetorizado a partir do arquivo original de design antes de qualquer aplicação impressa ou em grande formato.
Área de proteção e tamanho mínimo
A área de proteção é um módulo, a largura de um ladrilho da grade, que é 18,5% da largura do símbolo. Nada entra ali: nem texto, nem borda, nem outra marca. A medida escala junto com o símbolo, então vale igual no favicon e no adesivo de caixa.
| Peça | Tela | Impresso |
|---|---|---|
| Símbolo | 24 px | 8 mm |
| Logotipo horizontal | 120 px | 30 mm |
Abaixo do mínimo o nó azul some e o símbolo vira um balão genérico. Se não couber, use o símbolo sozinho. Nunca reduza o logotipo horizontal.
Uso proibido
Cor
As duas cores da marca já são cores de sinalização de segurança: laranja de alta visibilidade e azul de ação obrigatória. O sistema completa a família em vez de inventar uma paleta paralela.
A regra que decide tudo: campo ou tinta
Toda cor deste sistema tem um dos dois papéis, e quase todo erro de aplicação vem de trocar um pelo outro. Campo é a cor preenchendo uma área, com texto por cima. Tinta é a cor sendo o próprio texto ou traço. Uma cor pode servir de campo e falhar como tinta. É exatamente o caso do azul da marca.
#173DB8 nunca é tinta nem traço no escuro
Contra o concreto #0B0C0E ele dá 2,23:1 e reprova até como borda. Como campo com branco sinal dá 7,95:1 e passa folgado. Para traço e ícone azul no escuro, use --mandatory-stroke.
Texto sobre laranja é preto
Branco sobre #FF5400 dá 3,22:1 e reprova. Preto dá 6,52:1. É por isso que --ink-on-signal aponta para preto e não deve ser sobrescrito.
Laranja como texto: só no escuro
Sobre concreto dá 6,08:1 e serve de tinta. Sobre fundo claro dá 2,92:1 e reprova até para texto grande. No tema claro, --signal-ink vira #A83500.
Use o papel, não o primitivo
Em componente, escreva var(--signal) e var(--ink-secondary). Os primitivos --sh-* existem só para os papéis apontarem para eles. Assim o tema claro funciona de graça.
Cores da marca
Rampas
As cinco condições
Um canal de marketplace está sempre em uma destas cinco condições. Elas vêm da sinalização de segurança, e a marca já ocupa duas delas, o que significa que estado nunca precisa de uma cor estranha ao sistema.
| Condição | Campo | Tinta no escuro | Quando |
|---|---|---|---|
| Operando | #00843D | #4BD98A | Conta conectada, sincronizando sem erro. |
| Obrigatório | #173DB8 | #8EA3F2 | Falta uma ação do seller: autorizar escopo, reconectar OAuth. |
| Em curso | #FF5400 | #FF7733 | Operação rodando agora: publicando lote, atualizando ficha. |
| Atenção | #F5B700 | #FFD04A | Passou, mas com ressalva: atributo faltando, qualidade baixa. |
| Parado | #C8102E | #FF8195 | Falhou e exige intervenção. Nada avança até resolver. |
A mesma peça nos dois temas
Escuro é o padrão da identidade; claro é a variante. Nenhum componente muda de código entre os dois: o que muda são os papéis. Repare que o laranja continua campo nos dois, mas deixa de ser tinta no claro.
Texto de apoio, com um laranja legível como tinta.
Texto de apoio, com o laranja escurecido para passar no claro.
Contraste verificado
Estes números foram medidos sobre os tokens deste arquivo, não estimados. Rode node brand-kit/contrast.mjs depois de mexer em qualquer cor. Se um par cair abaixo do mínimo, o script reprova.
| Par | Tema | Razão | Mínimo | Veredito |
|---|---|---|---|---|
| Texto sobre fundo | Escuro | 17,76:1 | 4,5 | Passa |
| Texto secundário sobre fundo | Escuro | 8,60:1 | 4,5 | Passa |
| Texto terciário sobre placa | Escuro | 5,55:1 | 4,5 | Passa |
| Laranja 500 como tinta | Escuro | 6,08:1 | 4,5 | Passa |
| Preto sobre laranja 500 | Ambos | 6,52:1 | 4,5 | Passa |
| Branco sinal sobre azul 600 | Ambos | 7,95:1 | 4,5 | Passa |
| Azul 600 como tinta | Escuro | 2,23:1 | 4,5 | Proibido |
| Branco sobre laranja 500 | Ambos | 3,22:1 | 4,5 | Proibido |
| Laranja 500 como tinta | Claro | 2,92:1 | 4,5 | Proibido |
| Azul 600 como tinta | Claro | 7,95:1 | 4,5 | Passa |
Tipografia
Duas famílias, e a primeira faz o trabalho de duas. Archivo tem eixo de largura real: em 70 vira placa de corredor, em 100 vira texto corrido. Martian Mono carrega dado, e só dado.
As famílias
Doca 04
Expedição
Grotesca desenhada para sinalização e leitura em corpo pequeno. O eixo de largura é o motivo da escolha: dá placa condensada e texto normal sem trocar de família, então uma requisição de fonte serve o sistema inteiro.
D-04-C · MLB2841
--sh-space-5: 24px
Mono técnica de largura variável. Entra em endereço de doca, nome e valor de token, SKU, código de anúncio, número tabular e bloco de código. Nunca entra em título nem em texto corrido para “parecer técnico”.
Escala
Regras
Medida de 68ch no texto corrido
Use --sh-measure. Linha mais longa que isso e o olho perde o começo da próxima.
Caixa alta só em placa e etiqueta
Título de doca, rótulo e botão. Frase inteira em caixa alta não se lê, se soletra.
Mono não é fantasia
Martian Mono entra onde há dado, código, medida ou endereço. Um parágrafo em mono porque o produto é técnico é o erro mais comum deste sistema.
Nada de largura abaixo de 70
Archivo vai até 62, mas abaixo de 70 as contrafomas fecham e a placa some no corpo pequeno.
Espaço e grade
Base de 4px, como marcação de piso. Grupo apertado, separação generosa, e sempre mais espaço acima de um título do que abaixo: é o espaço que agrupa, não a linha.
Escala
Medidas de layout
| Token | Valor | Uso |
|---|---|---|
--sh-shell-max | 1320px | Largura máxima do corredor. |
--sh-gutter | 20–56px | Margem lateral, fluida. |
--sh-measure | 68ch | Medida do texto corrido. |
--sh-measure-tight | 46ch | Chamada, legenda, coluna estreita. |
--sh-tap-min | 44px | Alvo de toque mínimo. |
Um ritmo só na página inteira
Escolha os degraus e repita. Um trecho denso paga um trecho calmo. Variação de densidade é o que dá cadência; valor solto de espaçamento é o que dá bagunça.
Forma
O raio não foi escolhido, foi medido: o ladrilho do símbolo tem 20 de raio em 93 de lado. Toda superfície quadrada do sistema segue essa proporção.
Raio · a regra do módulo
Superfície quadrada usa 21% do lado
--sh-radius-module. Ladrilho de 64px pede 13px; de 24px pede 5px. É o que mantém o parentesco com o símbolo quando a peça é quadrada. Superfície retangular usa a escala fixa acima.
Linha e elevação
Separa o que já está agrupado. É o padrão.
Divide zonas: cabeçalho de tabela, limite de seção.
Marcação de piso. Carrega estado no topo da doca, nunca na lateral, e nunca em texto ou alerta.
Placa apoiada. Quase nada: a sinalização é plana.
Placa suspensa. Cabeçalho fixo, menu aberto. Coisas que realmente pairam sobre o corredor.
Painel modal. Um por vez na tela, e só quando a tarefa exige foco protegido.
Sombra tem deslocamento e desfoque
Halo colorido sem deslocamento é decoração, não profundidade. Se a peça não paira de verdade, ela não tem sombra.
Fita de risco
A peça assinatura. Marca limite: topo de página, fim de seção crítica, borda de zona restrita. Listra a −45°, passo de 22px. Nunca preenche área, nunca vira textura de fundo, nunca aparece duas vezes na mesma dobra.
Laranja marca limite operacional. Azul marca limite de autorização: a faixa que separa o que exige consentimento explícito do seller.
Movimento
Uma gramática só: a coisa avança no trilho e assenta. Nunca aparece do nada, nunca pulsa, nunca chama atenção sem ter mudado de estado.
| Token | Valor | Para quê |
|---|---|---|
--sh-dur-snap | 140ms | Resposta de controle: hover, foco, pressionar. |
--sh-dur-advance | 320ms | Mudança de estado: doca troca de condição. |
--sh-dur-settle | 640ms | Entrada de bloco na tela. |
--sh-ease-snap | cubic-bezier(.2,.9,.3,1) | Controle. Sai rápido, para seco. |
--sh-ease-settle | cubic-bezier(.16,1,.3,1) | Assentamento exponencial. O padrão. |
--sh-ease-inout | cubic-bezier(.65,0,.35,1) | Percurso com ida e volta. |
O conteúdo já está visível
A animação de entrada só existe quando há JS. Sem JS, sem observador ou com prefers-reduced-motion, tudo aparece direto. Movimento nunca é pré-requisito para ler.
Nada de efeito espalhado
Um momento orquestrado por página. Hover em tudo que se mexe é ruído, não vida.
Movimento indica progresso real
Se o lote está publicando, a barra anda de verdade. Movimento que finge trabalho quebra a confiança de quem opera cem anúncios por dia.
Ícones
Grade de 24, traço de 2, ponta reta e junta viva. Desenhados como pictograma de sinalização, não como ilustração. É o mesmo raciocínio da placa de corredor.
Três tamanhos, um traço aparente
16px usa traço 2,4; 24px usa 2; 32px usa 1,8. O peso óptico fica igual nos três.
Emoji não é ícone
Nem glifo Unicode. Ícone é desenhado, em SVG, nesta grade. Um 🚀 numa interface de operação quebra o sistema inteiro.
Componentes
O núcleo que o site e as primeiras telas do produto precisam. Cada peça aparece com todos os seus estados. Um componente sem estado de erro e de carga não está pronto para produção.
Botão
Uma ação laranja por tela: ela é a saída principal. Azul é ação obrigatória de autorização: conectar conta, aprovar escopo. Vermelho é destrutivo e sempre pede confirmação.
Campo
O erro nomeia o problema e a saída, nas palavras de quem cadastra. "Campo inválido" não é mensagem de erro, é o sistema se recusando a ajudar.
Doca de canal
Dados sintéticos Nomes, números e horários abaixo são de demonstração.
Romaneio
Dados sintéticos
| Endereço | Operação | Canal | Itens | Condição |
|---|---|---|---|---|
| D-01-A | Reescrever ficha técnica | Mercado Livre | 40 | Operando |
| D-02-C | Publicar lote | Shopee | 38 | Em curso |
| D-03-B | Corrigir atributo obrigatório | Amazon | 12 | Atenção |
| D-04-A | Renovar autorização | Magalu | 1 | Parado |
| D-01-D | Ajustar preço por concorrência | Mercado Livre | 116 | Obrigatório |
Conversa
É aqui que o produto acontece: o seller fala com o LLM que já usa, e o hub executa nas contas dele. A chamada de ferramenta fica visível, porque quem opera cem anúncios precisa ver o que foi feito, não confiar no resumo.
Dados sintéticos
Reescrevi as 40 fichas no Mercado Livre e publiquei 38 na Shopee. Dois ficaram na fila porque a categoria exige certificado Anatel. Te aviso quando destravar.
Voz
Linguagem de quem vende. Direta, com número quando há número, sem jargão corporativo e sem prometer o que o produto ainda não faz.
O controle nomeia a ação
Publicar lote, não Continuar. Quem lê o botão precisa saber o que vai acontecer com os anúncios dele.
O erro dá a saída
SKU não aceita espaço nem barra. Use TWS53-PRETO. Diz o problema e o próximo passo, na mesma frase.
Número em vez de adjetivo
38 de 40 publicados vale mais que quase tudo publicado. Quem opera em lote conta.
Sem vocabulário de lançamento
Revolucionar, transformar, potencializar, disruptivo, game changer. Nada disso descreve o que o hub faz numa conta de marketplace.
Sem prova inventada
O produto não tem depoimento, número de cliente, benchmark nem parceria oficial declarada. Enquanto não tiver, nenhuma peça afirma que tem.
Roadmap não vira promessa
Canal que ainda não está em produção se diz "em desenvolvimento", nunca aparece numa lista de canais suportados sem marcação.
Tokens
Três camadas: primitivo é a tinta, papel é o significado, componente é a medida fixa. Em código você usa papel. É o que faz o tema claro funcionar sem tocar em nada.
Como consumir
<link rel="stylesheet" href="brand-kit/css/fonts.css">
<link rel="stylesheet" href="brand-kit/css/tokens.css">
<link rel="stylesheet" href="brand-kit/css/system.css">Copie brand-kit/fonts/ junto. Sem fonts.css a placa de corredor cai em Arial, e o sistema perde a voz.
.minha-peca {
background: var(--plate);
color: var(--ink);
border-radius: var(--sh-radius-md);
padding: var(--sh-space-5);
}tokens.json para build e agente
Mesmos valores em JSON, para gerar preset de Tailwind, tema de biblioteca, ou para uma IA ler antes de escrever tela.
Valor solto é dívida
Um #FF5400 escrito à mão em componente sobrevive à próxima mudança de tema e quebra sozinho. Se falta um token, crie o token.
Papéis de cor
| Papel | Escuro | Uso |
|---|---|---|
| --ground | #0B0C0E | O chão. Fundo da página. |
| --deck | #131519 | Zona sobre o chão: cabeçalho, faixa. |
| --plate | #1C1F25 | Placa. A superfície de componente. |
| --plate-raised | #262A31 | Placa sobre placa. |
| --plate-sunken | #000000 | Rebaixo: campo de entrada, bloco de código. |
| --ink | #F4F4F1 | Texto principal. |
| --ink-secondary | #A9ACB2 | Texto de apoio. |
| --ink-tertiary | #9096A1 | Rótulo, metadado, placeholder. |
| --signal | #FF5400 | Campo laranja: ação primária, faixa, numeral. |
| --signal-ink | #FF7733 | Laranja como texto. |
| --ink-on-signal | #000000 | Texto sobre laranja. Sempre preto. |
| --mandatory | #173DB8 | Campo azul: autorizar, conectar. |
| --mandatory-ink | #8EA3F2 | Azul como texto no escuro. |
| --mandatory-stroke | #5C7BEA | Azul como borda e ícone no escuro. |
| --focus-ring | #FF7733 | Anel de foco. Nunca removido. |