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

Illustration

Here, the people are always colorful, the objects delightful and the shadows dimensional. Explore how we approach illustration at Slack.
ACCESS ILLUSTRATION LIBRARY
ACCESS ILLUSTRATION LIBRARY

Highlights

  • Illustrations add an element of humanity and show collaboration, teamwork and inclusivity
  • While beautiful, they should not be treated as decorative elements
  • Use illustrations to provide more context and meaning to whatever content they accompany

Style principles

Bold

Bright, high-contrast colors. Not in-your-face but definitely not timid.

Dimensional

Objects, people and environments should evoke a sense of depth. Everything should feel grounded.

Elevated

Harmonious color palettes. An effective use of negative space. An overall sense of refinement that is never pretentious.

Unexpected

Hidden gems. Pops of color. Playful moments. Not silly, but exuding a warm, genuine sense of humor.

Purpose

Illustrations are not merely decorative—they should always serve a purpose as it relates to the content they accompany and context they appear in. Use illustrations for:

Education

Teach users and guide them through updates and workflows.

Acknowledgement

Recognize achievements, milestones and progress.

Clarity

Alleviate cognitive load around complicated content.

Humanity

Add character and context to bring stories to life.

Color palette

Besides the Slack core colors, we also use our secondary palette for illustrations. It provides a broad spectrum of colors that are rich, harmonious and accessibility-approved for the web.
  • Use tints and shades of these colors to add dimensionality
  • Lead with bolder hues

Objects

Our illustrated objects are simple and dimensional. Ideally they clearly relate to the content they accompany, though the relation can be metaphorical or conceptual.

Construction

Objects in our illustrations are created in an isometric view to add depth. We achieve dimensionality through a combination of shadows and colors (tints and shades). The use of negative space, besides casting light sources, also provides a sense of calmness.
  • Object shadows should follow the shape of the object and the light source, not exceeding 10% of the object in size
  • Set shadows in black
Start with a flat sketch
3D rotate—isometric
Extrude to add dimensionality
Add shadow
Apply colors and shading
Voilà!
Don’t use strokes or outlines
Don’t use transparency or overlay colors
Don’t use gradient on objects
Don’t use gradient on backgrounds
Don’t add patterns or textures to objects or backgrounds
Don’t add text to illustrations (unless required)

People

Illustrations of people of all ages, shapes and sizes add an element of humanity and show collaboration and teamwork. Our illustrated people are bold, vibrant and grounded with a hint of dimensionality. Hair, clothes and accessories in vibrant shapes and colors bring playfulness and personality to our characters while also offering a real worldview of our customers.

Skin tones

We use a broad range of skin tone colors when illustrating people. In illustrations with multiple people, use multiple skin tones.

Horchata

HEX FED4BE
RGB253 212 190
CMYK 0 19 22 0
PMS489 C

Horchata

HEX F3BE9A
RGB243 190 154
CMYK 3 28 39 0
PMS473 C

Horchata

HEX E69E6C
RGB230 158 108
CMYK8 43 62 0
PMS472 C

Horchata

HEX FCD199
RGB252 209 153
CMYK1 19 43 0
PMS7507 C

Horchata

HEX F3CFB2
RGB243 207 178
CMYK4 20 28 0
PMS475 C

Horchata

HEX E69E6C
RGB230 158 108
CMYK8 43 62 0
PMS472 C

Aubergine

HEX C76C61
RGB 199 108 97
CMYK18 67 59 3
PMS7607 C

Aubergine

HEX 884934
RGB 136 73 52
CMYK32 73 81 29
PMS7581 C

Aubergine

HEX 5E3C32
RGB 94 60 50
CMYK45 68 72 47
PMS7596 C
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
HEX FED4BE
RGB 253 212 190
CMYK 0 19 22 0
PMS 489 C
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
HEX F3BE9A
RGB 243 190 154
CMYK 3 28 39 0
PMS 473 C
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
HEX E69E6C
RGB 230 158 108
CMYK 8 43 62 0
PMS 472 C
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
HEX FCD199
RGB 252 209 153
CMYK 1 19 43 0
PMS 7507 C
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
HEX F3CFB2
RGB 243 207 178
CMYK 4 20 28 0
PMS 475 C
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
HEX C76C61
RGB 199 108 97
CMYK 18 67 59 3
PMS 7607 C
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
HEX 884934
RGB 136 73 52
CMYK 32 73 81 29
PMS 7581 C
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
HEX 5E3C32
RGB 94 60 50
CMYK 45 68 72 47
PMS 7596 C

Construction

  • Add depth with shadows under feet, jawlines, limbs and clothing
  • Keep things clean, simple and straightforward
  • Try to stay true to natural human anatomy
Don’t exaggerate limbs or body shapes
Don’t make characters too cartoonish
Don’t create overly whimsical or unrealistic compositions

Slack logo

Perspective may be added to the Slack logo so that it matches the angle of the illustration. Do not distort or manipulate the Slack logo in any other way.

Slack blog illustrations

The Slack blog follows a separate illustration style. Please refer to the Slack blog art direction guidelines for more details.

Illustration library

Before you roll up your sleeves and start creating shadows from scratch, take a look through our illustration library. It contains a robust repository of people, objects, scenes and more—all ready for you to put to use right away.

Note: To prevent the use of illustrations as decoration, we limit access to our library. If you believe you need an illustration, please reach out in #slack-brand-center-help or brand@slack-corp.com.
Access illustration library
Sign in for access
Access illustration library
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