01 — Color Palette

## Palette

Brand & Accent
Charcoal (primary)
#111111
System primary — headlines, body type, CTA pill background.
Fin Orange
#ff5600
AI-product accent. Fin CTA, Fin badge only.
Brand Blue
#0007cb
Saturated brand blue — small set of marketing illustrations.
Surface
Canvas (cream)
#f5f1ec
Default page background — soft cream-white, deliberately warm.
Surface 1
#ffffff
Pure white — floating cards (pricing, feature, mockup).
Surface 2
#ebe7e1
Slightly darker cream — startup discount banner, alt rows.
Hairline
#d3cec6
1px borders on cards — soft warm gray.
Inverse Canvas
#000000
Pure black — only on the testimonial / quote callout.
Text
Ink
#111111
Headlines, body type, button labels.
Ink Muted
#626260
Secondary type — meta info, deselected pricing tabs.
Ink Subtle
#7b7b78
Tertiary type — footer columns, helper text.
Report Palette (in-product mockups)
Report Blue
#65b5ff
Analytics chart blue.
Report Green
#0bdf50
Analytics chart green / success.
Report Pink
#ff2067
Analytics chart pink.
Report Lime
#b3e01c
Analytics chart lime.
Report Cyan
#03b2cb
Analytics chart cyan.
02 — Typography Scale

## Typography

display-xl72px · 500 · 1.05 · -2.0px · Saans
The only helpdesk designed for AI
display-lg56px · 500 · 1.10 · -1.4px
Get Fin and Intercom for one platform
display-md40px · 500 · 1.15 · -0.8px
Add-ons
headline28px · 500 · 1.20 · -0.5px
Pricing tier title
card-title22px · 500 · 1.25 · -0.3px
Feature card title
subhead20px · 400 · 1.40 · -0.2px
Lead body, intro paragraphs
body-lg18px · 400 · 1.50 · -0.1px
Hero subhead and lead paragraphs.
body16px · 400 · 1.50
Default body — Saans at weight 400 reads as quietly editorial.
body-sm14px · 400 · 1.50
Card body, footer columns.
caption12px · 400 · 1.40
Captions and meta
button15px · 500 · 1.20
Sign up
mono13px · 400 · 1.50 · SaansMono
const fin = new Intercom.Fin();
03 — Button Variants

## Buttons

button-primary
button-primary-pressed
button-secondary
button-tertiary
button-fin
pricing-tab-default + pricing-tab-selected
04 — Cards & Containers

## Cards

pricing-card · Essential
Essential
$XX

- Inbox
- Help Center
- Reporting

pricing-card-featured · Advanced
Advanced
$XX

- Multi-brand support
- Workflows
- Custom roles

pricing-card · Expert
Expert
$XX

- SSO & SAML
- Audit logs
- SLA management

feature-card
Generic feature card

Used when the section is a feature highlight rather than a pricing tier.

product-mockup-card
// Product UI mockup frame
testimonial-card

> "Within six days, Fin is successfully resolving 42% of conversations. It's truly surpassed my expectations."

— Customer, Lessonly
startup-discount-card
Startups get 90% off

Get the AI-first customer service platform that grows with your business.

LESSONLY
SHIPSTATION
LIVING SPACES
EVENTBRITE
UDEMY
AMAZON
cta-banner

### Perfect customer experiences, powered by Intercom

Get started with the AI-first customer service platform.

05 — Quote / Inverse Strip

## Quote Strip

"Within six days, Fin is successfully resolving 42% of conversations. It's truly surpassed my expectations."
— The deepest dark surface on the page; only used for testimonial callouts.
06 — Form Elements

## Forms

text-input · default
text-input · focused
text-input · disabled
textarea
07 — FAQ

## FAQ

How does Intercom pricing work?
Can I get Fin without buying Intercom?
Will my data be safe?
Can I customize Fin?
08 — Spacing & Radius

## Spacing

xxs · 4px
xs · 8px
sm · 12px
md · 16px
lg · 24px
xl · 32px
xxl · 48px
section · 96px

### Radius

xs · 4px
sm · 6px
md · 8px
lg · 12px
xl · 16px
xxl · 24px
pill · 9999
09 — Elevation & Depth

## Elevation

Level 0 — flat
Level 1 — lift on cream
Level 2 — hairline + soft shadow
Level 3 — deep accent
10 — Responsive Behavior

## Responsive

Name | Width | Key Changes
--- | --- | ---
Desktop-XL | 1440px | Default desktop layout
Desktop | 1280px | Card grid 3-up maintained
Tablet | 1024px | Card grid 3-up → 2-up
Mobile-Lg | 768px | Pricing comparison becomes accordion; nav hamburger
Mobile | 480px | Single-column; display-xl scales 72px → ~32px

375
768
1024
1280
1440
Touch Targets

- CTAs hold ≥40px tap height across viewports.
- Pricing tab pills hold ≥40px tap height.
- Form inputs hold ≥44px tap target on touch.

Collapsing Strategy

- Top nav: links collapse to hamburger below 768px.
- Card grids: 3-up → 2-up at 1024px → 1-up below 768px.
- Pricing comparison: per-tier accordion below 768px.
- Display type scales 72px → 40px while preserving negative tracking.