U.S. Web Design System (USWDS)
合衆国ウェブデザインシステム / 2015– / Style / Design Systems
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.
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
Dictionary entry
- 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
- Type
- 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.
- Composition
- 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
- Deep blue #005EA2 leads and red #D83933 follows, with grays taken only from the fixed run between #1B1B1B and #F0F0F0, never mixed in between.
- Caution
- 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.
- Further study
- USWDSのdesign tokensのページ（段の刻み方そのものが書いてある） / Public Sansと元になったLibre Franklinを並べ、字形をどこで整理したか見る / 実際の連邦サイトを数枚開き、余白と文字寸法が本当に段の上に載っているか測る
Related entries
Cite this entry
The dictionary is meant to be linked to. Take whichever form fits where you are writing.
- Link
- https://indexstyle.org/styles/uswds
- Markdown
- [U.S. Web Design System (USWDS) — IndexStyle](https://indexstyle.org/styles/uswds)
- HTML
- <a href="https://indexstyle.org/styles/uswds">U.S. Web Design System (USWDS) — IndexStyle</a>