Jump to section

Illustration

Illustration is an eye-catching medium that tells a story in a way that photography, technical diagrams, and icons cannot. Illustrations work well across applications, like presentations, web pages, animations, and motion graphics. We use illustrations to tell conceptual, open stories and describe nuanced ideas in an authentic way.

Diagram showing the complexity levels of icons to illustrations

Open, not closed.

Red Hat® illustrations can convey a topic from a single, simple idea to a conceptual, open story. These stories are not limited or restrained, but extend out to create an imagined world where technology concepts and solutions come to life.

Intentional, not superficial

Our style is refined and thoughtfully designed to complement the complex nature of our products. They’re approachable, but not cartoonish or childlike.

Representative, not stereotypical.

With diverse people and diverse thoughts, the best ideas come from everywhere. We include a broad range of people and environments that go beyond the traditional enterprise technology cliches.

Active, not passive.

Red Hat’s illustration style implies movement and activity. Illustrated people are realistic and dynamic, not oversimplified or static.

Types of illustrations

There are 2 styles of illustrations at Red Hat: mini illustrations (minis) and illustrations. Minis convey a single, simple idea and are often based on our icons. Illustrations convey an imagined world where technology concepts and solutions come to life and are driven by a story.


Additionally, illustrations can convey this imagined world with or without incorporating people. While illustrations with and without people do not differ in style, we require additional thought and intention when drawing people.

Agile integration mini illustration

Mini illustrations (minis)

Minis are used in one color and convey a single, simple idea. They’re often based on our icons but have additional details, which makes them perfect for expressing concepts that are too complex for a small icon, and for use in spaces that are too large for an icon.

Illustration example

Illustrations

Illustrations are driven by a story, and can be used in larger applications compared to minis. 

They use elements in a stylized—rather than realistic—color palette to create an imagined world where technology concepts and solutions come to life.

Illustration with people

Illustrations with people

Illustrations of people are inspired by photos of real Red Hat associates, customers, and partners.

When including people in an illustration, we give additional time and attention to ensure that the people are realistic and fit in the scene. If we can’t be confident that we are integrating people coherently into an illustration, we don’t include people.

Illustrations with people

Diagram showing the complexity levels of icons to illustrations, highlighting illustrations with people

Our illustrations of people depict a diverse community by reflecting the world as it truly exists. We use photos of real people as a source for our illustrations—not our own ideas of people–to prevent unintentional biases and stereotypes.

Considering diversity, equity, and inclusion is a significant part of our process for creating illustrations. Make sure illustrations are reviewed by others— other designers, your peers, and our Red Hat Diversity, Equity, and Inclusion community members.

When creating illustrations of people, always be intentional and thoughtful. Allow time to research, listen, and adjust.

Illustration key principle

Complex ideas or stories

Illustrations use elements in a stylized—rather than realistic—color palette to create an imagined world where technology concepts and solutions come to life.

There is a clear separation between subjects in the foreground and background. We balance fills of color with monowidth strokes to create a sense of depth and openness.

Illustration key principle 2

Defined light source

Like minis, consistent use of light and shadow is important. Our illustrations have a clearly defined light source that casts deep shadows, and help to add depth to the imagined world. 

Unlike minis, the light source does not always have to be cast from the top left.

Illustration key principle 3

Solid colors

Unlike minis, illustrations do not use any textures. They also never use gradients. Instead, illustrations make use of solid colors from the Red Hat color palette and negative space to create texture and depth.

Color in illustrations

Core color illustrations

Illustrations that are created from our core color palette are ideal for most brand illustrations. We use colors with strong contrast to create depth and dimension.

Extended color illustrations

Illustrations that are created using our secondary color palette are ideal for bold illustrations that draw attention. They always include Red Hat red as an accent, which ensures that they still look like Red Hat.

Creating an illustration

Template

Designers should create illustrations using our Illustrator template. Illustrations are designed on a 1080 x 1080 pixel artboard, and should be either the full height or full width of the 1000 x 1000 pixel key line.

Consistent visual metaphors

Draw the main subject(s) of the illustration using basic shapes that are based on our icons and minis so that our visual metaphors are consistent across our visuals.

Complexity

Draw any other objects or elements that are necessary to convey the story. Consider if these elements should be contained in the organic background shape.

Consider adding additional lines or elements to help create movement or interaction in the illustration.

Color and hierarchy

Use our core color palette, or add up to 2 secondary colors in addition to Red Hat red, to help create clear separation between elements in the foreground and background.

Light source and shadows

Consider your light source and use strokes and color to create highlights and shadows in the illustration.

Example illustrations

Do this

This illustration creates clear separation between objects in the foreground and background, and uses a single light source that helps to provide depth and create a sense of hierarchy.

Do this

This illustration uses a thoughtful color group, consisting of 2 saturated colors from our secondary color palette (teal and purple) in addition to Red Hat red.

Do this

This illustration successfully uses a stylistic color palette, rather than a realistic one. 

Aside from use of the people palette for skin tones, all elements in an illustration should use a color palette in a stylistic way that helps to convey the imagined world.

