Aller au contenu
SkillCodex
Mis à jour le
Version
v1.3.0
Sources
2 sources
Statut
Publié

Classification terminologique · Tendance nommée par l’industrie

Neumorphism

Des contrôles moulés dans une surface mate grâce à deux ombres très douces.

Aussi appelé : Soft UI, neomorphism, soft neumorphic UI

Contrôles moulés dans une surface mate continue.

Comprendre

Définition et périmètre

Le neumorphism donne l’impression que les contrôles sortent d’une surface continue ou s’y enfoncent. Le fond et les éléments partagent la même couleur, tandis qu’une paire d’ombres claires et sombres crée le relief.

Périmètre : Cette fiche couvre le Soft UI apparu autour de 2019. Les objets plus épais, indépendamment colorés et flottants appartiennent plutôt au claymorphism.

Reconnaître

Les quatre signaux distinctifs doivent rester visibles sans dépendre du nom du style.

Surface

Une surface continue

Le fond et les contrôles partagent exactement la même teinte mate.

Profondeur

Deux ombres douces

Une ombre claire et une ombre sombre décrivent un éclairage diagonal constant.

Profondeur

État enfoncé

Les états actifs inversent les ombres vers l’intérieur de la surface.

Géométrie

Bords peu contrastés

La forme apparaît dans la transition des ombres, sans contour franc.

ADN du style

Ce que le style exige, ce qui l’accompagne d’habitude, ce qui peut changer sans en sortir, et ce qui le trahit.

Rapport hebdomadaire

Sessions actives

12 480+8,2 % vs semaine dernière

Dans les clous

Ouvrir la galerie de styles
Même carte, rendue en Neumorphism.

Définit le style

  • Le fond et les contrôles partagent exactement la même teinte mate.
  • Une ombre claire et une ombre sombre décrivent un éclairage diagonal constant.
  • Les états actifs inversent les ombres vers l’intérieur de la surface.

Soutient le style

  • Des formes très arrondies, souvent des pilules ou des cercles.
  • Une palette pastel désaturée, claire ou sombre.
  • Peu de contrôles par écran, avec beaucoup d’air autour.

Peut varier

  • La teinte de base, du moment qu’elle reste commune au fond et aux éléments.
  • La distance et le flou des ombres, tant que la direction de lumière reste la même.
  • Un accent coloré unique pour la valeur active ou la progression.

À éviter

  • Défaut d’accessibilitéDes limites et des états perceptibles uniquement grâce aux ombres à faible contraste.
  • Défaut d’accessibilitéUn contour de focus absent, ou aussi doux que les ombres.
  • CaricatureToutes les commandes moulées jusqu’à devenir presque invisibles.
  • ContradictionUne direction de lumière qui change d’un composant à l’autre.

Proches cousins

Des styles qui partagent un signal sans partager la règle.

Même carte, quatre styles

Choisir

Bon contexte

  • Quelques contrôles décoratifs dans une interface simple avec fond constant.
  • Un spécimen ou une identité visuelle où la douceur est plus importante que la densité.

Mauvais usage

  • Rendre toutes les commandes presque invisibles pour préserver une surface uniforme.
  • Changer la direction de lumière entre les composants.

Comparer

Différence décisive avec le voisin le plus proche

Briefs prêts à utiliser

Choisis l’intention qui correspond à ton travail, puis copie ce brief statique dans ton agent.

Créer

Crée une surface neumorphic limitée à quelques contrôles secondaires. Utilise une teinte mate commune, une paire d’ombres opposées cohérente et des états enfoncés. Ajoute toujours un contraste et un focus indépendants des ombres.

Modifier

Modifie seulement les contrôles décoratifs ou à faible risque. Aligne la couleur de fond et celle des éléments, normalise la direction de lumière et conserve les libellés, bordures de focus et états existants.

Réparer

Répare le neumorphism en augmentant le contraste des libellés et en ajoutant une bordure ou un changement de couleur aux états. Réserve les ombres au relief visuel, jamais à la seule compréhension d’une action.

Comprendre → Reconnaître → Choisir → Comparer

Pack pour ton agent

Instructions pré-écrites à coller dans ton agent. Copier n’exécute rien.

Implémenter correctement

Donne une direction Neumorphism cohérente

# Implémenter Neumorphism dans ton agent

## Objectif
Crée une surface neumorphic limitée à quelques contrôles secondaires. Utilise une teinte mate commune, une paire d’ombres opposées cohérente et des états enfoncés. Ajoute toujours un contraste et un focus indépendants des ombres.

## Prérequis
- Inspecte les composants, tokens et contraintes de marque existants.
- Confirme que ce style convient à la surface et au contenu.
- Préserve la structure, la sémantique et les interactions existantes.

## Comportement et surfaces
- Une surface continue — Le fond et les contrôles partagent exactement la même teinte mate.
- Deux ombres douces — Une ombre claire et une ombre sombre décrivent un éclairage diagonal constant.
- État enfoncé — Les états actifs inversent les ombres vers l’intérieur de la surface.
- Bords peu contrastés — La forme apparaît dans la transition des ombres, sans contour franc.

## États
- Couvre les états par défaut, survol, focus, actif, désactivé, chargement et erreur qui existent déjà.
- Fournis un état statique lorsque la réduction de mouvement est demandée.

## Accessibilité
- Ajouter des limites et des états perceptibles sans dépendre des ombres à faible contraste.
- Conserver un contour de focus très contrasté autour de chaque contrôle.
- Éviter ce traitement pour les formulaires critiques et les longues listes d’actions.

## Quand ne pas utiliser
- Rendre toutes les commandes presque invisibles pour préserver une surface uniforme.
- Changer la direction de lumière entre les composants.

