{
  "$schema": "https://tr.designtokens.org/format/",
  "$description": "Design tokens for Intercom",
  "meta": {
    "name": "Intercom",
    "description": "An editorial customer-service marketing canvas built around a soft cream-white ground, charcoal type set in Saans (Intercom's proprietary geometric sans), and a single confident Fin Orange (#ff5600) reserved for the Fin AI brand. Cards live as floating white tiles with thin hairline borders and minimal radii (8–16px). Display headlines run Saans at weight 500 with measured negative tracking. The system reads as a careful, product-led publication: product screenshots dominate, ornament is rare, and the only place chromatic energy enters is the Fin Orange CTA.",
    "theme": "light"
  },
  "color": {
    "primary": {
      "$value": "#111111",
      "$type": "color",
      "$description": "Use for the primary role."
    },
    "on-primary": {
      "$value": "#ffffff",
      "$type": "color",
      "$description": "Use for the on primary role."
    },
    "ink": {
      "$value": "#111111",
      "$type": "color",
      "$description": "Use for the ink role."
    },
    "ink-muted": {
      "$value": "#626260",
      "$type": "color",
      "$description": "Use for the ink muted role."
    },
    "ink-subtle": {
      "$value": "#7b7b78",
      "$type": "color",
      "$description": "Use for the ink subtle role."
    },
    "ink-tertiary": {
      "$value": "#9c9fa5",
      "$type": "color",
      "$description": "Use for the ink tertiary role."
    },
    "canvas": {
      "$value": "#f5f1ec",
      "$type": "color",
      "$description": "Use for the canvas role."
    },
    "surface-1": {
      "$value": "#ffffff",
      "$type": "color",
      "$description": "Use for the surface 1 role."
    },
    "surface-2": {
      "$value": "#ebe7e1",
      "$type": "color",
      "$description": "Use for the surface 2 role."
    },
    "inverse-canvas": {
      "$value": "#000000",
      "$type": "color",
      "$description": "Use for the inverse canvas role."
    },
    "inverse-surface-1": {
      "$value": "#313130",
      "$type": "color",
      "$description": "Use for the inverse surface 1 role."
    },
    "inverse-ink": {
      "$value": "#ffffff",
      "$type": "color",
      "$description": "Use for the inverse ink role."
    },
    "inverse-ink-muted": {
      "$value": "#9c9fa5",
      "$type": "color",
      "$description": "Use for the inverse ink muted role."
    },
    "hairline": {
      "$value": "#d3cec6",
      "$type": "color",
      "$description": "Use for the hairline role."
    },
    "hairline-soft": {
      "$value": "#ebe7e1",
      "$type": "color",
      "$description": "Use for the hairline soft role."
    },
    "fin-orange": {
      "$value": "#ff5600",
      "$type": "color",
      "$description": "Use for the fin orange role."
    },
    "report-orange": {
      "$value": "#fe4c02",
      "$type": "color",
      "$description": "Use for the report orange role."
    },
    "report-blue": {
      "$value": "#65b5ff",
      "$type": "color",
      "$description": "Use for the report blue role."
    },
    "report-green": {
      "$value": "#0bdf50",
      "$type": "color",
      "$description": "Use for the report green role."
    },
    "report-pink": {
      "$value": "#ff2067",
      "$type": "color",
      "$description": "Use for the report pink role."
    },
    "report-lime": {
      "$value": "#b3e01c",
      "$type": "color",
      "$description": "Use for the report lime role."
    },
    "report-cyan": {
      "$value": "#03b2cb",
      "$type": "color",
      "$description": "Use for the report cyan role."
    },
    "brand-blue": {
      "$value": "#0007cb",
      "$type": "color",
      "$description": "Use for the brand blue role."
    },
    "semantic-error": {
      "$value": "#c41c1c",
      "$type": "color",
      "$description": "Use for the semantic error role."
    },
    "semantic-success": {
      "$value": "#0bdf50",
      "$type": "color",
      "$description": "Use for the semantic success role."
    }
  },
  "typography": {
    "display-xl": {
      "$value": {
        "fontFamily": "Saans",
        "fontSize": "72px",
        "fontWeight": 500,
        "lineHeight": 1.05,
        "letterSpacing": "-2.0px"
      },
      "$type": "typography",
      "$description": "Typography style for display xl."
    },
    "display-lg": {
      "$value": {
        "fontFamily": "Saans",
        "fontSize": "56px",
        "fontWeight": 500,
        "lineHeight": 1.1,
        "letterSpacing": "-1.4px"
      },
      "$type": "typography",
      "$description": "Typography style for display lg."
    },
    "display-md": {
      "$value": {
        "fontFamily": "Saans",
        "fontSize": "40px",
        "fontWeight": 500,
        "lineHeight": 1.15,
        "letterSpacing": "-0.8px"
      },
      "$type": "typography",
      "$description": "Typography style for display md."
    },
    "headline": {
      "$value": {
        "fontFamily": "Saans",
        "fontSize": "28px",
        "fontWeight": 500,
        "lineHeight": 1.2,
        "letterSpacing": "-0.5px"
      },
      "$type": "typography",
      "$description": "Typography style for headline."
    },
    "card-title": {
      "$value": {
        "fontFamily": "Saans",
        "fontSize": "22px",
        "fontWeight": 500,
        "lineHeight": 1.25,
        "letterSpacing": "-0.3px"
      },
      "$type": "typography",
      "$description": "Typography style for card title."
    },
    "subhead": {
      "$value": {
        "fontFamily": "Saans",
        "fontSize": "20px",
        "fontWeight": 400,
        "lineHeight": 1.4,
        "letterSpacing": "-0.2px"
      },
      "$type": "typography",
      "$description": "Typography style for subhead."
    },
    "body-lg": {
      "$value": {
        "fontFamily": "Saans",
        "fontSize": "18px",
        "fontWeight": 400,
        "lineHeight": 1.5,
        "letterSpacing": "-0.1px"
      },
      "$type": "typography",
      "$description": "Typography style for body lg."
    },
    "body": {
      "$value": {
        "fontFamily": "Saans",
        "fontSize": "16px",
        "fontWeight": 400,
        "lineHeight": 1.5,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for body."
    },
    "body-sm": {
      "$value": {
        "fontFamily": "Saans",
        "fontSize": "14px",
        "fontWeight": 400,
        "lineHeight": 1.5,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for body sm."
    },
    "caption": {
      "$value": {
        "fontFamily": "Saans",
        "fontSize": "12px",
        "fontWeight": 400,
        "lineHeight": 1.4,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for caption."
    },
    "button": {
      "$value": {
        "fontFamily": "Saans",
        "fontSize": "15px",
        "fontWeight": 500,
        "lineHeight": 1.2,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for button."
    },
    "eyebrow": {
      "$value": {
        "fontFamily": "Saans",
        "fontSize": "14px",
        "fontWeight": 500,
        "lineHeight": 1.3,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for eyebrow."
    },
    "mono": {
      "$value": {
        "fontFamily": "SaansMono",
        "fontSize": "13px",
        "fontWeight": 400,
        "lineHeight": 1.5,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for mono."
    }
  },
  "spacing": {
    "xxs": {
      "$value": "4px",
      "$type": "dimension",
      "$description": "Spacing step xxs."
    },
    "xs": {
      "$value": "8px",
      "$type": "dimension",
      "$description": "Spacing step xs."
    },
    "sm": {
      "$value": "12px",
      "$type": "dimension",
      "$description": "Spacing step sm."
    },
    "md": {
      "$value": "16px",
      "$type": "dimension",
      "$description": "Spacing step md."
    },
    "lg": {
      "$value": "24px",
      "$type": "dimension",
      "$description": "Spacing step lg."
    },
    "xl": {
      "$value": "32px",
      "$type": "dimension",
      "$description": "Spacing step xl."
    },
    "xxl": {
      "$value": "48px",
      "$type": "dimension",
      "$description": "Spacing step xxl."
    },
    "section": {
      "$value": "96px",
      "$type": "dimension",
      "$description": "Spacing step section."
    }
  },
  "radius": {
    "xs": {
      "$value": "4px",
      "$type": "dimension",
      "$description": "Border radius xs."
    },
    "sm": {
      "$value": "6px",
      "$type": "dimension",
      "$description": "Border radius sm."
    },
    "md": {
      "$value": "8px",
      "$type": "dimension",
      "$description": "Border radius md."
    },
    "lg": {
      "$value": "12px",
      "$type": "dimension",
      "$description": "Border radius lg."
    },
    "xl": {
      "$value": "16px",
      "$type": "dimension",
      "$description": "Border radius xl."
    },
    "xxl": {
      "$value": "24px",
      "$type": "dimension",
      "$description": "Border radius xxl."
    },
    "pill": {
      "$value": "9999px",
      "$type": "dimension",
      "$description": "Border radius pill."
    },
    "full": {
      "$value": "9999px",
      "$type": "dimension",
      "$description": "Border radius full."
    }
  },
  "shadow": {},
  "$extensions": {
    "com.design-md-editor.source": {
      "url": "https://www.intercom.com/",
      "note": "Official brand website used for visual comparison."
    }
  }
}