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.

Fonts

Editorial New Regular is for titles.

Inter is the default font for most texts.

IBM Plex Mono is for code blocks.

Spacings

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

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

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.

Teal is for projects
Yellow is for journal
Red is for the portfolio
Blue is for knowledge
Purple and pink are for personal

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

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:

--text
--background
--accent
--background-dark
--border

Icons

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

color is the individual
white is the unknow
black is the action

All icons consume colors defined in the themes.

Initially published: March 3rd, 2023