liquid-glass : chrome Liquid Glass Apple

Apple Liquid Glass — le langage de conception, sur n'importe quelle plateforme

Portée : toute interface devant arborer le look Liquid Glass d'Apple — une page web, une application web, une application de bureau Electron ou Tauri, une application Android ou Flutter, ou une application native Apple. Les règles de conception ci-dessous sont les mêmes partout ; seule la manière d'obtenir le fond, le flou et la courbure diffère. Choisissez d'abord la voie :

Construire pour	Voie
Web, Electron, Tauri, WebView	assets/tokens.css + assets/refraction.js (ce fichier et les références)
iOS, iPadOS, macOS 26+ natif	le matériau système : SwiftUI glassEffect, UIKit UIGlassEffect — jamais un faux
Android (Compose)	Recette Haze haze-glass
Flutter	BackdropFilter + ImageFilter.shader
Windows / Linux natif	dessinez-le dans l'application ; les matériaux de fenêtre (Mica, Acrylic) ne sont pas du Liquid Glass

Code par plateforme, limites de version et solutions de repli : references/platforms.md. Pour les flux d'application, la navigation et les spécifications d'écran, utilisez mobile-ux-designer.

Cette compétence existe pour que vous n'ayez jamais à redériver le langage de conception d'Apple à partir de zéro. Tout ce qui se trouve ici a été lu dans les propres Human Interface Guidelines d'Apple et ses figures, et non de mémoire ou à partir d'articles de blog sur Apple. Là où Apple ne spécifie pas réellement quelque chose, cette compétence le dit plutôt que d'inventer une règle — cette honnêteté est le point, car la plupart des travaux de style « Apple » échouent en appliquant avec confiance des règles inventées.

L'idée unique dont tout le reste découle

L'interface d'Apple comporte deux couches, et le langage entier vise à les garder distinctes :

• La couche de contenu — ce qui concerne réellement l'application. Opaque. Surfaces solides, ombres réelles, pas de verre. Le texte vit ici et ne doit jamais reposer sur un fond en mouvement.
• La couche fonctionnelle — barres d'outils, barres latérales, barres d'onglets, popovers, menus, contrôles flottants. C'est là que vit Liquid Glass. Il flotte au-dessus du contenu, le réfracte et n'entre jamais en compétition avec lui.

Apple le dit directement : « N'utilisez pas Liquid Glass dans la couche de contenu… l'inclure dans la couche de contenu peut entraîner une complexité inutile et une hiérarchie visuelle confuse. »

Si vous ne retenez qu'une chose : verre sur les chromes, jamais sur les cartes. L'échec le plus courant des travaux de style « Apple » est de tout givrer, ce qui détruit la hiérarchie que le matériau existe pour créer.

Résultat

Donnez à l'utilisateur ce qu'il a demandé — une page fixe, un diagnostic, un composant — à la longueur et dans le format qu'il a demandés. N'allongez pas une correction avec un exposé non sollicité sur la philosophie de conception, et n'omettez pas les véritables exigences pour rester concis : vérifiez le contraste, la taille des cibles tactiles et les solutions de repli ci-dessous, même lorsqu'on ne vous le demande pas, car un résultat qui a l'air correct mais qui échoue à ces vérifications est exactement le résultat « faux Apple » que cette compétence a pour but d'éviter.

Le raffinement de 2026 a aussi son importance. La page macOS 27 Golden Gate d'Apple (apple.com/os/macos, vérifiée le 2026-09-27) : « Les mises à jour de Liquid Glass garantissent une lisibilité exceptionnelle grâce à une réfraction plus uniforme et un contraste amélioré. » Elle mentionne également des barres d'outils uniformes, des barres latérales bord à bord et des formes de fenêtres mises à jour. Donc : teinte plus prononcée, bord de réfraction visible, une barre continue plutôt que des îlots flottants. Si vous construisez le verre fin et à peine visible de la première version, vous construisez la version qu'Apple a déjà corrigée.

Commencez par les tokens (web)

