Neumorphic Club Fintech

O que Neumorphic Club Fintech faz?

Um site de finanças exclusivo para membros, esculpido a partir de dois materiais suaves: uma página escura e ilhas claras incrustadas nela (cartões, painéis, moedas, o telefone, barras de FAQ). Dentro de cada material, botões e poços são projetados para fora ou pressionados para dentro, e uma luz que segue o cursor faz o relevo parecer físico. O tema claro inverte os dois: página clara, ilhas escuras. O tom é discreto e exclusivo: grandes declarações em serifa minúscula, pouco texto, muito espaço.

A construção de referência é example/index.html (Atlasio Reserve, um clube de cartão fictício, EN/TR, relevo escuro e claro). O código detalhado está em references/components.md; screenshots/ mostra cada seção no desktop, mobile, em ambos os temas e em turco.

Se o usuário nomear um site de referência, pegue apenas sua estrutura e clima. Nunca copie seus renders, nomes de produtos, texto ou logotipo.

1. Antes de projetar

1. Colete a oferta real: promessa de uma linha, quem se qualifica, 3–5 recursos do produto, recompensas, declaração de segurança, avaliações ou contagens de membros apenas se o cliente puder comprová-los, FAQs, links do aplicativo. Rotule qualquer outra coisa como amostra.
2. Nunca invente certificações de segurança, taxas de juros, tarifas, regras de aprovação ou efeitos de pontuação de crédito. O texto financeiro é regulamentado; deixe um espaço reservado que diga o que deve estar lá.
3. Escolha o único estado ativo que recebe o LED verde limão (data de vencimento, pagamento recebido, cartão ativo). O acento não aparece em nenhum outro lugar, exceto no texto do botão primário e nos anéis de foco.

2. DNA Visual

Elemento	Regra
Materiais	Dois. Página: escuro #272a31 (alto #2e3139, baixo #212329). Ilhas (.alt): claro #e6e9ee (alto #f1f3f6, baixo #d7dbe1). O tema claro os inverte. Dentro de um material, toda superfície é dessa cor. Nunca preto ou branco puro: as sombras precisam de espaço em ambos os lados.
Ilhas	Cartões, painéis de história e adesão, o telefone, blocos de trilho, moedas, mostrador, blocos de avaliação, barras de FAQ, promoção do rodapé, selo do aplicativo. Cabeçalho, texto do herói, poços de estatísticas, títulos e o rodapé permanecem no material da página. Procure aproximadamente metade claro, metade escuro em cada tela.
Relevo	Elevado = X Y 24px escuro, -X -Y 24px claro; pressionado = o mesmo par inset. Material escuro rgba(0,0,0,.55) / rgba(255,255,255,.06); material claro rgba(146,156,172,.75) / rgba(255,255,255,.95). Variantes pequenas com metade do deslocamento. Botões e chips convexos adicionam linear-gradient(145deg, alto, baixo). A sombra externa própria de uma ilha cai na página, então ela usa o par da página (--island), nunca seu próprio realce branco (isso brilharia como um halo no escuro).
Luz	Os deslocamentos vêm de --lx/--ly (um vetor unitário). Luz padrão do canto superior esquerdo (.7071, .7071); o JS a gira em direção ao cursor.
Texto	Cada material tem sua própria tinta: no escuro #f4f5f7 / #c9cdd5 / #959aa4, no claro #191c22 / #3c414c / #5f6571. O texto nunca tem baixo contraste: o relevo é para superfícies, não para o tipo que você precisa ler.
Acento	LED verde limão #b9f26b no material escuro, #3e8a1d no material claro, com um pequeno brilho. Poços de recursos podem conter um brilho saturado cada (rosa, violeta, verde, azul) com aproximadamente 38% de opacidade.
Tipo de exibição	Fraunces 700, opsz 144, letter-spacing:-.035em, minúsculas, line-height .92 (Denton é a aparência original paga).
Corpo / UI	Urbanist 400–700 (aparência Gilroy). Sobrancelhas 13px 700 maiúsculas letter-spacing:.32em. Botões 13px 700 maiúsculas .18em.
Formas	Pílulas para botões e alternadores; raios de 20–44px para painéis; círculos para poços de ícones, moedas e o mostrador. Sem bordas, sem fios de cabelo.
Gravação	Mesma cor da superfície + text-shadow: 1px 1px 1px claro, -1px -1px 1px escuro. Apenas para decoração (números de cartão, palavras não lidas).

