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 considerationsMotionUsage
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

Brand shapes

Our brand shapes are drawn from our octothorpe mark. Handle with care—these foundational visual elements are another way we express our brand personality.
ACCESS shape toolkit
ACCESS shape toolkit

Highlights

  • Brand shapes are used in three ways: containers, patterns and backgrounds
  • Please use what is provided in the toolkit to maintain consistency
  • Keep things simple—shapes play a supporting role in directing focus for design

Types of brand shapes

Our brand shapes are core visual elements drawn from the octothorpe mark in the Slack logo.

Chat bubble

Chat bubbles should be scaled proportionally. Don’t combine chat bubbles and pill shapes into a single form.

Pill

Pills can be shortened or extended based on the application. Don’t combine pills and chat bubbles into a single form.

Toolkit

Please use the shape toolkit we’ve provided here. It contains patterns, backgrounds and more—all ready for you to use right away. There’s no need to create your own.
Access shape toolkit
Sign in for access
Access shape toolkit

Applications

Here are examples of the different ways brands shapes are used in design.

Container

Single shapes can be used to contain illustrations or photography alongside a headline.

Pattern

Shapes can be built into patterns to frame main elements like messaging, emoji or imagery. They are of secondary focus in the design.

Background

Shapes can appear as background elements to provide visual interest and texture. These should be built on a grid and feel orderly versus random.

Design considerations

Brand shapes work alongside copy and images to bring focus to a design and express our personality. Before you dive in and start using shapes, here’s a few things to take into account. As always, you can refer to our shape toolkit for more details and ready-made templates.
Brand shapes work alongside copy and images to bring focus to a design and express our personality. Before you dive in and start using shapes, here’s a few things to take into account. As always, you can refer to our 24 shape toolkit for more details and ready-made templates.
Brand shapes work alongside copy and images to bring focus to a design and express our personality. Before you dive in and start using shapes, here’s a few things to take into account. As always, you can refer to our shape toolkit for more details and ready-made templates.

Scale

Scale shapes to create simple backgrounds and patterns. For use with imagery, stick to fewer, larger shapes for greater impact. See our shape toolkit for more details on how images  are structured within shapes.
Scale shapes to create simple backgrounds and patterns. For use with imagery, stick to fewer, larger shapes for greater impact. See our 24 shape toolkit for more details on how images  are structured within shapes.
Scale shapes to create simple backgrounds and patterns. For use with imagery, stick to fewer, larger shapes for greater impact. See our shape toolkit for more details on how images  are structured within shapes.

Solid vs. stroke

We use solid shapes more often, but stroke shapes can be used for variation. Use them sparingly and only in addition to solid shapes.

Color

Use our core and secondary color palettes. Don’t use too many colors, as that can distract from the overall design. For monochrome patterns, use a tint or shade of the background hue to create contrast. See more details on we use colors, see our shape toolkit.
Use our core and secondary color palettes. Don’t use too many colors, as that can distract from the overall design. For monochrome patterns, use a tint or shade of the background hue to create contrast. See more details on we use colors, see our 24 shape toolkit.
Use our core and secondary color palettes. Don’t use too many colors, as that can distract from the overall design. For monochrome patterns, use a tint or shade of the background hue to create contrast. See more details on we use colors, see our shape toolkit.

Images

Single shapes are used to frame photography and illustrations. The images should be anchored to the bottom of the shape, but can extend past the top or the side of the shape.

Alignment

Arrange brand shapes on a grid by default unless it’s limiting to the overall design. They can be rotated, but only at 90 degree angles. Do not overlap shapes.

Motion

Shapes can be animated to function as accents, transitions or background fills. For more details on using our brand shapes in animation, see our motion guidelines.

Usage

image-tuneimage-tune
Don’t create new brand shapes;  please use what is provided in the toolkit
Don’t overwhelm patterns with too many colors, too close together
Don’t overlap shapes or add effects like drop shadows, inner shadows or bevels
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