Skip to main content
Design system

Resources

Learn more about our workflow and how to use our tools in our guides. Watch our tutorials and workshops to discover the elegance and accessibility of WPDS.

Table of Contents

What's New?

How to use the WPDS Carousel component in your Figma design graphic

How to use the WPDS Carousel component in your Figma design

WPDS Carousel is robust enough to support a variety of use-cases

August 23, 2023

Tailwind WPDS Theme graphic

Tailwind WPDS Theme

A Tailwind CSS theme using WPDS tokens

June 9, 2023

Web Performance and SEO Best Practices and Guidelines graphic

Web Performance and SEO Best Practices and Guidelines

Proven strategies and guidelines for optimizing web performance and search engine optimization (SEO)

May 31, 2023

See all what's new?

Accessibility

Explore our accessibility checklist, testing strategies and considerations.

Accessibility Checklist graphic

Accessibility Checklist

Overview of considerations, not comprehensive

February 28, 2023

Alt text graphic

Alt text

Describing images for blind and low-vision users

February 28, 2023

Audio and Video graphic

Audio and Video

Captions, transcripts, controls, avoiding auto-play

February 28, 2023

See all accessibility

Guides

Explore the processes and tools we use in our step-by-step written guides.

Figma Guide

Figma is our tool of choice when designing and using our design system

Zeplin Guide

Zeplin is our tool of choice when it comes to hand-off

Contribute a Component

This document describes the process of contributing a component to our system

Migrating from Tachyons to Stitches

We've written a dedicated blog post about the differences between Tachyons and Stitches

See all guides

Tools

Help for adopting and using WPDS.

Convert Tachyons to Stitches

A simple online tool to convert Tachyons classes to Stitches style objects

Tailwind WPDS Theme

A Tailwind CSS theme using WPDS tokens

See all tools

Tutorials

Watch or read through our tutorials to understand key techniques and concepts.

How to use the WPDS Carousel component in your Figma design graphic

How to use the WPDS Carousel component in your Figma design

WPDS Carousel is robust enough to support a variety of use-cases

August 23, 2023

How to do a 5-minute accessibility audit graphic

How to do a 5-minute accessibility audit

In this tutorial, you will learn just how quickly you can audit content for color, sizing, keyboard and screen reader accessibility

April 4, 2022

How to use theme tokens graphic

How to use theme tokens

In this tutorial, we will learn just how our theme tokens work and interact with our greater color palette

May 25, 2022

See all tutorials

Workshops

Sharpen your design and development skills with our in-depth recorded workshops.

WPDS v1 - Design Workshop graphic

WPDS v1 - Design Workshop

Watch Brian Alfaro lead a design workshop for our rollout of the new WPDS

March 29, 2022

WPDS v1 - Design Workshop 2 graphic

WPDS v1 - Design Workshop 2

Continuing our deep dive in our new design system

April 11, 2022

WPDS v1 - Developer Workshop graphic

WPDS v1 - Developer Workshop

Watch Arturo Silva lead a developer workshop for our v1 rollout of the new WPDS

March 29, 2022

See all workshops

CommunityXTwittergithubGithubyoutubeYoutube