An updated illustration style for Document Cloud

Untying the trefoil knot icon to create a visual language of continuous motion

A simple linear illustration (red and white on a black background) of a white hand clutching a black document-shaped icon which is connected to Document Cloud's iconic red trefoil knot by a white looping

All illustrations by Joslyn Reid

The launch of Acrobat’s modern viewer set in motion a holistic rethinking of the illustrative assets used across Document Cloud products (Adobe Acrobat, Adobe Acrobat Sign, Adobe Scan) for in-app, marketing, and help content.

For years, in-app communications, tutorial content, and product marketing each had their own distinct illustrative approach. The visual inconsistencies made it difficult for customers to see the disparate content as connected in any way. A unified visual language would help people make better connections between our products and our messaging platforms. We launched a three-team partnership—between the Brand & Experience, Learn & Help, and Document Cloud teams—to create a new visual language for desktop, web, and mobile.

We found our inspiration for the visible throughline, between the apps and the platforms where they’re supported, in the looping lines of Document Cloud’s trefoil knot icon.

Three elements supply the necessary visual throughline

Our illustrative approach relies on three basic elements: a continuous line and loop, a hand, and Acrobat’s workflow icons.

Three linear illustrations (black on a white background). From left: a looping line, a hand with an extended finger pushing a black button, and a magnifying glass icon.
The three elements of Document Cloud’s new visual language: a continuous line and loop, a hand, and Acrobat’s workflow icons.

The versatility of the elements—the ability to change the shapes and lengths of the lines, the positions of the hands, and the placement of the icons—creates possibilities for us to illustrate a range of topics across in-product, marketing, and learn content.

To create a consistent thread between Document Cloud and Adobe’s other product families, a simple linear style was borrowed from Creative Cloud. Also implemented, in response to the need to satisfy multiple uses across multiple platforms, was a loud and quiet duality carried out by filling and outlining.

Two linear illustrations on a white background. On the left, a white checkmark in a red circle is connected by a looping line to a purple hand, with an extended finger pushing a red button. On the right, a white checkmark in a red circle is connected by a looping line to a hand outlined in red, with an extended finger pushing a red button.
Impact and subtlety play out in the system with filled and outlined versions of the elements. A high impact color like red can be tamed by using it only for an outline.

Bold colors and filled illustrations live out loud for banner ads and key in-app notifications while much quieter outline representations are used for tutorials, marketing, and anywhere else that the illustrations need to be silent supporters to other copy and content.

A screenshot of an Adobe Acrobat in-app banner on a white background. On the left are words: Welcome to Adobe Acrobat. Send PDFs from anywhere. Beneath that, two buttons read Sign in (blue) and Create free account (white with black outline and text). On the right is a purple hand tossing a red and white paper airplane. A purple looping line connects to the hand and the plane.
Expressive, color-filled illustrations are the perfect balance to headline copy.

The hero of the visual story: the continuous line and loop

The continuous line—the basic part of all composition—supplies balance to layouts, visible threads between workflow icons and the hand, and background support that doesn’t distract from important copy. And, when used between and across touchpoints (product sections and features, Document Cloud products, and marketing and help content) it provides an identifiable and literal throughline for this well-known product group.

A white, horizontally looping line on a black background.
Deriving its essence from Document Cloud’s trefoil knot, the line and loop create motion, movement, and help build a narrative and a visual throughline for compositions.

With weights that are always balanced and proportional, the line is the leader on a journey through horizontal and vertical layouts, backgrounds and foregrounds, and instructional and expressive content. More importantly, it’s the thread connecting Document Cloud’s story and history, its products and features, and its presence on multiple platforms.

Two linear illustrations on a white background. On the left, a grey checkmark connected to a black looping line. On the right, a globe created from a grey sphere encircled by a black looping line.
The line and loop can be shortened and lengthened as needed to connect elements and weave through assets.

The line works in tandem with a loop inspired by Document Cloud’s trefoil knot. Never overpowering or replacing the familiar icon, it’s used judiciously to capture the icon’s essence and to create space, dimension, and direction in the composition.

Two linear illustrations on a white background. On the left, are a grey screen-shaped outline and a red document-shaped outline interconnected by the bordered lines of the shapes. On the right is a fat red pencil connected by a red looping line to the extended index finger of a folded hand drawn in black outline.
The line and loop changes in weight, direction, and dimension to support horizontal and vertical content.

Loops can be precise and formal (for small linear illustrations) or more casual and organic (for backgrounds). They can fit both horizontal and vertical space. They can be cropped to create foundation and balance at the base of a composition, or float above it as if the wind is taking them. Loops always follow a circular form, are never without the continuous line, and are defined by an overlapping cutout—a negative space that’s always the exact width of the stroke.

Two linear illustrations on a white background. On the left, are a grey screen-shaped outline and a red document-shaped outline interconnected by the bordered lines of the shapes. On the right is a fat red pencil connected by a red looping line to the extended index finger of a folded hand drawn in black outline.
On the left, connecting and aligning with a more formal line and loop and, on the right, building a narrative with a more expressive line and loop.

From basic shapes and lines... a hand

A human element was so removed from Document Cloud’s illustration language that the software felt perfunctory and unexpressive. The hand is at once a guide, a helper, and the human part in this visual story, and sits on the baseline of compositions to supply the weight and stability of a flat base.

