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: hi@daniguardio.la (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
Specs
Design Tokens specifications.
| Name | Author |
|---|---|
| Design Tokens W3C Community Group | W3C |
| System UI spec | System UI |
Related
Concepts
Stuff that's related in some way to Design Tokens.
Collections
Other related collections (similar to this one).
In action
General design systems
General purpose design systems.
| Name | Author |
|---|---|
| Material Design | |
| FAST | Microsoft |
| Base | |
| Ant Design | |
| Mineral UI |
Specific design systems
Design systems specific to projects or organizations.
| Name | Author |
|---|---|
| EOS (docs) | Suse |
| Lightning Design System | Salesforce |
| Storybook Design System | Storybook |
| https://primer.style/ | Github |
| USWDS | US federal government |
| Spectrum | Adobe |
| Bolt | Pega |
| Priceline One | Priceline |
Implementations
Real world implementations of Design Tokens.
Tools
| Name | Description | Author |
|---|---|---|
| Lightning Component Framework (Design Tokens) | Design Tokens in Salesforce's UI framework (Aura). | Salesforce |
CSS
| Name | Description | Author |
|---|---|---|
| Primer CSS | GitHub's CSS. | GitHub |
Tools and platforms
General
Tools and platforms that involve a variety of features (hard to classify).
| Name | Description |
|---|---|
| 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". |
Design tools
Tools for designing and prototyping UI.
| Name | Description |
|---|---|
| InVision Design System Manager | "Connects design and code." |
Development
Tools to use Design Tokens in real projects.
| Name | Description | Author |
|---|---|---|
| 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.
| Name | Integrates with | Description |
|---|---|---|
| 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.
| Name | Notes |
|---|---|
| Frontify (style guide) | WYSIWYG, generators. |
| Catalog | Markdown based, live components. |
| Lingo | WYSIWYG. |
| lucid | WYSIWYG. |
| 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.
| Name | Description |
|---|---|
| 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.
| Name | Description | Author |
|---|---|---|
| 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-related
CSS tools that implement Design Tokens or similar functionality.
| Name | Description |
|---|---|
| Tailwind CSS | Utility classes. |
| Tachyons | Utility classes. |
| daisy UI | Themable Tailwind CSS Components. |
Articles
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.