3. Padrões de seção

1. Cabeçalho – monograma redondo elevado + marca de palavra serifada; pílula pressionada com LED ("novo · …"); trilha de idioma pressionada cujo segmento ativo é elevado; botão de tema redondo elevado. Fixo; ganha uma sombra projetada suave após a rolagem.
2. Herói – esquerda: sobrancelha, manchete serifada de 2 linhas em minúsculas, lead curto, um botão primário (texto verde limão) e um botão pílula simples, dois poços de estatísticas pressionados marcados como "amostra". Direita: anéis de relevo concêntricos (elevado, pressionado, elevado) com um cartão em relevo no topo (chip convexo, número gravado, LED), inclinado -8° e seguindo o mouse.
3. História – um grande painel elevado; sobrancelha ("associação é conquistada."); um parágrafo serifado cujas palavras começam gravadas e acendem uma a uma conforme o leitor rola.
4. App – um telefone elevado com uma tela pressionada emerge de um encaixe pressionado; dentro, um cartão de fatura elevado (LED de data de vencimento, valor, botão de pagamento) e duas linhas de lista. Manchete serifada centralizada e lead abaixo.
5. Cartões – dividido: texto à esquerda; cinco lâminas de cartão elevadas se abrindo a partir de um pivô comum conforme a seção aparece na rolagem; a lâmina frontal carrega o estado de LED.
6. Trilho de pagamento – sobrancelha + manchete, botões de navegação anterior/próximo elevados e redondos; trilho de rolagem com encaixe de blocos elevados: poço de ícone pressionado + rótulo maiúsculo, título de duas linhas, pequeno botão pílula, um poço "mostrar" pressionado com um brilho colorido e um objeto em relevo (telefone pontilhado, grade de chip, anéis contactless, barras divididas).
7. Recompensas – manchete centralizada; grade 3×2 de moedas convexas que flutuam lentamente; pressionar uma a afunda e revela uma recompensa de amostra.
8. Segurança – dividido: mostrador elevado com 60 marcas que giram com a rolagem em torno de um botão convexo com um cadeado verde limão; sobrancelha e um grande parágrafo sem serifa iluminado por um spotlight móvel (segue o ponteiro, flutua sozinho caso contrário).
9. Prova – manchete + dois blocos de avaliação elevados: número serifado, /5, uma trilha pressionada com preenchimento verde limão. Rotulado como amostra a menos que seja real.
10. Adesão – painel elevado: manchete ("a porta se abre para alguns."), lead, uma trilha pressionada deslizar para aderir com um botão convexo; à direita, um poço pressionado com um bloco de QR elevado.
11. FAQ – rótulo centralizado com espaçamento largo; barras <details> elevadas que se tornam pressionadas quando abertas.
12. Rodapé – um painel pressionado com logotipo, duas colunas de links e um cartão promocional elevado; uma linha de letras miúdas abaixo.
13. Selo flutuante – "baixe o app" elevado no canto inferior direito com um pequeno QR; oculta enquanto a seção de adesão estiver visível e abaixo de 900px.

4. Interações exclusivas

