Added all new colors / typo

src/front/Components/DesignSystem/CheckBox/index.tsx

@@ -37,7 +37,7 @@ export default class CheckBox extends React.Component<IProps, IState> {
 
 	public override render(): JSX.Element {
 		return (
-			<Typography typo={ITypo.TEXT_MD_ERROR} color={ITypoColor.COLOR_GENERIC_BLACK}>
+			<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_ERROR_600}>
 				<label className={classNames(classes["root"], this.props.disabled && classes["disabled"])}>
 					<input
 						type="checkbox"

src/front/Components/DesignSystem/FolderBoxInformation/index.tsx

@@ -6,7 +6,7 @@ import Image from "next/image";
 import Link from "next/link";
 import React from "react";
 
-import Typography, { ITypo } from "../Typography";
+import Typography, { ITypo, ITypoColor } from "../Typography";
 import classes from "./classes.module.scss";
 import { AnchorStatus } from "@Front/Components/Layouts/Folder/FolderInformation";
 import Note from "le-coffre-resources/dist/Customer/Note";
@@ -70,21 +70,27 @@ export default function FolderBoxInformation(props: IProps) {
 			case EFolderBoxInformationType.DESCRIPTION:
 				return (
 					<div className={classes["text-container"]}>
-						<Typography typo={ITypo.TEXT_MD_GREY}>Note dossier</Typography>
+						<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
+							Note dossier
+						</Typography>
 						<Typography typo={ITypo.TEXT_LG_REGULAR}>{folder.description ?? ""}</Typography>
 					</div>
 				);
 			case EFolderBoxInformationType.NOTE:
 				return (
 					<div className={classes["text-container"]}>
-						<Typography typo={ITypo.TEXT_MD_GREY}>Note client</Typography>
+						<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
+							Note client
+						</Typography>
 						<Typography typo={ITypo.TEXT_LG_REGULAR}>{note?.content ?? ""}</Typography>
 					</div>
 				);
 			case EFolderBoxInformationType.ARCHIVED_DESCRIPTION:
 				return (
 					<div className={classes["text-container"]}>
-						<Typography typo={ITypo.TEXT_MD_GREY}>Note archive</Typography>
+						<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
+							Note archive
+						</Typography>
 						<Typography typo={ITypo.TEXT_LG_REGULAR}>{folder.archived_description ?? ""}</Typography>
 					</div>
 				);
@@ -92,19 +98,27 @@ export default function FolderBoxInformation(props: IProps) {
 				return (
 					<>
 						<div className={classes["text-container"]}>
-							<Typography typo={ITypo.TEXT_MD_GREY}>Intitulé du dossier</Typography>
+							<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
+								Intitulé du dossier
+							</Typography>
 							<Typography typo={ITypo.TEXT_LG_REGULAR}>{folder.name ?? ""}</Typography>
 						</div>
 						<div className={classes["text-container"]}>
-							<Typography typo={ITypo.TEXT_MD_GREY}>Numéro de dossier</Typography>
+							<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
+								Numéro de dossier
+							</Typography>
 							<Typography typo={ITypo.TEXT_LG_REGULAR}>{folder.folder_number ?? ""}</Typography>
 						</div>
 						<div className={classes["text-container"]}>
-							<Typography typo={ITypo.TEXT_MD_GREY}>Type d'acte</Typography>
+							<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
+								Type d'acte
+							</Typography>
 							<Typography typo={ITypo.TEXT_LG_REGULAR}>{folder.deed?.deed_type?.name ?? ""}</Typography>
 						</div>
 						<div className={classes["text-container"]}>
-							<Typography typo={ITypo.TEXT_MD_GREY}>Ouverture du dossier</Typography>
+							<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
+								Ouverture du dossier
+							</Typography>
 							<Typography typo={ITypo.TEXT_LG_REGULAR}>{formatDate(folder.created_at)}</Typography>
 						</div>
 					</>

src/front/Components/DesignSystem/Form/DateField/index.tsx

@@ -20,7 +20,7 @@ export default class DateField extends BaseField<IProps> {
 	public override render(): ReactNode {
 		const value = this.state.value ?? "";
 		return (
-			<Typography typo={ITypo.TEXT_MD_GREY} color={ITypoColor.COLOR_NEUTRAL_500}>
+			<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
 				<div className={classes["root"]} data-is-errored={this.hasError().toString()}>
 					<input
 						onChange={this.onChange}

src/front/Components/DesignSystem/Form/SelectField/index.tsx

@@ -88,7 +88,7 @@ class SelectFieldClass extends React.Component<IPropsClass, IState> {
 							)}
 							{!selectedOption && (
 								<div className={classes["placeholder"]} data-open={(selectedOption ? true : false).toString()}>
-									<Typography typo={ITypo.TEXT_MD_GREY}>
+									<Typography typo={ITypo.TEXT_MD_REGULAR}>
 										<span className={classes["text"]}>{this.props.placeholder ?? ""}</span>
 									</Typography>
 								</div>

src/front/Components/DesignSystem/Form/TextField/index.tsx

@@ -21,7 +21,7 @@ export default class TextField extends BaseField<IProps> {
 	public override render(): ReactNode {
 		const value = this.state.value ?? "";
 		return (
-			<Typography typo={ITypo.TEXT_MD_GREY} color={ITypoColor.COLOR_NEUTRAL_500}>
+			<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
 				<div className={classes["root"]} data-is-errored={this.hasError().toString()}>
 					<input
 						onChange={this.onChange}

src/front/Components/DesignSystem/Form/TextareaField/index.tsx

@@ -17,7 +17,7 @@ export default class TextAreaField extends BaseField<IProps> {
 	public override render(): ReactNode {
 		const value = this.state.value ?? "";
 		return (
-			<Typography typo={ITypo.TEXT_MD_GREY} color={ITypoColor.COLOR_NEUTRAL_500}>
+			<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
 				<div className={classes["root"]} data-is-errored={this.hasError().toString()}>
 					<textarea
 						name={this.props.name}

src/front/Components/DesignSystem/Header/BurgerMenu/BurgerModal/BurgerModalSubmenu/index.tsx

@@ -5,7 +5,7 @@ import classes from "./classes.module.scss";
 import { IAppRule } from "@Front/Api/Entities/rule";
 import Rules, { RulesMode } from "@Front/Components/Elements/Rules";
 import { IHeaderLinkProps } from "../../../HeaderLink";
-import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
+import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
 import HeaderSubmenuLink from "../../../HeaderSubmenu/HeaderSubmenuLink";
 import useToggle from "@Front/Hooks/useToggle";
 import { ChevronDownIcon, ChevronUpIcon } from "@heroicons/react/24/outline";
@@ -34,7 +34,9 @@ export default function HeaderSubmenu(props: IProps) {
 			<div className={classes["container"]}>
 				<div className={classNames(classes["root"], (isActive || isSubmenuOpened) && classes["active"])}>
 					<div className={classes["content"]} onClick={toggle}>
-						<Typography typo={isActive || isSubmenuOpened ? ITypo.TEXT_LG_SEMIBOLD : ITypo.TEXT_LG_GREY}>
+						<Typography
+							typo={isActive || isSubmenuOpened ? ITypo.TEXT_LG_SEMIBOLD : ITypo.TEXT_LG_REGULAR}
+							color={isActive || isSubmenuOpened ? ITypoColor.COLOR_NEUTRAL_950 : ITypoColor.COLOR_NEUTRAL_500}>
 							{props.text}
 						</Typography>
 						{isSubmenuOpened ? <ChevronUpIcon height="20" width="20" /> : <ChevronDownIcon height="20" width="20" />}

src/front/Components/DesignSystem/Header/HeaderLink/index.tsx

@@ -3,7 +3,7 @@ import Link from "next/link";
 import { useRouter } from "next/router";
 import React, { useEffect } from "react";
 
-import Typography, { ITypo } from "../../Typography";
+import Typography, { ITypo, ITypoColor } from "../../Typography";
 import classes from "./classes.module.scss";
 import useHoverable from "@Front/Hooks/useHoverable";
 
@@ -37,7 +37,11 @@ export default function HeaderLink(props: IHeaderLinkProps) {
 				onMouseEnter={handleMouseEnter}
 				onMouseLeave={handleMouseLeave}>
 				<div className={classes["content"]}>
-					<Typography typo={isActive || isHovered ? ITypo.TEXT_LG_SEMIBOLD : ITypo.TEXT_LG_GREY}>{props.text}</Typography>
+					<Typography
+						typo={isActive || isHovered ? ITypo.TEXT_LG_SEMIBOLD : ITypo.TEXT_LG_REGULAR}
+						color={isActive || isHovered ? ITypoColor.COLOR_NEUTRAL_950 : ITypoColor.COLOR_NEUTRAL_500}>
+						{props.text}
+					</Typography>
 				</div>
 				<div className={classes["underline"]} data-active={(isActive || isHovered).toString()} />
 			</Link>
@@ -46,7 +50,9 @@ export default function HeaderLink(props: IHeaderLinkProps) {
 		return (
 			<div className={classNames(classes["root"], classes["desactivated"])}>
 				<div className={classes["content"]}>
-					<Typography typo={ITypo.TEXT_LG_GREY}>{props.text}</Typography>
+					<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
+						{props.text}
+					</Typography>
 				</div>
 			</div>
 		);

src/front/Components/DesignSystem/Header/HeaderSubmenu/HeaderSubmenuLink/index.tsx

@@ -2,7 +2,7 @@ import Link from "next/link";
 import { useRouter } from "next/router";
 import React, { useEffect } from "react";
 
-import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
+import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
 import useHoverable from "@Front/Hooks/useHoverable";
 
 type IHeaderLinkProps = {
@@ -29,7 +29,11 @@ export default function HeaderSubmenuLink(props: IHeaderLinkProps) {
 
 	return (
 		<Link href={props.path} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
-			<Typography typo={isActive || isHovered ? ITypo.TEXT_LG_SEMIBOLD : ITypo.TEXT_LG_GREY}>{props.text}</Typography>
+			<Typography
+				typo={isActive || isHovered ? ITypo.TEXT_LG_SEMIBOLD : ITypo.TEXT_LG_REGULAR}
+				color={isActive || isHovered ? ITypoColor.COLOR_NEUTRAL_950 : ITypoColor.COLOR_NEUTRAL_500}>
+				{props.text}
+			</Typography>
 		</Link>
 	);
 }

src/front/Components/DesignSystem/Header/HeaderSubmenu/index.tsx

@@ -3,7 +3,7 @@ import { useRouter } from "next/router";
 import React, { useEffect, useState } from "react";
 import { IHeaderLinkProps } from "../HeaderLink";
 
-import Typography, { ITypo } from "../../Typography";
+import Typography, { ITypo, ITypoColor } from "../../Typography";
 import classes from "./classes.module.scss";
 import useHoverable from "@Front/Hooks/useHoverable";
 import HeaderSubmenuLink from "./HeaderSubmenuLink";
@@ -34,7 +34,11 @@ export default function HeaderSubmenu(props: IProps) {
 			<div className={classes["container"]} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
 				<div className={classNames(classes["root"], (isActive || isHovered) && classes["active"])}>
 					<div className={classes["content"]}>
-						<Typography typo={isActive || isHovered ? ITypo.TEXT_LG_SEMIBOLD : ITypo.TEXT_LG_GREY}>{props.text}</Typography>
+						<Typography
+							typo={isActive || isHovered ? ITypo.TEXT_LG_SEMIBOLD : ITypo.TEXT_LG_REGULAR}
+							color={isActive || isHovered ? ITypoColor.COLOR_NEUTRAL_950 : ITypoColor.COLOR_NEUTRAL_500}>
+							{props.text}
+						</Typography>
 					</div>
 					<div className={classes["underline"]} data-active={(isActive || isHovered).toString()} />
 					{isHovered && (

src/front/Components/DesignSystem/Header/NavigationLink/index.tsx

@@ -3,7 +3,7 @@ import classes from "./classes.module.scss";
 import Link from "next/link";
 import classNames from "classnames";
 import { useRouter } from "next/router";
-import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
+import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
 
 type IProps = {
 	text: string | JSX.Element;
@@ -29,7 +29,11 @@ class NavigationLinkClass extends React.Component<IPropsClass, IStateClass> {
 				onClick={this.props.onClick}
 				target={this.props.target}>
 				<div className={classes["content"]}>
-					<Typography typo={this.props.isActive ? ITypo.TEXT_LG_SEMIBOLD : ITypo.TEXT_LG_GREY}>{this.props.text}</Typography>
+					<Typography
+						typo={this.props.isActive ? ITypo.TEXT_LG_SEMIBOLD : ITypo.TEXT_LG_REGULAR}
+						color={this.props.isActive ? ITypoColor.COLOR_NEUTRAL_950 : ITypoColor.COLOR_NEUTRAL_500}>
+						{this.props.text}
+					</Typography>
 				</div>
 			</Link>
 		);

src/front/Components/DesignSystem/LogOutButton/index.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import Image from "next/image";
 import DisconnectIcon from "@Assets/Icons/disconnect.svg";
 import classes from "./classes.module.scss";
-import Typography, { ITypo } from "../Typography";
+import Typography, { ITypo, ITypoColor } from "../Typography";
 import { useRouter } from "next/router";
 import UserStore from "@Front/Stores/UserStore";
 import { FrontendVariables } from "@Front/Config/VariablesFront";
@@ -18,7 +18,9 @@ export default function LogOut() {
 
 	return (
 		<div className={classes["root"]} onClick={disconnect}>
-			<Typography typo={ITypo.TEXT_LG_GREY}>Déconnexion</Typography>
+			<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
+				Déconnexion
+			</Typography>
 			<Image src={DisconnectIcon} className={classes["disconnect-icon"]} alt="disconnect" />
 		</div>
 	);

src/front/Components/DesignSystem/MultiSelect/index.tsx

@@ -55,7 +55,9 @@ export default class MultiSelect extends React.Component<IProps, IState> {
 						<div
 							className={classes["placeholder"]}
 							data-selected={(this.state.isFocused || this.state.selectedOptions.length >= 1).toString()}>
-							<Typography typo={ITypo.TEXT_MD_GREY}>{this.props.placeholder}</Typography>
+							<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
+								{this.props.placeholder}
+							</Typography>
 						</div>
 					)}
 					<div className={classes["input-container"]}>

src/front/Components/DesignSystem/Newsletter/index.tsx

@@ -78,7 +78,7 @@ export default class Newsletter extends React.Component<IProps, IState> {
 								</Typography>
 								{this.state.errorMessage && (
 									<div>
-										<Typography typo={ITypo.TEXT_MD_ERROR} color={ITypoColor.COLOR_ERROR_600}>
+										<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_ERROR_600}>
 											{this.state.errorMessage}
 										</Typography>
 									</div>

src/front/Components/DesignSystem/RadioBox/index.tsx

@@ -21,7 +21,7 @@ export default class RadioBox extends React.Component<IProps> {
 	};
 	public override render(): JSX.Element {
 		return (
-			<Typography typo={ITypo.TEXT_LG_ERROR} color={ITypoColor.COLOR_GENERIC_BLACK}>
+			<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_GENERIC_BLACK}>
 				<label className={classes["root"]}>
 					<input
 						type="radio"

src/front/Components/DesignSystem/SearchBar/index.tsx

@@ -2,7 +2,7 @@ import LoopIcon from "@Assets/Icons/loop.svg";
 import Image from "next/image";
 import React from "react";
 
-import Typography, { ITypo } from "../Typography";
+import Typography, { ITypo, ITypoColor } from "../Typography";
 import classes from "./classes.module.scss";
 
 type IProps = {
@@ -32,7 +32,7 @@ export default class SearchBar extends React.Component<IProps, IState> {
 			<div className={classes["root"]}>
 				<Image src={LoopIcon} alt="Loop icon" />
 				{!this.state.hasValue && (
-					<Typography typo={ITypo.TEXT_LG_ERROR}>
+					<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_ERROR_600}>
 						<div className={classes["fake-placeholder"]}>{this.props.placeholder}</div>
 					</Typography>
 				)}

src/front/Components/DesignSystem/Switch/index.tsx

@@ -28,7 +28,7 @@ export default function Switch({ onChange, checked, label, disabled }: IProps) {
 					<div className={classes["round"]} />
 				</div>
 			</div>
-			<Typography typo={ITypo.TEXT_MD_ERROR} color={ITypoColor.COLOR_GENERIC_BLACK}>
+			<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_GENERIC_BLACK}>
 				{label}
 			</Typography>
 		</div>

src/front/Components/DesignSystem/Typography/classes.module.scss

@@ -2,14 +2,41 @@
 @import "@Themes/modes.scss";
 
 .root {
-	color: $color-generic-black;
+	color: $color-neutral-950;
 	vertical-align: center;
 	font-family: "Poppins", sans-serif;
+
+	//Displays
 	&.display-large {
 		font-style: normal;
 		font-weight: 600;
 		font-size: 50px;
 		line-height: 75px;
+		letter-spacing: -2%;
+
+		@media (max-width: $screen-m) {
+			font-size: 48px;
+			line-height: 72px;
+		}
+	}
+	&.display-medium {
+		font-style: normal;
+		font-weight: 600;
+		font-size: 48px;
+		line-height: 72px;
+		letter-spacing: -2%;
+
+		@media (max-width: $screen-m) {
+			font-size: 48px;
+			line-height: 72px;
+		}
+	}
+	&.display-small {
+		font-style: normal;
+		font-weight: 600;
+		font-size: 44px;
+		line-height: 66px;
+		letter-spacing: -2%;
 
 		@media (max-width: $screen-m) {
 			font-size: 48px;
@@ -17,170 +44,237 @@
 		}
 	}
 
+	//Titles
 	&.title-h1 {
 		font-style: normal;
 		font-weight: 600;
 		font-size: 40px;
 		line-height: 60px;
+		letter-spacing: -2%;
+	}
+	&.title-h2 {
+		font-style: normal;
+		font-weight: 400;
+		font-size: 36px;
+		line-height: 54px;
+		letter-spacing: -2%;
 	}
-
 	&.title-h3 {
 		font-style: normal;
 		font-weight: 300;
 		font-size: 32px;
 		line-height: 48px;
+		letter-spacing: -2%;
+	}
+	&.title-h4 {
+		font-style: normal;
+		font-weight: 600;
+		font-size: 28px;
+		line-height: 42px;
+		letter-spacing: -2%;
 	}
-
 	&.title-h5 {
 		font-style: normal;
 		font-weight: 400;
 		font-size: 24px;
 		line-height: 36px;
-		color: var(--color-primary-500);
+		letter-spacing: -2%;
+	}
+	&.title-h6 {
+		font-style: normal;
+		font-weight: 400;
+		font-size: 20px;
+		line-height: 30px;
+		letter-spacing: -2%;
 	}
 
+	//Text large
+	&.text-lg-bold {
+		font-style: normal;
+		font-weight: 700;
+		font-size: 18px;
+		line-height: 27px;
+		letter-spacing: 0.5%;
+	}
 	&.text-lg-semibold {
 		font-style: normal;
 		font-weight: 600;
 		font-size: 18px;
-		line-height: 22px;
+		line-height: 27px;
-		letter-spacing: 0.5px;
+		letter-spacing: 0.5%;
 	}
-
 	&.text-lg-regular {
 		font-style: normal;
 		font-weight: 400;
 		font-size: 18px;
 		line-height: 27px;
-		letter-spacing: 0.5px;
+		letter-spacing: 0.5%;
 	}
-
 	&.text-lg-uppercase {
 		font-style: normal;
 		font-weight: 400;
 		font-size: 18px;
 		line-height: 27px;
-		letter-spacing: 0.5px;
+		letter-spacing: 0.5%;
 		text-transform: uppercase;
 	}
-
+	&.text-lg-light {
-	&.text-lg-grey {
-		color: $color-neutral-500;
 		font-style: normal;
-		font-weight: 400;
+		font-weight: 300;
 		font-size: 18px;
 		line-height: 27px;
-		letter-spacing: 0.5px;
+		letter-spacing: 0.5%;
 	}
 
-	&.text-lg-error {
+	//Text medium
-		color: $color-error-600;
+	&.text-md-bold {
 		font-style: normal;
-		font-weight: 400;
+		font-weight: 700;
-		font-size: 18px;
+		font-size: 16px;
-		line-height: 27px;
+		line-height: 24px;
-		letter-spacing: 0.5px;
+		letter-spacing: 0.5%;
 	}
-
 	&.text-md-semibold {
 		font-style: normal;
 		font-weight: 600;
 		font-size: 16px;
-		line-height: 22px;
+		line-height: 24px;
-		letter-spacing: 0.5px;
+		letter-spacing: 0.5%;
 	}
-
 	&.text-md-regular {
 		font-style: normal;
 		font-weight: 400;
 		font-size: 16px;
 		line-height: 24px;
-		letter-spacing: 0.5px;
+		letter-spacing: 0.5%;
 	}
-
+	&.text-md-uppercase {
-	&.text-md-grey {
-		color: $color-neutral-500;
 		font-style: normal;
 		font-weight: 400;
 		font-size: 16px;
 		line-height: 24px;
-		letter-spacing: 0.5px;
+		letter-spacing: 0.5%;
+		text-transform: uppercase;
 	}
-
+	&.text-md-light {
-	&.text-md-error {
-		color: $color-error-600;
 		font-style: normal;
-		font-weight: 400;
+		font-weight: 300;
 		font-size: 16px;
 		line-height: 24px;
-		letter-spacing: 0.5px;
+		letter-spacing: 0.5%;
 	}
 
-	&.text-sm-regular {
+	//Text small
+	&.text-sm-bold {
 		font-style: normal;
-		font-weight: 400;
+		font-weight: 700;
 		font-size: 14px;
 		line-height: 21px;
-		letter-spacing: 0.5px;
+		letter-spacing: 0.5%;
 	}
-
 	&.text-sm-semibold {
 		font-style: normal;
 		font-weight: 600;
 		font-size: 14px;
 		line-height: 21px;
-		letter-spacing: 0.5px;
+		letter-spacing: 0.5%;
 	}
-
+	&.text-sm-regular {
-	&.text-sm-bold {
 		font-style: normal;
-		font-weight: 600;
+		font-weight: 400;
 		font-size: 14px;
 		line-height: 21px;
-		letter-spacing: 0.5px;
+		letter-spacing: 0.5%;
+	}
+	&.text-sm-uppercase {
+		font-style: normal;
+		font-weight: 400;
+		font-size: 14px;
+		line-height: 21px;
+		letter-spacing: 0.5%;
+		text-transform: uppercase;
+	}
+	&.text-sm-light {
+		font-style: normal;
+		font-weight: 300;
+		font-size: 14px;
+		line-height: 21px;
+		letter-spacing: 0.5%;
 	}
 
+	//Text extra small
+	&.text-xs-bold {
+		font-style: normal;
+		font-weight: 700;
+		font-size: 12px;
+		line-height: 18px;
+		letter-spacing: 0.5%;
+	}
+	&.text-xs-semibold {
+		font-style: normal;
+		font-weight: 600;
+		font-size: 12px;
+		line-height: 18px;
+		letter-spacing: 0.5%;
+	}
 	&.text-xs-regular {
 		font-style: normal;
 		font-weight: 400;
 		font-size: 12px;
 		line-height: 18px;
-		letter-spacing: 0.5px;
+		letter-spacing: 0.5%;
+	}
+	&.text-xs-uppercase {
+		font-style: normal;
+		font-weight: 400;
+		font-size: 12px;
+		line-height: 18px;
+		letter-spacing: 0.5%;
+		text-transform: uppercase;
+	}
+	&.text-xs-light {
+		font-style: normal;
+		font-weight: 300;
+		font-size: 12px;
+		line-height: 18px;
+		letter-spacing: 0.5%;
 	}
 
-	&.color-error-800 {
+	//Caption
-		color: $color-error-800;
+	&.caption-bold {
+		font-style: normal;
+		font-weight: 700;
+		font-size: 10px;
+		line-height: 15px;
+		letter-spacing: -2%;
 	}
-
+	&.caption-semibold {
-	&.color-neutral-500 {
+		font-style: normal;
-		color: $color-neutral-500;
+		font-weight: 600;
+		font-size: 10px;
+		line-height: 15px;
+		letter-spacing: -2%;
 	}
-
+	&.caption-regular {
-	&.color-generic-black {
+		font-style: normal;
-		color: $color-generic-black;
+		font-weight: 400;
+		font-size: 10px;
+		line-height: 15px;
+		letter-spacing: -2%;
 	}
-
+	&.caption-uppercase {
-	&.color-primary-500 {
+		font-style: normal;
-		color: $color-primary-500;
+		font-weight: 400;
+		font-size: 10px;
+		line-height: 15px;
+		letter-spacing: -2%;
+		text-transform: uppercase;
 	}
-
+	&.caption-light {
-	&.color-secondary-500 {
+		font-style: normal;
-		color: $color-secondary-500;
+		font-weight: 300;
-	}
+		font-size: 10px;
-
+		line-height: 15px;
-	&.color-success-600 {
+		letter-spacing: -2%;
-		color: $color-success-600;
-	}
-
-	&.color-error-600 {
-		color: $color-error-600;
-	}
-
-	&.color-warning-500 {
-		color: $color-warning-500;
-	}
-
-	&.white {
-		color: $color-generic-white;
 	}
 }

src/front/Components/DesignSystem/Typography/index.tsx

@@ -13,39 +13,133 @@ type IState = {};
 
 export enum ITypo {
 	DISPLAY_LARGE = "display-large",
+	DISPLAY_MEDIUM = "display-medium",
+	DISPLAY_SMALL = "display-small",
 
 	TITLE_H1 = "title-h1",
+	TITLE_H2 = "title-h2",
 	TITLE_H3 = "title-h3",
+	TITLE_H4 = "title-h4",
 	TITLE_H5 = "title-h5",
+	TITLE_H6 = "title-h6",
 
+	TEXT_LG_BOLD = "text-lg-bold",
 	TEXT_LG_SEMIBOLD = "text-lg-semibold",
 	TEXT_LG_REGULAR = "text-lg-regular",
-	TEXT_LG_UPPERCASE = "text-lg-regular-uppercase",
+	TEXT_LG_UPPERCASE = "text-lg-uppercase",
-	TEXT_LG_GREY = "text-lg-grey",
+	TEXT_LG_light = "text-lg-light",
-	TEXT_LG_ERROR = "text-lg-error",
 
+	TEXT_MD_BOLD = "text-md-bold",
 	TEXT_MD_SEMIBOLD = "text-md-semibold",
 	TEXT_MD_REGULAR = "text-md-regular",
-	TEXT_MD_GREY = "text-md-grey",
+	TEXT_MD_UPPERCASE = "text-md-uppercase",
-	TEXT_MD_ERROR = "text-md-error",
+	TEXT_MD_light = "text-md-light",
 
-	TEXT_SM_REGULAR = "text-sm-regular",
-	TEXT_SM_SEMIBOLD = "text-sm-semibold",
 	TEXT_SM_BOLD = "text-sm-bold",
+	TEXT_SM_SEMIBOLD = "text-sm-semibold",
+	TEXT_SM_REGULAR = "text-sm-regular",
+	TEXT_SM_UPPERCASE = "text-sm-uppercase",
+	TEXT_SM_light = "text-sm-light",
 
+	TEXT_XS_BOLD = "text-xs-bold",
+	TEXT_XS_SEMIBOLD = "text-xs-semibold",
 	TEXT_XS_REGULAR = "text-xs-regular",
+	TEXT_XS_UPPERCASE = "text-xs-uppercase",
+	TEXT_XS_light = "text-xs-light",
+
+	CAPTION_BOLD = "caption-bold",
+	CAPTION_SEMIBOLD = "caption-semibold",
+	CAPTION_REGULAR = "caption-regular",
+	CAPTION_UPPERCASE = "caption-uppercase",
+	CAPTION_LIGHT = "caption-light",
 }
 
 export enum ITypoColor {
-	COLOR_ERROR_800 = "color-error-800",
-	COLOR_NEUTRAL_500 = "color-neutral-500",
 	COLOR_GENERIC_BLACK = "color-generic-black",
-	COLOR_PRIMARY_500 = "color-primary-500",
-	COLOR_SECONDARY_500 = "color-secondary-500",
-	COLOR_SUCCESS_600 = "color-success-600",
-	COLOR_WARNING_500 = "color-warning-500",
-	COLOR_ERROR_600 = "color-error-600",
 	COLOR_GENERIC_WHITE = "color-generic-white",
+	COLOR_GENERIC_NONE = "color-generic-none",
+
+	COLOR_NEUTRAL_50 = "color-neutral-50",
+	COLOR_NEUTRAL_100 = "color-neutral-100",
+	COLOR_NEUTRAL_200 = "color-neutral-200",
+	COLOR_NEUTRAL_300 = "color-neutral-300",
+	COLOR_NEUTRAL_400 = "color-neutral-400",
+	COLOR_NEUTRAL_500 = "color-neutral-500",
+	COLOR_NEUTRAL_600 = "color-neutral-600",
+	COLOR_NEUTRAL_700 = "color-neutral-700",
+	COLOR_NEUTRAL_800 = "color-neutral-800",
+	COLOR_NEUTRAL_900 = "color-neutral-900",
+	COLOR_NEUTRAL_950 = "color-neutral-950",
+
+	COLOR_PRIMARY_50 = "color-primary-50",
+	COLOR_PRIMARY_100 = "color-primary-100",
+	COLOR_PRIMARY_200 = "color-primary-200",
+	COLOR_PRIMARY_300 = "color-primary-300",
+	COLOR_PRIMARY_400 = "color-primary-400",
+	COLOR_PRIMARY_500 = "color-primary-500",
+	COLOR_PRIMARY_600 = "color-primary-600",
+	COLOR_PRIMARY_700 = "color-primary-700",
+	COLOR_PRIMARY_800 = "color-primary-800",
+	COLOR_PRIMARY_900 = "color-primary-900",
+	COLOR_PRIMARY_950 = "color-primary-950",
+
+	COLOR_SECONDARY_50 = "color-secondary-50",
+	COLOR_SECONDARY_100 = "color-secondary-100",
+	COLOR_SECONDARY_200 = "color-secondary-200",
+	COLOR_SECONDARY_300 = "color-secondary-300",
+	COLOR_SECONDARY_400 = "color-secondary-400",
+	COLOR_SECONDARY_500 = "color-secondary-500",
+	COLOR_SECONDARY_600 = "color-secondary-600",
+	COLOR_SECONDARY_700 = "color-secondary-700",
+	COLOR_SECONDARY_800 = "color-secondary-800",
+	COLOR_SECONDARY_900 = "color-secondary-900",
+	COLOR_SECONDARY_950 = "color-secondary-950",
+
+	COLOR_ERROR_50 = "color-error-50",
+	COLOR_ERROR_100 = "color-error-100",
+	COLOR_ERROR_200 = "color-error-200",
+	COLOR_ERROR_300 = "color-error-300",
+	COLOR_ERROR_400 = "color-error-400",
+	COLOR_ERROR_500 = "color-error-500",
+	COLOR_ERROR_600 = "color-error-600",
+	COLOR_ERROR_700 = "color-error-700",
+	COLOR_ERROR_800 = "color-error-800",
+	COLOR_ERROR_900 = "color-error-900",
+	COLOR_ERROR_950 = "color-error-950",
+
+	COLOR_WARNING_50 = "color-warning-50",
+	COLOR_WARNING_100 = "color-warning-100",
+	COLOR_WARNING_200 = "color-warning-200",
+	COLOR_WARNING_300 = "color-warning-300",
+	COLOR_WARNING_400 = "color-warning-400",
+	COLOR_WARNING_500 = "color-warning-500",
+	COLOR_WARNING_700 = "color-warning-700",
+	COLOR_WARNING_800 = "color-warning-800",
+	COLOR_WARNING_900 = "color-warning-900",
+	COLOR_WARNING_950 = "color-warning-950",
+
+	COLOR_SUCCESS_50 = "color-success-50",
+	COLOR_SUCCESS_100 = "color-success-100",
+	COLOR_SUCCESS_200 = "color-success-200",
+	COLOR_SUCCESS_300 = "color-success-300",
+	COLOR_SUCCESS_400 = "color-success-400",
+	COLOR_SUCCESS_500 = "color-success-500",
+	COLOR_SUCCESS_600 = "color-success-600",
+	COLOR_SUCCESS_700 = "color-success-700",
+	COLOR_SUCCESS_800 = "color-success-800",
+	COLOR_SUCCESS_900 = "color-success-900",
+	COLOR_SUCCESS_950 = "color-success-950",
+
+	COLOR_INFO_50 = "color-info-50",
+	COLOR_INFO_100 = "color-info-100",
+	COLOR_INFO_200 = "color-info-200",
+	COLOR_INFO_300 = "color-info-300",
+	COLOR_INFO_400 = "color-info-400",
+	COLOR_INFO_500 = "color-info-500",
+	COLOR_INFO_700 = "color-info-700",
+	COLOR_INFO_800 = "color-info-800",
+	COLOR_INFO_900 = "color-info-900",
+	COLOR_INFO_950 = "color-info-950",
 }
 
 export default class Typography extends React.Component<IProps, IState> {

src/front/Components/DesignSystem/UserFolder/UserFolderHeader/index.tsx

@@ -8,7 +8,7 @@ import Image from "next/image";
 import Link from "next/link";
 import React from "react";
 
-import Typography, { ITypo } from "../../Typography";
+import Typography, { ITypo, ITypoColor } from "../../Typography";
 import WarningBadge from "../../WarningBadge";
 import classes from "./classes.module.scss";
 import { EDocumentStatus } from "le-coffre-resources/dist/Customer/Document";
@@ -38,17 +38,23 @@ export default class UserFolderHeader extends React.Component<IProps, IState> {
 			<div className={classes["root"]}>
 				<div className={classes["content"]}>
 					<div className={classes["container"]}>
-						<Typography typo={ITypo.TEXT_MD_GREY}>Nom</Typography>
+						<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
+							Nom
+						</Typography>
 						<Typography typo={ITypo.TEXT_LG_REGULAR}>{this.props.customer.contact.last_name}</Typography>
 					</div>
 
 					<div className={classes["container"]}>
-						<Typography typo={ITypo.TEXT_MD_GREY}>Prénom</Typography>
+						<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
+							Prénom
+						</Typography>
 						<Typography typo={ITypo.TEXT_LG_REGULAR}>{this.props.customer.contact.first_name}</Typography>
 					</div>
 
 					<div className={classes["container"]}>
-						<Typography typo={ITypo.TEXT_MD_GREY}>Numéro de téléphone</Typography>
+						<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
+							Numéro de téléphone
+						</Typography>
 						<Typography typo={ITypo.TEXT_LG_REGULAR}>
 							{this.formatPhoneNumber(this.props.customer.contact.cell_phone_number!) ??
 								this.formatPhoneNumber(this.props.customer.contact.phone_number?.toString() ?? "")}
@@ -56,7 +62,9 @@ export default class UserFolderHeader extends React.Component<IProps, IState> {
 					</div>
 
 					<div className={classes["container"]}>
-						<Typography typo={ITypo.TEXT_MD_GREY}>E-mail</Typography>
+						<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
+							E-mail
+						</Typography>
 						<Typography typo={ITypo.TEXT_LG_REGULAR}>{this.props.customer.contact.email}</Typography>
 					</div>
 				</div>

src/front/Components/Layouts/Collaborators/CollaboratorInformations/index.tsx

@@ -163,25 +163,25 @@ export default function CollaboratorInformations(props: IProps) {
 				</div>
 				<div className={classes["user-infos"]}>
 					<div className={classes["user-infos-row"]}>
-						<Typography typo={ITypo.TEXT_MD_GREY} color={ITypoColor.COLOR_NEUTRAL_500}>
+						<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
 							Nom
 						</Typography>
 						<Typography typo={ITypo.TEXT_LG_REGULAR}>{userSelected?.contact?.first_name}</Typography>
 					</div>
 					<div className={classes["user-infos-row"]}>
-						<Typography typo={ITypo.TEXT_MD_GREY} color={ITypoColor.COLOR_NEUTRAL_500}>
+						<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
 							Prénom
 						</Typography>
 						<Typography typo={ITypo.TEXT_LG_REGULAR}>{userSelected?.contact?.last_name}</Typography>
 					</div>
 					<div className={classes["user-infos-row"]}>
-						<Typography typo={ITypo.TEXT_MD_GREY} color={ITypoColor.COLOR_NEUTRAL_500}>
+						<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
 							Numéro de téléphone
 						</Typography>
 						<Typography typo={ITypo.TEXT_LG_REGULAR}>{userSelected?.contact?.cell_phone_number}</Typography>
 					</div>
 					<div className={classes["user-infos-row"]}>
-						<Typography typo={ITypo.TEXT_MD_GREY} color={ITypoColor.COLOR_NEUTRAL_500}>
+						<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
 							Email
 						</Typography>
 						<Typography typo={ITypo.TEXT_LG_REGULAR}>{userSelected?.contact?.email}</Typography>

src/front/Components/Layouts/DeedTypes/DeedTypesInformations/index.tsx

@@ -135,7 +135,10 @@ export default function DeedTypesInformations(props: IProps) {
 				<div className={classes["deed-type-container"]}>
 					<div className={classes["infos"]}>
 						<div className={classNames(classes["middle-box"], classes["box"])}>
-							<Typography typo={ITypo.TEXT_MD_GREY} className={classes["box-title"]} color={ITypoColor.COLOR_GENERIC_BLACK}>
+							<Typography
+								typo={ITypo.TEXT_MD_REGULAR}
+								className={classes["box-title"]}
+								color={ITypoColor.COLOR_GENERIC_BLACK}>
 								Description
 							</Typography>
 							<Typography typo={ITypo.TEXT_LG_REGULAR}>{deedTypeSelected?.description}</Typography>

src/front/Components/Layouts/DocumentTypes/DocumentTypesInformations/index.tsx

@@ -47,19 +47,19 @@ export default function DocumentTypesInformations() {
 				<div className={classes["document-infos"]}>
 					<div className={classes["left"]}>
 						<div className={classes["document-infos-row"]}>
-							<Typography typo={ITypo.TEXT_MD_GREY} color={ITypoColor.COLOR_NEUTRAL_500}>
+							<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
 								Nom du document
 							</Typography>
 							<Typography typo={ITypo.TEXT_LG_REGULAR}>{documentSelected?.name}</Typography>
 						</div>
 						<div className={classes["document-infos-row"]}>
-							<Typography typo={ITypo.TEXT_MD_GREY} color={ITypoColor.COLOR_NEUTRAL_500}>
+							<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
 								Description visible par les collaborateurs de l'office
 							</Typography>
 							<Typography typo={ITypo.TEXT_LG_REGULAR}>{documentSelected?.private_description}</Typography>
 						</div>
 						<div className={classes["document-infos-row"]}>
-							<Typography typo={ITypo.TEXT_MD_GREY} color={ITypoColor.COLOR_NEUTRAL_500}>
+							<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
 								Description visible par les clients de l'office
 							</Typography>
 							<Typography typo={ITypo.TEXT_LG_REGULAR}>{documentSelected?.public_description}</Typography>

src/front/Components/Layouts/Folder/AddClientToFolder/index.tsx

@@ -75,7 +75,7 @@ class AddClientToFolderClass extends BasePage<IPropsClass, IState> {
 										onChange={this.onExistingClientSelected}
 										checked={this.state.selectedOption === "existing_customer"}
 										value={"existing client"}>
-										<Typography typo={ITypo.TEXT_LG_ERROR}>Client existant</Typography>
+										<Typography typo={ITypo.TEXT_LG_REGULAR}>Client existant</Typography>
 									</RadioBox>
 								)}
 
@@ -84,7 +84,7 @@ class AddClientToFolderClass extends BasePage<IPropsClass, IState> {
 									onChange={this.onNewClientSelected}
 									checked={this.state.selectedOption === "new_customer"}
 									value={"new client"}>
-									<Typography typo={ITypo.TEXT_LG_ERROR}>Nouveau client</Typography>
+									<Typography typo={ITypo.TEXT_LG_REGULAR}>Nouveau client</Typography>
 								</RadioBox>
 							</div>
 

src/front/Components/Layouts/Folder/AskDocuments/ParameterDocuments/index.tsx

@@ -129,11 +129,11 @@ export default function ParameterDocuments(props: IProps) {
 			<div className={classes["add-document-form-container"]}>
 				<div className={classes["radiobox-container"]}>
 					<RadioBox name="document" onChange={selectEditMode} checked={addOrEditDocument === "edit"} value={"existing client"}>
-						<Typography typo={ITypo.TEXT_LG_ERROR}>Document existant</Typography>
+						<Typography typo={ITypo.TEXT_LG_REGULAR}>Document existant</Typography>
 					</RadioBox>
 
 					<RadioBox name="document" onChange={selectAddMode} checked={addOrEditDocument === "add"} value={"new client"}>
-						<Typography typo={ITypo.TEXT_LG_ERROR}>Créer un document</Typography>
+						<Typography typo={ITypo.TEXT_LG_REGULAR}>Créer un document</Typography>
 					</RadioBox>
 				</div>
 				{addOrEditDocument === "add" && (

src/front/Components/Layouts/Offices/OfficeInformations/index.tsx

@@ -128,19 +128,19 @@ export default function OfficeInformations(props: IProps) {
 				</div>
 				<div className={classes["office-infos"]}>
 					<div className={classes["office-infos-row"]}>
-						<Typography typo={ITypo.TEXT_MD_GREY} color={ITypoColor.COLOR_NEUTRAL_500}>
+						<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
 							CRPCEN
 						</Typography>
 						<Typography typo={ITypo.TEXT_LG_REGULAR}>{officeSelected?.crpcen}</Typography>
 					</div>
 					<div className={classes["office-infos-row"]}>
-						<Typography typo={ITypo.TEXT_MD_GREY} color={ITypoColor.COLOR_NEUTRAL_500}>
+						<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
 							Dénomination
 						</Typography>
 						<Typography typo={ITypo.TEXT_LG_REGULAR}>{officeSelected?.name}</Typography>
 					</div>
 					<div className={classes["office-infos-row"]}>
-						<Typography typo={ITypo.TEXT_MD_GREY} color={ITypoColor.COLOR_NEUTRAL_500}>
+						<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
 							Addresse
 						</Typography>
 						<Typography typo={ITypo.TEXT_LG_REGULAR}>

src/front/Components/Layouts/Subscription/Components/SubscribeCheckoutTicket/index.tsx

@@ -84,7 +84,7 @@ export default function SubscribeCheckoutTicket(props: IProps) {
 						onChange={handleFrequencyChange}
 						defaultChecked={paymentFrequency === EPaymentFrequencyFront.yearly}
 						disabled={props.disableInputs}>
-						<Typography typo={ITypo.TEXT_LG_ERROR}>Annuel</Typography>
+						<Typography typo={ITypo.TEXT_LG_REGULAR}>Annuel</Typography>
 					</RadioBox>
 					<RadioBox
 						name="paymentFrequency"
@@ -92,7 +92,7 @@ export default function SubscribeCheckoutTicket(props: IProps) {
 						onChange={handleFrequencyChange}
 						defaultChecked={paymentFrequency === EPaymentFrequencyFront.monthly}
 						disabled={props.disableInputs}>
-						<Typography typo={ITypo.TEXT_LG_ERROR}>Mensuel</Typography>
+						<Typography typo={ITypo.TEXT_LG_REGULAR}>Mensuel</Typography>
 					</RadioBox>
 				</div>
 				<div className={classes["separator"]} />

src/front/Components/Layouts/Subscription/Components/SubscribeIllimityComponent/index.tsx

@@ -114,14 +114,14 @@ export default function SubscribeIllimityComponent({ hasNavTab = true }: IProps)
 						value={EPaymentFrequency.yearly.toString()}
 						onChange={handleFrequencyChange}
 						defaultChecked={paymentFrequency === EPaymentFrequency.yearly}>
-						<Typography typo={ITypo.TEXT_LG_ERROR}>Annuel</Typography>
+						<Typography typo={ITypo.TEXT_LG_REGULAR}>Annuel</Typography>
 					</RadioBox>
 					<RadioBox
 						name="paymentFrequencyInSubscription"
 						value={EPaymentFrequency.monthly.toString()}
 						onChange={handleFrequencyChange}
 						defaultChecked={paymentFrequency === EPaymentFrequency.monthly}>
-						<Typography typo={ITypo.TEXT_LG_ERROR}>Mensuel</Typography>
+						<Typography typo={ITypo.TEXT_LG_REGULAR}>Mensuel</Typography>
 					</RadioBox>
 				</div>
 				<div className={classes["separator"]} />

src/front/Components/Layouts/Subscription/Components/SubscribeStandardComponent/index.tsx

@@ -105,14 +105,14 @@ export default function SubscribeStandardComponent({ hasNavTab = true }: IProps)
 						value={EPaymentFrequency.yearly.toString()}
 						onChange={handleFrequencyChange}
 						defaultChecked={paymentFrequency === EPaymentFrequency.yearly}>
-						<Typography typo={ITypo.TEXT_LG_ERROR}>Annuel</Typography>
+						<Typography typo={ITypo.TEXT_LG_REGULAR}>Annuel</Typography>
 					</RadioBox>
 					<RadioBox
 						name="paymentFrequencyInSubscription"
 						value={EPaymentFrequency.monthly.toString()}
 						onChange={handleFrequencyChange}
 						defaultChecked={paymentFrequency === EPaymentFrequency.monthly}>
-						<Typography typo={ITypo.TEXT_LG_ERROR}>Mensuel</Typography>
+						<Typography typo={ITypo.TEXT_LG_REGULAR}>Mensuel</Typography>
 					</RadioBox>
 				</div>
 				<div className={classes["separator"]} />

src/front/Components/Layouts/Users/UserInformations/index.tsx

@@ -223,25 +223,25 @@ export default function UserInformations(props: IProps) {
 					</div>
 					<div className={classes["user-infos"]}>
 						<div className={classes["user-infos-row"]}>
-							<Typography typo={ITypo.TEXT_MD_GREY} color={ITypoColor.COLOR_NEUTRAL_500}>
+							<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
 								Nom
 							</Typography>
 							<Typography typo={ITypo.TEXT_LG_REGULAR}>{userSelected?.contact?.first_name}</Typography>
 						</div>
 						<div className={classes["user-infos-row"]}>
-							<Typography typo={ITypo.TEXT_MD_GREY} color={ITypoColor.COLOR_NEUTRAL_500}>
+							<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
 								Prénom
 							</Typography>
 							<Typography typo={ITypo.TEXT_LG_REGULAR}>{userSelected?.contact?.last_name}</Typography>
 						</div>
 						<div className={classes["user-infos-row"]}>
-							<Typography typo={ITypo.TEXT_MD_GREY} color={ITypoColor.COLOR_NEUTRAL_500}>
+							<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
 								Numéro de téléphone
 							</Typography>
 							<Typography typo={ITypo.TEXT_LG_REGULAR}>{userSelected?.contact?.cell_phone_number}</Typography>
 						</div>
 						<div className={classes["user-infos-row"]}>
-							<Typography typo={ITypo.TEXT_MD_GREY} color={ITypoColor.COLOR_NEUTRAL_500}>
+							<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
 								Email
 							</Typography>
 							<Typography typo={ITypo.TEXT_LG_REGULAR}>{userSelected?.contact?.email}</Typography>

src/front/Themes/constants.scss

@@ -10,23 +10,100 @@ $custom-easing: cubic-bezier(0.645, 0.045, 0.355, 1);
 // Generic colors
 $color-generic-black: #000000;
 $color-generic-white: #ffffff;
+$color-generic-none: #00000000;
 
-// Flash colors
+// Neutral colors
-$color-neutral-500: #6d7e8a;
-$color-neutral-200: #d7dce0;
 $color-neutral-50: #f7f8f8;
+$color-neutral-100: #edeff1;
+$color-neutral-200: #d7dce0;
+$color-neutral-300: #b4bec5;
+$color-neutral-400: #8b9aa5;
+$color-neutral-500: #6d7e8a;
+$color-neutral-600: #576672;
+$color-neutral-700: #47535d;
+$color-neutral-800: #3e474e;
+$color-neutral-900: #373e44;
+$color-neutral-950: #24282e;
+
+// Primary colors
+$color-primary-50: #e5eefa;
+$color-primary-100: #b7d1f1;
+$color-primary-200: #89b3e7;
+$color-primary-300: #5c96de;
+$color-primary-400: #2e78d4;
 $color-primary-500: #005bcb;
+$color-primary-600: #004eb8;
 $color-primary-700: #0040a4;
+$color-primary-800: #013391;
+$color-primary-900: #01257d;
+$color-primary-950: #01186a;
+
+// Secondary colors
+$color-secondary-50: #fff3ed;
+$color-secondary-100: #ffe4d4;
+$color-secondary-200: #ffc5a8;
+$color-secondary-300: #ff9c70;
+$color-secondary-400: #ff6737;
 $color-secondary-500: #ff4617;
+$color-secondary-600: #f02505;
 $color-secondary-700: #c71707;
-$color-info-500: #29a6ff;
+$color-secondary-800: #9e150e;
-$color-success-600: #15a450;
+$color-secondary-900: #7f140f;
+$color-secondary-950: #450605;
+
+// Error colors
+$color-error-50: #fef2f2;
+$color-error-100: #fee2e1;
+$color-error-200: #fecaca;
+$color-error-300: #fda5a5;
+$color-error-400: #f87172;
+$color-error-500: #ef4444;
+$color-error-600: #dc2625;
+$color-error-700: #b91c1d;
+$color-error-800: #991b1c;
+$color-error-900: #7f1c1d;
+$color-error-950: #450a0a;
+
+// Warning colors
+$color-warning-50: #fffbeb;
+$color-warning-100: #fff4c6;
+$color-warning-200: #ffe788;
+$color-warning-300: #ffd54a;
+$color-warning-400: #ffbd12;
 $color-warning-500: #f99f09;
 $color-warning-600: #de7702;
-$color-error-600: #dc2625;
+$color-warning-700: #b75306;
-$color-error-800: #991b1c;
+$color-warning-800: #943f0d;
+$color-warning-900: #7a340e;
+$color-warning-950: #461a02;
 
-// Soft colors
+// Sucess colors
+$color-success-50: #effdf4;
+$color-success-100: #dcfce8;
+$color-success-200: #bbf7d2;
+$color-success-300: #87efb0;
+$color-success-400: #49de86;
+$color-success-500: #22c564;
+$color-success-600: #15a450;
+$color-success-700: #178040;
+$color-success-800: #166437;
+$color-success-900: #14532f;
+$color-success-950: #052e18;
+
+// Info colors
+$color-info-50: #edf9ff;
+$color-info-100: #d8f1ff;
+$color-info-200: #b9e7ff;
+$color-info-300: #8adaff;
+$color-info-400: #51c3fe;
+$color-info-500: #29a6ff;
+$color-info-600: #1088fe;
+$color-info-700: #0b71ef;
+$color-info-800: #0e58bc;
+$color-info-900: #134d95;
+$color-info-950: #11305a;
+
+// Soft colors (TO DELETE AFTER)
 $color-primary-500-soft: #005bcb4d;
 $color-secondary-500-soft: #ff46174d;
 $color-info-500-soft: #29a6ff4d;

src/front/Themes/variables.scss

@@ -5,25 +5,105 @@
 	--root-margin: auto;
 	--root-padding: 64px 120px;
 
-	--font-primary: "Inter", sans-serif;
+	--font-primary: "Poppins", sans-serif;
 
+	// Generic colors
 	--color-generic-black: #{$color-generic-black};
 	--color-generic-white: #{$color-generic-white};
+	--color-generic-none: #{$color-generic-none};
 
-	--color-neutral-500: #{$color-neutral-500};
+	// Neutral colors
-	--color-neutral-200: #{$color-neutral-200};
 	--color-neutral-50: #{$color-neutral-50};
+	--color-neutral-100: #{$color-neutral-100};
+	--color-neutral-200: #{$color-neutral-200};
+	--color-neutral-300: #{$color-neutral-300};
+	--color-neutral-400: #{$color-neutral-400};
+	--color-neutral-500: #{$color-neutral-500};
+	--color-neutral-600: #{$color-neutral-600};
+	--color-neutral-700: #{$color-neutral-700};
+	--color-neutral-800: #{$color-neutral-800};
+	--color-neutral-900: #{$color-neutral-900};
+	--color-neutral-950: #{$color-neutral-950};
+
+	// Primary colors
+	--color-primary-50: #{$color-primary-50};
+	--color-primary-100: #{$color-primary-100};
+	--color-primary-200: #{$color-primary-200};
+	--color-primary-300: #{$color-primary-300};
+	--color-primary-400: #{$color-primary-400};
 	--color-primary-500: #{$color-primary-500};
+	--color-primary-600: #{$color-primary-600};
 	--color-primary-700: #{$color-primary-700};
+	--color-primary-800: #{$color-primary-800};
+	--color-primary-900: #{$color-primary-900};
+	--color-primary-950: #{$color-primary-950};
+
+	// Secondary colors
+	--color-secondary-50: #{$color-secondary-50};
+	--color-secondary-100: #{$color-secondary-100};
+	--color-secondary-200: #{$color-secondary-200};
+	--color-secondary-300: #{$color-secondary-300};
+	--color-secondary-400: #{$color-secondary-400};
 	--color-secondary-500: #{$color-secondary-500};
+	--color-secondary-600: #{$color-secondary-600};
 	--color-secondary-700: #{$color-secondary-700};
-	--color-info-500: #{$color-info-500};
+	--color-secondary-800: #{$color-secondary-800};
-	--color-success-600: #{$color-success-600};
+	--color-secondary-900: #{$color-secondary-900};
+	--color-secondary-950: #{$color-secondary-950};
+
+	// Error colors
+	--color-error-50: #{$color-error-50};
+	--color-error-100: #{$color-error-100};
+	--color-error-200: #{$color-error-200};
+	--color-error-300: #{$color-error-300};
+	--color-error-400: #{$color-error-400};
+	--color-error-500: #{$color-error-500};
+	--color-error-600: #{$color-error-600};
+	--color-error-700: #{$color-error-700};
+	--color-error-800: #{$color-error-800};
+	--color-error-900: #{$color-error-900};
+	--color-error-950: #{$color-error-950};
+
+	// Warning colors
+	--color-warning-50: #{$color-warning-50};
+	--color-warning-100: #{$color-warning-100};
+	--color-warning-200: #{$color-warning-200};
+	--color-warning-300: #{$color-warning-300};
+	--color-warning-400: #{$color-warning-400};
 	--color-warning-500: #{$color-warning-500};
 	--color-warning-600: #{$color-warning-600};
-	--color-error-600: #{$color-error-600};
+	--color-warning-700: #{$color-warning-700};
-	--color-error-800: #{$color-error-800};
+	--color-warning-800: #{$color-warning-800};
+	--color-warning-900: #{$color-warning-900};
+	--color-warning-950: #{$color-warning-950};
 
+	// Success colors
+	--color-success-50: #{$color-success-50};
+	--color-success-100: #{$color-success-100};
+	--color-success-200: #{$color-success-200};
+	--color-success-300: #{$color-success-300};
+	--color-success-400: #{$color-success-400};
+	--color-success-500: #{$color-success-500};
+	--color-success-600: #{$color-success-600};
+	--color-success-700: #{$color-success-700};
+	--color-success-800: #{$color-success-800};
+	--color-success-900: #{$color-success-900};
+	--color-success-950: #{$color-success-950};
+
+	// Info colors
+	--color-info-50: #{$color-info-50};
+	--color-info-100: #{$color-info-100};
+	--color-info-200: #{$color-info-200};
+	--color-info-300: #{$color-info-300};
+	--color-info-400: #{$color-info-400};
+	--color-info-500: #{$color-info-500};
+	--color-info-600: #{$color-info-600};
+	--color-info-700: #{$color-info-700};
+	--color-info-800: #{$color-info-800};
+	--color-info-900: #{$color-info-900};
+	--color-info-950: #{$color-info-950};
+
+	// Soft colors (TO DELETE AFTER)
 	--color-primary-500-soft: #{$color-primary-500-soft};
 	--color-secondary-500-soft: #{$color-secondary-500-soft};
 	--color-info-500-soft: #{$color-info-500-soft};