sturobson / Awesome Design Tokens
Licence: unlicense
A list of resources on all things to do with Design Tokens
Stars: ✭ 338
Projects that are alternatives of or similar to Awesome Design Tokens
Argon Design System
Argon - Design System for Bootstrap 4 by Creative Tim
Stars: ✭ 2,307 (+582.54%)
Mutual labels: design-system, design-systems
design-systems
A list of famous design systems, design languages and guidelines
Stars: ✭ 403 (+19.23%)
Mutual labels: design-systems, design-system
Awesome Design Systems
A curated list of bookmarks, resources and articles about design systems focused on developers.
Stars: ✭ 222 (-34.32%)
Mutual labels: design-system, design-systems
Vue Cion Design System
CION - Design system boilerplate for Vue.js
Stars: ✭ 119 (-64.79%)
Mutual labels: design-system, design-systems
sketch wireframing kit
Quick Sketchapp wireframing tool for UK government digital services
Stars: ✭ 74 (-78.11%)
Mutual labels: design-systems, design-system
React
Modern and minimalist React UI library.
Stars: ✭ 2,546 (+653.25%)
Mutual labels: design-system, design-systems
moon-design
Moon Design System for React
Stars: ✭ 209 (-38.17%)
Mutual labels: design-systems, design-system
Community Group
This is the official DTCG repository for the design tokens specification.
Stars: ✭ 480 (+42.01%)
Mutual labels: design-system, design-systems
Welcome Ui
Customizable design system of @wttj with react • styled-components • styled-system • reakit
Stars: ✭ 256 (-24.26%)
Mutual labels: design-system, design-systems
Css
The CSS design system that powers GitHub
Stars: ✭ 10,670 (+3056.8%)
Mutual labels: design-system, design-systems
Interior
Design system for the modern web.
Stars: ✭ 77 (-77.22%)
Mutual labels: design-system, design-systems
Vue Design System
An open source tool for building UI Design Systems with Vue.js
Stars: ✭ 2,077 (+514.5%)
Mutual labels: design-system, design-systems
Design System
Priceline.com Design System
Stars: ✭ 604 (+78.7%)
Mutual labels: design-system, design-systems
web-components
A set of high-quality standards based web components for enterprise web applications. Part of Vaadin 20+
Stars: ✭ 322 (-4.73%)
Mutual labels: design-systems, design-system
Daisyui
⭐️ ⭐️ ⭐️ ⭐️ ⭐️ Tailwind Components
Stars: ✭ 382 (+13.02%)
Mutual labels: design-system, design-systems
shared-react-components-example
An example of a mono-repository of shared React components libraries!
Stars: ✭ 85 (-74.85%)
Mutual labels: design-systems, design-system
helsinki-design-system
Components, principles, documentation and templates for the City of Helsinki design system.
Stars: ✭ 82 (-75.74%)
Mutual labels: design-systems, design-system
Prism
Gett's Design System code generator. Use Zeplin Styleguides as your R&D's Single Source of Truth.
Stars: ✭ 308 (-8.88%)
Mutual labels: design-system, design-systems
Awesome-Design-Tokens
Design Tokens Working Group
Design Tokens Newsletter
The sign-up page for the Design Tokens Newsletter
Live Sites
A list of company design systems Design Tokens section
- Salesforce Lightning Design System
- Formstack
- Comet (Discovery Education)
- Kalo
- Hex (Bitnami)
- Mineral UI
GitHub Repositories
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
Articles
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
Collections
- 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
Tools
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
Plugins
A list of plugins to help you move tokens from apps to wherever you want
Figma
Sketch
Adobe XD
MockFlow
Slides, Videos, Podcasts
Videos
- 📽 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 ? (🇫🇷)
Slides
- 📊 Tokens in Design Systems
- 📊 Design Tokens and CSS
- 📊 Louis Chenais - Design Tokens: To Infinity and Beyond
Podcasts
- 🎧 Design Tokens: Scaling Design with a Single Source of Truth (💲)
- 🎧 Smashing Podcast Episode 3 With Jina: What Are Design Tokens?
- 🎧 Toolsday 104. Design Tokens with Jina
- 🎧 Using design tokens to standardize deliverables
Other
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].