U.S. Web Design System: Using Color (Design Tokens)

What it is

The color page of the U.S. Web Design System, the General Services Administration's shared standard for federal websites. It sorts color tokens into System tokens, a set of 24 color families, and smaller theme and state tokens for each project, and asks teams to avoid custom colors. Its core device is the grade: every color gets a number from 0, pure white, to 100, pure black, regularized so grade 50 in one family matches grade 50 in another for lightness. The difference in grade between two colors is the magic number. 40 or more gives WCAG 2.0 AA for large text, 50 gives AA, 70 gives AAA. A table gives each grade a luminance range. It cites NIH figures on color insensitivity and 1.4 billion pageviews in Q2 2018, then sets four rules: start in black and white, practical before emotional, use mood boards, never let color carry meaning alone.

Why read it now

Read it for one transferable idea: give every shade a number tied to a fixed lightness band, and contrast becomes subtraction. That holds because WCAG contrast is a ratio of relative luminance, so if each grade stays inside its band, any pair with a gap of 50 passes AA. Google's Material 3 builds its tonal palettes, tones 0 to 100, on the same logic. The accessibility case is commercial as well as legal: about 8% of men have some color vision deficiency, so a red and green signal for in stock and sold out fails a real share of buyers. What has dated or is weak: WCAG 2 contrast math misjudges some pairs, such as thin type and dark mode, and newer methods like APCA are being tested, so the magic numbers are a floor, not proof of legibility. The claim that light text on black works well for all is asserted, not shown. Use: rebuild your brand palette as numbered grades per color, record the luminance range of each grade, and publish the list of pairs that pass.

Passages worth keeping

Read the original designsystem.digital.gov