kennedys0/taste-style-claymorphism

Use esta habilidade apenas após o usuário escolher explicitamente ou uma configuração de projeto confirmada especificá-la. Para solicitações de UI novas não explicadas, use um seletor de estilo (como style-selector) em vez de decidir o gosto do usuário aqui. A marca existente, a acessibilidade e as substituições do usuário prevalecem sobre todos os exemplos abaixo. O guia de estilo a seguir não é permissão para começar a codificar UI antes da seleção do estilo.

Pacote de estilo: Claymorphism

ID: claymorphism Assinatura: Superfícies moldadas, táteis e esculpidas com profundidade volumétrica de sombra interna dupla, sombras projetadas ambiente suaves e presença física amigável.

Este é um pacote de estilo, não um padrão obrigatório. Carregue-o somente após seleção explícita ou estilo de projeto aplicável confirmado. As instruções do projeto podem substituir escolhas individuais. Preserve acessibilidade, utilidade e restrições da marca. Fontes são sugestões, não dependências obrigatórias. Um cartão plano com cantos arredondados e borda de 1px não se qualifica como Claymorphism.

Boa adequação / trade-offs

• Funciona bem para: Experiências de consumo lúdicas, ferramentas criativas, painéis pessoais, widgets interativos, aplicações web táteis e plataformas educacionais ou de design modernas.
• Cuidado com: Dados tabulares extremamente densos, leitura jurídica longa ou dispositivos de baixo consumo se o excesso de cálculos de sombra prejudicar o desempenho.
• Direções de referência:
  • Argila Saturada Primária: Superfícies moldadas em violeta/roxo vibrante (#813FFC) com destaques internos brancos brilhantes no canto superior esquerdo, sombras de forma profundas e matizadas no canto inferior direito e tipografia nítida.
  • Argila Porcelana Clara: Superfícies moldadas em off-white macio (#ECEBF5) com destaques internos brancos puros no canto superior esquerdo, sombras de forma suaves em cinza-lavanda no canto inferior direito e tipografia em ardósia-roxo escuro.
  • Poços Rebaixados (Sunken Inset Wells): Inputs de formulário rebaixados com borda de alívio branca nítida (3px solid rgba(255, 255, 255, 0.85)), sombras internas invertidas e placeholders acessíveis.

Portão de fidelidade do material argila — obrigatório

Antes de declarar uma página claymorphism completa, a viewport de abertura deve ser visivelmente lida como uma composição de argila esculpida. Se um usuário escolheu este estilo, um cartão plano com cantos arredondados e borda de 1px é uma FALHA, mesmo que as variáveis CSS sejam nomeadas clay.

Uma implementação claymorphism bem-sucedida demonstra todos os seguintes:

1. Sombras Internas Duplas Volumétricas (Destaque + Sombra): Uma superfície de argila DEVE apresentar sombras internas duplas opostas: um destaque interno superior esquerdo simulando luz incidente (inset 3px 4px 6px rgba(255,255,255,...)) e uma sombra interna inferior direita simulando espessura volumétrica (inset -4px -6px 8px rgba(tom-escuro,...)). Uma única linha de destaque plana ou chanfro genérico falha.
2. Sombras Projetadas Ambiente Suaves e Matizadas: As superfícies projetam sombras suaves, direcionais e matizadas (8px 16px 24px rgba(..., 0.20–0.35)), criando a sensação de material maleável flutuando ou descansando sobre uma tela matizada, em vez de sombras pretas agressivas.
3. Geometria Squircle e Pill Generosa: Curvatura generosa (24px–32px cartões, 20px–26px botões, 9999px pills ou círculos, 14px squircle checkboxes). Cantos de 90 graus afiados falham.
4. Polaridade Rebaixada vs Elevada: Componentes acionáveis (botões, badges, polegar de toggle, cartões) são elevados para fora; poços de contenção (campos de input, canais de switch inativos) são rebaixados para dentro com sombras internas invertidas e uma borda de alívio branca opcional.
5. Compressão Tátil na Interação: Ao passar o mouse, focar e clicar, os controles respondem fisicamente com uma leve redução de escala (scale(0.97–0.98) ou translateY(1–2px)) e sombras apertadas, parecendo argila real maleável pressionada por um dedo.

Teste de primeira viewport: Em uma captura de tela de desktop, identifique os botões esculpidos elevados, os destaques/sombras internos duplos e os poços de input rebaixados sem ler o título da página. Se parecerem planos ou meramente arredondados, revise os tokens de sombra antes de adicionar mais conteúdo.

Não é uma regra de contagem de cartões: Uma vitrine de componentes focada (por exemplo, pill primário "Enviar", pill secundário "Voltar", botão de ação circular, toggle tátil, checkbox e campo de input rebaixado) é suficiente para estabelecer fidelidade de material autêntica sem cobrir toda a tela com cartões aninhados.

Exceção explícita de profundidade de argila — argila pode ter profundidade volumétrica

Substituição específica do Claymorphism: A cautela anti-slop universal contra sombras excessivas, efeitos brilhantes ou desfoque neumórfico NÃO DEVE ser interpretada como uma proibição de sombras internas duplas, sombras projetadas ambiente suaves ou contornos de alívio brancos aqui. Estas são propriedades de habilitação do material, essenciais para a presença física tátil.

• Tratamentos de material permitidos: Sombras internas duplas (claro/escuro opostos), sombras ambiente matizadas multi-parada suaves, bordas de alívio brancas (3px solid rgba(255,255,255,0.85)) e transformações de pressão táteis (scale(0.97)). Estes criam profundidade tátil essencial e presença física. CSS estático entrega fidelidade de material completa com zero custo de biblioteca de animação.
• Disciplina de contraste de cores: Botões de argila primária saturada requerem texto branco puro (#FFFFFF) com pelo menos contraste 4.5:1. Superfícies de argila porcelana clara requerem texto escuro profundo (#28233D ou #1D1735). Poços rebaixados exigem texto de placeholder claro e acessível (#7C739E ou mais escuro).
• Interpretação anti-slop: Avalie a profundidade da argila pelo propósito do material, coerência física e legibilidade, não contando declarações de sombra CSS. Remover sombras internas duplas para satisfazer uma heurística mínima genérica é uma regressão de design.

Veja examples/claymorphism/sculpted-surfaces.css para implementação inicial e tests/claymorphism-visual.md para critérios de aceitação visual.

Tipografia e escrita

Sans-serif humanista ou geométrica amigável: Manrope, Nunito Sans ou system sans. Pesos 500/600/700 para rótulos, 700/800 para títulos. Escala 14/16/20/26/34 px; altura da linha 1.45–1.6. Prefira letra inicial maiúscula e rótulos concisos e humanos. Evite fontes display finas que pareçam frágeis sobre superfícies volumétricas.

Direção de cor

Escolha uma paleta pastel e saturada coesa:

• Modo Claro (Argila Porcelana Clara):
  • Base da Tela: Lilás / lavanda pastel suave (#D7D1F1 ou --taste-clay-bg: #d7d1f1).
  • Argila Saturada Primária: Violeta/roxo vibrante (#813FFC) com texto branco (#FFFFFF), destaque branco brilhante no canto superior esquerdo e sombra roxa profunda no canto inferior direito.
  • Argila Clara Secundária: Porcelana off-white suave (#ECEBF5 / #F0EFF7) com tinta escura (#28233D), destaque brilhante no canto superior esquerdo e sombra lavanda suave no canto inferior direito.
  • Poços de Input Rebaixados: Poço matizado da tela (#D7D1F1) emoldurado por uma borda de alívio branca nítida (3px solid rgba(255, 255, 255, 0.85)), sombra interna rebaixada e placeholder legível (#8F87B0).
• Modo Escuro (Argila Esculpida Noturna Profunda):
  • Base da Tela: Índigo-obsidiana sombria (#161326).
  • Argila Saturada Primária: Violeta/roxo vibrante (#813FFC) com texto branco puro (#FFFFFF), destaque no canto superior esquerdo e sombra violeta escura.
  • Superfície de Argila Secundária: Ameixa/ardósia rica e esculpida (#26203D) com texto porcelana claro nítido (#F3F0FA), destaque translúcido suave no canto superior esquerdo (rgba(255, 255, 255, 0.15)) e sombra preta profunda no canto inferior direito (rgba(10, 5, 25, 0.60)).
  • Poços de Input Rebaixados: Poço profundo rebaixado (#1E1A33) emoldurado por uma borda de alívio sutil (3px solid rgba(255, 255, 255, 0.20)), sombra interna rebaixada e placeholder legível (#A49BBF).
• Acoplamento de Contraste de Tema: Ao alternar para o modo escuro, o texto em superfícies de argila secundária DEVE passar de tinta escura (#28233D) para porcelana clara (#F3F0FA). Deixar texto de tinta escura em argila escura cria uma falha de contraste imediata. Botões primários saturados retêm texto branco puro (#FFFFFF) com contraste 4.5:1+ em ambos os modos.

Layout e geometria

Raio 24–32 px cartões, 20–26 px botões, 9999px pills completos ou círculos, 14–16 px squircle badges e checkboxes. Mantenha ritmo consistente de 8 px e gutters confortáveis. Evite círculos aleatórios que não tenham interação semântica.

Superfícies, profundidade, textura

As superfícies devem parecer moldadas de argila fosca real:

• Argila Primária (Elevada): box-shadow: inset 3px 4px 6px rgba(255, 255, 255, 0.45), inset -4px -6px 8px rgba(40, 10, 110, 0.40), 8px 16px 24px rgba(100, 45, 210, 0.35), 2px 4px 8px rgba(70, 20, 150, 0.20);
• Argila Porcelana Clara (Elevada): box-shadow: inset 3px 4px 6px rgba(255, 255, 255, 0.95), inset -4px -6px 8px rgba(145, 135, 180, 0.35), 8px 16px 24px rgba(110, 95, 160, 0.20), 2px 4px 8px rgba(110, 95, 160, 0.12);
• Poços Rebaixados (Recuados): box-shadow: inset 3px 4px 8px rgba(110, 95, 165, 0.25), inset -2px -2px 6px rgba(255, 255, 255, 0.70); Emoldurado com border: 3px solid rgba(255, 255, 255, 0.85);

Anatomia do componente e interação

• Botão Primário ("Enviar >"): Pill roxo saturado, texto branco em negrito, chevron direcional, compressão tátil ao clicar.
• Botão Secundário ("Voltar ↶"): Pill porcelana clara, texto tinta escura, ícone de seta de retorno, compressão tátil ao clicar.
• Botão de Ação Circular: Botão redondo com 50% de border-radius (por exemplo, pausa ❚❚), argila saturada, ícone centralizado.
• Interruptor (Toggle): Trilho em forma de pill com esfera de polegar de argila suave; alterna entre trilho claro/polegar roxo e trilho roxo/polegar branco.
• Checkbox: Contêiner Squircle com sombra interna dupla e marca de verificação roxa vibrante (✓).
• Campo de Input: Poço rebaixado com ícone à esquerda, placeholder legível e borda de alívio branca.

Movimento

140–200 ms suave com ease-out. Compressão tátil (scale(0.97) ou translateY(2px)) com aperto de sombra ao pressionar. Nunca quicar, ultrapassar ou executar loops flutuantes contínuos.

Receita opcional Anime.js v4

• Decisão de movimento: Botão pressionado com compressão de 1–2% e retorno breve; mantenha o sombreamento esculpido existente.
• Duração inicial: 180ms (0 = imediato); ajuste à tarefa e preferência do usuário.
• Evitar: quicar, ultrapassar, loops flutuantes.
• Dependência: CSS/nativo por padrão. Use Anime.js v4 apenas se a interação solicitada justificar. Siga references/motion-engine.md do Taste Engine quando disponível; skill autônoma segue os princípios de movimento reduzido e sem loop decorativo acima.

UI writing e microcopy

Aconchegante e concreto. Exemplos: "Enviar", "Voltar", "Digite seu nome de usuário", "Salvo nos rascunhos". Evite slogans açucarados de IA ou hype de marketing falso.

Tokens iniciais (sugestões, não um tema completo)

Token	Padrão modo claro	Padrão modo escuro
--taste-clay-bg	#d7d1f1	#161326
--taste-clay-primary	#813ffc	#813ffc
--taste-clay-light	#ecebf5	#26203d
--taste-clay-text	#28233d	#f3f0fa
--taste-clay-muted	#7c739e	#a49bbf
--taste-clay-shadow-primary	8px 16px 24px rgba(100, 45, 210, 0.35), 2px 4px 8px rgba(70, 20, 150, 0.20)	8px 16px 24px rgba(10, 5, 25, 0.50), 2px 4px 8px rgba(10, 5, 25, 0.30)
--taste-clay-inner-primary	inset 3px 4px 6px rgba(255, 255, 255, 0.45), inset -4px -6px 8px rgba(40, 10, 110, 0.40)	inset 3px 4px 6px rgba(255, 255, 255, 0.45), inset -4px -6px 8px rgba(40, 10, 110, 0.50)
--taste-clay-shadow-light	8px 16px 24px rgba(110, 95, 160, 0.20), 2px 4px 8px rgba(110, 95, 160, 0.12)	8px 16px 24px rgba(0, 0, 0, 0.45), 2px 4px 8px rgba(0, 0, 0, 0.25)
--taste-clay-inner-light	inset 3px 4px 6px rgba(255, 255, 255, 0.95), inset -4px -6px 8px rgba(145, 135, 180, 0.35)	inset 3px 4px 6px rgba(255, 255, 255, 0.15), inset -4px -6px 8px rgba(10, 5, 25, 0.60)
--taste-clay-inner-well	inset 3px 4px 8px rgba(110, 95, 165, 0.25), inset -2px -2px 6px rgba(255, 255, 255, 0.70)	inset 3px 4px 8px rgba(0, 0, 0, 0.50), inset -2px -2px 6px rgba(255, 255, 255, 0.15)
--taste-clay-well-rim	3px solid rgba(255, 255, 255, 0.85)	3px solid rgba(255, 255, 255, 0.20)
--taste-clay-radius-pill	9999px	9999px
--taste-clay-radius-btn	24px	24px
--taste-clay-radius-card	28px	28px
--taste-clay-radius-squircle	14px	14px
--taste-font-body	Manrope, system-ui, sans-serif	Manrope, system-ui, sans-serif
--taste-motion-duration	180ms	180ms

Os tokens representam uma direção e não são garantidos copiar-e-colar para cada paleta/plataforma. Defina --taste-clay-* no nível do projeto, garanta contraste de cores e adapte via tokens de tema em vez de espalhar valores literais.

Composição do herói (primeira viewport completa)

Quando um portfólio/landing/homepage voltado ao público tem um herói: use uma composição de cabeçalho+herói de uma tela visível. Altura base em min-height: 100svh com fallback 100vh, subtraindo o real cabeçalho apenas quando ele está no fluxo normal; deixe o herói expandir para acessibilidade e telas móveis curtas. Não aplique isso a dashboards privados ou outras telas de tarefa; substituições diretas do usuário vencem. Direção específica do estilo: Use uma superfície de herói esculpida ou um ambiente de material suave cuidadosamente equilibrado; coloque a introdução real do portfólio e CTA na composição da primeira tela. Não aninhe cartões inchados para preencher 100svh. A profundidade da argila deve permanecer sutil e direcional, com espaço plano substancial. Veja references/hero-layout.md do roteador quando presente. Uso autônomo segue os mesmos princípios responsivos e anti-slop.

Portão de qualidade específico do estilo

• Faça: Garanta que sombras internas duplas táteis estejam visíveis; mantenha direção de luz consistente (superior esquerdo para inferior direito); forneça estados ativos/pressionados táteis; verifique contraste WCAG AA tanto na argila primária quanto na clara; verifique a alternância entre modo escuro/claro para que as cores de texto e superfície se adaptem em pares acoplados (por exemplo, texto porcelana claro em argila escura, texto tinta escura em argila clara).
• Não faça: Não trate cantos arredondados simples como argila; evite sombras de balão, halos brilhantes excessivos, rótulos ilegíveis claro sobre claro, badges ornamentais e colisões de modo escuro/claro onde o texto escuro permanece em argila escura.
• Confirme consistência desktop e mobile; verifique se a composição do herói respeita min-height e não usa 100vh fixo que corta conteúdo.

Integração com Taste Engine

Quando usado dentro do Taste Engine, este pacote de estilo respeita:

• references/motion-engine.md — para regras de animação.
• references/hero-layout.md — para composição de herói (se presente).
• references/color-engine.md — para paletas de cores do tema.
• tests/claymorphism-visual.md — para critérios de aceitação visual.

Para uso autônomo, siga as diretrizes acima diretamente.