skills.rest
deepparser
deepparserOFFICIAL
Explore all skills by this author →
WebsiteGitHub

design-intercom

Apply Intercom's design system tokens, typography, and component styles to UI generation.

Updated Feb 23, 2026
Search Tags:#typography#design system#css#brand guidelines#design tokens#ui design#intercom
One-click install
npx skills add https://github.com/deepparser/skills --skill design-intercom-deepparser
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-intercom
Source: https://github.com/deepparser/skills/tree/main/design-intercom
Command: npx skills add https://github.com/deepparser/skills --skill design-intercom-deepparser

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building interfaces that match Intercom's visual identity requires exact design tokens — colors, typography scales, spacing, and component rules — which are tedious to reverse-engineer from the live site. ## Core Features & Use Cases - Complete Design Token Set: Provides Intercom's color palette (Fin Orange #ff5600, warm cream #faf9f6, oat borders #dedbd6), typography hierarchy (Saans with negative tracking), and spacing/radius scales. - Component Specifications: Defines button variants (primary dark, outlined, warm cream) with 4px radius and scale(1.1) hover interactions, plus card, form, and navigation styles. - Visual Reference Previews: Bundled light and dark theme HTML previews let you verify exact CSS values and component structure. - Use Case: When asked to build a landing page or dashboard styled like Intercom, invoke this skill to generate UI code using the correct warm neutrals, sharp 4px button geometry, and billboard-style headlines. ## Quick Start Create a hero section and pricing cards styled like Intercom's website using this design system.

Frequently Asked Questions about design-intercom

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build a UI that looks like Intercom's website?▼

Use Intercom's design tokens: warm cream background (#faf9f6), off-black text (#111111), Fin Orange accent (#ff5600), and Saans-style typography with negative letter-spacing. Buttons use sharp 4px radius with scale(1.1) hover effects.

What colors does Intercom's design system use?▼

The primary palette is off-black (#111111), warm cream (#faf9f6), and Fin Orange (#ff5600). It also includes a report palette (blue #65b5ff, green #0bdf50, red #c41c1c, pink #ff2067, lime #b3e01c) and warm neutrals like oat borders (#dedbd6).

What typography does Intercom use on its website?▼

Intercom uses Saans as its primary font with aggressive negative letter-spacing (-2.4px at 80px) and 1.00 line-height on headings. Serrif serves as the serif companion, and SaansMono handles uppercase technical labels with wide tracking.

Does this design system support dark mode?▼

Yes, the skill bundles both a light theme preview (preview.html) and a dark theme preview (preview-dark.html). The dark theme inverts the palette, using dark surfaces with light text while keeping the Fin Orange accent.

What border radius should Intercom-style buttons use?▼

Intercom buttons use a sharp 4px border radius, creating near-rectangular geometry. Nav items use 6px and cards use 8px. Rounding buttons beyond 4px breaks the brand's industrial, precise identity.

Related Skills

Explore More Design & Creative Skills→
xpert-aixpert-ai
8

ideate

Generate three distinct on-brand UI design variants from confirmed briefs.

Official
Intermediate
neuron-oneneuron-one
25

browser-testing

Automate browser UI verification and visual regression checks across viewports.

Community
Intermediate
ils15ils15
10

web-ui-analysis

Analyze web interfaces for WCAG 2.1 compliance and Core Web Vitals.

Community
Advanced
oakossoakoss
14

brand-designer

Generate cohesive brand identities with SVG logos, Tailwind color tokens, and typography systems.

Official
Advanced