Dark Mode Analyse et Conception

Simon MERCIER Designer & Mobile Dev @Worldline Antoine CANDY Designer & Web Dev @Worldline

Ordre du jour Pourquoi un mode sombre ? Comment concevoir un mode sombre à partir d’un mode clair Comment définir un langage commun entre designers et développeurs ?

Pourquoi un mode sombre ?

Depuis quand ça existe le mode sombre ?

Depuis quand ça existe le mode sombre ?

Depuis quand ça existe le mode sombre ? IBM Personal Computer

Depuis quand ça existe le mode clair ? Xerox Alto (1973) Apple Lisa (1983)

Skeuomorphisme

Skeuomorphisme

Skeuomorphisme

Skeuomorphisme

Mode sombre moderne

Light Dark Average dev Quel thème choisir ?

Lisibilité Positive display polarity is particularly advantageous for small character sizes: implications for display design Cosima Piepenbrock, Susanne Mayr, Axel Buchner 2013

Lisibilité 165 participants Light Dark Lecture dans une pièce sombre de de pendant 40 textes 250 mots 50 secondes. Taille des caractères variable : “ 8 pˆ “ 10 pˆ “ 12 pˆ “ 14 pt 14 erreurs à trouver par texte.

No content

No content

No content

Lisibilité : Impact de l’âge Positive display polarity is advantageous for both younger and older adults Cosima Piepenbrock, Susanne Mayr, Iris Mund, Axel Buchner 2013

Lisibilité : Impact de l’âge 169 participants 18-33 ans 60-85 ans Anneaux de Landolt

No content

No content

Lisibilité : Impact de la luminosité ambiante Effects of ambient illumination, contrast polarity, and letter size on text legibility under glance-like reading Jonathan Dobres, Nadine Chahine, Bryan Reimer 2016

Lisibilité : Impact de la luminosité ambiante 50 participants Jour 1 : light Jour 2 : dark Y 400 tests Y Objectif par participant : détecter rapidement si une suite de caractères forme un mot

https://www.nngroup.com/articles/dark-mode/

Effets à long terme ?

Effets à long terme ? Reading and Myopia: Contrast Polarity Matters (nature.com) Andrea C. Aleman, Min Wang, Frank Schaeffel 2018

Accessibilité Les personnes atteintes de cataractes lisent en 50% plus vite thème sombre Comprendre la cataracte (ameli.fr) 2023 Rétine Cristallin Sans cataracte AVEC cataracte Dark Mode vs. Light Mode: Which Is Better ? (nngroup.com) Raluca Budiu 2020

Économie de batterie 1,58 M d’abonnés PhoneBuff Dark Mode vs. Light Mode Battery Test

Économie de batterie 1,58 M d’abonnés PhoneBuff Dark Mode vs. Light Mode Battery Test

Économie de batterie 1,58 M d’abonnés PhoneBuff Dark Mode vs. Light Mode Battery Test

Économie de batterie Luminosité Max Adaptée (usage intérieur)

Petites touches de couleur

Petites touches de couleur

Petites touches de couleur

Quels critères pour choisir entre thème clair et sombre ? Environnement d’utilisation (intérieur, extérieur, jour, nuit, ...) Non prévisible Utilisateur final (âge, maladie, préférence personnelle, ...) Thème de l’app (Streaming vidéo, lecture de news, ...)

Cas pratique n°1

Cas pratique n°1 https://blocnotes.iergo.fr/articles/sncf-connect-petit- bilan-dune-catastrophe-industrielle/ Expectation... Reality...

Cas pratique n°2 Place des Terreaux - Fête des lumières (Lyon)

Cas pratique n°3

Cas pratique n°4 Interface de GitKraken

From light to dark Comment concevoir un mode sombre à partir d’un mode clair ?

Quelles couleurs choisir ? Mobilités ZFE : la Métropole crée un nouvelle dérogation A partir du 1er janvier, les travailleurs en horaires décalés équipés d'un véhicule Crit'air 3 pourront circuler dans la zone à faibles… Lire Action municipale Ça change quoi… pour Solveig ? Mobilité, rénovation des bâtiments publics, végétalisation, alimentation, solidarité, commerces, santé, sécurité… Lire Santé L'OMS ouvre une Académie à Lyon Un centre pour former les soignants du monde entier. Lire Culture Les vacances de Noël côté culture Les vacances de Noël - du 21 décembre 2024 au 5 janvier 2025 - sont l’occasion d’une riche programmation culturelle à destination des plus jeunes. Lire Notre sélection culture est sortie sur Instagram Concerts, expo, théâtre, lecture, festival... Découvrez le programme de janvier ! En savoir + 02.01 Bienvenue 2025 ! La Ville de Lyon souhaite une très bonne année 2025 aux Lyonnaises et Lyonnais. En savoir + 01.01 Question pour un champion Le saviez-vous ? Les Lyonnais l'ont surnommée 30.12 Démarches Sortir et découvrir Vie pratique Actions et projets Rechercher Arrondissement Accéder à mon espace

