material-design

Material Design

Les surfaces numériques se comportent comme des feuilles de papier avec une épaisseur et une ombre, de sorte que la profondeur et le mouvement expliquent la hiérarchie de l'interface.

Un système de surfaces colorées planes qui se situent à des élévations définies et projettent des ombres depuis une source de lumière clé en haut à gauche, avec des couleurs vives, une grille de 8 dp et des mouvements intentionnels. Google l'a annoncé à l'I/O en juin 2014.

Période : 2014–présent · Ère : Écran tactile · Domaine : Design graphique & UI · Aussi appelé : Material, Google Material, Material 2

Quand charger cette compétence

Chargez-la lorsque l'utilisateur demande : « material design », « material ui », « google material », « elevation », « floating action button », « fab », « android style », « ripple effect », « app bar », « paper and ink », « md2 ».

Bon pour : Applications Android, tableaux de bord d'administration, applications web avec de nombreux composants, systèmes de design, outils de productivité.

Ne pas utiliser lorsque :

• La marque a besoin d'une voix distincte, car l'apparence par défaut est reconnaissable comme celle de Google.
• La page est éditoriale et comporte peu de composants interactifs.
• Le design nécessite un aspect purement 2D sans aucune ombre.

Directives système

Lors de la génération de mises en page UI ou graphiques en Material Design, vous DEVEZ :

1. Traiter chaque surface comme une feuille de papier de 1 dp d'épaisseur qui ne se plie jamais, ne change jamais de taille par étirement et ne traverse jamais une autre surface.
2. Exprimer la hiérarchie avec l'élévation en dp : 0 pour la page, 1 pour les cartes, 4 pour la barre d'application, 6 pour un bouton flottant au repos, 8 pour un menu, 16 pour un tiroir de navigation et 24 pour une boîte de dialogue.
3. Construire chaque mise en page sur une grille de 8 dp, avec 4 dp pour l'alignement du petit texte et des icônes, et des cibles tactiles de 48 dp.
4. Utiliser des couleurs vives provenant d'une teinte primaire et d'une teinte d'accent, avec la barre d'état dans la nuance 700 du primaire et la barre d'application dans la nuance 500.
5. Utiliser une grande typographie avec une échelle définie de 12, 14, 16, 20, 34, 45 et 56 sp en Roboto.
6. Donner à chaque toucher une réponse : une ondulation circulaire qui grandit à partir du point de contact sur 300 ms.
7. Déplacer les éléments le long de trajectoires courbes avec une facilité qui commence vite et finit lentement, et faire en sorte que chaque mouvement explique d'où vient un élément.

Garde-fous

Chaque ligne ci-dessous casse le style. Vérifiez votre résultat par rapport à la liste avant de le renvoyer.

• JAMAIS : Dégradés et textures sur les surfaces.
• JAMAIS : Ombres sans niveau d'élévation cohérent ou avec différentes directions de lumière.
• JAMAIS : Surfaces qui se chevauchent à la même élévation.
• JAMAIS : Cibles tactiles en dessous de 48 dp.
• JAMAIS : Texte coloré sur un fond coloré en dessous de 4,5:1.
• JAMAIS : Changements d'état instantanés sans mouvement ni retour d'ondulation.
• JAMAIS : Plus d'un bouton d'action flottant sur un écran.

Profil vectoriel

Axe	Score	1 signifie	5 signifie
Ornementation	■■□□□ 2/5	minimal pur	maximaliste
Dimensionnalité	■■■□□ 3/5	strictement 2D	pleine 3D / spatiale
Rigidité de grille	■■■■□ 4/5	chaotique / organique	grille mathématique stricte
Réalisme skeuomorphique	■■□□□ 2/5	numérique abstrait	matériau photoréaliste
Expressivité typographique	■■□□□ 2/5	neutre / invisible	expérimentale / illustrative

Conservez ces scores. Si une requête déplace un axe de 2 points ou plus, vous avez quitté le style : allez à « Repli de lignée ».

Logique spatiale et de grille