assets/tokens.css est une couche de tokens fonctionnelle — palettes claire et sombre, le primitif verre avec son bord de réfraction, l'effet de bord de défilement, et des solutions de repli pour la transparence réduite, le mouvement réduit et l'absence totale de support de backdrop-filter. Commencez par elle plutôt que de réinventer les valeurs, mais vérifiez-la par rapport au cahier des charges réel plutôt que de la coller sans la lire : vérifiez qu'elle répond toujours aux règles de contraste et de cible tactile ci-dessous dans votre contexte, et adaptez les valeurs (les couleurs surtout — Apple répète qu'elle peut les modifier d'une version à l'autre) plutôt que de citer le fichier comme une vérité absolue.

Deux choses dans ce fichier méritent d'être comprises plutôt que simplement utilisées :

Le primitif verre est un fond translucide teinté + backdrop-filter: saturate(180%) blur(28px) + un surlignage supérieur en incrustation. Le surlignage est ce qui se lit comme de la lumière courbée ; sans lui, la surface ressemble à une simple transparence, ce qui est le signe distinctif du glassmorphisme par imitation. Les propres figures du matériau d'Apple montrent un bord lumineux distinct qui suit le contour.

Le bord (.glass::before) est un anneau dégradé de 1px, le plus lumineux en haut à gauche, faible le long des côtés, à nouveau plus lumineux en bas à droite. Une bordure blanche uniforme se lit comme un autocollant ; le bord inégal se lit comme un biseau épais attrapant la lumière.

Le fond ambiant. Le verre a besoin de quelque chose derrière lui à réfracter, sinon il se rend comme un gris plat. Un dégradé subtil à plusieurs arrêts sur l'arrière-plan de la page donne au matériau quelque chose à faire. Apple obtient cela gratuitement grâce aux fonds d'écran et aux photos ; sur le web, vous devez le fournir.

Réfraction : la partie que le flou ne peut pas simuler

Apple : « Ce matériau translucide reflète et réfracte son environnement. » Zoomez sur n'importe laquelle des propres images d'Apple et les textes ou formes qui atteignent le bord d'un contrôle en verre se courbent et s'étirent le long de son contour, tandis que le milieu reste clair. C'est ce qui sépare Liquid Glass du glassmorphisme des années 2020, et c'est la première chose que les utilisateurs remarquent quand elle est absente. Construisez-la par défaut pour les contrôles en verre ; n'attendez pas qu'on vous le demande.

• Mécanisme (toutes les plateformes) : à l'intérieur d'une bande de bord, montrez le contenu provenant de plus loin vers l'intérieur, plus fort au niveau du contour, suivant la forme réelle (extrémités de capsule, coins arrondis).
• Web : ajoutez data-refract à un élément en verre et chargez assets/refraction.js. Dans les moteurs Chromium (Chrome, Edge, Android WebView, Electron, Tauri sur Windows), il courbe le fond en direct. Safari et Firefox ne peuvent pas exécuter de filtres url() dans backdrop-filter, donc pour le verre sur une zone connue, ajoutez data-refract-source="#id" : le script courbe une copie de cette zone à la place, dans tous les navigateurs. Le verre sans ni l'un ni l'autre conserve un simple flou. Donnez toujours une source au verre de démonstration ou héroïque, sinon la plupart des visiteurs (Safari, Firefox) ne verront aucune courbure.
• Le verre clair est celui où le texte se courbe visiblement (peu de flou) ; sur le verre ordinaire, la courbure apparaît dans les formes et les bords de couleur de l'image floutée.
• Le verre courbé obtient une teinte plus claire (--glass-refract) pour que la courbure soit visible. Le verre qui porte des mots — menus, popovers, feuilles, barres latérales — ajoute .glass-text pour conserver la teinte complète ; sinon, ses étiquettes peuvent tomber en dessous du contraste sur un contenu lumineux.
• Désactivé sous Transparence Réduite, jamais animé sous Mouvement Réduit.
• Vérifiez-le : placez le contrôle sur une ligne de texte et faites une capture d'écran. Les lettres au niveau du bord se courbent et s'étirent ; le milieu reste lisible.

Valeurs, tableau de réglage et méthode de test : references/materials.md (« Réfraction et le bord »). Voies Android, Flutter et natives : references/platforms.md.

Non-négociables

Ce sont les règles qui, lorsqu'elles sont enfreintes, font que le résultat ne semble pas être Apple.

