design-tokens

There are 39 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 5817
• theme-ui

  system-ui / theme-ui

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

  colordesigndesign-systemdesign-tokensemotionlayoutmdxreactstylethemetypographyui
  Language:TypeScript 5304
• 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 5238
• style-dictionary

  amzn / style-dictionary

  A build system for creating cross-platform styles.

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

• salesforce-ux / theo

  Theo is a an abstraction for transforming and formatting Design Tokens

  design-systemsdesign-tokens
  Language:JavaScript 1965

• design-tokens / community-group

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

  design-tokensdesign-systemsdesign-system
  Language:HTML 1562

• tokens-studio / figma-plugin

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

  design-tokensfigmastylestokens
  Language:TypeScript 1364
• diez

  diez / diez

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

  android-stylecompilercross-platformdesign-languagedesign-systemsdesign-tokensios-stylestyleweb-styles
  Language:TypeScript 1231

• sturobson / Awesome-Design-Tokens

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

  design-systemdesign-systemsdesign-tokens
  1204

• 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 966
• 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 814
• awesome-design-systems

  klaufel / awesome-design-systems

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

  atomic-designawesomeawesome-listcssdesigndesign-patternsdesign-systemdesign-systemsdesign-tokensdigital-productsfigmafrontendpattern-libpattern-libraryresourcesreusable-componentsstorybook
  721
• pinceau

  Tahul / pinceau

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

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

• components-ai / css.gui

  Visual development environment for CSS

  cssdesigndesign-tokensdesign-toolsguiparametricparametric-designreact
  Language:TypeScript 542
• design-system-utils

  mrmartineau / design-system-utils

  👩‍🎨 Access your design tokens with ease

  styled-componentsemotioncss-in-jsreactpreacttokensdesign-tokenstypescript
  Language:TypeScript 539
• theme-specification

  system-ui / theme-specification

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

  design-tokensthemesthemingcssdesign-systemsdesign
  535
• design-system

  hashicorp / design-system

  Helios Design System

  componentsdesign-systemdesign-systemsdesign-tokensemberjshashicorpheliosicons
  Language:TypeScript 444

• ardov / huetone

  A tool to create accessible color systems

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

  Decathlon / vitamin-web

  Decathlon Design System UI components for web applications

  design-systemlibrariescomponentsdesign-tokensui-componentsui-kitstyleguideyarnshowcasesvitaminui-librarymonorepolernacssdecathlonstorybookhtmlnxaccessibilitytailwindcss
  Language:HTML 282

• material-foundation / material-tokens

  Material Design DSP

  design-tokensdspjsonmaterialmaterial-designtokensvscode
  Language:CSS 240

• Shopify / polaris-tokens

  Design tokens for Polaris, Shopify’s design system

  design-systemsdesign-tokensshopify-polarisshopifypolaris
  Language:TypeScript 234

• lukasoppermann / style-dictionary-utils

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

  configdesign-tokendesign-tokensstyle-dictionarytransformerutilities
  Language:TypeScript 172
• atomium

  juntossomosmais / atomium

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

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

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

  5t3ph / a11y-color-tokens

  Generate accessible UI colors from your base color tokens.

  accessibilitya11ycolordesign-tokensdesign-systemtokenssasscss
  Language:JavaScript 160

• terrazzoapp / terrazzo

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

  cssdesigndesign-systemdesign-systemsdesign-tokensdtcgsassstylestyle-tokenstokenstypescriptw3c
  Language:TypeScript 160

• universal-design-tokens / udt

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

  design-systemsdesign-tokensdtcgparserserializer
  Language:TypeScript 156

• Talend / ui

  Talend's unified web UI repository.

  bootstrap3-themedesign-systemdesign-tokensjavascriptlernareactreact-componentsreact-reduxreactjstalend
  Language:JavaScript 154

• visualjerk / vue-cion-design-system

  CION - Design system boilerplate for Vue.js

  vuedesign-systemdesign-tokenslivingstyleguideliving-documentationvuejscomponentsdesign-systems
  Language:HTML 143
• 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 124
• 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 124

• Royal-Navy / design-system

  Build web applications that meet the Royal Navy service standards

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

• mateoroldos / tokenbase

  Create, manage and distribute design tokens.

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

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

• marigold-ui / marigold

  Design System based on react-aria and Tailwind CSS

  a11yariacomponent-librarydesign-systemdesign-tokensreactreact-ariastyletailwindtailwindcssthemeui
  Language:TypeScript 109