• Mécanismes de grille : Une grille de base de 8 dp, 4 dp pour les icônes et la typographie, une grille téléphone à 4 colonnes avec des marges de 16 dp, une grille tablette à 8 colonnes avec des marges de 24 dp et une grille bureau à 12 colonnes ; la barre d'application fait 56 dp sur téléphone et 64 dp sur bureau.
• Ratio d'espace blanc : 25 à 40 % de la surface reste vide ; l'échelle d'espacement est de 4, 8, 16, 24, 32, 48, 56 dp, avec un rembourrage de carte de 16 dp.
• Règles d'alignement : Le contenu s'aligne sur une ligne de repère de 72 dp depuis le bord gauche sur les listes avec des avatars et sur une ligne de repère de 16 dp sinon ; le bouton d'action flottant se trouve à 16 dp des bords droit et inférieur.
• Géométrie des conteneurs : Les cartes et les boutons utilisent un rayon de coin de 2 dp ; les boutons d'action flottants sont des cercles de 56 dp et les mini-boutons de 40 dp ; les boîtes de dialogue ont une largeur minimale de 280 dp.

Typographie

• Classifications : sans serif néo-grotesque · sans serif humaniste
• Tracking : Les tailles d'affichage de 34 sp et plus prennent 0 em à -0,01 em ; le corps prend +0,01 em ; les boutons sont en majuscules à +0,09 em.
• Interlignage : Titres 1,2 ; corps 1,4 à 1,5 à 14 sp sur une ligne de 20 dp ; texte de liste 24 dp pour 16 sp.
• Règles de hiérarchie :
  • Utilisez l'échelle 12, 14, 16, 20, 34, 45 et 56 sp et aucune taille entre ces valeurs.
  • Utilisez medium (500) pour les titres et les boutons, regular (400) pour le corps et light (300) pour les tailles d'affichage de 45 sp et plus.
  • Définissez le texte sur une surface à 87 % de noir pour le primaire, 54 % de noir pour le secondaire et 38 % de noir pour le désactivé.
  • Définissez les étiquettes de boutons en majuscules à 14 sp et poids 500.

Appariements de polices

Affichage	Corps	Note
Roboto	Roboto	La police système de Material 1 et 2, utilisée dans une seule famille du poids 300 à 900.
Roboto Condensed	Roboto	Une police d'affichage condensée pour les en-têtes denses avec la police de texte standard.
Noto Sans	Noto Sans	La famille de secours pour les écritures non latines dans les mêmes poids et métriques.

Couleur et éclairage

• Structure de palette : Une teinte primaire avec ses nuances 500 et 700, une teinte d'accent de la gamme A200 à A400, et des gris neutres ; la teinte primaire couvre la barre d'application et 10 à 20 % de la surface.
• Règles de contraste : Le texte du corps maintient au moins 4,5:1 et le grand texte au moins 3:1 ; le texte blanc sur Indigo 500 atteint 7,5:1 et sur Pink A200 atteint 3,4:1, ce qui est suffisant pour le texte de 18 sp uniquement.
• Traitement de surface : Remplissages plats opaques de couleur unie sans dégradé et sans texture ; les voiles utilisent du noir à 32 % d'opacité derrière les boîtes de dialogue.
• Lumière et ombre : Une lumière clé venant du haut et une lumière ambiante douce ; chaque ombre a une pénombre, une ombre propre et une couche ambiante, et son flou et son décalage augmentent avec l'élévation.

Palette

Nom	Hex	Rôle
Surface	#FFFFFF	surface de carte et de feuille
Fond	#FAFAFA	fond de page
Indigo 500	#3F51B5	primaire et barre d'application
Indigo 700	#303F9F	barre d'état
Pink A200	#FF4081	accent et bouton d'action flottant
Grey 900	#212121	texte à 87 % d'opacité

Matérialité et texture

• Simulation de surface : Papier numérique : une feuille plate de 1 dp d'épaisseur qui projette une ombre mais n'a ni grain, ni biseau, ni texture.
• Règles de bordure : Les surfaces n'ont pas de contour ; les séparateurs sont de 1 px noir à 12 % d'opacité en retrait de 72 dp ou 16 dp du bord ; les champs de texte prennent une ligne inférieure de 1 px qui passe à 2 px au focus.
• Flou et élévation : Les ombres d'élévation sont 0 1px 3px à 20 % plus 0 1px 1px à 14 % pour 1 dp, 0 4px 5px à 14 % et 0 1px 10px à 12 % pour 4 dp, et 0 9px 12px à 14 % pour 12 dp ; le système a 25 niveaux de 0 à 24 dp.

Ornementation et iconographie

