Drift report 1 · · Revised

USWDS, measured against its own Figma kit.

We captured 40 pages of designsystem.digital.gov with Stage1 and compared what they render with the Figma kit the USWDS team publishes. Where we could measure, the values agree. Stage1 set aside the values it could explain without the kit, such as Chrome’s defaults, elements that aren’t painted and multiples of a font size, and flagged twelve.

What’s left is small and specific. USWDS draws an outline button’s border as an inset shadow, which the kit has no token for. The icon list’s titles take their top padding from the typeface’s x-height. And the kit gives no border role to the gray the site’s text inputs use.

That’s what a drift readout is for. A raw comparison flags a browser default as drift every time. Stage1 now sorts most of those out itself, and what’s left still needs someone to trace it to its cause before a team spends a sprint on it.

This revision

We first published this report on September 30, from a Stage1 0.3.2 run. Stage1 0.4.0 separates browser defaults, unpainted elements and third-party content from drift, and links every finding to the elements behind it, so we measured the site again with it on October 1. It showed that three of our explanations were wrong:

  • The 37.44px heading margins are twice an 18.72px heading, and 18.72px is Chrome’s default size for an h3, not a USWDS type step.
  • The -12px and -16px margins belong to the mobile menu’s close button, which isn’t painted at the desktop width we captured. They aren’t kit steps made negative.
  • The kit does have type sizes for Merriweather.

The light gray #c9c9c9 also mostly sat on radio tiles inside the hidden feedback form. Only two painted elements use it, so it’s out of the border finding. The counts below come from the new run, and they aren’t comparable with the first version’s: 0.4.0 samples more elements and compares raw values.

What we compared

The site is designsystem.digital.gov, captured on October 1, 2026. Stage1 followed links two deep from the home page and captured the same 40 pages as before: the home page, 11 About pages, the component index and 27 component pages. The sitemap lists 257 URLs, so this is a sample, and every count below comes from 7,745 sampled elements rather than every element on every page. The site is built on USWDS 3.14.0. Its repository pins that release, and every page offers it for download.

The kit is uswds-design-kit-beta.fig from the uswds-for-designers repository. The file was added in January 2025 and hasn’t changed since. Its README calls it beta 0.3, tracking USWDS 3.11.0. Stage1 read 1,831 tokens from it and resolved every one.

Both are in the public domain, which is why we can publish this. We aren’t affiliated with GSA or the USWDS team, and nothing here is an endorsement.

How a match works

Stage1 compares exact values, such as a color’s hex code or a radius in pixels. No tolerance. A value the kit defines is a match, from any of its themes or font options, so a match doesn’t say which theme it came from. The site’s primary blue, #005ea2, is the primary of the kit’s Default theme.

Before it counts anything, Stage1 checks for an explanation: the element isn’t painted, the browser supplied the value, it’s a multiple of the element’s font size, or it’s a kit step made negative. Explained values are listed with their reason and count as neither a match nor drift. Whatever’s left unmatched is a finding, and each one names up to five elements that produced it.

Type is compared per typeface, against the sizes the kit declares for each one. USWDS scales type for each typeface, so a size within a fixed 0.16px rounding step of the kit’s is explained rather than flagged.

Where they agree

  • Color: all 38 solid colors on the pages are in the kit. Six translucent colors sit outside the comparison.
  • Radius: all four radii (0, 2, 4 and 8px) are in the kit.
  • Type: 7 of the 22 type sizes match the kit exactly, and the other 15 are within the rounding step. None is drift.
  • Spacing: 14 of the 21 padding and margin values are spacing tokens in the kit, and 5 more are explained.
  • Borders: one of the seven painted border colors, the card border #e6e6e6, has a border role in the kit. The other six are kit colors without one.

What Stage1 explained

Stage1 set aside 92 values with an explanation. They include the ones we traced by hand in the first version, and some we missed.

Forty-nine are on elements that aren’t painted at the width and state we captured. Most belong to the feedback form served from touchpoints.app.cloud.gov, which ships hidden on 39 of the 40 pages until someone opens it: the #767676 border on its hidden field and the -32px and 518px margins on its close button. The mobile menu’s -12px and -16px margins are here too, and so is #545454, Chrome’s color for a disabled checkbox, on two native checkboxes USWDS moves off-screen to draw its own.

