- Templates
- Additional resources
-
Digital design system
External link -
PatternFly
External link -
Work Your Way
External link
Illustration
Illustration allows us to tell stories in ways that photography, technical diagrams, and icons cannot. We use them across applications—like presentations, web pages, animations, and motion graphics—to tell conceptual, open stories and describe nuanced ideas in a dynamic way.
Principles
These key principles—which are rooted in our brand personality—inform how we draw our illustrations and are just as important as the tiny details.
Open, not closed
Our illustrations are never boxed into a frame. Elements expand out to create an imagined world where technology concepts and solutions come to life.
Intentional, not superficial
Our style is thoughtfully designed to complement the complex nature of our products. They’re approachable, but not cartoonish or childlike.
Representative, not stereotypical
The best ideas come from everywhere. We include a broad range of people and environments that go beyond traditional enterprise technology clichés.
Active, not passive
We use details like speed lines and shadows to create movement and dimension. Illustrated people are realistic and dynamic, not oversimplified or robotic.
Types of illustration
There are 2 styles of illustrations at Red Hat: mini illustrations (minis) and spot 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.
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 to make sure we get it right.
Mini illustrations (minis)
Minis are limited to 3 colors (white, red-50, and red-30) and convey a single concept. Whenever possible, we base them directly on our icons to keep metaphors consistent across our design language.
Spot illustrations
Spot illustrations are larger and driven by a story. They use a stylized—rather than realistic—color palette to create an imagined world where technology concepts and solutions come to life.
People illustration
Illustrations of people are inspired by photos of real people. When illustrating them and incorporating them into scenes, we take additional time to ensure that the people look realistic and are representative of Red Hatters and our customers and partners.
Creating consistency, consistently
We represent Red Hat and industry-standard technology concepts the same way regardless of the story or application. From an icon to a mini to a spot, all of our visuals are based on the same shapes and forms so that our metaphors are consistent.
Mini illustrations
Minis use limited color and convey a single, simple idea. They use a flattened perspective with intentional details and shadows to add depth.
Single concept
Minis use our icon set as a reference: they convey a single concept with 1 or 2 objects and show the objects from the front with a flattened perspective whenever possible.
Color balance
An approximately 50:50 balance between white and red (both red-30 and red-50) creates balance.
Light source
Light should be cast from the top left, so shadows fall towards the bottom right. Use red-30 and red-50 to create shadows and imply depth.
Color in mini illustrations
Standard color
Minis are created in standard color by default: a mix of white, red-30, and red-50.
One-color
For applications where color is limited, we also create one-color versions of each mini. There’s a version for light backgrounds and a version for dark backgrounds.
Creating a mini illustration
Step 1: Start with the template
Designers should create minis using our Illustrator template. Minis are designed on a 1080 x 1080 pixel artboard, and should be either the full height or full width (or both) of the 1000 x 1000 pixel key line.
Step 2: Draw the basic shapes
Draw basic shapes to fit within the template. Base the shapes off of our icons so that our metaphors are similar across our visuals (for instance, we always use cubes to represent containers).
Step 3: Add fills
Fill basic shapes and well-lit areas with white. Fill other details and darkest shadows using red-50. Light should always be cast from the upper left corner.
Step 4: Adjust shadows
Use red-30 to add lighter shadows and contours to imply depth and texture. Consider how shadows overlap. Aim for a 50:50 balance of white to red.
Step 5: Add strokes
Use strokes to add movement and additional details.
Step 6: Share the mini with the Brand team
Send the new illustration to the Brand team for review so that we can create one-color versions and add it to our repositories.
Example mini illustrations
This mini successfully combines 2 icons and adds appropriate detail and hierarchy to create a more complex and compelling narrative than icons could alone.
This mini has a defined light source in the top left and is well balanced, with a 50:50 balance between white and red (both red-30 and red-50).
This mini illustration uses our standard icon metaphor for “IT modernization” to create a base for the illustration and adds detail while balancing light and shadow.
This mini does not have a well defined light source.
This mini uses a lot of filled elements and details making it feel heavier than other minis. Use filled elements thoughtfully to create shadows and depth.
This mini has good hierarchy and balance, but the small details are off. It’s using 2-3 different line weights and the filled elements have a rounded stroke applied.
Minis in use
Use our provided standard color or one-color minis.
Don’t add additional colors to minis.
Use minis independently, without additions or modifications.
Don’t combine 2 minis to create a new concept.
Use minis at a size where all of the details are legible.
Don’t use a mini at a size where the details are illegible, like in a pattern. Use an icon pattern instead.
Minis can be used as a “mini collage” by being placed on top of a base shape. Learn more on the hybrid style handbook.
Don’t use minis as an element in a complex collage.
Spot illustrations
Illustrations help to convey complex ideas or stories at a larger scale than mini illustrations. Rather than using one color and the dot pattern found in minis, our illustrations make use of solid colors and negative space to create texture and depth.
Complex ideas or stories
Spot 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.
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.
Solid colors
Illustrations always include red-50, which ensures that they still look like Red Hat.
Unlike minis, they can use colors from the Red Hat secondary color palette.
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-50 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
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.
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.
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.
This illustration does not have a well defined light source. Ensure that you have a singular light source that impacts everything in the scene.
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.
This illustration uses a realistic secondary color palette that detracts from the imagined world.
Illustrations in use
Use illustrations as they are provided—always using Red Hat red and ensuring that these illustrations look like Red Hat.
Do not distort, combine, add colors to, or modify existing illustrations in a way that does not look like Red Hat.
When using more than 1 illustration on an asset, ensure that the color palette is consistent.
Do not use more than 1 illustration on the same asset that uses different color collections.
Use illustrations large enough that the details are legible and they fill the available space appropriately.
Do not use illustrations at a size that’s too small to see the details.
Use illustrations independently without additions or modifications.
Do not combine an illustration with another illustration, mini, or icon. Use a different illustration instead.
People illustrations
Our illustrations of people should reflect 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 our global audience 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 Employee resource group (ERG) 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 global community. Make sure that reference photos are reflective of real people from Red Hat communities.
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
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
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
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.
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.
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.
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.
Do not arbitrarily shade subjects and elements in the scene in a way that implies multiple light sources.
Do not illustrate people with little to no facial features, or in a way that erases their individuality.