• Iconographie : Icônes système de 24 dp sur une zone active de 20 dp avec un poids de trait de 2 dp, des terminaisons carrées avec des coins arrondis de 2 dp, un remplissage solide et une couleur à 54 % de noir.
• Illustration : Formes vectorielles plates dans la palette et photographie à pleine page sous un voile de 20 à 40 % ; pas de contour et pas de perspective.
• Éléments décoratifs : bouton d'action flottant · ondulation · ombres d'élévation · barre d'application en bloc de couleur · image héros à pleine page · carte

Mouvement et interactivité

• Né sur écran : oui
• Physique de transition : Les surfaces se déplacent le long de l'axe Z et du plan de l'écran avec des trajectoires courbes ; les éléments accélèrent rapidement et ralentissent doucement, et un élément partagé se déplace de son origine à sa destination.
• Easing : cubic-bezier(0.4, 0, 0.2, 1)
• Durée (ms) : 300
• Survol et actif : Le survol ajoute une superposition noire à 4 % ; l'appui montre une ondulation de 12 % de noir qui grandit à partir du point de contact sur 300 ms ; un bouton surélevé passe de 2 dp à 8 dp à l'appui.

Code et amorce de tokens

Définissez data-style="material-design" sur l'élément racine et collez les tokens. Le fichier tokens.css contient les mêmes tokens et un ensemble de règles de référence.

[data-style="material-design"] {
  --color-bg: #FAFAFA;
  --color-surface: #FFFFFF;
  --color-text: rgba(0, 0, 0, 0.87);
  --color-muted: rgba(0, 0, 0, 0.54);
  --color-primary: #3F51B5;
  --color-accent: #FF4081;
  --color-border: rgba(0, 0, 0, 0.12);
  --font-sans: "Roboto", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  --font-display: "Roboto", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  --border-radius: 2px;
  --border-width: 1px;
  --shadow-elevation: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
  --backdrop-filter: none;
  --space-unit: 8px;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --duration: 300ms;
  --color-primary-dark: #303F9F;
  --shadow-1dp: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12);
  --shadow-24dp: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12);
  --touch-target: 48px;
  --color-on-bg: #212121;
  --color-on-surface: #212121;
  --color-on-primary: #FAFAFA;
  --color-on-accent: #212121;
  --color-muted-on-bg: #737373;
  --color-muted-on-surface: #757575;
  --color-link: #3F51B5;
  --color-link-on-surface: #3F51B5;
  --display-weight: 300;
  --subhead-weight: 500;
  --body-weight: 400;
  --strong-weight: 500;
  --label-weight: 500;
  --display-tracking: 0em;
  --display-leading: 1.15;
  --display-case: none;
  --body-leading: 1.5;
  --body-size: 16px;
  --icon-stroke: 2;
}

Modèles Tailwind :

