USWDS design tokens adopted (spacing, color, typography)

OMB M-23-22 requires federal agencies to adopt the U.S. Web Design System (USWDS) to ensure a consistent, accessible, and trustworthy digital experience for the public. USWDS design tokens — spacing, color, and typography — encode Section 508 color contrast ratios and responsive scale decisions that would otherwise require individual agencies to re-solve. Without USWDS tokens, agencies typically build custom styles that fail color contrast (WCAG 1.4.3), use non-standard spacing that breaks on mobile, or adopt inconsistent typography that erodes the visual coherence citizens expect from .gov sites.

Install @uswds/uswds and import its settings and component CSS in your global stylesheet. Do not import USWDS only in devDependencies.

npm install @uswds/uswds

In your main stylesheet (e.g., app/globals.css or styles/global.scss):

// Import USWDS settings and all tokens
@forward 'uswds-settings'; // your overrides go here
@forward '@uswds/uswds';

Or with a direct CSS import:

@import '@uswds/uswds/css/uswds.css';

Then verify token adoption by confirming at least spacing utilities, the USWDS color palette, and the Public Sans font family are actively applied in layout and typography styles.