The sign-up page for the Design Tokens Newsletter
A list of company design systems Design Tokens section
- Salesforce Lightning Design System
- Formstack
- Comet (Discovery Education)
- Kalo
- Hex (Bitnami)
- Mineral UI
A list of repos that contain a companies Design Tokens
- Salesforce
- Open Table
- Kiwi.com
- Mozilla Protocal Design System
- Bloomberg
- Firefox Photon
- Shopify Polaris
- Infor Design
- Envato Foundation
- Backpack
- BuildIt Gravity Particles
- Cedar Design System Tokens
- Adobe Spectrum
A list of articles that discuss Design Tokens, including any tutorials found on how they're being created.
- The context dilemma: design tokens and components
- Design tokens — What are they & how will they help you?
- Tokenize It
- Design Tokens with Figma
- Documenting Design Tokens
- Tokens in Design Systems
- Article on UX Collective
- Using design tokens to promote collaboration and maintainability of a design system
- How we use Sass Maps for Design Tokens and Developer Happiness
- How to manage your Design Tokens with Style Dictionary
- What Are Design Tokens?
- Making Design Tokens Work Across Platforms with Amazon Style Dictionary
- Manage design tokens with TypeScript and styled-components
- Building a Visual Studio Code Theme with Style Dictionary
- Theo Design Tokens Using Node-Sass Importer For Any Build Method
- Design Tokens for Dummies
- Documenting Design Tokens
- Naming Tokens in Design Systems
- Building better products with a design token pipeline
- Design Tokens Only Exist In A Pre-Processed State
- Minumum Viable Design Tokens
- Where to Start with Design Tokens
- Dynamic Design Tokens
- Design Tokens Cheatsheet
- Design Tokens in Figma - Setting Up Your Design System
- Cómo implementamos Design Tokens en Bnext (How we implement Design Tokens in Bnext) 🇪🇸
- Design tokens with Figma
- JSON to Figma, from Vanilla JS to React
- Collaboration with design tokens and storybook
- 1. Introduction to Design Tokens
- 2. Managing and Exporting Design Tokens With Style Dictionary
- 3. Exporting Design Tokens From Figma With Style Dictionary
- 4. Consuming Design Tokens From Style Dictionary Across Platform-Specific Applications
- 5. Generating Design Token Theme Shades With Style Dictionary
- 6. Documenting Design Tokens With Docusaurus
- 7. Integrating Design Tokens With Tailwind
- 8. Transferring High Fidelity From A Design File To Style Dictionary
- 9. Scoring Design Tokens Adoption With OCLIF and PostCSS
- 10. Bootstrap UI Components With Design Tokens And Headless UI
- 11. Linting Design Tokens With Stylelint
- 12. Stitching Styles to a Headless UI Using Design Tokens and Twind
A list of tools that help you generate other files from your design tokens
- Toolabs DSM
- Arcade
- Design tokens export plugin
- Theo
- Style Dictionary
- Mole
- Dragoman
- design-system-utils
- Design Tokens Explorer
- Theme.css
- Chromatic
- SuperPosition
- DesignTokens.dev
- Gorko
- Specify
- Design Tokens GitHub Actions Generator
A list of plugins to help you move tokens from apps to wherever you want
- 📽 WTF are Design Tokens?
- 📽 Building Consistent Cross-Platform Interfaces
- 📽 Design Tokens and CSS
- 📽 Design Tokens 101
- 📽 Mikolaj Dobrucki - Getting More with Design Tokens
- 📽 Louis Chenais - Standardisation des design tokens : le futur du design à grande échelle ? (🇫🇷)
- 📊 Tokens in Design Systems
- 📊 Design Tokens and CSS
- 📊 Louis Chenais - Design Tokens: To Infinity and Beyond