I'm interested in design systems, and I am doing a bit of research on the topic. I've decided to start with Design Tokens.
Here's a list of all the resources I've found along the way, with some notes. I'll probably keep this list updated for some time, so this can be considered a living post.
Also, feel free to send more relevant resources my way: firstname.lastname@example.org (or you can send a pull request).
I might publish some articles in the future with notes and conclusions from my research.
If you want to stay in the loop, follow me on Twitter: @daniguardio_la
Design Tokens specifications.
|Design Tokens W3C Community Group||W3C|
|System UI spec||System UI|
Stuff that's related in some way to Design Tokens.
Other related collections (similar to this one).
General design systems
General purpose design systems.
Specific design systems
Design systems specific to projects or organizations.
|Lightning Design System||Salesforce|
|Storybook Design System||Storybook|
|USWDS||US federal government|
Real world implementations of Design Tokens.
|Lightning Component Framework (Design Tokens)||Design Tokens in Salesforce's UI framework (Aura).||Salesforce|
|Primer CSS||GitHub's CSS.||GitHub|
Tools and platforms
Tools and platforms that involve a variety of features (hard to classify).
|Interplay||"Superpowers for design systems".|
|Design System Kit||"A workbench for collaboratively creating Design Systems".|
|Pattern Lab||"A frontend workshop environment that helps you build, view, test, and showcase your design system's UI components".|
|Diez||"Developer toolkit for expressing visual styles that can be shared across codebases, native platforms, and teams".|
Tools for designing and prototyping UI.
|InVision Design System Manager||"Connects design and code."|
Tools to use Design Tokens in real projects.
|Styled System||Responsive, theme-based style props for building design systems with React.|
|Material UI's system (v5 alpha)||Provides low-level utility functions called "style functions" for building powerful design systems.||Material UI|
|Material UI's theming (v5 alpha)||Theme customization in Material UI.||Material UI|
Integrations with third-party tools
Plugins or extensions to third-party tools.
|Cabana||Sketch||A Design System Sketch plugin.|
|Storybook Design Token Addon||Storybook||Adds Design Tokens documentation to Storybook.|
Design documentation / asset management platforms
Tools for design workflows, documentation and design asset management. Most allow managing Design Tokens, some can export or generate usable resources for development.
|Frontify (style guide)||WYSIWYG, generators.|
|Catalog||Markdown based, live components.|
|zeroheight||WYSIWYG, deep code integration, generators.|
|Abstract||TODO, I'll look into it when Notebooks Free is released.|
Design Tokens management platforms
Tools for Design Tokens management.
|Specify||"One Design API, for all your design system tools".|
|Design System Manager (DSM)||"Design, Prototype, Document and Development Platform."|
Design Tokens manipulation
Tools for transforming and handling Design Tokens data.
|Theo||"Abstraction for transforming and formatting Design Tokens".||Salesforce|
|Style Dictionary||"Build system that allows you to define styles once, in a way for any platform or language to consume".||Amazon|
CSS tools that implement Design Tokens or similar functionality.
|Tailwind CSS||Utility classes.|
|daisy UI||Themable Tailwind CSS Components.|
A selection of interesting articles about Design Tokens.
- Living Design System - by Sönke Rohde, Salesforce's VP of UX R&D.
- Tokens in Design Systems - by Nathan Curtis, founder of eightshapes.
- Naming Tokens in Design Systems - by Nathan Curtis, founder of eightshapes.
- The themes are always changing, but the tokens stay the same - by Kyle Gach, Mineral UI.
Guides & tutorials
Learning resources for working with Design Tokens.
- Design Systems for Developers - by Storybook.