01Do personagem ao favicon
Não existe um desenho separado para a logo. O símbolo é o próprio rosto do Pixios, sem os braços e as pernas. Em tamanhos pequenos, ele perde os detalhes e fica só com os olhos e o sorriso.
02Logo
O nome vem sempre em minúsculas, na fonte Sora ExtraBold. Os pingos dos dois "i" viram pixels verdes: é o "pix" de pixel, e não o Pix do pagamento.
Área de proteção e tamanho mínimo
Ao redor da logo, deixe livre um espaço igual a metade do símbolo. Nenhum texto, borda ou imagem entra nessa área.
1624324872Até 32 px, use o símbolo simplificado (sem os pontos da janela, sem brilho e sem bochechas). A partir de 48 px, use o símbolo completo. A logo horizontal precisa de pelo menos 110 px de largura.
03Cores
As cores saem do próprio personagem: o laranja do corpo, o verde do rosto, o azul dos ícones da tela e o grafite da tela. Toque em uma cor para copiar o código.
O laranja é a cor das ações: botões, chamadas e destaques. O verde significa "pronto, construído": sucesso, confirmação, cursor e o pingo do nome. Nunca use verde em botões. Texto sobre laranja é sempre branco, em peso 700 ou mais.
04Tipografia
Seu sistema pronto em dias, não em meses.
ExtraBold 800 nos títulos e SemiBold 600 nos subtítulos.
O Pixios entende a sua ideia, monta as telas e entrega o sistema funcionando, com o seu domínio e os seus dados.
Regular 400 no texto e SemiBold 600 em botões e menus.
> construindo agenda.tsx … pronto
Use em números, preços, telas de "construindo" e frases de efeito. É o que passa a ideia de código sem precisar falar em IA.
05O personagem
O nome do personagem é Pixios, igual ao da marca, como o Duo do Duolingo. Ele tem 21 poses prontas em 2D e em Rive, fala com lip-sync e anda pela tela. O nome "Bit" foi aposentado.
Sempre
- Corpo laranja #FF6B1A, rosto verde #3DDC84 e tela grafite.
- Luvas brancas e tênis grafite com sola branca.
- Na barra da janela: pixios.js.
- Em fundo escuro, use o contorno de luz (rim: true).
Nunca
- Mudar a cor do corpo ou do rosto, nem em datas comemorativas. Para enfeitar, use acessórios.
- Dar cara de robô (antena, parafusos, voz metálica).
- Usar como logo da Agência Xará. Lá ele só faz participação especial.
- Desenhar à mão ou gerar por IA uma versão diferente. Use sempre o 2D ou o Rive oficial.
Arquivos: demo ao vivo com as 21 poses · personagem/bit/ (2D) · bit.riv (Rive, para apps).
06Selo "Feito com Pixios"
Vai no rodapé de todo site e sistema de cliente e leva para o pixios.com.br. É o canal de divulgação mais barato que existe: cada cliente vira vitrine.
08Usos errados
Kit completo da marca
Logos em SVG e PNG, favicon (.ico, .svg, PWA), avatares, selo e fontes. Para usar o favicon, cole no <head> o código de favicon/LEIA-ME.html.
07Instagram e redes
A foto de perfil do @pixios é o rosto em fundo grafite, que destaca bem tanto no feed claro quanto no escuro. A versão clara fica para parcerias e para o site.
Sua ideia, construída. Sistemas e sites prontos a partir de R$249/mês.
Comente IDEIA que o Pixios constrói.
pixios.com.br