{"id":"12255b63-e506-4bc1-a4cd-d05487de32f3","source":{"name":"Refero","url":"https://styles.refero.design/","kind":"public-design-reference"},"contributors":[{"name":"Refero","role":"reference-helper","url":"https://styles.refero.design/"}],"attributionLabel":"Referenced with help from Refero","sourceUrl":"https://styles.refero.design/style/12255b63-e506-4bc1-a4cd-d05487de32f3","originalSiteUrl":"https://intercom.com","capturedAt":"2026-04-13T22:26:32.443Z","licenseNote":"Public design-reference facts mirrored from Refero for agent context. Keep source attribution visible and verify rights before reusing media, logos, or brand assets.","name":"Intercom","summary":"Architectural blueprint on white marble","description":"Intercom's design system evokes a sense of understated innovation, like an architectural blueprint on white marble.  Lightness and clarity are established through an expansive white canvas contrasted by fine-lined black typography and minimal, precise UI elements. The tension between the nearly achromatic palette and a single vibrant violet accent for primary calls to action creates a focused, forward-thinking feel without visual clutter. Custom typography with subtle letter-spacing variations adds a layer of quiet sophistication, preventing the sparse aesthetic from feeling sterile.","industry":"ai","colorScheme":"light","colors":[{"name":"Canvas White","hex":"#ffffff","role":"Page backgrounds, primary surfaces, overlay base.","group":"neutral"},{"name":"Background Off-White","hex":"#faf9f6","role":"Subtle background for sections or softer UI elements.","group":"neutral"},{"name":"Surface Cream","hex":"#f1eee9","role":"Slightly elevated surface, subtle background differentiation.","group":"neutral"},{"name":"Border Sand","hex":"#dedbd6","role":"Delicate borders for subtle UI separation, active tab indicators.","group":"neutral"},{"name":"Subtle Gray","hex":"#e7e3db","role":"More pronounced background for distinct content blocks, light dividers.","group":"neutral"},{"name":"Canvas Beige","hex":"#d3cec6","role":"Background for secondary content areas or muted sections.","group":"neutral"},{"name":"Headline Black","hex":"#111111","role":"Primary heading text, strong impactful body copy.","group":"neutral"},{"name":"Body Text Black","hex":"#000000","role":"General body text, links, primary UI elements, icons.","group":"neutral"},{"name":"Subtle Graphite","hex":"#414141","role":"Muted text for less prominent information, secondary links.","group":"neutral"},{"name":"Mid Gray","hex":"#585858","role":"Secondary text, descriptive elements with slightly less emphasis than body text.","group":"neutral"},{"name":"Footer Gray","hex":"#666666","role":"Tertiary text, footer links, less critical information.","group":"neutral"},{"name":"Icon Gray","hex":"#707070","role":"Icons and very subtle UI elements.","group":"neutral"},{"name":"Button Text Gray","hex":"#888888","role":"Text for secondary buttons, disabled states.","group":"neutral"},{"name":"Placeholder Gray","hex":"#a0a0a0","role":"Placeholder text in input fields, further muted text elements.","group":"neutral"},{"name":"Inactive Icon Gray","hex":"#b8b8b8","role":"Icons in inactive or secondary states.","group":"neutral"},{"name":"Accent Violet","hex":"#0007cb","role":"Primary interactive elements, call-to-action buttons, active indicators — a vivid modern accent against the neutral palette.","group":"brand"},{"name":"Accent Orange","hex":"#ff5600","role":"Highlighting specific words or small interactive elements, used sparingly for emphasis.","group":"accent"}],"typography":[{"role":"The primary typeface for headings, body text, and general UI. Weight 300 for display sizes provides a refined, non-aggressive presence.","sizes":"14px, 16px, 20px, 24px, 32px, 40px, 54px, 80px","family":"Saans","weight":"300, 400","lineHeight":"0.95, 1.00, 1.25, 1.40, 1.43, 1.50","substitute":"system-ui, sans-serif","letterSpacing":"-2.4, -1.62, -0.8, -0.16"},{"role":"Used for technical information, code snippets, or any content requiring monospace presentation. The increased letter-spacing distinguishes it.","sizes":"12px, 14px","family":"SaansMono","weight":"300, 400, 500","lineHeight":"1.00, 1.30, 1.40","substitute":"SFMono-Regular, monospace","letterSpacing":"1.2, 0.7"},{"role":"A decorative serif font used sparingly, likely for emphasis within body text or specific callouts. Its light weight keeps it subtle.","sizes":"16px","family":"Serrif","weight":"300","lineHeight":"1.40","substitute":"serif","letterSpacing":"-0.16"},{"role":"Used for navigation elements and specific UI labels, characterized by tight letter-spacing for concise presentation.","sizes":"14px, 16px","family":"MediumLL","weight":"400","lineHeight":"0.94, 1.00, 1.29","substitute":"system-ui, sans-serif","letterSpacing":"-0.4, -0.35, 0.56"}],"typeScale":[{"role":"caption","size":12,"lineHeight":1.4,"letterSpacing":0.7},{"role":"body-sm","size":14,"lineHeight":1.5,"letterSpacing":-0.16},{"role":"body","size":16,"lineHeight":1.5,"letterSpacing":-0.16},{"role":"subheading","size":20,"lineHeight":1.4,"letterSpacing":-0.4},{"role":"heading-sm","size":24,"lineHeight":1.25,"letterSpacing":-0.48},{"role":"heading","size":32,"lineHeight":1.25,"letterSpacing":-0.8},{"role":"heading-lg","size":40,"lineHeight":1,"letterSpacing":-0.8},{"role":"display","size":54,"lineHeight":1,"letterSpacing":-1.62},{"role":"display-lg","size":80,"lineHeight":0.95,"letterSpacing":-2.4}],"spacing":{"radius":{"buttons":"4px","navItems":"4px"},"elementGap":"16px","sectionGap":"48px","cardPadding":"16px"},"radius":{"buttons":"4px","navItems":"4px"},"shadows":{"surfaces":[{"hex":"#ffffff","name":"Canvas White","level":0,"purpose":"Primary page background, base layer."},{"hex":"#faf9f6","name":"Background Off-White","level":1,"purpose":"Subtle background for distinct content sections or cards, offering minimal elevation."},{"hex":"#f1eee9","name":"Surface Cream","level":2,"purpose":"More pronounced background for feature blocks or secondary content areas, indicating a slight lift."},{"hex":"#e7e3db","name":"Subtle Gray","level":3,"purpose":"Used for banners or highly differentiated content blocks, suggesting a higher level of separation."}]},"guidelines":{"do":["Use Headline Black (#111111) for all major headings and impactful statements to maintain strong contrast.","Apply Saans font with a weight of 300 for display-sized headlines (54px, 80px) to achieve an authoritative yet understated feel.","Implement 4px border-radius for all interactive buttons and navigation items, creating a subtle visual softness.","Reserve Accent Violet (#0007cb) strictly for primary interactive elements, such as CTA buttons and active state indicators.","Differentiate sections using the neutral background progression: Canvas White (#ffffff) > Background Off-White (#faf9f6) > Surface Cream (#f1eee9) for subtle visual hierarchy.","Maintain standard element spacing of 16px for comfortable content flow, adjusting vertically with multiples of 8px as needed.","Utilize SaansMono for any technical or explicit code-like content, with its distinctive increased letter-spacing."],"dont":["Avoid using saturated colors other than Accent Violet (#0007cb) and Accent Orange (#ff5600) to preserve the clean, neutral aesthetic.","Do not introduce sharp, unrounded corners on interactive elements, as this contradicts the established 4px radius pattern.","Refrain from heavy drop shadows or complex gradients; the system relies on subtle background shifts and crisp lines for depth.","Do not deviate from the specified Saans, SaansMono, or MediumLL typefaces; ensure consistency in typographic personality.","Avoid dense, information-heavy blocks without adequate spacing; prioritize comfortable content density and readability.","Do not use Body Text Black (#000000) for large, prominent headlines; Headline Black (#111111) should be preferred for impact.","Do not use highly saturated photography; imagery should align with the muted or monochromatic style."]},"components":[{"name":"Alert Banner","role":""},{"name":"Tab Bar","role":""},{"name":"Button Group","role":""},{"name":"Primary Action Button","role":"Call to action"},{"name":"Secondary Outline Button","role":"Secondary action"},{"name":"Ghost Navigation Button","role":"Navigation link"},{"name":"Tab Button","role":"Tab selection"},{"name":"Primary Navigation Item","role":"Main navigation"},{"name":"Header Alert Banner","role":"Informational banner"},{"name":"Logo Grid Item","role":"Client/partner logo display"},{"name":"Input Field","role":"Data entry"}],"customSections":[{"title":"Agent Prompt Guide","content":"**Quick Color Reference:**\n- `text-primary`: #111111\n- `bg-canvas`: #ffffff\n- `bg-card`: #faf9f6\n- `cta-primary`: #0007cb\n- `border-subtle`: #dedbd6\n\n**3-5 Example Component Prompts:**\n1. Create a hero section: Canvas White (#ffffff) background. Headline 'The only helpdesk designed for the AI Agent era' using Saans weight 300, 80px size, line-height 0.95, letter-spacing -2.4px, color Headline Black (#111111). Subtext 'Intercom is the only helpdesk with a natively integrated AI Agent.' using Saans weight 400, 16px size, line-height 1.5, color Body Text Black (#000000). Include a Primary Action Button 'Start free trial' and a Secondary Outline Button 'View demo', both with 4px radius and 14px horizontal padding.\n2. Design a feature card: Background Off-White (#faf9f6) background. Heading 'AI-powered Insights' in Saans weight 400, 24px size, line-height 1.25, letter-spacing -0.48px, color Headline Black (#111111). Body text in Saans weight 400, 16px size, line-height 1.5, color Body Text Black (#000000). Pad content with 16px on all sides.\n3. Construct a navigation bar: Canvas White (#ffffff) background. Logo on left. Navigation items 'Product', 'Customers', 'Resources', 'Pricing' using MediumLL weight 400, 16px size, color Headline Black (#111111), letter-spacing -0.4px. Right side has 'Contact sales' (Ghost Navigation Button), 'View demo' (Secondary Outline Button), and 'Start free trial' (Primary Action Button). All elements should have 8px horizontal gap."}],"media":{"screenshotUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1776119163185-screenshot.jpg","thumbnailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1776119163185-thumb.jpg","previewVideoUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/12255b63-e506-4bc1-a4cd-d05487de32f3-1777566861318-preview.mp4","previewVideoPosterUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/12255b63-e506-4bc1-a4cd-d05487de32f3-1777566861318-preview-poster.jpg","previewVideoDetailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/12255b63-e506-4bc1-a4cd-d05487de32f3-1777566861318-preview-detail.mp4","previewVideoDetailPosterUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/12255b63-e506-4bc1-a4cd-d05487de32f3-1777566861318-preview-detail-poster.jpg"},"similarStyleIds":["a76ec6ba-20b3-495c-9d89-1e58281e79e7","fb459c9d-c089-4d0b-b5b0-d147b1c4ebd7","48e5de76-05d5-4c4e-a269-c7c245b291ec","9342e89b-c2fe-4acf-9993-53b44e0c13b5","62b22816-2d98-4e98-9c17-bf600ddb2fc8","66eb1c37-a8e5-4e6c-b17f-a75385b462e7","c14bfde7-6f08-4b54-bd9b-39989d10cfef","75fdb89f-ca64-41b3-af36-7a78bd09448e","ced1c98f-d489-48f7-a01f-1fa59a07b706","68d18deb-bb09-4258-8024-001af9c844c0","aeefc294-a8f7-443d-b76a-538dddc29afe","0fd67ec5-7e9c-4ca9-b368-5d9c7388477a","707a9081-3d1d-4a0b-b1aa-b58b3fab09af","d9a60077-619a-4cb7-95ed-0c428c2b51ed","ec0f5bca-8367-49e7-b8aa-73b3fa09a4a0","2db41cd9-c898-4f59-b704-3042c0d87f45","5af6b791-6cad-4497-9e94-ace28e4fbd51","3677bc04-7461-4aa4-aec7-5291bac41b0b","186775da-7568-49e5-8110-4fd0bbc7bbe3","e050061c-346d-44cc-92ba-6b22beb4a91f"],"exports":{"designMdUrl":"/references/refero/12255b63-e506-4bc1-a4cd-d05487de32f3/design.md","tokensJsonUrl":"/references/refero/12255b63-e506-4bc1-a4cd-d05487de32f3/tokens.json","tailwindV4Url":"/references/refero/12255b63-e506-4bc1-a4cd-d05487de32f3/tailwind-v4.css","cssVariablesUrl":"/references/refero/12255b63-e506-4bc1-a4cd-d05487de32f3/tailwind-v4.css"}}