Escolha o nível de detalhe
Bit System
Como organizei a identidade visual, os componentes, os padrões de motion e a documentação da Dois Palitos em um sistema vivo para acelerar entregas sem perder consistência.
Visão Geral
- Time
- Projeto interno da Dois Palitos, conduzido por mim de ponta a ponta, do diagnóstico à documentação online.
- Métodos
- Tokens, componentes, receitas, padrões de motion, documentação online e guia para IA.
- Ferramentas
- Figma, HTML, CSS, JavaScript e IA.
- Principal resultado
- O Bit System virou a referência central da marca, com v2.1.0 em uso, orientando designers, editores, social media, devs e agentes de IA.
A estética já era reconhecível. O que faltava era tirar as decisões da memória do time e colocá-las em um lugar que qualquer pessoa, ou IA, pudesse consultar.
1. O contexto e o problema
A Dois Palitos já tinha uma estética reconhecível: pixel, neon, preto, contraste alto, linguagem direta e uma energia visual própria. O problema era que essa identidade dependia demais de quem já conhecia a marca.
Cada nova peça exigia recuperar decisões anteriores: qual fonte usar, como escrever, quais cores aplicar, como animar, que tipo de botão ou componente manter. O Bit System nasceu para reduzir esse atrito.
2. O diagnóstico: o que precisava virar sistema
Olhando para o dia a dia da agência, três necessidades se repetiam e definiram o escopo do sistema:
Como transformar uma estética forte em um sistema prático, consultável e útil para o ritmo real de uma agência?
Essa pergunta guiou três princípios:
- Decisão antes de componente. O sistema precisava explicar o porquê dos padrões, não apenas mostrar exemplos bonitos.
- Uso por função. Designer, editor, social media, IA e dev deveriam encontrar rapidamente o que precisavam.
- Documentação viva. O site precisava ser mais fácil de consultar e atualizar do que um arquivo parado no Figma.
3. Decisão 01: arquitetura organizada pelo uso, não pelo arquivo
A navegação foi pensada para responder às perguntas mais comuns da operação: onde usar, quais bases seguir, como aplicar identidade, como montar componentes e como gerar variações sem quebrar a marca.
A origem do sistema continua sendo a biblioteca no Figma, mas a consulta do dia a dia acontece na documentação online.
4. Decisão 02: transformar cor, tipo e voz em regras claras
A base do sistema documenta paleta, contraste, tipografia, tokens e direção verbal para que a marca continue reconhecível em peças comerciais, interfaces e materiais editoriais.
5. Decisão 03: componentes e receitas para recombinar
Botões, efeitos de marca, boxes de conteúdo, seções e receitas ajudam o time a sair do zero com uma estrutura coerente. O objetivo não era engessar a criação, era reduzir decisões repetidas.
6. Decisão 04: um sistema pronto para leitura humana e assistida por IA
A documentação inclui instruções, exemplos e arquivos de referência para que agentes possam gerar peças, páginas e variações respeitando a identidade da marca.
7. Decisão 05: documentar o movimento como parte da identidade
O Bit System trata motion como linguagem de marca, com padrões para tempo, easing, glitch, scanlines, blink e outros efeitos que aparecem em interfaces e peças visuais.
8. Resultado e aprendizados
O Bit System deixou de ser um projeto de organização e virou ferramenta de operação. Hoje ele é a referência central da marca, na versão 2.1.0, consultada no dia a dia por quem cria, edita, publica e desenvolve.
O que este projeto prova:
- Consigo transformar linguagem visual em sistema operacional. O valor do Bit System não está só em documentar estética, mas em tornar decisões de marca fáceis de consultar, aplicar e repetir.
- Design system precisa nascer do uso real. Componentes, tokens, motion e receitas só fazem sentido quando respondem dúvidas recorrentes da operação.
- IA exige documentação mais clara, não menos humana. Para uma marca ser usada por pessoas e agentes, o sistema precisa explicitar contexto, regras e exemplos.
O sistema segue vivo: cada dúvida nova da operação vira candidata a padrão documentado, e cada padrão documentado reduz uma conversa repetida. É esse ciclo que mantém o Bit System útil em vez de decorativo.
Bit System: a identidade da Dois Palitos transformada em um sistema vivo de operação
O Desafio
A Dois Palitos tinha uma estética forte e reconhecível, mas as decisões de marca viviam espalhadas entre arquivos, referências, entregas anteriores e memória do time. Cada peça nova exigia recuperar decisões antigas: fonte, cor, voz, animação, componente. Isso custava tempo e arriscava a consistência.
O Papel e a Execução
Conduzi o projeto de ponta a ponta como Product Designer. Estruturei fundamentos, identidade, componentes, receitas, padrões de motion e tokens, e transformei tudo em uma documentação online que conecta Figma, código e operação. A navegação foi organizada pelo uso real: designer, editor, social media, dev e IA encontram rápido o que precisam.
O Resultado
O Bit System virou a referência central da marca, com a versão 2.1.0 em uso real pela operação. A documentação cobre quatro frentes (fundamentos, identidade, componentes e motion) e inclui uma camada preparada para orientar agentes e prompts de IA.
O Maior Aprendizado
Design system só funciona quando nasce do uso real:
- O valor não está em documentar estética, e sim em tornar decisões de marca fáceis de consultar, aplicar e repetir.
- Componentes, tokens, motion e receitas só fazem sentido quando respondem dúvidas recorrentes da operação.
- IA exige documentação mais clara, não menos humana: contexto, regras e exemplos explícitos servem a pessoas e agentes ao mesmo tempo.
Um design system não é um arquivo bonito no Figma. É a marca funcionando sem depender da memória de quem a conhece.