IBM はエンタープライズ向けハイブリッドクラウドと AI のテクノロジー企業で、その Carbon デザインシステムが UI スタイルの骨格です。IBM Blue 60（#0f62fe）が唯一のアクセントカラー、IBM Plex Sans がウェイト 300 で見出しを担い、Plex Mono がコードと技術コンテンツを担当します。セマンティックカラーはすべて --cds-* 変数で管理され、すべてが 8px グリッドに整列します。エンタープライズソフトウェア、データプラットフォーム、開発者ツールに適しています。
IBMメディアと消費
プロンプトテンプレート
基本テンプレート
Design a IBM-inspired interface. - IBM Plex Sans at weight 300 (Light) for display — corporate gravitas through typographic restraint; - IBM Plex Mono for code and technical content with consistent 0.16px letter-spacing at small sizes; - Single accent color: IBM Blue 60 (#0f62fe) — every interactive element, every CTA, every link; - Carbon token system (--cds-*) driving all semantic colors, enabling theme-switching at the variable level; - 8px spacing grid with strict adherence — no arbitrary values, everything aligns. Colors: #0f62fe, #ffffff, #161616, #262626 with #0f62fe accent. Typography: IBM Plex Sans.
バリエーションプロンプト
📱 モバイル
Design a mobile app with IBM aesthetics. Use IBM color identity with #0f62fe accents. Clean, touch-friendly, native feel.
💻 Web
Design a web application with IBM style. Use IBM color identity with #0f62fe accents. Professional, responsive layout.
📊 ダッシュボード
Design a dashboard with IBM design language. Use IBM color identity with #0f62fe accents. Data-rich, organized, clear hierarchy.
📄 ランディングページ
Design a landing page with IBM visual identity. Use IBM color identity with #0f62fe accents. Compelling, conversion-focused.
使用例
IBM アプリ
WebBuild a web app with IBM design language and #0f62fe color system.
IBM ダッシュボード
ダッシュボードCreate a dashboard using IBM style with data visualization and IBM Plex Sans typography.
✅ 適した用途
- コンシューマー製品
- エンタープライズテクノロジーの公式サイト
- データ密度の高いコンソール
❌ 適さない用途
- コンシューマー娯楽プロダクト
- ポップな子ども向け UI
DESIGN.md ファイル
design.md オープン形式に準拠したデザインシステム記述。コピーまたはダウンロードして AI コーディングツールに渡せます。