Design tokens

Design tokens are single units of design reusable in several parts of the website. They can be spaces, font sizes, lines, colors, font families. Basically, if it can't be divided into a smaller unit, it's probably a design token.


Editorial New Regular is for titles.

Inter is the default font for most texts.

IBM Plex Mono is for code blocks.


Spacings are used to determine space between elements. They can be used both in CSS margins and paddings.

This is a large margin/padding
This is a small margin/padding


Animations are used either to convey information or for styling reasons.

Glitch effect

The glitch effect is used on the website title. Its goal is to provide a feeling of strangeness and discomfort that contrasts with the slick design of the website.

Border Radius

Two styles of rounded corners, used mainly on buttons and forms.

Radius smallRadius medium


Colors are used for specific content of pages in correlation with black and white. They are balanced using the accessible palette tool to ensure they have the consistent lightness and contrast.

Colors should not be mixed in unrelated categories. Only the home page is allowed to use different colors. Colors are defined as custom elements in CSS using hex codes, as HSL format cannot be used in SVG files.

--black: #000000;
--white: #ffffff;
--grey: #eeeeee;
--grey-dark: #aaaaaa;
--grey-darker: #555555;
--grey-pitchblack: #222222;
--yellow: #f2d336;
--yellow-dark: #dfc130;
--yellow-darker: #98841f;
--teal: #70eba7;
--teal-dark: #5fc88f;
--teal-darker: #479e6d;
--pink: #ffadc9;
--pink-dark: #ff85ad;
--pink-darker: #d6245f;
--blue: #f37149;
--blue-dark: #dd5d36;
--blue-darker: #c93d13;
--red: #9094fe;
--red-dark: #767aef;
--red-darker: #595fd9;


Themes are how colors are organized and used semantically. New custom properties are used to determine which colors take which role depending of the parent class. The custom properties names are:


Each section of the website has its own icon illustrating its content. All icons are organized following these rules:

All icons consume colors defined in the themes.

Initially published: March 3rd, 2023