U.S. Web Design System (USWDS)

合衆国ウェブデザインシステム / 2015– / スタイル / デザインシステム

米国の一般調達局が公開する連邦政府サイトの設計言語。色も余白も文字寸法も自由な数値でなく飛び飛びの決め打ちの段に量子化され、Libre Franklinから起こした中立な書体Public Sansと濃い青と赤の組み合わせで、どの省庁の画面も同じ声で話す。

本文が大きく、1行が45文字から90文字のあいだで折り返る / 濃い青の#005EA2と警告の赤の#D83933という決まった2色が、どの省庁の画面にも現れる / 余白が任意の数値でなく、決まった刻みの上にしか現れない / 見出しから本文までPublic Sansで通り、字幅が広くくせのない輪郭

辞書情報

向いている用途: 行政や公共機関のサイトを、部署ごとにばらけないよう1つの体系で作るとき。回線も端末も選べない相手に、確実に読み通せる申請フォームを用意するとき
文字: Public Sansを基本に、本文は16px以上、1行45文字から90文字に収める。長い文章の行送りは1.5以上を守る。
構成: 余白も寸法も決まった段からしか選ばない。1カラムを基本にし、要素の間隔は同じ刻みを繰り返す。
素材: 濃い青の#005EA2を主、赤の#D83933を副とし、灰は#1B1B1Bから#F0F0F0までの決まった段だけを使う。中間の色を作らない。
注意: 段と段の隙間を埋める中間値を1つ足した時点で体系が崩れ、以後どのページも自前の寸法を作り始める。
関連研究: USWDSのdesign tokensのページ（段の刻み方そのものが書いてある） / Public Sansと元になったLibre Franklinを並べ、字形をどこで整理したか見る / 実際の連邦サイトを数枚開き、余白と文字寸法が本当に段の上に載っているか測る

辞典はリンクされるためにある。書いている場所に合う形をそのまま持っていってよい。

Link: https://indexstyle.org/ja/styles/uswds
Markdown: [合衆国ウェブデザインシステム（U.S. Web Design System (USWDS)） — デザインスタイル辞典](https://indexstyle.org/ja/styles/uswds)
HTML: <a href="https://indexstyle.org/ja/styles/uswds">合衆国ウェブデザインシステム（U.S. Web Design System (USWDS)） — デザインスタイル辞典</a>