Hands—made up of 27 bones, 27 joints, 34 muscles, more than 100 tendons and ligaments—have complex anatomy and complex movement and those intricacies required a crash course in study and experimentation. The familiar form was created by combining simple lines and geometric shapes. Later, more defined features were created by subtracting unnecessary elements from the composition while being careful to maintain proper proportions. The illustration was completed by connecting the lines and adding solid filled elements for support.

Two line drawings of the same hand on a white background. The one on the left is outlined in black and the one on the right is outlined in white and filled with black.
The hand is composed of simple lines and geometric shapes, and the subtraction of superfluous elements.

Changing the hand position and swapping workflow icons makes it possible to illustrate a range of topics and propositions despite there being only four hand styles—tapping, releasing, pointing, holding. The plan is to eventually create a library of hands, each useful in multiple narratives, and being exacting with how we build hand styles will help us scale the language without making it overly complicated or cumbersome.

Two linear illustrations, red on a white background. On the left, a red magnifying glass is connected by a looping line to a hand outlined in red with the extended index finger pushing a red button. On the right, a white checkmark in a red circle is connected by a looping line to a hand outlined in red, with the index finger extended and pushing a red button.
The versatility of the system is based on the modularity of the elements—the hand, the workflow icons, the changing line and loop—and the ability to switch and swap them as needed.

Using familiar workflow icons to build compositions

If the line is the thread, and the hand is the guide, the familiarity of the workflow icons (the checkmark, exclamation point, and settings gear) supply the visual connection to the products. Pulled from across Document Cloud, and used in both outline and filled styles, they are uniform and intentional at any size and in any location and can communicate multiple messages.

Two rows of four icons on a white background. Top row left to right: a magnifying glass outlined in black, two white chainlinks inside a black circle, a white exclamation mark in a black triangle, a white checkmark in a black circle. Bottom rowl left to right: a white plus sign in a black circle, a fat white pencil in a black circle, an up arrow in a black circle, a black gear icon.
The modifiers, selected from the more than 100 icons in Acrobat, create a new visual throughline between in-product, marketing, and tutorial content.

In large sizes (for uses like banners) the workflow icons are prominent and expressive and, since intent is communicated through the elements in each composition, they are never without the line and loop creating a connection between the hand and icon. When used at a small scale (on download pages), they’re accompanied only by the continuous line and loop.

Multiple linear illustrations on a white background. On the left, a red checkmark is connected by a looping line to a hand outlined in red with the extended index finger pushing a red button. On the right are three rows of three hand, looping line, and icon combinations in a similar style.
A sample library of narratives created from the four hand styles—tapping, releasing, pointing, holding.

The goal is for our illustration system to evolve so we end up with a library of elements that can be consistently scaled and expanded so it will always feel fresh and current.

Adding color to compositions

Colors were pulled from the Document Cloud product palette and broadened by tints from the new Spectrum color system. Leading with the vibrant red of Document Cloud—and the icon colors of Adobe Acrobat, Adobe Sign, and Adobe Scan—they can be mixed and matched to bring the brand to life while tethering information and visuals across product and marketing.

A minimal color chart with three columns. In the left column, from top to bottom are icons for Acrobat, Acrobat Scan, and Acrobat Sign. In the middle column, under the heading Primary/Secondary colors, are three color circles for each for the applications, from top to bottom: brick red, orange, pink; teal, blue, sky blue; purple, magenta, lavender. In the right column, under the heading Tertiary colors, are two color circles for each for the applications, from top to bottom: red and black; light blue and gray; purple and light gray.
The color system consists of primary colors pulled from Document Cloud products—Acrobat, Acrobat Scan, and Acrobat Sign—and secondary and tertiary colors (from Spectrum’s new palette) to keep the system fresh and versatile.

Intended to be paired with the primary colors, secondary tints are derived from each app’s primary color and the light secondary red. Tertiary colors are a blend of the Adobe Acrobat, Adobe Sign, and Adobe Scan primary colors with Document Cloud red. Primary colors are used for brand app icons and other brand-specific assets; secondary colors can be paired with any of the three products; tertiary colors should only be used with their associated products.

Three linear illustrations on a white background. On the left, a black document shaped outline is encircled by a red open-ended cloud outline ending in an arrow. In the middle is a document shaped outline with a red star inside it, connected by a red looping line to the extended index finger of a folded hand drawn in black outline. On the right, a red gear icon is connected to by a looping line to a hand outlined in red, with a finger extended and pushing a red button.
On the left, a linear illustration formed of a line and loop, and a workflow icon for use at small sizes. In the middle, an unfilled illustration for compositions where the focus needs to be on written content. And, on the right, a more expressive filled style that draws people into a narrative.

While the execution of Acrobat’s new illustration style is designed to vary in the app, on help pages, and in product marketing, all will be tethered by a unified system that relies on the flexibility of three simple components: a line and loop, hands, and workflow icons. It’s a graceful, versatile solution all made possible by an untying of Document Cloud’s iconic trefoil knot.

This project would not have been possible without the collaboration of Kyeung sub Yeom (senior experience designer, Document Cloud) whose extensive product knowledge and first draft of the concept identified the design problem and how it might be solved, and Julia Vaca (senior visual content designer, Learn & Help, Document Cloud) who helped design the foundation, and build out the details, of this unified system.

Header copy
Design your career at Adobe.
Button copy
View all jobs
Button link
/jobs