• Luz do cursor – em pointermove defina o vetor de sombra para normalize(centro − cursor) e suavize --lx/--ly em direção a ele em requestAnimationFrame. Cada sombra é construída a partir dessas variáveis, então toda a página se re-ilumina de uma vez. Apenas para (pointer:fine); luz fixa do canto superior esquerdo com movimento reduzido.
• Palavras gravadas → iluminadas – divida o parágrafo em <span class="w">; ilumine as primeiras progresso × contagem palavras. Redivida após uma troca de idioma. Movimento reduzido: todas iluminadas.
• Inclinação do cartão – rotateX/rotateY até ±11° a partir da posição do ponteiro sobre o palco; retorna ao plano ao sair.
• Subida do telefone / abertura dos cartões / mostrador – cada um lê um valor de progresso de rolagem (0→1) e escreve uma variável CSS (--p, --fan, --rot). Movimento reduzido: estado final.
• Estados pressionados – todo elemento de relevo clicável troca sua sombra externa pelo par interno em :active ou aria-pressed="true" e escala para .985.
• Texto spotlight – um parágrafo duplicado aria-hidden em branco total mascarado com um gradiente radial em --mx/--my.
• Deslizar para aderir – botão com captura de ponteiro; soltar após 90% conclui, caso contrário retorna; teclas de seta e Enter funcionam; o botão tem role="slider" com aria-valuenow. Nunca envia nada a menos que o cliente o conecte.
• Troca de tema – inverte data-theme no <html>; apenas os tokens mudam.

5. Regras de construção

• HTML independente com doctype/charset/viewport; apenas Google Fonts; nenhuma imagem necessária (todo relevo é CSS, QR é um padrão de canvas decorativo, marcado como amostra).
• Defina ambos os materiais como conjuntos de tokens. O conjunto da página fica em :root; o conjunto oposto em .alt (invertido sob [data-theme="light"]). Reconstrua --raise --raise-sm --inset --inset-sm em :root, .alt para que cada ilha use seu próprio par; declare --island / --island-sm apenas em :root para que as ilhas herdem o par da página para sua sombra externa. Os componentes nunca escrevem uma sombra manualmente.
• Qualquer coisa que leia cores em JS (o canvas QR) deve lê-las de seu próprio elemento, não de :root.
• Cada elemento que projeta uma sombra está em background: var(--bg). Contêineres com transbordamento (trilhos) precisam de aproximadamente 30px de padding para que as sombras não sejam cortadas.
• Acessibilidade: contraste de texto ≥ 4.5:1 independentemente do relevo; anel de foco verde limão visível; o estado pressionado também é exposto com aria-pressed; relevo decorativo é aria-hidden.
• prefers-reduced-motion: sem seguir a luz, sem inclinação, sem flutuação, todas as peças de rolagem em seu estado final, spotlight desligado.
• Mobile (< 900px): grades empilham, selo oculta; (< 640px) a pílula do cabeçalho oculta, moedas vão para 2 colunas.

6. Escrevendo o texto

• Manchetes em minúsculas, curtas e declarativas, no máximo duas linhas: "construído para pessoas que pagam em dia".
• Sobrancelhas são frases completas em maiúsculas com ponto final: "ASSOCIAÇÃO É CONQUISTADA."
• Texto do corpo simples e concreto. Sem hype, sem números inventados; marque amostras no lugar.
• Traduza todas as strings, incluindo as escritas em JS (moedas, resultado do controle deslizante, rótulos de tema).

7. Lista de verificação final

• Dois materiais, aproximadamente equilibrados em cada tela; sem bordas; cada sombra vem dos tokens.
• Sem halo branco ao redor das ilhas claras na página escura (sombra externa usa --island).
• Mover o mouse gira cada sombra na página; toque e movimento reduzido recebem uma luz fixa.
• Todo texto legível passa no contraste em ambos os temas; gravação apenas em decoração.
• Sombras de trilho não são cortadas; nada rola horizontalmente em 390px.
• Avaliações, contagens de membros, taxas e declarações de segurança são reais ou rotuladas; sem logotipos ou renders de terceiros.
• Troca de idioma não deixa texto no idioma de origem.
• Capturas de tela em 1440×900 e 390×844 (node scripts/screenshots.mjs example/index.html screenshots; o script move um mouse virtual para mostrar a direção da luz e captura ambos os temas).