# Design tokens · Tech watch

[Canonical source](<https://sebastien.rigaux.be/en/tech-watch/tags/design-tokens>)

Named color, typography and spacing values shared across components.

Related tags : [CSS](<https://sebastien.rigaux.be/en/tech-watch/tags/css>) · [Design Systems](<https://sebastien.rigaux.be/en/tech-watch/tags/design-systems>)

## [CSS icons as design tokens, without extra markup](<https://sebastien.rigaux.be/en/tech-watch/links/css-icons-as-design-tokens-without-extra-markup>)

Lea Verou proposes treating icons as **CSS design tokens**: custom properties assign them to pseudo-elements, where SVG masks render them without adding markup. Components can then select or override an icon based on state, theme, or context, while keeping definitions centralized in the design system.

There are trade-offs: masking mainly suits monochrome icons, URLs and registered properties behave inconsistently across browsers, and Safari needs workarounds. The post explains these constraints and introduces `@nudeui/icons`, a package that brings the system together.

2026-10-22 · [Markdown](<https://sebastien.rigaux.be/en/tech-watch/links/css-icons-as-design-tokens-without-extra-markup.md>) · [Original resource](<https://lea.verou.me/blog/2026/icons/>)

## [Refero Styles: AI-ready design system library](<https://sebastien.rigaux.be/en/tech-watch/links/refero-styles-ai-ready-design-system-library>)

Refero Styles offers a browsable collection of over 2,000 design systems from well-known product sites, each paired with a DESIGN.md file readable by AIs like Cursor, Claude, or ChatGPT. The tool lets you inspect colors, typography, spacing, and components, then reuse these styles in your own projects or AI prompts. It’s a practical resource to give visual context to an assistant or speed up interface design inspired by market references.

2026-10-16 · [Markdown](<https://sebastien.rigaux.be/en/tech-watch/links/refero-styles-ai-ready-design-system-library.md>) · [Original resource](<https://styles.refero.design/>)

## [Penpot, an open design and prototyping platform](<https://sebastien.rigaux.be/en/tech-watch/links/penpot-an-open-design-and-prototyping-platform>)

Penpot is an open-source design and prototyping platform connecting design, code, and AI workflows. It supports responsive interfaces, shared components and design tokens, and open formats such as CSS, HTML, SVG, and JSON to help bridge mockups and implementation.

2026-10-04 · [Markdown](<https://sebastien.rigaux.be/en/tech-watch/links/penpot-an-open-design-and-prototyping-platform.md>) · [Original resource](<https://penpot.app/>)

## [Extract a website’s design tokens with Dembrandt](<https://sebastien.rigaux.be/en/tech-watch/links/extract-a-website-s-design-tokens-with-dembrandt>)

Dembrandt extracts a site’s colors, fonts, borders, and other visual tokens. Its repository includes a command and integrations for bringing those values into an existing design system.

2026-08-16 · [Markdown](<https://sebastien.rigaux.be/en/tech-watch/links/extract-a-website-s-design-tokens-with-dembrandt.md>) · [Original resource](<https://github.com/dembrandt/dembrandt>)

## [Penpot: connect design, components and code](<https://sebastien.rigaux.be/en/tech-watch/links/penpot-connect-design-components-and-code>)

Penpot provides an open-source design platform with prototypes, shared components and design tokens. Grid and Flex-based layouts support collaboration between designers and developers.

2024-07-28 · [Markdown](<https://sebastien.rigaux.be/en/tech-watch/links/penpot-connect-design-components-and-code.md>) · [Original resource](<https://penpot.app/>)