Design Tokens Guide

[pglevy]

Problem

Design tokens have been an important part of design systems for some time now. They allow for both useful constraints and creative flexibility when either building a new system or working within an existing one. While designers seem generally familiar that design tokens are a part of the U.S. Web Design System, there don't appear to be good practices around incorporating the use of them into design tool workflows and collaboration with developers. This is a missed opportunity to realize the full potential of USWDS and its role as a common language between design and implementation.

Appetite

How much time we want to spend on this problem for now

This is a "large batch" project that will be the primary focus of our effort for Cycle 6, running about 3 weeks. This cycle is shortened by 1 day due to the Labor Day holiday. And Brianna is out for that first, shortened week.

Solution

Our high-level solution is to create a microsite to document guidance on how designers can progressively understand and apply the use of design tokens in their work.

We see this solution consisting of two main components:

• "Maturity model"-style content to document steps to increasing use of and benefit from design tokens.
• Periodic "micro-blog" content with tips, tricks, and resources.

A rough, high-level sketch of the concept:

Rabbit Holes

Areas of complexity that could throw the project off track

• This project will require some pretty significant content development and curation. Try to avoid creating a need for a lot of media production too early.
• We have a Bixal team supporting USWDS that is also working on content for the USWDS documentation site, so we may want to at least make them aware of what we're working on.
• We've talked about using Bixal branding for this, and we have some tools already built. But we don't want to devote too much time to theming.

No-gos

Things we want to explicitly leave out of this project

• Theming work should not require using a USWDS build or compiling SASS. (It should work with hosted, compiled CSS.)