# Design Systems · Tech watch [Canonical source]() Shared components, rules and assets for consistent interfaces. ## [UI SFX gives interface sounds a consistent language]() UI SFX groups **78 interface events** into 12 sonic styles, so teams can compare how the same feedback feels without changing what it means. The library includes 72 one-shots and six loops, with interactive previews that place sounds in product flows. Install it with `npm install uisfx`; its TypeScript API plays sounds and lets callers stop a loop when the associated state ends. Audio files use the CC0 license, while the runtime is MIT-licensed—a clear split that supports reuse in web and native projects alike. 2026-10-29 · [Markdown]() · [Original resource]() ## [Plane: an open-source platform for projects, cycles, and roadmaps]() Plane brings work-item tracking, cycles, modules, pages, and analytics together in an open-source project management platform, with self-hosting options through Docker or Kubernetes. Its repository also documents a substantial architecture effort: migrating the interface to the Propel design system in stages, with tests, accessibility checks, and the gradual removal of legacy components. The web app uses React and React Router, with Django on the API side. 2026-10-29 · [Markdown]() · [Original resource]() ## [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]() · [Original resource]() ## [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]() · [Original resource]() ## [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]() · [Original resource]() ## [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]() · [Original resource]() ## [Give coding agents a design vocabulary with Impeccable]() Impeccable provides design commands and guidance to help an agent refine an existing interface. It covers typography, color, and consistency with a component system. 2026-05-10 · [Markdown]() · [Original resource]() ## [Expose Storybook to an agent through MCP]() This article shows how to expose a Storybook-documented React library through a local MCP server. Component manifests let an agent consult design-system rules before generating code. 2026-02-06 · [Markdown]() · [Original resource]() ## [Skeleton: organize themes and components around Tailwind]() Skeleton adds a theme system and Zag.js-based components to Tailwind. The documentation presents shared design foundations for frameworks including Svelte and React. 2025-10-19 · [Markdown]() · [Original resource]() ## [Omlet: inspect component and prop usage]() Omlet shows component usage and supplied prop values inside VS Code. These insights help teams understand actual library adoption before changing components. 2025-03-20 · [Markdown]() · [Original resource]() ## [Utopia: build fluid type and spacing scales]() Utopia defines scales for small and large screens and lets the browser interpolate between them. The approach helps build a coherent type system with fewer breakpoints. 2024-10-15 · [Markdown]() · [Original resource]() ## [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]() · [Original resource]() ## [TW Classed: compose Tailwind component variants]() TW Classed defines reusable components with typed variants and extensible styles. Compound variants reduce repeated class combinations across application views. 2023-10-16 · [Markdown]() · [Original resource]()