Main color system
Primary font color
Secondary font color
Primary border color
Secondary border color
1st neutral color
2nd neutral color
3rd neutral color
4th neutral color


Color codes are also used to convey some information, such as operation state, problem severity, etc. Various references exist for this, such as:

The EPFL framework is based on these references and defines the following color codes:

Information color codes
State Danger Caution Non-safe Safe Neutral
Error Error Warning Info Success Message
Severity Critical High Low Normal Medium
Operation Stop Start Continue/Finish More


The EPFL framework has the particularity to exist in various themes to better identify the different domains (mainly schools). The color palette is defined by the head includes that will load the corresponding style sheet.

The following table goes over these various colors:

Themes color palette
Name 1st color 2nd color 3rd color 4th color

Theme classes

Each theme provides a set of classes to easily access the color palette:

Themes CSS classes
Palette Foreground class Background class
Current theme local-color1 local-bg-color1
local-color2 local-bg-color2
local-color3 local-bg-color3
local-color4 local-bg-color4
Neutral theme neutral-color1 neutral-bg-color1
neutral-color2 neutral-bg-color2
neutral-color3 neutral-bg-color3
neutral-color4 neutral-bg-color4
Hashed Background   hashed-bg

If you wish to use the color of another theme in one of the pages, you can use one of the following classes:

Other Themes CSS classes
Theme Foreground class Background class
EPFL epfl-color epfl-bg-color
epfl-color2 epfl-bg-color2
ENAC enac-color enac-bg-color
SB sb-color sb-bg-color
STI sti-color sti-bg-color
IC ic-color ic-bg-color
SV sv-color sv-bg-color
CDM cdm-color cdm-bg-color
CDH cdh-color cdh-bg-color
INTER inter-color inter-bg-color
Associations associations-color associations-bg-color