Inverser les couleurs ? Mobilités ZFE : la Métropole crée un nouvelle dérogation A partir du 1er janvier, les travailleurs en horaires décalés équipés d'un véhicule Crit'air 3 pourront circuler dans la zone à faibles… Lire Action municipale Ça change quoi… pour Solveig ? Mobilité, rénovation des bâtiments publics, végétalisation, alimentation, solidarité, commerces, santé, sécurité… Lire Santé L'OMS ouvre une Académie à Lyon Un centre pour former les soignants du monde entier. Lire Culture Les vacances de Noël côté culture Les vacances de Noël - du 21 décembre 2024 au 5 janvier 2025 - sont l’occasion d’une riche programmation culturelle à destination des plus jeunes. Lire Notre sélection culture est sortie sur Instagram Concerts, expo, théâtre, lecture, festival... Découvrez le programme de janvier ! En savoir + 02.01 Bienvenue 2025 ! La Ville de Lyon souhaite une très bonne année 2025 aux Lyonnaises et Lyonnais. En savoir + 01.01 Question pour un champion Le saviez-vous ? Les Lyonnais l'ont surnommée 30.12 Démarches Sortir et découvrir Vie pratique Actions et projets Rechercher Arrondissement Accéder à mon espace

Profondeur m2.material.io

Profondeur m2.material.io

Profondeur Mobilités ZFE : la Métropole crée un nouvelle dérogation A partir du 1er janvier, les travailleurs en horaires décalés équipés d'un véhicule Crit'air 3 pourront circuler dans la zone à faibles… Lire Action municipale Ça change quoi… pour Solveig ? Mobilité, rénovation des bâtiments publics, végétalisation, alimentation, solidarité, commerces, santé, sécurité… Lire Santé L'OMS ouvre une Académie à Lyon Un centre pour former les soignants du monde entier. Lire Culture Les vacances de Noël côté culture Les vacances de Noël - du 21 décembre 2024 au 5 janvier 2025 - sont l’occasion d’une riche programmation culturelle à destination des plus jeunes. Lire Notre sélection culture est sortie sur Instagram Concerts, expo, théâtre, lecture, festival... Découvrez le programme de janvier ! En savoir + 02.01 Bienvenue 2025 ! La Ville de Lyon souhaite une très bonne année 2025 aux Lyonnaises et Lyonnais. En savoir + 01.01 Question pour un champion Le saviez-vous ? Les Lyonnais l'ont surnommée 30.12 Démarches Sortir et découvrir Vie pratique Actions et projets Rechercher Arrondissement Accéder à mon espace

Couleurs vives

Couleurs vives

H(ue) S(aturation) L(ightness)

Couleurs vives 35 Lightness 32 49

Couleurs vives 35 Lightness 32 49 55 Lightness 55 55

Couleurs vives Mobilités ZFE : la Métropole crée un nouvelle dérogation A partir du 1er janvier, les travailleurs en horaires décalés équipés d'un véhicule Crit'air 3 pourront circuler dans la zone à faibles… Lire Action municipale Ça change quoi… pour Solveig ? Mobilité, rénovation des bâtiments publics, végétalisation, alimentation, solidarité, commerces, santé, sécurité… Lire Santé L'OMS ouvre une Académie à Lyon Un centre pour former les soignants du monde entier. Lire Culture Les vacances de Noël côté culture Les vacances de Noël - du 21 décembre 2024 au 5 janvier 2025 - sont l’occasion d’une riche programmation culturelle à destination des plus jeunes. Lire Notre sélection culture est sortie sur Instagram Concerts, expo, théâtre, lecture, festival... Découvrez le programme de janvier ! En savoir + 02.01 Bienvenue 2025 ! La Ville de Lyon souhaite une très bonne année 2025 aux Lyonnaises et Lyonnais. En savoir + 01.01 Question pour un champion Le saviez-vous ? Les Lyonnais l'ont surnommée 30.12 Démarches Sortir et découvrir Vie pratique Actions et projets Rechercher Arrondissement Accéder à mon espace Avant