Seventeen came from Chrome. They include the 6px and 1px padding on the combo box and date picker buttons, which USWDS doesn’t set on those sides, and the 18.72px size of some documentation headings, Chrome’s default for an h3.

Fifteen are type sizes within the rounding step. Four are multiples of a font size: top margins of twice a heading’s size (28.15px, 33.92px and 37.44px), and the combo box input’s calc(2.5em + 3px) right padding, 45.4px. One is the kit’s 1px step made negative, between the buttons of a button group. The last six are the border colors below.

What’s left

Twelve findings, and ten of them are one pattern. USWDS draws an outline button’s 2px border as an inset box shadow, and the kit’s only shadow token is a card shadow, so each outline color becomes a shadow the kit doesn’t have. The header’s two outline buttons, in #e5a000 and translucent white, appear on every page. The site’s feedback launcher draws #005ea2 the same way on most About pages. The other seven colors are on the button examples.

The other two are the icon list’s titles. USWDS sets their top padding to 0.425ex, a fraction of the typeface’s x-height, so it lands at 3.23px and 4.02px, between spacing steps. Stage1 explains lengths relative to the font size, not the x-height.

Both are deliberate in USWDS’s code. What’s missing is a way to say so in the kit.

The values agree. The names don’t.

The kit names six colors for borders or strokes: on cards, the summary box, tables and process-list counters, accordions, and one focus state. None of them is for inputs. Text inputs use gray #5c5c5c, on 53 painted elements, 40 of them the search box. It’s in the kit’s palette. It has no border role there.

A token named for its role is what lets a designer, or an agent generating screens, pick the right gray without reading the CSS. The code has made this choice. The kit doesn’t record it.

What we didn’t score

Font weight. The kit has no weight tokens (weights live inside its 13 text styles), so there’s nothing to match against.

Theme. Stage1 counts how much of what the site renders each theme mode covers, but that doesn’t tell us which theme the site ships, so we don’t report one.

The rest of the site. We didn’t capture 217 of the 257 sitemap URLs. On each page Stage1 reads up to 250 elements, at most 50 of each kind, so it read 7,745 of 56,242 candidates.

Three releases apart

The kit tracks USWDS 3.11.0 and the site runs 3.14.0. Both patterns behind the findings, outline borders drawn as shadows and the x-height padding, are already in 3.11.0’s code. On every value we could compare, those three releases haven’t opened a gap. That says nothing about components added since 3.11, because this comparison measures values, not which components exist.

Run it yourself

Stage1 is free on npm. It needs Node 22 (22.15 or later) or Node 24.

npm install --global @aquex/[email protected]
stage1 inspect app --url https://designsystem.digital.gov/ --out ./runs \
  --max-pages 40 --crawl-depth 2 --include all --include responsive.widths --sequential
curl -L -o uswds-design-kit-beta.fig https://raw.githubusercontent.com/uswds/uswds-for-designers/b2211533a79c5b2f6e6a403bd57e6ab6785e6df6/figma/uswds-design-kit-beta.fig
stage1 fig-extract ./uswds-design-kit-beta.fig --out ./fig-out
stage1 redrift RUN_DIR --fig-tokens ./fig-out/uswds-design-kit-beta.tokens.json --out ./comparison --durable
stage1 view RUN_DIR --analysis ./comparison

Replace RUN_DIR with the folder the capture prints. The kit link is pinned to a commit, so you’ll compare against the same file we did. The site changes, so your counts may not match ours.

The evidence

Every count here comes from Stage1’s export of this run: capture bd57ec09 and comparison 6bd1cc75. The first version used capture 00fe0602 and comparison 8ccfb02d.

Open the evidence

It opens in any browser, with nothing to install. It holds each page’s screenshot, its accessibility results and the full comparison, with up to five example elements for every finding and every explained value.

Your product, measured the same way

A Drift Audit does this for your product, against your pages and journeys, your Figma library, your tokens and your source. We trace each difference to its cause and walk your team through what to fix first. About two weeks.

Talk to us about a Drift Audit