# U.S. Web Design System (USWDS) (合衆国ウェブデザインシステム)

> The design language of United States federal websites, published by the General Services Administration. Color, spacing, and type size are quantized into a limited set of discrete options instead of the open range CSS allows, and the system ships Public Sans, a neutral face drawn from Libre Franklin, so that every agency site speaks in the same voice.

- IndexStyle No.527 — https://indexstyle.org/styles/uswds
- Kind: Style · Family: Design Systems · Era: 2015–
- Mood: Trust, Technology
- Color cues: #005EA2 / #D83933 / #162E51 (cues taken from reference works, not a fixed palette)

## Defining characteristics

- Body text runs large and lines wrap somewhere between 45 and 90 characters
- The same two colors recur across agencies, a deep blue #005EA2 and an alert red #D83933
- Spacing never lands on an arbitrary number, only on steps of a fixed scale
- Public Sans carries everything from headings to body text, wide set and free of quirks

## Best used for

- Building sites for a public body where separate departments must not drift into separate looks
- Producing an application form that has to stay readable for people you cannot choose a device or a connection for

## Composition recipe

- Typography & lettering: Public Sans throughout, body text at 16px or larger, lines held between 45 and 90 characters, line height at least 1.5 for long passages.
- Layout & structure: Every margin and measure is picked off a fixed scale; a single column is the default and the gaps between elements repeat the same steps.
- Material & texture: Deep blue #005EA2 leads and red #D83933 follows, with grays taken only from the fixed run between #1B1B1B and #F0F0F0, never mixed in between.

## What to avoid

Add one in between value to fill a gap in the scale and the system is gone, because every page then starts inventing measurements of its own.

## Application checklist

Before calling a piece an application of this style, check it against the defining characteristics:

- [ ] Body text runs large and lines wrap somewhere between 45 and 90 characters
- [ ] The same two colors recur across agencies, a deep blue #005EA2 and an alert red #D83933
- [ ] Spacing never lands on an arbitrary number, only on steps of a fixed scale
- [ ] Public Sans carries everything from headings to body text, wide set and free of quirks
- [ ] At least one reference work below has been studied directly
- [ ] The caution above ("What to avoid") has been addressed

## Related styles

- **DIN 1451 (DIN 1451)** — Engineering lettering laid down as a German industrial standard. Its skeleton can be redrawn with ruler and compass, which unified road signs and factory markings, and the trust that came from having no personality is what designers later came to love. → https://indexstyle.org/styles/din-1451
- **Material Design (マテリアルデザイン)** — A design system that reduces the physical metaphor of paper and ink to rules of shadow and overlap. Elements are given elevation, shadow states the hierarchy, and motion carries physical cause and effect. It became the model for UI design being distributed as a system. → https://indexstyle.org/styles/material-design

## Further study

- USWDSのdesign tokensのページ（段の刻み方そのものが書いてある）
- Public Sansと元になったLibre Franklinを並べ、字形をどこで整理したか見る
- 実際の連邦サイトを数枚開き、余白と文字寸法が本当に段の上に載っているか測る

## Reference works

- USA.gov のトップページ 2023年 — Wikimedia Commons / Public domain — https://commons.wikimedia.org/wiki/File:Screenshot%20of%20the%20USAgov%20website%20-%20April%2030%202023.png
- Vote.gov のベンガル語版画面 2026年 — Wikimedia Commons / CC0 — https://commons.wikimedia.org/wiki/File:Vote.gov%20website%20in%20Bengali%20Screenshot.jpg
- Login.gov のモバイル画面 2024年 — Wikimedia Commons / Public domain — https://commons.wikimedia.org/wiki/File:Login.gov%20mobile%20Screenshot%201.02.24.jpg

## Source of record

- U.S. Web Design System — Design tokens（米国 GSA / TTS） — https://designsystem.digital.gov/design-tokens/

## Machine surfaces

- JSON: https://indexstyle.org/api/styles/uswds
- Image-generation prompt (legally clean): https://indexstyle.org/styles/uswds/prompt.txt
- MCP: https://indexstyle.org/mcp (tools: search_styles, get_style, compose_styles; prompts: image-prompt, apply-style)