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.
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.
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.
Generated: March 3rd, 2023