Élément	Classes
page	min-h-screen bg-[#FAFAFA] font-sans text-black/[0.87] antialiased
app-bar	flex h-14 md:h-16 items-center bg-[#3F51B5] px-4 text-xl font-medium text-white shadow-[0_2px_4px_-1px_rgba(0,0,0,0.2),0_4px_5px_0_rgba(0,0,0,0.14),0_1px_10px_0_rgba(0,0,0,0.12)]
card	rounded-sm bg-white p-4 shadow-[0_1px_3px_0_rgba(0,0,0,0.2),0_1px_1px_0_rgba(0,0,0,0.14),0_2px_1px_-1px_rgba(0,0,0,0.12)]
button	h-9 min-w-[64px] rounded-sm bg-[#3F51B5] px-4 text-sm font-medium uppercase tracking-[0.09em] text-white shadow-md transition-shadow duration-300 ease-[cubic-bezier(0.4,0,0.2,1)] hover:shadow-lg active:shadow-xl
fab	h-14 w-14 rounded-full bg-[#FF4081] text-white shadow-[0_3px_5px_-1px_rgba(0,0,0,0.2),0_6px_10px_0_rgba(0,0,0,0.14),0_1px_18px_0_rgba(0,0,0,0.12)]

Pack visuel

Les images et icônes de ce style sont des fichiers. Utilisez-les tels quels, ou lisez-les comme une spécification et dessinez les vôtres dans le même langage.

Fichier	Contenu
pack/hero.svg	Plaque héro, 800 par 600. Une image abstraite dans le langage visuel du style.
pack/pattern.svg	Carreau de motif, 80 par 80. Il se répète dans les deux directions.
pack/icons.svg	Sprite d'icônes : home, search, heart, star, bell, user, mail, calendar, image, bolt, play, check, close, sliders.

• Icônes : solides, trait 2 sur un champ de 24 px, embouts plats, jointures rondes, conteneur : aucun. Utilisation : <svg class="icon"><use href="pack/icons.svg#home"/></svg>. Une icône prend currentColor.
• Famille d'icônes : le sprite est tiré de Material Symbols (Baseline, rempli) par Google, licence Apache 2.0. Raison : L'ensemble système rempli du style lui-même, sur sa grille de 24 dp. C'est un substitut open-source pour une démo. Pour un produit, utilisez la bibliothèque d'icônes de la marque et choisissez la famille selon les règles ci-dessous.
• Type d'affichage : poids 300, tracking 0em, interlignage 1.15, casse : aucune.
• Poids : affichage 300, sous-titre 500, corps 400, gras dans le texte 500, étiquettes et boutons 500. Le style utilise 3 poids (300, 400, 500) et aucun autre. L'affichage est 100 plus léger que le corps, donc la taille porte la hiérarchie. L'accent est le poids : un mot plus lourd est l'accent, donc les étapes entre les poids sont claires.
• Type de corps : 16 px, interlignage 1.5.
• Page : héros divisé, aligné à gauche, densité régulière, inclinaison d'accent 0°.
• Couleur du texte : --color-text est pour le champ de lecture principal uniquement. Sur chaque champ, utilisez son token : --color-on-bg, --color-on-surface, --color-on-primary, --color-on-accent.

Comment choisir un pack d'icônes

Un pack d'icônes est une police de caractères pour les images. Choisissez-le avec le même soin que la police de texte. Ces règles tiennent pour un ensemble open-source et pour une bibliothèque sous licence.

1. Le trait correspond à la haste. Placez une icône à côté du texte du corps à la taille du texte. La ligne de l'icône et la haste d'une lettre ont le même poids.
2. Les terminaisons et les coins suivent le token de rayon. Les embouts plats et les jointures en onglet vont avec un rayon de zéro. Les embouts ronds et les jointures rondes vont avec un rayon doux.
3. Le mode de remplissage suit la technologie de l'époque. Les époques d'impression coupent les formes solides. Les époques d'écran avec profondeur remplissent et ombragent la forme. Les interfaces produits actuelles dessinent un contour.
4. Les métaphores ne sont pas plus jeunes que le style. Chaque image est un objet que l'époque connaissait. Une icône avec une métaphore plus récente casse la période.
5. Une famille, une grille. Toutes les icônes proviennent d'une seule famille et d'une seule variante, dessinées sur un seul champ. Ne mélangez pas les familles sur une même surface.
6. La famille couvre le produit. Listez chaque concept dont le produit a besoin avant de vous engager. Une famille qui n'a pas d'icône pour l'un d'eux est la mauvaise famille.
7. La couleur est un token. Une icône prend currentColor. Un deuxième ton provient d'un token, pas du fichier.
8. La licence permet l'utilisation. Lisez la licence de l'ensemble. Créditez là où la licence le demande. Un produit avec une marque utilise sa bibliothèque sous licence et applique les mêmes règles pour choisir la famille.

Replis de lignée

Lorsque l'utilisateur demande une variation, n'improvisez pas. Inclinez-vous vers le voisin nommé ici et chargez sa compétence.

• Si l'utilisateur demande plus plat : dirigez-vous vers flat-design (Flat Design). Supprimez toutes les ombres d'élévation, séparez les surfaces par couleur uniquement et conservez la palette de couleurs et la grille de 8 dp.
• Si l'utilisateur demande plus tactile : dirigez-vous vers skeuomorphism (Skeuomorphisme). Ajoutez un dégradé de 5 à 10 %, un surlignage interne de 1 px et une texture de surface à 5 % d'opacité ; conservez l'élévation et la mise en page.
• Si l'utilisateur demande plus neutre : dirigez-vous vers minimal-style (Style minimal). Enlevez toute la couleur d'accent, passez la couleur primaire au noir et réduisez l'échelle d'espacement à 4, 8, 16, 24 et 32 dp.
• Si l'utilisateur demande plus expressif : dirigez-vous vers postmodern (Postmoderne). Ajoutez une inclinaison d'accent de 3°, des remplissages bicolores et un mode d'affichage en casse mixte ; conservez l'échelle typographique et le remplissage de surface plat.
• Si l'utilisateur demande plus sombre : dirigez-vous vers material-dark (Material Dark). Échangez le fond contre le gris 900 de la palette et les surfaces pour le gris 800, et ajustez les contrastes du texte ; conservez l'élévation et la grille.