Couleurs vives Mobilités ZFE : la Métropole crée un nouvelle dérogation A partir du 1er janvier, les travailleurs en horaires décalés équipés d'un véhicule Crit'air 3 pourront circuler dans la zone à faibles… Lire Action municipale Ça change quoi… pour Solveig ? Mobilité, rénovation des bâtiments publics, végétalisation, alimentation, solidarité, commerces, santé, sécurité… Lire Santé L'OMS ouvre une Académie à Lyon Un centre pour former les soignants du monde entier. Lire Culture Les vacances de Noël côté culture Les vacances de Noël - du 21 décembre 2024 au 5 janvier 2025 - sont l’occasion d’une riche programmation culturelle à destination des plus jeunes. Lire Notre sélection culture est sortie sur Instagram Concerts, expo, théâtre, lecture, festival... Découvrez le programme de janvier ! En savoir + 02.01 Bienvenue 2025 ! La Ville de Lyon souhaite une très bonne année 2025 aux Lyonnaises et Lyonnais. En savoir + 01.01 Question pour un champion Le saviez-vous ? Les Lyonnais l'ont surnommée 30.12 Démarches Sortir et découvrir Vie pratique Actions et projets Rechercher Arrondissement Accéder à mon espace APRèS

Couleurs vives Norme WCAG AA : ratio supérieur à 4.5 : 1 (webaim.org) (coolors.co)

Couleurs vives Test 5.59 : 1 Test 7.85 : 1 Test 4.72 : 1 Norme WCAG AA : ratio supérieur à 4.5 : 1

Couleurs vives Mobilités ZFE : la Métropole crée un nouvelle dérogation A partir du 1er janvier, les travailleurs en horaires décalés équipés d'un véhicule Crit'air 3 pourront circuler dans la zone à faibles… Lire Action municipale Ça change quoi… pour Solveig ? Mobilité, rénovation des bâtiments publics, végétalisation, alimentation, solidarité, commerces, santé, sécurité… Lire Santé L'OMS ouvre une Académie à Lyon Un centre pour former les soignants du monde entier. Lire Culture Les vacances de Noël côté culture Les vacances de Noël - du 21 décembre 2024 au 5 janvier 2025 - sont l’occasion d’une riche programmation culturelle à destination des plus jeunes. Lire Notre sélection culture est sortie sur Instagram Concerts, expo, théâtre, lecture, festival... Découvrez le programme de janvier ! En savoir + 02.01 Bienvenue 2025 ! La Ville de Lyon souhaite une très bonne année 2025 aux Lyonnaises et Lyonnais. En savoir + 01.01 Question pour un champion Le saviez-vous ? Les Lyonnais l'ont surnommée 30.12 Démarches Sortir et découvrir Vie pratique Actions et projets Rechercher Arrondissement Accéder à mon espace AVANT

Couleurs vives ZFE : la Métropole crée un nouvelle dérogation A partir du 1er janvier, les travailleurs en horaires décalés équipés d'un véhicule Crit'air 3 pourront circuler dans la zone à faibles… Lire Ça change quoi… pour Solveig ? Mobilité, rénovation des bâtiments publics, végétalisation, alimentation, solidarité, commerces, santé, sécurité… Lire L'OMS ouvre une Académie à Lyon Un centre pour former les soignants du monde entier. Lire Actions municipales Santé Mobilités Culture Les vacances de Noël côté culture Les vacances de Noël - du 21 décembre 2024 au 5 janvier 2025 - sont l’occasion d’une riche programmation culturelle à destination des plus jeunes. Lire Notre sélection culture est sortie sur Instagram Concerts, e xpo, théâtre, lecture, festival... Découvrez le programme de janvier ! En savoir + 02.01 Bienvenue 2025 ! La Ville de L yon souhaite une tr ès bonne année 2025 au x L yonnaises et L yonnais. En savoir + 01.01 Question pour un champion Le savie z-vous ? Les L yonnais l'ont surnommée 30.12 Démarches Sortir et découvrir Vie pratique Actions et pro jets Rechercher Arrondissement Accéder à mon espace APRèS

Teinter ses gris

Teinter ses gris APRèS AVANT Hue Saturation Lightness 0 194 20 0 15 15

Teinter ses gris AVANT APRèS

Teinter ses gris ZFE : la Métropole crée un nouvelle dérogation A partir du 1er janvier, les travailleurs en horaires décalés équipés d'un véhicule Crit'air 3 pourront circuler dans la zone à faibles… Lire Ça change quoi… pour Solveig ? Mobilité, rénovation des bâtiments publics, végétalisation, alimentation, solidarité, commerces, santé, sécurité… Lire L'OMS ouvre une Académie à Lyon Un centre pour former les soignants du monde entier. Lire Actions municipales Santé Mobilités Culture Les vacances de Noël côté culture Les vacances de Noël - du 21 décembre 2024 au 5 janvier 2025 - sont l’occasion d’une riche programmation culturelle à destination des plus jeunes. Lire Notre sélection culture est sortie sur Instagram Concerts, expo, théâtre, lecture, festival... Découvrez le programme de janvier ! En savoir + 02.01 Bienvenue 2025 ! La Ville de Lyon souhaite une très bonne année 2025 aux Lyonnaises et Lyonnais. En savoir + 01.01 Question pour un champion Le saviez-vous ? Les Lyonnais l'ont surnommée 30.12 Démarches Sortir et découvrir Vie pratique Actions et projets Rechercher Arrondissement Accéder à mon espace AVANT

