AI work platform preview

All your people, tools, and agents in one working surface.

A Slack-specific catalog of aubergine actions, dense channel UI, bento feature cards, AI answer panels, pricing comparisons, and help-center search patterns.

# project-launchSlackbot ready

Project launchCanvas updated

Sami

Can Slackbot summarize blockers before standup?

Slackbot

Three decisions are pending: launch copy, enterprise pricing note, and workflow owner. I drafted next steps from the channel.

Ask Slackbot

Update the launch canvas, notify approvers, and create a list item for the pricing review.

Priya

Perfect. Convert that to a workflow and pin the recap.

30Colors

13Type levels

16Components

70+Tokens

01 / Colors

Aubergine first, product color in precise accents.

Slack uses white work surfaces, aubergine CTAs, blue links, and small flashes of the four-color mark.

primary

#611F69

Main CTA and focus color.

accent

#4A154B

Deep brand bands and sidebar.

link

#1264A3

Arrow links and docs links.

canvas

#FFFFFF

Primary page and card field.

surfaceAlt

#F4EDE4

Warm editorial bands.

lavenderSurface

#F9F0FF

AI answer modules.

productBlueSurface

#E8F5FA

Product info panels.

ink

#1D1C1D

Headings and dense copy.

slackBlue

#36C5F0

Logo accent and chips.

slackGreen

#2EB67D

Logo accent and success feel.

slackYellow

#ECB22E

Logo accent and highlights.

slackRed / error

#E01E5A

Logo accent and error state.

02 / Typography

Heavy headlines, compact operational body text.

Display levels are tight and emphatic; product and help copy stays clear, dense, and readable.

All work starts in conversation.

Display - 64px / 700 / 1.0 / -0.02em / Inter substitute

Slackbot multiplies what teams can do.

Hero - 56px / 700 / 1.05 / -0.018em / Inter substitute

Reimagine what's possible with AI and agents.

Headline lg - 48px / 700 / 1.08 / -0.015em / Inter substitute

Manage all your work from one place.

Title lg - 32px / 700 / 1.16 / -0.01em / Inter substitute

Channels organize teams and work.

Title md - 24px / 700 / 1.25 / -0.004em / Inter substitute

Slack Connect with external partners

Title sm - 18px / 700 / 1.32 / 0em / Inter substitute

AI in Slack summarizes and searches based on actual conversations, so every app and agent becomes more contextually aware.

Body - 18px / 400 / 1.5 / 0em / Inter substitute

Muted nav sublabels, help text, pricing notes, and compact cards use this quieter scale.

Body sm - 15px / 400 / 1.45 / 0em / Inter substitute

03 / Buttons

Compact, bold, and action-oriented.

Slack CTAs use moderate radii, heavy labels, and aubergine hierarchy rather than glossy effects.

button-primary

button-primary-active

button-secondary

secondary-on-dark

button-ghost / arrow-link

button-icon

04 / Cards & Surfaces

White cards, lavender AI, blue product proof.

Cards keep light borders and subtle depth; color fields have a product reason.

Feature bento

Short copy, real capability, and a blue arrow link keep feature cards useful.

Learn about workflows →

AI answer card

Lavender surfaces indicate Slackbot, Agentforce, summaries, and generated answers.

Ask Slackbot →

Product info panel

Blue-tinted panels support factual product modules and integration proof.

See integrations →

Pro plan

Pricing cards stay white, bordered, and comparison-friendly.

Aubergine CTA

Deep brand surfaces are reserved for high-confidence moments.

Get started →

Stat module

97 min
average time saved weekly with AI in Slack.

05 / Brand-Specific Product Patterns

Slack is recognizable through dense working UI.

These schematic mockups show channels, messages, AI answers, lists, workflows, huddles, pricing, and help search.

Channel sidebar taxonomy

Canvas

Launch brief, open decisions, and owners are pinned in channel.

Slackbot answer

Slackbot

I found 6 related messages, 2 canvas notes, and 1 Salesforce opportunity. The renewal risk is timing, not budget.

Lists project tracker

Task

Owner

Status

Approve launch copy

Mina

Review

Update pricing FAQ

In progress

Notify partners

Ari

Done

Workflow builder

1When a form is submitted

2Post to #project-launch

3Create approval request

4Update list row

Huddle tile stack

AI notes

Decision: ship beta Monday. Follow-up: share customer clip with sales.

Pricing comparison

Plan

Workflow

Free

Basic

Pro

✓

Enterprise

✓

Advanced

Help search

⌕

ChannelsMessagesHuddles

App integration chip row

SalesforceGitHubGoogle DriveZoom

Opportunity updated

Stage changed to Procurement from a Slack conversation.

06 / Forms

Practical controls with clear focus.

Inputs are functional, not over-rounded, except for search and topic pills.

Workspace name

Focused search

Plan

Message

Email errorEnter a valid email address.

Choices

Include AI summaries Daily Weekly

07 / Spacing

Generous sections, compact interiors.

Slack separates major stories with air, then packs navs, cards, and product UI tightly.

4px

8px

16px

24px

32px

xxl

48px

section

96px

08 / Radius

Moderate corners, pills only where expected.

Screenshots and cards are softly rounded; buttons stay more restrained.

4px

Inputs, coachmarks, small UI.

8px

Buttons and compact cards.

12px

Pricing and plan cards.

16px

Product frames and bento.

xxl

24px

Large editorial panels.

pill

9999px

Search fields and chips.

09 / Elevation

Light depth, never glossy.

Most hierarchy comes from type, borders, grids, and color fields.

subtle

0 1px 3px #0000001A

card

0 4px 12px #00000014

floating

Chat widgets and overlays.

flat

Many Slack surfaces use only borders and color contrast.

10 / Extracted Component Tokens

CSS custom properties.

Key tokens used throughout this preview, ready for implementation.

:root {
  --brand-primary: #611F69;
  --brand-accent: #4A154B;
  --brand-accent-pressed: #2E0039;
  --brand-ink: #1D1C1D;
  --brand-body: #454245;
  --brand-muted: #696969;
  --brand-canvas: #FFFFFF;
  --brand-surface: #F5F4F5;
  --brand-surface-alt: #F4EDE4;
  --brand-border: #EBEAEB;
  --brand-link: #1264A3;
  --brand-success: #007A5A;
  --brand-error: #E01E5A;
  --slack-blue: #36C5F0;
  --slack-green: #2EB67D;
  --slack-yellow: #ECB22E;
  --slack-red: #E01E5A;
  --ai-surface: #F9F0FF;
  --ai-border: #EABDFB;
  --radius-md: 8px;
  --radius-xl: 16px;
  --radius-pill: 9999px;
  --shadow-subtle: 0 1px 3px #0000001A;
  --shadow-card: 0 4px 12px #00000014;
}