52 Open Source Design Tokens Software Projects

Build consistent, themeable React apps based on constraint-based design principles

Theo is a an abstraction for transforming and formatting Design Tokens

A build system for creating cross-platform styles.

The Design Token Framework — Adopt a unified design language across platforms, codebases, and teams

👩‍🎨 Access your design tokens with ease

This is the official DTCG repository for the design tokens specification.

A specification for defining theme objects & design tokens for use with UI components

A list of resources on all things to do with Design Tokens

Figmagic is the missing piece between DevOps and design: Generate design tokens, export graphics, and extract design token-driven React components from your Figma documents.

Display design token documentation generated from your stylesheets and icon files. Preview design token changes in the browser. Add your design tokens to your Storybook Docs pages using the custom Doc Blocks.

Design tokens for Polaris, Shopify’s design system

CION - Design system boilerplate for Vue.js

Batch create, manage and update Sketch styles and symbols using SCSS/LESS

UDT spec, reference library and related packages

A demonstration of a setup of Style Dictionary to be used for the generation of design tokens

A place where OpenTable engineers and designers openly work together

Build Your Design System on Knapsack

Build consistent, themeable React Native apps based on constraint-based design principles

Command line tool for exporting resources and generating code from your Figma files

Create your Semantic Style Variables (Universal language for developers and designers).

A build system for managing cross-platform design systems using design tokens.

Using Figmagic (simplifying design token generation and asset extraction) with Webpack 5, React 16, Styled Components.

A tool for managing design decision outputs for different platforms

📚️ Custom DocBlocks for Storybook

Example showing how to transform design tokens into color palettes usable by designers

Build system of design-tokens for any platforms

Manage Design Tokens with GraphQL ⚠️[DOA]

Import Google Spreadsheets to a format digestable by Theo

≡𝘿𝙖𝙨𝙝 A tiny, powerful, framework-agnostic CSS-in-JS library

Cero to Production app in JavaScript

A bridge between Tailwind and Stitches

A curated list of bookmarks, resources and articles about design systems focused on developers.

🎨 Figma plugin to export design tokens to json in an amazon style dictionary compatible format.

Generate accessible UI colors from your base color tokens.

Decathlon Design System libraries for web applications

The last CSS framework I'll (hopefully) ever have to make

Responsive, theme-based style props for building design systems with React. Written in TypeScript.

Component library for Cero a Producción Project

Specify is a central platform for companies who want to unify their brand identity, by connecting their design system tools.

PostCSS plugin for accessing Theme UI variables

The Fluent UI token pipeline generates source code for Fluent UI libraries.

Design tokens, managed via Google Spreadsheets, generated using Theo

Monorepo that contains a set of PostCSS plugins.

A awesome tool for generate Figma design tokens as variables.

A front-end CLI for building and managing design pattern libraries. Maintained by @NYCOpportunity

Material Design DSP

Talend's unified web UI repository.

A CLI toolkit for aiding design tokens adoption.

Abstract UI atomic values to support the Auro Design System.

Official Repo of the Figma Plugin 'Figma Tokens'

A tool to create accessible color systems

Tooling for the official W3C Design Tokens spec