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 Framework | Pros | Cons | Recommended |
---|---|---|---|
USWDS (3.0+) |
|
| Strongly |
W3C Design System |
|
| Yes |
Boostrap (5.0+) |
|
| Yes, if necessary |
Tailwind |
|
| Not for most projects, consider using U.S. Tailwind Design System or similar |
Foundation |
|
| 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
The USWDS includes a wide range of 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.