Slack Design Tokens

Name: Dembrandt
Author: Dembrandt

Business communication and collaboration platform

Multi-color brand palette

Stripe Linear Notion OpenAI Tesla Airbnb Figma Slack Uber Apple Raycast Krea AI Family Oura Nike Duolingo Arc Perplexity AI Anthropic Vercel Cursor

Observed with Dembrandt. Semantic roles, gradients, and breakpoints come from live extractions where available; contrast is computed from the real palette. Try the CLI for the complete W3C token export.

Design tokens observed from publicly visible CSS. Dembrandt does not host, copy, or redistribute any brand assets.

Colors

#611f69

#481a54

#36c5f0

#2eb67d

#ecb22e

#e01e5a

primary#611f69

secondary#ffffff

background#ffffff

text#000000

accent#1264a3

Typography

Salesforce-Avant-Garde, Salesforce-Sans, Helvetica, sans-serif

hero:58px / 600

body:18px / 400

button:15px / 700

weights:400, 600, 700

leading:1, 1.1, 1.4, 1.6

tracking:-0.02em, 0, 0.04em

Shadows

Spacing

4px8px16px24px32px48px

Border Radius

4px

8px

16px

Borders

1px solid #592466

1px solid #ebeaeb

Links

Link text#ffffff · no underline

Gradients

