Illustration

Introduction

Illustrations and icons can improve user comprehension and, when appropriate, inject friendliness and humanity. These guidelines are intended to help designers and all Atlassians use illustrations and icons effectively while maintaining consistent brand experience across user journeys and marketing touch points. Consistency matters because it builds on previous success which builds trust with our users.

Illustrations

Illustrations should be paired with content to aid in the user’s comprehension of that content or to emphasis a certain tone in your design. They can be used all across our user journeys from marketing to product. Illustrations support messaging, not the other way around. It is okay to be metaphorical or aspirational but it is critical to ensure a proper tone and voice when using illustrations. Be empathetic to what users are experiencing in the moment when using illustrations.

Size & shape

Create all illustrations on a 256px canvas.

Shapes are geometric rather than organic.

Geometric shapes are circles, rectangles, squares, triangles, etc. They have the clear edges achieved by using tools to create them.

Organic shapes have a natural look and a flowing and curving appearance and are typically irregular or asymmetrical. They are associated with things from the natural world, like plants and animals.

Illustration example showing size and shape

Stroke

In most cases, the stroke weight should be 4px. The stroke should scale with illustration.

Dotted line stroke can be used, but sparingly. Use a 8px dash and 6px spacing. Use mitered corners and butt cap ends and ensure that dashes are aligned to corners and path ends. For instance, a mobile device or an app icon might need to be more rounded to imply what it is.

In some cases, like subtle details, stroke color can be used between 10-30% opacity.

Detail elements do not use a stroke.

Illustration example showing use of strokes

Radius

Standard corner radius is 8px. However, corners can break the standard radius rule when needed for a specific context of use. For instance, an iPhone might need different corners than an Android device in order to differentiate.

Corner radius should scale up and down with illustration.

Illustration example showing usage of border radius

Shadow

Most objects that would cast a shadow in real life should include a shadow. Shadows can be standard or contextual to the illustration.

Standard shadow: Navy (#205081) ; Opacity: 20%; X offset: 0px, Y offset: 2px;

Contextual shadows should have the same color and opacity of the standard but can be placed where ever it makes the most sense for that particular illustration. See example.

Illustration example showing usage of shadow

Colors

Some of the colors used for illustration are more saturated than the ADG palette due to contrast issues against our navy blue. Please ensure that any critical information has accessible contrast levels.

Fill colors

Avoid using more than four accent colors in an illustration, excluding Navy and Grey.

In some cases, like subtle details and shadows, Navy can be used at a 20% or 10% opacity.

Stroke color

Stroke color should be Navy (#205081).

In some cases, like subtle details, stroke color can be used between 10-30% opacity.

Background color

Use illustrations on any color except Navy (#205081), as the stroke will not show up.

Illustration example showing primary, neutral and accented color palettes

Text & Logos

Represent greeked text with simple grouped horizontal lines – at least two lines per group.

Avoid using readable text in illustrations. However, when text must be included, use Circular Black, all caps, in Navy (#205081).

Use logo symbols only. Do not use full logo lockup with wordmark.

Colors

Atlassian symbol (Charlie): White (#FFFFFF) or Cyan (#59AFE1) depending on background color.

Product symbols: use Navy (#205081) or White (#FFFFFF) depending on background color.

Stroke

Do not use a stroke on text or logos.

Illustration example showing product logos Illustration example showing 'greeked' text and real text