1

Components

Soft Launch Alert: The Digital Guidelines are a work in progress and subject to updates. Your feedback is highly valued and will help us improve! Digital Guidelines Feedback (Google Form)

The State of Colorado has adopted the USWDS as a foundation. Using USWDS will help us ensure that digital services created for or used by Coloradans are user-friendly, accessible, and consistent. When USWDS implementation is not possible or practical, agencies may choose to fallback to W3C Design System components and/or W3C APG patterns or use an alternative design strategy that conforms with the recommendations within the Design Guidelines.

Which System or Framework Should I Use?

USWDS is our recommended framework. If you are considering an alternative, please be aware that agencies are independently and solely responsible for ensuring that their products, regardless of any frameworks used, fully comply with all applicable regulations, technical standards, brand guidelines, and other requirements. If you need help deciding which framework to use, check out Resources to learn who may be able to assist you. 

Web Solutions Breakdown

Like USWDS and W3C's Design System, the following popular design tools share critical qualities:

  • Responsive design support. Grid systems, flexbox, and standard breakpoints are available.
  • Accessibility support. Semantic structures, screen reader compatibility, and keyboard navigation are natively supported. Designers need to take extra steps to ensure that contrast and other critical accessibility standards are met, though.
  • Components. Pre-built UI components, like buttons and navigation elements, are available. The scope of components is variable across systems.
Design System or FrameworkProsConsRecommended
USWDS (3.0+)
  • Lightweight
  • Accessibility is a priority
  • Extensive component library
  • Less flexible than some other tools
Strongly
W3C Design System
  • Very light weight
  • Ideal standards compliance
  • Limited styling (by default)
  • Limited component library
Yes
Boostrap (5.0+)
  • Comprehensive component library
  • Easy to use
  • Highly flexible
  • Strong community support
  • Not as lightweight as alternatives

 

Yes, if necessary
Tailwind
  • Extremely flexible
  • Highly performant
  • No components, utility-first approach
  • Difficult to use (for beginners)
Not for most projects, consider using U.S. Tailwind Design System or similar
Foundation
  • Highly customizable
  • Great responsive typography
  • Accessibility is a priority

 

  • Complex compared to other tools
  • May not work well in older browsers

 

Not for most projects

Non-Web Solutions

While many of the features of USWDS could be replicated in a native development project, exploiting established UI guidelines and toolkits can help you prioritize our principles and create cohesive, accessible, and user-centered solutions. Examples of tools you might use include:

  • Apple Human Interface Guidelines. Like the USWDS, Apple's Human Interface Guidelines (HIG) have strict design principles and prioritize accessibility. HIG can be implemented with SwiftUI.
  • Windows UI Library. Like USWDS, Windows UI Library includes extensive pre-built components. .NET MAUI could be a good framework to use.
  • Material Design. Like USWDS, Material is comprehensive and systematic. Accessibility support is strong. Using Jetpack Compose with Material is a good choice.

USWDS Core Components

There are a wide range of USWDS components. Use considerations specific to our platforms and recommendations are included below. If you encounter difficulties or issues with a component available on a third-party-supported platform, like Drupal on Colorado.gov, please report issues directly to the vendor responsible for the platform.

Implementation

USWDS implementations are available for a wide variety of technologies and platforms, including React, Vue.js, WordPress, and Drupal. These templates and tools can be helpful jumping off points for your project. If you use an existing integration, you will need to apply the State of Colorado design tokens or otherwise implement State branding standards and independently validate conformance with all State of Colorado, federal, or other applicable technical standards.

Customization Guidelines

For agencies implementing USWDS or a fallback system, Colorado's Design Tokens should be used. If you are unable to use tokens, refer to the State of Colorado Brand Guidelines for color and font references.

W3C Fallback Components

If you are unable to implement USWDS in your project, consider using the W3C's Design System and APG Patterns. APG Patterns tend to be more closely aligned with USWDS components, include code examples, and address valuable use considerations.

Common Components

Commonly used components are discussed below. For comprehensive guidance on all components, please refer to USWDS Components. Even if you’re taking advantage of the W3C’s components, the USWDS guidance on use is really valuable.