# Slack — DESIGN.md

Aubergine chrome framing a white message canvas — dense workplace product UI with a soft lavender marketing shell.

Independent reference guide from ScreenRove browser captures (signed-in Free workspace + public marketing routes). Not an official brand guide. Values describe the captured desktop states; labels distinguish **observed** (visible in UI), **sampled** (screenshot-quantized hex), and **recommended** (implementation guidance). Responsive rules below are recommendations.

Captured: 2026-09-30 (BST) · Workspace: Screenrove Research · Signed in: yes (Free plan; no payment)

## Agent task
Build an original interface using this visual language. Inspect the existing stack and conventions first. Use the included screenshots to understand hierarchy, composition and density. Keep your own branding and content.

## Font
Observed family: **Slack Lato / system sans** (product chrome reads as Lato-adjacent; marketing headlines are heavy geometric sans). A family name is not a bundled font licence. Use an available, licensed installation or a system sans-serif fallback (Inter / system-ui).

---

## 1. Visual Theme & Atmosphere
- Dual-surface system: **aubergine / purple product chrome** on the left and top rails; **white message canvas** for channels, threads, and search.
- Marketing AI page uses a **soft lavender-to-white** canvas with product mockups as proof, not illustration walls.
- Density is high in the product: persistent sidebar, channel list, composer, and optional AI/info banners share the viewport.
- Mood: collaborative, approachable, slightly playful welcome cards; chrome remains corporate Salesforce-era Slack (hash mark + aubergine).

## 2. Color Palette & Roles

### Product (observed / sampled)
| Token | Value | Role | Confidence |
|---|---|---|---|
| Canvas | `#fcfcfc` ≈ white | Message pane, search results | sampled dominant |
| Sidebar aubergine | `#542454` | Primary sidebar fill | sampled |
| Sidebar deep | `#3c0c3c` / `#481848` | Deeper chrome / selected contrast | sampled |
| Accent aubergine | `#6c0090` ≈ | Marketing primary CTA fill | sampled on features/AI |
| Soft lavender canvas | `#f0f0fc` / `#fcf0fc` | Marketing AI hero background | sampled |
| Primary text | `#000000` / near-black | Headlines, channel titles | observed |
| Secondary text | mid-gray (≈ `#5c5c5c`) | Meta, timestamps, empty-state body | observed (not hex-instrumented) |
| Presence green | bright green dot | Active status | observed |
| Avatar pink | pink circle + white initial | Default avatar chip | observed |
| Banner purple | saturated purple strip | Bottom AI/feature info banner | observed |
| Slack hash | multi-color octothorp (red/blue/green/yellow) | Brand mark in Agents & apps + marketing logo | observed |

### Semantic roles
- **Primary CTA (marketing):** solid aubergine/purple, white uppercase label (“GET STARTED”, “LAUNCH SLACK”).
- **Secondary CTA:** white fill, purple outline/label (“TALK TO SALES”).
- **Selected channel:** light/white highlight row on dark sidebar.
- **Notification badge:** small saturated red/purple count pill on sidebar items.

## 3. Typography Rules

| Role | Size / line height | Weight | Tracking | Notes |
|---|---|---|---|---|
| Marketing hero | ~40–56px / tight | 700–800 | tight negative | “AI in Slack works where you do.” |
| Marketing body | ~16–18px / ~1.5 | 400 | normal | Centered lead under hero |
| CTA label | ~13–14px | 700 | slight positive / uppercase | Observed uppercase marketing buttons |
| Channel title | ~18px | 700 | normal | `# social`, `# new-channel` |
| Message body | ~15px / ~1.45 | 400 | normal | Feed copy |
| Sidebar item | ~13–14px | 400–500 | normal | Channels, DMs, apps |
| Empty-state title | ~20–24px | 700 | normal | “Nothing turned up” |
| Banner / meta | ~12–13px | 400–500 | normal | Bottom AI banner |

## 4. Component Stylings

### Navigation
- Far-left **icon rail** (Home, Files, Agents & tools) + workspace switcher (“SR” tile).
- Channel sidebar: Channels / DMs / Agents & apps sections; `#` prefixes; “+ Connect apps”.
- Top bar: back/forward, history, centred **workspace search** field.

### Buttons
- Marketing primary: filled aubergine, uppercase, modest corner radius (not full pill).
- Marketing secondary: outlined aubergine on white.
- Product: “Invite teammates”, “Huddle” as compact toolbar controls; resting states only captured.

### Cards
- Channel welcome / onboarding cards: pastel illustrated tiles (“Send a GIF”, “Start from a template”, “Connect your apps”) with soft corners and light fills (yellow / blue / lavender).
- Message composer: bordered white input with rich-text toolbar (Aa, bold, italic, lists, emoji, mention, clip).

### Inputs & search
- Composer placeholder “Message #channel”.
- Search results: filter chip row (Messages, From, In, Only my channels, Exclude automations, Sort).
- Empty search: bold title + helpful recovery copy; no fabricated results.