linear-gradient(104deg, #000000 9.56%, #ba01ff 102.66%)

linear-gradient(#ffffff 0%, #edf4ff 22.115%, #f9f0ff 100%)

Opacity

0.04

0.08

0.16

0.4

0.64

0.92

Breakpoints

327px600px768px1024px1280px1859px

Motion

Duration120ms180ms280ms420ms

Easingcubic-bezier(0.4, 0, 0.2, 1)cubic-bezier(0.16, 1, 0.3, 1)linear

Contrast · WCAG 2.2

Button label

11.00:1

AAA

Body text

7.07:1

AAA

Button States

React

Default

#611f69

Hover

#7c2d84

Active

#4a154b

Focus

focus

Disabled

disabled

radius: 4pxpadding: 12px 20px

output.json

{
  "$schema": "https://design-tokens.org/schema.json",
  "color": {
    "palette-1": {
      "$type": "color",
      "$value": "#611f69"
    },
    "palette-2": {
      "$type": "color",
      "$value": "#481a54"
    },
    "palette-3": {
      "$type": "color",
      "$value": "#36c5f0"
    },
    "palette-4": {
      "$type": "color",
      "$value": "#2eb67d"
    },
    "palette-5": {
      "$type": "color",
      "$value": "#ecb22e"
    },
    "palette-6": {
      "$type": "color",
      "$value": "#e01e5a"
    },
    "primary": {
      "$type": "color",
      "$value": "#611f69"
    },
    "secondary": {
      "$type": "color",
      "$value": "#ffffff"
    },
    "background": {
      "$type": "color",
      "$value": "#ffffff"
    },
    "text": {
      "$type": "color",
      "$value": "#000000"
    },
    "accent": {
      "$type": "color",
      "$value": "#1264a3"
    },
    "link": {
      "$type": "color",
      "$value": "#ffffff"
    }
  },
  "border": {
    "border-1": {
      "$type": "border",
      "$value": "1px solid #592466"
    },
    "border-2": {
      "$type": "border",
      "$value": "1px solid #ebeaeb"
    }
  },
  "gradient": {
    "gradient-1": {
      "$type": "gradient",
      "$value": "linear-gradient(104deg, #000000 9.56%, #ba01ff 102.66%)"
    },
    "gradient-2": {
      "$type": "gradient",
      "$value": "linear-gradient(#ffffff 0%, #edf4ff 22.115%, #f9f0ff 100%)"
    }
  },
  "fontFamily": {
    "base": {
      "$type": "fontFamily",
      "$value": "Salesforce-Avant-Garde, Salesforce-Sans, Helvetica, sans-serif"
    }
  },
  "fontWeight": {
    "weight-400": {
      "$type": "fontWeight",
      "$value": 400
    },
    "weight-600": {
      "$type": "fontWeight",
      "$value": 600
    },
    "weight-700": {
      "$type": "fontWeight",
      "$value": 700
    }
  },
  "dimension": {
    "space-1": {
      "$type": "dimension",
      "$value": "4px"
    },
    "space-2": {
      "$type": "dimension",
      "$value": "8px"
    },
    "space-3": {
      "$type": "dimension",
      "$value": "16px"
    },
    "space-4": {
      "$type": "dimension",
      "$value": "24px"
    },
    "space-5": {
      "$type": "dimension",
      "$value": "32px"
    },
    "space-6": {
      "$type": "dimension",
      "$value": "48px"
    },
    "radius-1": {
      "$type": "dimension",
      "$value": "4px"
    },
    "radius-2": {
      "$type": "dimension",
      "$value": "8px"
    },
    "radius-3": {
      "$type": "dimension",
      "$value": "16px"
    }
  },
  "shadow": {
    "shadow-1": {
      "$type": "shadow",
      "$value": "0 1px 3px rgba(0,0,0,0.08)"
    },
    "shadow-2": {
      "$type": "shadow",
      "$value": "0 4px 12px rgba(74,21,75,0.15)"
    },
    "shadow-3": {
      "$type": "shadow",
      "$value": "0 16px 32px rgba(0,0,0,0.2)"
    }
  },
  "opacity": {
    "opacity-0": {
      "$type": "number",
      "$value": 0
    },
    "opacity-1": {
      "$type": "number",
      "$value": 0.04
    },
    "opacity-2": {
      "$type": "number",
      "$value": 0.08
    },
    "opacity-3": {
      "$type": "number",
      "$value": 0.16
    },
    "opacity-4": {
      "$type": "number",
      "$value": 0.4
    },
    "opacity-5": {
      "$type": "number",
      "$value": 0.64
    },
    "opacity-6": {
      "$type": "number",
      "$value": 0.92
    },
    "opacity-7": {
      "$type": "number",
      "$value": 1
    }
  },
  "duration": {
    "duration-1": {
      "$type": "duration",
      "$value": "120ms"
    },
    "duration-2": {
      "$type": "duration",
      "$value": "180ms"
    },
    "duration-3": {
      "$type": "duration",
      "$value": "280ms"
    },
    "duration-4": {
      "$type": "duration",
      "$value": "420ms"
    }
  },
  "cubicBezier": {
    "ease-1": {
      "$type": "cubicBezier",
      "$value": "cubic-bezier(0.4, 0, 0.2, 1)"
    },
    "ease-2": {
      "$type": "cubicBezier",
      "$value": "cubic-bezier(0.16, 1, 0.3, 1)"
    },
    "ease-3": {
      "$type": "cubicBezier",
      "$value": "linear"
    }
  },
  "breakpoint": {
    "bp-1": {
      "$type": "dimension",
      "$value": "327px"
    },
    "bp-2": {
      "$type": "dimension",
      "$value": "600px"
    },
    "bp-3": {
      "$type": "dimension",
      "$value": "768px"
    },
    "bp-4": {
      "$type": "dimension",
      "$value": "1024px"
    },
    "bp-5": {
      "$type": "dimension",
      "$value": "1280px"
    },
    "bp-6": {
      "$type": "dimension",
      "$value": "1859px"
    }
  },
  "contrast": {
    "button-label": {
      "ratio": 11,
      "grade": "AAA"
    },
    "body-text": {
      "ratio": 7.07,
      "grade": "AAA"
    }
  }
}
// ...and more

Other token exports

--dtcgW3C token JSON, checked by the DTCG Validator

--design-mdDESIGN.md for agents and docs

--brand-guideBrand guide PDF

--wcagPalette-wide contrast report

All flags in the CLI quickstart. Same tokens in your editor via the MCP server.

$npx dembrandt slack.com