Guidelines for CERN websites

CERN’s web presence should feel connected, consistent and trusted. In order to help with this, observe the following guidelines:

  1. Mandatory: use the CERN logo correctly
  2. Optional: implement the CERN toolbar in the standard way

1. Guideline: use the CERN logo correctly

All official CERN websites should use the CERN logo, with the following conditions:

  • The CERN logo should always be an active link to http://home.cern
  • The CERN logo should not be animated or have states (such as :hover or :focus) or scripted interactions.
  • On tablets and larger screens the CERN logo must not appear at the top left of the viewport (the logo may only appear at the top left on the core CERN website).
  • The CERN logo may be included as a background image, provided that the element is a link to http://home.cern. Note that background images are ignored when web pages are printed.
  • The logo should be no less than 60px wide, and its correct proportions must be respected.
  • Observe the general guidelines for use of the CERN logo, such as minimum spacing and colour restrictions
  • The CERN logo may be omitted from websites destined to hand-held devices

2. Recommendation: use the CERN toolbar in the standard way

The CERN toolbar is a key branding element that identifies a website as belonging to the CERN web. It should be implemented wherever possible on official websites.  Its implementation must not vary from the standard. The CERN toolbar provides:

  • A link to the CERN homepage - http://home.cern
  • A link to sign in via CERN's single sign on service (plus other account-related functions for authenticated users)
  • A link to the directory

3. Recommended implementations

a. Drupal

Websites created on the CERN Drupal infrastructure comply fully with these guidelines provided that they:

  • use the 'cern' theme
  • have the 'CERN toolbar' module enabled

Both of these are enabled by default in new CERN Drupal websites.

The 'cern' theme shares many design elements with the new core CERN website: both share the 'cern_base' theme that determine common elements such as typography, grids and breakpoints for a variety of viewport sizes.

Creation of a new Drupal website can be requested by any CERN primary account holder via the service portal. Training on site-building using Drupal is available via the technical training catalogue. The Drupal community at CERN is coordinated via the Entice initiative.

4. Examples

Example 1: correct use of the logo and toolbar

Correct use of both the CERN logo and the toolbar

This screenshot shows correct use of both the CERN logo and the CERN toolbar. This has been implemented with the standard CERN Drupal installation.


Example 2: correct use of the logo, without toolbar

This screenshot shows correct use of the CERN logo. The CERN toolbar is not implemented in this example, which is alright. If the CERN toolbar cannot be implemented according to standard it should not be used at all.


Example 3: incorrect use of the CERN toolbar

In this example the CERN toolbar has been customised with icons to the right-hand side. This is not permitted - the CERN toolbar should only be implemented in the standard way. Any other application toolbars should not look like the CERN toolbar as this breaks patterns that users become familiar with.


Example 4: incorrect use of the badge logo

In this example the CERN badge logo has been used on a background that is grey. The badge logo may only be used on a plain white background. Similarly, the outline logo must not be used in CERN blue on backgrounds that are not white (other examples on this page show the CERN outline logo being used in grey, which is fine).


Example 5: incorrect use of CERN sub branding

The sub branding used as a logo in the header should only ever be used in print. In this instance it looks like the CERN logo, but when clicked it takes the user not to http://home.cern but to another website. Whether used alone or in a sub-branding element, the CERN logo should never be used at the top left of a web page or in the header of a website (except for the CERN core website itself).

5. Help and resources

A number of initiatives are under way aimed at supporting developers and site managers of CERN websites to align towards the creation of a common web experience, including:

If you are setting out with a new web project, please refer to the recommendations from the communications group's web team.

You are here