{"comparisons":[{"checklist":[{"en":"Does glass affect content or controls only?","fr":"Le verre touche-t-il le contenu ou uniquement les contrôles ?"},{"en":"Is the backdrop decorative and chosen, or genuinely dynamic?","fr":"Le fond est-il décoratif et choisi, ou réellement dynamique ?"},{"en":"Does the implementation use an official Apple API?","fr":"L’implémentation utilise-t-elle une API Apple officielle ?"}],"chooseLeft":{"en":"Choose glassmorphism for decorative cards or panels over a backdrop you control.","fr":"Choisis le glassmorphism pour des cartes ou panneaux décoratifs sur un fond que tu contrôles."},"chooseRight":{"en":"Choose Liquid Glass in an Apple app for a native control layer above content.","fr":"Choisis Liquid Glass dans une application Apple pour une couche de contrôle native au-dessus du contenu."},"decisiveDifference":{"en":"Glassmorphism decorates content surfaces. Liquid Glass reserves an adaptive material for Apple controls and navigation.","fr":"Le glassmorphism habille des surfaces de contenu. Liquid Glass réserve un matériau adaptatif aux contrôles et à la navigation Apple."},"dimensions":[{"label":{"en":"Treated surface","fr":"Surface traitée"},"left":{"en":"Cards, panels, and sometimes primary content.","fr":"Cartes, panneaux et parfois contenu principal."},"right":{"en":"Controls, bars, and navigation only.","fr":"Contrôles, barres et navigation uniquement."}},{"label":{"en":"Material","fr":"Matériau"},"left":{"en":"Generic visual recipe based on transparency and blur.","fr":"Recette visuelle générique fondée sur transparence et flou."},"right":{"en":"Adaptive material defined by Apple and exposed through its APIs.","fr":"Matériau adaptatif défini par Apple et exposé par ses API."}},{"label":{"en":"Backdrop relationship","fr":"Relation au fond"},"left":{"en":"A vivid backdrop is chosen to color the panels.","fr":"Un fond vif est choisi pour colorer les panneaux."},"right":{"en":"The material adapts to real content scrolling underneath.","fr":"Le matériau s’adapte au contenu réel qui défile dessous."}},{"label":{"en":"Implementation","fr":"Implémentation"},"left":{"en":"Possible in CSS with an opaque fallback and contrast control.","fr":"CSS possible avec fallback opaque et contrôle du contraste."},"right":{"en":"Native API on Apple. Any web version remains an approximation.","fr":"API native sur Apple. Toute version web reste une approximation."}}],"leftSlug":"glassmorphism","rightSlug":"liquid-glass","slug":"glassmorphism-vs-liquid-glass"},{"checklist":[{"en":"Would the page still work with almost no CSS?","fr":"La page fonctionnerait-elle encore avec presque aucun CSS ?"},{"en":"Are shadows solid offset blocks?","fr":"Les ombres sont-elles des blocs pleins décalés ?"},{"en":"Does document structure or graphic styling carry the identity?","fr":"La structure documentaire ou le costume graphique porte-t-il l’identité ?"}],"chooseLeft":{"en":"Choose Neobrutalism for an expressive graphic identity built from fills, outlines, and hard shadows.","fr":"Choisis le Neobrutalism pour une identité graphique expressive faite d’aplats, de contours et d’ombres dures."},"chooseRight":{"en":"Choose Web Brutalism for a dense, fast document built with native browser elements.","fr":"Choisis le Web Brutalism pour un document dense, rapide et construit avec les éléments natifs du navigateur."},"decisiveDifference":{"en":"Neobrutalism designs a raw-looking appearance with substantial CSS. Web Brutalism genuinely exposes web structure and native materials.","fr":"Le Neobrutalism dessine une apparence brute avec beaucoup de CSS. Le Web Brutalism expose réellement la structure et les matériaux natifs du web."},"dimensions":[{"label":{"en":"Intent","fr":"Intention"},"left":{"en":"Compose a deliberate and recognizable graphic language.","fr":"Composer un langage graphique volontaire et reconnaissable."},"right":{"en":"Let structure, content, and native materials dominate.","fr":"Laisser la structure, le contenu et les matériaux natifs dominer."}},{"label":{"en":"Borders","fr":"Bordures"},"left":{"en":"Thick uniform dark strokes on almost every object.","fr":"Traits sombres épais et uniformes sur presque chaque objet."},"right":{"en":"Native borders or simple rules when they serve structure.","fr":"Bordures natives ou traits simples lorsqu’ils servent la structure."}},{"label":{"en":"Depth","fr":"Profondeur"},"left":{"en":"Solid offset shadows without blur.","fr":"Ombres pleines décalées sans flou."},"right":{"en":"No decorative depth.","fr":"Pas de profondeur décorative."}},{"label":{"en":"Color","fr":"Couleur"},"left":{"en":"Saturated fills chosen as brand elements.","fr":"Aplats saturés choisis comme éléments de marque."},"right":{"en":"Restrained palette or browser-default colors.","fr":"Palette sobre ou couleurs par défaut du navigateur."}}],"leftSlug":"neobrutalism","rightSlug":"web-brutalism","slug":"neobrutalism-vs-web-brutalism"},{"checklist":[{"en":"Can you name the real material being imitated?","fr":"Peux-tu nommer la matière réelle imitée ?"},{"en":"Do all elements share exactly the backdrop color?","fr":"Tous les éléments partagent-ils exactement la couleur du fond ?"},{"en":"Do states remain readable without interpreting shadows?","fr":"Les états restent-ils lisibles sans interpréter les ombres ?"}],"chooseLeft":{"en":"Choose neumorphism for a few soft secondary controls on one constant matte surface.","fr":"Choisis le neumorphism pour quelques contrôles doux et secondaires sur une surface mate constante."},"chooseRight":{"en":"Choose skeuomorphism when a real object or material helps explain use.","fr":"Choisis le skeuomorphism lorsqu’un objet ou une matière réelle aide à comprendre l’usage."},"decisiveDifference":{"en":"Neumorphism molds all controls into one abstract surface. Skeuomorphism imitates real materials and objects that can be named.","fr":"Le neumorphism moule tous les contrôles dans une surface abstraite unique. Le skeuomorphism imite des matériaux et objets réels que l’on peut nommer."},"dimensions":[{"label":{"en":"Material","fr":"Matière"},"left":{"en":"One-color abstract matte surface.","fr":"Surface abstraite et mate d’une seule couleur."},"right":{"en":"Paper, leather, metal, or another recognizable material.","fr":"Papier, cuir, métal ou autre matière reconnaissable."}},{"label":{"en":"Depth construction","fr":"Construction du relief"},"left":{"en":"Two very soft shadows, then their inversion for pressed state.","fr":"Deux ombres très douces, puis leur inversion en état pressé."},"right":{"en":"Highlights, bevels, textures, and shadows adapted to the imitated object.","fr":"Reflets, biseaux, textures et ombres adaptés à l’objet imité."}},{"label":{"en":"Colors","fr":"Couleurs"},"left":{"en":"Background and controls share the same color.","fr":"Fond et contrôles partagent la même teinte."},"right":{"en":"The palette follows the real material or object.","fr":"La palette découle du matériau ou de l’objet réel."}},{"label":{"en":"Primary risk","fr":"Risque principal"},"left":{"en":"Nearly invisible affordances and states.","fr":"Affordances et états presque invisibles."},"right":{"en":"Heavy decoration that hides text or function.","fr":"Décor chargé qui masque le texte ou la fonction."}}],"leftSlug":"neumorphism","rightSlug":"skeuomorphism","slug":"neumorphism-vs-skeuomorphism"},{"checklist":[{"en":"Does the change concern rendering or content quantity?","fr":"Le changement concerne-t-il le rendu ou la quantité de contenu ?"},{"en":"Does the page remain dense despite the lack of volume?","fr":"La page reste-t-elle dense malgré l’absence de volume ?"},{"en":"Was necessary information removed?","fr":"Des informations nécessaires ont-elles été retirées ?"}],"chooseLeft":{"en":"Choose Flat Design to simplify rendering while retaining a potentially dense interface.","fr":"Choisis le Flat Design pour simplifier le rendu tout en conservant une interface potentiellement dense."},"chooseRight":{"en":"Choose minimalism to reduce visible decisions, messages, and functions around one primary goal.","fr":"Choisis le minimalisme pour réduire les décisions, messages et fonctions visibles autour d’un objectif principal."},"decisiveDifference":{"en":"Flat Design describes how surfaces are rendered. Minimalism describes how many elements remain and how attention is organized.","fr":"Le Flat Design décrit comment les surfaces sont rendues. Le minimalisme décrit combien d’éléments restent et comment l’attention est organisée."},"dimensions":[{"label":{"en":"Primary axis","fr":"Axe principal"},"left":{"en":"Visual rendering of surfaces and controls.","fr":"Rendu visuel des surfaces et contrôles."},"right":{"en":"Content quantity, priority, and composition.","fr":"Quantité, priorité et composition du contenu."}},{"label":{"en":"Density","fr":"Densité"},"left":{"en":"Can remain very high.","fr":"Peut rester très élevée."},"right":{"en":"Reduced through selection and prioritization.","fr":"Réduite par sélection et hiérarchisation."}},{"label":{"en":"Depth","fr":"Profondeur"},"left":{"en":"Texture and simulated depth are removed.","fr":"Texture et profondeur simulée sont retirées."},"right":{"en":"May retain light depth when it serves the journey.","fr":"Peut conserver une profondeur légère si elle sert le parcours."}},{"label":{"en":"Typical failure","fr":"Échec typique"},"left":{"en":"Flat controls becoming ambiguous.","fr":"Contrôles plats devenus ambigus."},"right":{"en":"Useful information removed in the name of emptiness.","fr":"Informations utiles supprimées au nom du vide."}}],"leftSlug":"flat-design","rightSlug":"minimalism","slug":"flat-design-vs-minimalism"}],"schemaVersion":"1.0","sourceRevision":"1.2.2","styles":[{"accessibility":[{"en":"Measure contrast against the worst backdrop region, not its average color.","fr":"Mesurer le contraste sur la région la plus défavorable du fond, pas sur sa couleur moyenne."},{"en":"Provide a near-opaque surface when transparency or blur is unavailable.","fr":"Fournir une surface quasi opaque lorsque la transparence ou le flou sont indisponibles."},{"en":"Do not let blur be the only signal separating two interactive regions.","fr":"Éviter que le flou soit le seul signal séparant deux zones interactives."}],"aliases":["frosted glass UI","frosted panels"],"briefs":{"create":{"en":"Create this surface with glassmorphism. Use semi-transparent panels with backdrop-filter, a visible colorful backdrop, a 1px light edge, and soft shadows. Provide a near-opaque fallback when blur or transparency is reduced.","fr":"Crée cette surface en glassmorphism. Utilise des panneaux semi-transparents avec backdrop-filter, un fond coloré visible, un bord clair de 1 px et des ombres douces. Prévois un fond quasi opaque lorsque le flou ou la transparence sont réduits."},"modify":{"en":"Modify only the visual layer of the existing cards. Preserve structure and components, then add transparency, blur, a light edge, and depth. Check contrast against the lightest backdrop region.","fr":"Modifie uniquement la couche visuelle des cartes existantes. Conserve la structure et les composants, puis ajoute transparence, flou, bord clair et profondeur. Vérifie le contraste sur la zone la plus claire du fond."},"repair":{"en":"Repair this glassmorphism without adding more glass. Make the backdrop visible, limit the treatment to secondary surfaces, increase opacity behind text, and add a fallback without backdrop-filter.","fr":"Répare ce glassmorphism sans ajouter plus de verre. Rends le fond visible, limite le traitement aux surfaces secondaires, augmente l’opacité derrière le texte et ajoute un fallback sans backdrop-filter."}},"identification":{"en":"Translucent blurred cards placed over a vivid backdrop.","fr":"Des cartes translucides et floutées posées sur un fond très coloré."},"misuse":[{"en":"Stacking text, forms, and glass cards over an unpredictable backdrop.","fr":"Empiler du texte, des formulaires et des cartes vitrées sur un fond imprévisible."},{"en":"Applying glass to every surface until hierarchy disappears.","fr":"Appliquer le verre à toutes les surfaces jusqu’à perdre la hiérarchie."}],"name":"Glassmorphism","scope":{"en":"This style covers generic glass surfaces such as cards and dashboards. It does not name Apple’s adaptive Liquid Glass material.","fr":"Ce style couvre les surfaces vitrées génériques, comme les cartes et tableaux de bord. Il ne désigne pas le matériau adaptatif Liquid Glass d’Apple."},"signals":[{"category":"surface","description":{"en":"A semi-transparent surface blurs what passes behind it without hiding it completely.","fr":"Une surface semi-transparente floute ce qui passe derrière elle sans le masquer complètement."},"id":"frosted-panels","label":{"en":"Frosted panels","fr":"Panneaux givrés"}},{"category":"color","description":{"en":"An image or saturated gradient remains visible through the panels and carries the palette.","fr":"Une image ou un dégradé saturé reste lisible à travers les panneaux et porte la palette."},"id":"vivid-backdrop","label":{"en":"Visible vivid backdrop","fr":"Fond coloré visible"}},{"category":"geometry","description":{"en":"A subtle light stroke separates the glass from neighboring surfaces.","fr":"Un trait clair et discret sépare le verre des surfaces voisines."},"id":"light-edge","label":{"en":"Thin light edge","fr":"Bord clair fin"}},{"category":"depth","description":{"en":"Wide soft shadows show several stacked sheets of glass.","fr":"Des ombres larges et douces montrent plusieurs feuilles de verre superposées."},"id":"floating-layers","label":{"en":"Floating layers","fr":"Couches flottantes"}}],"slug":"glassmorphism","sources":[{"publisher":"Nielsen Norman Group","sourceId":"source-editorial-nng-glassmorphism","title":"Glassmorphism: Definition and Best Practices","url":"https://www.nngroup.com/articles/glassmorphism/"},{"publisher":"MDN Web Docs","sourceId":"source-editorial-mdn-backdrop-filter","title":"backdrop-filter","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/backdrop-filter"},{"publisher":"W3C Web Accessibility Initiative","sourceId":"source-editorial-w3c-contrast-minimum","title":"Understanding Success Criterion 1.4.3: Contrast (Minimum)","url":"https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html"}],"status":"industry-coined-trend","summary":{"en":"Glassmorphism uses translucent panels, backdrop blur, and a light edge to create decorative depth. The backdrop visible through the glass supplies much of the palette.","fr":"Le glassmorphism utilise des panneaux translucides, un flou d’arrière-plan et un bord clair pour créer une profondeur décorative. Le fond visible à travers le verre fournit une grande partie de la palette."},"useCases":[{"en":"An editorial or media surface with a controlled backdrop and little critical text.","fr":"Une surface éditoriale ou média avec un fond maîtrisé et peu de texte critique."},{"en":"A secondary layer that should remain visually connected to the content behind it.","fr":"Une couche secondaire qui doit rester visuellement liée au contenu situé derrière."}]},{"accessibility":[{"en":"Test legibility over every kind of content that may scroll under the material.","fr":"Tester la lisibilité sur chaque type de contenu susceptible de défiler sous le matériau."},{"en":"Honor Reduce Transparency and Reduce Motion settings.","fr":"Respecter les réglages Réduire la transparence et Réduire les animations."},{"en":"Keep focus and selection states that do not depend on refraction alone.","fr":"Conserver des états de focus et de sélection qui ne dépendent pas seulement de la réfraction."}],"aliases":["Apple Liquid Glass","iOS 26 glass design"],"briefs":{"create":{"en":"Create this interface with native Liquid Glass APIs on Apple platforms. Reserve the material for floating controls and navigation. Keep content opaque, readable, and structurally independent from the material.","fr":"Crée cette interface avec les API Liquid Glass natives sur plateforme Apple. Réserve le matériau aux contrôles et à la navigation flottante. Garde le contenu opaque, lisible et structurellement indépendant du matériau."},"modify":{"en":"Modify existing bars and controls to adopt Liquid Glass without turning content cards into glass. Reuse system components, coherent capsules, and the platform’s adaptive behavior.","fr":"Modifie les barres et contrôles existants pour adopter Liquid Glass sans transformer les cartes de contenu. Réutilise les composants système, des capsules cohérentes et les comportements adaptatifs de la plateforme."},"repair":{"en":"Repair this implementation by removing glass from content surfaces. On Apple, replace imitations with system APIs. On the web, label it as an approximation and add an opaque fallback.","fr":"Répare cette implémentation en retirant le verre des surfaces de contenu. Sur Apple, remplace les imitations par les API système. Sur le web, indique qu’il s’agit d’une approximation et ajoute un fond opaque de secours."}},"identification":{"en":"Apple controls float like lenses above opaque content.","fr":"Les contrôles Apple flottent comme des lentilles au-dessus d’un contenu opaque."},"misuse":[{"en":"Presenting a CSS blur and transparency recipe as an official Apple API.","fr":"Présenter une combinaison CSS de flou et de transparence comme une API Apple officielle."},{"en":"Making content cards transparent instead of limiting glass to controls.","fr":"Rendre les cartes de contenu transparentes au lieu de limiter le verre aux contrôles."}],"name":"Liquid Glass","scope":{"en":"The name refers to an Apple vendor language and APIs. On the web, any reproduction remains an approximation and must be labeled as such.","fr":"Le nom désigne un langage fournisseur et des API Apple. Sur le web, toute reproduction reste une approximation qui doit être présentée comme telle."},"signals":[{"category":"layout","description":{"en":"Bars, buttons, and navigation float above content that remains opaque.","fr":"Barres, boutons et navigation flottent au-dessus d’un contenu qui reste opaque."},"id":"control-layer","label":{"en":"Glass reserved for controls","fr":"Verre réservé aux contrôles"}},{"category":"depth","description":{"en":"Edges concentrate light and suggest refraction richer than a simple blur.","fr":"Les contours concentrent la lumière et suggèrent une réfraction plus riche qu’un simple flou."},"id":"lensing","label":{"en":"Lensing effect","fr":"Effet de lentille"}},{"category":"color","description":{"en":"The material adjusts its appearance to the content passing underneath.","fr":"Le matériau ajuste son apparence selon le contenu qui passe dessous."},"id":"adaptive-tint","label":{"en":"Adaptive tint","fr":"Teinte adaptative"}},{"category":"geometry","description":{"en":"Controls use capsules and nested radii that share an optical center.","fr":"Les contrôles utilisent des capsules et des rayons imbriqués partageant un même centre optique."},"id":"capsule-geometry","label":{"en":"Concentric capsules","fr":"Capsules concentriques"}}],"slug":"liquid-glass","sources":[{"publisher":"Apple Developer","sourceId":"source-editorial-apple-liquid-glass","title":"Liquid Glass","url":"https://developer.apple.com/documentation/technologyoverviews/liquid-glass"},{"publisher":"Apple Human Interface Guidelines","sourceId":"source-editorial-apple-hig-materials","title":"Materials","url":"https://developer.apple.com/design/human-interface-guidelines/materials"},{"publisher":"W3C Web Accessibility Initiative","sourceId":"source-editorial-w3c-contrast-minimum","title":"Understanding Success Criterion 1.4.3: Contrast (Minimum)","url":"https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html"}],"status":"vendor-design-language","summary":{"en":"Liquid Glass is Apple’s adaptive material for controls and navigation. It visually lenses underlying content, adapts its tint, and reserves glass for the control layer.","fr":"Liquid Glass est le matériau adaptatif introduit par Apple pour les contrôles et la navigation. Il réfracte visuellement le contenu situé dessous, ajuste sa teinte et réserve le verre à la couche de commande."},"useCases":[{"en":"An Apple app using system navigation and control components.","fr":"Une application Apple qui utilise les composants système de navigation et de commande."},{"en":"A control layer that must remain distinct from scrolling content.","fr":"Une couche de contrôle qui doit rester distincte du contenu défilant."}]},{"accessibility":[{"en":"Keep link underlines, visited states, and focus outlines.","fr":"Conserver les soulignements, les états visités et les contours de focus des liens."},{"en":"Maintain readable text and touch target sizes despite the density.","fr":"Maintenir des tailles de texte et des cibles tactiles lisibles malgré la densité."},{"en":"Use real headings, lists, and table headers to match the visible structure.","fr":"Utiliser de vrais titres, listes et en-têtes de tableau pour refléter la structure visible."}],"aliases":["brutalist web design","raw web"],"briefs":{"create":{"en":"Create a strict Web Brutalist page with semantic HTML, system typography, underlined links, and visible document structure. Keep CSS minimal and remove shadows, gradients, decorative radii, and imitation materials.","fr":"Crée une page en Web Brutalism strict avec HTML sémantique, typographie système, liens soulignés et structure documentaire visible. Garde le CSS minimal et retire ombres, gradients, rayons décoratifs et fausses matières."},"modify":{"en":"Modify the page without rewriting its content. Let headings, lists, tables, and links carry hierarchy, then remove decorative layers that hide structure.","fr":"Modifie la page sans réécrire son contenu. Rends les titres, listes, tableaux et liens responsables de la hiérarchie, puis supprime les couches décoratives qui cachent la structure."},"repair":{"en":"Repair this page by restoring readability, target sizes, heading hierarchy, and table headers. Visual rawness does not justify broken structure or ambiguous controls.","fr":"Répare cette page en restaurant la lisibilité, les tailles de cible, les titres hiérarchiques et les en-têtes de tableau. La brutalité visuelle ne justifie ni une structure cassée ni des contrôles ambigus."}},"identification":{"en":"A dense page that leaves browser-default materials visible.","fr":"Une page dense qui laisse visibles les matériaux par défaut du navigateur."},"misuse":[{"en":"Intentionally breaking accessibility to make the page feel old.","fr":"Casser volontairement l’accessibilité pour donner une impression de page ancienne."},{"en":"Adding loud colors, thick borders, and offset shadows, which shifts into Neobrutalism.","fr":"Ajouter couleurs criardes, bordures épaisses et ombres décalées, ce qui bascule vers le Neobrutalism."}],"name":"Web Brutalism","scope":{"en":"The label remains contested. Here it describes deliberate use of raw web materials. The saturated graphic style with thick outlines and hard shadows is classified as Neobrutalism.","fr":"Le label reste contesté. Ici, il décrit l’usage volontaire de matériaux web bruts. Le style graphique à couleurs saturées, contours épais et ombres dures est classé comme Neobrutalism."},"signals":[{"category":"typography","description":{"en":"System fonts, clearly underlined links, and controls close to native rendering remain visible.","fr":"Polices système, liens franchement soulignés et contrôles proches de leur rendu natif restent visibles."},"id":"browser-materials","label":{"en":"Browser materials","fr":"Matériaux du navigateur"}},{"category":"layout","description":{"en":"Headings, lists, tables, and separators directly carry the layout.","fr":"Titres, listes, tableaux et séparateurs portent directement la mise en page."},"id":"document-structure","label":{"en":"Document structure","fr":"Structure documentaire"}},{"category":"depth","description":{"en":"No blurred shadow, decorative gradient, imitation material, or simulated volume.","fr":"Pas d’ombre floue, de gradient décoratif, de faux matériau ou de volume simulé."},"id":"zero-decoration","label":{"en":"No decorative rendering","fr":"Aucun rendu décoratif"}},{"category":"layout","description":{"en":"Information stays compact and immediately navigable, without theatrical spacing.","fr":"L’information reste compacte et immédiatement navigable, sans espace théâtral."},"id":"useful-density","label":{"en":"Useful density","fr":"Densité utile"}}],"slug":"web-brutalism","sources":[{"publisher":"Smashing Magazine","sourceId":"source-editorial-smashing-brutalist-web-development","title":"The Split Personality of Brutalist Web Development","url":"https://www.smashingmagazine.com/2020/01/split-personality-brutalist-web-development/"},{"publisher":"Brutalist Websites","sourceId":"source-editorial-brutalist-websites","title":"Brutalist Websites","url":"https://brutalistwebsites.com/"},{"publisher":"W3C Web Accessibility Initiative","sourceId":"source-editorial-w3c-contrast-minimum","title":"Understanding Success Criterion 1.4.3: Contrast (Minimum)","url":"https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html"}],"status":"contested-label","summary":{"en":"Strict Web Brutalism treats HTML structure, underlined links, system typography, and simple borders as a finish. Its strength comes from honesty, speed, and document-first priorities.","fr":"Le Web Brutalism strict traite la structure HTML, les liens soulignés, la typographie système et les bordures simples comme une finition. Sa force vient de la franchise, de la vitesse et de la priorité donnée au document."},"useCases":[{"en":"A document, index, or archive where speed and density matter more than decoration.","fr":"Un document, un index ou une archive où vitesse et densité priment sur l’habillage."},{"en":"An identity that embraces native web materials and transparent structure.","fr":"Une identité qui revendique les matériaux natifs du web et une structure transparente."}]},{"accessibility":[{"en":"Check text contrast on every saturated fill.","fr":"Vérifier le contraste du texte sur chaque aplat saturé."},{"en":"Add a focus treatment distinct from the existing thick borders.","fr":"Ajouter un focus distinct des bordures épaisses déjà présentes."},{"en":"Do not use the offset shadow as the only signal for pressed or disabled states.","fr":"Ne pas utiliser l’ombre décalée comme seul signal d’un état pressé ou désactivé."}],"aliases":["neo-brutalism","neubrutalism","neo brutalist UI"],"briefs":{"create":{"en":"Create this interface with Neobrutalism using saturated fills, a uniform 2 to 3px dark stroke, solid offset shadows without blur, and heavy headings. Keep body text simple and highly contrasted.","fr":"Crée cette interface en Neobrutalism avec des aplats saturés, un trait sombre uniforme de 2 à 3 px, des ombres pleines décalées sans flou et des titres massifs. Garde le texte courant simple et très contrasté."},"modify":{"en":"Preserve existing components and hierarchy. Replace blurred shadows with crisp offsets, apply one outline rule, and limit the palette to a few coherent flat fills.","fr":"Conserve les composants et la hiérarchie existants. Remplace les ombres floues par des décalages nets, applique une seule règle de contour et limite la palette à quelques aplats cohérents."},"repair":{"en":"Repair the system by harmonizing outline width, shadow offset, and pressed states. Reduce the number of colors and ensure focus remains visible beside the borders.","fr":"Répare le système en harmonisant l’épaisseur des contours, le décalage des ombres et les états pressés. Réduis le nombre de couleurs et assure un focus visible qui ne se confond pas avec les bordures."}},"identification":{"en":"Saturated blocks, thick black outlines, and crisp shadows without blur.","fr":"Des blocs saturés, des contours noirs épais et des ombres nettes sans flou."},"misuse":[{"en":"Multiplying colors, patterns, and outlines until reading becomes chaotic.","fr":"Multiplier les couleurs, motifs et contours jusqu’à rendre la lecture chaotique."},{"en":"Calling a page brutalist only because it uses a bold font.","fr":"Appeler brutaliste une page seulement parce qu’elle utilise une police grasse."}],"name":"Neobrutalism","scope":{"en":"This style is not raw HTML. Its appearance is highly composed. Strict Web Brutalism remains the right category for native materials and exposed structure.","fr":"Ce style n’est pas du HTML laissé brut. Son apparence est fortement composée. Le Web Brutalism strict reste la catégorie adaptée aux matériaux natifs et à la structure exposée."},"signals":[{"category":"geometry","description":{"en":"Cards, buttons, fields, and images carry a visible uniform dark stroke.","fr":"Cartes, boutons, champs et images portent un trait sombre uniforme et visible."},"id":"thick-outlines","label":{"en":"Thick outlines","fr":"Contours épais"}},{"category":"depth","description":{"en":"The shadow is a solid offset shape with no blur.","fr":"L’ombre est une forme pleine décalée sans aucun flou."},"id":"hard-shadows","label":{"en":"Hard offset shadows","fr":"Ombres dures décalées"}},{"category":"color","description":{"en":"Yellow, pink, green, or cyan appear as direct flat fills on a light ground.","fr":"Jaune, rose, vert ou cyan sont posés en aplats francs sur un fond clair."},"id":"saturated-blocks","label":{"en":"Saturated color blocks","fr":"Aplats saturés"}},{"category":"typography","description":{"en":"Headings are wide, bold, and short, while body text stays plain.","fr":"Les titres sont larges, gras et courts, tandis que le texte courant reste simple."},"id":"chunky-type","label":{"en":"Chunky typography","fr":"Typographie massive"}}],"slug":"neobrutalism","sources":[{"publisher":"Nielsen Norman Group","sourceId":"source-editorial-nng-neobrutalism","title":"Neobrutalism: Definition and Best Practices","url":"https://www.nngroup.com/articles/neobrutalism/"},{"publisher":"W3C Web Accessibility Initiative","sourceId":"source-editorial-w3c-contrast-minimum","title":"Understanding Success Criterion 1.4.3: Contrast (Minimum)","url":"https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html"}],"status":"industry-coined-trend","summary":{"en":"Neobrutalism is a deliberately designed graphic language. It combines saturated fills, uniform dark outlines, hard offset shadows, and heavy typography so elements resemble printed stickers.","fr":"Le Neobrutalism est un langage graphique volontairement dessiné. Il combine aplats saturés, contours sombres uniformes, ombres dures décalées et typographie massive pour donner aux éléments l’allure d’autocollants imprimés."},"useCases":[{"en":"An expressive brand that accepts strong hierarchy and a bold graphic presence.","fr":"Une marque expressive qui accepte une hiérarchie forte et une forte présence graphique."},{"en":"A landing page or creative tool with few simultaneous interface levels.","fr":"Une landing page ou un outil créatif avec peu de niveaux d’interface simultanés."}]},{"accessibility":[{"en":"Measure contrast against the busiest region of every texture.","fr":"Mesurer le contraste sur la zone la plus chargée de chaque texture."},{"en":"Pair relief and shine with a color, text, or programmatic state change.","fr":"Associer relief et brillance à un changement de couleur, de texte ou d’état programmatique."},{"en":"Compress textures and ensure the interface remains usable without them.","fr":"Compresser les textures et garantir que l’interface reste utilisable sans elles."}],"aliases":["skeuomorphic design","realistic UI","real-world metaphor UI"],"briefs":{"create":{"en":"Create this surface with skeuomorphism around one identifiable real object. Simulate its material, apply coherent lighting, and use physical details only to clarify affordance.","fr":"Crée cette surface en skeuomorphism autour d’un seul objet réel identifiable. Simule sa matière, applique un éclairage cohérent et utilise les détails physiques uniquement pour clarifier l’affordance."},"modify":{"en":"Preserve functional structure, then apply one material metaphor to primary controls. Harmonize light direction, relief, and texture instead of adding competing materials.","fr":"Conserve la structure fonctionnelle, puis applique une métaphore matérielle unique aux contrôles principaux. Harmonise direction de lumière, relief et texture au lieu d’ajouter plusieurs matières concurrentes."},"repair":{"en":"Repair the rendering by removing ornaments that do not match the chosen material or object. Strengthen labels, states, and contrast so decoration never carries meaning alone.","fr":"Répare le rendu en retirant les ornements qui ne correspondent pas au matériau ou à l’objet choisi. Renforce les libellés, les états et le contraste pour que le décor ne porte jamais seul le sens."}},"identification":{"en":"The interface imitates a real object through materials, lighting, and physical details.","fr":"L’interface imite un objet réel avec ses matières, son éclairage et ses détails physiques."},"misuse":[{"en":"Mixing leather, metal, glass, and wood without a guiding object.","fr":"Mélanger cuir, métal, verre et bois sans objet directeur."},{"en":"Replacing accessible labels and states with an ambiguous visual imitation.","fr":"Remplacer les libellés et états accessibles par une imitation visuelle ambiguë."}],"name":"Skeuomorphism","scope":{"en":"This entry covers the visual style. An interaction metaphor such as a trash can for deleting a file applies the same principle at a conceptual level.","fr":"Cette fiche traite du style visuel. La métaphore d’interaction, comme une corbeille pour supprimer un fichier, applique le même principe à un niveau conceptuel."},"signals":[{"category":"surface","description":{"en":"The surface clearly resembles paper, leather, wood, fabric, or metal.","fr":"La surface ressemble clairement à du papier, du cuir, du bois, du tissu ou du métal."},"id":"real-materials","label":{"en":"Simulated real materials","fr":"Matières réelles simulées"}},{"category":"depth","description":{"en":"Highlights, bevels, and inner shadows describe a coherent light source.","fr":"Reflets, biseaux et ombres internes décrivent une source de lumière cohérente."},"id":"physical-light","label":{"en":"Physical lighting","fr":"Éclairage physique"}},{"category":"layout","description":{"en":"The whole surface is drawn as the object it replaces, such as a notebook or console.","fr":"L’ensemble est dessiné comme l’objet qu’il remplace, par exemple un carnet ou une console."},"id":"object-metaphor","label":{"en":"Object metaphor","fr":"Métaphore d’objet"}},{"category":"geometry","description":{"en":"Stitching, embossing, and crafted edges extend the chosen material logic.","fr":"Coutures, gaufrage et bords travaillés prolongent la logique du matériau choisi."},"id":"crafted-details","label":{"en":"Crafted details","fr":"Détails de fabrication"}}],"slug":"skeuomorphism","sources":[{"publisher":"Figma","sourceId":"source-editorial-figma-skeuomorphism","title":"What is skeuomorphism?","url":"https://www.figma.com/resource-library/what-is-skeuomorphism/"},{"publisher":"W3C Web Accessibility Initiative","sourceId":"source-editorial-w3c-contrast-minimum","title":"Understanding Success Criterion 1.4.3: Contrast (Minimum)","url":"https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html"}],"status":"established-movement","summary":{"en":"Skeuomorphism carries recognizable objects and materials into the interface. Paper, leather, metal, relief, and crafted details help explain how a control behaves.","fr":"Le skeuomorphism transpose des objets et matériaux reconnaissables dans l’interface. Papier, cuir, métal, relief et détails de fabrication servent à expliquer comment un contrôle se manipule."},"useCases":[{"en":"A specialized tool where the real object immediately explains the interaction.","fr":"Un outil spécialisé dont l’objet réel aide immédiatement à comprendre la manipulation."},{"en":"A narrative or heritage experience where material carries brand meaning.","fr":"Une expérience narrative ou patrimoniale où la matière a une valeur de marque."}]},{"accessibility":[{"en":"Add boundaries and states that remain perceptible without low-contrast shadows.","fr":"Ajouter des limites et des états perceptibles sans dépendre des ombres à faible contraste."},{"en":"Keep a high-contrast focus outline around every control.","fr":"Conserver un contour de focus très contrasté autour de chaque contrôle."},{"en":"Avoid this treatment for critical forms and long action lists.","fr":"Éviter ce traitement pour les formulaires critiques et les longues listes d’actions."}],"aliases":["Soft UI","neomorphism","soft neumorphic UI"],"briefs":{"create":{"en":"Create a neumorphic surface limited to a few secondary controls. Use one shared matte color, a coherent opposing shadow pair, and inset states. Always add contrast and focus independent from shadows.","fr":"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."},"modify":{"en":"Modify only decorative or low-risk controls. Align background and element colors, normalize light direction, and preserve existing labels, focus borders, and states.","fr":"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."},"repair":{"en":"Repair neumorphism by increasing label contrast and adding a border or color change to states. Keep shadows as visual depth, never the only way to understand an action.","fr":"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."}},"identification":{"en":"Controls molded into a matte surface through two very soft shadows.","fr":"Des contrôles moulés dans une surface mate grâce à deux ombres très douces."},"misuse":[{"en":"Making every control nearly invisible to preserve a uniform surface.","fr":"Rendre toutes les commandes presque invisibles pour préserver une surface uniforme."},{"en":"Changing the light direction between components.","fr":"Changer la direction de lumière entre les composants."}],"name":"Neumorphism","scope":{"en":"This entry covers the Soft UI trend that appeared around 2019. Thicker, independently colored floating objects belong closer to claymorphism.","fr":"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."},"signals":[{"category":"surface","description":{"en":"The background and controls share exactly the same matte color.","fr":"Le fond et les contrôles partagent exactement la même teinte mate."},"id":"one-surface","label":{"en":"One continuous surface","fr":"Une surface continue"}},{"category":"depth","description":{"en":"One light and one dark shadow describe a consistent diagonal light.","fr":"Une ombre claire et une ombre sombre décrivent un éclairage diagonal constant."},"id":"dual-shadows","label":{"en":"Dual soft shadows","fr":"Deux ombres douces"}},{"category":"depth","description":{"en":"Active states invert the shadows into the surface.","fr":"Les états actifs inversent les ombres vers l’intérieur de la surface."},"id":"inset-state","label":{"en":"Pressed inset state","fr":"État enfoncé"}},{"category":"geometry","description":{"en":"The shape appears through shadow transitions without a clear outline.","fr":"La forme apparaît dans la transition des ombres, sans contour franc."},"id":"soft-edges","label":{"en":"Low-contrast edges","fr":"Bords peu contrastés"}}],"slug":"neumorphism","sources":[{"publisher":"Michal Malewicz / UX Collective","sourceId":"source-editorial-ux-collective-neumorphism","title":"Neumorphism in user interfaces","url":"https://uxdesign.cc/neumorphism-in-user-interfaces-b47cef3bf3a6"},{"publisher":"W3C Web Accessibility Initiative","sourceId":"source-editorial-w3c-contrast-minimum","title":"Understanding Success Criterion 1.4.3: Contrast (Minimum)","url":"https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html"}],"status":"industry-coined-trend","summary":{"en":"Neumorphism makes controls appear raised from or pressed into one continuous surface. Background and elements share the same color while a light and dark shadow pair creates relief.","fr":"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."},"useCases":[{"en":"A few decorative controls in a simple interface with a constant background.","fr":"Quelques contrôles décoratifs dans une interface simple avec fond constant."},{"en":"A specimen or visual identity where softness matters more than density.","fr":"Un spécimen ou une identité visuelle où la douceur est plus importante que la densité."}]},{"accessibility":[{"en":"Do not remove control boundaries along with decorative shadows.","fr":"Ne pas supprimer les limites de contrôle avec les ombres décoratives."},{"en":"Pair color with a label, icon, or programmatic state.","fr":"Associer la couleur à un libellé, une icône ou un état programmatique."},{"en":"Preserve clearly distinct focus and hover states.","fr":"Préserver des états de focus et de survol nettement distincts."}],"aliases":["flat UI"],"briefs":{"create":{"en":"Create this interface with Flat Design using solid fills, hierarchy based on size, space, and typography, and simple geometric icons. Use no texture, gloss, or decorative volume.","fr":"Crée cette interface en Flat Design avec des aplats unis, une hiérarchie fondée sur taille, espace et typographie, et des icônes géométriques simples. N’utilise ni texture, ni reflet, ni volume décoratif."},"modify":{"en":"Preserve structure and progressively remove textures, material gradients, bevels, and realistic shadows. Replace every removed depth cue with a clear difference in color, spacing, or typography.","fr":"Conserve la structure et retire progressivement textures, gradients matériels, biseaux et ombres réalistes. Remplace chaque indice de profondeur supprimé par une différence claire de couleur, d’espace ou de typographie."},"repair":{"en":"Repair affordances that became ambiguous after flattening. Restore visible borders, labels, states, and focus without reintroducing imitation material.","fr":"Répare les affordances devenues ambiguës après aplatissement. Rétablis des bordures, libellés, états et focus visibles sans réintroduire une imitation de matière."}},"identification":{"en":"Simple flat fills, geometric icons, and no simulated material.","fr":"Des aplats simples, des icônes géométriques et aucune matière simulée."},"misuse":[{"en":"Removing all interaction cues in the name of visual simplicity.","fr":"Retirer tous les indices interactifs au nom de la simplicité visuelle."},{"en":"Confusing lack of volume with lack of hierarchy.","fr":"Confondre absence de volume et absence de hiérarchie."}],"name":"Flat Design","scope":{"en":"Flat governs how surfaces are rendered. It does not guarantee a small amount of content. An interface can be flat and very dense.","fr":"Le flat gouverne la manière de dessiner les surfaces. Il ne garantit pas une faible quantité de contenu. Une interface peut être plate et très dense."},"signals":[{"category":"surface","description":{"en":"Each surface uses a direct color without texture or gloss.","fr":"Chaque surface utilise une couleur franche sans texture ni reflet."},"id":"solid-fills","label":{"en":"Solid color fills","fr":"Aplats unis"}},{"category":"depth","description":{"en":"Bevels, realistic shadows, and decorative volume are absent.","fr":"Biseaux, ombres réalistes et volumes décoratifs sont absents."},"id":"no-depth","label":{"en":"No simulated depth","fr":"Aucune profondeur simulée"}},{"category":"geometry","description":{"en":"Icons and shapes reduce to immediately recognizable geometry.","fr":"Icônes et formes sont réduites à une géométrie immédiatement reconnaissable."},"id":"simple-glyphs","label":{"en":"Simple glyphs","fr":"Glyphes simples"}},{"category":"typography","description":{"en":"Weight, size, and color replace depth to organize information.","fr":"Poids, taille et couleur remplacent le relief pour organiser l’information."},"id":"type-hierarchy","label":{"en":"Typographic hierarchy","fr":"Hiérarchie typographique"}}],"slug":"flat-design","sources":[{"publisher":"Nielsen Norman Group","sourceId":"source-editorial-nng-flat-design","title":"Flat Design: Its Origins, Its Problems, and Why Flat 2.0 Is Better for Users","url":"https://www.nngroup.com/articles/flat-design/"},{"publisher":"W3C Web Accessibility Initiative","sourceId":"source-editorial-w3c-contrast-minimum","title":"Understanding Success Criterion 1.4.3: Contrast (Minimum)","url":"https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html"}],"status":"established-movement","summary":{"en":"Flat Design renders the interface in two dimensions. Color, size, space, and typography build hierarchy without texture, gloss, bevel, or imitation material.","fr":"Le Flat Design rend l’interface en deux dimensions. Couleur, taille, espace et typographie construisent la hiérarchie sans texture, reflet, biseau ou imitation de matière."},"useCases":[{"en":"An application that must remain clear, light, and adaptable to several densities.","fr":"Une application qui doit rester claire, légère et adaptable à plusieurs densités."},{"en":"A design system where simple tokens should carry hierarchy.","fr":"Un design system où la hiérarchie doit être portée par des tokens simples."}]},{"accessibility":[{"en":"Keep labels, help, errors, and confirmations even when they increase text quantity.","fr":"Conserver libellés, aides, erreurs et confirmations même s’ils augmentent la quantité de texte."},{"en":"Do not use spacing as the only signal for grouping or hierarchy.","fr":"Ne pas utiliser l’espace comme seul signal de groupement ou de hiérarchie."},{"en":"Maintain recovery paths and genuinely necessary secondary actions.","fr":"Maintenir des parcours de récupération et des actions secondaires réellement nécessaires."}],"aliases":["minimalist design","minimal web design"],"briefs":{"create":{"en":"Create a minimalist interface around one primary goal, one primary action, and only necessary content. Use negative space, a limited palette, and clear typographic hierarchy to guide attention.","fr":"Crée une interface minimaliste autour d’un objectif principal, d’une action primaire et du contenu strictement nécessaire. Utilise l’espace négatif, une palette limitée et une hiérarchie typographique nette pour guider l’attention."},"modify":{"en":"Rank existing elements by necessity, then remove or relocate secondary functions without breaking the primary journey. Group redundant messages and leave more space around the central decision.","fr":"Classe les éléments existants par nécessité, puis retire ou déplace les fonctions secondaires sans casser le parcours principal. Regroupe les messages redondants et laisse davantage d’espace autour de la décision centrale."},"repair":{"en":"Repair this minimalism if useful information disappeared. Restore necessary labels, help, errors, and states, then simplify composition without sacrificing understanding or error recovery.","fr":"Répare ce minimalisme si des informations utiles ont disparu. Rétablis les libellés, aides, erreurs et états nécessaires, puis simplifie la composition sans sacrifier la compréhension ni la récupération après erreur."}},"identification":{"en":"Very few elements, generous negative space, and deliberate typographic hierarchy.","fr":"Très peu d’éléments, beaucoup d’espace négatif et une hiérarchie typographique volontaire."},"misuse":[{"en":"Removing help and error information instead of removing redundancy.","fr":"Retirer les informations d’aide et d’erreur au lieu de supprimer les redondances."},{"en":"Spreading little content over a very large surface without hierarchy or intent.","fr":"Étaler peu de contenu sur une très grande surface sans hiérarchie ni intention."}],"name":"Minimalism","scope":{"en":"Minimalism concerns quantity and composition. Flat Design concerns surface rendering. A minimalist screen can retain shadows or depth, and a flat interface can remain crowded.","fr":"Le minimalisme concerne la quantité et la composition. Le Flat Design concerne le rendu des surfaces. Un écran minimaliste peut conserver ombres ou profondeur, et une interface plate peut rester très chargée."},"signals":[{"category":"layout","description":{"en":"Empty space surrounds important elements and directs attention instead of filling the page.","fr":"Le vide entoure les éléments importants et dirige l’attention au lieu de combler la page."},"id":"negative-space","label":{"en":"Active negative space","fr":"Espace négatif actif"}},{"category":"layout","description":{"en":"Every control, message, and decoration must justify its presence.","fr":"Chaque contrôle, message et décoration doit justifier sa présence."},"id":"few-elements","label":{"en":"Restricted element count","fr":"Éléments comptés"}},{"category":"color","description":{"en":"A short neutral range and one accent are enough to organize the screen.","fr":"Une gamme courte de neutres et un accent suffisent à organiser l’écran."},"id":"limited-palette","label":{"en":"Limited palette","fr":"Palette limitée"}},{"category":"typography","description":{"en":"Strong typographic hierarchy replaces much of the ornament.","fr":"Une hiérarchie typographique forte remplace une grande partie de l’ornement."},"id":"deliberate-type","label":{"en":"Structural typography","fr":"Typographie structurante"}}],"slug":"minimalism","sources":[{"publisher":"Nielsen Norman Group","sourceId":"source-editorial-nng-minimalism","title":"The Characteristics of Minimalism in Web Design","url":"https://www.nngroup.com/articles/characteristics-minimalism/"},{"publisher":"W3C Web Accessibility Initiative","sourceId":"source-editorial-w3c-contrast-minimum","title":"Understanding Success Criterion 1.4.3: Contrast (Minimum)","url":"https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html"}],"status":"established-movement","summary":{"en":"Minimalism governs what remains on screen. It removes secondary functions, ornament, and messages until every remaining element has a clear role, then uses negative space to organize attention.","fr":"Le minimalisme gouverne ce qui reste à l’écran. Il retire fonctions, ornements et messages secondaires jusqu’à ce que chaque élément restant ait un rôle clair, puis utilise l’espace négatif pour organiser l’attention."},"useCases":[{"en":"A page with one clear primary goal and few competing decisions.","fr":"Une page avec un objectif principal clair et peu de décisions concurrentes."},{"en":"A product where content quality allows decoration and repeated explanations to be removed.","fr":"Un produit où la qualité de contenu permet de retirer la décoration et les explications répétées."}]}]}