Intercom

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. 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. 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.