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
.svg)
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
HEX FED4BE
RGB 253 212 190
CMYK 0 19 22 0
PMS 489 C
HEX F3BE9A
RGB 243 190 154
CMYK 3 28 39 0
PMS 473 C
HEX E69E6C
RGB 230 158 108
CMYK 8 43 62 0
PMS 472 C
HEX FCD199
RGB 252 209 153
CMYK 1 19 43 0
PMS 7507 C
HEX F3CFB2
RGB 243 207 178
CMYK 4 20 28 0
PMS 475 C
HEX C76C61
RGB 199 108 97
CMYK 18 67 59 3
PMS 7607 C
HEX 884934
RGB 136 73 52
CMYK 32 73 81 29
PMS 7581 C
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.
.svg)
.svg){kind=icon}
.svg)
