USWDS includes over 40 accessible, mobile-friendly components out of the box, ensuring consistency and saving teams the need to build everything from scratch for their web-design and -redesign projects.

USWDS also provides tools and solutions, including a simple way to pick accessible colors or a component that displays required links, that make it easy to comply with legal requirements, such as the 21st Century Integrated Digital Experience Act and Section 508 of the Rehabilitation Act.

Key concepts and tools

You don’t need to understand the following concepts and tools to install the design system, but you will need to know them to build with it:

• Design tokens: Design tokens are predefined units of color, spacing, typography, opacity, and more that form the building blocks of the design system.
• Components: Components are simple and consistent solutions to common user interface needs, like form fields, buttons, and icons. If tokens are the building blocks of the design system, components are the building blocks of a site or service.
• Utilities: Utilities are single-purpose classes mapped to USWDS tokens. Utilities allow developers to prototype with design system utilities without writing Sass or CSS.
• Implementations: Implementations are how teams use USWDS in their projects, like in Drupal, as well as other platforms and frameworks. We’ll link to projects and community supported implementations.

We’ve created these resources to help designers start prototyping and developers start building quickly and establish a shared language to promote effective collaboration through the process of customizing and updating content. The USWDS community is also a resource available to you. Please get in touch with any questions, recommendations, before, during, and/or after getting started.

Read More