返回列表
行业: 生产力与 SaaSWebsite

Intercom

Intercom 以柔和奶油白画布、炭黑文字和明亮蓝色构建编辑式客户服务品牌，通过友好的几何字体、圆角内容模块和产品场景，让企业软件显得轻松易懂。

Light UIEditorialMinimalDesign System
Intercom 网站预览
设计系统
品牌色彩 · 25

primary

#111111

--color-primary

on primary

#FFFFFF

--color-on-primary

ink

#111111

--color-ink

ink muted

#626260

--color-ink-muted

ink subtle

#7B7B78

--color-ink-subtle

ink tertiary

#9C9FA5

--color-ink-tertiary

canvas

#F5F1EC

--color-canvas

surface 1

#FFFFFF

--color-surface-1

surface 2

#EBE7E1

--color-surface-2

inverse canvas

#000000

--color-inverse-canvas

inverse surface 1

#313130

--color-inverse-surface-1

inverse ink

#FFFFFF

--color-inverse-ink

inverse ink muted

#9C9FA5

--color-inverse-ink-muted

hairline

#D3CEC6

--color-hairline

hairline soft

#EBE7E1

--color-hairline-soft

fin orange

#FF5600

--color-fin-orange

report orange

#FE4C02

--color-report-orange

report blue

#65B5FF

--color-report-blue

report green

#0BDF50

--color-report-green

report pink

#FF2067

--color-report-pink

report lime

#B3E01C

--color-report-lime

report cyan

#03B2CB

--color-report-cyan

brand blue

#0007CB

--color-brand-blue

semantic error

#C41C1C

--color-semantic-error

semantic success

#0BDF50

--color-semantic-success

字体系统

字体家族

Saans / SaansMono

字重

500400

备注

2 个字体家族，完整字阶、行高和字距见 DESIGN.md

标签
Light UIEditorialMinimalDesign System
设计文档

品牌设计系统的完整 Markdown 文档

Intercom — Style Reference

