{"id":"uswds","no":527,"name":"U.S. Web Design System (USWDS)","ja":"合衆国ウェブデザインシステム","era":"2015–","family":"デザインシステム","kind":"スタイル","collection":"Dictionary expansion 26","addedAt":"2026-08-19","source":{"title":"U.S. Web Design System — Design tokens（米国 GSA / TTS）","url":"https://designsystem.digital.gov/design-tokens/"},"reference":{"status":"verified","pageUrl":"https://designsystem.digital.gov/design-tokens/","credit":"U.S. Web Design System — Design tokens（米国 GSA / TTS）","gallery":[{"imageUrl":"https://commons.wikimedia.org/wiki/Special:FilePath/Screenshot%20of%20the%20USAgov%20website%20-%20April%2030%202023.png?width=640","pageUrl":"https://commons.wikimedia.org/wiki/File:Screenshot%20of%20the%20USAgov%20website%20-%20April%2030%202023.png","credit":"USA.gov のトップページ 2023年 — Wikimedia Commons / Public domain"},{"imageUrl":"https://commons.wikimedia.org/wiki/Special:FilePath/Vote.gov%20website%20in%20Bengali%20Screenshot.jpg?width=640","pageUrl":"https://commons.wikimedia.org/wiki/File:Vote.gov%20website%20in%20Bengali%20Screenshot.jpg","credit":"Vote.gov のベンガル語版画面 2026年 — Wikimedia Commons / CC0"},{"imageUrl":"https://commons.wikimedia.org/wiki/Special:FilePath/Login.gov%20mobile%20Screenshot%201.02.24.jpg?width=640","pageUrl":"https://commons.wikimedia.org/wiki/File:Login.gov%20mobile%20Screenshot%201.02.24.jpg","credit":"Login.gov のモバイル画面 2024年 — Wikimedia Commons / Public domain"}]},"essence":"米国の一般調達局が公開する連邦政府サイトの設計言語。色も余白も文字寸法も自由な数値でなく飛び飛びの決め打ちの段に量子化され、Libre Franklinから起こした中立な書体Public Sansと濃い青と赤の組み合わせで、どの省庁の画面も同じ声で話す。","cues":["本文が大きく、1行が45文字から90文字のあいだで折り返る","濃い青の#005EA2と警告の赤の#D83933という決まった2色が、どの省庁の画面にも現れる","余白が任意の数値でなく、決まった刻みの上にしか現れない","見出しから本文までPublic Sansで通り、字幅が広くくせのない輪郭"],"intents":["信頼","技術"],"works":["行政や公共機関のサイトを、部署ごとにばらけないよう1つの体系で作るとき","回線も端末も選べない相手に、確実に読み通せる申請フォームを用意するとき"],"recipe":{"type":"Public Sansを基本に、本文は16px以上、1行45文字から90文字に収める。長い文章の行送りは1.5以上を守る。","layout":"余白も寸法も決まった段からしか選ばない。1カラムを基本にし、要素の間隔は同じ刻みを繰り返す。","material":"濃い青の#005EA2を主、赤の#D83933を副とし、灰は#1B1B1Bから#F0F0F0までの決まった段だけを使う。中間の色を作らない。"},"avoid":"段と段の隙間を埋める中間値を1つ足した時点で体系が崩れ、以後どのページも自前の寸法を作り始める。","colors":["#005EA2","#D83933","#162E51"],"motif":"graphic","pair":["din-1451","material-design"],"study":["USWDSのdesign tokensのページ（段の刻み方そのものが書いてある）","Public Sansと元になったLibre Franklinを並べ、字形をどこで整理したか見る","実際の連邦サイトを数枚開き、余白と文字寸法が本当に段の上に載っているか測る"],"en":{"essence":"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.","cues":["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"],"works":["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"],"recipe":{"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.","layout":"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."},"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.","study":["USWDSのdesign tokensのページ（段の刻み方そのものが書いてある）","Public Sansと元になったLibre Franklinを並べ、字形をどこで整理したか見る","実際の連邦サイトを数枚開き、余白と文字寸法が本当に段の上に載っているか測る"]}}