---
name: slack-design-reference
provider: DesignSkill (https://designskill.dev)
reference: slack.com
source_url: https://slack.com/
tool: designskill-extract/3.2.0
extracted_at: 2026-07-27T07:52:27.886Z
mode: full-render
classification: reference_only
---

# Slack — Design Reference (measured)

Measured design tokens extracted from `https://slack.com/` by designskill-extract/3.2.0.
Every value below was observed in the live page (×N = observation count). Values not listed were **not observed** — do not invent them.
This document is `reference_only`: an analysis of a third-party site, not a license to its brand assets.

## Overview

- Extraction mode: **full-render** (viewports 390/768/1440px × light/dark), 1 page(s), 731 observation records.
- Primary action color observed as `#4a154b` (basis: declared, confidence 0.85).
- Dominant font family: **Salesforce-Sans** (×747; secondary Salesforce-Avant-Garde ×338).
- Type scale observed at 8 sizes from 12px to 32px.
- Corner radius values in use: 16px, 4px, 8px, 48px….
- Not observed in this extraction: nav, forms, cards.

## Colors

### Role Tokens

Semantic roles inferred from observed usage. `basis` tells how the role was established (declared CSS var > cross-validated > inferred).

| Token | Value | Basis | Confidence | Observed |
|---|---|---|---|---|
| `{color.primary}` | `#4a154b` | declared | 0.85 | ×0 — --article-theme-primary |
| `{color.background}` | `#ffffff` | cross-validated | 0.94 | ×692 |
| `{color.ink}` | `#000000` | cross-validated | 0.94 | ×603 |
| `{color.muted}` | `#696969` | inferred | 0.7 | ×262 |
| `{color.surface}` | `#f9f0ff` | inferred | 0.7 | ×177 |
| `{color.accent}` | `#1264a3` | inferred | 0.65 | ×285 |

### Observed Palette

Full measured palette ordered by usage share. `Used in` lists the CSS properties the color appeared on.

| Hex | Share | Used in | Observed |
|---|---|---|---|
| `#ffffff` | 21.5% | background-color, color, border-color, fill | ×692 (cross-validated, 0.94) |
| `#000000` | 18.8% | color, border-color, background-color, box-shadow | ×603 (cross-validated, 0.94) |
| `#1264a3` | 8.9% | color, border-color, background-color, fill | ×285 (cross-validated, 0.93) |
| `#696969` | 8.2% | color, border-color, background-color, fill | ×262 (cross-validated, 0.93) |
| `#611f69` | 5.4% | background-color, color, border-color, box-shadow | ×175 (cross-validated, 0.92) |
| `#481a54` | 6.4% | background-color, color, --bck-color, border-color, box-shadow | ×206 (cross-validated, 0.93) |
| `#f9f0ff` | 5.5% | background-color, --bck-color | ×177 (cross-validated, 0.93) |
| `#1d1d1d` | 5.2% | color, border-color, background-color, fill, box-shadow | ×168 (cross-validated, 0.92) |
| `#ebeaeb` | 4.2% | border-color, background-color, box-shadow, color | ×136 (cross-validated, 0.92) |
| `#454245` | 1.6% | color, border-color, fill | ×50 (cross-validated, 0.91) |
| `#730394` | 1.6% | color, background-color, outline | ×50 (cross-validated, 0.91) |
| `#f9edff` | 1.4% | background-color | ×44 (observed, 0.76) |
| `#36c5f0` | 1.1% | color, border-color, background-color, fill | ×35 (inferred, 0.6) |
| `#9602c7` | 1.0% | color | ×32 (observed, 0.75) |
| `#2f8ab7` | 0.8% | background-color | ×26 (observed, 0.75) |
| `#5e5d60` | 1.0% | color | ×32 (cross-validated, 0.9) |

## Typography

### Font Families

| Family | Observed |
|---|---|
| `Salesforce-Sans` | ×747 |
| `Salesforce-Avant-Garde` | ×338 |
| `NotoSansJP` | ×4 |
| `arial` | ×3 |
| `NotoSansKR` | ×3 |
| `NotoSansSC` | ×3 |

Use **Salesforce-Sans** as the default family — it accounts for the overwhelming majority of observed text nodes.

### Type Scale

| Token | Size | Observed |
|---|---|---|
| `{type.display}` | 32px | ×32 |
| `{type.h1}` | 24px | ×208 |
| `{type.h2}` | 23px | ×34 |
| `{type.h3}` | 18px | ×263 |
| `{type.body-lg}` | 16px | ×474 |
| `{type.body}` | 15px | ×40 |
| `{type.body-sm}` | 14px | ×667 |
| `{type.caption}` | 12px | ×78 |

The most frequently observed size is **14px** (×667) — treat it as the default body size.

## Spacing

| Value | Observed |
|---|---|
| `16px` | ×1439 |
| `8px` | ×591 |
| `24px` | ×326 |
| `32px` | ×304 |
| `6px` | ×276 |
| `4px` | ×157 |
| `12px` | ×142 |
| `2px` | ×132 |
| `10px` | ×129 |
| `48px` | ×114 |
| `20px` | ×114 |
| `80px` | ×66 |

## Shape (Border Radius)

| Value | Observed |
|---|---|
| `16px` | ×250 |
| `4px` | ×216 |
| `8px` | ×82 |
| `48px` | ×30 |
| `90px` | ×16 |
| `3px` | ×9 |
| `60px` | ×4 |
| `12px` | ×2 |

## Elevation

| Shadow | Observed |
|---|---|
| `rgba(0, 0, 0, 0.1) 0px 0px 32px 0px` | ×104 |
| `#000000` | ×85 |
| `0 0 2rem #0000001a` | ×26 |
| `rgba(131, 56, 138, 0.08) 0px 4.8px 14px 6.4px` | ×24 |
| `#611f69` | ×16 |
| `rgb(97, 31, 105) 0px 0px 0px 1px inset` | ×14 |

## Motion

| Duration | Observed |
|---|---|
| `0.42s` | ×76 |
| `0.2s` | ×48 |
| `.42s` | ×29 |
| `0.5s` | ×26 |
| `4s` | ×24 |

## Components

Measured computed styles of representative components (desktop viewport).

| Component | Measured spec | Samples |
|---|---|---|
| button.primary | bg `#611f69` · text `#ffffff` · radius `4px` · padding `19px 40px 20px` · font `14px/700` | ×4 |
| badge | bg `#e8f5fa` · text `#0b4c8c` · radius `999px` · font `12px/700` · padding `3.5008px 12px 3.64px` | ×2 |

### Hero Gradient (observed)

```css
background-image: linear-gradient(rgb(249, 240, 255) 5%, rgb(255, 255, 255) 10%);
```

### Interaction States (observed)

| State | Property | From | To |
|---|---|---|---|
| hover | color | `rgb(29, 29, 29)` | `rgb(0, 0, 0)` |
| hover | border-color | `rgb(29, 29, 29)` | `rgb(0, 0, 0)` |
| hover | outline-color | `rgb(29, 29, 29)` | `rgb(0, 0, 0)` |
| focus | color | `rgb(29, 29, 29)` | `rgb(0, 0, 0)` |
| focus | border-color | `rgb(29, 29, 29)` | `rgb(0, 0, 0)` |
| focus | outline-color | `rgb(29, 29, 29)` | `rgb(97, 31, 105)` |

## Accessibility (WCAG Contrast)

| FG | BG | Ratio | AA | Source |
|---|---|---|---|---|
| `#000000` | `#000000` | 1 | fail | observed ×91 |
| `#696969` | `#000000` | 3.83 | fail | observed ×84 |
| `#000000` | `#ffffff` | 21 | pass | observed ×54 |
| `#1264a3` | `#ffffff` | 6.22 | pass | observed ×45 |
| `#481a54` | `#000000` | 1.55 | fail | observed ×28 |
| `#1d1d1d` | `#000000` | 1.25 | fail | observed ×27 |
| `#1d1c1d` | `#000000` | 1.24 | fail | observed ×24 |
| `#730394` | `#f9f0ff` | 8.73 | pass | observed ×21 |
| `#1264a3` | `#000000` | 3.38 | fail | observed ×18 |
| `#ffffff` | `#4a154b` | 14 | pass | observed ×17 |
| `#9602c7` | `#000000` | 3.13 | pass | observed ×16 |
| `#481a54` | `#ffffff` | 13.54 | pass | observed ×15 |
| `#000000` | `#ffffff` | 21 | pass | ink_on_background |
| `#ffffff` | `#4a154b` | 14 | pass | white_on_primary |
| `#696969` | `#ffffff` | 5.49 | pass | muted_on_background |

6 measured pair(s) fail AA — if you reuse those pairs, adjust lightness until the ratio reaches 4.5:1.

## Usage Rules

### Do
- Use `{color.primary}` (`#4a154b`) for primary actions only — that is where it was observed.
- Default text pairing: `{color.ink}` (`#000000`) on `{color.background}` (`#ffffff`).
- Set all text in `Salesforce-Sans` (fallbacks only for glyph coverage).
- Pick corner radii from the measured set (16px, 4px, 8px, 48px) — no intermediate values were observed.
- Cite this file's token names (`{color.*}`, `{type.*}`) when generating UI so output stays traceable to observations.

### Don't
- Don't invent colors, sizes, shadows, or spacing not listed above — absence means *not observed*, and this document records observations only.
- Don't assume the missing blocks (nav, forms, cards) don't exist on the site — they were simply not captured in this run.
- Don't copy brand assets (logo, wordmark, imagery, copy) — `reference_only` covers measured style values, not brand identity.

## Provenance

- Source: https://slack.com/ (1 page(s))
- Tool: designskill-extract/3.2.0 · extracted 2026-07-27T07:52:27.886Z
- Mode: full-render — 풀렌더 모드 — 3뷰포트 × 라이트/다크 computed style + 상태 관측.
- Blocks observed: 01, 02, 03, 04, 05, 08, 09, 10, 11, 12 · missing: nav, forms, cards
- Degraded stages (extraction failure ≠ design change — exclude from diffs): state-observation
- Warning: primary 불일치: static=#1264a3 vs render=#4a154b — render 채택

---

<sub>Generated & served by [DesignSkill](https://designskill.dev)</sub>