Kubo é o bot que garimpa ofertas e mantém o grupo andando no Telegram. A marca une a base que sustenta com a etiqueta que chama atenção.
Este manual reúne tudo o que é preciso para aplicar a Kubo com consistência: símbolo, cores, tipos, movimento, mascote, tom de voz e arquivos prontos para baixar.
A base firme: mesmo módulo de 24, espaço 4, cantos 5. O que sustenta o grupo.
Cobre os blocos como uma etiqueta de oferta: a cor que chama o olho.
Levemente torta, como a etiqueta de quem acabou de achar o preço bom.
A inclinação da faixa. É a assinatura da marca.
Escolha o formato, o fundo e a versão. O arquivo baixado sai exatamente como aparece aqui, em SVG vetorial.
Para avatar do bot, grupo, lojas e abas do navegador.
| Módulo (U) | 24 |
| Espaço entre blocos | 4 |
| Raio dos cantos | 5 |
| Rotação da faixa | 14° |
| Elevação da faixa | −6 |
| Área de respiro | U / 3 |
| Logo mínima | 96 px · 25 mm |
| Símbolo mínimo | 16 px |
Abaixo de 32 px a faixa perde presença: use o ícone de app, com fundo laranja, em vez do símbolo solto.
O laranja é a faixa: chama atenção como uma etiqueta de oferta. A menta é o tempero, sempre em doses. Clique numa cor para copiar o código.
Calculado pela fórmula WCAG 2.1. AA pede 4,5:1 para texto e 3:1 para títulos grandes.
Bold 700 · tracking −4,5% · Google Fonts, gratuita
Regular 400 · Medium 500 · SemiBold 600 · Google Fonts, gratuita
| Display | Unbounded 700 · 56/56 · −4,5% |
| Título | Unbounded 700 · 36/40 · −4% |
| Subtítulo | Unbounded 700 · 22/28 · −3% |
| Sobretítulo | Inter 600 · 13 · +14% · caixa alta |
| Texto corrido para explicar a oferta. | Inter 400 · 17/26 |
| Legenda e preço antigo | Inter 500 · 13/18 |
Os dois blocos caem um a um com desaceleração suave. Por último, a faixa laranja desce, passa do ponto e assenta nos 14°.
Cada bloco pousa no lugar certo, sem quique exagerado.
Primeiro a base, depois o que chama atenção.
A faixa passa dos 14° e volta. O único gesto com personalidade.
Passe o mouse ou toque num cartão para repetir.
Hover e microinterações
Queda de cada bloco
Queda da faixa
Entrada completa
Curva padrão: cubic-bezier(.2,.8,.2,1)
Quadradinho a 14° antes do texto.
Menta com borda noite. Só para desconto.
Carrossel 02/05 no Instagram.
Os campos e botões da Kubo seguem três regras: borda de 2 px em noite, sombra dura em laranja no foco e um quadradinho inclinado a 14° como marcador. Tudo é navegável por teclado.
O componente mais usado: filtro de loja, ordem e categoria. Clique, use as setas, Enter e Esc.
62% do estoque já foi.
12 ofertas caíram nos últimos 30 minutos.
Avisamos se o preço cair de novo.
Restam poucas unidades. Preço pode mudar.
Tente de novo em instantes.
Centralizado, sombra dura laranja e entrada com leve rotação. Fecha com Esc ou clicando fora.
Sobe da base da tela, ideal para filtros no celular.
Aberto por um botão. Navegue com as setas.
Pílula escura que sobe do rodapé e some sozinha.
Cabeça de bloco laranja, visor noite, olhos menta. Ele pisca, acena e segue o cursor. Clique nele. Aparece em posts, boas-vindas e avatares, nunca no lugar do logotipo.
Avatar do mascote
Avatar da marcaO formato padrão das ofertas no grupo.
85 × 55 mm. Clique para virar.
O avatar é a marca sobre a noite. Funciona em círculo e em quadrado.
RedondoQuadradoPreço, desconto e link. Sem enrolação.
Você, a gente, emoji com moderação.
Desconto real ou não posta.
| Bot no Telegram (nome) | Kubinho |
| Bot no Telegram (@) | @kubinho_bot |
| Grupo no Telegram | Kubo Offers |
@kubo.offers |
Horizontal, para fundo claro
Horizontal, para fundo escuro
Noite + laranja
Papel + laranja, para a noite
Noite + papel, sobre o laranja
1080 × 1080, fundo noite
Perfil do bot
Fonte de títulos
Fonte de texto