## Critères d’acceptation
- Quelques contrôles décoratifs dans une interface simple avec fond constant.
- Un spécimen ou une identité visuelle où la douceur est plus importante que la densité.

## Garde-fous
- Montre d’abord les changements envisagés avant toute action externe.
- Ne publie, n’envoie, ne supprime, ne paie et ne modifie aucun état distant sans autorisation explicite.
- Préserve les changements sans rapport et arrête-toi si le périmètre devient ambigu.

## Format de sortie
- Résultat obtenu ou verdict.
- Fichiers ou actions concernés.
- Vérifications exécutées et preuves observables.
- Blocages ou limites restantes.
  • Prérequis · Tokens, composants et contraintes de marque existants
Pourquoi ça marche
  • Le style est cadré par ses signaux et ses surfaces, pas par une simple référence visuelle.
  • Les états et les fallbacks protègent l’usage quand le mouvement ou une API manque.
  • Les critères d’accessibilité et de performance empêchent l’esthétique de devenir une dette.

À essayer ensuite

Audite Neumorphism dans le produit

# Auditer Neumorphism sur la surface réelle

## Objectif
Contrôle que Neumorphism reste cohérent, accessible et mesuré sur les composants réellement concernés.

## Contrôles
- Compare les états interactifs et les fallbacks.
- Contrôle contraste, focus et réduction de mouvement.
- Signale les effets visuels qui dégradent la hiérarchie ou les performances.

## Garde-fous
- Montre d’abord les changements envisagés avant toute action externe.
- Ne publie, n’envoie, ne supprime, ne paie et ne modifie aucun état distant sans autorisation explicite.
- Préserve les changements sans rapport et arrête-toi si le périmètre devient ambigu.

## Format de sortie
- Résultat obtenu ou verdict.
- Fichiers ou actions concernés.
- Vérifications exécutées et preuves observables.
- Blocages ou limites restantes.

sha256:1d1f5fb0df255577fa8783d96d6dcaa4c5e7b5e4786e8e43f20121d99d0be592

Diagnostiquer un problème

Corrige les écarts de Neumorphism

# Déboguer Neumorphism dans ton agent

## Symptôme observé
[DÉCRIS ICI LE SYMPTÔME]

## Contrôles observables
- Compare la surface aux signaux visuels documentés.
- Vérifie contraste, focus, réduction de mouvement et fallback.
- Isole la couche visuelle sans modifier la structure fonctionnelle.

## Causes possibles
- Le style masque la hiérarchie ou réduit le contraste.
- L’effet est appliqué à trop de surfaces ou dépend d’une API absente.
- Un état interactif n’est plus perceptible.

## Corrections bornées
Répare le neumorphism en augmentant le contraste des libellés et en ajoutant une bordure ou un changement de couleur aux états. Réserve les ombres au relief visuel, jamais à la seule compréhension d’une action.

## Vérification finale
- Ajouter des limites et des états perceptibles sans dépendre des ombres à faible contraste.
- Conserver un contour de focus très contrasté autour de chaque contrôle.
- Éviter ce traitement pour les formulaires critiques et les longues listes d’actions.

## Garde-fous
- Montre d’abord les changements envisagés avant toute action externe.
- Ne publie, n’envoie, ne supprime, ne paie et ne modifie aucun état distant sans autorisation explicite.
- Préserve les changements sans rapport et arrête-toi si le périmètre devient ambigu.

## Format de sortie
- Résultat obtenu ou verdict.
- Fichiers ou actions concernés.
- Vérifications exécutées et preuves observables.
- Blocages ou limites restantes.
  • Prérequis · Tokens, composants et contraintes de marque existants
Pourquoi ça marche
  • Le diagnostic compare des signaux observables au lieu de juger le goût.
  • La couche visuelle est isolée pour préserver la structure et les interactions.
  • La correction reste reliée aux fallbacks, au contraste et aux états interactifs.

À essayer ensuite

Stabilise Neumorphism dans le design system

# Prévenir les dérives de Neumorphism

## Objectif
Transforme la correction visuelle en règle réutilisable et en contrôle ciblé sans figer toute l’interface.

## Contrôles
- Isole les tokens ou variantes responsables.
- Ajoute une preuve ciblée pour les états concernés.
- Compare avec les styles proches avant d’élargir la règle.

## Garde-fous
- Montre d’abord les changements envisagés avant toute action externe.
- Ne publie, n’envoie, ne supprime, ne paie et ne modifie aucun état distant sans autorisation explicite.
- Préserve les changements sans rapport et arrête-toi si le périmètre devient ambigu.

## Format de sortie
- Résultat obtenu ou verdict.
- Fichiers ou actions concernés.
- Vérifications exécutées et preuves observables.
- Blocages ou limites restantes.

sha256:c4f805a5275a75346f0cfd2c35ed31a08bf61aa2fc4b52b78daab70f3f1ab78c

Fiche complète, enregistrement et provenance

Instruction pré-écrite par SkillCodex — ta demande n’est ni envoyée ni utilisée pour adapter ce texte ; aucun contenu n’est généré et copier n’exécute rien.

Digest du Pack: sha256:37eaeef955e31b0a4c210b35835f92c389658280da6ce82bd26f096596f5cbcc

Accessibilité et vérification

  1. 1Ajouter des limites et des états perceptibles sans dépendre des ombres à faible contraste.
  2. 2Conserver un contour de focus très contrasté autour de chaque contrôle.
  3. 3Éviter ce traitement pour les formulaires critiques et les longues listes d’actions.

Sources

Révision du contenu
1.3.0
Sources consultées le
2026-07-20
Digest du catalogue source
sha256:e2e112ed9b0cabe7c6e72351765c2d7c1d0d309274926a8b1efe2aa9aa4f66b6
sha256-utf8-canonical-json-lf/v1
Ouvrir le catalogue source versionné