Base
| Primary font color | |
|---|---|
| Secondary font color | |
| Primary border color | |
| Secondary border color | |
| 1st neutral color | |
| 2nd neutral color | |
| 3rd neutral color | |
| 4th neutral color | |
Information
Color codes are also used to convey some information, such as operation state, problem severity, etc. Various references exist for this, such as:
- The design and evaluation of interactive systems – Chapter 12
- Microsoft's color meaning guidelines
- NASA's hierarchy of color usage guidelines
- Ubuntu's guidelines for web colours
The EPFL framework is based on these references and defines the following 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 | |
Themes
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:
| Name | 1st color | 2nd color | 3rd color | 4th color |
|---|---|---|---|---|
| EPFL | |
|
|
|
| ENAC | |
|
|
|
| SB | |
|
|
|
| STI | |
|
|
|
| IC | |
|
|
|
| SV | |
|
|
|
| CDM | |
|
|
|
| CDH | |
|
|
|
| INTER | |
|
|
|
| Associations | |
|
|
|
Theme classes
Each theme provides a set of classes to easily access the color palette:
| 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:
| 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 |