Upgrade to Pro — share decks privately, control downloads, hide ads and more …

[TnT 2025] Dark Mode

Simon Mercier
February 10, 2025

[TnT 2025] Dark Mode

👓 Pourquoi un thème sombre ?
Du Minitel à SNCF Connect: ses avantages, ses inconvénients et les études scientifiques associées.

🌜 Comment concevoir un thème sombre à partir d’un thème clair ?
Les astuces de design et les pièges à éviter.

🤝 Comment définir un langage commun entre designers et développeurs ?
Faciliter son implémentation et sa maintenabilité, introduction aux design tokens.

Simon Mercier

February 10, 2025
Tweet

Other Decks in Design

Transcript

  1. 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 ?
  2. Lisibilité Positive display polarity is particularly advantageous for small character

    sizes: implications for display design Cosima Piepenbrock, Susanne Mayr, Axel Buchner 2013
  3. 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.
  4. 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
  5. 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
  6. 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
  7. Effets à long terme ? Reading and Myopia: Contrast Polarity

    Matters (nature.com) Andrea C. Aleman, Min Wang, Frank Schaeffel 2018
  8. 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
  9. 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, ...)
  10. 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
  11. 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
  12. 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
  13. 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
  14. 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
  15. Couleurs vives Test 5.59 : 1 Test 7.85 : 1

    Test 4.72 : 1 Norme WCAG AA : ratio supérieur à 4.5 : 1
  16. 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
  17. 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
  18. 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
  19. 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
  20. 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
  21. 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
  22. 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 ??? ??? ??? ???
  23. 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
  24. 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
  25. 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
  26. Mise en oeuvre technique Atomic design Atomic design, according to

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

    Brad Frost “The smallest functional unit” Home Label Input COMPONENTS ATOMS
  28. 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”
  29. 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”
  30. 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
  31. 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
  32. Mise en oeuvre technique Design tokens Value Token background: (

    ); var --pink-400 #DD7CB0 100% pink/400 Home Home Home
  33. 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
  34. Mise en oeuvre technique Primitive token #FFFFFF 100% White Sortir

    et découvrir Les vacances de Noël côté culture
  35. 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
  36. 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
  37. 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
  38. 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
  39. 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
  40. 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?
  41. 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?
  42. 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
  43. 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
  44. 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
  45. 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
  46. 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