VALO CLUB protótipo

Proposta de redesign: tema claro, azul e branco

Sete telas do clube, refeitas. Nada aqui está no produto ainda — são arquivos HTML soltos, feitos para você julgar o ganho antes de gastarmos uma linha de código no projeto de verdade. Abra, clique, redimensione, reprove o que não servir.

As cinco mudanças que importam

Se você só tiver dois minutos, leia isto.

1 · O clube passa a funcionar no celular

A barra lateral de hoje tem largura fixa e nenhum ponto de quebra: no celular a tela simplesmente não cabe. Agora ela vira trilho, gaveta e barra inferior conforme o tamanho.

2 · O login deixa de parecer inacabado

Ganha marca, rótulo em cada campo, "esqueci a senha", aviso de Caps Lock — e o link "Solicite acesso" para de renderizar fora do card, que é um bug em produção.

3 · A home vira ferramenta

Sai de três cartões sem saída para uma fila do que depende de você, atividade recente e indicadores que levam a algum lugar quando clicados.

4 · O dinheiro preso fica visível

O NX em custódia só aparece dentro da carteira hoje. Passa a aparecer na home, no checkout e no extrato — é saldo que o membro não pode gastar.

5 · O membro finalmente entende como sobe de nível

O score é um número sem explicação hoje. A tela de reputação passa a mostrar a escada dos cinco níveis, quanto falta e quanto vale cada ação pontuada.

Ganho que dá para conferir

Nada aqui depende de gosto — são números que você consegue checar sozinho.

MedidaHojeProposta
Itens de navegação de primeiro nível22 numa lista plana6 grupos
Telas usáveis abaixo de 768 pxnenhuma (barra fixa de 240 px)as 7
Componentes de indicador diferentes31
Contraste mínimo de textoreprova no claro≥ 4,5:1 em todos os pares
Campos do login com rótulo permanentenenhumtodos
Saldo em custódia visível fora da carteiranãohome, checkout e extrato

O contraste é recalculado ao vivo na página da linguagem visual — se algum par estiver abaixo do mínimo, ele acusa lá.

As sete telas

Na ordem em que sugiro percorrer.

Como avaliar em 15 minutos

    O que este protótipo não é

    Não tem back-end, não tem sessão, não valida nada de verdade e os dados são inventados (mas coerentes: o saldo é o mesmo em todas as telas). Telas fora do MVP — conexões, indicações, eventos, mensagens, curadoria, moderação, inteligência — aparecem no menu e avisam que ficaram de fora. Nada em apps/ ou packages/ foi tocado.
    O redesign contraria a especificação atual, que diz "dark mode first" e fixa o dourado como cor de prestígio (docs/01 §5.5). Se a proposta for aprovada, a implementação abre com um ADR que substitui aquela seção e corrige o CLAUDE.md — senão o tema escuro volta sozinho na próxima sessão.