design-tokens

There are 38 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 5775
• theme-ui

  system-ui / theme-ui

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

  colordesigndesign-systemdesign-tokensemotionlayoutmdxreactstylethemetypographyui
  Language:TypeScript 5291
• panda

  chakra-ui / panda

  🐼 Universal, Type-Safe, CSS-in-JS Framework for Product Teams ⚡️

  atomic-csscompilercsscss-in-jsdesign-systemdesign-tokensengineframework-agnosticjit-compilerpostcssstyled-systemthemingtypescriptutility-classes
  Language:TypeScript 5116
• style-dictionary

  amzn / style-dictionary

  A build system for creating cross-platform styles.

  build-systembuild-toolcross-platformdesign-systemsdesign-tokensdesign-toolsstylestyle-tokensstyleguide
  Language:JavaScript 3877

• salesforce-ux / theo

  Theo is a an abstraction for transforming and formatting Design Tokens

  design-systemsdesign-tokens
  Language:JavaScript 1957

• design-tokens / community-group

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

  design-systemdesign-systemsdesign-tokens
  Language:HTML 1534

• tokens-studio / figma-plugin

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

  design-tokensfigmastylestokens
  Language:TypeScript 1350
• 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 1228

• sturobson / Awesome-Design-Tokens

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

  design-systemdesign-systemsdesign-tokens
  1170

• 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 955
• 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 810
• 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
  710
• pinceau

  Tahul / pinceau

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

  css-in-tsdesign-tokensdeveloper-experiencevuezero-runtime
  Language:TypeScript 681
• 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.

  addonangularcssdesign-patterndesign-systemdesign-tokensreactsassstorybookstorybook-addonstylesheetssvgvue
  Language:TypeScript 644
• design-system-utils

  mrmartineau / design-system-utils

  👩‍🎨 Access your design tokens with ease

  styled-componentsemotioncss-in-jsreactpreacttokensdesign-tokenstypescript
  Language:TypeScript 539

• components-ai / css.gui

  Visual development environment for CSS

  cssguireactparametricdesign-toolsdesigndesign-tokensparametric-design
  Language:TypeScript 533
• theme-specification

  system-ui / theme-specification

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

  cssdesigndesign-systemsdesign-tokensthemestheming
  531
• design-system

  hashicorp / design-system

  Helios Design System

  componentsdesign-systemdesign-systemsdesign-tokensemberjshashicorpheliosicons
  Language:TypeScript 436

• ardov / huetone

  A tool to create accessible color systems

  cielabcolorcontrastdesign-systemdesign-tokens
  Language:TypeScript 331
• vitamin-web

  Decathlon / vitamin-web

  Decathlon Design System UI components for web applications

  accessibilitycomponentscssdecathlondesign-systemdesign-tokenshtmllernalibrariesmonoreponxshowcasesstorybookstyleguidetailwindcssui-componentsui-kitui-libraryvitaminyarn
  Language:HTML 279

• material-foundation / material-tokens

  Material Design DSP

  design-tokensdspjsonmaterialmaterial-designtokensvscode
  Language:CSS 236

• Shopify / polaris-tokens

  Design tokens for Polaris, Shopify’s design system

  design-systemsdesign-tokensshopify-polarisshopifypolaris
  Language:TypeScript 234

• didoo / style-dictionary-demo

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

  design-tokensstyle-dictionarydesign-systems
  Language:JavaScript 167
• atomium

  juntossomosmais / atomium

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

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

• 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 164
• a11y-color-tokens

  5t3ph / a11y-color-tokens

  Generate accessible UI colors from your base color tokens.

  accessibilitya11ycolordesign-tokensdesign-systemtokenssasscss
  Language:JavaScript 159

• 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 153

• Talend / ui

  Talend's unified web UI repository.

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

• terrazzoapp / terrazzo

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

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

• visualjerk / vue-cion-design-system

  CION - Design system boilerplate for Vue.js

  vuedesign-systemdesign-tokenslivingstyleguideliving-documentationvuejscomponentsdesign-systems
  Language:HTML 142
• finastra-design-system

  Finastra / finastra-design-system

  The Finastra Design System provided as a theme and components library

  componentsdesign-systemuiux-designthemeweb-componentscssdesign-tokensfinancefintechsass
  Language:TypeScript 122
• style-dictionary-tailwindcss-transformer

  nado1001 / style-dictionary-tailwindcss-transformer

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

  style-dictionarydesign-tokenstailwindcssdesign-systemtailwind
  Language:TypeScript 118

• mateoroldos / tokenbase

  Create, manage and distribute design tokens.

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

• Specifyapp / parsers

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

  designdesign-systemdesign-tokensdesign-apistyle-dictionarytailwindcsstheme-uijssreact-nativesvgoassetsdesign-opsparserscss-custom-properties
  Language:TypeScript 111

• peruvianidol / coolcss

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

  csscss-frameworkdesign-tokensdesign-system
  Language:HTML 109

• Royal-Navy / design-system

  Build web applications that meet the Royal Navy service standards

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