> An editorial customer-service marketing canvas built around a soft cream-white ground, charcoal type set in Saans (Intercom's proprietary geometric sans), and a single confident Fin Orange (#ff5600) reserved for the Fin AI brand. Cards live as floating white tiles with thin hairline borders and minimal radii (8–16px). Display headlines run Saans at weight 500 with measured negative tracking. The system reads as a careful, product-led publication: product screenshots dominate, ornament is rare, and the only place chromatic energy enters is the Fin Orange CTA.

**Theme:** light

**Source website:** [https://www.intercom.com/](https://www.intercom.com/)

Use the live official website to compare and validate this extracted snapshot. The current source website remains authoritative.

Tokens — Colors

| Name | Value | Token | Role |

|---|---|---|---|

| primary | `#111111` | `--color-primary` | primary role extracted from the source design |

| on primary | `#ffffff` | `--color-on-primary` | on primary role extracted from the source design |

| ink | `#111111` | `--color-ink` | ink role extracted from the source design |

| ink muted | `#626260` | `--color-ink-muted` | ink muted role extracted from the source design |

| ink subtle | `#7b7b78` | `--color-ink-subtle` | ink subtle role extracted from the source design |

| ink tertiary | `#9c9fa5` | `--color-ink-tertiary` | ink tertiary role extracted from the source design |

| canvas | `#f5f1ec` | `--color-canvas` | canvas role extracted from the source design |

| surface 1 | `#ffffff` | `--color-surface-1` | surface 1 role extracted from the source design |

| surface 2 | `#ebe7e1` | `--color-surface-2` | surface 2 role extracted from the source design |

| inverse canvas | `#000000` | `--color-inverse-canvas` | inverse canvas role extracted from the source design |

| inverse surface 1 | `#313130` | `--color-inverse-surface-1` | inverse surface 1 role extracted from the source design |

| inverse ink | `#ffffff` | `--color-inverse-ink` | inverse ink role extracted from the source design |

| inverse ink muted | `#9c9fa5` | `--color-inverse-ink-muted` | inverse ink muted role extracted from the source design |

| hairline | `#d3cec6` | `--color-hairline` | hairline role extracted from the source design |

| hairline soft | `#ebe7e1` | `--color-hairline-soft` | hairline soft role extracted from the source design |

| fin orange | `#ff5600` | `--color-fin-orange` | fin orange role extracted from the source design |

| report orange | `#fe4c02` | `--color-report-orange` | report orange role extracted from the source design |

| report blue | `#65b5ff` | `--color-report-blue` | report blue role extracted from the source design |

| report green | `#0bdf50` | `--color-report-green` | report green role extracted from the source design |

| report pink | `#ff2067` | `--color-report-pink` | report pink role extracted from the source design |

| report lime | `#b3e01c` | `--color-report-lime` | report lime role extracted from the source design |

| report cyan | `#03b2cb` | `--color-report-cyan` | report cyan role extracted from the source design |

| brand blue | `#0007cb` | `--color-brand-blue` | brand blue role extracted from the source design |

| semantic error | `#c41c1c` | `--color-semantic-error` | semantic error role extracted from the source design |

| semantic success | `#0bdf50` | `--color-semantic-success` | semantic success role extracted from the source design |

Tokens — Typography

Saans · `--font-primary`

  • **Substitute:** Inter, system-ui, sans-serif
  • **Weights:** 500, 400
  • **Sizes:** 72px, 56px, 40px, 28px, 22px, 20px, 18px, 16px, 14px, 12px, 15px
  • **Line height:** 1.05, 1.1, 1.15, 1.2, 1.25, 1.4, 1.5, 1.3
  • **Letter spacing:** -2.0px, -1.4px, -0.8px, -0.5px, -0.3px, -0.2px, -0.1px, 0
  • **Role:** Brand typography family observed across the documented type scale.

    • SaansMono · `--font-family-2`

  • **Substitute:** Inter, system-ui, sans-serif
  • **Weights:** 400
  • **Sizes:** 13px
  • **Line height:** 1.5
  • **Letter spacing:** 0
  • **Role:** Brand typography family observed across the documented type scale.

    • Type Scale

    | Role | Size | Line Height | Letter Spacing | Token |

    |---|---|---|---|---|

    | display-xl | 72px | 1.05 | -2.0px | `--text-display-xl` |

    | display-lg | 56px | 1.1 | -1.4px | `--text-display-lg` |

    | display-md | 40px | 1.15 | -0.8px | `--text-display-md` |

    | headline | 28px | 1.2 | -0.5px | `--text-headline` |

    | card-title | 22px | 1.25 | -0.3px | `--text-card-title` |

    | subhead | 20px | 1.4 | -0.2px | `--text-subhead` |

    | body-lg | 18px | 1.5 | -0.1px | `--text-body-lg` |

    | body | 16px | 1.5 | 0 | `--text-body` |

    | body-sm | 14px | 1.5 | 0 | `--text-body-sm` |

    | caption | 12px | 1.4 | 0 | `--text-caption` |

    | button | 15px | 1.2 | 0 | `--text-button` |

    | eyebrow | 14px | 1.3 | 0 | `--text-eyebrow` |

    | mono | 13px | 1.5 | 0 | `--text-mono` |

    Tokens — Spacing & Shapes

    **Density:** comfortable

    Spacing Scale

    | Name | Value | Token |

    |---|---|---|

    | xxs | 4px | `--spacing-xxs` |

    | xs | 8px | `--spacing-xs` |

    | sm | 12px | `--spacing-sm` |

    | md | 16px | `--spacing-md` |

    | lg | 24px | `--spacing-lg` |

    | xl | 32px | `--spacing-xl` |

    | xxl | 48px | `--spacing-xxl` |

    | section | 96px | `--spacing-section` |

    Border Radius

    | Name | Value | Token |

    |---|---|---|

    | xs | 4px | `--radius-xs` |

    | sm | 6px | `--radius-sm` |

    | md | 8px | `--radius-md` |

    | lg | 12px | `--radius-lg` |

    | xl | 16px | `--radius-xl` |

    | xxl | 24px | `--radius-xxl` |

    | pill | 9999px | `--radius-pill` |

    | full | 9999px | `--radius-full` |

    Layout

  • **Section gap:** 96px
  • **Card padding:** 24px
  • **Element gap:** 16px
  • **Max content width:** 1200px

    • Components

    button primary

    **Role:** button primary component

  • **backgroundColor:** `{colors.ink}`
  • **textColor:** `{colors.on-primary}`
  • **typography:** `{typography.button}`
  • **rounded:** `{rounded.md}`
  • **padding:** `10px 18px`

    • button primary pressed

    **Role:** button primary pressed component

  • **backgroundColor:** `{colors.inverse-canvas}`
  • **textColor:** `{colors.on-primary}`
  • **typography:** `{typography.button}`
  • **rounded:** `{rounded.md}`

    • button secondary

    **Role:** button secondary component

  • **backgroundColor:** `{colors.surface-1}`
  • **textColor:** `{colors.ink}`
  • **typography:** `{typography.button}`
  • **rounded:** `{rounded.md}`
  • **padding:** `10px 18px`

    • button tertiary

    **Role:** button tertiary component

  • **backgroundColor:** `{colors.canvas}`
  • **textColor:** `{colors.ink}`
  • **typography:** `{typography.button}`
  • **rounded:** `{rounded.md}`
  • **padding:** `10px 18px`

    • button fin

    **Role:** button fin component

  • **backgroundColor:** `{colors.fin-orange}`
  • **textColor:** `{colors.on-primary}`
  • **typography:** `{typography.button}`
  • **rounded:** `{rounded.md}`
  • **padding:** `10px 18px`

    • pricing card

    **Role:** pricing card component

  • **backgroundColor:** `{colors.surface-1}`
  • **textColor:** `{colors.ink}`
  • **typography:** `{typography.body}`
  • **rounded:** `{rounded.lg}`
  • **padding:** `24px`

    • pricing card featured

    **Role:** pricing card featured component

  • **backgroundColor:** `{colors.ink}`
  • **textColor:** `{colors.on-primary}`
  • **typography:** `{typography.body}`
  • **rounded:** `{rounded.lg}`
  • **padding:** `24px`

    • feature card

    **Role:** feature card component

  • **backgroundColor:** `{colors.surface-1}`
  • **textColor:** `{colors.ink}`
  • **typography:** `{typography.body}`
  • **rounded:** `{rounded.lg}`
  • **padding:** `24px`

    • product mockup card

    **Role:** product mockup card component

  • **backgroundColor:** `{colors.surface-1}`
  • **textColor:** `{colors.ink}`
  • **typography:** `{typography.body}`
  • **rounded:** `{rounded.xl}`
  • **padding:** `24px`

    • testimonial card

    **Role:** testimonial card component

  • **backgroundColor:** `{colors.surface-1}`
  • **textColor:** `{colors.ink}`
  • **typography:** `{typography.body-lg}`
  • **rounded:** `{rounded.lg}`
  • **padding:** `32px`

    • customer logo tile

    **Role:** customer logo tile component

  • **backgroundColor:** `{colors.canvas}`
  • **textColor:** `{colors.ink-muted}`
  • **typography:** `{typography.caption}`
  • **rounded:** `{rounded.xs}`
  • **padding:** `16px`

    • text input

    **Role:** text input component

  • **backgroundColor:** `{colors.surface-1}`
  • **textColor:** `{colors.ink}`
  • **typography:** `{typography.body}`
  • **rounded:** `{rounded.md}`
  • **padding:** `10px 14px`

    • text input focused

    **Role:** text input focused component

  • **backgroundColor:** `{colors.surface-1}`
  • **textColor:** `{colors.ink}`
  • **typography:** `{typography.body}`
  • **rounded:** `{rounded.md}`
  • **padding:** `10px 14px`

    • pricing tab default

    **Role:** pricing tab default component

  • **backgroundColor:** `{colors.canvas}`
  • **textColor:** `{colors.ink-muted}`
  • **typography:** `{typography.button}`
  • **rounded:** `{rounded.pill}`
  • **padding:** `8px 16px`

    • pricing tab selected

    **Role:** pricing tab selected component

  • **backgroundColor:** `{colors.surface-1}`
  • **textColor:** `{colors.ink}`
  • **typography:** `{typography.button}`
  • **rounded:** `{rounded.pill}`
  • **padding:** `8px 16px`

    • faq row

    **Role:** faq row component

  • **backgroundColor:** `{colors.canvas}`
  • **textColor:** `{colors.ink}`
  • **typography:** `{typography.body}`
  • **rounded:** `{rounded.md}`
  • **padding:** `24px`

    • cta banner

    **Role:** cta banner component

  • **backgroundColor:** `{colors.surface-1}`
  • **textColor:** `{colors.ink}`
  • **typography:** `{typography.headline}`
  • **rounded:** `{rounded.lg}`
  • **padding:** `48px`

    • startup discount card

    **Role:** startup discount card component

  • **backgroundColor:** `{colors.surface-2}`
  • **textColor:** `{colors.ink}`
  • **typography:** `{typography.body}`
  • **rounded:** `{rounded.lg}`
  • **padding:** `32px`

    • top nav

    **Role:** top nav component

  • **backgroundColor:** `{colors.canvas}`
  • **textColor:** `{colors.ink}`
  • **typography:** `{typography.body-sm}`
  • **rounded:** `{rounded.xs}`
  • **height:** `56px`

    • footer

    **Role:** footer component

  • **backgroundColor:** `{colors.canvas}`
  • **textColor:** `{colors.ink-muted}`
  • **typography:** `{typography.caption}`
  • **rounded:** `{rounded.xs}`
  • **padding:** `64px 32px`

    • Do's and Don'ts

    Do

  • Use `--color-primary` for the brand's primary interaction treatment.
  • Keep page surfaces anchored to `--color-canvas`.
  • Preserve every typography style's documented size, line height, and letter spacing.
  • Compare major implementation decisions against [the live Intercom website](https://www.intercom.com/).

    • Don't

  • Do not introduce colors outside the documented color token set.
  • Do not replace `--color-ink` with an arbitrary neutral.
  • Do not flatten documented component states or spacing relationships.
  • Do not treat this extracted snapshot as newer than the live source website.

    • Layout

    Use the documented spacing scale and component geometry as the implementation baseline. Validate responsive composition and current page rhythm against [the live source](https://www.intercom.com/).

    同类品牌推荐

    Airtable

    Light UI · Editorial

    Cal.com

    Light UI · Minimal

    Clay

    Light UI · Design System

    Intercom 设计系统 | 品牌模板 · ViboDesign