Awesome Open Source

Programming Languages

Search results for design tokens

design-tokens x

104 search results found

Polaris ⭐ 5,663

Shopify’s design system to help us work together to build a great experience for all of our merchants.

Theme Ui ⭐ 5,172

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

Style Dictionary ⭐ 3,538

A build system for creating cross-platform styles.

Theo is a an abstraction for transforming and formatting Design Tokens

Community Group ⭐ 1,357

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

Figma Plugin ⭐ 1,245

Official repository of the plugin 'Tokens Studio for Figma' (Figma Tokens)

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

Awesome Design Tokens ⭐ 1,016

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

Design Tokens ⭐ 863

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

Figmagic ⭐ 766

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.

Pinceau ⭐ 637

🖌️ Make your <script> lighter and your <style> smarter

Storybook Design Token ⭐ 602

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.

Awesome Design Systems ⭐ 586

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

Css.gui ⭐ 487

Visual development environment for CSS

Design System Utils ⭐ 415

👩‍🎨 Access your design tokens with ease

Design System ⭐ 392

Helios Design System

Theme Specification ⭐ 273

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

Vitamin Web ⭐ 256

Decathlon Design System UI components for web applications

Huetone ⭐ 241

A tool to create accessible color systems

Polaris Tokens ⭐ 216

Design tokens for Polaris, Shopify’s design system

A11y Color Tokens ⭐ 152

Generate accessible UI colors from your base color tokens.

Atomium ⭐ 151

Atomium is an internal design system for 'Juntos Somos Mais' using Web Components

Talend's unified web UI repository.

Vue Cion Design System ⭐ 133

CION - Design system boilerplate for Vue.js

Universal Design Tokens (UDT) is a collection of libraries and utilities for working with DTCG design tokens files.

Finastra Design System ⭐ 115

The Finastra Design System provided as a theme and components library

Style Dictionary Utils ⭐ 107

Utilities to use in your style dictionary config

Material Tokens ⭐ 102

Material Design DSP

Specify helps you unify your brand identity by collecting, storing and distributing design tokens and assets — automatically.

Cobalt Ui ⭐ 96

Use W3C Design Token Format Module tokens in CI and code

Puzzle Tokens ⭐ 94

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

Marigold ⭐ 88

Design System based on react-aria and Tailwind CSS

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

Style Dictionary Tailwindcss Transformer ⭐ 77

This is a plugin to generate the config of Tailwind CSS using Style Dictionary

Design Tokens ⭐ 76

A place where OpenTable engineers and designers openly work together

Style Dictionary Demo ⭐ 74

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

Spectrum Tokens ⭐ 66

Tokens used by Spectrum, Adobe's design system.

Theme Ui Native ⭐ 62

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

Design Codex ⭐ 57

Codex is the Design System for Wikimedia. Codex features a toolkit for building user interfaces, containing design tokens, Vue 3 components and VitePress documentation site packages. This is a mirror from https://gerrit.wikimedia.org/g/design/codex/

System Props ⭐ 55

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

Figmagic Example ⭐ 51

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

Cero Components ⭐ 50

Component library for Cero a Producción Project

Themekit ⭐ 50

Build system of design-tokens for any platforms

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

Figma Variables Import ⭐ 49

Variables Import plugin for Figma

Design Tokens ⭐ 48

Design tokens module for Nuxt

Chromatic ⭐ 45

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

Fluentui Token Pipeline ⭐ 38

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

Keyboard crafted https://nx.dev plugins for your workspace

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

A tool for managing design decision outputs for different platforms

Reablocks ⭐ 31

🧩 Component Library for React. Maintained by @goodcodeus.

Launchpad Ui ⭐ 31

🚀 LaunchDarkly's design system

Lyne Components ⭐ 30

🧪 Experimental base components for Lyne Design System

Tetrisly React ⭐ 28

Tetrisly offers user-friendly components designed for effortless integration. Plus, it's fully compatible with Tetrisly for Figma with a seamless design and development experience in mind.

