{"id":"12255b63-e506-4bc1-a4cd-d05487de32f3","name":"Intercom","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","colors":[{"name":"Canvas White","hex":"#ffffff","role":"Page backgrounds, primary surfaces, overlay base.","group":"neutral","cssVariable":"--color-canvas-white"},{"name":"Background Off-White","hex":"#faf9f6","role":"Subtle background for sections or softer UI elements.","group":"neutral","cssVariable":"--color-background-off-white"},{"name":"Surface Cream","hex":"#f1eee9","role":"Slightly elevated surface, subtle background differentiation.","group":"neutral","cssVariable":"--color-surface-cream"},{"name":"Border Sand","hex":"#dedbd6","role":"Delicate borders for subtle UI separation, active tab indicators.","group":"neutral","cssVariable":"--color-border-sand"},{"name":"Subtle Gray","hex":"#e7e3db","role":"More pronounced background for distinct content blocks, light dividers.","group":"neutral","cssVariable":"--color-subtle-gray"},{"name":"Canvas Beige","hex":"#d3cec6","role":"Background for secondary content areas or muted sections.","group":"neutral","cssVariable":"--color-canvas-beige"},{"name":"Headline Black","hex":"#111111","role":"Primary heading text, strong impactful body copy.","group":"neutral","cssVariable":"--color-headline-black"},{"name":"Body Text Black","hex":"#000000","role":"General body text, links, primary UI elements, icons.","group":"neutral","cssVariable":"--color-body-text-black"},{"name":"Subtle Graphite","hex":"#414141","role":"Muted text for less prominent information, secondary links.","group":"neutral","cssVariable":"--color-subtle-graphite"},{"name":"Mid Gray","hex":"#585858","role":"Secondary text, descriptive elements with slightly less emphasis than body text.","group":"neutral","cssVariable":"--color-mid-gray"},{"name":"Footer Gray","hex":"#666666","role":"Tertiary text, footer links, less critical information.","group":"neutral","cssVariable":"--color-footer-gray"},{"name":"Icon Gray","hex":"#707070","role":"Icons and very subtle UI elements.","group":"neutral","cssVariable":"--color-icon-gray"},{"name":"Button Text Gray","hex":"#888888","role":"Text for secondary buttons, disabled states.","group":"neutral","cssVariable":"--color-button-text-gray"},{"name":"Placeholder Gray","hex":"#a0a0a0","role":"Placeholder text in input fields, further muted text elements.","group":"neutral","cssVariable":"--color-placeholder-gray"},{"name":"Inactive Icon Gray","hex":"#b8b8b8","role":"Icons in inactive or secondary states.","group":"neutral","cssVariable":"--color-inactive-icon-gray"},{"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","cssVariable":"--color-accent-violet"},{"name":"Accent Orange","hex":"#ff5600","role":"Highlighting specific words or small interactive elements, used sparingly for emphasis.","group":"accent","cssVariable":"--color-accent-orange"}],"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"}],"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."]}}