Illustation anatomy

Illustrations are based on the https://www.humaaans.com/ library and customised with business.gov.au colours and background elements.

Illustrations consist of three layers, background content, background fill and background lines.

Colour use

Primary content (no outlines, solid fill in various colours).

Approved colours

#708DAF

#96B7DF

#B3CBE8

#629D62

#85CB85

#A0D1A0

#EDC95A

#FFD964

#FFE491

#CC7A29

#E88A2D

#F1B981

#7468B4

#9183D8

#B1A8E3

#2E3E5A

#788295

#ABB1BD

#E4E6EA

#B28B67

#EFC6A1

Background fill (no outlines, solid fill in teal).

Approved colours

#BFE2E2

Background lines (2pt line thickness, no fill).

Approved colours

#5AB3B3

Style rules

The following style rules are used to ensure a consistent look and feel across the site:

  • Only colours in the BGA palette are used in the illustrations (refer to approved colours above).
  • The default illustration size is 400 x 320px. At this size background line weights are 2px. Line weights should scale with the illustration when displayed at a larger or smaller sizes.
  • Lines have rounded corners and endpoints.
  • Illustrations should not be too complicated, a few simple lines is preferred over a high-level of detail.
  • When people are included they do not have faces.
  • Words should not be included in illustrations unless they are part of the picture.

Content and tone

The illustration style for business.gov.au is simple and refined. Illustrations help lighten the tone of the site and make the pages feel more colourful and friendly.

Illustrations tell a positive story, rather than using negative or emotive imagery.

The primary content of illustrations can be either people or object based.

Illustrations should only display objects or situations that belong together. The background elements surrounding the primary content should depict a landscape or objects that would naturally be seen with the core subject matter.

Call to action toast notification

Pops up like cooked bread in a toaster.

Toasts can be left aligned or centered depending on the page context.

Toast notification

Pops up like cooked bread in a toaster.

Toasts can be left aligned or centered depending on the page context.

Changes to this contract are being autosaved.