USWDS は米国連邦政府の公式デザインシステムで、すべてが読みやすさとアクセシビリティに道を譲ります。濃紺 #005EA2 がリンクと主要操作を担い、Public Sans と 16px の本文が長時間の読書の快適さを保証します。2px の小さな角丸と高コントラストのボーダーが、フォーム、通知、ステップナビゲーションを公共サービスの場面で明快かつ信頼できるものにします。
U.S. Web Design Systemデザインシステム
プロンプトテンプレート
基本テンプレート
Design a USWDS-inspired government interface. - Deep blue #005EA2 primary on a white canvas; - Public Sans typography with 16px body text; - 2px radii, #DFE1E2 hairline borders, #1B1B1B ink; - Accessible forms, alerts, and step navigation; - Plain, high-contrast public-service layouts. Colors: #005EA2, #FFFFFF, #DFE1E2, #1B1B1B with #005EA2 accent. Typography: Public Sans.
バリエーションプロンプト
📱 モバイル
Design a mobile app with USWDS aesthetics. Use USWDS color identity with #005EA2 accents. Clean, touch-friendly, native feel.
💻 Web
Design a web application with USWDS style. Use USWDS color identity with #005EA2 accents. Professional, responsive layout.
📊 ダッシュボード
Design a dashboard with USWDS design language. Use USWDS color identity with #005EA2 accents. Data-rich, organized, clear hierarchy.
📄 ランディングページ
Design a landing page with USWDS visual identity. Use USWDS color identity with #005EA2 accents. Compelling, conversion-focused.
使用例
USWDS 給付申請フォーム
WebBuild a benefits application form with USWDS style: deep blue #005EA2 primary, Public Sans, 2px radii, step indicator, and accessible inline validation.
USWDS 行政サービスポータル
ランディングページDesign a government service portal with USWDS aesthetics: high-contrast hero, plain-language cards, alert banners, and clear step-by-step navigation.
✅ 適した用途
- 行政と公共サービス
- アクセシビリティ優先のプロジェクト
- 医療と教育のプラットフォーム
❌ 適さない用途
- トレンド駆動のコンシューマーブランド
- 高彩度の娯楽プロダクト
DESIGN.md ファイル
design.md オープン形式に準拠したデザインシステム記述。コピーまたはダウンロードして AI コーディングツールに渡せます。