design.md

AI-ready Markdown · Human-readable · 107 tokens
Preview

# slack.com Design Tokens

> Generated by UI Archive — https://ui-archive.com/slack.com
> Snapshot: 2026-11-15
> Format: W3C DTCG compatible — suitable for Cursor, Lovable, Claude Code, and other AI coding agents

## Colors

| Token | Value | Description |
|-------|-------|-------------|
| --color-article-theme-primary | #481a54 | Defined in :root as --article-theme-primary |
| --color-sidebar-color | #400d40 | Defined in :root as --sidebar-color |
| --color-sidebar-highlight-color | #1264a3 | Defined in :root as --sidebar-highlight-color |
| --color-attachment-color | #000000 | Defined in :root as --attachment-color |

## Typography

| Token | Font Family | Size |
|-------|-------------|------|
| --font-size-salesforce-avant-garde | Salesforce-Avant-Garde, system-ui, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji | .875rem |
| --font-size-inherit-important | inherit | inherit |
| --font-size-slack-lato | Slack-Lato, appleLogo, sans-serif | .8125rem |
| --font-size-salesforce-sans-16px-400 | Salesforce-Sans, system-ui, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji | 16px |
| --font-size-salesforce-sans-14px-400 | Salesforce-Sans, system-ui, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji | 14px |
| --font-size-salesforce-sans-18px-400 | Salesforce-Sans, system-ui, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji | 18px |
| --font-size-salesforce-avant-garde-24px-700 | Salesforce-Avant-Garde, system-ui, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji | 24px |
| --font-size-salesforce-sans-12px-400 | Salesforce-Sans, system-ui, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji | 12px |
| --font-size-salesforce-sans-15px-700 | Salesforce-Sans, system-ui, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji | 15px |
| --font-size-salesforce-avant-garde-22px-600 | Salesforce-Avant-Garde, system-ui, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji | 22px |
| --font-size-salesforce-avant-garde-32px-700 | Salesforce-Avant-Garde, system-ui, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji | 32px |
…