Teinter ses gris ZFE : la Métropole crée un nouvelle dérogation A partir du 1er janvier, les travailleurs en horaires décalés équipés d'un véhicule Crit'air 3 pourront circuler dans la zone à faibles… Lire Ça change quoi… pour Solveig ? Mobilité, rénovation des bâtiments publics, végétalisation, alimentation, solidarité, commerces, santé, sécurité… Lire L'OMS ouvre une Académie à Lyon Un centre pour former les soignants du monde entier. Lire Actions municipales Santé Mobilités Culture Les vacances de Noël côté culture Les vacances de Noël - du 21 décembre 2024 au 5 janvier 2025 - sont l’occasion d’une riche programmation culturelle à destination des plus jeunes. Lire Notre sélection culture est sortie sur Instagram Concerts, expo, théâtre, lecture, festival... Découvrez le programme de janvier ! En savoir + 02.01 Bienvenue 2025 ! La Ville de Lyon souhaite une très bonne année 2025 aux Lyonnaises et Lyonnais. En savoir + 01.01 Question pour un champion Le saviez-vous ? Les Lyonnais l'ont surnommée 30.12 Démarches Sortir et découvrir Vie pratique Actions et projets Rechercher Arrondissement Accéder à mon espace APRèS

Mobilités ZFE : la Métropole crée un nouvelle dérogation A partir du 1er janvier, les travailleurs en horaires décalés équipés d'un véhicule Crit'air 3 pourront circuler dans la zone à faibles… Lire Action municipale Ça change quoi… pour Solveig ? Mobilité, rénovation des bâtiments publics, végétalisation, alimentation, solidarité, commerces, santé, sécurité… Lire Santé L'OMS ouvre une Académie à Lyon Un centre pour former les soignants du monde entier. Lire Culture Les vacances de Noël côté culture Les vacances de Noël - du 21 décembre 2024 au 5 janvier 2025 - sont l’occasion d’une riche programmation culturelle à destination des plus jeunes. Lire Notre sélection culture est sortie sur Instagram Concerts, e xpo, théâtre, lecture, festival... Découvrez le programme de janvier ! En savoir + 02.01 Bienvenue 2025 ! La Ville de L yon souhaite une tr ès bonne année 2025 au x L yonnaises et L yonnais. En savoir + 01.01 Question pour un champion Le savie z-vous ? Les L yonnais l'ont surnommée 30.12 Démarches Sortir et découvrir Vie pratique Actions et pro jets Rechercher Arrondissement Accéder à mon espace Résultat ZFE : la Métropole crée un nouvelle dérogation A partir du 1er janvier, les travailleurs en horaires décalés équipés d'un véhicule Crit'air 3 pourront circuler dans la zone à faibles… Lire Ça change quoi… pour Solveig ? Mobilité, rénovation des bâtiments publics, végétalisation, alimentation, solidarité, commerces, santé, sécurité… Lire L'OM Acad Un cent du mond Lire Actions municipales Santé Mo bilités Culture Les vacances de Noël côté culture Les vacances de Noël - du 21 décembre 2024 au 5 janvier 2025 - sont l’occasion d’une riche programmation culturelle à destination des plus jeunes. Lire Démarches Sortir et découvrir Vie p Rechercher