Watch this

This illustration does not have a well defined light source. Ensure that you have a singular light source that impacts everything in the scene.

Watch this

This illustration introduces a lot of elements into the composition and lacks a strong sense of hierarchy. Create strong shadows to ensure that there is clear separation between objects in the foreground and background.

Watch this

This illustration uses a realistic secondary color palette that detracts from the imagined world.

How to incorporate people into illustrations

Illustration with people example 1
Do this

Illustrated people are lifelike and dynamic, not oversimplified or static. Illustrated people should always be interacting with their imagined world in a way that feels realistic.

Illustration with people example 2
Do this

Locate and use a single light source that impacts all subjects and elements in the scene. Use strokes and solid colors to create highlights and shadows thoughtfully.

Illustration with people example 3
Do this

Illustrate people with enough detail that represents them thoughtfully and creates individuality. If we incorporate people into an illustration, the people should be integral to the illustration and not a background element.

Image showing misuse illustration with people example
Red X saying do not do this

Do not place illustrated people arbitrarily on an existing illustration. If we cannot be confident that we are integrating people realistically within an illustration, we should not use illustrations of people.

This illustration example 3
Do this

Use illustrations large enough that the details are legible and they fill the available space appropriately.

Image showing misuse illustration with people example
Red X saying do not do this

Do not arbitrarily shade subjects and elements in the scene in a way that implies multiple light sources.

This illustration example 4
Do this

Use illustrations independently without additions or modifications.

Image showing misuse illustration with people example
Red X saying do not do this

Do not illustrate people with little to no facial features, or in a way that erases their individuality.

Illustrations with people

Diagram showing the complexity levels of icons to illustrations, highlighting illustrations with people

Our illustrations of people depict a diverse community by reflecting the world as it truly exists. We use photos of real people as a source for our illustrations—not our own ideas of people–to prevent unintentional biases and stereotypes.

Considering diversity, equity, and inclusion is a significant part of our process for creating illustrations. Make sure illustrations are reviewed by others— other designers, your peers, and our Red Hat Diversity, Equity, and Inclusion community members.

When creating illustrations of people, always be intentional and thoughtful. Allow time to research, listen, and adjust.

Illustration key principle

Complex ideas or stories

Illustrations use elements in a stylized—rather than realistic—color palette to create an imagined world where technology concepts and solutions come to life.

There is a clear separation between subjects in the foreground and background. We balance fills of color with monowidth strokes to create a sense of depth and openness.

Illustration key principle 2

Defined light source

Like minis, consistent use of light and shadow is important. Our illustrations have a clearly defined light source that casts deep shadows, and help to add depth to the imagined world. 

Unlike minis, the light source does not always have to be cast from the top left.

Illustration key principle 3

Solid colors

Unlike minis, illustrations do not use any textures. They also never use gradients. Instead, illustrations make use of solid colors from the Red Hat color palette and negative space to create texture and depth.

Color in illustrations

Core color illustrations

Illustrations that are created from our core color palette are ideal for most brand illustrations. We use colors with strong contrast to create depth and dimension.

Extended color illustrations

Illustrations that are created using our secondary color palette are ideal for bold illustrations that draw attention. They always include Red Hat red as an accent, which ensures that they still look like Red Hat.

Creating an illustration

Template

Designers should create illustrations using our Illustrator template. Illustrations are designed on a 1080 x 1080 pixel artboard, and should be either the full height or full width of the 1000 x 1000 pixel key line.

Consistent visual metaphors

Draw the main subject(s) of the illustration using basic shapes that are based on our icons and minis so that our visual metaphors are consistent across our visuals.

Complexity

Draw any other objects or elements that are necessary to convey the story. Consider if these elements should be contained in the organic background shape.

Consider adding additional lines or elements to help create movement or interaction in the illustration.

Color and hierarchy

Use our core color palette, or add up to 2 secondary colors in addition to Red Hat red, to help create clear separation between elements in the foreground and background.

Light source and shadows

Consider your light source and use strokes and color to create highlights and shadows in the illustration.

Example illustrations

Do this

This illustration creates clear separation between objects in the foreground and background, and uses a single light source that helps to provide depth and create a sense of hierarchy.

Do this

This illustration uses a thoughtful color group, consisting of 2 saturated colors from our secondary color palette (teal and purple) in addition to Red Hat red.

Do this

This illustration successfully uses a stylistic color palette, rather than a realistic one. 

Aside from use of the people palette for skin tones, all elements in an illustration should use a color palette in a stylistic way that helps to convey the imagined world.

Watch this

This illustration does not have a well defined light source. Ensure that you have a singular light source that impacts everything in the scene.

Watch this

This illustration introduces a lot of elements into the composition and lacks a strong sense of hierarchy. Create strong shadows to ensure that there is clear separation between objects in the foreground and background.

Watch this

This illustration uses a realistic secondary color palette that detracts from the imagined world.

How to incorporate people into illustrations

Illustration with people example 1
Do this

Illustrated people are lifelike and dynamic, not oversimplified or static. Illustrated people should always be interacting with their imagined world in a way that feels realistic.

