Services with their own look and feel

Overview

Publications Office websites and applications are characterised by a unified user interface, which includes the use of a defined colour palette, header, footer, fonts and other components.

Below is an example of a standard header.

However, certain service’s websites have a special need to convey their own look and feel while still maintaining consistency with the Publications Office visual identity. Such is the case for Tenders Electronic Daily (TED), eNotices and EUR-Lex, among others.

This customisation may be done by adapting some key components and elements.

Note: This process is currently ongoing and will continue to be enriched by the input and collaboration of Publications Office services.

Integrating a service’s visual identity

• using service-specific colours:
• in the navigation bar,
• in the H1, main headings and, sparingly, as accent colours;
• implementing customised navigation below the header;
• replacing the Publications Office logo with the service’s logo in the header;
• customising content in the footer.

Examples

There are three options for customisation.

Option 1

The service’s logo can be added, and its colour strip inserted underneath the Publications Office main navigation. The service colour (which must be compliant with Web Content Accessibility Guidelines (WCAG) level AA) can be applied to main headings and used as an accent colour. Use the service colour in headings sparingly.

Option 2

Using the service’s logo and colour strip. The service colour (compliant with WCAG level AA) applied to main headings can also be used as an accent colour. This option does not include the Publications Office main navigation, so services can add their own navigation bar below the header. Use the service colour in headings sparingly.

Option 3

Using the service logo and putting the main navigation in the service colour. The service colour (compliant with WCAG level AA) can be used as an accent colour and can be applied to headings. Use the service colour in headings and accents sparingly.

Accessible service colours

Navigation components, text and any other elements that need to be clearly perceived in order to understand and use a web page must meet Web Content Accessibility Guidelines (WCAG) level AA) contrast requirements.

The examples below show colours used by services for a distinct look and feel next to their accessible counterparts.

Use the WebAIM contrast checker to verify whether your service colour is accessible.

If your service’s accessible colour is not listed, please contact us (OPDL-OP-PORTAL-CONTENT-MANAGEMENT@publications.europa.eu).