Mobilités ZFE : la Métropole crée un nouvelle dérogation A partir du 1er janvier, les travailleurs en horaires décalés équipés d'un véhicule Crit'air 3 pourront circuler dans la zone à faibles… Lire Action municipale Ça change quoi… pour Solveig ? Mobilité, rénovation des bâtiments publics, végétalisation, alimentation, solidarité, commerces, santé, sécurité… Lire Santé L'OMS ouvre une Académie à Lyon Un centre pour former les soignants du monde entier. Lire Culture Les vacances de Noël côté culture Les vacances de Noël - du 21 décembre 2024 au 5 janvier 2025 - sont l’occasion d’une riche programmation culturelle à destination des plus jeunes. Lire Notre sélection culture est sortie sur Instagram Concerts, e xpo, théâtre, lecture, festival... Découvrez le programme de janvier ! En savoir + 02.01 Bienvenue 2025 ! La Ville de L yon souhaite une tr ès bonne année 2025 au x L yonnaises et L yonnais. En savoir + 01.01 Question pour un champion Le savie z-vous ? Les L yonnais l'ont surnommée 30.12 Démarches Sortir et découvrir Vie pratique Actions et pro jets Rechercher Arrondissement Accéder à mon espace Résultat ZFE : la Métropole crée un nouvelle dérogation A partir du 1er janvier, les travailleurs en horaires décalés équipés d'un véhicule Crit'air 3 pourront circuler dans la zone à faibles… Lire Ça change quoi… pour Solveig ? Mobilité, rénovation des bâtiments publics, végétalisation, alimentation, solidarité, commerces, santé, sécurité… Lire L'OM Acad Un cent du mond Lire Actions municipales Santé Mo bilités Culture Les vacances de Noël côté culture Les vacances de Noël - du 21 décembre 2024 au 5 janvier 2025 - sont l’occasion d’une riche programmation culturelle à destination des plus jeunes. Lire Démarches Sortir et découvrir Vie p Rechercher

Mise en oeuvre technique Un langage commun entre designers et développeurs ?

Mobilités ZFE : la Métropole crée un nouvelle dérogation A partir du 1er janvier, les travailleurs en horaires décalés équipés d'un véhicule Crit'air 3 pourront circuler dans la zone à faibles… Lire Action municipale Ça change quoi… pour Solveig ? Mobilité, rénovation des bâtiments publics, végétalisation, alimentation, solidarité, commerces, santé, sécurité… Lire Santé L'OMS ouvre une Académie à Lyon Un centre pour former les soignants du monde entier. Lire Culture Les vacances de Noël côté culture Les vacances de Noël - du 21 décembre 2024 au 5 janvier 2025 - sont l’occasion d’une riche programmation culturelle à destination des plus jeunes. Lire Notre sélection culture est sortie sur Instagram Concerts, e xpo, théâtre, lecture, festival... Découvrez le programme de janvier ! En savoir + 02.01 Bienvenue 2025 ! La Ville de L yon souhaite une tr ès bonne année 2025 au x L yonnaises et L yonnais. En savoir + 01.01 Question pour un champion Le savie z-vous ? Les L yonnais l'ont surnommée 30.12 Démarches Sortir et découvrir Vie pratique Actions et pro jets Rechercher Arrondissement Accéder à mon espace ZFE : la Métropole crée un nouvelle dérogation A partir du 1er janvier, les travailleurs en horaires décalés équipés d'un véhicule Crit'air 3 pourront circuler dans la zone à faibles… Lire Ça change quoi… pour Solveig ? Mobilité, rénovation des bâtiments publics, végétalisation, alimentation, solidarité, commerces, santé, sécurité… Lire L'OM Acad Un cent du mond Lire Actions municipales Santé Mo bilités Culture Les vacances de Noël côté culture Les vacances de Noël - du 21 décembre 2024 au 5 janvier 2025 - sont l’occasion d’une riche programmation culturelle à destination des plus jeunes. Lire Démarches Sortir et découvrir Vie p Rechercher ??? ??? ??? ???

Correspondance Light/Dark Name Color 1 Color 2 Color 3 Light ??? ??? ??? Dark ??? ??? ???

Mobilités ZFE : la Métropole crée un nouvelle dérogation A partir du 1er janvier, les travailleurs en horaires décalés équipés d'un véhicule Crit'air 3 pourront circuler dans la zone à faibles… Lire Action municipale Ça change quoi… pour Solveig ? Mobilité, rénovation des bâtiments publics, végétalisation, alimentation, solidarité, commerces, santé, sécurité… Lire Santé L'OMS ouvre une Académie à Lyon Un centre pour former les soignants du monde entier. Lire Culture Les vacances de Noël côté culture Les vacances de Noël - du 21 décembre 2024 au 5 janvier 2025 - sont l’occasion d’une riche programmation culturelle à destination des plus jeunes. Lire Notre sélection culture est sortie sur Instagram Concerts, e xpo, théâtre, lecture, festival... Découvrez le programme de janvier ! En savoir + 02.01 Bienvenue 2025 ! La Ville de L yon souhaite une tr ès bonne année 2025 au x L yonnaises et L yonnais. En savoir + 01.01 Question pour un champion Le savie z-vous ? Les L yonnais l'ont surnommée 30.12 Démarches Sortir et découvrir Vie pratique Actions et pro jets Rechercher Arrondissement Accéder à mon espace ZFE : la Métropole crée un nouvelle dérogation A partir du 1er janvier, les travailleurs en horaires décalés équipés d'un véhicule Crit'air 3 pourront circuler dans la zone à faibles… Lire Ça change quoi… pour Solveig ? Mobilité, rénovation des bâtiments publics, végétalisation, alimentation, solidarité, commerces, santé, sécurité… Lire L'OM Acad Un cent du mond Lire Actions municipales Santé Mo bilités Culture Les vacances de Noël côté culture Les vacances de Noël - du 21 décembre 2024 au 5 janvier 2025 - sont l’occasion d’une riche programmation culturelle à destination des plus jeunes. Lire Démarches Sortir et découvrir Vie p Rechercher White Azur White Azur Cherry Cherry