### Dialogs / overlays
- Profile menu and thread panes open as side panels over the channel (thread capture). Hover-only menus not fully exercised.

### Menus / agents
- Agents & tools and Agents & apps list first-party Slack agent + Calendar/Drive connectors with external-link affordances. No connectors authorized beyond what’s pre-listed.

## 5. Layout Principles
- Classic **three-zone** product: icon rail | channel list | conversation (optional thread column).
- Message feed is the protagonist; chrome stays dense but secondary.
- Marketing: centred hero + CTA pair above a large product mockup (huddle + thread).
- Spacing: compact sidebar rows (~28–32px tall); generous welcome-card padding; recommended 4px base for builds.

## 6. Depth & Elevation
- Product depth is mostly **flat + contrast** (dark sidebar vs white canvas), not heavy shadows.
- Welcome cards use soft illustration depth and light fills.
- Bottom **info banner** sits above the window edge as a full-width strip (dismissible).
- Search empty state is flat white with typographic hierarchy only.

## 7. Do's and Don'ts

### Do
- Keep aubergine reserved for chrome, banners, and primary CTAs — not large marketing text blocks.
- Preserve the white message canvas for readability of human conversation.
- Use illustrated welcome cards for empty/new channels; keep them optional and dismissible in spirit.
- Show honest empty search (“Nothing turned up”) rather than fake results.
- Separate marketing uppercase CTA voice from product sentence-case UI labels.

### Don't
- Don’t paint the message canvas aubergine.
- Don’t invent hover, huddle-live, or paid AI panel states not captured.
- Don’t recreate the multicolor Slack hash from memory — use the supplied brand asset.
- Don’t treat Salesforce “from Salesforce” lockup as optional if using the marketing wordmark in context where it appeared.

## 8. Responsive Behavior
- Captures are **desktop viewport** only. Collapse of sidebar to icon-only, mobile tabs, and touch huddles were **not observed**.
- Recommended: stack filter chips, collapse channel list under a drawer below ~768px, keep composer sticky, ≥44px touch targets.

## 9. Agent Prompt Guide
- Canvas: white `#fcfcfc`; chrome: aubergine `#542454`; CTA: deep purple `#6c0090` (sampled).
- Layout: icon rail + channel list + message pane; optional thread column.
- Primary marketing CTA: filled aubergine, uppercase white label; secondary: outline.
- Composer: rich-text toolbar + attachment/emoji/mention row.
- Empty states: illustrated welcome cards OR typographic empty search — never fake data.
- Prompt starter: “Build a team chat workspace home with a dark purple sidebar, white channel feed, pastel onboarding cards, and a bottom AI feature banner. Use original branding.”

---

## Implementation recommendations
- Use your own name, logo, copy and sample data.
- Semantic HTML, visible focus, labelled controls, accessible contrast (aubergine-on-white for text needs care — prefer white labels on aubergine fills).
- Recommended 4px spacing base; desktop measurements are reference only.
- Implement loading / empty / disabled; do not infer unobserved backend, billing, or SSO.

## Interaction inventory
- Pre-signup auth: Create-new workspace entry. Screenshot: `flow/00-presignup-slack-auth.jpg`.
- Marketing home (session-aware “Welcome back”). Screenshot: `marketing/slack-marketing-home.jpg`.
- Marketing pricing (signed-in plans). Screenshot: `marketing/slack-marketing-pricing.jpg`.
- Marketing AI features (public). Screenshot: `marketing/slack-marketing-features-ai.jpg`.
- Product `#social` channel with synthetic message. Screenshot: `product/slack-product-social.jpg`.
- Channel thread. Screenshot: `product/slack-product-channel-thread.jpg`.
- New channel + onboarding cards. Screenshot: `product/slack-product-new-channel.jpg`.
- Files. Screenshot: `product/slack-product-files.jpg`.
- Agents & tools. Screenshot: `product/slack-product-agents-tools.jpg`.
- Search empty (“field notes”). Screenshot: `product/slack-product-search.jpg`.
- Social + profile menu. Screenshot: `product/slack-product-social-profile.jpg`.

## Avoid
- Fabricating huddle video, paid AI summaries UI, or admin console screens.
- Applying marketing hero type inside the dense sidebar.
- Treating screenshots as editable source components.

## Reference pages
- App client: `https://app.slack.com/client/...` (research workspace)
- Get started: `https://app.slack.com/get-started#/createnew`
- Features AI: `https://slack.com/features/ai` (captured route)

## Capture scope
Signed-in Free plan; invite skip + segmentation completed; no payment. Marketing home/pricing are **session-aware** variants — logged-out public homepage was not forced. No external connectors authorized. Hover, mobile, and Enterprise admin not exercised.

## Format inspiration
- https://github.com/voltagent/awesome-design-md
- https://getdesign.md/

Structure inspired by those resources. Guide text and values come from this independent ScreenRove capture pass. No proprietary source code or font files are included.