Intercom is the customer service system with a natively integrated AI agent, Fin, where every conversation improves the next. Its style pairs a warm off-white canvas (#faf9f6) with oat-toned borders (#dedbd6), sets Saans at -2.4px tracking and 1.00 line-height on 80px headlines, marks the brand with Fin Orange (#ff5600), keeps 4px near-rectangular buttons, and scales 1.1× on hover and 0.85× on press for a physical feel.
SaaSMinimal
Prompt Template
Base Template
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.
Variant Prompts
📱 Mobile
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.
📊 Dashboard
Design a dashboard with Intercom design language. Use Intercom color identity with #ff5600 accents. Data-rich, organized, clear hierarchy.
📄 Landing Page
Design a landing page with Intercom visual identity. Use Intercom color identity with #ff5600 accents. Compelling, conversion-focused.
Usage Examples
Intercom App
WebBuild a web app with Intercom design language and #ff5600 color system.
Intercom Dashboard
DashboardCreate a dashboard using Intercom style with data visualization and Saans typography.
✅ Best For
- SaaS
- Customer support and messaging products
- Conversational SaaS UIs
❌ Avoid For
- Dark sci-fi UIs
- Brutalist anti-design pages
DESIGN.md File
A design system description in the open design.md format. Copy or download it and hand it to AI coding tools.