Cada móvel do cômodo é uma categoria do WooCommerce, uma para uma. Categoria nova não ganha filtro nem menu: ganha um móvel.
Toda relíquia tem URL, HTML e dados estruturados próprios. A cena é a porta da frente; a lista é a outra porta. Recurso que só existe dentro da cena está errado por construção.
Nenhuma peça sobe sem medidor de estado preenchido. Objeto usado vendido como novo é mentira; vendido como usado, é memória.
Estoque é sempre 1. Quando uma peça sai, o lugar dela permanece com a data do resgate. A falta é informação.
A home carrega em menos de 3 MB e roda a 60 fps num Android intermediário. Nenhuma decisão estética sobrevive a essa conta.
Fria e quase monocromática. Se estiver em dúvida sobre que cor usar na interface, a resposta é ciano ou nenhuma.
--m16-void
#05070c
O vazio. Fundo de toda a cena 3D e de todas as telas cheias. Nunca use preto puro (#000) no lugar dele.
--m16-painel
#0c1320
Superfície de bloco: card de catálogo, fundo de ficha. É o primeiro nível acima do vazio.
--m16-painel-2
#121b2b
Superfície elevada dentro de um painel: área de scan, campo de formulário.
--m16-painel-3
#18243a
Nível mais alto. Estado pressionado, linha de tabela destacada, bloco de apoio.
--m16-linha
#21304a
Borda padrão de painel, botão e divisória de seção. 1px, sempre.
--m16-linha-suave
#182438
Divisória interna, entre itens de uma mesma lista. Mais fraca que linha.
--m16-tinta
#e9f0f8
Texto principal e títulos sobre void ou painel. Nunca branco puro.
--m16-tinta-2
#92a4bc
Texto de apoio, corpo longo, descrição de item. 7:1 sobre painel.
--m16-tinta-3
#6b7f99
Rótulo, telemetria, metadado. Mínimo legível: 4.9:1 sobre void. Não escureça mais.
--m16-ciano
#4fd9e8
Acento do casco: luz da nave, foco, link, estado ativo e a cor da narração. É a única cor estrutural.
A camada colorida. Cada cor é um móvel do cômodo e uma categoria da loja. Aparecem só como pertencimento — barra de 2px, ponto, rótulo — nunca como fundo de bloco grande.
--m16-violeta
#a78bfa
Compartimento Coleção. Vitrine, bonecos, objetos feitos para olhar.
--m16-ambar
#ff8a4c
Compartimento Vestuário. Também a luz quente do planeta na cena.
--m16-menta
#5eead4
Compartimento Expedição. Carga, acampamento, equipamento de fora.
--m16-ciano
#4fd9e8
Acento do casco: luz da nave, foco, link, estado ativo e a cor da narração. É a única cor estrutural.
--m16-verde
#5cc98b
Compartimento Veículos. Puxa o verde da moto sem ser a cor dela.
Semântico, separado do acento. Nunca use uma destas como enfeite, nem uma cor de compartimento para indicar estado.
--m16-estado-ok
#5cc98b
Conservação 75% ou mais. Semântico: nunca use como acento decorativo.
--m16-estado-atencao
#e8b75c
Conservação entre 50% e 74%, e preço ainda não definido.
--m16-estado-critico
#e2715f
Conservação abaixo de 50%. Erro de formulário e falha de pagamento.
Materiais do WebGL. Não existem em HTML.
--m16-casco
#e4eaf1
Material branco do casco na cena 3D. Só existe em WebGL, nunca em HTML.
--m16-casco-medio
#c2cdda
Painel secundário da nave em 3D: teto, portas de armário.
--m16-casco-fundo
#8d9cae
Moldura e peça estrutural em 3D, onde é preciso recuar o branco.
--m16-deck
#39424f
Piso e placa de chão da cena 3D.
--m16-interestelar
#2e6b4f
Verde Interestelar da moto, com metalness alto. Só no objeto, nunca na interface.
Duas famílias com papéis que não se invadem. A regra que resume: a máquina fala em caixa alta espaçada, a pessoa fala em caixa normal. Quando um texto muda de registro, muda de família.
A marca no canto superior esquerdo. Sempre em caixa alta.
Rótulo de compartimento, texto de botão, cabeçalho de coluna.
Telemetria e metadado numérico. Use tabular-nums.
Título de bloco dentro de painel. O espacejamento largo é o que o identifica.
Nome da relíquia na ficha. Caixa alta, text-wrap balance.
Linha de procedência sob o título, na cor do compartimento.
Preço. Sempre tabular-nums.
Descrição de relíquia e texto corrido. Máximo 62 caracteres por linha.
Fragmento do diário de bordo. Uma frase por linha, nunca parágrafo.
Nota de estado, observação, texto de apoio secundário.
Nada tem canto arredondado. --m16-radius-reto é 0px e é o padrão
absoluto — card, botão, chip, campo e imagem são placas cortadas retas. A única
exceção é o ponto de 8px ao lado do título de compartimento.
O sistema não usa sombra. Hierarquia se faz com borda e com o degrau de superfície: void → painel → painel-2 → painel-3. Profundidade de verdade existe só na cena 3D, onde é luz real.
A barra de 2px na lateral esquerda é o gesto que mais se repete no sistema: marca o compartimento num chip, a categoria num card, o canal num fragmento de diário. Use-a para dizer a que isso pertence — nunca para decorar.
Uma única ação sólida por tela. O rótulo diz o que acontece, não o que o botão é.
É a affordance primária da cena: alvo de toque confortável, foco por teclado, leitura por leitor de tela. O clique na malha 3D é o atalho.
O componente mais importante do sistema: transforma o desgaste, que seria o problema de vender usado, na razão de confiar na loja. A cor é semântica, nunca a do compartimento.
A porta indexável. Não é fallback: é por onde chega a maior parte do tráfego orgânico.
Quem fala no diário é uma pessoa longe de casa que guarda objetos porque são a única coisa com escala humana a bordo. Não é o vendedor, não é a marca, não é mascote. Primeira pessoa, frases curtas, uma ideia por linha. Nunca vende, nunca explica mecânica de site, nunca pisca para o leitor.
Chamo de relíquia qualquer objeto que uma pessoa usou de verdade. O que é novo e intacto não me conta nada — nunca esteve com ninguém. O que procuro tem marca de uso, porque a marca é a prova de que alguém esteve ali.
| Use | Não use |
|---|---|
| Relíquia | Produto, item, peça |
| Resgatar | Comprar, adicionar ao carrinho |
| Compartimento | Categoria, seção, departamento |
| Quarto | Loja, perfil, vitrine do vendedor |
| Registro de bordo | NFT, token, certificado |
| Estado de conservação | Condição, qualidade |