Brand

Illustration guidelines

Illustration helps breathe life into our brand. It can take a complex idea and make it easier to understand. It is a tool that allows us to communicate our product in a way that feels human and fun.

g-illustration-1@2x.png

Illustration style

Our illustration style is colorful and exhuberant. We depict a fun and energetic world where businesses and organizations seamlessly communicate with their customers and constituents. Illustration is good way to represent our brand personality.

Review brand personality attributes

Primary illustration colors
RGB
HEX
CMYK
PMS
Twilio Red
242 47 70
F22F46
0 93 79 0
185
Night (Blue-80)
0 20 137
001489
100 89 0 0
Reflex Blue

Colors

We primarily feature Twilio Red and Night in illustrations unless the audience is already very familiar with Twilio. The extended red and blue color palettes are used to add depth and variety to an illustration. When using our Secondary Palette for a Veteran Audience, consider switching only the red shades.

Review color guidelines

 

g-illustration-2@2x.png

Shapes

Shapes are made of solid colors. We do not outline them. Depth is created by differing color tone.

 

g-illustration-3@2x.png

Lines

Lines can be used to define details within a shape (like the edges of fingers). They can also be used freely in space to show emotion, movement, or sound. They are always the same weight whether they are in the foreground or background. For a hero image on our website, the line weight should be 2pt.

 

g-illustration-4@2x.png

Characters

Our characters all have circular heads. We typically try to show characters being active. Their activity can be used to metaphorically show building, communication, engagement, or other complex ideas. We aim to illustrate a healthy and balanced diversity.

 

g-illustration-5@2x.png

Scale

We use dramatic and exaggerated Scale as a way to illustrate concepts. Scale shifts add an element of play and magic to the Twilio-verse.

 

g-illustration-6@2x.png

Space

Generally every object exists in space as a flat object. Imagine paper cutouts stacked up. Shading can be added with a stipple brush. It should be subtle and not excessively used. To represent an object in 3D, we reveal only one additional side. We don’t show persepective.

 

g-illustration-7@2x.png

Activity

We want to show people in action. Their actions can metaphorically represent communication, building, engagement etc. Generally we do not illustrate characters using their phones.


g-photography-2@2x.png

Mixing illustration and photography

We mix illustration and photography to create dynamic, branded assets. We want to evoke that Twilio is energizing and powering our customers’ visions. The illustration is expressive and abstract. It complements the colors and composition of the photograph.

Download the kit of elements

Colors

When pairing illustration with photographs, a single ramp of colors is used. Red, orange, yellow, green, blue, or purple may be used. We use a consistent set of values.

  • 100 – free lines
  • 70 – shading
  • 50 – shapes
  • 30 – background
  • 20 – clouds

See all brand colors

Example palette
RGB
HEX
CMYK
PMS
Red-100
49 12 12
310C0C
- - - -
-
Red-70
173 17 17
AD1111
- - - -
-
Twilio red
242 47 70
F22F46
- - - -
-
Red-30
246 177 177
F6B1B1
- - - -
-
Red-20
252 207 207
FCCFCF
- - - -
-

Shapes

Start with these basic shapes. Sharing the same dimensions helps us make many illustrations that share a unified system of proportion.

 

Rotation

Rotate the shapes mathematically in increments of 15°.

 

Scale

Use a variety of sizes to create a dynamic space.

 

Compound shapes

Create compound shapes by combining two of the basic shapes together.

 

Compound shape shading

Use a stipple brush to give depth to the compound shapes.

 

Free lines

Use monoweight free lines to playfully interact with the foreground and background.

 

Backgrounds

Clouds anchor the composition. Use these or create your own using overlapping ovals rotated 30°.