Image Style Guide

Photography and graphics guidelines

 

 

Photography Guidelines

  • Style: Care should be taken to use photography that is on brand and professionally shot. Use interestingly cropped photography that; 1. Tells the story of our people; 2. Be client focussed.
  • File Size: Use file dimensions shown below. Make sure to optimise imagery before uploading to website.
  • File Type: JPG

 


Infographics and illustrations guidelines

  • Style: Infographics and illustrations should use the simplified colour palette of the website. Dominant colours should be blue, grey and white. Use additional palette colours Apple, Peppermint and Mauve in infographics only (but use sparingly). Consider mobile users when designing infographics.
  • File size: Use file dimensions shown below. Make sure to optimise imagery before uploading to website.
  • File Type: PNG or SVG

 

 

 


Type 1 

 

 

Specification:

  • Size: 600x338px
  • Canvas: transparent background
  • Aspect ratio: 16:9
  • File Type: JPG for photography. PNG or SVG for graphics.

Use for content blocks:

  • Name: CB Card Photo
  • Name: CB Cards Text Overlay
  • Name: CB Snippet
  • Name: CB Featured Video

Example usage:

  • Example below shows image used in content block

 

 


Type 2 

 

 

Specification:

  • Size: 600x450px
  • Canvas: transparent background if used on grey background
  • Aspect ratio: 4:3
  • File Type: JPG for photography. PNG for graphics.

Use for content blocks:

  • Name: CB Featured Content with Image

Example usage:

  • Example below shows image used in content block

 

 


Type 3 (Header for Landing pages)

 

 

Specification:

  • Size: 1600x450px
  • File Type: JPG for photography. PNG for graphics
  • Guidelines: Do not include text in header image that will clutter area. Keep focal area within green lines (1300px)

Use for content blocks:

  • Name: CB Header Landing

Example usage:

  • Example below shows image used in content block

 

 


Type 4 (Header for inner pages)

 

 

Specification:

  • Size: 1600x250px
  • File Type: JPG for photography. PNG for graphics
  • Guidelines: Do not include text in header image that will clutter area. Keep focal area within green lines (1300px)

Use for content blocks:

  • Name: CB Header Inner

Example usage:

  • Example below shows image used in content block

 

 


Type 5 (Team Profiles)

 

 

Specification:

  • Size: 600x600px
  • File Type: JPG

Use for content blocks:

  • Name: CB Team Block

Example usage:

  • Example below shows image used in content block

 

 


Type 6 (Large images for teasers)

 

 

Specification:

  • Size: 1200x1200px
  • File Type: JPG for photos. PNG for graphics

Use for content blocks:

  • Name: CB Teaser Content With Icons

Example usage:

  • Example below shows image used in content block

 

 


Type 7 (Hero images for home teaser)

 

 

Specification:

  • Size: 1600x550px
  • File Type: JPG for photos. PNG for graphics
  • Guidelines: Do not include text in header image that will clutter area. Keep focal area within green lines (1300px)

Use for content blocks:

  • Name: CB Teaser Home

Example usage:

  • Example below shows image used in content block