Mobilités ZFE : la Métropole crée un nouvelle dérogation A partir du 1er janvier, les travailleurs en horaires décalés équipés d'un véhicule Crit'air 3 pourront circuler dans la zone à faibles… Lire Action municipale Ça change quoi… pour Solveig ? Mobilité, rénovation des bâtiments publics, végétalisation, alimentation, solidarité, commerces, santé, sécurité… Lire Santé L'OMS ouvre une Académie à Lyon Un centre pour former les soignants du monde entier. Lire Culture Les vacances de Noël côté culture Les vacances de Noël - du 21 décembre 2024 au 5 janvier 2025 - sont l’occasion d’une riche programmation culturelle à destination des plus jeunes. Lire Notre sélection culture est sortie sur Instagram Concerts, e xpo, théâtre, lecture, festival... Découvrez le programme de janvier ! En savoir + 02.01 Bienvenue 2025 ! La Ville de L yon souhaite une tr ès bonne année 2025 au x L yonnaises et L yonnais. En savoir + 01.01 Question pour un champion Le savie z-vous ? Les L yonnais l'ont surnommée 30.12 Démarches Sortir et découvrir Vie pratique Actions et pro jets Rechercher Arrondissement Accéder à mon espace ZFE : la Métropole crée un nouvelle dérogation A partir du 1er janvier, les travailleurs en horaires décalés équipés d'un véhicule Crit'air 3 pourront circuler dans la zone à faibles… Lire Ça change quoi… pour Solveig ? Mobilité, rénovation des bâtiments publics, végétalisation, alimentation, solidarité, commerces, santé, sécurité… Lire L'OM Acad Un cent du mond Lire Actions municipales Santé Mo bilités Culture Les vacances de Noël côté culture Les vacances de Noël - du 21 décembre 2024 au 5 janvier 2025 - sont l’occasion d’une riche programmation culturelle à destination des plus jeunes. Lire Démarches Sortir et découvrir Vie p Rechercher White Azur White Azur White White Cherry Cherry

Correspondance Light/Dark Name Azur White Cherry Light #2F7084 #FFFFFF #EE2D62 Dark #1F2A2E #243B42 #ED2B60

Mise en oeuvre technique Handoff design development

Mise en oeuvre technique Méthodologie de handoff design DESIGN TOKEN development

Multi theme support Handoff errors reduction Consistency Responsiveness Scalability Single source of truth Time saving, technical debt reduction (dark/light mode) (between design files & codebases) (between apps, platforms) (1 language between dev & design) Mise en oeuvre technique Bénéfices des design tokens design DESIGN TOKEN development

Mise en oeuvre technique Atomic design Atomic design, according to Brad Frost ATOMS MOLECULES ORGANISMS TEMPLATES PAGES

Mise en oeuvre technique Atomic design Atomic design, according to Brad Frost “The smallest functional unit” Home Label Input COMPONENTS ATOMS

Mise en oeuvre technique Atomic design Atomic design, according to Brad Frost MOLECULES Cancel Save COMPONENTS GROUP “Groups of two or more atoms [...], more tangible and operational”

Mise en oeuvre technique Atomic design Atomic design, according to Brad Frost ORGANISMS COMPONENTS GROUPS GROUP A profile form title Yorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero. Name Rick Lastname Sanchez Cancel Save “Assemblies of molecules functioning together as a unit”

Mise en oeuvre technique Atomic design ATOMS MOLECULES ORGANISMS PAGES TEMPLATES

IONS Mise en oeuvre technique Atomic design ATOMS MOLECULES ORGANISMS PAGES TEMPLATES

Mise en oeuvre technique Atomic design ATOMS MOLECULES ORGANISMS PAGES TEMPLATES DESIGN TOKENS