Design Tokens Generator ⭐ 28

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

Figma Plugin ⭐ 25

TokensBrücke is a Figma plugin that converts Figma variables into design-tokens JSON.

Stitchwind ⭐ 20

A bridge between Tailwind and Stitches

Postcss Theme Ui ⭐ 19

PostCSS plugin for accessing Theme UI variables

Tokens2palettes Example ⭐ 18

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

Figma Tokens ⭐ 17

🎨 A light tool for generate Figma design tokens as variables.

Product Kit_core ⭐ 15

Product Kit Core provides design tokens for the Mercedes-Benz Tech Innovation styleguide.

Aurodesigntokens ⭐ 15

Abstract UI atomic values to support the Auro Design System.

Design Tokens ⭐ 14

Runroom implementation of Figma design tokens

Bitstyles ⭐ 14

A complete design system, with base styles and components, built in Sass using CSS variables

The open-source mono-repository for the design reference, components libraries and documentations of Fractal, Snowball's design system.

Tokenparser ⭐ 13

Tool that converts your Figma tokens to any language made with Rust

Sketch Design Tokens Exporter ⭐ 13

Export Design Tokens from your Sketch document via plugin

Red Hat Design Tokens ⭐ 13

Red Hat design tokens

Design Tokens ⭐ 12

The source of truth for designing Telekom-branded digital products

Google Spreadsheets Theo ⭐ 12

Import Google Spreadsheets to a format digestable by Theo

Design Tokens Graphql ⭐ 12

Manage Design Tokens with GraphQL

A truly versatile CSS toolkit.

One Core Toolbox ⭐ 11

A Figma plugin that simplifies the use of the One Core design system for New Relic designers (internal only).

Patterns Cli ⭐ 11

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

Fd Design System ⭐ 11

FD Design System

Stylelint Design Tokens Plugin ⭐ 11

Stylelint plugin for checking Design Tokens use inside your CSS.

Design Tokens ⭐ 10

Design tokens for the Sage Design system using Amazon Style Dictionary.

Design Systems ⭐ 10

Design System open-source database

Ameba Color Palette.css ⭐ 9

🎨 Ameba Color Palette.

Import Figma designs in React code

B01ler Kitchen ⭐ 9

A fully customisable and tokenised design system boilerplate built by Accenture Song

Postcss Plugins ⭐ 9

Monorepo that contains a set of PostCSS plugins.

🪸 Coral Design System by DiveTool

Sargam Colors ⭐ 8

A simple scalable color system for designing warm welcoming, caring sites and apps.

Provides basic tokens and assets based on the DB UX Design System.

Design Token Validator ⭐ 8

Validate your design tokens

[WIP] 🚧🚧🚧 🔺 The Design System Framework — Build consistent, themeable, type-safe, accessible React apps and websites with ease, confidence, and speed.

Ocean Tokens ⭐ 7

Ocean DS Design Tokens

A low-level SCSS library for building and managing token-driven design systems.

Figma Tokens Converter Cli ⭐ 7

A CLI with utilities to simplify the process of Figma Design Tokens to Frontend.

Design Tokens synced with Nuxt design team Figma.

Ios Design Tokens ⭐ 6

Design tokens visualized for iOS

A simple CLI tool that helps you generate design tokens as code from your Figma project.

Dialtone Tokens ⭐ 6

Design Tokens for Dialtone, Dialpad's design system.

Google Spreadsheets Theo Demo ⭐ 6

Design tokens, managed via Google Spreadsheets, generated using Theo

Design Tokens Format Module ⭐ 6

A Typescript implementation of the Design Tokens Format Module specification

Android Design Tokens ⭐ 6

Design tokens visualized for Android

Figmagic Action ⭐ 6

Use Figmagic to retrieve tokens, graphics, and/or React components from a Figma document.

CSS utility class generator

1-100 of 104 search results

Privacy | About | Terms | Follow Us On Twitter

Copyright 2018-2024 Awesome Open Source. All rights reserved.