# Slack inspiration images — sources (2026-10-03)

All images below came from Slack's own public Help Center (slack.com/help), collected
2026-10-03 with a headless browser, no login and no captcha bypass. Full research notes,
plus CSS/fonts/brand facts, are at
`C:\Users\pc\OpenDesign-archive\altleads-design-project\research\slack\`.

Note on dark mode: Slack's current Help Center does not contain a real dark-mode
screenshot anywhere (checked the dedicated "Use dark mode in Slack" and "Change your
Slack theme" articles — both only show the same light-mode illustration). Everything
below is light mode only.

1. **01-thread-pane-light.png** — Real Slack app screenshot (not an illustration), 1400x1063.
   Channel #team-design with a thread open in the right-hand pane (replies, reply box).
   Clean, no annotations. From "Use threads to organize discussions":
   https://slack.com/help/articles/115000769927-Use-threads-to-organize-discussions-

2. **02-activity-view-light.png** — Real Slack app screenshot, 1460x1000 (frame from an
   animated demo). Activity panel: All/DMs/My view tabs, Unreads/Filters/search, message
   rows with names and avatars, bulk "3 Items Selected / Mark as Read / Clear" toolbar.
   Aubergine sidebar and title bar visible. No annotations. From "Introducing the new
   Activity view in Slack": https://slack.com/help/articles/46751260742035-Introducing-the-new-Activity-view-in-Slack

3. **03-activity-view-sidebar-light.png** — Same real UI as #2, an earlier frame showing
   the Home/Activity sidebar icons and the Activity list before selection. Same source.

4. **04-sidebar-annotated-light.png** — Real Slack app screenshot, 2880x2048, full
   desktop window (sidebar, channel list, message area). HAS numbered callout
   annotations (1-4) pointing at sidebar parts — useful for understanding sidebar
   anatomy, not pixel-clean. From "Adjust your sidebar preferences":
   https://slack.com/help/articles/212596808-Adjust-your-sidebar-preferences

5. **05-message-toolbar-annotated-light.png** — Real Slack message hover toolbar
   (react, reply, forward, bookmark, more) close-up, 2224x1080. Has one small numbered
   annotation badge. From "Find information you need":
   https://slack.com/help/articles/360058495714-Find-information-you-need

6-12. **Illustrations, not real app screenshots.** Slack's Help Center mostly replaced
   real screenshots with flat-color marketing illustrations (gray bars stand in for
   text, cartoon avatars). These are still useful for accurate LAYOUT reference
   (composer bar, emoji picker, huddle panel, sidebar sections, mentions dropdown,
   canvas/checklist card, message hover toolbar position) even though the chrome
   itself is stylized, not literal pixels:
   - 06-find-info-illustration-pink-light.png — channel view layout with date divider
   - 07-canvas-checklist-illustration-light.png — canvas/checklist/video card layout
   - 08-mentions-illustration-blue-light.png — @mention autocomplete dropdown
   - 09-message-hover-illustration-teal-light.png — message hover toolbar + canvas card
   - 10-sidebar-sections-illustration-light.png — custom sidebar sections/submenu
   - 11-emoji-illustration-light.png — emoji/reactions illustration
   - 12-huddle-illustration-light.png — huddle panel illustration

## Also collected (not copied here, see research folder)
- Real Slack-Lato font files (OFL-licensed Lato, renamed) — `research/slack/fonts/`
- Public Slack marketing/sign-in CSS with genuine `--dt_color-*` design tokens
  (light + dark values) — `research/slack/css/`
- Brand facts: Aubergine `#4A154B` (+ variants), accent Blue/Green/Yellow/Red —
  `research/slack/css/SOURCES.md`
- `app.slack.com/block-kit-builder` was checked and confirmed to redirect to a login
  wall — skipped, no bypass attempted.


## Added 3 Oct 2026 (main session): Slack's own feature pages and stylesheets

**Best source found: Slack's feature pages** (slack.com/features, /features/ai, /pro, /solutions/sales and others, public, no login).
They carry 10 crisp, full-window screenshots of the current app (2190 x 1500, light, real text, no annotations) and about 50 demo videos.
The ten stills are in `app-screens/` (WebP copies). The app is shown zoomed in (about 1.5x) with larger text, as marketing shots usually are.
- `01-channel-astrocraft-account.webp`: **pixel target 1**. Channel with members and huddle buttons, a reaction, a PDF card, the external-people banner, the composer.
- `02-search-ai-answer.webp`: **pixel target 2**. Search results: AI answer card, sources, filters, results list.
- `03` to `10`: other real screens used for components (agent DM, record tab, Slackbot, huddle, Workflow Builder, list board, templates, apps).
- Every image and video is Light / Aubergine. **No dark-mode image of the current app is public** (help centre included).

**Real values (archive `research/slack/css/`):**
- `rollup-style-slack-kit-base...css` (Slack Kit, loaded by slack.com/get-started and sign-in): **418 light design tokens** (`--dt_color-*`: base, surface, container, content, outline, each with hover/pressed) and the full **palette** (20 families x 12 steps, `--dt_color-plt-*`), radii, spacing, shadows.
- Its dark theme class `.sk-client-theme--dark` only sets `color-scheme: dark` in public files; the real dark values live in the signed-in app. Slack's tokens do include **inverse** values (`-inv-`) for dark surfaces, which we use to build dark.
- `get-started...primer.min.css`: Slack Kit components (c-button, c-input_text, c-menu, c-tabs, c-tooltip, c-dialog, c-toast, c-avatar, c-badge, c-banner...) and **1,054 icon names** mapped to the **"Slack v2" icon font** (`research/slack/icons/slack-icons-v2-*.woff2`), the real icon set of the app.
- Fonts: **Slack-Lato** (Lato, open licence) regular, bold, black, light, italic, bold italic: `research/slack/fonts/`.