1. Le verre uniquement dans la couche fonctionnelle. Les cartes de contenu obtiennent des surfaces opaques et des ombres.
2. La couleur est rationnée. Apple : « Appliquez la couleur avec parcimonie au matériau Liquid Glass… réservez-la aux éléments qui bénéficient vraiment d'un accent, comme les indicateurs d'état ou les actions principales. » Leur figure montre une barre d'outils avec trois boutons teintés marqués comme incorrects, et la même barre d'outils avec seulement l'action principale teintée marquée comme correcte. Une chose colorée par barre.
3. L'accent est mis sur le fond, pas sur le glyphe. « Pour mettre en évidence les actions principales, appliquez la couleur au fond plutôt qu'aux symboles ou au texte. » L'exception est un onglet sélectionné : là, Apple colore l'icône et l'étiquette et laisse la barre neutre.
4. Traits fins, pas de bordures. Les séparateurs font 0,5 px à environ 12 % d'opacité, et dans les listes, ils s'insèrent après l'icône principale. Une bordure grise solide de 1 px est un idiome web, pas un idiome Apple.
5. Pas de poids de police légers. Apple : « préférez les poids de police Regular, Medium, Semibold ou Bold, et évitez Ultralight, Thin et Light. »
6. Casse de phrase, pas de majuscules avec espacement. Les micro-étiquettes en majuscules avec un large espacement entre les lettres sont un idiome de tableau de bord/éditorial. Les en-têtes de section d'Apple sont en casse de phrase et reposent sur le poids et la couleur.
7. Hiérarchie par la taille, le poids et la couleur — jamais par les règles et les boîtes. Les titres ne sont pas soulignés et les sections ne sont pas encadrées. La propre figure de Mail d'Apple construit quatre niveaux uniquement à partir de ces trois variables.
8. Les icônes sont tout ou rien dans un groupe. La règle de menu d'Apple : « soit chaque élément d'un groupe a une icône, soit aucun n'en a. » Les listes à moitié icônes semblent inachevées.
9. Chaque contrôle personnalisé nécessite un état de pression. Apple le mentionne explicitement — sans cela, un contrôle « peut sembler insensible ».
10. Le contenu s'étend sous le chrome. Utilisez l'effet de bord de défilement pour que le contenu se dissolve lorsqu'il passe sous une barre, et étendez l'arrière-plan sous les barres latérales (voir ci-dessous). Le contenu qui s'arrête net au bord d'une barre latérale est ce que la propre paire de figures correct/incorrect d'Apple montre.
11. Chaque utilisation de backdrop-filter nécessite un repli opaque @supports not (...) , distinct de la requête média pour la transparence réduite — l'un gère l'absence de support du navigateur, l'autre un paramètre utilisateur. L'omettre est un bug courant et facile à manquer : la barre se rend silencieusement trop transparente sans flou.
12. Le verre se courbe et a un bord. Un contrôle en verre avec une bordure blanche uniforme de 1 px et sans réfraction est du glassmorphisme, pas du Liquid Glass. Utilisez le dégradé de bord et la réfraction là où la plateforme le permet, et un repli de flou propre là où ce n'est pas le cas.
13. Les cibles tactiles font au moins 44×44 pt sur iOS (macOS est plus dense mais nécessite néanmoins une cible de clic confortable). Les actions destructrices (supprimer, supprimer le compte) obtiennent le rôle destructeur/rouge, jamais un rôle neutre.

Typographie

L'échelle d'Apple n'est pas décorative — c'est une échelle fixe, et s'y tenir est l'essentiel de ce qui rend la typographie native. Le style par défaut d'iOS (Grand) :

Style	Poids	Taille	Interlignage
Large Title	Regular	34	41
Title 1	Regular	28	34
Title 2	Regular	22	28
Title 3	Regular	20	25
Headline	Semibold	17	22
Body	Regular	17	22
Callout	Regular	16	21
Subhead	Regular	15	20
Footnote	Regular	13	18
Caption 1	Regular	12	16
Caption 2	Regular	11	13

macOS utilise une échelle plus serrée (Body 13/16, Large Title 26/32) et son Headline est en Gras plutôt qu'en Semi-gras. Une mise en page web centrée sur le bureau souhaite généralement quelque chose entre les deux : les tailles iOS pour les titres et le texte de lecture, la densité macOS pour les barres latérales et les métadonnées.

