Meet our brand
About SlackBrand valuesSlack name
Foundations
LogoBrand architectureCobrandingColorsTypographyWritingBrand shapesEmoji
Expression
IllustrationPhotographyMotionVideoSoundIconsUI
Experiences
Slack-led eventsSlack at Salesforce eventsCMSEmailSpacesuit
ResourcesResources
About Slack
Our companyBoilerplate copy
Logo
The Slack logoMarkClearspaceUnusual sizesBackgroundsUsage
Brand architecture
SalesforcePartnershipPrimarySecondaryUsage
Color
Core paletteSecondary paletteSpecial use palettesApplications
Typography
Type stackProduct fontSystem fallbacksLocalized languagesStyling typeApplications
Writing
Voice and toneCopy principlesLanguageStylizationUsage
login
AccountSign in
AccountSign out
AccountSign in
AccountSign out
Visit slack.com
THE BRAND
Meet our brand
About Slack
Our companyBoilerplate copy
Brand values
Values
Foundations
Logo
The Slack logoMarkClearspaceUnusual sizesBackgroundsUsage
Brand architecture
SalesforcePartnershipPrimarySecondaryUsage
Cobranding
IntroductionCobranding considerationsLogo usageRetired logosSlack branding elementsSalesforce branding elements
Colors
Core paletteSecondary paletteSpecial use palettesApplications
Typography
Type stackProduct fontSystem fallbacksLocalized languagesStyling typeApplications
Writing
Voice and toneCopy principlesLanguageStylizationUsage
Brand shapes
Types of brand shapesApplicationsDesign considerationsMotionTypes of brand shapes
Emoji
Emoji basicsDesign considerationsUsage
Expression
Illustration
Style principlesPurposeColor paletteObjectsPeopleSlack logoSlack blog illustrationsIllustration library
Photography
Photography styles
Motion
Slack motion design valuesAnimation principlesSlack logoBrand shapesBumpersTransitionsText animation2D animation3D design and animationProduct UICharacter animationStop-motion animationSoundUsage
Icons
Icon basicsDesign considerationsIcon stylesUsage
UI
Designing for UI screensHigh fidelitySimplifiedAbstractedWriting for UIUsage
Experiences
Events (Slack-led)
IntroductionLogo usageDesignExperiencesField eventsStrategic eventsSlack at Salesforce eventsUsage
Events (Salesforce-led)
IntroductionDesignUsage

UI screens

What are we talking about when we talk about Slack? Well, it’s usually our product. Here’s how to show the user interface in the best light.
ACCESS ui building kit
ACCESS ui building kit

Highlights

  • Use approved personas, emoji and fonts to make your UI screens accurate to Slack (and spiffy too!)
  • We use three different types of UIs that vary in level of detail: high fidelity, simplified and abstracted
  • Our aubergine sidebar is one of the elements that makes Slack, well, Slack, and should be featured on most UI screens

Designing for UI screens

Across landing pages, social posts, videos, decks and more, Slack UI screens are used to show both how Slack functions and how it makes work simpler, more pleasant and more productive. As such, it's incredibly important to stay accurate to our product.

Please use the templates and resources we’ve provided on this page. You can abstract items to draw focus or scale up items for legibility, but don’t introduce functions, features or behaviors that don’t actually exist. Default to featuring the aubergine sidebar, as it is one of our most recognizable product elements.

Universal design elements

Source from these product elements for all UI.

Personas

When you're showing people working in Slack, please use our library of personas. The personas are available in both photo and illustration formats, complete with names and localized for different regions. Please don’t mix photographic and illustrative styles within a UI or create your own personas.
Access Persona library
Sign in for access
Access Persona library
Access Illustration library
Sign in for access
Access Illustration library

Emoji

Emoji are used within messages and as reactions to messages. Please use our licensed Joypixel emoji pack only to avoid any legal issues.
Download Joypixel emoji pack
Sign in for access
Download Joypixel emoji pack

Product font

When creating UI screens, use Lato; for Japanese, use Noto. Please don’t use any other fonts.
Use Lato when creating UI screens. Please don’t use any other fonts.
Download Lato
Sign in for access
Download Lato
Download Noto
Sign in for access
Download Noto

Types of UI screens

UI screen design is driven by its purpose—whether it needs to educate people on how to use Slack,  drive brand awareness or tell a story. Our UI screen types vary in the level of detail they show: high fidelity, simplified and abstracted. To choose between types, determine which would bring the most clarity around the concept or message you need to convey.
High fidelity
Simplified
Abstracted

High fidelity

High fidelity UIs offer an in-depth, highly detailed view of Slack. Use these to show people how to navigate and use our product, rather than simply represent it.

When creating high fidelity UI:
  • Stay true to the full product experience, with complete messages, a full sidebar and rich details like emoji, time stamps and avatars
  • Show multiple messages and/or integrations
  • Show the full composer and formatting options

Resources

Get ready-made UI screens or build your own with the following resources for high fidelity UIs.
Media kit product screenshots
UI Generator
Sign in for access
UI Generator

Simplified

Simplified UI screens allow you to zoom in on specific features, while still providing enough detail to help someone unfamiliar with Slack to understand what’s happening. Use these to focus on a single message, conversation or feature.  

When creating simplified UI:
  • Design around one product component that highlights the central idea, feature or message you're trying to convey
  • Show fewer channels, messages and microcopy
  • Remove details that aren't critical to understanding

Resources

Get ready-made assets to create your own abstracted UIs.
UI building kit
Sign in for access
UI building kit
UI Generator
Sign in for access
UI Generator

Abstracted

Abstracted UI screens illustrate bigger ideas or concepts by relying on paired-down visual representations of our product UI. Use these to create easy brand recognition, especially in contexts with minimal space or time to interact with them.

When creating abstracted UI:
  • Design around one product component that highlights the central idea, feature or message you're trying to convey
  • Abstract non-essential details based on the message or concept you need to convey
  • Keep copy very minimal or omit altogether

Resources

Get ready-made assets to create your own abstracted UIs.
Abstracted UI template
Sign in for access
Abstracted UI template

Writing for UI

UI copy, like all copy at Slack, should be clear, concise and human. In this case, extremely human, as we are showing how humans work together in Slack. The conversations should feel believable and real. Here are a few pointers:
  • Brevity is key—don’t try to communicate a rich story with only UI
  • Keep conversations to one or two lines
  • Feel free to customize conversations to be relevant to the target customer, but be mindful not to alienate broader audiences with jargon
  • For web or print, streamline copy to highlight a single product feature or benefit
  • For videos, keep copy short and concise so the audience is able to fully digest the narration and UI all at once
Don’t forget to:
  • Add timestamps to all messages
  • Acme Inc. as a default, if you aren’t highlighting a specfic company

Usage

Don’t use other fonts for product UI
Don’t create new personas or persona names
Don’t alter corner radiuses from templates
REQUESTS OR QUESTIONS?
Let us know how we can help:
slack-brand-center-help
brand@slack-corp.com
Meet our brand
About SlackBrand valuesSlack name
Foundations
LogoBrand architectureCobrandingColorsTypographyWritingBrand shapesEmoji
Expression
IllustrationPhotographyMotionVideoSoundIconsUI
Experiences
Slack-led eventsSlack at Salesforce eventsCMSEmailSpacesuit
©2021 Slack Technologies, LLC, a Salesforce company.
All rights reserved.
Privacy PolicyGovernance