Mise en oeuvre technique Design tokens DESIGN TOKENS Wikipedia A named variable that stores a specific design attribute, such as a color, typography setting, spacing value, or other design decision. SAP Design tokens are stored pieces of UI information such as color, spacing, sizing, and typography that collectively make up our design system’s visual identity ChatGPT Ce sont les briques de base d’un système de design. Ils agissent comme une source unique de vérité, reliant le travail des designers et des développeurs tout en garantissant une cohérence visuelle

Mise en oeuvre technique Design tokens DESIGN TOKENS Wikipedia A named that stores a specific , such as a color, typography setting, spacing value, or other design decision. variable design attribute SAP Design tokens are information such as color, spacing, sizing, and typography that collectively make up our design system’s stored pieces of UI visual identity ChatGPT Ce sont les d’un système de design. Ils agissent comme une , reliant le travail des designers et des développeurs tout en garantissant une briques de base source unique de vérité cohérence visuelle

Mise en oeuvre technique Design tokens Value Token background: ( ); var --pink-400 #DD7CB0 100% pink/400 Home Home Home

Mise en oeuvre technique Design tokens Value Token background: ( ); var --pink-400 border-radius: ( ); var --radius-md font-weight: ( ); var --font-weight-md font-family: ( ); var --font-family-main gap: ( ); var --gap-small border: ( ) ( ) ( ); var var var --border-width-normal --border-style --pink-50 #DD7CB0 100% 10px 500 Inter 0.5rem 1px pink/400 radius/medium font/weight/medium font/family/main gap/small border/width/normal Ho me Ho me Ho me

Mise en oeuvre technique Primitive token #FFFFFF 100% White Sortir et découvrir Les vacances de Noël côté culture

Mise en oeuvre technique Primitive token #FFFFFF 100% Sortir et découvrir Les vacances de Noël côté culture Tab Background Header Text On The Home Page White

Mise en oeuvre technique Primitive token #FFFFFF 100% Sortir et découvrir Les vacances de Noël côté culture Tab Background Header Text On The Home Page White Primitive token Component-specific Component-specific

Color tokens Primitives Name Azur-500 Azur-700 Azur-800 White Value #2F7084 #1F2A2E #243B42 #FFFFFF

Color tokens Primitives Name Azur-500 Azur-700 Azur-800 White Value #2F7084 #1F2A2E #243B42 #FFFFFF Component specific Name Tab Background Header Text On The Home Page Section background Light White White Azure-500 Dark Azur-700 White Azur-800 Sortir et découvrir Les vacances de Noël côté culture Sortir et découvrir Les vacances de Noël côté culture

Color tokens Header Text On The Home Page ?

Mise en oeuvre technique Material 3 naming

Mise en oeuvre technique Material 3 naming

Mise en oeuvre technique Material 3 naming

Mise en oeuvre technique Material 3 naming

Mise en oeuvre technique Material 3 naming

Mise en oeuvre technique Material 3 naming

Mise en oeuvre technique Semantic token #FFFFFF 100% Sortir et découvrir Les vacances de Noël côté culture Tab Background On Primary Surface White Primitive token What? Component-specific Where? Semantic token Why? Header Text On The Home Page

Mise en oeuvre technique Primitive token #FFFFFF 100% Sortir et découvrir Les vacances de Noël côté culture Tab Background White Primitive token What? Component-specific Where? Header Text On The Home Page

Mise en oeuvre technique Semantic token #FFFFFF 100% Sortir et découvrir Les vacances de Noël côté culture Tab Background On Primary Surface White Primitive token What? Component-specific Where? Semantic token Why?

Mise en oeuvre technique Semantic token #FFFFFF 100% Sortir et découvrir Démarches Les vacances de Noël côté culture Tab Background On Primary Surface White Primitive token What? Component-specific Where? Semantic token Why?

Mobilités ZFE : la Métropole crée un nouvelle dérogation A partir du 1er janvier, les travailleurs en horaires décalés équipés d'un véhicule Crit'air 3 pourront circuler dans la zone à faibles… Lire Action municipale Ça change quoi… pour Solveig ? Mobilité, rénovation des bâtiments publics, végétalisation, alimentation, solidarité, commerces, santé, sécurité… Lire Santé L'OMS ouvre une Académie à Lyon Un centre pour former les soignants du monde entier. Lire Culture Les vacances de Noël côté culture Les vacances de Noël - du 21 décembre 2024 au 5 janvier 2025 - sont l’occasion d’une riche programmation culturelle à destination des plus jeunes. Lire Notre sélection culture est sortie sur Instagram Concerts, e xpo, théâtre, lecture, festival... Découvrez le programme de janvier ! En savoir + 02.01 Bienvenue 2025 ! La Ville de L yon souhaite une tr ès bonne année 2025 au x L yonnaises et L yonnais. En savoir + 01.01 Question pour un champion Le savie z-vous ? Les L yonnais l'ont surnommée 30.12 Démarches Sortir et découvrir Vie pratique Actions et pro jets Rechercher Arrondissement Accéder à mon espace Résultat ZFE : la Métropole crée un nouvelle dérogation A partir du 1er janvier, les travailleurs en horaires décalés équipés d'un véhicule Crit'air 3 pourront circuler dans la zone à faibles… Lire Ça change quoi… pour Solveig ? Mobilité, rénovation des bâtiments publics, végétalisation, alimentation, solidarité, commerces, santé, sécurité… Lire L'OM Acad Un cent du mond Lire Actions municipales Santé Mo bilités Culture Les vacances de Noël côté culture Les vacances de Noël - du 21 décembre 2024 au 5 janvier 2025 - sont l’occasion d’une riche programmation culturelle à destination des plus jeunes. Lire Démarches Sortir et découvrir Vie p Rechercher Tab Background P rim ary P rim ary Tab Background O n P rim ary O n P rim ary Se condary Se condary