Les minimums sont réels : iOS 11 pt, macOS 10 pt. En dessous, Apple considère le texte comme illisible, et les pixels web sont plus petits que les points, alors traitez ~11 px comme votre plancher.

Pile de polices : -apple-system, BlinkMacSystemFont, 'SF Pro Text', … donne le vrai SF sur le matériel Apple. Partout ailleurs, vous avez besoin d'un remplacement — Inter est le substitut disponible le plus proche. Ne liez jamais SF depuis un CDN ; il n'est pas sous licence pour cela.

L'espacement des lettres d'Apple est compensé optiquement par taille : lâche en dessous de 12 pt, nul à exactement 12 pt, le plus serré autour de 19-20 pt (≈ −0,45 pt), puis positif à partir d'environ 24 pt (+0,40 pt à 29-34 pt) avant de décroître jusqu'à zéro aux tailles d'affichage. La police système applique cela elle-même sur le matériel Apple. Les valeurs web dans le fichier de tokens (-0.022em pour les titres, -0.012em pour le corps, 0 pour les légendes) sont une convention web qui empêche les polices de remplacement comme Inter de sembler lâches — pas une conversion du tableau d'Apple, donc ne les citez pas comme étant celles d'Apple.

Tableaux complets, courbe d'espacement et appariement poids/échelle SF Symbols : references/typography.md.

Couleur

Apple fournit des valeurs exactes, mais dit aussi « Évitez de coder en dur les valeurs des couleurs système… Les valeurs de couleur réelles peuvent fluctuer d'une version à l'autre. » Utilisez-les donc comme des points d'ancrage, pas comme des vérités absolues.

L'ensemble sémantique est plus utile que la palette : label / secondaryLabel / tertiaryLabel / quaternaryLabel pour le texte, separator pour les traits fins, et deux familles d'arrière-plan — système et groupée — chacune avec primaire / secondaire / tertiaire. La version groupée est celle à utiliser lorsque le contenu se trouve dans des cartes : la page prend l'arrière-plan groupé (un gris clair) et les cartes prennent le blanc. Cette inversion de la valeur par défaut du web — page grise, cartes blanches — est une grande partie de la raison pour laquelle les mises en page d'Apple ressemblent à Apple.

Le mode sombre n'est pas une inversion. Apple utilise des surfaces base et surélevée : un presque noir pour la couche la plus en retrait, un charbon nettement plus clair pour tout ce qui doit sembler surélevé. Peindre tout en noir pur est faux, et la propre paire de figures d'Apple le démontre.

Minimums de contraste, énoncés par Apple : 4,5:1 jusqu'à 17 pt, 3:1 à 18 pt et au-dessus, 3:1 pour le gras à toute taille.

Valeurs RVB exactes pour chaque couleur système dans les variantes claire, sombre et les deux variantes à contraste accru, ainsi que la liste sémantique complète pour iOS et macOS : references/color.md.

Matériau

Deux variantes, et choisir la mauvaise est visible :

• Regular — floute et ajuste la luminosité de ce qui se trouve derrière lui. Presque tout utilise cela. Dans les figures d'Apple, il est presque opaque ; l'arrière-plan se lit comme une couleur douce, pas comme une image.
• Clear — hautement translucide, pour les contrôles flottant sur les photos et vidéos où le média doit rester proéminent. Si le contenu derrière est lumineux, Apple spécifie une couche d'atténuation sombre à 35 % d'opacité en dessous pour que les étiquettes survivent.

Le matériau s'adapte également : sur un contenu clair, le verre et ses symboles deviennent sombres ; sur un contenu sombre, ils deviennent clairs. Sur le web, cela signifie que vos tokens de verre ont besoin de valeurs réellement différentes par thème, et non d'une seule valeur avec une opacité différente.

Recettes, les quatre matériaux standard et les niveaux de vibrancy : references/materials.md.

Composants

Les formes des composants véhiculent une grande partie du signal. La version courte :

• Barre d'outils — une barre uniforme, monochromatique, actions sous forme de pastilles circulaires ou de capsules, actions connexes regroupées dans une capsule partagée. Le titre (et un sous-titre facultatif) peut y vivre.
• Barre latérale — bord à bord, verre, icônes SF Symbol teintées avec la couleur d'accentuation, sélection arrondie…

… [tronqué pour la traduction]