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 elements
    1. CERN toolbar at the top of the website
    2. CERN logo in the footer that links to https://home.cern
  2. Optional elements
    1. CERN loader (mandatory for websites under .CERN TLD)
    2. Use of the default web fonts and colour palette.

1. Mandatory elements

1.1. 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 and it should be implemented wherever possible.  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

1.2. Use the CERN logo correctly

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

  • 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 home website itself). The sub branding used as a logo should only ever be used in print.
  • The CERN logo should always be used in the footer of a website and be an active link to https://home.cern
  • The CERN logo should not be animated or have states (such as :hover or :focus) or scripted interactions.
  • The CERN logo may be included as a background image, provided that the element is a link to https://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.

2. Optional elements

2.1. Use of the CERN loader (mandatory for websites under the .CERN TLD)

The CERN loader provides the CERN accelerator-style loader and it is useful for big pages with long loading times. You can enable it in any Drupal website. It is provided by the central infrastructure and you can find it under the Extend menu of any Drupal website.

Although the CERN loader is optional for the centrally managed websites, it is mandatory for all the websites under the .CERN TLD (e.g. https://home.cern, https://opendays.cern e.t.c.).

2.2. Use of the default web fonts and colour palette.

The two used web fonts are Source Sans Pro and Open Sans. More information here.

Information regarding the recommended colour palette for the websites can be found here.

3. Drupal websites

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 CERN home website: both share the CERN Base theme and CERN Components 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 CERN Web Services website. Training on site-building using Drupal is available via the learning hub website. The Drupal community at CERN is coordinated via the Drupal Community Forum and Drupal tools website.

4. non-Drupal websites

Information on how to implement these elements in non-Drupal websites are available on Webtools website under the asset library section.

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 CERN web team.