Carbon は IBM のオープンソースデザインシステムで、IBM Design Language を土台に「エンジニアリング級の厳格さ」を出力します。IBM Plex Sans が 14px の productive と 16px の expressive という 2 系統の文字サイズを提供し、Blue 60（#0F62FE）が 10 段階のブルースケールを展開します。2px の角丸と 1px の #E0E0E0 の硬いボーダーが柔らかさを拒み、8px グリッド、高密度のデータテーブル、ニュートラルな #F4F4F4／#161616 のサーフェスが全プロダクトラインを貫きます。エンタープライズ製品と大規模な一貫性が必要なチームに適しています。
Carbonデザインシステム
プロンプトテンプレート
基本テンプレート
Design an IBM Carbon-inspired interface. - IBM Plex Sans with 14px productive body and 16px expressive sizes; - #0F62FE blue-60 primary across a 10-step blue ramp; - 2px corner radii and crisp 1px #E0E0E0 hairlines — engineered, not soft; - 8px grid, productive/expressive type sets, and dense data tables; - Neutral #F4F4F4 and #161616 surfaces with disciplined whitespace. Colors: #0F62FE, #161616, #F4F4F4, #E0E0E0 with #0F62FE accent. Typography: IBM Plex Sans.
バリエーションプロンプト
📱 モバイル
Design a mobile app with Carbon aesthetics. Use Carbon color identity with #0F62FE accents. Clean, touch-friendly, native feel.
💻 Web
Design a web application with Carbon style. Use Carbon color identity with #0F62FE accents. Professional, responsive layout.
📊 ダッシュボード
Design a dashboard with Carbon design language. Use Carbon color identity with #0F62FE accents. Data-rich, organized, clear hierarchy.
📄 ランディングページ
Design a landing page with Carbon visual identity. Use Carbon color identity with #0F62FE accents. Compelling, conversion-focused.
使用例
Carbon ダッシュボード
ダッシュボードBuild a cloud console dashboard with IBM Carbon style: dense data tables, structured panels, and #0F62FE blue-60 accents.
Carbon データテーブルページ
WebCreate a resource management page with Carbon design language: productive tables, inline actions, and IBM Plex typography.
✅ 適した用途
- エンタープライズソフトウェア
- 高密度データコンソール
- アクセシビリティ準拠
❌ 適さない用途
- 軽快でポップなコンシューマー製品
- 手描きイラスト調のブランド
DESIGN.md ファイル
design.md オープン形式に準拠したデザインシステム記述。コピーまたはダウンロードして AI コーディングツールに渡せます。