Main content

Branding

Βι¶ΉΤΌΕΔ sites are fully responsive. As a result, the branding for them needs to be too. When designing branding, you should consider three sizes: mobile, tablet and desktop.

Platform Screen Width (px)
Mobile 320 to 599 (from 240px to 320px it defaults to colours only, no images)
Tablet 600 to 1007
Desktop >1008

You will need to provide:

  • Three images for background (if in your design)
  • Three images for logo (if in your design)
  • Hex codes for page colours

Image Specifications

Background image

All background images must be either JPG or PNG.

You should save the images with a web profile. You can do this by selecting 'Save for Web & Devices' or similar. If you don't save this way, the colours will subtly change.

You need to provide three sizes:

Mobile: 600x104px

This is a banner that appears behind the logo or title.

Tablet: 1008x800+px

This image appears behind the main body of the page in tablet view.

There is no designated height as it should be as long as it needs to be to become a solid colour but it must be more than 800px and ideally no larger than 1200px.

If there is no tablet-specific design, we can use the desktop version although please bear in mind the above dimensions when designing the desktop branding.

Desktop: 1680x800+px

This image appears behind the main body of the page in desktop view.

There is no designated height as it should be as long as it needs to be to become a solid colour but it must be more than 800px and ideally no larger than 1200px.

Both tablet and desktop images must fade to a solid colour. You need to provide the hex code for the colour they fade to.

Logo

All logo files must be PNG with a transparent background.

Mobile: 200x40px

Width: We recommend 200px but you can use any width that is readable on a 240px screen.

Height: This should be 40px.

Tablet: 300px x banner height – logo offset from the top

Width: This is flexible but the design must fit at 600px with all the page furniture (e.g. network logos).

Height: 70px or 172px. The logo must fit inside the one being used and have some padding.

Desktop: 300px x banner height – logo offset from the top

Width: This is flexible but the design must work at 1008px with all the page furniture (e.g. network logos, radio on air panel etc.)

Height: 70px or 172px. The logo must fit inside the one being used and have some padding.

Hex Codes

As well as adding a logo and background image, we can control the colouring of the page. For this we need colour hex codes. .

We need the following:

  • Body background colour
  • Page background colour (this is the colour your background image has faded to)
  • Subtle colour
  • Page text colour
  • Page link colour
  • Page link hover colour
  • Highlight colour
  • Text colour
  • Link colour
  • Link hover colour
  • Secondary colour
  • Text colour
  • Link colour
  • Link hover colour
  • Base colour of masthead stripe
  • Masthead text colour

These colours need to be accessible. We use AA Standard. You can check your colours are accessible using a contrast checker like .

Branding Tool

All branding must be added to the Branding tool. You must then add the branding ID into the tool for your pages.

(Βι¶ΉΤΌΕΔ desktop certificate required)

Branding Example Pages

Quick Dimension Guide

Asset type Size (Width x Height in Pixels) Format
Mobile: Banner 600 x 104 PNG/JPG
Mobile: Logo 200 x 40 PNG
Tablet: Banner 1008 x 800+ (The height needs to be however long it takes to become a solid colour, but ideally no larger than 1200) PNG/JPG
Tablet: Logo 300 x height (max is masthead height) PNG
Desktop: Banner 1680 x 800+ (The height needs to be however long it takes to become a solid colour, but ideally no larger than 1200) PNG/JPG
Desktop: Logo 300 x height (max is masthead height) PNG

Tools