U.S. Web Design System
実物のデザインシステム ／ 一覧
雰囲気の見本#
この見本は公式サイトの画面ではありません。公開されているトークンの値（色・角丸・影・密度）で、この資料の架空の画面を組み直したものです。文言・図版・ロゴ・独自書体は使っていません。
どんなシステムか#
アメリカ政府 が公開しています。部品ごとにアクセシビリティの要件が添えられている。分類は「公共」です。
見た目の骨格#
| 決めごと | この見本で使った値 |
|---|---|
| 主色 | #005ea2 |
| 文字 | #1b1b1b（薄い文字は #565c65） |
| 面と地 | 面 #f0f0f0 ／ 地 #ffffff |
| 角 | 角丸 4px |
| 影 | 影なし |
| 行の高さ | 1.5 |
値は公開されている資料から採っています。共通の部品は全件で同じ内容（見出し帯・タブ・ ボタン一式・入力一式・カード・表・通知・タグ・進捗・ダイアログ・文字の段・色）なので、 ほかのシステムと横に置いて、色・角・影・密度・書体・部品の形の違いを見比べられます。 「特有」と印を付けた節は、そのシステムだけが持つ部品です。
ここから借りるもの#
丸ごとまねる相手ではありません。借りるのは、トークンの名前の付け方と、 同じ部品をどう分けているかです。見た目は結果です。
公式#
- U.S. Web Design System（アメリカ政府）