Elements

EPFL Web styleguide

Dive in

The following pages will introduce you to the styleguide and explain how you can use it.

3 Geometric shapes that inspired the Design Principles

Design principles

Guiding principles for our design decisions
Read to play with Elements?

How to start

A step-by-step guide to start using Elements

Visual design

Elements is about digital communication and design. Here is visual guidance for our styleguide.

EPFL corporate branding is at the heart of the styleguide

Brand Identity

EPFL logo, brand guidelines and how to use them
Text is 95% of what we see online: use typography properly, please!

Typography

Everything you need to know about setting up text
Icons and pictograms: symbols that give meaning to certain actions

Iconography

On the usage of icons and the available pictograms

Preview of EPFL color palette: 8 colors Color palette

Accessibility

Please read about the required accessibility recommendations.

A human silhouette with open arms

Global Accessibility recommendations

Information and rules to follow regarding accessibility (a11y)

Reports

Set the necessary scripts to analyse the audience's activity on your site.

Site Analytics

Information and howto to start generating reports

💼 Legal obligation

Legal obligations on your site

Cookie consent 🍪

By using the styleguide, your website complies with the European cookie law by informing users that your site has cookies.

Contribute

Elements is Open Source. Help us make the project better:

Contribution 🤝

Guidelines for contributing to Elements (design + code + documentation)

Feedback and support

A dedicated page to help you with new requests:

Support and requests ☝️