Toggle navigation
Home
/
Design System
/
Image Style Guide
/
Photography and graphics guidelines
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
Live Customer Service