Mobilités ZFE : la Métropole crée un nouvelle dérogation A partir du 1er janvier, les travailleurs en horaires décalés équipés d'un véhicule Crit'air 3 pourront circuler dans la zone à faibles… Lire Action municipale Ça change quoi… pour Solveig ? Mobilité, rénovation des bâtiments publics, végétalisation, alimentation, solidarité, commerces, santé, sécurité… Lire Santé L'OMS ouvre une Académie à Lyon Un centre pour former les soignants du monde entier. Lire Culture Les vacances de Noël côté culture Les vacances de Noël - du 21 décembre 2024 au 5 janvier 2025 - sont l’occasion d’une riche programmation culturelle à destination des plus jeunes. Lire Notre sélection culture est sortie sur Instagram Concerts, e xpo, théâtre, lecture, festival... Découvrez le programme de janvier ! En savoir + 02.01 Bienvenue 2025 ! La Ville de L yon souhaite une tr ès bonne année 2025 au x L yonnaises et L yonnais. En savoir + 01.01 Question pour un champion Le savie z-vous ? Les L yonnais l'ont surnommée 30.12 Démarches Sortir et découvrir Vie pratique Actions et pro jets Rechercher Arrondissement Accéder à mon espace Résultat ZFE : la Métropole crée un nouvelle dérogation A partir du 1er janvier, les travailleurs en horaires décalés équipés d'un véhicule Crit'air 3 pourront circuler dans la zone à faibles… Lire Ça change quoi… pour Solveig ? Mobilité, rénovation des bâtiments publics, végétalisation, alimentation, solidarité, commerces, santé, sécurité… Lire L'OM Acad Un cent du mond Lire Actions municipales Santé Mo bilités Culture Les vacances de Noël côté culture Les vacances de Noël - du 21 décembre 2024 au 5 janvier 2025 - sont l’occasion d’une riche programmation culturelle à destination des plus jeunes. Lire Démarches Sortir et découvrir Vie p Rechercher Tab Background P rim ary P rim ary Tab Background O n P rim ary O n P rim ary Se condary Se condary

Color tokens Primitives Name Azur-400 Azur-500 Azur-700 Azur-800 Azur-900 Coconut Cherry-500 Cherry-400 Value #5892A7 #2F7084 #243B42 #1F2A2E #040A0B #FFFFFF #E6134D #ED2B60

Color tokens Primitives Name Azur-400 Azur-500 Azur-700 Azur-800 Azur-900 Coconut Cherry-500 Cherry-400 Value #5892A7 #2F7084 #243B42 #1F2A2E #040A0B #FFFFFF #E6134D #ED2B60 Semantic Name Primary On Primary Background Surface Low Surface High Secondary Light Azur-500 Coconut Coconut Azur-500 Coconut Cherry-500 Dark Azur-400 Coconut Azur-900 Azur-800 Azur-700 Cherry-400

Color tokens Primitives Name Azur-400 Azur-500 Azur-700 Azur-800 Azur-900 Coconut Cherry-500 Cherry-400 Value #5892A7 #2F7084 #243B42 #1F2A2E #040A0B #FFFFFF #E6134D #ED2B60 Semantic Name Primary On Primary Background Surface Low Surface High Secondary Light Azur-500 Coconut Coconut Azur-500 Coconut Cherry-500 Dark Azur-400 Coconut Azur-900 Azur-800 Azur-700 Cherry-400 Component specific Name Page background Page section Page section title Tab background Button background Value Background Surface Low On Surface Low Surface High Secondary

No content

No content

No content

No content

No content

No content

No content

No content

Merci pour votre attention ! in/merciersimon/ in/antoinecandy/