Utilisez cette compétence uniquement après qu'un utilisateur a explicitement choisi ou qu'une configuration de projet confirmée la spécifie. Pour les nouvelles demandes d'interface utilisateur inexpliquées, utilisez un sélecteur de style tel que au lieu de décider du goût de l'utilisateur ici. La marque existante, l'accessibilité et les préférences utilisateur prévalent sur tous les exemples ci-dessous. Le guide de style suivant n'est pas une autorisation pour commencer le codage UI avant la sélection du style.
Pack de style : Claymorphism
ID : claymorphism
Signature : Surfaces moulées, tactiles, sculptées avec une profondeur volumétrique à double ombre interne, des ombres portées ambiantes douces et une présence physique amicale.
Ceci est un pack de style, pas une valeur par défaut obligatoire. Ne le chargez qu'après une sélection explicite ou un style de projet applicable confirmé. Les instructions du projet peuvent remplacer les choix individuels. Préservez l'accessibilité, la fonctionnalité et les contraintes de la marque. Les polices sont des suggestions, pas des dépendances obligatoires. Une carte plate avec des coins arrondis et une bordure de 1 px n'est pas qualifiée de Claymorphism.
Bonne adéquation / compromis
- Fonctionne bien pour : Expériences grand public ludiques, outils créatifs, tableaux de bord personnels, widgets interactifs, applications web tactiles et plates-formes éducatives ou de design modernes.
- Faire attention avec : Données tabulaires extrêmement denses, lecture juridique longue, ou appareils à faible puissance si des calculs d'ombre excessifs entravent les performances.
- Directions de référence :
- Argile saturée primaire : Surfaces moulées violet/pourpre riches et vibrantes (
#813FFC) avec des reflets blancs vifs en haut à gauche, des ombres de forme teintées profondes en bas à droite et une typographie nette. - Argile de porcelaine claire : Surfaces moulées blanc cassé doux (
#ECEBF5) avec des reflets internes blanc pur en haut à gauche, des ombres de forme gris-lavande douces en bas à droite et une typographie ardoise-violet foncé. - Puits encastrés : Champs de saisie en retrait avec un bord de relief blanc net (
3px solid rgba(255, 255, 255, 0.85)), des ombres internes inversées et des étiquettes de placeholder accessibles.
- Argile saturée primaire : Surfaces moulées violet/pourpre riches et vibrantes (
Porte de fidélité matérielle de l'argile — obligatoire
Avant de considérer une page claymorphism comme terminée, le viewport d'ouverture doit visiblement être lu comme une composition d'argile sculptée. Si un utilisateur a choisi ce style, une carte plate avec des coins arrondis et une bordure de 1 px est un ÉCHEC, même si les variables CSS sont nommées clay.
Une implémentation claymorphism réussie démontre tous les éléments suivants :
- Ombres internes doubles volumétriques (Éclairage + Ombre) : Une surface en argile DOIT comporter des ombres internes doubles opposées : un éclairage interne supérieur gauche simulant la lumière incidente (
inset 3px 4px 6px rgba(255,255,255,...)) et une ombre de forme interne inférieure droite simulant l'épaisseur volumétrique (inset -4px -6px 8px rgba(teinte-foncée,...)). Une seule ligne de surbrillance plate ou un biseau générique échoue. - Ombres portées ambiantes douces teintées : Les surfaces projettent des ombres portées douces, directionnelles et teintées (
8px 16px 24px rgba(..., 0.20–0.35)), créant la sensation d'un matériau souple flottant ou reposant sur un canevas teinté, plutôt que des ombres portées noires dures. - Géométrie de squircle et de pilule moelleuse : Courbure généreuse (
24px–32pxpour les cartes,20px–26pxpour les boutons,9999pxpour les pilules ou cercles,14pxpour les cases à cocher squircle). Les angles vifs à 90 degrés échouent. - Polarité enfoncée vs surélevée : Les composants actionnables (boutons, badges, pouces de bascule, cartes) sont gonflés vers l'extérieur ; les puits de confinement (champs de saisie, canaux de commutateur inactifs) sont en retrait avec des ombres internes inversées et un bord de relief blanc optionnel.
- Compression tactile lors de l'interaction : Au survol, au focus et au clic, les commandes répondent physiquement avec une légère réduction d'échelle (
scale(0.97–0.98)outranslateY(1–2px)) et des ombres resserrées, donnant l'impression d'une argile souple pressée par un doigt.
Test du premier viewport : Dans une capture d'écran de bureau, identifiez les boutons sculptés surélevés, les doubles reflets/ombres internes et les puits de saisie en retrait sans lire le titre de la page. S'ils semblent plats ou simplement arrondis, révisez les jetons d'ombre avant d'ajouter plus de contenu.
Pas une règle de nombre de cartes : Une vitrine de composants ciblée (par exemple, pilule principale "Envoyer", pilule secondaire "Retour", bouton d'action circulaire, interrupteur à bascule tactile, case à cocher et champ de saisie encastré) est suffisante pour établir une fidélité matérielle authentique sans recouvrir tout l'écran de cartes ballons imbriquées.
Exception explicite de profondeur d'argile — l'argile est autorisée à avoir une profondeur volumétrique
Remplacement spécifique au claymorphism : La mise en garde universelle contre les ombres excessives, les effets brillants ou le flou néomorphique NE DOIT PAS être interprétée comme une interdiction des doubles ombres internes, des ombres portées ambiantes douces ou des contours de relief blanc ici. Ce sont des propriétés habilitantes du matériau, essentielles pour une présence tactile physique.
- Traitements matériels autorisés : Doubles ombres internes (clair/foncé opposées), ombres ambiantes teintées douces multi-arrêts, bordures de relief blanc (
3px solid rgba(255,255,255,0.85)) et transformations de presse tactiles (scale(0.97)). Ceux-ci créent une profondeur tactile essentielle et une présence physique. Le CSS statique offre une fidélité matérielle complète sans surcharge de bibliothèque d'animation. - Discipline de contraste des couleurs : Les boutons d'argile primaires saturés nécessitent du texte blanc pur (
#FFFFFF) avec un contraste d'au moins 4,5:1. Les surfaces d'argile de porcelaine claire nécessitent un texte foncé profond (#28233Dou#1D1735). Les puits encastrés nécessitent un texte de placeholder clair et accessible (#7C739Eou plus foncé). - Interprétation anti-désordre : Évaluez la profondeur de l'argile par le but du matériau, la cohérence physique et la lisibilité, pas en comptant les déclarations d'ombre CSS. La suppression des doubles ombres internes pour satisfaire une heuristique générique minimale est une régression de conception.
Voir examples/claymorphism/sculpted-surfaces.css pour une implémentation de démarrage et tests/claymorphism-visual.md pour les critères d'acceptation visuelle.
Typographie et écriture
Sans-serif humaniste ou géométrique convivial : Manrope, Nunito Sans ou système sans. Poids 500/600/700 pour les étiquettes, 700/800 pour les titres. Échelle 14/16/20/26/34 px ; hauteur de ligne 1.45–1.6. Privilégiez la casse de phrase et des étiquettes humaines concises. Évitez les polices d'affichage fines qui semblent fragiles sur des surfaces volumétriques.
Direction des couleurs
Choisissez une palette pastel et saturée cohérente :
- Mode clair (Argile de porcelaine claire) :
- Base du canevas : Lilas / lavande pastel doux (
#D7D1F1ou--taste-clay-bg: #d7d1f1). - Argile saturée primaire : Violet/pourpre vibrant (
#813FFC) avec texte blanc (#FFFFFF), un reflet blanc vif en haut à gauche et une ombre de forme violet foncé en bas à droite. - Argile claire secondaire : Porcelaine blanc cassé doux (
#ECEBF5/#F0EFF7) avec encre foncée (#28233D), un reflet vif en haut à gauche et une ombre de forme lavande douce en bas à droite. - Puits de saisie encastrés : Puits teinté canevas (
#D7D1F1) encadré par un bord de relief blanc net (3px solid rgba(255, 255, 255, 0.85)), ombre interne en retrait et placeholder lisible (#8F87B0).
- Base du canevas : Lilas / lavande pastel doux (
- Mode sombre (Argile sculptée de nuit profonde) :
- Base du canevas : Obsidienne-indigo sombre (
#161326). - Argile saturée primaire : Violet/pourpre vibrant (
#813FFC) avec texte blanc pur (#FFFFFF), un reflet en haut à gauche et une ombre de forme violet foncé. - Surface d'argile secondaire : Prune/ardoise sculpté riche (
#26203D) avec texte porcelaine pâle net (#F3F0FA), un reflet translucide doux en haut à gauche (rgba(255, 255, 255, 0.15)) et une ombre de forme noir profond en bas à droite (rgba(10, 5, 25, 0.60)). - Puits de saisie encastrés : Puits encastré profond (
#1E1A33) encadré par un bord de relief subtil (3px solid rgba(255, 255, 255, 0.20)), ombre interne en retrait et placeholder lisible (#A49BBF).
- Base du canevas : Obsidienne-indigo sombre (
- Couplage de contraste du thème : Lors du passage en mode sombre, le texte sur les surfaces d'argile secondaires DOIT passer de l'encre foncée (
#28233D) à la porcelaine pâle (#F3F0FA). Laisser un texte à l'encre foncée sur de l'argile foncée crée un échec de contraste immédiat. Les boutons primaires saturés conservent un texte blanc pur (#FFFFFF) avec un contraste de 4,5:1+ dans les deux modes.
Mise en page et géométrie
Rayon 24–32 px pour les cartes, 20–26 px pour les boutons, 9999px pour les pilules pleines ou les cercles, 14–16 px pour les badges et cases à cocher squircle. Maintenez un rythme de 8 px cohérent et des gouttières confortables. Évitez les cercles aléatoires sans interaction sémantique.
Surfaces, profondeur, texture
Les surfaces doivent sembler moulées dans de l'argile mate physique :
- Argile primaire (Surélevée) :
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); - Argile de porcelaine claire (Surélevée) :
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); - Puits encastrés (En retrait) :
box-shadow: inset 3px 4px 8px rgba(110, 95, 165, 0.25), inset -2px -2px 6px rgba(255, 255, 255, 0.70);Encadré avecborder: 3px solid rgba(255, 255, 255, 0.85);
Anatomie et interaction des composants
- Bouton primaire ("Envoyer >") : Pilule violette saturée, texte blanc en gras, chevron directionnel, compression tactile au clic.
- Bouton secondaire ("Retour ↶") : Pilule porcelaine claire, texte à l'encre foncée, icône de flèche de retour, compression tactile au clic.
- Bouton d'action circulaire : Bouton rond à 50% de rayon de bordure (par exemple, pause
❚❚), argile saturée, icône centrée. - Interrupteur à bascule : Piste en forme de pilule avec une boule d'argile lisse pour le pouce ; bascule entre une piste claire/pouce violet et une piste violette/pouce blanc.
- Case à cocher : Conteneur squircle avec double ombre interne et coche violette vibrante (
✓). - Champ de saisie : Puits encastré avec icône à gauche, placeholder lisible et bordure de relief blanc.
Motion
140–200 ms smooth ease-out. Compression tactile (scale(0.97) ou translateY(2px)) avec resserrement de l'ombre lors de la pression. Jamais de rebond, de dépassement ou de boucles flottantes continues.
Recette optionnelle Anime.js v4
- Décision de motion : Bouton pressé avec 1–2% de compression et un bref retour ; conservez l'ombrage sculpté existant.
- Durée de départ : 180ms (0 = immédiat) ; ajuster à la tâche et à la préférence de l'utilisateur.
- Éviter : rebond, dépassement, boucles flottantes.
- Dépendance : CSS/natif par défaut. Utilisez Anime.js v4 uniquement si l'interaction demandée le justifie. Suivez Taste Engine
references/motion-engine.mdlorsque disponible ; la compétence autonome suit les principes de mouvement réduit et de non-boucle décorative ci-dessus.
Rédaction UI et microcopie
Chaleureux et concret. Exemples : "Envoyer", "Retour", "Entrez votre nom d'utilisateur", "Enregistré dans les brouillons". Évitez les slogans d'IA sucrés ou le battage marketing fictif.
Jetons de démarrage (suggestions, pas un thème complet)
| Jeton | Valeur par défaut mode clair | Valeur par défaut mode sombre |
|---|---|---|
--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 |
Les jetons représentent une direction et ne sont pas garantis copier-coller pour chaque palette/plateforme. Définissez --taste-clay-* au niveau du projet, assurez le contraste des couleurs et adaptez via les jetons de thème plutôt que de disperser des valeurs littérales.
Composition hero (premier viewport complet)
Lorsqu'un portfolio/accueil/page d'accueil publique a un hero : utilisez une composition en-tête+hero sur un écran visible. Basez la hauteur sur min-height: 100svh avec une solution de repli 100vh, en soustrayant l'en-tête réel uniquement lorsqu'il est dans le flux normal ; laissez le hero s'étendre pour l'accessibilité et les écrans mobiles courts. N'appliquez pas cela aux tableaux de bord privés ou autres écrans de tâche ; les préférences directes de l'utilisateur l'emportent. Direction spécifique au style : Utilisez une surface hero sculptée ou un environnement de matériau souple soigneusement équilibré ; placez la véritable introduction du portfolio et l'appel à l'action dans la composition du premier écran. N'imbriquez pas de cartes gonflées pour remplir 100svh. La profondeur de l'argile doit rester subtile et directionnelle, avec un espace plat substantiel. Voir le routeur references/hero-layout.md lorsqu'il est présent. L'utilisation autonome suit les mêmes principes de réactivité et anti-désordre.
Porte de qualité spécifique au style
- À faire : Assurez-vous que les doubles ombres internes tactiles sont visibles ; maintenez une direction de lumière cohérente (haut-gauche vers bas-droite) ; fournissez des états actifs/enfoncés tactiles ; vérifiez le contraste WCAG AA à la fois sur l'argile primaire et claire ; vérifiez la commutation mode sombre/clair pour que le texte et les couleurs de surface s'adaptent par paires couplées (par exemple, texte porcelaine pâle sur argile foncée, texte encre foncée sur argile claire).
- À ne pas faire : Ne traitez pas les coins arrondis simples comme de l'argile ; évitez les ombres ballons, les halos brillants excessifs, les étiquettes illisibles clair sur clair, les badges ornementaux, et les collisions mode sombre/clair où le texte foncé reste sur l'argile foncée.
- Confirmez la cohérence sur desktop et mobile ; vérifiez l'interaction tactile ; validez la fidélité visuelle dans les tests de régression avant de livrer.
Ce pack de style est prêt à l'emploi. Utilisez-le comme une couche de thème optionnelle, pas comme un système de conception par défaut. Adaptez les exemples de valeurs au cas par cas. Ne construisez pas une couche de thème entièrement à partir de ce pack ; il fournit une direction et des garde-fous.