design-tokens

There are 42 repositories under design-tokens topic.

• polaris

  Shopify / polaris

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

  component-librarydesign-systemdesign-systemsdesign-tokensfigma-pluginiconsreactshopify-polaristypescriptvscode-extension
  Language:TypeScript 6044
• panda

  chakra-ui / panda

  🐼 Universal, Type-Safe, CSS-in-JS Framework for Design Systems ⚡️

  cssstyled-systemtypescriptutility-classesdesign-systemframework-agnosticpostcssatomic-csscss-in-jsenginejit-compilercompilerdesign-tokenstheming
  Language:TypeScript 5866
• theme-ui

  system-ui / theme-ui

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

  colordesigndesign-systemdesign-tokensemotionlayoutmdxreactstylethemetypographyui
  Language:TypeScript 5374
• style-dictionary

  style-dictionary / style-dictionary

  A build system for creating cross-platform styles.

  stylestyleguidedesign-systemscross-platformdesign-toolsbuild-systembuild-tooldesign-tokensstyle-tokens
  Language:JavaScript 4406

• salesforce-ux / theo

  Theo is a an abstraction for transforming and formatting Design Tokens

  design-systemsdesign-tokens
  Language:JavaScript 1993

• design-tokens / community-group

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

  design-systemdesign-systemsdesign-tokens
  Language:HTML 1797

• tokens-studio / figma-plugin

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

  design-tokensfigmastylestokens
  Language:TypeScript 1495

• sturobson / Awesome-Design-Tokens

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

  design-systemdesign-systemsdesign-tokens
  1262
• diez

  diez / diez

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

  design-tokensdesign-systemsdesign-languagecross-platformcompilerios-styleandroid-styleweb-stylesstyle
  Language:TypeScript 1240

• lukasoppermann / design-tokens

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

  figmafigma-pluginfigma-apidesign-systemdesign-tokensamazon-style-dictionarystyle-dictionary
  Language:TypeScript 1074
• figmagic

  mikaelvesavuori / figmagic

  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.

  design-specsdesign-systemdesign-systemsdesign-tokensfigmafigma-apihacktoberfesttokensux
  Language:TypeScript 848

• patternfly / patternfly-react

  A set of React components for the PatternFly project.

  design-systemdesign-tokenshacktoberfestpatternflyreact-componentsreactjstypescript
  Language:TypeScript 846
• awesome-design-systems

  klaufel / awesome-design-systems

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

  designdesign-systemsdesign-systemreusable-componentsfigmadigital-productsstorybookatomic-designcssdesign-tokensdesign-patternspattern-librarypattern-libawesomeawesome-listfrontendresources
  796
• pinceau

  Tahul / pinceau

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

  css-in-tsdesign-tokensdeveloper-experiencevuezero-runtime
  Language:TypeScript 692
• storybook-design-token

  UX-and-I / storybook-design-token

  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.

  storybookstorybook-addondesign-systemdesign-patterndesign-tokensreactangularvuesasssvgaddonstylesheetscss
  Language:TypeScript 665

• components-ai / css.gui

  Visual development environment for CSS

  cssdesigndesign-tokensdesign-toolsguiparametricparametric-designreact
  Language:TypeScript 569
• theme-specification

  system-ui / theme-specification

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

  design-tokensthemesthemingcssdesign-systemsdesign
  549
• design-system-utils

  mrmartineau / design-system-utils

  👩‍🎨 Access your design tokens with ease

  styled-componentsemotioncss-in-jsreactpreacttokensdesign-tokenstypescript
  Language:TypeScript 545
• design-system

  hashicorp / design-system

  Helios Design System

  componentsdesign-systemdesign-systemsdesign-tokensemberjshashicorpheliosicons
  Language:TypeScript 485

• ardov / huetone

  A tool to create accessible color systems

  cielabcolorcontrastdesign-systemdesign-tokens
  Language:TypeScript 409

• primer / primitives

  Color, typography, and spacing primitives in json.

  design-systemdesign-tokensstyle-dictionary
  Language:TypeScript 355
• vitamin-web

  Decathlon / vitamin-web

  Decathlon Design System UI components for web applications

  design-systemlibrariescomponentsdesign-tokensui-componentsui-kitstyleguideyarnshowcasesvitaminui-librarymonorepolernacssdecathlonstorybookhtmlnxaccessibilitytailwindcss
  Language:HTML 288
• terrazzo

  terrazzoapp / terrazzo

  Use DTCG tokens JSON to generate code for web, mobile, native apps, and more

  w3cdesigntokensdesign-systemdesign-tokensstylestyle-tokenscssdesign-systemssasstypescriptdtcg
  Language:TypeScript 264

• material-foundation / material-tokens

  Material Design DSP

  dspmaterialmaterial-designtokensdesign-tokensjsonvscode
  Language:CSS 256

• Shopify / polaris-tokens

  Design tokens for Polaris, Shopify’s design system

  design-systemsdesign-tokenspolarisshopifyshopify-polaris
  Language:TypeScript 239

• lukasoppermann / style-dictionary-utils

  A package of transforms, formats, filters, etc. to use in your style dictionary config to transform your design tokens

  configdesign-tokensstyle-dictionarydesign-tokentransformerutilities
  Language:TypeScript 205
• atomium

  juntossomosmais / atomium

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

  custom-elementsdesign-systemionicstenciljsweb-componentswebcomponentsnxstorybooktypescriptdesign-systemsdesign-tokensdesignsystem
  Language:TypeScript 175

• didoo / style-dictionary-demo

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

  design-systemsdesign-tokensstyle-dictionary
  Language:JavaScript 172

• universal-design-tokens / udt

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

  design-tokensparserserializerdesign-systemsdtcg
  Language:TypeScript 169
• a11y-color-tokens

  5t3ph / a11y-color-tokens

  Generate accessible UI colors from your base color tokens.

  a11yaccessibilitycolorcssdesign-systemdesign-tokenssasstokens
  Language:JavaScript 161

• Talend / ui

  Talend's unified web UI repository.

  talendlernareactbootstrap3-themejavascriptreactjsreact-reduxreact-componentsdesign-systemdesign-tokens
  Language:JavaScript 157

• visualjerk / vue-cion-design-system

  CION - Design system boilerplate for Vue.js

  vuedesign-systemdesign-tokenslivingstyleguideliving-documentationvuejscomponentsdesign-systems
  Language:HTML 144
• style-dictionary-tailwindcss-transformer

  nado1001 / style-dictionary-tailwindcss-transformer

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

  design-systemdesign-tokensstyle-dictionarytailwindtailwindcss
  Language:TypeScript 140

• marigold-ui / marigold

  Design System based on react-aria and Tailwind CSS

  design-systemcomponent-libraryuithemestylereactariareact-ariaa11ydesign-tokenstailwindcsstailwindhacktoberfest
  Language:TypeScript 135

• mateoroldos / tokenbase

  Create, manage and distribute design tokens.

  cssdesign-systemdesign-system-managerdesign-tokensui-design
  Language:Svelte 133

• Royal-Navy / design-system

  Build web applications that meet the Royal Navy service standards

  design-systemmonoreporeactstorybookcomponent-librarydesign-tokensfontsiconslint-config
  Language:TypeScript 122