Illustration

Overview

Illustrations convey meaning at a glance, simplifying complex ideas and enhancing user comprehension through visual storytelling. They bridge the gap between technical concepts and user understanding, making abstract ideas more tangible and engaging.

In Cloudflare’s products and services, illustrations capture attention, spark curiosity, and guide users effectively. They transform intangible concepts into relatable visuals, improving clarity and accessibility.

Core principles

Simple and clear

Focus on the essentials. Reduce unnecessary details so that the meaningful elements stand out. Use clean lines, simple shapes, and a minimal color palette to keep visuals easy to interpret.

Show, don’t tell

Use metaphors and analogies to represent complex ideas. The illustration should help the viewer understand a concept quickly, without needing a lot of text.

Consistency is key

Strictly follow the Cloudflare brand's color palette, typography, line weights, and reuse iconic images from the existing library. This ensures that all illustrations feel like a cohesive part of our brand's visual language.

Ensure scalability

Illustrations should be just as legible and effective at a small size as they are at a large size.

Be accessible

Design with accessibility in mind. Ensure distinct lines, shapes, and colors by using patterns, labels to differentiate elements, especially if they serve different purposes. Provide contrast between colors, and alternative text descriptions for all non-decorative illustrations so they can be understood by people using screen readers.

Infuse brand personality

We use illustration to express the unique character of our brand. Illustrations should not only be clear but instantly recognizable as ours. Embrace our specific visual language and infuse our unique color palette, wit, and distinct quirks into every piece.

Style and composition

People and personality

Diversity is an integral part of how we illustrate people at Cloudflare. Different features, skin tones, hairstyles and clothing should be used to add personality to our illustrations and represent the diversity of our employees and customers.

Download illustrating people guidelines

2-D and isometric

While the style is primarily two dimensional, some illustrations use a subtle gradient and shading to create a sense of depth and dimension. This prevents them from looking overly simplistic. In some cases isometric illustrations better convey the meaning.

Do not

Do not overcomplicate visuals with unnecessary elements that might confuse or distract users.

Do not introduce unrelated styles or color schemes as it may create confusion and diminish brand recognition and trust.

Do not use clichéd or overused imagery that lacks originality. There is so much that makes Cloudflare unique. Focus on the differentiation.

Do not present users or environments in a homogeneous way. Strive to represent a variety of users wherever you can. Do not perpetuate stereotypes, biases, or misconceptions that cause cultural biases.

Color palette

The color palette in our illustration style is grounded in the Cloudflare brand. It predominantly features Tangerine, Mango, Ruby with Raspberry and Cherry creating a sense of warmth and optimism. These are complemented by a cooler set of colors, including Blackberry, Purple, Light gray, and Light blue which provide balance and contrast. White is used as a foundational neutral, giving the illustrations a clean, modern feel.The overall effect is professional, trustworthy, and subtly energetic.

In our brand illustrations, the colors red and green are used with purpose. Red represents a clear danger or threat, effectively signaling cyber attacks, security breaches, or a failed action. Conversely, green conveys safety, success, and protection, illustrating secure connections, effective defenses, or a completed action. Using these colors consistently across all our visuals ensures a unified and intuitive experience for our customers, helping them quickly understand the state of their security.