USWDS Tokens Guide

Progressively build an understanding of design tokens and how to incorporate them into your workflow

Slide 2 of 13

An increased understanding of tokens allows for better collaboration

Next slide
Slide 3 of 13

“I know that tokens can help with consistency and easier collaboration between design and development, but I’m not sure what they are.”

—Designer

Next slide
Slide 4 of 13

“I feel like there is a barrier to working with developers; a knowledge gap”

—Designer

Next slide
Slide 5 of 13

Developer Chats

  • Tokens give a shared language
  • Get to prototype faster
  • Create a more consistent design
Next slide
Slide 6 of 13

The Problem

While designers seem generally familiar that design tokens are a part of the USWDS, there doesn’t appear to be good practices around incorporating them into workflows and most information on tokens is written developer-friendly language.

Next slide
Slide 7 of 13

The path to adoption

  1. Understand the benefits
  2. Learn how to speak the language
  3. Master the tools
Next slide
USWDS maturity model graphic
Slide 8 of 13

Color Token Template

Next slide
cover page of the figma template for color tokens
Slide 9 of 13

Codepen Tool

Next slide
cover page of the figma template for color tokens
Slide 10 of 13

Helpful Infographics

Next slide
infographic of typography tokens
Slide 11 of 13

Check out the full guide

Let’s walk through the full USWDS Design Tokens Guide.

Next slide
site map of the design token guide
Slide 12 of 13

Offer your feedback on the guide using Github.

Next slide
Slide 13 of 13

Thank you!