Intercom は AI カスタマーサポート Fin をネイティブに統合した顧客サービスシステムで、すべての会話が次の体験をより良くします。スタイルは暖かなオフホワイト（#faf9f6）にオートミール色のボーダー（#dedbd6）を組み合わせて親しみやすさを演出。Saans 書体は 80px の見出しで -2.4px という極端な負のトラッキングと 1.00 の行高を使い、Fin オレンジ（#ff5600）が唯一のブランドアクセントカラーです。ボタンはほぼ直角（4px 角丸）で、ホバーで 1.1 倍、押下で 0.85 倍に縮み、実体のある手触りをつくります。カスタマーサポートと会話型プロダクトに適しています。
Intercom生産性と SaaS
プロンプトテンプレート
基本テンプレート
Design a Intercom-inspired interface. - Warm off-white canvas (#faf9f6) with oat-toned borders (#dedbd6); - Saans font with extreme negative tracking (-2.4px at 80px) and 1.00 line-height; - Fin Orange (#ff5600) as singular brand accent; - Sharp 4px border-radius — near-rectangular buttons and elements; - Scale(1.1) hover with scale(0.85) active — physical button interaction. Colors: #111111, #ffffff, #faf9f6, #ff5600 with #ff5600 accent. Typography: Saans.
バリエーションプロンプト
📱 モバイル
Design a mobile app with Intercom aesthetics. Use Intercom color identity with #ff5600 accents. Clean, touch-friendly, native feel.
💻 Web
Design a web application with Intercom style. Use Intercom color identity with #ff5600 accents. Professional, responsive layout.
📊 ダッシュボード
Design a dashboard with Intercom design language. Use Intercom color identity with #ff5600 accents. Data-rich, organized, clear hierarchy.
📄 ランディングページ
Design a landing page with Intercom visual identity. Use Intercom color identity with #ff5600 accents. Compelling, conversion-focused.
使用例
Intercom アプリ
WebBuild a web app with Intercom design language and #ff5600 color system.
Intercom ダッシュボード
ダッシュボードCreate a dashboard using Intercom style with data visualization and Saans typography.
✅ 適した用途
- SaaS 製品
- カスタマーサポートとメッセージ系プロダクト
- 会話型 SaaS の UI
❌ 適さない用途
- ダーク SF 風の UI
- ブルータリズムのアンチデザインページ
DESIGN.md ファイル
design.md オープン形式に準拠したデザインシステム記述。コピーまたはダウンロードして AI コーディングツールに渡せます。