Illustration with people example 2
Do this

Locate and use a single light source that impacts all subjects and elements in the scene. Use strokes and solid colors to create highlights and shadows thoughtfully.

Illustration with people example 3
Do this

Illustrate people with enough detail that represents them thoughtfully and creates individuality. If we incorporate people into an illustration, the people should be integral to the illustration and not a background element.

Image showing misuse illustration with people example
Red X saying do not do this

Do not place illustrated people arbitrarily on an existing illustration. If we cannot be confident that we are integrating people realistically within an illustration, we should not use illustrations of people.

This illustration example 3
Do this

Use illustrations large enough that the details are legible and they fill the available space appropriately.

Image showing misuse illustration with people example
Red X saying do not do this

Do not arbitrarily shade subjects and elements in the scene in a way that implies multiple light sources.

This illustration example 4
Do this

Use illustrations independently without additions or modifications.

Image showing misuse illustration with people example
Red X saying do not do this

Do not illustrate people with little to no facial features, or in a way that erases their individuality.

Illustrations with people

Diagram showing the complexity levels of icons to illustrations, highlighting illustrations with people

Our illustrations of people depict a diverse community by reflecting the world as it truly exists. We use photos of real people as a source for our illustrations—not our own ideas of people–to prevent unintentional biases and stereotypes.

Considering diversity, equity, and inclusion is a significant part of our process for creating illustrations. Make sure illustrations are reviewed by others— other designers, your peers, and our Red Hat Diversity, Equity, and Inclusion community members.

When creating illustrations of people, always be intentional and thoughtful. Allow time to research, listen, and adjust.

Skin tones

To create realistic skin tones in our illustrations, we use our people palette. Regardless of the color palette used for the rest of the illustration, always use realistic skin tones for people.

For each person, choose 1 skin tone family. Skin tone families are described differently than traditional colors; cool tones lean towards pinks while warm tones lean towards yellows and browns. Learn more about our color palette.

cool-tone-10

#ffe3dc

cool-tone-20

#f7c8bb

cool-tone-30

#e8a997

cool-tone-40

#ce8873

cool-tone-50

#a66552

cool-tone-60

#724335

cool-tone-70

#40251d

warm-tone-10

#ffe9dc

warm-tone-20

#f9d5c0

warm-tone-30

#edbea1

warm-tone-40

#d8a381

warm-tone-50

#b88564

warm-tone-60

#8e6549

warm-tone-70

#664934

Drawing people

When we’re representing people, there is no room for error. To be intentional and thoughtful, we must allow time to research, listen, and adjust. If we cannot be confident that we are doing our best to represent people thoughtfully and respectfully, we should not use illustrations of people. 

Basing our illustrations off of photos ensures that they are representative of a diverse community. Make sure that reference photos are reflective of real people from Red Hat communities.

Anatomy

Illustration with people

Anatomy

Our people use natural proportions and anatomy with some very slight stylization. Line work should feel fluid and connect the full form in a way that feels sophisticated.

A.
Slightly enlarged head, but not so enlarged that it is noticeable.

B.
True to reality arm, torso, and lower body form—with slight simplification of lines.

C.
Rely on shadow and strokes for more detail as needed.

D.
Natural foot size—no shrinking or enlarging for stylization purposes.

Facial features

Illustration with people

Facial features

Facial features, especially eyes, may be slightly enlarged for stylization. Overall, don’t overwork the face, and focus on staying simple while still maintaining individuality.

A.
Tapered eyebrows

B.
Monowidth stroke for eyelids

C.
One dot per eye, no eye whites

D.
Nose: monowidth stroke, small stroke for nostril, 1 or 2 shades darker than the skin tone

E.
Two toned lips, or fill on top and outline on bottom

Adding light

Illustration with people

Adding light

Start by drawing the silhouette with the person’s main skin tone, then step back one tone and add a highlight where light hits the face.

This creates contrast for all skin tones which allows the facial features to be visible and provides more definition to the profile of faces.

How to incorporate people into illustrations

Illustration with people example 1
Do this

Illustrated people are lifelike and dynamic, not oversimplified or static. Illustrated people should always be interacting with their imagined world in a way that feels realistic.

Illustration with people example 2
Do this

Locate and use a single light source that impacts all subjects and elements in the scene. Use strokes and solid colors to create highlights and shadows thoughtfully.

Illustration with people example 3
Do this

Illustrate people with enough detail that represents them thoughtfully and creates individuality. If we incorporate people into an illustration, the people should be integral to the illustration and not a background element.

Image showing misuse illustration with people example
Red X saying do not do this

Do not place illustrated people arbitrarily on an existing illustration. If we cannot be confident that we are integrating people realistically within an illustration, we should not use illustrations of people.

Image showing misuse illustration with people example
Red X saying do not do this

Do not arbitrarily shade subjects and elements in the scene in a way that implies multiple light sources.

Image showing misuse illustration with people example
Red X saying do not do this

Do not illustrate people with little to no facial features, or in a way that erases their individuality.