{
  "$schema": "https://design-tokens.github.io/community-group/format/",
  "meta": {
    "brand": "Slack",
    "theme": "light",
    "description": "Aubergine stage with white spotlights."
  },
  "color": {
    "aubergine": {
      "$type": "color",
      "$value": "#611f69",
      "$description": "Filled CTA and primary navigation fill."
    },
    "deep-plum": {
      "$type": "color",
      "$value": "#481a54",
      "$description": "Full dark hero and inverted bands."
    },
    "purple-haze": {
      "$type": "color",
      "$value": "#f9f0ff",
      "$description": "Quiet lilac wash."
    },
    "lavender-mist": {
      "$type": "color",
      "$value": "#eac8fe",
      "$description": "Feature-card border."
    },
    "vivid-violet": {
      "$type": "gradient",
      "$value": "linear-gradient(104deg, rgb(0, 0, 0) 9.56%, rgb(186, 1, 255) 102.66%)",
      "$description": "Single highlighted headline word only."
    },
    "plum-shadow": {
      "$type": "color",
      "$value": "#3d0157",
      "$description": "Dark purple UI detail."
    },
    "iris": {
      "$type": "color",
      "$value": "#730394",
      "$description": "Secondary purple fill."
    },
    "iris-light": {
      "$type": "color",
      "$value": "#d17dfe",
      "$description": "Dark-band accent."
    },
    "channel-blue": {
      "$type": "color",
      "$value": "#1264a3",
      "$description": "In-product channel link."
    },
    "mid-blue": {
      "$type": "color",
      "$value": "#0b4c8c",
      "$description": "Link and tag accent."
    },
    "text": {
      "$type": "color",
      "$value": "#1d1c1d",
      "$description": "Carbon primary text."
    },
    "text-muted": {
      "$type": "color",
      "$value": "#454245",
      "$description": "Charcoal secondary text."
    },
    "fog": {
      "$type": "color",
      "$value": "#edeaed",
      "$description": "Hairline divider."
    },
    "surface": {
      "$type": "color",
      "$value": "#ffffff",
      "$description": "Card and inverted copy surface."
    },
    "canvas": {
      "$type": "color",
      "$value": "#fefbff",
      "$description": "Faint-lilac page canvas."
    }
  },
  "typography": {
    "display": {
      "$type": "typography",
      "$value": {
        "fontFamily": [
          "Salesforce-Avant-Garde",
          "Inter Tight",
          "DM Sans",
          "sans-serif"
        ],
        "fontWeight": 400,
        "fontSize": "96px",
        "lineHeight": 1.08,
        "letterSpacing": "-1.15px"
      },
      "$description": "Largest display."
    },
    "heading": {
      "$type": "typography",
      "$value": {
        "fontFamily": [
          "Salesforce-Avant-Garde",
          "Inter Tight",
          "DM Sans",
          "sans-serif"
        ],
        "fontWeight": 400,
        "fontSize": "64px",
        "lineHeight": 1.12,
        "letterSpacing": "-0.77px"
      },
      "$description": "Section display heading."
    },
    "body": {
      "$type": "typography",
      "$value": {
        "fontFamily": [
          "Salesforce-Sans",
          "Inter",
          "IBM Plex Sans",
          "sans-serif"
        ],
        "fontWeight": 400,
        "fontSize": "16px",
        "lineHeight": 1.5,
        "letterSpacing": "-0.16px"
      },
      "$description": "Default body text."
    },
    "eyebrow": {
      "$type": "typography",
      "$value": {
        "fontFamily": [
          "Salesforce-Sans",
          "Inter",
          "IBM Plex Sans",
          "sans-serif"
        ],
        "fontWeight": 700,
        "fontSize": "12px",
        "lineHeight": 1.5,
        "letterSpacing": "0.68px"
      },
      "$description": "Uppercase product tag."
    }
  },
  "spacing": {
    "4": {
      "$type": "dimension",
      "$value": "4px",
      "$description": "Button corner unit."
    },
    "8": {
      "$type": "dimension",
      "$value": "8px",
      "$description": "Tight group gap."
    },
    "12": {
      "$type": "dimension",
      "$value": "12px",
      "$description": "Card inner rhythm."
    },
    "16": {
      "$type": "dimension",
      "$value": "16px",
      "$description": "Standard inset."
    },
    "24": {
      "$type": "dimension",
      "$value": "24px",
      "$description": "Card padding."
    },
    "32": {
      "$type": "dimension",
      "$value": "32px",
      "$description": "Feature gap."
    },
    "48": {
      "$type": "dimension",
      "$value": "48px",
      "$description": "Large gap."
    },
    "96": {
      "$type": "dimension",
      "$value": "96px",
      "$description": "Major section rhythm."
    }
  },
  "radius": {
    "button": {
      "$type": "dimension",
      "$value": "4px",
      "$description": "Primary and ghost CTA."
    },
    "card": {
      "$type": "dimension",
      "$value": "16px",
      "$description": "Content and screenshot cards."
    },
    "pill": {
      "$type": "dimension",
      "$value": "999px",
      "$description": "Compact navigation pill only."
    }
  },
  "shadow": {
    "xl": {
      "$type": "shadow",
      "$value": "rgba(0, 0, 0, 0.1) 0px 0px 32px 0px",
      "$description": "Product screenshot card."
    },
    "subtle": {
      "$type": "shadow",
      "$value": "rgb(97, 31, 105) 0px 0px 0px 1px inset",
      "$description": "CTA focus inset."
    },
    "nav": {
      "$type": "shadow",
      "$value": "rgba(0, 0, 0, 0.08) 0px 1px 3px 0px",
      "$description": "Sticky nav idle."
    },
    "nav-active": {
      "$type": "shadow",
      "$value": "rgba(0, 0, 0, 0.1) 0px 5px 20px 0px",
      "$description": "Sticky nav active."
    }
  }
}