---
name: Intercom
description: "A premium example of balancing editorial photography with functional SaaS UI, showcasing restraint and clarity."
version: alpha

colors:
  background: "#ffffff"
  primary: "#111111"
  secondary: "rgba(17,17,17,0.7)"
  tertiary: "#0007cb"
  neutral: "rgba(17,17,17,0.4)"
  bg-soft: "#f1eee9"
  bg-quiet: "#d3cec6"
  line: "rgba(17,17,17,0.4)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 54px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "-1.6px"
  h2:
    fontFamily: humanist-sans
    fontSize: 28px
    lineHeight: 1.2
    fontWeight: 400
    letterSpacing: "-0.96px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "-0.16px"
  caption:
    fontFamily: humanist-sans
    fontSize: 14px
    lineHeight: 1.4
    fontWeight: 400
    letterSpacing: "-0.096px"

rounded:
  sm: 4px
  md: 8px
  lg: 12px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 32px
  3xl: 48px

---

## Overview

The premium AI-native helpdesk that prioritizes clarity, restraint, and elegant functionality.

*A sophisticated, modern enterprise dashboard that blends high-end editorial photography with clean software UI.*

## Colors

A high-contrast monochrome foundation with warm beige neutrals and a single deep blue accent for interactive highlights.

- **Background (`#ffffff`)** — uses `bg` token
- **Primary text (`#111111`)** — uses `ink` token
- **Secondary text (`rgba(17,17,17,0.7)`)** — uses `ink-soft` token
- **Accent (`#0007cb`)** — uses `accent` token
- **Muted (`rgba(17,17,17,0.4)`)** — uses `muted` token
- **Borders (`rgba(17,17,17,0.4)`)** — uses `line` token

## Typography

- **Display:** geometric-sans
- **Body:** humanist-sans
- **Mono:** monospace

## Layout

Full-width responsive layout with constrained max-widths for content columns.

*Rhythm:* 4px base unit with generous vertical spacing for readability.

## Elevation & Depth

- 0 0 18px rgba(0,0,0,0.2)
- Borders: 1px solid rgba(17,17,17,0.4)

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 12px
- `pill`: 999px

## Components

- **button:** Solid black or outlined pill-shaped buttons with clean sans-serif typography.
- **card:** Clean cards with minimal borders or subtle shadows, often containing product UI screenshots.
- **chip:** Simple text tags with subtle background or borders.
- **input:** Clean text inputs with subtle borders and rounded corners.
- **hero:** Large, expressive typography paired with a side-by-side layout of text and product imagery or photography.

## Do's and Don'ts

**Don't:**
- Don't use a dark background for the primary hero — screenshot shows a clean white background.
- Don't use heavily decorative or display serif fonts for headlines — screenshot shows clean geometric sans-serif typography.
- Don't rely on bright, saturated accent colors — screenshot shows a restrained palette with a single deep blue accent.
- Don't use small, cramped typography — screenshot shows generous line heights and letter spacing.
- Don't use complex, busy background patterns — screenshot shows solid colors and photographic imagery.
- Don't use harsh, boxy UI components — screenshot shows rounded buttons and cards.

---

## System Prompt (paste into AI agent)

```
Intercom's homepage is a masterclass in modern SaaS design, blending high-end editorial aesthetics with clean, functional UI. The core identity is professional and AI-focused, using a restrained color palette anchored by white (#ffffff), warm beige (#d3cec6), and near-black (#111111) text. Typography is predominantly clean geometric and humanist sans-serif, with a striking 54px display size for hero headlines using tight letter spacing. Key interactions feature smooth 0.4s transitions. Critical design rules: prioritize generous whitespace, avoid overly decorative elements, and maintain a monochrome base with subtle warm neutrals to let product imagery and the deep blue (#0007cb) accent stand out.
```