Design system
Colours
Four colours for accent and coding, never for decoration; neutrals in light and dark.
- Yellow
#F7C600 - Cyan
#29BDEC - Lime
#C4D630 - Magenta
#E6007E
Light
Background #FFFFFF
Text #1C1E24
Secondary text #5C5E66
Surface #F4F4F5
Rule #E6E6E6
Dark
Background #141518
Text #ECECEE
Secondary text #A6A8B0
Surface #1F2127
Rule #2E3037
The background stays plain. Each colour codes a writing section or a family of skills; it is not there to decorate a page.
Accents
| Colour | Value | Token | Codes |
|---|---|---|---|
| Yellow | #F7C600 | --jaune | Entropy, highlight; foresight and systems thinking |
| Cyan | #29BDEC | --cyan | Entre-temps; design ops |
| Lime | #C4D630 | --lime | Portfolio; UX/UI design |
| Magenta | #E6007E | --magenta | Design infection; research and semiotics; quote banner |
Always in this order when they appear together: yellow, cyan, lime, magenta.
Neutrals
| Role | Token | Light | Dark |
|---|---|---|---|
| Background | --fond | #FFFFFF | #141518 |
| Text | --texte | #1C1E24 | #ECECEE |
| Secondary text | --doux | #5C5E66 | #A6A8B0 |
| Surface | --surface | #F4F4F5 | #1F2127 |
| Rule | --filet | #E6E6E6 | #2E3037 |
The site follows the device’s light or dark setting. The map of ideas stays on a white background in both cases: its line colours are designed for it.
Do: an accent colour on a small surface (dot, square, highlight); dark text on yellow, cyan and lime, white text on magenta.
Avoid: a coloured page background, a coloured rule or strip along the edge of a card or window, yellow, cyan or lime text on a white background (insufficient contrast), colour as the only carrier of meaning.