# Design tokens · Veille technologique

[Source canonique](<https://sebastien.rigaux.be/veille/tags/design-tokens>)

Valeurs nommées de couleur, typographie et espacement partagées par les composants.

Tags associés : [CSS](<https://sebastien.rigaux.be/veille/tags/css>) · [Design Systems](<https://sebastien.rigaux.be/veille/tags/design-systems>)

## [CSS : gérer les icônes comme des tokens de design](<https://sebastien.rigaux.be/veille/liens/css-gerer-les-icones-comme-des-tokens-de-design>)

Lea Verou propose de traiter les icônes comme des **design tokens CSS** : des propriétés personnalisées les associent aux pseudo-éléments, et des masques SVG les affichent sans ajouter de balisage. Les composants peuvent ainsi choisir ou remplacer une icône selon l’état, le thème ou le contexte, tout en centralisant les définitions dans le design system.

La technique a ses limites : le masquage convient surtout aux icônes monochromes, les URL et propriétés enregistrées ne se comportent pas de façon uniforme selon les navigateurs, et Safari nécessite des contournements. L’article détaille ces compromis et présente le package `@nudeui/icons` qui rassemble le système.

2026-10-22 · [Markdown](<https://sebastien.rigaux.be/veille/liens/css-gerer-les-icones-comme-des-tokens-de-design.md>) · [Ressource originale](<https://lea.verou.me/blog/2026/icons/>)

## [Refero Styles : bibliothèque de design systems exploitables par l’IA](<https://sebastien.rigaux.be/veille/liens/refero-styles-bibliotheque-de-design-systems-exploitables-par-l-ia>)

Refero Styles propose une collection consultable de plus de 2 000 design systems issus de sites produits reconnus, chacun accompagné d’un fichier DESIGN.md lisible par des IA comme Cursor, Claude ou ChatGPT. L’outil permet d’examiner couleurs, typographies, espacements et composants, puis de réutiliser ces styles dans ses propres projets ou prompts IA. Une ressource concrète pour donner du contexte visuel à un assistant ou accélérer la conception d’interfaces inspirées de références du marché.

2026-10-16 · [Markdown](<https://sebastien.rigaux.be/veille/liens/refero-styles-bibliotheque-de-design-systems-exploitables-par-l-ia.md>) · [Ressource originale](<https://styles.refero.design/>)

## [Penpot, plateforme open source de design et prototypage](<https://sebastien.rigaux.be/veille/liens/penpot-plateforme-open-source-de-design-et-prototypage>)

Penpot est une plateforme de conception et de prototypage open source qui relie les workflows de design, de code et d’IA. Elle propose des interfaces responsives, des composants et tokens partagés, ainsi que des formats ouverts comme CSS, HTML, SVG et JSON pour faciliter le passage entre maquettes et implémentation.

2026-10-04 · [Markdown](<https://sebastien.rigaux.be/veille/liens/penpot-plateforme-open-source-de-design-et-prototypage.md>) · [Ressource originale](<https://penpot.app/>)

## [Dembrandt : extraire les tokens de design d’un site web](<https://sebastien.rigaux.be/veille/liens/dembrandt-extraire-les-tokens-de-design-d-un-site-web>)

Dembrandt extrait d’un site ses couleurs, polices, bordures et autres tokens visuels. Le dépôt inclut une commande et des intégrations qui peuvent reporter ces valeurs dans un système de design existant.

2026-08-16 · [Markdown](<https://sebastien.rigaux.be/veille/liens/dembrandt-extraire-les-tokens-de-design-d-un-site-web.md>) · [Ressource originale](<https://github.com/dembrandt/dembrandt>)

## [Penpot : rapprocher design, composants et code](<https://sebastien.rigaux.be/veille/liens/penpot-rapprocher-design-composants-et-code>)

Penpot propose une plateforme de design open source avec prototypes, composants partagés et design tokens. Ses layouts basés sur Grid et Flex facilitent les échanges entre designers et développeurs.

2024-07-28 · [Markdown](<https://sebastien.rigaux.be/veille/liens/penpot-rapprocher-design-composants-et-code.md>) · [Ressource originale](<https://penpot.app/>)