Now Experience Design System Support for United States Web Design System (USWDS)

[Ashley Snyder]

Introduction 

The United States Web Design System (USWDS) is a design system for the federal government. Its aim is to make it easier for those inside and outside of the federal government to consistently design and build accessible, mobile-friendly government websites. Its principles support and reflect the important guidance codified in the 21st Century Integrated Digital Experience Act. As a provider to the United States federal government, it is vital that the ServiceNow platform can support the objectives of the USWDS, most importantly the specific visual and interaction standards that make up the system. 

ServiceNow’s Now Experience Design System 

The Now Experience Design System (NDS) contains all the necessary elements for ServiceNow application development teams to design, realize, and build great, accessible products on the Next Experience platform. An integral part of NDS is Theming which makes it easy to style application experiences using the power of the design system to manage color, shape and form, typography, and imagery.  

NDS support for USWDS 

Much like the USWDS, NDS’s visual designs are based on consistent palettes of color, typography, spacing units, and other discrete elements of style. The default styles of the USWDS can be achieved within NDS using Next Experience Theming. The following are some core attributes of the USWDS and how each attribute is supported by NDS. 

Theme Color - The high-level role-based color families of base, primary, and secondary within the USWDS apply directly to NDS theme definitions, which then cascade to components and visual elements within applications.  

State Color - The USWDS provides a series of color palettes related to state, and NDS also uses base colors for alerts and status. The USWDS state color token values are applied to the ServiceNow base alert colors, and a formulated palette is created to work within components that use the alert palette. 

Components – NDS provides a core set of configurable atomic components that are used throughout the ServiceNow platform. Theming provides access to styling of a variety of properties including color, shape, font family, and spacing. 

Accessibility - Our Accessibility statement is here: Accessibility Statement on ServiceNow.com. ServiceNow’s platform and products, including those within the NDS, conform at a minimum to WCAG 2.0 AA and Section 508 of the US Rehabilitation Act. To view Accessibility Conformance Reports for currently supported releases, see our product documentation: Accessibility Conformance Reports. 

Summary 

The USWDS design metaphors and principles can be easily applied to Now Experience Design System. The combination of the Now Experience Design System components and theming capabilities provide a flexible and consistent way to apply style elements throughout ServiceNow applications in support of compliance criteria within the 21st Century IDE Act. 

[STREETFACTS]

It was nice to find this design systems guidance on ServiceNow. I had been doing research on the subject as a recent NextGen Alumni. 

FYI: excellent document on the subject.