Warm editorial helpdesk: sand canvas, near-black light-weight headlines, black crisp buttons, one bold cobalt #0007cb accent, and the Messenger widget.
Browse Intercom in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
Source: intercom.com (live DOM, computed styles + color census), 2026-07-06; motion/effects/responsive pass 2026-07-07. Coverage: marketing site + Messenger/Fin product motifs. Full dashboard: needs-dashboard (login required).
Warm editorial, bold, and modern: a sand/cream canvas carries near-black text, huge light-weight headlines, and crisp small-radius black buttons. One loud cobalt-blue accent does the brand work (Messenger header, highlights, links), with an orange secondary used sparingly for punch. Elevation is mostly flat and magazine-like — warm-neutral color blocks, hairline borders, generous whitespace, big type paired with product imagery. The whole voice is a single even weight (400), which reads editorial and calm despite the scale; it deliberately avoids bold type and blue buttons. Confident and grown-up — a helpdesk that reads like a design magazine. Feels: warm, assured, contemporary.
| Token | Hex | Role / usage |
|---|---|---|
| ink | #111111 | Primary text, dark buttons |
| black | #000000 | Pure-black buttons / marks |
| sand | #d3cec6 | Signature warm sand section bg |
| cream-100 | #f1eee9 | Warm off-white panel |
| cream-50 | #faf9f6 | Lightest warm surface |
| white | #ffffff | White surfaces |
| border | rgba(17,17,17,.1) | Hairline borders and dividers |
| text-muted | rgba(17,17,17,.6) | Secondary text, placeholders |
| Token | Hex | Role / usage |
|---|---|---|
| cobalt | #0007cb | Bold brand blue — highlights, illustrations, Messenger, links |
| orange | #ff5600 | Secondary accent / energy |
Rule: the canvas is warm sand + near-black text; cobalt #0007cb is the single loud accent (Messenger header, key highlights, graphics), with orange used sparingly for punch. Buttons stay black, not blue.
ui-sans-serif, system-ui, sans-serif fallback (brand face not exposed to the DOM).#111111.| Role | Size/Line | Weight | Tracking |
|---|---|---|---|
| Hero (h1) | 80 / 80 | 400 | -2.4px (-3%) |
| Display (h2) | 54 | 400 | -1.6px |
| Subhead (h3) | 24 | 400 | -0.48px |
| Body | 16 / 24 | 400 | 0 |
| UI / button | 16 | 400 | 0 |
| Caption | 14 | 400 | 0 |
Pattern: enormous light-weight headlines with aggressive negative tracking; body a plain 16/400. No bold — the whole voice is a single even weight, which reads editorial and calm despite the scale.
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.