From ed3e34a01006001bde808291f04cb30264c95e50 Mon Sep 17 00:00:00 2001
From: Vins <vincent.alamelle@smart-chain.fr>
Date: Tue, 2 Jul 2024 14:12:48 +0200
Subject: [PATCH 1/7] Refacto color theme

---
 .../BlockList/classes.module.scss             |  6 +-
 .../DesignSystem/Button/classes.module.scss   | 58 +++++++++----------
 .../DesignSystem/CheckBox/classes.module.scss |  4 +-
 .../DesignSystem/CheckBox/index.tsx           |  2 +-
 .../DepositDocument/classes.module.scss       | 16 +++--
 .../DesignSystem/DepositDocument/index.tsx    | 21 ++++---
 .../DepositOtherDocument/classes.module.scss  | 12 ++--
 .../DepositOtherDocument/index.tsx            | 14 +++--
 .../DepositRib/classes.module.scss            | 16 +++--
 .../DesignSystem/DepositRib/index.tsx         |  8 +--
 .../DocumentNotary/classes.module.scss        | 16 ++---
 .../DesignSystem/FilePreview/index.tsx        |  2 +-
 .../classes.module.scss                       |  2 +-
 .../FolderBoxInformation/classes.module.scss  |  2 +-
 .../FolderContainer/classes.module.scss       |  4 +-
 .../FolderList/classes.module.scss            |  6 +-
 .../FolderListContainer/classes.module.scss   |  2 +-
 .../DesignSystem/Form/BaseField.tsx           |  2 +-
 .../Form/DateField/classes.module.scss        |  8 +--
 .../DesignSystem/Form/DateField/index.tsx     |  2 +-
 .../Form/SelectField/classes.module.scss      | 22 ++++---
 .../DesignSystem/Form/SelectField/index.tsx   |  2 +-
 .../Form/TextField/classes.module.scss        |  8 +--
 .../DesignSystem/Form/TextField/index.tsx     |  2 +-
 .../Form/TextareaField/classes.module.scss    |  8 +--
 .../DesignSystem/Form/TextareaField/index.tsx |  2 +-
 .../BurgerModal/classes.module.scss           |  4 +-
 .../Header/HeaderLink/classes.module.scss     |  4 +-
 .../Header/HeaderSubmenu/classes.module.scss  |  4 +-
 .../NotificationModal/classes.module.scss     |  4 +-
 .../Notifications/NotificationModal/index.tsx |  6 +-
 .../Profile/ProfileModal/classes.module.scss  |  4 +-
 .../DesignSystem/Header/classes.module.scss   |  4 +-
 .../Components/DesignSystem/Header/index.tsx  |  2 +-
 .../DesignSystem/Loader/classes.module.scss   |  4 +-
 .../DesignSystem/Modal/classes.module.scss    |  2 +-
 .../MultiSelect/classes.module.scss           |  8 +--
 .../DesignSystem/MultiSelect/index.tsx        |  5 +-
 .../DesignSystem/Newsletter/index.tsx         |  8 +--
 .../ProgressBar/classes.module.scss           |  4 +-
 .../DesignSystem/RadioBox/classes.module.scss |  4 +-
 .../DesignSystem/RadioBox/index.tsx           |  2 +-
 .../SearchBar/classes.module.scss             |  8 +--
 .../DesignSystem/Switch/classes.module.scss   |  6 +-
 .../Components/DesignSystem/Switch/index.tsx  |  2 +-
 .../ToastElement/classes.module.scss          |  4 +-
 .../ToastsContainer/ToastElement/index.tsx    |  2 +-
 .../ToolTip/Content/classes.module.scss       |  4 +-
 .../Components/DesignSystem/ToolTip/index.tsx |  6 +-
 .../Typography/classes.module.scss            | 42 +++++++-------
 .../DesignSystem/Typography/index.tsx         | 18 +++---
 .../UserFolderHeader/classes.module.scss      |  2 +-
 .../UserFolder/classes.module.scss            |  2 +-
 .../Components/DesignSystem/Version/index.tsx |  2 +-
 .../WarningBadge/classes.module.scss          |  2 +-
 .../Elements/MessageBox/classes.module.scss   |  4 +-
 .../classes.module.scss                       |  2 +-
 .../CollaboratorListContainer/index.tsx       |  2 +-
 .../classes.module.scss                       |  8 +--
 .../DeedTypeListContainer/classes.module.scss |  2 +-
 .../classes.module.scss                       |  8 +--
 .../classes.module.scss                       |  2 +-
 .../classes.module.scss                       |  8 +--
 .../DefaultDoubleSidePage/classes.module.scss |  4 +-
 .../classes.module.scss                       | 18 +++---
 .../OfficeListContainer/classes.module.scss   |  2 +-
 .../classes.module.scss                       |  8 +--
 .../RoleListContainer/classes.module.scss     |  2 +-
 .../DefaultRoleDashboard/classes.module.scss  |  8 +--
 .../UserListContainer/classes.module.scss     |  2 +-
 .../DefaultUserDashboard/classes.module.scss  |  8 +--
 .../ClientDashboard/classes.module.scss       |  4 +-
 .../Layouts/ClientDashboard/index.tsx         |  8 +--
 .../classes.module.scss                       |  6 +-
 .../CollaboratorInformations/index.tsx        | 10 ++--
 .../Layouts/Collaborators/index.tsx           |  2 +-
 .../DeedTypesInformations/classes.module.scss |  4 +-
 .../DeedTypes/DeedTypesInformations/index.tsx |  2 +-
 .../Components/Layouts/DeedTypes/index.tsx    |  2 +-
 .../classes.module.scss                       |  5 +-
 .../DocumentTypesInformations/index.tsx       |  6 +-
 .../Layouts/DocumentTypes/index.tsx           |  2 +-
 .../Layouts/Folder/AskDocuments/index.tsx     |  2 +-
 .../Layouts/Folder/CreateFolder/index.tsx     |  6 +-
 .../FolderInformation/ClientSection/index.tsx |  2 +-
 .../Folder/FolderInformation/index.tsx        |  6 +-
 .../OcrResult/classes.module.scss             | 58 +++++++++----------
 .../Folder/ViewDocuments/OcrResult/index.tsx  | 18 +++---
 .../Layouts/Folder/ViewDocuments/index.tsx    | 10 ++--
 src/front/Components/Layouts/Folder/index.tsx |  2 +-
 .../FolderInformation/ClientSection/index.tsx |  2 +-
 .../FolderInformation/index.tsx               |  2 +-
 .../Layouts/FolderArchived/index.tsx          |  2 +-
 .../LoginCustomer/PasswordForgotten/index.tsx |  2 +-
 .../LoginCustomer/StepNewPassword/index.tsx   |  2 +-
 .../Layouts/LoginCustomer/StepTotp/index.tsx  |  2 +-
 .../Layouts/LoginHome/classes.module.scss     |  2 +-
 .../Components/Layouts/LoginHome/index.tsx    |  4 +-
 .../Components/Layouts/MyAccount/index.tsx    |  6 +-
 .../OfficeInformations/classes.module.scss    | 12 ++--
 .../Offices/OfficeInformations/index.tsx      | 36 ++++++------
 .../Components/Layouts/Offices/index.tsx      |  2 +-
 src/front/Components/Layouts/Rib/index.tsx    |  8 +--
 src/front/Components/Layouts/Roles/index.tsx  |  2 +-
 .../SubscribeCheckoutTicket/index.tsx         | 32 +++++-----
 .../SubscribeIllimityComponent/index.tsx      | 22 +++----
 .../SubscribeStandardComponent/index.tsx      | 18 +++---
 .../SubscriptionClientInfos/index.tsx         |  8 +--
 .../SubscriptionManageCollaborators/index.tsx |  6 +-
 .../SubscriptionError/classes.module.scss     |  2 +-
 .../Subscription/SubscriptionError/index.tsx  |  2 +-
 .../SubscriptionFacturation/index.tsx         | 38 ++++++------
 .../Subscription/SubscriptionInvite/index.tsx |  6 +-
 .../Subscription/SubscriptionNew/index.tsx    | 30 +++++-----
 .../SubscriptionSuccess/classes.module.scss   |  2 +-
 .../SubscriptionSuccess/index.tsx             |  2 +-
 .../UserInformations/classes.module.scss      |  6 +-
 .../Layouts/Users/UserInformations/index.tsx  | 10 ++--
 src/front/Components/Layouts/Users/index.tsx  |  2 +-
 src/front/Themes/constants-old.scss           | 44 ++++++++++++++
 src/front/Themes/constants.scss               | 46 +++++++--------
 src/front/Themes/modes.scss                   |  4 +-
 src/front/Themes/variables-old.scss           | 36 ++++++++++++
 src/front/Themes/variables.scss               | 45 +++++++-------
 124 files changed, 588 insertions(+), 516 deletions(-)
 create mode 100644 src/front/Themes/constants-old.scss
 create mode 100644 src/front/Themes/variables-old.scss

diff --git a/src/front/Components/DesignSystem/BlockList/classes.module.scss b/src/front/Components/DesignSystem/BlockList/classes.module.scss
index 879ad55d..a297cd3d 100644
--- a/src/front/Components/DesignSystem/BlockList/classes.module.scss
+++ b/src/front/Components/DesignSystem/BlockList/classes.module.scss
@@ -6,15 +6,15 @@
 	align-items: center;
 	width: 100%;
 	padding: 24px;
-	border: 1px solid $grey-medium;
+	border: 1px solid $color-neutral-200;
 	cursor: pointer;
 
 	&:hover {
-		background-color: $grey-medium;
+		background-color: $color-neutral-200;
 	}
 
 	&[data-selected="true"] {
-		background-color: $grey-medium;
+		background-color: $color-neutral-200;
 	}
 
 	.left-side {
diff --git a/src/front/Components/DesignSystem/Button/classes.module.scss b/src/front/Components/DesignSystem/Button/classes.module.scss
index bc86a437..dd3440d1 100644
--- a/src/front/Components/DesignSystem/Button/classes.module.scss
+++ b/src/front/Components/DesignSystem/Button/classes.module.scss
@@ -23,51 +23,51 @@
 	}
 
 	&[variant="primary"] {
-		color: $white;
-		background-color: $purple-flash;
-		border-color: $purple-flash;
+		color: $color-generic-white;
+		background-color: $color-primary-500;
+		border-color: $color-primary-500;
 		padding: 24px 48px;
 		font-weight: 400;
 		font-size: 18px;
 		line-height: 22px;
 
 		&:hover {
-			border-color: $purple-hover;
-			background-color: $purple-hover;
+			border-color: $color-primary-700;
+			background-color: $color-primary-700;
 		}
 
 		&:disabled {
-			border-color: $purple-soft;
-			background-color: $purple-soft;
+			border-color: $color-primary-500-soft;
+			background-color: $color-primary-500-soft;
 			pointer-events: none;
 		}
 	}
 
 	&[variant="secondary"] {
-		color: $white;
-		background-color: $red-flash;
-		border-color: $red-flash;
+		color: $color-generic-white;
+		background-color: $color-error-600;
+		border-color: $color-error-600;
 		padding: 24px 48px;
 		font-weight: 400;
 		font-size: 18px;
 		line-height: 22px;
 
 		&:hover {
-			border-color: $re-hover;
-			background-color: $re-hover;
+			border-color: $color-error-800;
+			background-color: $color-error-800;
 		}
 
 		&:disabled {
-			border-color: $red-soft;
-			background-color: $red-soft;
+			border-color: $color-error-600-soft;
+			background-color: $color-error-600-soft;
 			pointer-events: none;
 		}
 	}
 
 	&[variant="ghost"] {
-		color: $pink-flash;
+		color: $color-secondary-500;
 		background-color: transparent;
-		border-color: $pink-flash;
+		border-color: $color-secondary-500;
 		padding: 24px 48px;
 		font-weight: 400;
 		font-size: 18px;
@@ -75,26 +75,26 @@
 
 		svg {
 			path {
-				stroke: $white;
+				stroke: $color-generic-white;
 			}
 		}
 
 		&:hover {
-			border-color: $pink-hover;
-			color: $pink-hover;
+			border-color: $color-secondary-700;
+			color: $color-secondary-700;
 		}
 
 		&:disabled {
-			border-color: $pink-soft;
-			background-color: $pink-soft;
+			border-color: $color-secondary-500-soft;
+			background-color: $color-secondary-500-soft;
 			pointer-events: none;
 		}
 	}
 
 	&[variant="white"] {
-		color: $pink-flash;
+		color: $color-secondary-500;
 		background-color: white;
-		border-color: $pink-flash;
+		border-color: $color-secondary-500;
 		padding: 24px 48px;
 		font-weight: 400;
 		font-size: 18px;
@@ -102,18 +102,18 @@
 
 		svg {
 			path {
-				stroke: $white;
+				stroke: $color-generic-white;
 			}
 		}
 
 		&:hover {
-			border-color: $pink-hover;
-			color: $pink-hover;
+			border-color: $color-secondary-700;
+			color: $color-secondary-700;
 		}
 
 		&:disabled {
-			border-color: $pink-soft;
-			background-color: $pink-soft;
+			border-color: $color-secondary-500-soft;
+			background-color: $color-secondary-500-soft;
 			pointer-events: none;
 		}
 	}
@@ -132,7 +132,7 @@
 	}
 
 	&[variant="line"] {
-		color: $pink-flash;
+		color: $color-secondary-500;
 		background-color: transparent;
 		border-color: transparent;
 		padding: 0;
diff --git a/src/front/Components/DesignSystem/CheckBox/classes.module.scss b/src/front/Components/DesignSystem/CheckBox/classes.module.scss
index 42530455..2eb130fb 100644
--- a/src/front/Components/DesignSystem/CheckBox/classes.module.scss
+++ b/src/front/Components/DesignSystem/CheckBox/classes.module.scss
@@ -13,7 +13,7 @@
 		background-color: transparent;
 		width: 16px;
 		height: 16px;
-		border: 1px solid $turquoise-flash;
+		border: 1px solid $color-secondary-500;
 		border-radius: 2px;
 		margin-right: 16px;
 		display: grid;
@@ -30,7 +30,7 @@
 		display: grid;
 		width: 16px;
 		height: 16px;
-		background-color: $turquoise-flash;
+		background-color: $color-secondary-500;
 		border-radius: 2px;
 		transform: scale(0);
 	}
diff --git a/src/front/Components/DesignSystem/CheckBox/index.tsx b/src/front/Components/DesignSystem/CheckBox/index.tsx
index 3e7b30d6..82a84bca 100644
--- a/src/front/Components/DesignSystem/CheckBox/index.tsx
+++ b/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.P_ERR_16} color={ITypoColor.BLACK}>
+			<Typography typo={ITypo.P_ERR_16} color={ITypoColor.COLOR_GENERIC_BLACK}>
 				<label className={classNames(classes["root"], this.props.disabled && classes["disabled"])}>
 					<input
 						type="checkbox"
diff --git a/src/front/Components/DesignSystem/DepositDocument/classes.module.scss b/src/front/Components/DesignSystem/DepositDocument/classes.module.scss
index 9bba001b..dbbcbd00 100644
--- a/src/front/Components/DesignSystem/DepositDocument/classes.module.scss
+++ b/src/front/Components/DesignSystem/DepositDocument/classes.module.scss
@@ -1,19 +1,17 @@
 .container {
-
-
 	.root {
 		padding: 24px;
-		background-color: var(--white);
+		background-color: var(--color-generic-white);
 		border: 1px dashed #e7e7e7;
 
 		height: fit-content;
 
 		&[data-drag-over="true"] {
-			border: 1px dashed var(--grey);
+			border: 1px dashed var(--color-neutral-500);
 		}
 
 		&.validated {
-			border: 1px dashed var(--green-flash);
+			border: 1px dashed var(--color-success-600);
 		}
 
 		.top-container {
@@ -34,12 +32,12 @@
 				margin-left: 18px;
 
 				.validated {
-					color: var(--green-flash);
+					color: var(--color-success-600);
 				}
 
 				.refused-button {
 					font-size: 14px;
-					color: var(--re-hover);
+					color: var(--color-error-800);
 					margin-left: 8px;
 				}
 
@@ -102,7 +100,7 @@
 	}
 
 	.error-message {
-		color: var(--red-flash);
+		color: var(--color-error-600);
 		margin-top: 8px;
 	}
-}
\ No newline at end of file
+}
diff --git a/src/front/Components/DesignSystem/DepositDocument/index.tsx b/src/front/Components/DesignSystem/DepositDocument/index.tsx
index 1551137f..4ec5c5e3 100644
--- a/src/front/Components/DesignSystem/DepositDocument/index.tsx
+++ b/src/front/Components/DesignSystem/DepositDocument/index.tsx
@@ -123,7 +123,7 @@ export default class DepositDocument extends React.Component<IProps, IState> {
 						</div>
 						<div className={classes["separator"]} />
 						<div className={classes["right"]}>
-							<Typography typo={ITypo.P_SB_16} color={ITypoColor.BLACK} className={classes["title"]}>
+							<Typography typo={ITypo.P_SB_16} color={ITypoColor.COLOR_GENERIC_BLACK} className={classes["title"]}>
 								<div
 									className={
 										this.props.document.document_status === EDocumentStatus.VALIDATED ? classes["validated"] : ""
@@ -140,7 +140,7 @@ export default class DepositDocument extends React.Component<IProps, IState> {
 								)}
 							</Typography>
 							{this.props.document.document_status !== EDocumentStatus.VALIDATED && (
-								<Typography color={ITypoColor.GREY} typo={ITypo.CAPTION_14}>
+								<Typography color={ITypoColor.COLOR_NEUTRAL_500} typo={ITypo.CAPTION_14}>
 									Sélectionnez des documents .jpg, .pdf ou .png
 								</Typography>
 							)}
@@ -157,7 +157,10 @@ export default class DepositDocument extends React.Component<IProps, IState> {
 								<div className={classes["file-container"]} key={fileObj.name + file.index}>
 									<div className={classes["left-part"]}>
 										<Image src={DocumentCheckIcon} alt="Document check" />
-										<Typography typo={ITypo.P_16} color={ITypoColor.GREY} title={file.fileName ?? fileObj.name}>
+										<Typography
+											typo={ITypo.P_16}
+											color={ITypoColor.COLOR_NEUTRAL_500}
+											title={file.fileName ?? fileObj.name}>
 											{this.shortName(file.fileName || fileObj.name)}
 										</Typography>
 									</div>
@@ -177,7 +180,7 @@ export default class DepositDocument extends React.Component<IProps, IState> {
 									<div className={classes["loader"]}>
 										<Loader />
 									</div>
-									<Typography typo={ITypo.P_16} color={ITypoColor.GREY}>
+									<Typography typo={ITypo.P_16} color={ITypoColor.COLOR_NEUTRAL_500}>
 										Chargement...
 									</Typography>
 								</div>
@@ -188,7 +191,7 @@ export default class DepositDocument extends React.Component<IProps, IState> {
 					{this.props.document.document_status !== EDocumentStatus.VALIDATED && (
 						<div className={classes["bottom-container"]}>
 							<Button variant={EButtonVariant.LINE} className={classes["add-button"]} onClick={this.addDocument}>
-								<Typography typo={ITypo.P_SB_16} color={ITypoColor.PINK_FLASH} className={classes["add-document"]}>
+								<Typography typo={ITypo.P_SB_16} color={ITypoColor.COLOR_SECONDARY_500} className={classes["add-document"]}>
 									Ajouter un document <Image src={PlusIcon} alt="Plus icon" />
 								</Typography>
 							</Button>
@@ -262,26 +265,26 @@ export default class DepositDocument extends React.Component<IProps, IState> {
 		switch (history.document_status) {
 			case EDocumentStatus.ASKED:
 				return (
-					<Typography color={ITypoColor.GREY} typo={ITypo.CAPTION_14}>
+					<Typography color={ITypoColor.COLOR_NEUTRAL_500} typo={ITypo.CAPTION_14}>
 						Demandé par votre notaire le {this.formatDate(history.created_at!)}
 					</Typography>
 				);
 			case EDocumentStatus.VALIDATED:
 				return (
-					<Typography color={ITypoColor.GREY} typo={ITypo.CAPTION_14}>
+					<Typography color={ITypoColor.COLOR_NEUTRAL_500} typo={ITypo.CAPTION_14}>
 						Validé par votre notaire le {this.formatDate(history.created_at!)}
 					</Typography>
 				);
 			case EDocumentStatus.DEPOSITED:
 				return (
-					<Typography color={ITypoColor.GREY} typo={ITypo.CAPTION_14}>
+					<Typography color={ITypoColor.COLOR_NEUTRAL_500} typo={ITypo.CAPTION_14}>
 						Déposé le {this.formatDate(history.created_at!)}
 					</Typography>
 				);
 
 			case EDocumentStatus.REFUSED:
 				return (
-					<Typography typo={ITypo.CAPTION_14} color={ITypoColor.RE_HOVER}>
+					<Typography typo={ITypo.CAPTION_14} color={ITypoColor.COLOR_ERROR_800}>
 						Document non conforme
 						{history.refused_reason && history.refused_reason.length > 0 && (
 							<Button
diff --git a/src/front/Components/DesignSystem/DepositOtherDocument/classes.module.scss b/src/front/Components/DesignSystem/DepositOtherDocument/classes.module.scss
index 1fae05ec..b5fbd994 100644
--- a/src/front/Components/DesignSystem/DepositOtherDocument/classes.module.scss
+++ b/src/front/Components/DesignSystem/DepositOtherDocument/classes.module.scss
@@ -1,18 +1,18 @@
 .container {
 	.root {
 		padding: 24px;
-		background-color: var(--white);
+		background-color: var(--color-generic-white);
 		border: 1px dashed #e7e7e7;
 
 		height: fit-content;
 		margin-top: 16px;
 
 		&[data-drag-over="true"] {
-			border: 1px dashed var(--grey);
+			border: 1px dashed var(--color-neutral-500);
 		}
 
 		&.validated {
-			border: 1px dashed var(--green-flash);
+			border: 1px dashed var(--color-success-600);
 		}
 
 		.top-container {
@@ -33,12 +33,12 @@
 				margin-left: 18px;
 
 				.validated {
-					color: var(--green-flash);
+					color: var(--color-success-600);
 				}
 
 				.refused-button {
 					font-size: 14px;
-					color: var(--re-hover);
+					color: var(--color-error-800);
 					margin-left: 8px;
 				}
 
@@ -101,7 +101,7 @@
 	}
 
 	.error-message {
-		color: var(--red-flash);
+		color: var(--color-error-600);
 		margin-top: 8px;
 	}
 }
diff --git a/src/front/Components/DesignSystem/DepositOtherDocument/index.tsx b/src/front/Components/DesignSystem/DepositOtherDocument/index.tsx
index 5076afa0..2fa9b50d 100644
--- a/src/front/Components/DesignSystem/DepositOtherDocument/index.tsx
+++ b/src/front/Components/DesignSystem/DepositOtherDocument/index.tsx
@@ -110,7 +110,10 @@ export default class DepositOtherDocument extends React.Component<IProps, IState
 									</div>
 									<div className={classes["separator"]} />
 									<div className={classes["right"]}>
-										<Typography typo={ITypo.P_SB_16} color={ITypoColor.BLACK} className={classes["title"]}>
+										<Typography
+											typo={ITypo.P_SB_16}
+											color={ITypoColor.COLOR_GENERIC_BLACK}
+											className={classes["title"]}>
 											<div
 												className={
 													this.props.document.document_status === EDocumentStatus.VALIDATED
@@ -120,7 +123,7 @@ export default class DepositOtherDocument extends React.Component<IProps, IState
 												{this.props.document.document_type?.name}
 											</div>
 										</Typography>
-										<Typography color={ITypoColor.GREY} typo={ITypo.CAPTION_14}>
+										<Typography color={ITypoColor.COLOR_NEUTRAL_500} typo={ITypo.CAPTION_14}>
 											Sélectionnez des documents .jpg, .pdf ou .png
 										</Typography>
 									</div>
@@ -134,7 +137,7 @@ export default class DepositOtherDocument extends React.Component<IProps, IState
 												<div className={classes["file-container"]} key={fileObj.name}>
 													<div className={classes["left-part"]}>
 														<Image src={DocumentCheckIcon} alt="Document check" />
-														<Typography typo={ITypo.P_16} color={ITypoColor.GREY}>
+														<Typography typo={ITypo.P_16} color={ITypoColor.COLOR_NEUTRAL_500}>
 															{this.shortName(fileObj.name)}
 														</Typography>
 													</div>
@@ -152,7 +155,10 @@ export default class DepositOtherDocument extends React.Component<IProps, IState
 								)}
 								<div className={classes["bottom-container"]}>
 									<Button variant={EButtonVariant.LINE} className={classes["add-button"]} onClick={this.addDocument}>
-										<Typography typo={ITypo.P_SB_16} color={ITypoColor.PINK_FLASH} className={classes["add-document"]}>
+										<Typography
+											typo={ITypo.P_SB_16}
+											color={ITypoColor.COLOR_SECONDARY_500}
+											className={classes["add-document"]}>
 											Ajouter un document <Image src={PlusIcon} alt="Plus icon" />
 										</Typography>
 									</Button>
diff --git a/src/front/Components/DesignSystem/DepositRib/classes.module.scss b/src/front/Components/DesignSystem/DepositRib/classes.module.scss
index 9bba001b..dbbcbd00 100644
--- a/src/front/Components/DesignSystem/DepositRib/classes.module.scss
+++ b/src/front/Components/DesignSystem/DepositRib/classes.module.scss
@@ -1,19 +1,17 @@
 .container {
-
-
 	.root {
 		padding: 24px;
-		background-color: var(--white);
+		background-color: var(--color-generic-white);
 		border: 1px dashed #e7e7e7;
 
 		height: fit-content;
 
 		&[data-drag-over="true"] {
-			border: 1px dashed var(--grey);
+			border: 1px dashed var(--color-neutral-500);
 		}
 
 		&.validated {
-			border: 1px dashed var(--green-flash);
+			border: 1px dashed var(--color-success-600);
 		}
 
 		.top-container {
@@ -34,12 +32,12 @@
 				margin-left: 18px;
 
 				.validated {
-					color: var(--green-flash);
+					color: var(--color-success-600);
 				}
 
 				.refused-button {
 					font-size: 14px;
-					color: var(--re-hover);
+					color: var(--color-error-800);
 					margin-left: 8px;
 				}
 
@@ -102,7 +100,7 @@
 	}
 
 	.error-message {
-		color: var(--red-flash);
+		color: var(--color-error-600);
 		margin-top: 8px;
 	}
-}
\ No newline at end of file
+}
diff --git a/src/front/Components/DesignSystem/DepositRib/index.tsx b/src/front/Components/DesignSystem/DepositRib/index.tsx
index 99e147b9..f5fb18a8 100644
--- a/src/front/Components/DesignSystem/DepositRib/index.tsx
+++ b/src/front/Components/DesignSystem/DepositRib/index.tsx
@@ -129,10 +129,10 @@ export default class DepositRib extends React.Component<IProps, IState> {
 						<div className={classes["separator"]} />
 
 						<div className={classes["right"]}>
-							<Typography typo={ITypo.P_SB_16} color={ITypoColor.BLACK} className={classes["title"]}>
+							<Typography typo={ITypo.P_SB_16} color={ITypoColor.COLOR_GENERIC_BLACK} className={classes["title"]}>
 								<div>Déposer un RIB</div>
 							</Typography>
-							<Typography color={ITypoColor.GREY} typo={ITypo.CAPTION_14}>
+							<Typography color={ITypoColor.COLOR_NEUTRAL_500} typo={ITypo.CAPTION_14}>
 								Sélectionnez des documents .jpg, .pdf ou .png
 							</Typography>
 						</div>
@@ -144,7 +144,7 @@ export default class DepositRib extends React.Component<IProps, IState> {
 								<div className={classes["file-container"]} key="0">
 									<div className={classes["left-part"]}>
 										<Image src={DocumentCheckIcon} alt="Document check" />
-										<Typography typo={ITypo.P_16} color={ITypoColor.GREY} title={file.name}>
+										<Typography typo={ITypo.P_16} color={ITypoColor.COLOR_NEUTRAL_500} title={file.name}>
 											{this.shortName(file.name)}
 										</Typography>
 									</div>
@@ -161,7 +161,7 @@ export default class DepositRib extends React.Component<IProps, IState> {
 
 					<div className={classes["bottom-container"]}>
 						<Button variant={EButtonVariant.LINE} className={classes["add-button"]} onClick={() => this.fileInput!.click()}>
-							<Typography typo={ITypo.P_SB_16} color={ITypoColor.PINK_FLASH} className={classes["add-document"]}>
+							<Typography typo={ITypo.P_SB_16} color={ITypoColor.COLOR_SECONDARY_500} className={classes["add-document"]}>
 								Ajouter un document <Image src={PlusIcon} alt="Plus icon" />
 							</Typography>
 						</Button>
diff --git a/src/front/Components/DesignSystem/Document/DocumentNotary/classes.module.scss b/src/front/Components/DesignSystem/Document/DocumentNotary/classes.module.scss
index 3785a54e..c9b9fd5b 100644
--- a/src/front/Components/DesignSystem/Document/DocumentNotary/classes.module.scss
+++ b/src/front/Components/DesignSystem/Document/DocumentNotary/classes.module.scss
@@ -1,30 +1,30 @@
 @import "@Themes/constants.scss";
 
 .root {
-	border: 1px solid $grey-medium;
+	border: 1px solid $color-neutral-200;
 	padding: 16px;
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
 	&.DEPOSITED {
 		cursor: pointer;
-		border: 1px solid $orange-soft;
+		border: 1px solid $color-warning-500-soft;
 		&:hover {
-			border: 1px solid $orange-soft;
-			outline: 1px solid $orange-soft;
+			border: 1px solid $color-warning-500-soft;
+			outline: 1px solid $color-warning-500-soft;
 		}
 	}
 	&.VALIDATED {
 		cursor: pointer;
-		border: 1px solid $green-soft;
+		border: 1px solid $color-success-600-soft;
 		&:hover {
-			border: 1px solid $green-soft;
-			outline: 1px solid $green-soft;
+			border: 1px solid $color-success-600-soft;
+			outline: 1px solid $color-success-600-soft;
 		}
 	}
 
 	.valid-radius {
-		background-color: $green-flash;
+		background-color: color-success-600;
 		padding: 6px;
 		border-radius: 20px;
 	}
diff --git a/src/front/Components/DesignSystem/FilePreview/index.tsx b/src/front/Components/DesignSystem/FilePreview/index.tsx
index 81046eff..70607659 100644
--- a/src/front/Components/DesignSystem/FilePreview/index.tsx
+++ b/src/front/Components/DesignSystem/FilePreview/index.tsx
@@ -26,7 +26,7 @@ export default class FilePreview extends React.Component<IProps, IState> {
 				{this.props.href && (
 					<>
 						{!type && (
-							<Typography typo={ITypo.H1} color={ITypoColor.BLACK}>
+							<Typography typo={ITypo.H1} color={ITypoColor.COLOR_GENERIC_BLACK}>
 								Erreur lors du chargement du fichier
 							</Typography>
 						)}
diff --git a/src/front/Components/DesignSystem/FolderArchivedListContainer/classes.module.scss b/src/front/Components/DesignSystem/FolderArchivedListContainer/classes.module.scss
index 98e9d101..4ba15488 100644
--- a/src/front/Components/DesignSystem/FolderArchivedListContainer/classes.module.scss
+++ b/src/front/Components/DesignSystem/FolderArchivedListContainer/classes.module.scss
@@ -18,6 +18,6 @@
 		max-height: calc(100vh - 215px);
 		height: calc(100vh - 215px);
 		overflow: auto;
-		border-right: 1px solid var(--grey-medium);
+		border-right: 1px solid var(--color-neutral-200);
 	}
 }
diff --git a/src/front/Components/DesignSystem/FolderBoxInformation/classes.module.scss b/src/front/Components/DesignSystem/FolderBoxInformation/classes.module.scss
index 0d828c7d..4e1fcd0a 100644
--- a/src/front/Components/DesignSystem/FolderBoxInformation/classes.module.scss
+++ b/src/front/Components/DesignSystem/FolderBoxInformation/classes.module.scss
@@ -1,7 +1,7 @@
 @import "@Themes/constants.scss";
 
 .root {
-	background-color: var(--grey-soft);
+	background-color: var(--color-neutral-50);
 	padding: 24px;
 	width: 100%;
 	display: flex;
diff --git a/src/front/Components/DesignSystem/FolderContainer/classes.module.scss b/src/front/Components/DesignSystem/FolderContainer/classes.module.scss
index 989c0eca..302d29e1 100644
--- a/src/front/Components/DesignSystem/FolderContainer/classes.module.scss
+++ b/src/front/Components/DesignSystem/FolderContainer/classes.module.scss
@@ -6,11 +6,11 @@
 	align-items: center;
 	width: 100%;
 	padding: 24px;
-	border: 1px solid $grey-medium;
+	border: 1px solid $color-neutral-200;
 	cursor: pointer;
 
 	&:hover {
-		background-color: $grey-medium;
+		background-color: $color-neutral-200;
 	}
 
 	.left-side {
diff --git a/src/front/Components/DesignSystem/FolderList/classes.module.scss b/src/front/Components/DesignSystem/FolderList/classes.module.scss
index d8013f29..b1bf1c69 100644
--- a/src/front/Components/DesignSystem/FolderList/classes.module.scss
+++ b/src/front/Components/DesignSystem/FolderList/classes.module.scss
@@ -4,11 +4,11 @@
 	height: calc(100vh - 290px);
 	overflow-y: scroll;
 
-	&.archived{
+	&.archived {
 		height: calc(100vh - 220px);
 	}
 
 	.active {
-		background-color: var(--grey-medium);
+		background-color: var(--color-neutral-200);
 	}
-}
\ No newline at end of file
+}
diff --git a/src/front/Components/DesignSystem/FolderListContainer/classes.module.scss b/src/front/Components/DesignSystem/FolderListContainer/classes.module.scss
index d787f90f..deb6e813 100644
--- a/src/front/Components/DesignSystem/FolderListContainer/classes.module.scss
+++ b/src/front/Components/DesignSystem/FolderListContainer/classes.module.scss
@@ -18,6 +18,6 @@
 		max-height: calc(100vh - 290px);
 		height: calc(100vh - 290px);
 		overflow: auto;
-		border-right: 1px solid var(--grey-medium);
+		border-right: 1px solid var(--color-neutral-200);
 	}
 }
diff --git a/src/front/Components/DesignSystem/Form/BaseField.tsx b/src/front/Components/DesignSystem/Form/BaseField.tsx
index 05afdf38..76138dfe 100644
--- a/src/front/Components/DesignSystem/Form/BaseField.tsx
+++ b/src/front/Components/DesignSystem/Form/BaseField.tsx
@@ -107,7 +107,7 @@ export default abstract class BaseField<P extends IProps, S extends IState = ISt
 		let errors: JSX.Element[] = [];
 		Object.entries(this.state.validationError.constraints).forEach(([key, value]) => {
 			errors.push(
-				<Typography key={key} typo={ITypo.CAPTION_14} color={ITypoColor.RED_FLASH}>
+				<Typography key={key} typo={ITypo.CAPTION_14} color={ITypoColor.COLOR_ERROR_600}>
 					{value}
 				</Typography>,
 			);
diff --git a/src/front/Components/DesignSystem/Form/DateField/classes.module.scss b/src/front/Components/DesignSystem/Form/DateField/classes.module.scss
index 0fda11ae..bac68da9 100644
--- a/src/front/Components/DesignSystem/Form/DateField/classes.module.scss
+++ b/src/front/Components/DesignSystem/Form/DateField/classes.module.scss
@@ -12,7 +12,7 @@
 		gap: 10px;
 		width: 100%;
 		height: 70px;
-		border: 1px solid var(--grey-medium);
+		border: 1px solid var(--color-neutral-200);
 
 		&:disabled {
 			cursor: not-allowed;
@@ -76,16 +76,16 @@
 			padding: 0 16px;
 			pointer-events: none;
 			position: absolute;
-			background: $white;
+			background: $color-generic-white;
 			transition: transform 0.3s ease-in-out;
 		}
 	}
 
 	&[data-is-errored="true"] {
 		.input {
-			border: 1px solid var(--red-flash);
+			border: 1px solid var(--color-error-600);
 			~ .fake-placeholder {
-				color: var(--red-flash);
+				color: var(--color-error-600);
 			}
 		}
 	}
diff --git a/src/front/Components/DesignSystem/Form/DateField/index.tsx b/src/front/Components/DesignSystem/Form/DateField/index.tsx
index 0c0e892a..884b8454 100644
--- a/src/front/Components/DesignSystem/Form/DateField/index.tsx
+++ b/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.NAV_INPUT_16} color={ITypoColor.GREY}>
+			<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.COLOR_NEUTRAL_500}>
 				<div className={classes["root"]} data-is-errored={this.hasError().toString()}>
 					<input
 						onChange={this.onChange}
diff --git a/src/front/Components/DesignSystem/Form/SelectField/classes.module.scss b/src/front/Components/DesignSystem/Form/SelectField/classes.module.scss
index 71fc840a..d1dedc0e 100644
--- a/src/front/Components/DesignSystem/Form/SelectField/classes.module.scss
+++ b/src/front/Components/DesignSystem/Form/SelectField/classes.module.scss
@@ -5,14 +5,14 @@
 	position: relative;
 	flex-direction: column;
 	width: 100%;
-	border: 1px solid var(--grey-medium);
+	border: 1px solid var(--color-neutral-200);
 
-	&[data-errored="true"]{
-		border: 1px solid var(--red-flash);
+	&[data-errored="true"] {
+		border: 1px solid var(--color-error-600);
 	}
-	
-	&[data-disabled="true"]{
-		.container-label{
+
+	&[data-disabled="true"] {
+		.container-label {
 			cursor: not-allowed;
 		}
 		opacity: 0.6;
@@ -23,13 +23,11 @@
 		justify-content: space-between;
 		align-items: center;
 		width: 100%;
-		background-color: $white;
+		background-color: $color-generic-white;
 		cursor: pointer;
 		padding: 24px;
 		z-index: 1;
 
-		
-
 		&[data-border-right-collapsed="true"] {
 			border-radius: 8px 0 0 8px;
 		}
@@ -52,7 +50,7 @@
 				position: absolute;
 				top: 24px;
 				left: 8px;
-				background-color: $white;
+				background-color: $color-generic-white;
 				padding: 0 16px;
 
 				&[data-open="true"] {
@@ -64,7 +62,7 @@
 		.chevron-icon {
 			height: 24px;
 
-			fill: $grey;
+			fill: $color-neutral-500;
 			transition: all 350ms $custom-easing;
 			transform: rotate(90deg);
 
@@ -87,7 +85,7 @@
 		opacity: 1;
 		overflow: hidden;
 		top: 50px;
-		background-color: $white;
+		background-color: $color-generic-white;
 
 		&[data-open="false"] {
 			height: 0;
diff --git a/src/front/Components/DesignSystem/Form/SelectField/index.tsx b/src/front/Components/DesignSystem/Form/SelectField/index.tsx
index dc0e4479..cbde014c 100644
--- a/src/front/Components/DesignSystem/Form/SelectField/index.tsx
+++ b/src/front/Components/DesignSystem/Form/SelectField/index.tsx
@@ -199,7 +199,7 @@ class SelectFieldClass extends React.Component<IPropsClass, IState> {
 	private renderErrors(): JSX.Element | null {
 		if (!this.state.errors) return null;
 		return (
-			<Typography typo={ITypo.CAPTION_14} color={ITypoColor.RED_FLASH}>
+			<Typography typo={ITypo.CAPTION_14} color={ITypoColor.COLOR_ERROR_600}>
 				{this.props.placeholder} ne peut pas être vide
 			</Typography>
 		);
diff --git a/src/front/Components/DesignSystem/Form/TextField/classes.module.scss b/src/front/Components/DesignSystem/Form/TextField/classes.module.scss
index 0fda11ae..bac68da9 100644
--- a/src/front/Components/DesignSystem/Form/TextField/classes.module.scss
+++ b/src/front/Components/DesignSystem/Form/TextField/classes.module.scss
@@ -12,7 +12,7 @@
 		gap: 10px;
 		width: 100%;
 		height: 70px;
-		border: 1px solid var(--grey-medium);
+		border: 1px solid var(--color-neutral-200);
 
 		&:disabled {
 			cursor: not-allowed;
@@ -76,16 +76,16 @@
 			padding: 0 16px;
 			pointer-events: none;
 			position: absolute;
-			background: $white;
+			background: $color-generic-white;
 			transition: transform 0.3s ease-in-out;
 		}
 	}
 
 	&[data-is-errored="true"] {
 		.input {
-			border: 1px solid var(--red-flash);
+			border: 1px solid var(--color-error-600);
 			~ .fake-placeholder {
-				color: var(--red-flash);
+				color: var(--color-error-600);
 			}
 		}
 	}
diff --git a/src/front/Components/DesignSystem/Form/TextField/index.tsx b/src/front/Components/DesignSystem/Form/TextField/index.tsx
index bb83fbf2..ad360cbb 100644
--- a/src/front/Components/DesignSystem/Form/TextField/index.tsx
+++ b/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.NAV_INPUT_16} color={ITypoColor.GREY}>
+			<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.COLOR_NEUTRAL_500}>
 				<div className={classes["root"]} data-is-errored={this.hasError().toString()}>
 					<input
 						onChange={this.onChange}
diff --git a/src/front/Components/DesignSystem/Form/TextareaField/classes.module.scss b/src/front/Components/DesignSystem/Form/TextareaField/classes.module.scss
index 7f4eb680..e3a2701b 100644
--- a/src/front/Components/DesignSystem/Form/TextareaField/classes.module.scss
+++ b/src/front/Components/DesignSystem/Form/TextareaField/classes.module.scss
@@ -25,7 +25,7 @@
 
 		width: 100%;
 		height: 100px;
-		border: 1px solid var(--grey-medium);
+		border: 1px solid var(--color-neutral-200);
 
 		~ .fake-placeholder {
 			z-index: 2;
@@ -34,7 +34,7 @@
 			padding: 0 16px;
 			pointer-events: none;
 			position: absolute;
-			background: $white;
+			background: $color-generic-white;
 			transform: translateY(35px);
 			transition: transform 0.3s ease-in-out;
 		}
@@ -54,9 +54,9 @@
 
 	&[data-is-errored="true"] {
 		.textarea {
-			border: 1px solid var(--red-flash);
+			border: 1px solid var(--color-error-600);
 			~ .fake-placeholder {
-				color: var(--red-flash);
+				color: var(--color-error-600);
 			}
 		}
 	}
diff --git a/src/front/Components/DesignSystem/Form/TextareaField/index.tsx b/src/front/Components/DesignSystem/Form/TextareaField/index.tsx
index 43dd9c75..12ac5508 100644
--- a/src/front/Components/DesignSystem/Form/TextareaField/index.tsx
+++ b/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.NAV_INPUT_16} color={ITypoColor.GREY}>
+			<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.COLOR_NEUTRAL_500}>
 				<div className={classes["root"]} data-is-errored={this.hasError().toString()}>
 					<textarea
 						name={this.props.name}
diff --git a/src/front/Components/DesignSystem/Header/BurgerMenu/BurgerModal/classes.module.scss b/src/front/Components/DesignSystem/Header/BurgerMenu/BurgerModal/classes.module.scss
index 0887c82f..10a680ac 100644
--- a/src/front/Components/DesignSystem/Header/BurgerMenu/BurgerModal/classes.module.scss
+++ b/src/front/Components/DesignSystem/Header/BurgerMenu/BurgerModal/classes.module.scss
@@ -3,7 +3,7 @@
 .root {
 	display: flex;
 	flex-direction: column;
-	background-color: $white;
+	background-color: $color-generic-white;
 	box-shadow: $shadow-nav;
 	padding: 24px;
 	position: absolute;
@@ -19,7 +19,7 @@
 
 	.separator {
 		width: 100%;
-		border: 1px solid $grey-medium;
+		border: 1px solid $color-neutral-200;
 	}
 }
 
diff --git a/src/front/Components/DesignSystem/Header/HeaderLink/classes.module.scss b/src/front/Components/DesignSystem/Header/HeaderLink/classes.module.scss
index 7c99c34f..082128ea 100644
--- a/src/front/Components/DesignSystem/Header/HeaderLink/classes.module.scss
+++ b/src/front/Components/DesignSystem/Header/HeaderLink/classes.module.scss
@@ -14,13 +14,13 @@
 	.underline {
 		width: 100%;
 		height: 3px;
-		background-color: $white;
+		background-color: $color-generic-white;
 		position: absolute;
 		bottom: 0;
 		left: 0;
 
 		&[data-active="true"] {
-			background-color: $black;
+			background-color: $color-generic-black;
 		}
 	}
 
diff --git a/src/front/Components/DesignSystem/Header/HeaderSubmenu/classes.module.scss b/src/front/Components/DesignSystem/Header/HeaderSubmenu/classes.module.scss
index c631e11e..1fa4e0c9 100644
--- a/src/front/Components/DesignSystem/Header/HeaderSubmenu/classes.module.scss
+++ b/src/front/Components/DesignSystem/Header/HeaderSubmenu/classes.module.scss
@@ -13,13 +13,13 @@
 	.underline {
 		width: 100%;
 		height: 3px;
-		background-color: $white;
+		background-color: $color-generic-white;
 		position: absolute;
 		bottom: 0;
 		left: 0;
 
 		&[data-active="true"] {
-			background-color: $black;
+			background-color: $color-generic-black;
 		}
 	}
 
diff --git a/src/front/Components/DesignSystem/Header/Notifications/NotificationModal/classes.module.scss b/src/front/Components/DesignSystem/Header/Notifications/NotificationModal/classes.module.scss
index 1e7bcdf7..0a697368 100644
--- a/src/front/Components/DesignSystem/Header/Notifications/NotificationModal/classes.module.scss
+++ b/src/front/Components/DesignSystem/Header/Notifications/NotificationModal/classes.module.scss
@@ -5,7 +5,7 @@
 	flex-direction: column;
 	width: 390px;
 	max-height: 80vh;
-	background-color: $white;
+	background-color: $color-generic-white;
 	box-shadow: $shadow-nav;
 	padding: 24px;
 	position: absolute;
@@ -37,7 +37,7 @@
 		gap: 8px;
 		text-decoration: underline;
 		text-underline-offset: 2px;
-		color: var(--pink-flash);
+		color: var(--color-secondary-500);
 		cursor: pointer;
 	}
 
diff --git a/src/front/Components/DesignSystem/Header/Notifications/NotificationModal/index.tsx b/src/front/Components/DesignSystem/Header/Notifications/NotificationModal/index.tsx
index 56c15f11..589c0e52 100644
--- a/src/front/Components/DesignSystem/Header/Notifications/NotificationModal/index.tsx
+++ b/src/front/Components/DesignSystem/Header/Notifications/NotificationModal/index.tsx
@@ -40,16 +40,16 @@ export default class NotificationModal extends React.Component<IProps, IState> {
 						</div>
 					</div>
 					<div className={classes["notification-subheader"]} onClick={this.readAllNotifications}>
-						<Typography typo={ITypo.CAPTION_14} color={ITypoColor.PINK_FLASH}>
+						<Typography typo={ITypo.CAPTION_14} color={ITypoColor.COLOR_SECONDARY_500}>
 							Tout marquer comme lu
 						</Typography>
-						<Check color={ITypoColor.PINK_FLASH} />
+						<Check color={ITypoColor.COLOR_SECONDARY_500} />
 					</div>
 					<div className={classes["notification-body"]}>
 						<>
 							{!this.state.toastList || this.state.toastList.length === 0 ? (
 								<div className={classes["missing-notification"]}>
-									<Typography typo={ITypo.P_18} color={ITypoColor.GREY}>
+									<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_NEUTRAL_500}>
 										Vous n'avez pas de notifications.
 									</Typography>
 								</div>
diff --git a/src/front/Components/DesignSystem/Header/Profile/ProfileModal/classes.module.scss b/src/front/Components/DesignSystem/Header/Profile/ProfileModal/classes.module.scss
index 3272c0e1..fe11828d 100644
--- a/src/front/Components/DesignSystem/Header/Profile/ProfileModal/classes.module.scss
+++ b/src/front/Components/DesignSystem/Header/Profile/ProfileModal/classes.module.scss
@@ -3,7 +3,7 @@
 .root {
 	display: flex;
 	flex-direction: column;
-	background-color: $white;
+	background-color: $color-generic-white;
 	box-shadow: $shadow-nav;
 	padding: 24px;
 	position: absolute;
@@ -27,7 +27,7 @@
 
 	.separator {
 		width: 100%;
-		border: 1px solid $grey-medium;
+		border: 1px solid $color-neutral-200;
 	}
 }
 
diff --git a/src/front/Components/DesignSystem/Header/classes.module.scss b/src/front/Components/DesignSystem/Header/classes.module.scss
index 96182b24..dda80b19 100644
--- a/src/front/Components/DesignSystem/Header/classes.module.scss
+++ b/src/front/Components/DesignSystem/Header/classes.module.scss
@@ -5,7 +5,7 @@
 	align-items: center;
 	justify-content: space-between;
 	height: 83px;
-	background-color: $white;
+	background-color: $color-generic-white;
 	box-shadow: $shadow-nav;
 	padding: 0 48px;
 	position: sticky;
@@ -81,6 +81,6 @@
 	gap: 8px;
 	justify-content: center;
 	align-items: center;
-	background-color: var(--grey-soft);
+	background-color: var(--color-neutral-50);
 	padding: 14px 0;
 }
diff --git a/src/front/Components/DesignSystem/Header/index.tsx b/src/front/Components/DesignSystem/Header/index.tsx
index c5d7cfe5..f21c0c50 100644
--- a/src/front/Components/DesignSystem/Header/index.tsx
+++ b/src/front/Components/DesignSystem/Header/index.tsx
@@ -114,7 +114,7 @@ class HeaderClass extends React.Component<IPropsClass, IState> {
 				{this.state.cancelAt && (
 					<div className={classes["subscription-line"]}>
 						<InformationCircleIcon height="24" />;
-						<Typography typo={ITypo.P_16} color={ITypoColor.BLACK}>
+						<Typography typo={ITypo.P_16} color={ITypoColor.COLOR_GENERIC_BLACK}>
 							Assurez vous de sauvegarder tout ce dont vous avez besoin avant la fin de votre abonnement le{" "}
 							{this.state.cancelAt.toLocaleDateString()}.
 						</Typography>
diff --git a/src/front/Components/DesignSystem/Loader/classes.module.scss b/src/front/Components/DesignSystem/Loader/classes.module.scss
index e2169b11..1be2f0b0 100644
--- a/src/front/Components/DesignSystem/Loader/classes.module.scss
+++ b/src/front/Components/DesignSystem/Loader/classes.module.scss
@@ -9,7 +9,7 @@
 	height: 100%;
 	border-radius: 50%;
 	border: 8px solid;
-	border-color: var(--grey-soft);
-	border-right-color: var(--blue-soft);
+	border-color: var(--color-neutral-50);
+	border-right-color: var(--color-info-500-soft);
 	animation: s2 1s infinite linear;
 }
diff --git a/src/front/Components/DesignSystem/Modal/classes.module.scss b/src/front/Components/DesignSystem/Modal/classes.module.scss
index a247e517..b2bf7912 100644
--- a/src/front/Components/DesignSystem/Modal/classes.module.scss
+++ b/src/front/Components/DesignSystem/Modal/classes.module.scss
@@ -51,7 +51,7 @@
 		position: relative;
 		width: 610px;
 		max-height: 90%;
-		background: $white;
+		background: $color-generic-white;
 		box-shadow: 0px 6px 12px rgba(255, 255, 255, 0.11);
 		overflow: auto;
 		padding: 32px;
diff --git a/src/front/Components/DesignSystem/MultiSelect/classes.module.scss b/src/front/Components/DesignSystem/MultiSelect/classes.module.scss
index 807ead05..449f38c9 100644
--- a/src/front/Components/DesignSystem/MultiSelect/classes.module.scss
+++ b/src/front/Components/DesignSystem/MultiSelect/classes.module.scss
@@ -7,7 +7,7 @@
 		flex-direction: column;
 		flex: 1;
 		position: relative;
-		border: 1px solid $grey-medium;
+		border: 1px solid $color-neutral-200;
 		background-color: transparent;
 
 		.placeholder {
@@ -66,12 +66,12 @@
 			z-index: 1;
 			padding: 0 16px;
 		}
-		
+
 		&[data-is-errored="true"] {
 			.input {
-				border: 1px solid var(--red-flash);
+				border: 1px solid var(--color-error-600);
 				~ .fake-placeholder {
-					color: var(--red-flash);
+					color: var(--color-error-600);
 				}
 			}
 		}
diff --git a/src/front/Components/DesignSystem/MultiSelect/index.tsx b/src/front/Components/DesignSystem/MultiSelect/index.tsx
index 327b7c11..a4247866 100644
--- a/src/front/Components/DesignSystem/MultiSelect/index.tsx
+++ b/src/front/Components/DesignSystem/MultiSelect/index.tsx
@@ -37,8 +37,7 @@ export default class MultiSelect extends React.Component<IProps, IState> {
 		this.state = {
 			isFocused: false,
 			selectedOptions: [],
-			validationError: this.props.validationError ?? null
-
+			validationError: this.props.validationError ?? null,
 		};
 		this.hasError = this.hasError.bind(this);
 		this.onChange = this.onChange.bind(this);
@@ -147,7 +146,7 @@ export default class MultiSelect extends React.Component<IProps, IState> {
 		let errors: JSX.Element[] = [];
 		Object.entries(this.state.validationError.constraints).forEach(([key, value]) => {
 			errors.push(
-				<Typography key={key} typo={ITypo.CAPTION_14} color={ITypoColor.RED_FLASH}>
+				<Typography key={key} typo={ITypo.CAPTION_14} color={ITypoColor.COLOR_ERROR_600}>
 					{value}
 				</Typography>,
 			);
diff --git a/src/front/Components/DesignSystem/Newsletter/index.tsx b/src/front/Components/DesignSystem/Newsletter/index.tsx
index b27c3c34..4a1f3918 100644
--- a/src/front/Components/DesignSystem/Newsletter/index.tsx
+++ b/src/front/Components/DesignSystem/Newsletter/index.tsx
@@ -70,22 +70,22 @@ export default class Newsletter extends React.Component<IProps, IState> {
 					<div className={classes["container"]}>
 						<div className={classes["root"]}>
 							<div className={classes["text"]}>
-								<Typography typo={ITypo.H3} color={ITypoColor.WHITE}>
+								<Typography typo={ITypo.H3} color={ITypoColor.COLOR_GENERIC_WHITE}>
 									Restez Informé(e) avec notre Newsletter
 								</Typography>
-								<Typography typo={ITypo.P_18} color={ITypoColor.WHITE}>
+								<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_GENERIC_WHITE}>
 									Ne manquez aucune de nos actualités, promotions exclusives et conseils d'experts !
 								</Typography>
 								{this.state.errorMessage && (
 									<div>
-										<Typography typo={ITypo.P_ERR_16} color={ITypoColor.RED_FLASH}>
+										<Typography typo={ITypo.P_ERR_16} color={ITypoColor.COLOR_ERROR_600}>
 											{this.state.errorMessage}
 										</Typography>
 									</div>
 								)}
 								{this.state.successMessage && (
 									<div>
-										<Typography typo={ITypo.P_16} color={ITypoColor.GREEN_FLASH}>
+										<Typography typo={ITypo.P_16} color={ITypoColor.COLOR_SUCCESS_600}>
 											{this.state.successMessage}
 										</Typography>
 									</div>
diff --git a/src/front/Components/DesignSystem/QuantityProgressBar/ProgressBar/classes.module.scss b/src/front/Components/DesignSystem/QuantityProgressBar/ProgressBar/classes.module.scss
index a6192f4c..67a147c5 100644
--- a/src/front/Components/DesignSystem/QuantityProgressBar/ProgressBar/classes.module.scss
+++ b/src/front/Components/DesignSystem/QuantityProgressBar/ProgressBar/classes.module.scss
@@ -2,7 +2,7 @@
 
 .root {
 	position: relative;
-	background-color: $grey-medium;
+	background-color: $color-neutral-200;
 	box-shadow: inset 0px 4px 8px rgba(0, 0, 0, 0.08);
 	height: 12px;
 	border-radius: 5px;
@@ -15,7 +15,7 @@
 	width: 100%;
 	height: 100%;
 	transition: width 300ms;
-	background-color: $turquoise-flash;
+	background-color: $color-secondary-500;
 
 	.percentage {
 		width: 0;
diff --git a/src/front/Components/DesignSystem/RadioBox/classes.module.scss b/src/front/Components/DesignSystem/RadioBox/classes.module.scss
index a464e51e..3e1d0397 100644
--- a/src/front/Components/DesignSystem/RadioBox/classes.module.scss
+++ b/src/front/Components/DesignSystem/RadioBox/classes.module.scss
@@ -11,7 +11,7 @@
 		background-color: transparent;
 		width: 15px;
 		height: 15px;
-		border: 1px solid $turquoise-flash;
+		border: 1px solid $color-secondary-500;
 		border-radius: 100px;
 		margin-right: 16px;
 		display: flex;
@@ -25,7 +25,7 @@
 		content: "";
 		width: 11px;
 		height: 11px;
-		background-color: $turquoise-flash;
+		background-color: $color-secondary-500;
 		border-radius: 100px;
 		transform: scale(0);
 	}
diff --git a/src/front/Components/DesignSystem/RadioBox/index.tsx b/src/front/Components/DesignSystem/RadioBox/index.tsx
index f41d50ce..3818ba53 100644
--- a/src/front/Components/DesignSystem/RadioBox/index.tsx
+++ b/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.P_ERR_18} color={ITypoColor.BLACK}>
+			<Typography typo={ITypo.P_ERR_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
 				<label className={classes["root"]}>
 					<input
 						type="radio"
diff --git a/src/front/Components/DesignSystem/SearchBar/classes.module.scss b/src/front/Components/DesignSystem/SearchBar/classes.module.scss
index faba3ff0..a36281f1 100644
--- a/src/front/Components/DesignSystem/SearchBar/classes.module.scss
+++ b/src/front/Components/DesignSystem/SearchBar/classes.module.scss
@@ -4,15 +4,15 @@
 	display: flex;
 	align-items: center;
 	padding-left: 24px;
-	background-color: $white;
-	border: 1px solid $grey-medium;
+	background-color: $color-generic-white;
+	border: 1px solid $color-neutral-200;
 	position: relative;
 
 	.fake-placeholder {
 		position: absolute;
 		left: 47px;
 		top: 24px;
-		color: $grey;
+		color: $color-neutral-500;
 		pointer-events: none;
 	}
 
@@ -26,6 +26,6 @@
 		font-weight: 400;
 		font-size: 18px;
 		line-height: 22px;
-		color: $grey;
+		color: $color-neutral-500;
 	}
 }
diff --git a/src/front/Components/DesignSystem/Switch/classes.module.scss b/src/front/Components/DesignSystem/Switch/classes.module.scss
index 21873d6a..40061b99 100644
--- a/src/front/Components/DesignSystem/Switch/classes.module.scss
+++ b/src/front/Components/DesignSystem/Switch/classes.module.scss
@@ -8,17 +8,17 @@
 		cursor: not-allowed;
 		opacity: 0.5;
 	}
-	
+
 	.switch-container {
 		position: relative;
 		width: 46px;
 		height: 24px;
-		background-color: var(--grey-medium);
+		background-color: var(--color-neutral-200);
 		border-radius: 64px;
 
 		transition: all 200ms ease-in-out;
 		&[data-checked="true"] {
-			background-color: var(--turquoise-flash);
+			background-color: var(--color-secondary-500);
 
 			.round {
 				left: 24px;
diff --git a/src/front/Components/DesignSystem/Switch/index.tsx b/src/front/Components/DesignSystem/Switch/index.tsx
index c2b10c85..fa9cd2ff 100644
--- a/src/front/Components/DesignSystem/Switch/index.tsx
+++ b/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.P_ERR_16} color={ITypoColor.BLACK}>
+			<Typography typo={ITypo.P_ERR_16} color={ITypoColor.COLOR_GENERIC_BLACK}>
 				{label}
 			</Typography>
 		</div>
diff --git a/src/front/Components/DesignSystem/Toasts/ToastsContainer/ToastElement/classes.module.scss b/src/front/Components/DesignSystem/Toasts/ToastsContainer/ToastElement/classes.module.scss
index 73aceb7f..d5790631 100644
--- a/src/front/Components/DesignSystem/Toasts/ToastsContainer/ToastElement/classes.module.scss
+++ b/src/front/Components/DesignSystem/Toasts/ToastsContainer/ToastElement/classes.module.scss
@@ -26,7 +26,7 @@
 	pointer-events: all;
 	position: relative;
 	padding: 24px;
-	background: var(--orange-soft);
+	background: var(--color-warning-500-soft);
 	box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.11);
 	border-radius: 5px;
 
@@ -45,7 +45,7 @@
 	&[data-clickable="true"] {
 		cursor: pointer;
 		&:hover {
-			background: var(--orange-soft-hover);
+			background: var(--color-warning-500-soft);
 		}
 	}
 
diff --git a/src/front/Components/DesignSystem/Toasts/ToastsContainer/ToastElement/index.tsx b/src/front/Components/DesignSystem/Toasts/ToastsContainer/ToastElement/index.tsx
index f13a04a5..5865b314 100644
--- a/src/front/Components/DesignSystem/Toasts/ToastsContainer/ToastElement/index.tsx
+++ b/src/front/Components/DesignSystem/Toasts/ToastsContainer/ToastElement/index.tsx
@@ -83,7 +83,7 @@ class ToastElementClass extends React.Component<IPropsClass, IState> {
 		if (typeof text === "string") {
 			return (
 				<div className={classes["text-container"]}>
-					<Typography typo={ITypo.CAPTION_14} color={ITypoColor.GREY}>
+					<Typography typo={ITypo.CAPTION_14} color={ITypoColor.COLOR_NEUTRAL_500}>
 						{text}
 					</Typography>
 				</div>
diff --git a/src/front/Components/DesignSystem/ToolTip/Content/classes.module.scss b/src/front/Components/DesignSystem/ToolTip/Content/classes.module.scss
index 8152d619..8bffcf6c 100644
--- a/src/front/Components/DesignSystem/ToolTip/Content/classes.module.scss
+++ b/src/front/Components/DesignSystem/ToolTip/Content/classes.module.scss
@@ -3,7 +3,7 @@
 .root {
 	min-width: 100px;
 	max-width: 320px;
-	background: $white;
+	background: $color-generic-white;
 	border-radius: 5px !important;
 	position: fixed;
 	transition: opacity 0.2s ease-in-out;
@@ -29,5 +29,5 @@
 	position: absolute;
 	right: 20px;
 	margin-top: -4px;
-	fill: $white;
+	fill: $color-generic-white;
 }
diff --git a/src/front/Components/DesignSystem/ToolTip/index.tsx b/src/front/Components/DesignSystem/ToolTip/index.tsx
index a843ef6a..764b019f 100644
--- a/src/front/Components/DesignSystem/ToolTip/index.tsx
+++ b/src/front/Components/DesignSystem/ToolTip/index.tsx
@@ -19,8 +19,8 @@ type IState = {
 const LightTooltip = styled(({ className, ...props }: TooltipProps) => <TooltipMUI {...props} classes={{ popper: className }} />)(
 	({ theme }) => ({
 		[`& .${tooltipClasses.tooltip}`]: {
-			backgroundColor: "var(--white)",
-			color: "var(--black)",
+			backgroundColor: "var(--color-generic-white)",
+			color: "var(--color-generic-black)",
 			boxShadow: "0px 4px 24px 0px #00000026",
 			fontSize: 14,
 			fontWeight: 400,
@@ -30,7 +30,7 @@ const LightTooltip = styled(({ className, ...props }: TooltipProps) => <TooltipM
 			borderRadius: "0px",
 		},
 		[`& .${tooltipClasses.arrow}`]: {
-			color: "var(--white)",
+			color: "var(--color-generic-white)",
 		},
 	}),
 );
diff --git a/src/front/Components/DesignSystem/Typography/classes.module.scss b/src/front/Components/DesignSystem/Typography/classes.module.scss
index e3b047b2..7596398d 100644
--- a/src/front/Components/DesignSystem/Typography/classes.module.scss
+++ b/src/front/Components/DesignSystem/Typography/classes.module.scss
@@ -2,7 +2,7 @@
 @import "@Themes/modes.scss";
 
 .root {
-	color: $black;
+	color: $color-generic-black;
 	vertical-align: center;
 	font-family: "Inter", sans-serif;
 	&.H1-60 {
@@ -67,7 +67,7 @@
 		font-size: 18px;
 		line-height: 22px;
 		letter-spacing: 0.5px;
-		color: $grey;
+		color: $color-neutral-500;
 	}
 
 	&.Paragraphe-18-error {
@@ -92,7 +92,7 @@
 		font-size: 16px;
 		line-height: 22px;
 		letter-spacing: 0.5px;
-		color: $grey;
+		color: $color-neutral-500;
 	}
 
 	&.Paragraphe-simple-16 {
@@ -104,7 +104,7 @@
 	}
 
 	&.Paragraphe-16-error {
-		color: $re-hover;
+		color: $color-error-800;
 		font-style: normal;
 		font-weight: 400;
 		font-size: 16px;
@@ -128,39 +128,39 @@
 		letter-spacing: 0.5px;
 	}
 
-	&.re-hover {
-		color: $re-hover;
+	&.color-error-800 {
+		color: $color-error-800;
 	}
 
-	&.grey {
-		color: $grey;
+	&.color-neutral-500 {
+		color: $color-neutral-500;
 	}
 
-	&.black {
-		color: $black;
+	&.color-generic-black {
+		color: $color-generic-black;
 	}
 
-	&.purple-flash {
-		color: var(--purple-flash);
+	&.color-primary-500 {
+		color: var(--color-primary-500);
 	}
 
-	&.pink-flash {
-		color: var(--pink-flash);
+	&.color-secondary-500 {
+		color: var(--color-secondary-500);
 	}
 
-	&.green-flash {
-		color: var(--green-flash);
+	&.color-success-600 {
+		color: var(--color-success-600);
 	}
 
-	&.red-flash {
-		color: var(--red-flash);
+	&.color-error-600 {
+		color: var(--color-error-600);
 	}
 
-	&.orange-flash {
-		color: var(--orange-flash);
+	&.color-warning-500 {
+		color: var(--color-warning-500);
 	}
 
 	&.white {
-		color: $white;
+		color: $color-generic-white;
 	}
 }
diff --git a/src/front/Components/DesignSystem/Typography/index.tsx b/src/front/Components/DesignSystem/Typography/index.tsx
index 1cc80368..cc932d1c 100644
--- a/src/front/Components/DesignSystem/Typography/index.tsx
+++ b/src/front/Components/DesignSystem/Typography/index.tsx
@@ -33,15 +33,15 @@ export enum ITypo {
 }
 
 export enum ITypoColor {
-	RE_HOVER = "re-hover",
-	GREY = "grey",
-	BLACK = "black",
-	PURPLE_FLASH = "purple-flash",
-	PINK_FLASH = "pink-flash",
-	GREEN_FLASH = "green-flash",
-	ORANGE_FLASH = "orange-flash",
-	RED_FLASH = "red-flash",
-	WHITE = "white",
+	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",
 }
 
 export default class Typography extends React.Component<IProps, IState> {
diff --git a/src/front/Components/DesignSystem/UserFolder/UserFolderHeader/classes.module.scss b/src/front/Components/DesignSystem/UserFolder/UserFolderHeader/classes.module.scss
index 3796fff5..5856ca57 100644
--- a/src/front/Components/DesignSystem/UserFolder/UserFolderHeader/classes.module.scss
+++ b/src/front/Components/DesignSystem/UserFolder/UserFolderHeader/classes.module.scss
@@ -5,7 +5,7 @@
 	align-items: center;
 	justify-content: space-between;
 	padding: 24px;
-	background-color: var(--grey-soft);
+	background-color: var(--color-neutral-50);
 	width: 100%;
 	gap: 32px;
 	.content {
diff --git a/src/front/Components/DesignSystem/UserFolder/classes.module.scss b/src/front/Components/DesignSystem/UserFolder/classes.module.scss
index 2b965a52..1885438b 100644
--- a/src/front/Components/DesignSystem/UserFolder/classes.module.scss
+++ b/src/front/Components/DesignSystem/UserFolder/classes.module.scss
@@ -21,7 +21,7 @@
 }
 
 .root {
-	border: 1px solid $grey;
+	border: 1px solid $color-neutral-500;
 	padding: 16px;
 	transition: all 350ms $custom-easing;
 
diff --git a/src/front/Components/DesignSystem/Version/index.tsx b/src/front/Components/DesignSystem/Version/index.tsx
index 1f145ccc..468e40f5 100644
--- a/src/front/Components/DesignSystem/Version/index.tsx
+++ b/src/front/Components/DesignSystem/Version/index.tsx
@@ -10,7 +10,7 @@ export default class Version extends React.Component<IProps, IState> {
 	public override render(): JSX.Element {
 		return (
 			<div className={classes["root"]}>
-				<Typography typo={ITypo.P_16} color={ITypoColor.GREY}>
+				<Typography typo={ITypo.P_16} color={ITypoColor.COLOR_NEUTRAL_500}>
 					<div>{VersionFile.version}</div>
 				</Typography>
 			</div>
diff --git a/src/front/Components/DesignSystem/WarningBadge/classes.module.scss b/src/front/Components/DesignSystem/WarningBadge/classes.module.scss
index 083713c8..fd811cde 100644
--- a/src/front/Components/DesignSystem/WarningBadge/classes.module.scss
+++ b/src/front/Components/DesignSystem/WarningBadge/classes.module.scss
@@ -1,7 +1,7 @@
 @import "@Themes/constants.scss";
 
 .root {
-	background-color: $orange-flash;
+	background-color: $color-warning-500;
 	padding: 6px;
 	border-radius: 20px;
 }
diff --git a/src/front/Components/Elements/MessageBox/classes.module.scss b/src/front/Components/Elements/MessageBox/classes.module.scss
index 1c1c16d6..4e64d327 100644
--- a/src/front/Components/Elements/MessageBox/classes.module.scss
+++ b/src/front/Components/Elements/MessageBox/classes.module.scss
@@ -20,12 +20,12 @@
 	}
 
 	&.success {
-		border: 1px solid var(--green-flash);
+		border: 1px solid var(--color-success-600);
 		background: #12bf4d0d;
 	}
 
 	&.error {
-		border: 1px solid var(--red-soft);
+		border: 1px solid var(--color-error-600-soft);
 		background: #f087711a;
 	}
 }
diff --git a/src/front/Components/LayoutTemplates/DefaultCollaboratorDashboard/CollaboratorListContainer/classes.module.scss b/src/front/Components/LayoutTemplates/DefaultCollaboratorDashboard/CollaboratorListContainer/classes.module.scss
index d04b3680..abe261a4 100644
--- a/src/front/Components/LayoutTemplates/DefaultCollaboratorDashboard/CollaboratorListContainer/classes.module.scss
+++ b/src/front/Components/LayoutTemplates/DefaultCollaboratorDashboard/CollaboratorListContainer/classes.module.scss
@@ -17,7 +17,7 @@
 	.folderlist-container {
 		max-height: calc(100vh - 215px);
 		height: 100%;
-		border-right: 1px solid var(--grey-medium);
+		border-right: 1px solid var(--color-neutral-200);
 		overflow: auto;
 	}
 }
diff --git a/src/front/Components/LayoutTemplates/DefaultCollaboratorDashboard/CollaboratorListContainer/index.tsx b/src/front/Components/LayoutTemplates/DefaultCollaboratorDashboard/CollaboratorListContainer/index.tsx
index 7cc30bb4..792c377e 100644
--- a/src/front/Components/LayoutTemplates/DefaultCollaboratorDashboard/CollaboratorListContainer/index.tsx
+++ b/src/front/Components/LayoutTemplates/DefaultCollaboratorDashboard/CollaboratorListContainer/index.tsx
@@ -59,7 +59,7 @@ export default function CollaboratorListContainer(props: IProps) {
 											height: "12px",
 											width: "12px",
 											borderRadius: "100px",
-											backgroundColor: "var(--green-flash)",
+											backgroundColor: "var(--color-success-600)",
 										}}
 									/>
 								) : (
diff --git a/src/front/Components/LayoutTemplates/DefaultCollaboratorDashboard/classes.module.scss b/src/front/Components/LayoutTemplates/DefaultCollaboratorDashboard/classes.module.scss
index a5ba79a3..bfcc6ff8 100644
--- a/src/front/Components/LayoutTemplates/DefaultCollaboratorDashboard/classes.module.scss
+++ b/src/front/Components/LayoutTemplates/DefaultCollaboratorDashboard/classes.module.scss
@@ -20,14 +20,14 @@
 			position: absolute;
 			width: 100%;
 			height: 100%;
-			background-color: var(--white);
+			background-color: var(--color-generic-white);
 			opacity: 0.5;
 			z-index: 2;
 			transition: all 0.3s $custom-easing;
 		}
 
 		.left-side {
-			background-color: $white;
+			background-color: $color-generic-white;
 			z-index: 3;
 			display: flex;
 			width: 389px;
@@ -60,14 +60,14 @@
 
 		.closable-left-side {
 			position: absolute;
-			background-color: $white;
+			background-color: $color-generic-white;
 			z-index: 0;
 			display: flex;
 			justify-content: center;
 			min-width: 56px;
 			max-width: 56px;
 			height: calc(100vh - 83px);
-			border-right: 1px $grey-medium solid;
+			border-right: 1px $color-neutral-200 solid;
 
 			@media (min-width: $screen-m) {
 				display: none;
diff --git a/src/front/Components/LayoutTemplates/DefaultDeedTypeDashboard/DeedTypeListContainer/classes.module.scss b/src/front/Components/LayoutTemplates/DefaultDeedTypeDashboard/DeedTypeListContainer/classes.module.scss
index 0bd02d2a..a1a8a9b9 100644
--- a/src/front/Components/LayoutTemplates/DefaultDeedTypeDashboard/DeedTypeListContainer/classes.module.scss
+++ b/src/front/Components/LayoutTemplates/DefaultDeedTypeDashboard/DeedTypeListContainer/classes.module.scss
@@ -20,7 +20,7 @@
 		max-height: calc(100vh - 290px);
 		height: calc(100vh - 290px);
 		overflow: auto;
-		border-right: 1px solid var(--grey-medium);
+		border-right: 1px solid var(--color-neutral-200);
 	}
 
 	.create-container {
diff --git a/src/front/Components/LayoutTemplates/DefaultDeedTypeDashboard/classes.module.scss b/src/front/Components/LayoutTemplates/DefaultDeedTypeDashboard/classes.module.scss
index a5ba79a3..bfcc6ff8 100644
--- a/src/front/Components/LayoutTemplates/DefaultDeedTypeDashboard/classes.module.scss
+++ b/src/front/Components/LayoutTemplates/DefaultDeedTypeDashboard/classes.module.scss
@@ -20,14 +20,14 @@
 			position: absolute;
 			width: 100%;
 			height: 100%;
-			background-color: var(--white);
+			background-color: var(--color-generic-white);
 			opacity: 0.5;
 			z-index: 2;
 			transition: all 0.3s $custom-easing;
 		}
 
 		.left-side {
-			background-color: $white;
+			background-color: $color-generic-white;
 			z-index: 3;
 			display: flex;
 			width: 389px;
@@ -60,14 +60,14 @@
 
 		.closable-left-side {
 			position: absolute;
-			background-color: $white;
+			background-color: $color-generic-white;
 			z-index: 0;
 			display: flex;
 			justify-content: center;
 			min-width: 56px;
 			max-width: 56px;
 			height: calc(100vh - 83px);
-			border-right: 1px $grey-medium solid;
+			border-right: 1px $color-neutral-200 solid;
 
 			@media (min-width: $screen-m) {
 				display: none;
diff --git a/src/front/Components/LayoutTemplates/DefaultDocumentTypesDashboard/DocumentTypeListContainer/classes.module.scss b/src/front/Components/LayoutTemplates/DefaultDocumentTypesDashboard/DocumentTypeListContainer/classes.module.scss
index b8bae18e..f6b183e8 100644
--- a/src/front/Components/LayoutTemplates/DefaultDocumentTypesDashboard/DocumentTypeListContainer/classes.module.scss
+++ b/src/front/Components/LayoutTemplates/DefaultDocumentTypesDashboard/DocumentTypeListContainer/classes.module.scss
@@ -18,7 +18,7 @@
 		max-height: calc(100vh - 290px);
 		height: calc(100vh - 290px);
 		overflow: auto;
-		border-right: 1px solid var(--grey-medium);
+		border-right: 1px solid var(--color-neutral-200);
 	}
 
 	.create-container {
diff --git a/src/front/Components/LayoutTemplates/DefaultDocumentTypesDashboard/classes.module.scss b/src/front/Components/LayoutTemplates/DefaultDocumentTypesDashboard/classes.module.scss
index a5ba79a3..bfcc6ff8 100644
--- a/src/front/Components/LayoutTemplates/DefaultDocumentTypesDashboard/classes.module.scss
+++ b/src/front/Components/LayoutTemplates/DefaultDocumentTypesDashboard/classes.module.scss
@@ -20,14 +20,14 @@
 			position: absolute;
 			width: 100%;
 			height: 100%;
-			background-color: var(--white);
+			background-color: var(--color-generic-white);
 			opacity: 0.5;
 			z-index: 2;
 			transition: all 0.3s $custom-easing;
 		}
 
 		.left-side {
-			background-color: $white;
+			background-color: $color-generic-white;
 			z-index: 3;
 			display: flex;
 			width: 389px;
@@ -60,14 +60,14 @@
 
 		.closable-left-side {
 			position: absolute;
-			background-color: $white;
+			background-color: $color-generic-white;
 			z-index: 0;
 			display: flex;
 			justify-content: center;
 			min-width: 56px;
 			max-width: 56px;
 			height: calc(100vh - 83px);
-			border-right: 1px $grey-medium solid;
+			border-right: 1px $color-neutral-200 solid;
 
 			@media (min-width: $screen-m) {
 				display: none;
diff --git a/src/front/Components/LayoutTemplates/DefaultDoubleSidePage/classes.module.scss b/src/front/Components/LayoutTemplates/DefaultDoubleSidePage/classes.module.scss
index c93fd0b1..02a83d39 100644
--- a/src/front/Components/LayoutTemplates/DefaultDoubleSidePage/classes.module.scss
+++ b/src/front/Components/LayoutTemplates/DefaultDoubleSidePage/classes.module.scss
@@ -30,7 +30,7 @@
 					display: none;
 				}
 
-				background: var(--grey-soft);
+				background: var(--color-neutral-50);
 
 				.image {
 					width: 100%;
@@ -56,4 +56,4 @@
 			}
 		}
 	}
-}
\ No newline at end of file
+}
diff --git a/src/front/Components/LayoutTemplates/DefaultNotaryDashboard/classes.module.scss b/src/front/Components/LayoutTemplates/DefaultNotaryDashboard/classes.module.scss
index c701b96b..bfcc6ff8 100644
--- a/src/front/Components/LayoutTemplates/DefaultNotaryDashboard/classes.module.scss
+++ b/src/front/Components/LayoutTemplates/DefaultNotaryDashboard/classes.module.scss
@@ -20,14 +20,14 @@
 			position: absolute;
 			width: 100%;
 			height: 100%;
-			background-color: var(--white);
+			background-color: var(--color-generic-white);
 			opacity: 0.5;
 			z-index: 2;
 			transition: all 0.3s $custom-easing;
 		}
 
 		.left-side {
-			background-color: $white;
+			background-color: $color-generic-white;
 			z-index: 3;
 			display: flex;
 			width: 389px;
@@ -60,14 +60,14 @@
 
 		.closable-left-side {
 			position: absolute;
-			background-color: $white;
+			background-color: $color-generic-white;
 			z-index: 0;
 			display: flex;
 			justify-content: center;
 			min-width: 56px;
 			max-width: 56px;
 			height: calc(100vh - 83px);
-			border-right: 1px $grey-medium solid;
+			border-right: 1px $color-neutral-200 solid;
 
 			@media (min-width: $screen-m) {
 				display: none;
@@ -88,18 +88,18 @@
 			min-width: calc(100vw - 389px);
 			padding: 64px 48px;
 			overflow-y: auto;
-			
+
 			@media (max-width: ($screen-m - 1px)) {
 				min-width: calc(100vw - 56px);
 			}
-			
-			@media(max-width: $screen-s){
+
+			@media (max-width: $screen-s) {
 				padding: 40px 16px 64px 16px;
 				flex: 1;
 				min-width: unset;
 			}
 
-			.back-arrow-mobile{
+			.back-arrow-mobile {
 				display: none;
 				@media (max-width: $screen-s) {
 					display: block;
@@ -107,7 +107,7 @@
 				}
 			}
 
-			.back-arrow-desktop{
+			.back-arrow-desktop {
 				@media (max-width: $screen-s) {
 					display: none;
 				}
diff --git a/src/front/Components/LayoutTemplates/DefaultOfficeDashboard/OfficeListContainer/classes.module.scss b/src/front/Components/LayoutTemplates/DefaultOfficeDashboard/OfficeListContainer/classes.module.scss
index a27e911b..a34b9618 100644
--- a/src/front/Components/LayoutTemplates/DefaultOfficeDashboard/OfficeListContainer/classes.module.scss
+++ b/src/front/Components/LayoutTemplates/DefaultOfficeDashboard/OfficeListContainer/classes.module.scss
@@ -18,6 +18,6 @@
 		max-height: 100vh;
 		height: 100vh;
 		overflow: auto;
-		border-right: 1px solid var(--grey-medium);
+		border-right: 1px solid var(--color-neutral-200);
 	}
 }
diff --git a/src/front/Components/LayoutTemplates/DefaultOfficeDashboard/classes.module.scss b/src/front/Components/LayoutTemplates/DefaultOfficeDashboard/classes.module.scss
index a5ba79a3..bfcc6ff8 100644
--- a/src/front/Components/LayoutTemplates/DefaultOfficeDashboard/classes.module.scss
+++ b/src/front/Components/LayoutTemplates/DefaultOfficeDashboard/classes.module.scss
@@ -20,14 +20,14 @@
 			position: absolute;
 			width: 100%;
 			height: 100%;
-			background-color: var(--white);
+			background-color: var(--color-generic-white);
 			opacity: 0.5;
 			z-index: 2;
 			transition: all 0.3s $custom-easing;
 		}
 
 		.left-side {
-			background-color: $white;
+			background-color: $color-generic-white;
 			z-index: 3;
 			display: flex;
 			width: 389px;
@@ -60,14 +60,14 @@
 
 		.closable-left-side {
 			position: absolute;
-			background-color: $white;
+			background-color: $color-generic-white;
 			z-index: 0;
 			display: flex;
 			justify-content: center;
 			min-width: 56px;
 			max-width: 56px;
 			height: calc(100vh - 83px);
-			border-right: 1px $grey-medium solid;
+			border-right: 1px $color-neutral-200 solid;
 
 			@media (min-width: $screen-m) {
 				display: none;
diff --git a/src/front/Components/LayoutTemplates/DefaultRoleDashboard/RoleListContainer/classes.module.scss b/src/front/Components/LayoutTemplates/DefaultRoleDashboard/RoleListContainer/classes.module.scss
index e2840502..3cc8b688 100644
--- a/src/front/Components/LayoutTemplates/DefaultRoleDashboard/RoleListContainer/classes.module.scss
+++ b/src/front/Components/LayoutTemplates/DefaultRoleDashboard/RoleListContainer/classes.module.scss
@@ -20,7 +20,7 @@
 		max-height: calc(100vh - 215px);
 		height: calc(100vh - 215px);
 		overflow: auto;
-		border-right: 1px solid var(--grey-medium);
+		border-right: 1px solid var(--color-neutral-200);
 	}
 
 	.create-container {
diff --git a/src/front/Components/LayoutTemplates/DefaultRoleDashboard/classes.module.scss b/src/front/Components/LayoutTemplates/DefaultRoleDashboard/classes.module.scss
index a5ba79a3..bfcc6ff8 100644
--- a/src/front/Components/LayoutTemplates/DefaultRoleDashboard/classes.module.scss
+++ b/src/front/Components/LayoutTemplates/DefaultRoleDashboard/classes.module.scss
@@ -20,14 +20,14 @@
 			position: absolute;
 			width: 100%;
 			height: 100%;
-			background-color: var(--white);
+			background-color: var(--color-generic-white);
 			opacity: 0.5;
 			z-index: 2;
 			transition: all 0.3s $custom-easing;
 		}
 
 		.left-side {
-			background-color: $white;
+			background-color: $color-generic-white;
 			z-index: 3;
 			display: flex;
 			width: 389px;
@@ -60,14 +60,14 @@
 
 		.closable-left-side {
 			position: absolute;
-			background-color: $white;
+			background-color: $color-generic-white;
 			z-index: 0;
 			display: flex;
 			justify-content: center;
 			min-width: 56px;
 			max-width: 56px;
 			height: calc(100vh - 83px);
-			border-right: 1px $grey-medium solid;
+			border-right: 1px $color-neutral-200 solid;
 
 			@media (min-width: $screen-m) {
 				display: none;
diff --git a/src/front/Components/LayoutTemplates/DefaultUserDashboard/UserListContainer/classes.module.scss b/src/front/Components/LayoutTemplates/DefaultUserDashboard/UserListContainer/classes.module.scss
index a27e911b..a34b9618 100644
--- a/src/front/Components/LayoutTemplates/DefaultUserDashboard/UserListContainer/classes.module.scss
+++ b/src/front/Components/LayoutTemplates/DefaultUserDashboard/UserListContainer/classes.module.scss
@@ -18,6 +18,6 @@
 		max-height: 100vh;
 		height: 100vh;
 		overflow: auto;
-		border-right: 1px solid var(--grey-medium);
+		border-right: 1px solid var(--color-neutral-200);
 	}
 }
diff --git a/src/front/Components/LayoutTemplates/DefaultUserDashboard/classes.module.scss b/src/front/Components/LayoutTemplates/DefaultUserDashboard/classes.module.scss
index a5ba79a3..bfcc6ff8 100644
--- a/src/front/Components/LayoutTemplates/DefaultUserDashboard/classes.module.scss
+++ b/src/front/Components/LayoutTemplates/DefaultUserDashboard/classes.module.scss
@@ -20,14 +20,14 @@
 			position: absolute;
 			width: 100%;
 			height: 100%;
-			background-color: var(--white);
+			background-color: var(--color-generic-white);
 			opacity: 0.5;
 			z-index: 2;
 			transition: all 0.3s $custom-easing;
 		}
 
 		.left-side {
-			background-color: $white;
+			background-color: $color-generic-white;
 			z-index: 3;
 			display: flex;
 			width: 389px;
@@ -60,14 +60,14 @@
 
 		.closable-left-side {
 			position: absolute;
-			background-color: $white;
+			background-color: $color-generic-white;
 			z-index: 0;
 			display: flex;
 			justify-content: center;
 			min-width: 56px;
 			max-width: 56px;
 			height: calc(100vh - 83px);
-			border-right: 1px $grey-medium solid;
+			border-right: 1px $color-neutral-200 solid;
 
 			@media (min-width: $screen-m) {
 				display: none;
diff --git a/src/front/Components/Layouts/ClientDashboard/classes.module.scss b/src/front/Components/Layouts/ClientDashboard/classes.module.scss
index da2801a1..5fc0ae9c 100644
--- a/src/front/Components/Layouts/ClientDashboard/classes.module.scss
+++ b/src/front/Components/Layouts/ClientDashboard/classes.module.scss
@@ -72,7 +72,7 @@
 	}
 
 	.sub-container {
-		background-color: var(--grey-soft);
+		background-color: var(--color-neutral-50);
 		padding: 64px;
 
 		.content {
@@ -113,7 +113,7 @@
 		}
 
 		.component-to-replace {
-			background-color: var(--grey-soft);
+			background-color: var(--color-neutral-50);
 			height: 98px;
 			width: 100%;
 		}
diff --git a/src/front/Components/Layouts/ClientDashboard/index.tsx b/src/front/Components/Layouts/ClientDashboard/index.tsx
index 6f080624..c83e51c6 100644
--- a/src/front/Components/Layouts/ClientDashboard/index.tsx
+++ b/src/front/Components/Layouts/ClientDashboard/index.tsx
@@ -134,11 +134,11 @@ export default function ClientDashboard(props: IProps) {
 						</Typography>
 					</div>
 
-					<Typography typo={ITypo.P_SB_18} className={classes["folder-number"]} color={ITypoColor.GREY}>
+					<Typography typo={ITypo.P_SB_18} className={classes["folder-number"]} color={ITypoColor.COLOR_NEUTRAL_500}>
 						Dossier {folder?.folder_number} - {folder?.name}
 					</Typography>
 
-					<Typography typo={ITypo.P_SB_18} className={classes["office-name"]} color={ITypoColor.GREY}>
+					<Typography typo={ITypo.P_SB_18} className={classes["office-name"]} color={ITypoColor.COLOR_NEUTRAL_500}>
 						{folder?.office?.name}
 					</Typography>
 
@@ -153,14 +153,14 @@ export default function ClientDashboard(props: IProps) {
 						transmis à votre notaire.
 					</Typography>
 					<div className={classes["note-box"]}>
-						<Typography typo={ITypo.P_16} color={ITypoColor.GREY}>
+						<Typography typo={ITypo.P_16} color={ITypoColor.COLOR_NEUTRAL_500}>
 							{note?.content}
 						</Typography>
 					</div>
 				</div>
 
 				<div className={classes["contact"]}>
-					<Typography typo={ITypo.P_SB_18} className={classes["contact-text"]} color={ITypoColor.GREY}>
+					<Typography typo={ITypo.P_SB_18} className={classes["contact-text"]} color={ITypoColor.COLOR_NEUTRAL_500}>
 						<p>
 							{contact?.first_name} {contact?.last_name}
 						</p>
diff --git a/src/front/Components/Layouts/Collaborators/CollaboratorInformations/classes.module.scss b/src/front/Components/Layouts/Collaborators/CollaboratorInformations/classes.module.scss
index 3531884e..699e6fff 100644
--- a/src/front/Components/Layouts/Collaborators/CollaboratorInformations/classes.module.scss
+++ b/src/front/Components/Layouts/Collaborators/CollaboratorInformations/classes.module.scss
@@ -12,13 +12,13 @@
 			.subscription-active-dot {
 				width: 12px;
 				height: 12px;
-				background-color: var(--green-flash);
+				background-color: var(--color-success-600);
 				border-radius: 100px;
 			}
 		}
 	}
 	.user-infos {
-		background-color: var(--grey-soft);
+		background-color: var(--color-neutral-50);
 		display: flex;
 		justify-content: space-between;
 		padding: 24px;
@@ -44,7 +44,7 @@
 
 	.role-container {
 		padding: 32px 16px;
-		border: 1px solid var(--grey);
+		border: 1px solid var(--color-neutral-500);
 
 		margin-top: 32px;
 
diff --git a/src/front/Components/Layouts/Collaborators/CollaboratorInformations/index.tsx b/src/front/Components/Layouts/Collaborators/CollaboratorInformations/index.tsx
index cfe892ce..d094afd5 100644
--- a/src/front/Components/Layouts/Collaborators/CollaboratorInformations/index.tsx
+++ b/src/front/Components/Layouts/Collaborators/CollaboratorInformations/index.tsx
@@ -153,7 +153,7 @@ export default function CollaboratorInformations(props: IProps) {
 					{userSelected && userSelected.seats?.some((seat) => new Date(seat.subscription!.end_date) >= new Date()) && (
 						<div className={classes["subscription-active"]}>
 							<div className={classes["subscription-active-dot"]} />
-							<Typography typo={ITypo.P_18} color={ITypoColor.GREEN_FLASH}>
+							<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_SUCCESS_600}>
 								Abonnement actif
 							</Typography>
 						</div>
@@ -161,25 +161,25 @@ export default function CollaboratorInformations(props: IProps) {
 				</div>
 				<div className={classes["user-infos"]}>
 					<div className={classes["user-infos-row"]}>
-						<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.GREY}>
+						<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.COLOR_NEUTRAL_500}>
 							Nom
 						</Typography>
 						<Typography typo={ITypo.P_18}>{userSelected?.contact?.first_name}</Typography>
 					</div>
 					<div className={classes["user-infos-row"]}>
-						<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.GREY}>
+						<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.COLOR_NEUTRAL_500}>
 							Prénom
 						</Typography>
 						<Typography typo={ITypo.P_18}>{userSelected?.contact?.last_name}</Typography>
 					</div>
 					<div className={classes["user-infos-row"]}>
-						<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.GREY}>
+						<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.COLOR_NEUTRAL_500}>
 							Numéro de téléphone
 						</Typography>
 						<Typography typo={ITypo.P_18}>{userSelected?.contact?.cell_phone_number}</Typography>
 					</div>
 					<div className={classes["user-infos-row"]}>
-						<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.GREY}>
+						<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.COLOR_NEUTRAL_500}>
 							Email
 						</Typography>
 						<Typography typo={ITypo.P_18}>{userSelected?.contact?.email}</Typography>
diff --git a/src/front/Components/Layouts/Collaborators/index.tsx b/src/front/Components/Layouts/Collaborators/index.tsx
index 00314e81..da438fae 100644
--- a/src/front/Components/Layouts/Collaborators/index.tsx
+++ b/src/front/Components/Layouts/Collaborators/index.tsx
@@ -14,7 +14,7 @@ export default class Collaborators extends BasePage<IProps, IState> {
 					<div className={classes["no-folder-selected"]}>
 						<Typography typo={ITypo.H1Bis}>Informations du collaborateur</Typography>
 						<div className={classes["choose-a-folder"]}>
-							<Typography typo={ITypo.P_18} color={ITypoColor.GREY}>
+							<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_NEUTRAL_500}>
 								Sélectionnez un collaborateur
 							</Typography>
 						</div>
diff --git a/src/front/Components/Layouts/DeedTypes/DeedTypesInformations/classes.module.scss b/src/front/Components/Layouts/DeedTypes/DeedTypesInformations/classes.module.scss
index 7f0fcf99..3f9bd9e5 100644
--- a/src/front/Components/Layouts/DeedTypes/DeedTypesInformations/classes.module.scss
+++ b/src/front/Components/Layouts/DeedTypes/DeedTypesInformations/classes.module.scss
@@ -23,7 +23,7 @@
 		gap: 100px;
 		justify-content: space-between;
 		padding: 24px;
-		background-color: var(--grey-soft);
+		background-color: var(--color-neutral-50);
 
 		@media (max-width: $screen-l) {
 			gap: 80px;
@@ -69,7 +69,7 @@
 		margin-top: 32px;
 		padding: 32px 16px;
 
-		border: 1px solid var(--grey);
+		border: 1px solid var(--color-neutral-500);
 
 		.container-title {
 			display: flex;
diff --git a/src/front/Components/Layouts/DeedTypes/DeedTypesInformations/index.tsx b/src/front/Components/Layouts/DeedTypes/DeedTypesInformations/index.tsx
index c79579ff..ab863e3d 100644
--- a/src/front/Components/Layouts/DeedTypes/DeedTypesInformations/index.tsx
+++ b/src/front/Components/Layouts/DeedTypes/DeedTypesInformations/index.tsx
@@ -135,7 +135,7 @@ 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.NAV_INPUT_16} className={classes["box-title"]} color={ITypoColor.BLACK}>
+							<Typography typo={ITypo.NAV_INPUT_16} className={classes["box-title"]} color={ITypoColor.COLOR_GENERIC_BLACK}>
 								Description
 							</Typography>
 							<Typography typo={ITypo.P_18}>{deedTypeSelected?.description}</Typography>
diff --git a/src/front/Components/Layouts/DeedTypes/index.tsx b/src/front/Components/Layouts/DeedTypes/index.tsx
index 319c5bbd..9d25d452 100644
--- a/src/front/Components/Layouts/DeedTypes/index.tsx
+++ b/src/front/Components/Layouts/DeedTypes/index.tsx
@@ -14,7 +14,7 @@ export default class DeedTypes extends BasePage<IProps, IState> {
 					<div className={classes["no-role-selected"]}>
 						<Typography typo={ITypo.H1Bis}>Paramétrage des listes de pièces</Typography>
 						<div className={classes["choose-a-role"]}>
-							<Typography typo={ITypo.P_18} color={ITypoColor.GREY}>
+							<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_NEUTRAL_500}>
 								Sélectionnez un type d'acte
 							</Typography>
 						</div>
diff --git a/src/front/Components/Layouts/DocumentTypes/DocumentTypesInformations/classes.module.scss b/src/front/Components/Layouts/DocumentTypes/DocumentTypesInformations/classes.module.scss
index 7aeed370..b0e5bf53 100644
--- a/src/front/Components/Layouts/DocumentTypes/DocumentTypesInformations/classes.module.scss
+++ b/src/front/Components/Layouts/DocumentTypes/DocumentTypesInformations/classes.module.scss
@@ -20,7 +20,7 @@
 		gap: 24px;
 		padding: 24px;
 		margin-top: 32px;
-		background-color: var(--grey-soft);
+		background-color: var(--color-neutral-50);
 
 		.left {
 			display: flex;
@@ -44,8 +44,5 @@
 				gap: 12px;
 			}
 		}
-
-		.right {
-		}
 	}
 }
diff --git a/src/front/Components/Layouts/DocumentTypes/DocumentTypesInformations/index.tsx b/src/front/Components/Layouts/DocumentTypes/DocumentTypesInformations/index.tsx
index 82242224..ce3a983a 100644
--- a/src/front/Components/Layouts/DocumentTypes/DocumentTypesInformations/index.tsx
+++ b/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.NAV_INPUT_16} color={ITypoColor.GREY}>
+							<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.COLOR_NEUTRAL_500}>
 								Nom du document
 							</Typography>
 							<Typography typo={ITypo.P_18}>{documentSelected?.name}</Typography>
 						</div>
 						<div className={classes["document-infos-row"]}>
-							<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.GREY}>
+							<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.COLOR_NEUTRAL_500}>
 								Description visible par les collaborateurs de l'office
 							</Typography>
 							<Typography typo={ITypo.P_18}>{documentSelected?.private_description}</Typography>
 						</div>
 						<div className={classes["document-infos-row"]}>
-							<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.GREY}>
+							<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.COLOR_NEUTRAL_500}>
 								Description visible par les clients de l'office
 							</Typography>
 							<Typography typo={ITypo.P_18}>{documentSelected?.public_description}</Typography>
diff --git a/src/front/Components/Layouts/DocumentTypes/index.tsx b/src/front/Components/Layouts/DocumentTypes/index.tsx
index 99b018b4..5788e2e0 100644
--- a/src/front/Components/Layouts/DocumentTypes/index.tsx
+++ b/src/front/Components/Layouts/DocumentTypes/index.tsx
@@ -14,7 +14,7 @@ export default class DocumentTypes extends BasePage<IProps, IState> {
 					<div className={classes["no-role-selected"]}>
 						<Typography typo={ITypo.H1Bis}>Paramétrage des documents</Typography>
 						<div className={classes["choose-a-role"]}>
-							<Typography typo={ITypo.P_18} color={ITypoColor.GREY}>
+							<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_NEUTRAL_500}>
 								Sélectionnez un document
 							</Typography>
 						</div>
diff --git a/src/front/Components/Layouts/Folder/AskDocuments/index.tsx b/src/front/Components/Layouts/Folder/AskDocuments/index.tsx
index 6a6c75b8..f9f8b03d 100644
--- a/src/front/Components/Layouts/Folder/AskDocuments/index.tsx
+++ b/src/front/Components/Layouts/Folder/AskDocuments/index.tsx
@@ -53,7 +53,7 @@ class AskDocumentsClass extends BasePage<IPropsClass, IState> {
 			<DefaultNotaryDashboard title={"Demander des documents"} onSelectedFolder={() => {}}>
 				<div className={classes["root"]}>
 					<BackArrow url={backUrl} />
-					<Typography typo={ITypo.H1} color={ITypoColor.BLACK} className={classes["title"]}>
+					<Typography typo={ITypo.H1} color={ITypoColor.COLOR_GENERIC_BLACK} className={classes["title"]}>
 						Demander des documents
 					</Typography>
 					<Form onSubmit={this.onFormSubmit}>
diff --git a/src/front/Components/Layouts/Folder/CreateFolder/index.tsx b/src/front/Components/Layouts/Folder/CreateFolder/index.tsx
index 8dbb9084..37826800 100644
--- a/src/front/Components/Layouts/Folder/CreateFolder/index.tsx
+++ b/src/front/Components/Layouts/Folder/CreateFolder/index.tsx
@@ -82,10 +82,10 @@ class CreateFolderClass extends BasePage<IPropsClass, IState> {
 			<DefaultDoubleSidePage title={"Dossier"} image={backgroundImage} type="background" showHeader={true}>
 				<div className={classes["root"]}>
 					<BackArrow />
-					<Typography typo={ITypo.H1} color={ITypoColor.BLACK} className={classes["title"]}>
+					<Typography typo={ITypo.H1} color={ITypoColor.COLOR_GENERIC_BLACK} className={classes["title"]}>
 						Créer un dossier
 					</Typography>
-					<Typography typo={ITypo.H3} color={ITypoColor.PURPLE_FLASH} className={classes["subtitle"]}>
+					<Typography typo={ITypo.H3} color={ITypoColor.COLOR_PRIMARY_500} className={classes["subtitle"]}>
 						Informations dossier
 					</Typography>
 					<Form onSubmit={this.onFormSubmit}>
@@ -118,7 +118,7 @@ class CreateFolderClass extends BasePage<IPropsClass, IState> {
 							/>
 
 							<div className={classes["access-container"]}>
-								<Typography typo={ITypo.H3} color={ITypoColor.PURPLE_FLASH}>
+								<Typography typo={ITypo.H3} color={ITypoColor.COLOR_PRIMARY_500}>
 									Accès au dossier
 								</Typography>
 								<div className={classes["radio-container"]}>
diff --git a/src/front/Components/Layouts/Folder/FolderInformation/ClientSection/index.tsx b/src/front/Components/Layouts/Folder/FolderInformation/ClientSection/index.tsx
index 6a195747..604b5d3c 100644
--- a/src/front/Components/Layouts/Folder/FolderInformation/ClientSection/index.tsx
+++ b/src/front/Components/Layouts/Folder/FolderInformation/ClientSection/index.tsx
@@ -50,7 +50,7 @@ export default class ClientSection extends React.Component<IProps, IState> {
 				) : (
 					<div className={classes["no-client"]}>
 						<div className={classes["title"]}>
-							<Typography typo={ITypo.P_18} color={ITypoColor.GREY}>
+							<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_NEUTRAL_500}>
 								Aucun client n'est associé au dossier.
 							</Typography>
 						</div>
diff --git a/src/front/Components/Layouts/Folder/FolderInformation/index.tsx b/src/front/Components/Layouts/Folder/FolderInformation/index.tsx
index 5a5f46d0..0fb2898b 100644
--- a/src/front/Components/Layouts/Folder/FolderInformation/index.tsx
+++ b/src/front/Components/Layouts/Folder/FolderInformation/index.tsx
@@ -237,7 +237,7 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
 							<div className={classes["no-folder-selected"]}>
 								<Typography typo={ITypo.H1Bis}>Informations du dossier</Typography>
 								<div className={classes["choose-a-folder"]}>
-									<Typography typo={ITypo.P_18} color={ITypoColor.GREY}>
+									<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_NEUTRAL_500}>
 										Sélectionnez un dossier
 									</Typography>
 								</div>
@@ -268,7 +268,7 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
 					showButtons={!this.state.hasValidateAnchoring}>
 					<div className={classes["validate-document-container"]}>
 						{!this.state.hasValidateAnchoring && (
-							<Typography typo={ITypo.P_16} color={ITypoColor.BLACK} className={classes["validate-text"]}>
+							<Typography typo={ITypo.P_16} color={ITypoColor.COLOR_GENERIC_BLACK} className={classes["validate-text"]}>
 								Les documents du dossier seront certifiés sur la blockchain. Pensez à bien télécharger l'ensemble des
 								documents du dossier ainsi que le fichier de preuve d'ancrage pour les mettre dans la GED de votre logiciel
 								de rédaction d'actes.
@@ -276,7 +276,7 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
 						)}
 						{this.state.hasValidateAnchoring && (
 							<div className={classes["document-validating-container"]}>
-								<Typography typo={ITypo.P_16} color={ITypoColor.BLACK} className={classes["validate-text"]}>
+								<Typography typo={ITypo.P_16} color={ITypoColor.COLOR_GENERIC_BLACK} className={classes["validate-text"]}>
 									Veuillez revenir sur le dossier dans 5 minutes et rafraîchir la page pour télécharger le dossier de
 									preuve d'ancrage et le glisser dans la GED de votre logiciel de rédaction d'acte.
 								</Typography>
diff --git a/src/front/Components/Layouts/Folder/ViewDocuments/OcrResult/classes.module.scss b/src/front/Components/Layouts/Folder/ViewDocuments/OcrResult/classes.module.scss
index cf2472f7..71f29c7e 100644
--- a/src/front/Components/Layouts/Folder/ViewDocuments/OcrResult/classes.module.scss
+++ b/src/front/Components/Layouts/Folder/ViewDocuments/OcrResult/classes.module.scss
@@ -1,37 +1,37 @@
 @import "@Themes/constants.scss";
 
-.root{
-    background-color: var(--grey-soft);
-    padding: 24px;
+.root {
+	background-color: var(--color-neutral-50);
+	padding: 24px;
 
-    .result-text{
-        color: rgba(0, 0, 0, 0.4);
-    }
+	.result-text {
+		color: rgba(0, 0, 0, 0.4);
+	}
 
-    .result-container{
-        display: flex;
+	.result-container {
+		display: flex;
 
-        .percentage-container{
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            .dot{
-                width: 11px;
-                height: 11px;
-                border-radius: 50px;
+		.percentage-container {
+			display: flex;
+			align-items: center;
+			gap: 8px;
+			.dot {
+				width: 11px;
+				height: 11px;
+				border-radius: 50px;
 
-                &[data-color="green-flash"]{
-                    background-color: var(--green-flash);
-                }
+				&[data-color="color-success-600"] {
+					background-color: var(--color-success-600);
+				}
 
-                &[data-color="orange-flash"]{
-                    background-color: var(--orange-flash);
-                }
+				&[data-color="color-warning-500"] {
+					background-color: var(--color-warning-500);
+				}
 
-                &[data-color="red-flash"]{
-                    background-color: var(--red-flash);
-                }
-            }
-        }
-    }
-}
\ No newline at end of file
+				&[data-color="color-error-600"] {
+					background-color: var(--color-error-600);
+				}
+			}
+		}
+	}
+}
diff --git a/src/front/Components/Layouts/Folder/ViewDocuments/OcrResult/index.tsx b/src/front/Components/Layouts/Folder/ViewDocuments/OcrResult/index.tsx
index f784dc1e..b03fecd6 100644
--- a/src/front/Components/Layouts/Folder/ViewDocuments/OcrResult/index.tsx
+++ b/src/front/Components/Layouts/Folder/ViewDocuments/OcrResult/index.tsx
@@ -17,15 +17,15 @@ export default class OcrResult extends React.Component<IProps, IState> {
 					Résultat de l'analyse :
 				</Typography>
 				<div className={classes["result-container"]}>
-					<Typography typo={ITypo.P_18} color={ITypoColor.BLACK}>
+					<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
 						Document conforme à :&nbsp;
 					</Typography>
-                    <div className={classes["percentage-container"]}>
-                        <Typography typo={ITypo.P_18} color={this.getColor()}>
-                            {this.props.percentage}%
-                        </Typography>
-                        <div className={classes["dot"]} data-color={this.getColor()} />
-                    </div>
+					<div className={classes["percentage-container"]}>
+						<Typography typo={ITypo.P_18} color={this.getColor()}>
+							{this.props.percentage}%
+						</Typography>
+						<div className={classes["dot"]} data-color={this.getColor()} />
+					</div>
 				</div>
 			</div>
 		);
@@ -33,9 +33,9 @@ export default class OcrResult extends React.Component<IProps, IState> {
 
 	private getColor() {
 		if (this.props.percentage > 75) {
-			return ITypoColor.GREEN_FLASH;
+			return ITypoColor.COLOR_SUCCESS_600;
 		} else {
-			return ITypoColor.RED_FLASH;
+			return ITypoColor.COLOR_ERROR_600;
 		}
 	}
 }
diff --git a/src/front/Components/Layouts/Folder/ViewDocuments/index.tsx b/src/front/Components/Layouts/Folder/ViewDocuments/index.tsx
index f4ed6804..0a27d6fd 100644
--- a/src/front/Components/Layouts/Folder/ViewDocuments/index.tsx
+++ b/src/front/Components/Layouts/Folder/ViewDocuments/index.tsx
@@ -73,10 +73,10 @@ class ViewDocumentsClass extends BasePage<IPropsClass, IState> {
 			<DefaultNotaryDashboard title={"Demander des documents"} hasBackArrow mobileBackText="Retour aux documents">
 				{this.state.document && this.state.document.files && this.state.selectedFile && !this.state.isLoading && (
 					<div className={classes["root"]}>
-						<Typography typo={ITypo.H1} color={ITypoColor.BLACK} className={classes["title"]}>
+						<Typography typo={ITypo.H1} color={ITypoColor.COLOR_GENERIC_BLACK} className={classes["title"]}>
 							{this.state.document.folder?.name}
 						</Typography>
-						<Typography typo={ITypo.H3} color={ITypoColor.BLACK} className={classes["subtitle"]}>
+						<Typography typo={ITypo.H3} color={ITypoColor.COLOR_GENERIC_BLACK} className={classes["subtitle"]}>
 							{this.state.document.document_type?.name}
 						</Typography>
 						<div className={classes["document-container"]}>
@@ -139,7 +139,7 @@ class ViewDocumentsClass extends BasePage<IPropsClass, IState> {
 							cancelText={"Annuler"}
 							confirmText={"Confirmer"}>
 							<div className={classes["validate-document-container"]}>
-								<Typography typo={ITypo.P_16} color={ITypoColor.BLACK} className={classes["validate-text"]}>
+								<Typography typo={ITypo.P_16} color={ITypoColor.COLOR_GENERIC_BLACK} className={classes["validate-text"]}>
 									Êtes-vous sûr de vouloir valider ce document ?
 								</Typography>
 							</div>
@@ -153,7 +153,7 @@ class ViewDocumentsClass extends BasePage<IPropsClass, IState> {
 							cancelText={"Annuler"}
 							confirmText={"Refuser"}>
 							<div className={classes["refuse-document-container"]}>
-								<Typography typo={ITypo.P_16} color={ITypoColor.BLACK} className={classes["refuse-text"]}>
+								<Typography typo={ITypo.P_16} color={ITypoColor.COLOR_GENERIC_BLACK} className={classes["refuse-text"]}>
 									Veuillez indiquer au client le motif du refus de son document afin qu'il puisse vous renvoyer une bonne
 									version.
 								</Typography>
@@ -164,7 +164,7 @@ class ViewDocumentsClass extends BasePage<IPropsClass, IState> {
 				)}
 				{(!this.state.selectedFile || !this.state.document) && !this.state.isLoading && (
 					<div className={classes["root"]}>
-						<Typography typo={ITypo.P_16} color={ITypoColor.BLACK} className={classes["refuse-text"]}>
+						<Typography typo={ITypo.P_16} color={ITypoColor.COLOR_GENERIC_BLACK} className={classes["refuse-text"]}>
 							Document non trouvé
 						</Typography>
 					</div>
diff --git a/src/front/Components/Layouts/Folder/index.tsx b/src/front/Components/Layouts/Folder/index.tsx
index b0a21db8..23444950 100644
--- a/src/front/Components/Layouts/Folder/index.tsx
+++ b/src/front/Components/Layouts/Folder/index.tsx
@@ -29,7 +29,7 @@ export default class Folder extends BasePage<IProps, IState> {
 					<div className={classes["no-folder-selected"]}>
 						<Typography typo={ITypo.H1Bis}>Informations du dossier</Typography>
 						<div className={classes["choose-a-folder"]}>
-							<Typography typo={ITypo.P_18} color={ITypoColor.GREY}>
+							<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_NEUTRAL_500}>
 								Sélectionnez un dossier
 							</Typography>
 						</div>
diff --git a/src/front/Components/Layouts/FolderArchived/FolderInformation/ClientSection/index.tsx b/src/front/Components/Layouts/FolderArchived/FolderInformation/ClientSection/index.tsx
index bd084620..69e5e668 100644
--- a/src/front/Components/Layouts/FolderArchived/FolderInformation/ClientSection/index.tsx
+++ b/src/front/Components/Layouts/FolderArchived/FolderInformation/ClientSection/index.tsx
@@ -33,7 +33,7 @@ export default class ClientSection extends React.Component<IProps, IState> {
 					</>
 				) : (
 					<div className={classes["no-client"]}>
-						<Typography typo={ITypo.P_18} color={ITypoColor.GREY}>
+						<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_NEUTRAL_500}>
 							Aucun client dans ce dossier
 						</Typography>
 					</div>
diff --git a/src/front/Components/Layouts/FolderArchived/FolderInformation/index.tsx b/src/front/Components/Layouts/FolderArchived/FolderInformation/index.tsx
index ef018df8..409776b8 100644
--- a/src/front/Components/Layouts/FolderArchived/FolderInformation/index.tsx
+++ b/src/front/Components/Layouts/FolderArchived/FolderInformation/index.tsx
@@ -139,7 +139,7 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
 							<div className={classes["no-folder-selected"]}>
 								<Typography typo={ITypo.H1Bis}>Informations du dossier</Typography>
 								<div className={classes["choose-a-folder"]}>
-									<Typography typo={ITypo.P_18} color={ITypoColor.GREY}>
+									<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_NEUTRAL_500}>
 										Aucun dossier sélectionné
 									</Typography>
 								</div>
diff --git a/src/front/Components/Layouts/FolderArchived/index.tsx b/src/front/Components/Layouts/FolderArchived/index.tsx
index cda457a3..c3cedd23 100644
--- a/src/front/Components/Layouts/FolderArchived/index.tsx
+++ b/src/front/Components/Layouts/FolderArchived/index.tsx
@@ -32,7 +32,7 @@ export default class FolderArchived extends BasePage<IProps, IState> {
 					<div className={classes["no-folder-selected"]}>
 						<Typography typo={ITypo.H1Bis}>Informations du dossier</Typography>
 						<div className={classes["choose-a-folder"]}>
-							<Typography typo={ITypo.P_18} color={ITypoColor.GREY}>
+							<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_NEUTRAL_500}>
 								Aucun dossier sélectionné
 							</Typography>
 						</div>
diff --git a/src/front/Components/Layouts/LoginCustomer/PasswordForgotten/index.tsx b/src/front/Components/Layouts/LoginCustomer/PasswordForgotten/index.tsx
index 1ffcd778..e2b394d2 100644
--- a/src/front/Components/Layouts/LoginCustomer/PasswordForgotten/index.tsx
+++ b/src/front/Components/Layouts/LoginCustomer/PasswordForgotten/index.tsx
@@ -25,7 +25,7 @@ export default function PasswordForgotten(props: IProps) {
 					validationError={validationErrors.find((error) => error.property === "password")}
 					password
 				/>
-				<Typography typo={ITypo.CAPTION_14} color={ITypoColor.GREY} className={classes["password_indication"]}>
+				<Typography typo={ITypo.CAPTION_14} color={ITypoColor.COLOR_NEUTRAL_500} className={classes["password_indication"]}>
 					Au moins 8 caractères dont 1 majuscule, 1 minuscule et 1 chiffre.
 				</Typography>
 				<TextField
diff --git a/src/front/Components/Layouts/LoginCustomer/StepNewPassword/index.tsx b/src/front/Components/Layouts/LoginCustomer/StepNewPassword/index.tsx
index eb343bfd..5ebf7ff2 100644
--- a/src/front/Components/Layouts/LoginCustomer/StepNewPassword/index.tsx
+++ b/src/front/Components/Layouts/LoginCustomer/StepNewPassword/index.tsx
@@ -25,7 +25,7 @@ export default function StepNewPassword(props: IProps) {
 					validationError={validationErrors.find((error) => error.property === "password")}
 					password
 				/>
-				<Typography typo={ITypo.CAPTION_14} color={ITypoColor.GREY} className={classes["password_indication"]}>
+				<Typography typo={ITypo.CAPTION_14} color={ITypoColor.COLOR_NEUTRAL_500} className={classes["password_indication"]}>
 					Au moins 8 caractères dont 1 majuscule, 1 minuscule et 1 chiffre.
 				</Typography>
 				<TextField
diff --git a/src/front/Components/Layouts/LoginCustomer/StepTotp/index.tsx b/src/front/Components/Layouts/LoginCustomer/StepTotp/index.tsx
index 9c97e688..f1fbb1f6 100644
--- a/src/front/Components/Layouts/LoginCustomer/StepTotp/index.tsx
+++ b/src/front/Components/Layouts/LoginCustomer/StepTotp/index.tsx
@@ -65,7 +65,7 @@ export default function StepTotp(props: IProps) {
 				{secondsBeforeNewCode !== 0 && (
 					<Typography typo={ITypo.P_SB_16} className={classes["new-code-timer"]}>
 						Redemandez un code dans
-						<Typography typo={ITypo.P_16} color={ITypoColor.PINK_FLASH}>
+						<Typography typo={ITypo.P_16} color={ITypoColor.COLOR_SECONDARY_500}>
 							00:{secondsBeforeNewCode < 10 ? `0${secondsBeforeNewCode}` : secondsBeforeNewCode}
 						</Typography>
 					</Typography>
diff --git a/src/front/Components/Layouts/LoginHome/classes.module.scss b/src/front/Components/Layouts/LoginHome/classes.module.scss
index 6d2dc12b..6fbad4c2 100644
--- a/src/front/Components/Layouts/LoginHome/classes.module.scss
+++ b/src/front/Components/Layouts/LoginHome/classes.module.scss
@@ -14,7 +14,7 @@
 		}
 		.separator {
 			height: 1px;
-			background-color: var(--grey-medium);
+			background-color: var(--color-neutral-200);
 		}
 	}
 	.bottom {
diff --git a/src/front/Components/Layouts/LoginHome/index.tsx b/src/front/Components/Layouts/LoginHome/index.tsx
index c7e4d2b2..2540670c 100644
--- a/src/front/Components/Layouts/LoginHome/index.tsx
+++ b/src/front/Components/Layouts/LoginHome/index.tsx
@@ -16,7 +16,7 @@ export default function LoginHome() {
 				</Typography>
 				<div className={classes["content"]}>
 					<div className={classes["section"]}>
-						<Typography typo={ITypo.P_18} color={ITypoColor.BLACK}>
+						<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
 							Je suis un notaire / collaborateur
 						</Typography>
 						<Link href={Module.getInstance().get().modules.pages.Login.props.path}>
@@ -25,7 +25,7 @@ export default function LoginHome() {
 					</div>
 					<div className={classes["separator"]} />
 					<div className={classes["section"]}>
-						<Typography typo={ITypo.P_18} color={ITypoColor.BLACK}>
+						<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
 							Je suis un client
 						</Typography>
 						<Link href={Module.getInstance().get().modules.pages.CustomersLogin.props.path}>
diff --git a/src/front/Components/Layouts/MyAccount/index.tsx b/src/front/Components/Layouts/MyAccount/index.tsx
index 7510f09d..5c4b29fd 100644
--- a/src/front/Components/Layouts/MyAccount/index.tsx
+++ b/src/front/Components/Layouts/MyAccount/index.tsx
@@ -27,12 +27,12 @@ export default class MyAccount extends Base<IProps, IState> {
 		return (
 			<DefaultTemplate title={"Mon compte"}>
 				<div className={classes["root"]}>
-					<Typography typo={ITypo.H1} color={ITypoColor.BLACK} className={classes["title"]}>
+					<Typography typo={ITypo.H1} color={ITypoColor.COLOR_GENERIC_BLACK} className={classes["title"]}>
 						Mon compte
 					</Typography>
 					<div className={classes["parts-container"]}>
 						<div className={classes["part"]}>
-							<Typography typo={ITypo.H2} color={ITypoColor.BLACK}>
+							<Typography typo={ITypo.H2} color={ITypoColor.COLOR_GENERIC_BLACK}>
 								Mes informations
 							</Typography>
 							<Form onSubmit={this.onFormSubmit}>
@@ -69,7 +69,7 @@ export default class MyAccount extends Base<IProps, IState> {
 							</Form>
 						</div>
 						<div className={classes["part"]}>
-							<Typography typo={ITypo.H2} color={ITypoColor.BLACK}>
+							<Typography typo={ITypo.H2} color={ITypoColor.COLOR_GENERIC_BLACK}>
 								Mon office
 							</Typography>
 							<Form onSubmit={this.onFormSubmit}>
diff --git a/src/front/Components/Layouts/Offices/OfficeInformations/classes.module.scss b/src/front/Components/Layouts/Offices/OfficeInformations/classes.module.scss
index d7f81108..fca1bc37 100644
--- a/src/front/Components/Layouts/Offices/OfficeInformations/classes.module.scss
+++ b/src/front/Components/Layouts/Offices/OfficeInformations/classes.module.scss
@@ -20,14 +20,14 @@
 			.round {
 				width: 16px;
 				height: 16px;
-				background-color: var(--green-flash);
+				background-color: var(--color-success-600);
 				border-radius: 100px;
 			}
 		}
 	}
 
 	.office-infos {
-		background-color: var(--grey-soft);
+		background-color: var(--color-neutral-50);
 		display: flex;
 		justify-content: space-between;
 		padding: 24px;
@@ -80,7 +80,7 @@
 					display: grid;
 					grid-template-columns: repeat(5, 1fr);
 					padding: 24px;
-					background-color: var(--purple-soft);
+					background-color: var(--color-primary-500-soft);
 
 					@media (max-width: $screen-l) {
 						display: none;
@@ -88,12 +88,12 @@
 				}
 
 				.user-line-desktop {
-					background-color: var(--grey-soft);
+					background-color: var(--color-neutral-50);
 				}
 
 				.user-line-desktop {
 					&:nth-child(odd) {
-						background-color: var(--grey-medium);
+						background-color: var(--color-neutral-200);
 					}
 				}
 
@@ -104,7 +104,7 @@
 						display: flex;
 						flex-direction: column;
 						gap: 24px;
-						background-color: var(--grey-soft);
+						background-color: var(--color-neutral-50);
 						padding: 24px 16px;
 					}
 				}
diff --git a/src/front/Components/Layouts/Offices/OfficeInformations/index.tsx b/src/front/Components/Layouts/Offices/OfficeInformations/index.tsx
index 7fc218c5..1e7e488b 100644
--- a/src/front/Components/Layouts/Offices/OfficeInformations/index.tsx
+++ b/src/front/Components/Layouts/Offices/OfficeInformations/index.tsx
@@ -79,31 +79,31 @@ export default function OfficeInformations(props: IProps) {
 				</div>
 				<div key={user.uid} className={classes["user-line-mobile"]}>
 					<div className={classes["line"]}>
-						<Typography typo={ITypo.P_SB_16} color={ITypoColor.BLACK}>
+						<Typography typo={ITypo.P_SB_16} color={ITypoColor.COLOR_GENERIC_BLACK}>
 							Nom
 						</Typography>
 						<Typography typo={ITypo.P_16}>{user.contact?.last_name}</Typography>
 					</div>
 					<div className={classes["line"]}>
-						<Typography typo={ITypo.P_SB_16} color={ITypoColor.BLACK}>
+						<Typography typo={ITypo.P_SB_16} color={ITypoColor.COLOR_GENERIC_BLACK}>
 							Prénom
 						</Typography>
 						<Typography typo={ITypo.P_16}>{user.contact?.first_name}</Typography>
 					</div>
 					<div className={classes["line"]}>
-						<Typography typo={ITypo.P_SB_16} color={ITypoColor.BLACK}>
+						<Typography typo={ITypo.P_SB_16} color={ITypoColor.COLOR_GENERIC_BLACK}>
 							E-mail
 						</Typography>
 						<Typography typo={ITypo.P_16}>{user.contact?.email}</Typography>
 					</div>
 					<div className={classes["line"]}>
-						<Typography typo={ITypo.P_SB_16} color={ITypoColor.BLACK}>
+						<Typography typo={ITypo.P_SB_16} color={ITypoColor.COLOR_GENERIC_BLACK}>
 							Téléphone
 						</Typography>
 						<Typography typo={ITypo.P_16}>{user.contact?.phone_number}</Typography>
 					</div>
 					<div className={classes["line"]}>
-						<Typography typo={ITypo.P_SB_16} color={ITypoColor.BLACK}>
+						<Typography typo={ITypo.P_SB_16} color={ITypoColor.COLOR_GENERIC_BLACK}>
 							Rôle
 						</Typography>
 						<Typography typo={ITypo.P_16}>{user.office_role ? user.office_role?.name : user.role?.name}</Typography>
@@ -126,19 +126,19 @@ export default function OfficeInformations(props: IProps) {
 				</div>
 				<div className={classes["office-infos"]}>
 					<div className={classes["office-infos-row"]}>
-						<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.GREY}>
+						<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.COLOR_NEUTRAL_500}>
 							CRPCEN
 						</Typography>
 						<Typography typo={ITypo.P_18}>{officeSelected?.crpcen}</Typography>
 					</div>
 					<div className={classes["office-infos-row"]}>
-						<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.GREY}>
+						<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.COLOR_NEUTRAL_500}>
 							Dénomination
 						</Typography>
 						<Typography typo={ITypo.P_18}>{officeSelected?.name}</Typography>
 					</div>
 					<div className={classes["office-infos-row"]}>
-						<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.GREY}>
+						<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.COLOR_NEUTRAL_500}>
 							Addresse
 						</Typography>
 						<Typography typo={ITypo.P_18}>
@@ -153,19 +153,19 @@ export default function OfficeInformations(props: IProps) {
 						</div>
 						<div className={classes["users-container"]}>
 							<div className={classes["first-line"]}>
-								<Typography typo={ITypo.P_SB_18} color={ITypoColor.BLACK}>
+								<Typography typo={ITypo.P_SB_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
 									Nom
 								</Typography>
-								<Typography typo={ITypo.P_SB_18} color={ITypoColor.BLACK}>
+								<Typography typo={ITypo.P_SB_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
 									Prénom
 								</Typography>
-								<Typography typo={ITypo.P_SB_18} color={ITypoColor.BLACK}>
+								<Typography typo={ITypo.P_SB_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
 									E-mail
 								</Typography>
-								<Typography typo={ITypo.P_SB_18} color={ITypoColor.BLACK}>
+								<Typography typo={ITypo.P_SB_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
 									Téléphone
 								</Typography>
-								<Typography typo={ITypo.P_SB_18} color={ITypoColor.BLACK}>
+								<Typography typo={ITypo.P_SB_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
 									Rôle
 								</Typography>
 							</div>
@@ -180,19 +180,19 @@ export default function OfficeInformations(props: IProps) {
 						</div>
 						<div className={classes["users-container"]}>
 							<div className={classes["first-line"]}>
-								<Typography typo={ITypo.P_SB_18} color={ITypoColor.BLACK}>
+								<Typography typo={ITypo.P_SB_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
 									Nom
 								</Typography>
-								<Typography typo={ITypo.P_SB_18} color={ITypoColor.BLACK}>
+								<Typography typo={ITypo.P_SB_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
 									Prénom
 								</Typography>
-								<Typography typo={ITypo.P_SB_18} color={ITypoColor.BLACK}>
+								<Typography typo={ITypo.P_SB_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
 									E-mail
 								</Typography>
-								<Typography typo={ITypo.P_SB_18} color={ITypoColor.BLACK}>
+								<Typography typo={ITypo.P_SB_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
 									Téléphone
 								</Typography>
-								<Typography typo={ITypo.P_SB_18} color={ITypoColor.BLACK}>
+								<Typography typo={ITypo.P_SB_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
 									Rôle
 								</Typography>
 							</div>
diff --git a/src/front/Components/Layouts/Offices/index.tsx b/src/front/Components/Layouts/Offices/index.tsx
index 1427203c..e5abae44 100644
--- a/src/front/Components/Layouts/Offices/index.tsx
+++ b/src/front/Components/Layouts/Offices/index.tsx
@@ -14,7 +14,7 @@ export default class Offices extends BasePage<IProps, IState> {
 					<div className={classes["no-folder-selected"]}>
 						<Typography typo={ITypo.H1Bis}>Informations des offices</Typography>
 						<div className={classes["choose-a-folder"]}>
-							<Typography typo={ITypo.P_18} color={ITypoColor.GREY}>
+							<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_NEUTRAL_500}>
 								Sélectionnez un office
 							</Typography>
 						</div>
diff --git a/src/front/Components/Layouts/Rib/index.tsx b/src/front/Components/Layouts/Rib/index.tsx
index 0e4507b7..4e029146 100644
--- a/src/front/Components/Layouts/Rib/index.tsx
+++ b/src/front/Components/Layouts/Rib/index.tsx
@@ -94,7 +94,7 @@ export default function Rib() {
 	return (
 		<DefaultTemplate title={"RIB"}>
 			<div className={classes["root"]}>
-				<Typography typo={ITypo.H1} color={ITypoColor.BLACK} className={classes["title"]}>
+				<Typography typo={ITypo.H1} color={ITypoColor.COLOR_GENERIC_BLACK} className={classes["title"]}>
 					RIB de l'office
 				</Typography>
 				{isLoading && (
@@ -108,7 +108,7 @@ export default function Rib() {
 					<>
 						<div className={classes["document-container"]}>
 							<div>
-								<Typography typo={ITypo.P_18} color={ITypoColor.GREY}>
+								<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_NEUTRAL_500}>
 									Aucun RIB n'a été déposé pour cet office
 								</Typography>
 							</div>
@@ -159,10 +159,10 @@ export default function Rib() {
 					closeBtn
 					cancelText={"Annuler"}
 					confirmText={"Supprimer"}>
-					<Typography typo={ITypo.H1} color={ITypoColor.BLACK} className={classes["title"]}>
+					<Typography typo={ITypo.H1} color={ITypoColor.COLOR_GENERIC_BLACK} className={classes["title"]}>
 						Supprimer le RIB
 					</Typography>
-					<Typography typo={ITypo.P_18} color={ITypoColor.GREY}>
+					<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_NEUTRAL_500}>
 						Voulez-vous vraiment supprimer le RIB de votre office ?
 					</Typography>
 				</Confirm>
diff --git a/src/front/Components/Layouts/Roles/index.tsx b/src/front/Components/Layouts/Roles/index.tsx
index 333601eb..0c04595f 100644
--- a/src/front/Components/Layouts/Roles/index.tsx
+++ b/src/front/Components/Layouts/Roles/index.tsx
@@ -14,7 +14,7 @@ export default class Collaborators extends BasePage<IProps, IState> {
 					<div className={classes["no-role-selected"]}>
 						<Typography typo={ITypo.H1Bis}>Gestion des rôles</Typography>
 						<div className={classes["choose-a-role"]}>
-							<Typography typo={ITypo.P_18} color={ITypoColor.GREY}>
+							<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_NEUTRAL_500}>
 								Sélectionnez un rôle
 							</Typography>
 						</div>
diff --git a/src/front/Components/Layouts/Subscription/Components/SubscribeCheckoutTicket/index.tsx b/src/front/Components/Layouts/Subscription/Components/SubscribeCheckoutTicket/index.tsx
index 3c24a43b..1b4467f5 100644
--- a/src/front/Components/Layouts/Subscription/Components/SubscribeCheckoutTicket/index.tsx
+++ b/src/front/Components/Layouts/Subscription/Components/SubscribeCheckoutTicket/index.tsx
@@ -72,7 +72,7 @@ export default function SubscribeCheckoutTicket(props: IProps) {
 		<div className={classes["root"]}>
 			<div className={classes["container"]}>
 				<div className={classes["forfeit-type"]}>
-					<Typography typo={ITypo.P_18} color={ITypoColor.BLACK}>
+					<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
 						{forfeitType === EForfeitType.standard ? "Forfait standard" : "Forfait illimité"}
 					</Typography>
 				</div>
@@ -99,11 +99,11 @@ export default function SubscribeCheckoutTicket(props: IProps) {
 				<div className={classes["container-line"]}>
 					<div className={classes["line"]}>
 						<div className={classes["line-sub-container"]}>
-							<Typography typo={ITypo.P_18} color={ITypoColor.BLACK}>
+							<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
 								{forfeitType === EForfeitType.standard ? "Plan individuel" : "Plan illimité"}
 							</Typography>
 							{paymentFrequency === EPaymentFrequencyFront.yearly && (
-								<Typography typo={ITypo.CAPTION_14_SB} color={ITypoColor.BLACK}>
+								<Typography typo={ITypo.CAPTION_14_SB} color={ITypoColor.COLOR_GENERIC_BLACK}>
 									{formatFloat(
 										forfeitType === EForfeitType.standard
 											? forfeitsPrices[EForfeitType.standard]
@@ -115,11 +115,11 @@ export default function SubscribeCheckoutTicket(props: IProps) {
 						</div>
 
 						<div className={classes["line-sub-container"]}>
-							<Typography typo={ITypo.P_SB_18} color={ITypoColor.BLACK}>
+							<Typography typo={ITypo.P_SB_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
 								{totalPlan}&nbsp;€
 							</Typography>
 							{paymentFrequency === EPaymentFrequencyFront.yearly && (
-								<Typography typo={ITypo.P_16} color={ITypoColor.BLACK} className={classes["stroked-price"]}>
+								<Typography typo={ITypo.P_16} color={ITypoColor.COLOR_GENERIC_BLACK} className={classes["stroked-price"]}>
 									{formatFloat(
 										forfeitType === EForfeitType.standard
 											? forfeitsPrices[EForfeitType.standard] * multiplier
@@ -133,15 +133,15 @@ export default function SubscribeCheckoutTicket(props: IProps) {
 					{forfeitType === EForfeitType.standard && (
 						<div className={classes["line"]}>
 							<div className={classes["line-sub-container"]}>
-								<Typography typo={ITypo.P_18} color={ITypoColor.BLACK}>
+								<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
 									{numberOfCollaborators} collaborateurs
 								</Typography>
-								<Typography typo={ITypo.CAPTION_14_SB} color={ITypoColor.BLACK}>
+								<Typography typo={ITypo.CAPTION_14_SB} color={ITypoColor.COLOR_GENERIC_BLACK}>
 									{formatFloat(collaboratorPrice)}&nbsp;€ x {numberOfCollaborators}{" "}
 									{paymentFrequency === EPaymentFrequencyFront.yearly && "x 12"}
 								</Typography>
 							</div>
-							<Typography typo={ITypo.P_SB_18} color={ITypoColor.BLACK}>
+							<Typography typo={ITypo.P_SB_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
 								{formatFloat(totalCollaborator)}&nbsp;€
 							</Typography>
 						</div>
@@ -152,19 +152,19 @@ export default function SubscribeCheckoutTicket(props: IProps) {
 						<div className={classes["separator"]} />
 						<div className={classnames(classes["container-line"], classes["container-tight"])}>
 							<div className={classes["line"]}>
-								<Typography typo={ITypo.P_18} color={ITypoColor.BLACK}>
+								<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
 									Total HT
 								</Typography>
-								<Typography typo={ITypo.P_SB_18} color={ITypoColor.BLACK}>
+								<Typography typo={ITypo.P_SB_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
 									{formatFloat(totalCollaborator + totalPlan)}
 									&nbsp;€
 								</Typography>
 							</div>
 							<div className={classes["line"]}>
-								<Typography typo={ITypo.P_18} color={ITypoColor.BLACK}>
+								<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
 									TVA 20%
 								</Typography>
-								<Typography typo={ITypo.P_SB_18} color={ITypoColor.BLACK}>
+								<Typography typo={ITypo.P_SB_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
 									{formatFloat((totalCollaborator + totalPlan) * 0.2)}
 									&nbsp;€
 								</Typography>
@@ -176,19 +176,19 @@ export default function SubscribeCheckoutTicket(props: IProps) {
 				<div className={classnames(classes["container-line"], classes["container-tight"])}>
 					{forfeitType === EForfeitType.unlimited && (
 						<div className={classes["line"]}>
-							<Typography typo={ITypo.P_18} color={ITypoColor.BLACK}>
+							<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
 								TVA 20%
 							</Typography>
-							<Typography typo={ITypo.P_SB_18} color={ITypoColor.BLACK}>
+							<Typography typo={ITypo.P_SB_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
 								{formatFloat((totalCollaborator + totalPlan) * 0.2)}&nbsp;€
 							</Typography>
 						</div>
 					)}
 					<div className={classes["line"]}>
-						<Typography typo={ITypo.P_18} color={ITypoColor.BLACK}>
+						<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
 							Total TTC
 						</Typography>
-						<Typography typo={ITypo.P_SB_18} color={ITypoColor.BLACK}>
+						<Typography typo={ITypo.P_SB_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
 							{formatFloat((totalCollaborator + totalPlan) * 1.2)}
 							&nbsp;€
 						</Typography>
diff --git a/src/front/Components/Layouts/Subscription/Components/SubscribeIllimityComponent/index.tsx b/src/front/Components/Layouts/Subscription/Components/SubscribeIllimityComponent/index.tsx
index 886c9e3c..a1b11d61 100644
--- a/src/front/Components/Layouts/Subscription/Components/SubscribeIllimityComponent/index.tsx
+++ b/src/front/Components/Layouts/Subscription/Components/SubscribeIllimityComponent/index.tsx
@@ -62,33 +62,33 @@ export default function SubscribeIllimityComponent({ hasNavTab = true }: IProps)
 								]}
 							/>
 						)}
-						<Typography typo={ITypo.H2} color={ITypoColor.BLACK}>
+						<Typography typo={ITypo.H2} color={ITypoColor.COLOR_GENERIC_BLACK}>
 							Nombre de collaborateurs illimité
 						</Typography>
 						<div className={classes["infos-container"]}>
 							<div className={classes["line"]}>
-								<Check color={ITypoColor.GREY} />
-								<Typography typo={ITypo.P_16} color={ITypoColor.GREY}>
+								<Check color={ITypoColor.COLOR_NEUTRAL_500} />
+								<Typography typo={ITypo.P_16} color={ITypoColor.COLOR_NEUTRAL_500}>
 									Accompagnement facilité : profitez d'un onboarding individualisé, où nous vous guidons pour une prise en
 									main optimale de l'application
 								</Typography>
 							</div>
 							<div className={classes["line"]}>
-								<Check color={ITypoColor.GREY} />
-								<Typography typo={ITypo.P_16} color={ITypoColor.GREY}>
+								<Check color={ITypoColor.COLOR_NEUTRAL_500} />
+								<Typography typo={ITypo.P_16} color={ITypoColor.COLOR_NEUTRAL_500}>
 									Support technique : notre équipe support est disponible pour vous assister en cas d’incident
 								</Typography>
 							</div>
 							<div className={classes["line"]}>
-								<Check color={ITypoColor.GREY} />
-								<Typography typo={ITypo.P_16} color={ITypoColor.GREY}>
+								<Check color={ITypoColor.COLOR_NEUTRAL_500} />
+								<Typography typo={ITypo.P_16} color={ITypoColor.COLOR_NEUTRAL_500}>
 									Mises à jour régulières : bénéficiez de mises à jour fréquentes pour profiter des dernières
 									fonctionnalités, améliorations de sécurité et performances optimisées
 								</Typography>
 							</div>
 							<div className={classes["line"]}>
-								<Check color={ITypoColor.BLACK} />
-								<Typography typo={ITypo.P_16} color={ITypoColor.BLACK}>
+								<Check color={ITypoColor.COLOR_GENERIC_BLACK} />
+								<Typography typo={ITypo.P_16} color={ITypoColor.COLOR_GENERIC_BLACK}>
 									Sans limite d'utilisateurs
 								</Typography>
 							</div>
@@ -126,10 +126,10 @@ export default function SubscribeIllimityComponent({ hasNavTab = true }: IProps)
 				</div>
 				<div className={classes["separator"]} />
 				<div className={classes["container-line"]}>
-					<Typography typo={ITypo.P_18} color={ITypoColor.BLACK}>
+					<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
 						Total TTC
 					</Typography>
-					<Typography typo={ITypo.P_SB_18} color={ITypoColor.BLACK}>
+					<Typography typo={ITypo.P_SB_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
 						{formatFloat(forfeitsPrices[EForfeitType.unlimited] * 1.2 * multiplierToUse)}
 						&nbsp;€
 					</Typography>
diff --git a/src/front/Components/Layouts/Subscription/Components/SubscribeStandardComponent/index.tsx b/src/front/Components/Layouts/Subscription/Components/SubscribeStandardComponent/index.tsx
index 1af57fc9..352f4c51 100644
--- a/src/front/Components/Layouts/Subscription/Components/SubscribeStandardComponent/index.tsx
+++ b/src/front/Components/Layouts/Subscription/Components/SubscribeStandardComponent/index.tsx
@@ -54,27 +54,27 @@ export default function SubscribeStandardComponent({ hasNavTab = true }: IProps)
 								]}
 							/>
 						)}
-						<Typography typo={ITypo.H2} color={ITypoColor.BLACK}>
+						<Typography typo={ITypo.H2} color={ITypoColor.COLOR_GENERIC_BLACK}>
 							Choisissez le nombre de collaborateurs pour votre abonnement
 						</Typography>
 						<NumberPicker defaultValue={1} onChange={handleCollaboratorsChange} min={1} />
 						<div className={classes["infos-container"]}>
 							<div className={classes["line"]}>
-								<Check color={ITypoColor.GREY} />
-								<Typography typo={ITypo.P_16} color={ITypoColor.GREY}>
+								<Check color={ITypoColor.COLOR_NEUTRAL_500} />
+								<Typography typo={ITypo.P_16} color={ITypoColor.COLOR_NEUTRAL_500}>
 									Accompagnement facilité : profitez d'un onboarding individualisé, où nous vous guidons pour une prise en
 									main optimale de l'application
 								</Typography>
 							</div>
 							<div className={classes["line"]}>
-								<Check color={ITypoColor.GREY} />
-								<Typography typo={ITypo.P_16} color={ITypoColor.GREY}>
+								<Check color={ITypoColor.COLOR_NEUTRAL_500} />
+								<Typography typo={ITypo.P_16} color={ITypoColor.COLOR_NEUTRAL_500}>
 									Support technique : notre équipe support est disponible pour vous assister en cas d’incident
 								</Typography>
 							</div>
 							<div className={classes["line"]}>
-								<Check color={ITypoColor.GREY} />
-								<Typography typo={ITypo.P_16} color={ITypoColor.GREY}>
+								<Check color={ITypoColor.COLOR_NEUTRAL_500} />
+								<Typography typo={ITypo.P_16} color={ITypoColor.COLOR_NEUTRAL_500}>
 									Mises à jour régulières : bénéficiez de mises à jour fréquentes pour profiter des dernières
 									fonctionnalités, améliorations de sécurité et performances optimisées
 								</Typography>
@@ -117,10 +117,10 @@ export default function SubscribeStandardComponent({ hasNavTab = true }: IProps)
 				</div>
 				<div className={classes["separator"]} />
 				<div className={classes["container-line"]}>
-					<Typography typo={ITypo.P_18} color={ITypoColor.BLACK}>
+					<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
 						Total TTC
 					</Typography>
-					<Typography typo={ITypo.P_SB_18} color={ITypoColor.BLACK}>
+					<Typography typo={ITypo.P_SB_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
 						{formatFloat(
 							(forfeitsPrices[EForfeitType.standard] * multiplierToUse +
 								collaboratorPrice * numberOfCollaborators * multiplier) *
diff --git a/src/front/Components/Layouts/Subscription/Components/SubscriptionClientInfos/index.tsx b/src/front/Components/Layouts/Subscription/Components/SubscriptionClientInfos/index.tsx
index ce769b4c..0506f82b 100644
--- a/src/front/Components/Layouts/Subscription/Components/SubscriptionClientInfos/index.tsx
+++ b/src/front/Components/Layouts/Subscription/Components/SubscriptionClientInfos/index.tsx
@@ -10,16 +10,16 @@ export default function SubscriptionClientInfos(props: IProps) {
 	const { customer } = props;
 	return (
 		<div className={classes["root"]}>
-			<Typography typo={ITypo.P_SB_18} color={ITypoColor.BLACK}>
+			<Typography typo={ITypo.P_SB_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
 				Informations client
 			</Typography>
-			<Typography typo={ITypo.P_18} color={ITypoColor.BLACK}>
+			<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
 				{customer.email}
 			</Typography>
-			{/* <Typography typo={ITypo.P_SB_18} color={ITypoColor.BLACK}>
+			{/* <Typography typo={ITypo.P_SB_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
 				Adresse de facturation
 			</Typography> */}
-			<Typography typo={ITypo.P_18} color={ITypoColor.BLACK}>
+			<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
 				{customer.name} <br />
 				{/* 23 rue taitbout,
 				<br />
diff --git a/src/front/Components/Layouts/Subscription/Manage/SubscriptionManageCollaborators/index.tsx b/src/front/Components/Layouts/Subscription/Manage/SubscriptionManageCollaborators/index.tsx
index 17a66917..5bed2fae 100644
--- a/src/front/Components/Layouts/Subscription/Manage/SubscriptionManageCollaborators/index.tsx
+++ b/src/front/Components/Layouts/Subscription/Manage/SubscriptionManageCollaborators/index.tsx
@@ -83,10 +83,10 @@ export default function SubscriptionManageCollaborators() {
 		<DefaultTemplate title="Nouvelle souscription" hasBackArrow>
 			{subscription && jwt && (
 				<div className={classes["root"]}>
-					<Typography typo={ITypo.H2} color={ITypoColor.BLACK}>
+					<Typography typo={ITypo.H2} color={ITypoColor.COLOR_GENERIC_BLACK}>
 						Choisissez les collaborateurs pour votre abonnement
 					</Typography>
-					<Typography typo={ITypo.P_SB_18} color={ITypoColor.BLACK}>
+					<Typography typo={ITypo.P_SB_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
 						{subscription.nb_seats} sièges disponibles
 					</Typography>
 					<Form onSubmit={handleSubmit}>
@@ -109,7 +109,7 @@ export default function SubscriptionManageCollaborators() {
 								/>
 							))}
 						</div>
-						<Typography typo={ITypo.CAPTION_14} color={ITypoColor.BLACK}>
+						<Typography typo={ITypo.CAPTION_14} color={ITypoColor.COLOR_GENERIC_BLACK}>
 							{selectedCollaborators.length} collaborateurs sélectionnés
 						</Typography>
 						<div className={classes["buttons-container"]}>
diff --git a/src/front/Components/Layouts/Subscription/SubscriptionError/classes.module.scss b/src/front/Components/Layouts/Subscription/SubscriptionError/classes.module.scss
index e7d63d20..0afb29b6 100644
--- a/src/front/Components/Layouts/Subscription/SubscriptionError/classes.module.scss
+++ b/src/front/Components/Layouts/Subscription/SubscriptionError/classes.module.scss
@@ -16,6 +16,6 @@
 	.separator {
 		width: 100%;
 		height: 2px;
-		background: var(--grey-medium);
+		background: var(--color-neutral-200);
 	}
 }
diff --git a/src/front/Components/Layouts/Subscription/SubscriptionError/index.tsx b/src/front/Components/Layouts/Subscription/SubscriptionError/index.tsx
index c84624c3..4799aeb8 100644
--- a/src/front/Components/Layouts/Subscription/SubscriptionError/index.tsx
+++ b/src/front/Components/Layouts/Subscription/SubscriptionError/index.tsx
@@ -45,7 +45,7 @@ export default function SubscriptionError() {
 				<div className={classes["root"]}>
 					<div className={classes["left"]}>
 						<div className={classes["title"]}>
-							<Typography typo={ITypo.H1} color={ITypoColor.BLACK}>
+							<Typography typo={ITypo.H1} color={ITypoColor.COLOR_GENERIC_BLACK}>
 								Paiement échoué
 							</Typography>
 						</div>
diff --git a/src/front/Components/Layouts/Subscription/SubscriptionFacturation/index.tsx b/src/front/Components/Layouts/Subscription/SubscriptionFacturation/index.tsx
index 056267b6..e66e69a0 100644
--- a/src/front/Components/Layouts/Subscription/SubscriptionFacturation/index.tsx
+++ b/src/front/Components/Layouts/Subscription/SubscriptionFacturation/index.tsx
@@ -95,12 +95,12 @@ export default function SubscriptionFacturation() {
 				<div className={classes["root"]}>
 					<div className={classes["top-container"]}>
 						<div className={classes["top-container-title"]}>
-							<Typography typo={ITypo.H1} color={ITypoColor.BLACK}>
+							<Typography typo={ITypo.H1} color={ITypoColor.COLOR_GENERIC_BLACK}>
 								Abonnement
 							</Typography>
 						</div>
 						<div className={classes["sub-title"]}>
-							<Typography typo={ITypo.P_16} color={ITypoColor.BLACK}>
+							<Typography typo={ITypo.P_16} color={ITypoColor.COLOR_GENERIC_BLACK}>
 								Nos forfaits sont adaptés à la taille de votre office
 							</Typography>
 						</div>
@@ -111,23 +111,23 @@ export default function SubscriptionFacturation() {
 							data-inactive={subscription.type === "STANDARD" ? EForfeitType.standard : EForfeitType.unlimited}>
 							<div className={classes["forfeit-header"]}>
 								<div className={classes["left"]}>
-									<Typography typo={ITypo.P_SB_18} color={ITypoColor.BLACK}>
+									<Typography typo={ITypo.P_SB_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
 										Forfait standard
 									</Typography>
-									<Typography typo={ITypo.P_16} color={ITypoColor.PINK_FLASH}>
+									<Typography typo={ITypo.P_16} color={ITypoColor.COLOR_SECONDARY_500}>
 										Plan par utilisateur
 									</Typography>
 								</div>
 								{subscription.type === "STANDARD" && !cancelAt && (
 									<div className={classes["active-plan"]}>
-										<Typography typo={ITypo.P_18} color={ITypoColor.GREEN_FLASH}>
+										<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_SUCCESS_600}>
 											Plan actif
 										</Typography>
 									</div>
 								)}
 								{subscription.type === "STANDARD" && cancelAt && (
 									<div className={classes["active-plan"]}>
-										<Typography typo={ITypo.P_18} color={ITypoColor.GREEN_FLASH}>
+										<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_SUCCESS_600}>
 											Plan actif jusqu'au {cancelAt.toLocaleDateString()}
 										</Typography>
 									</div>
@@ -135,14 +135,14 @@ export default function SubscriptionFacturation() {
 							</div>
 							<div className={classes["separator"]} />
 							<div className={classes["price-container"]}>
-								<Typography typo={ITypo.H1} color={ITypoColor.BLACK} className={classes["price"]}>
+								<Typography typo={ITypo.H1} color={ITypoColor.COLOR_GENERIC_BLACK} className={classes["price"]}>
 									{forfeitsPrices[EForfeitType.standard]}€
-									<Typography typo={ITypo.H2} color={ITypoColor.BLACK}>
+									<Typography typo={ITypo.H2} color={ITypoColor.COLOR_GENERIC_BLACK}>
 										&nbsp;HT&nbsp;
 									</Typography>
 									/ mois
 								</Typography>
-								<Typography typo={ITypo.P_18} color={ITypoColor.BLACK}>
+								<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
 									+ {collaboratorPrice}€ / collaborateur / mois
 								</Typography>
 							</div>
@@ -182,23 +182,23 @@ export default function SubscriptionFacturation() {
 							data-inactive={subscription.type === "STANDARD" ? EForfeitType.standard : EForfeitType.unlimited}>
 							<div className={classes["forfeit-header"]}>
 								<div className={classes["left"]}>
-									<Typography typo={ITypo.P_SB_18} color={ITypoColor.BLACK}>
+									<Typography typo={ITypo.P_SB_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
 										Forfait illimité
 									</Typography>
-									<Typography typo={ITypo.P_16} color={ITypoColor.PINK_FLASH}>
+									<Typography typo={ITypo.P_16} color={ITypoColor.COLOR_SECONDARY_500}>
 										Plan par office
 									</Typography>
 								</div>
 								{subscription.type === "UNLIMITED" && !cancelAt && (
 									<div className={classes["active-plan"]}>
-										<Typography typo={ITypo.P_18} color={ITypoColor.GREEN_FLASH}>
+										<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_SUCCESS_600}>
 											Plan actif
 										</Typography>
 									</div>
 								)}
 								{subscription.type === "UNLIMITED" && cancelAt && (
 									<div className={classes["active-plan"]}>
-										<Typography typo={ITypo.P_18} color={ITypoColor.GREEN_FLASH}>
+										<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_SUCCESS_600}>
 											Plan actif jusqu'au {cancelAt.toLocaleDateString()}
 										</Typography>
 									</div>
@@ -206,14 +206,14 @@ export default function SubscriptionFacturation() {
 							</div>
 							<div className={classes["separator"]} />
 							<div className={classes["price-container"]}>
-								<Typography typo={ITypo.H1} color={ITypoColor.BLACK} className={classes["price"]}>
+								<Typography typo={ITypo.H1} color={ITypoColor.COLOR_GENERIC_BLACK} className={classes["price"]}>
 									{forfeitsPrices[EForfeitType.unlimited]}€
-									<Typography typo={ITypo.H2} color={ITypoColor.BLACK}>
+									<Typography typo={ITypo.H2} color={ITypoColor.COLOR_GENERIC_BLACK}>
 										&nbsp;HT&nbsp;
 									</Typography>
 									/ mois
 								</Typography>
-								<Typography typo={ITypo.P_18} color={ITypoColor.BLACK}>
+								<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
 									Sans limite de collaborateurs
 								</Typography>
 							</div>
@@ -237,12 +237,12 @@ export default function SubscriptionFacturation() {
 					<div className={classes["actions-container"]}>
 						<Button variant={EButtonVariant.LINE} onClick={cancelOrReactivateSubscription}>
 							{!cancelAt && (
-								<Typography typo={ITypo.P_18} color={ITypoColor.RED_FLASH}>
+								<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_ERROR_600}>
 									Arrêter l'abonnement
 								</Typography>
 							)}
 							{cancelAt && (
-								<Typography typo={ITypo.P_18} color={ITypoColor.RED_FLASH}>
+								<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_ERROR_600}>
 									Renouveler l'abonnement
 								</Typography>
 							)}
@@ -304,7 +304,7 @@ export default function SubscriptionFacturation() {
 				confirmText={"Continuer"}
 				cancelText={"Annuler"}>
 				<div className={classes["modal-content"]}>
-					<Typography typo={ITypo.P_16} color={ITypoColor.BLACK}>
+					<Typography typo={ITypo.P_16} color={ITypoColor.COLOR_GENERIC_BLACK}>
 						En cas de suppression de sièges, les derniers comptes ajoutés seront concernés. Vous pouvez réattribuer les sièges
 						que vous avez dans votre page sur la page "Gérer mes attributions”.
 					</Typography>
diff --git a/src/front/Components/Layouts/Subscription/SubscriptionInvite/index.tsx b/src/front/Components/Layouts/Subscription/SubscriptionInvite/index.tsx
index eb3fa504..1b50b870 100644
--- a/src/front/Components/Layouts/Subscription/SubscriptionInvite/index.tsx
+++ b/src/front/Components/Layouts/Subscription/SubscriptionInvite/index.tsx
@@ -78,16 +78,16 @@ export default function SubscriptionInvite() {
 		<DefaultTemplate title="Nouvelle souscription" hasBackArrow>
 			<div className={classes["root"]}>
 				<div className={classes["container"]}>
-					<Typography typo={ITypo.H1} color={ITypoColor.BLACK}>
+					<Typography typo={ITypo.H1} color={ITypoColor.COLOR_GENERIC_BLACK}>
 						Inviter vos collaborateurs
 					</Typography>
 					{!isNaN(nbOfCollaborators) && (
-						<Typography typo={ITypo.P_SB_18} color={ITypoColor.BLACK}>
+						<Typography typo={ITypo.P_SB_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
 							{nbOfCollaborators} collaborateurs à inviter
 						</Typography>
 					)}
 					{isNaN(nbOfCollaborators) && (
-						<Typography typo={ITypo.P_SB_18} color={ITypoColor.BLACK}>
+						<Typography typo={ITypo.P_SB_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
 							Collaborateurs illimités
 						</Typography>
 					)}
diff --git a/src/front/Components/Layouts/Subscription/SubscriptionNew/index.tsx b/src/front/Components/Layouts/Subscription/SubscriptionNew/index.tsx
index 3bda6882..a7d91351 100644
--- a/src/front/Components/Layouts/Subscription/SubscriptionNew/index.tsx
+++ b/src/front/Components/Layouts/Subscription/SubscriptionNew/index.tsx
@@ -13,12 +13,12 @@ export default function SubscriptionNew() {
 			<div className={classes["root"]}>
 				<div className={classes["top-container"]}>
 					<div className={classes["top-container-title"]}>
-						<Typography typo={ITypo.H1} color={ITypoColor.BLACK}>
+						<Typography typo={ITypo.H1} color={ITypoColor.COLOR_GENERIC_BLACK}>
 							Tarifs
 						</Typography>
 					</div>
 					<div className={classes["sub-title"]}>
-						<Typography typo={ITypo.P_16} color={ITypoColor.BLACK}>
+						<Typography typo={ITypo.P_16} color={ITypoColor.COLOR_GENERIC_BLACK}>
 							Nos forfaits sont adaptés à la taille de votre office
 						</Typography>
 					</div>
@@ -26,23 +26,23 @@ export default function SubscriptionNew() {
 				<div className={classes["forfeits-container"]}>
 					<div className={classes["forfeit-block"]}>
 						<div className={classes["forfeit-header"]}>
-							<Typography typo={ITypo.P_SB_18} color={ITypoColor.BLACK}>
+							<Typography typo={ITypo.P_SB_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
 								Forfait standard
 							</Typography>
-							<Typography typo={ITypo.P_16} color={ITypoColor.PINK_FLASH}>
+							<Typography typo={ITypo.P_16} color={ITypoColor.COLOR_SECONDARY_500}>
 								Plan par utilisateur
 							</Typography>
 						</div>
 						<div className={classes["separator"]} />
 						<div className={classes["price-container"]}>
-							<Typography typo={ITypo.H1} color={ITypoColor.BLACK} className={classes["price"]}>
+							<Typography typo={ITypo.H1} color={ITypoColor.COLOR_GENERIC_BLACK} className={classes["price"]}>
 								99€
-								<Typography typo={ITypo.H2} color={ITypoColor.BLACK}>
+								<Typography typo={ITypo.H2} color={ITypoColor.COLOR_GENERIC_BLACK}>
 									&nbsp;HT&nbsp;
 								</Typography>
 								/ mois
 							</Typography>
-							<Typography typo={ITypo.P_18} color={ITypoColor.BLACK}>
+							<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
 								+ {collaboratorPrice}€ / collaborateur / mois
 							</Typography>
 						</div>
@@ -54,23 +54,23 @@ export default function SubscriptionNew() {
 					</div>
 					<div className={classes["forfeit-block"]}>
 						<div className={classes["forfeit-header"]}>
-							<Typography typo={ITypo.P_SB_18} color={ITypoColor.BLACK}>
+							<Typography typo={ITypo.P_SB_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
 								Forfait illimité
 							</Typography>
-							<Typography typo={ITypo.P_16} color={ITypoColor.PINK_FLASH}>
+							<Typography typo={ITypo.P_16} color={ITypoColor.COLOR_SECONDARY_500}>
 								Plan par office
 							</Typography>
 						</div>
 						<div className={classes["separator"]} />
 						<div className={classes["price-container"]}>
-							<Typography typo={ITypo.H1} color={ITypoColor.BLACK} className={classes["price"]}>
+							<Typography typo={ITypo.H1} color={ITypoColor.COLOR_GENERIC_BLACK} className={classes["price"]}>
 								{forfeitsPrices[EForfeitType.unlimited]}€
-								<Typography typo={ITypo.H2} color={ITypoColor.BLACK}>
+								<Typography typo={ITypo.H2} color={ITypoColor.COLOR_GENERIC_BLACK}>
 									&nbsp;HT&nbsp;
 								</Typography>
 								/ mois
 							</Typography>
-							<Typography typo={ITypo.P_18} color={ITypoColor.BLACK}>
+							<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
 								Sans limite de collaborateurs
 							</Typography>
 						</div>
@@ -84,20 +84,20 @@ export default function SubscriptionNew() {
 				<div className={classes["infos-container"]}>
 					<div className={classes["line"]}>
 						<Image src={CheckIcon} alt="Check icon" />
-						<Typography typo={ITypo.P_16} color={ITypoColor.BLACK}>
+						<Typography typo={ITypo.P_16} color={ITypoColor.COLOR_GENERIC_BLACK}>
 							Accompagnement facilité : profitez d'un onboarding individualisé, où nous vous guidons pour une prise en main
 							optimale de l'application
 						</Typography>
 					</div>
 					<div className={classes["line"]}>
 						<Image src={CheckIcon} alt="Check icon" />
-						<Typography typo={ITypo.P_16} color={ITypoColor.BLACK}>
+						<Typography typo={ITypo.P_16} color={ITypoColor.COLOR_GENERIC_BLACK}>
 							Support technique : notre équipe support est disponible pour vous assister en cas d’incident
 						</Typography>
 					</div>
 					<div className={classes["line"]}>
 						<Image src={CheckIcon} alt="Check icon" />
-						<Typography typo={ITypo.P_16} color={ITypoColor.BLACK}>
+						<Typography typo={ITypo.P_16} color={ITypoColor.COLOR_GENERIC_BLACK}>
 							Mises à jour régulières : bénéficiez de mises à jour fréquentes pour profiter des dernières fonctionnalités,
 							améliorations de sécurité et performances optimisées
 						</Typography>
diff --git a/src/front/Components/Layouts/Subscription/SubscriptionSuccess/classes.module.scss b/src/front/Components/Layouts/Subscription/SubscriptionSuccess/classes.module.scss
index e7d63d20..0afb29b6 100644
--- a/src/front/Components/Layouts/Subscription/SubscriptionSuccess/classes.module.scss
+++ b/src/front/Components/Layouts/Subscription/SubscriptionSuccess/classes.module.scss
@@ -16,6 +16,6 @@
 	.separator {
 		width: 100%;
 		height: 2px;
-		background: var(--grey-medium);
+		background: var(--color-neutral-200);
 	}
 }
diff --git a/src/front/Components/Layouts/Subscription/SubscriptionSuccess/index.tsx b/src/front/Components/Layouts/Subscription/SubscriptionSuccess/index.tsx
index 679b91af..54c9c7c9 100644
--- a/src/front/Components/Layouts/Subscription/SubscriptionSuccess/index.tsx
+++ b/src/front/Components/Layouts/Subscription/SubscriptionSuccess/index.tsx
@@ -56,7 +56,7 @@ export default function SubscriptionSuccess() {
 				<div className={classes["root"]}>
 					<div className={classes["left"]}>
 						<div className={classes["title"]}>
-							<Typography typo={ITypo.H1} color={ITypoColor.BLACK}>
+							<Typography typo={ITypo.H1} color={ITypoColor.COLOR_GENERIC_BLACK}>
 								Abonnement réussi !
 							</Typography>
 						</div>
diff --git a/src/front/Components/Layouts/Users/UserInformations/classes.module.scss b/src/front/Components/Layouts/Users/UserInformations/classes.module.scss
index cc483aa2..60f8e3b8 100644
--- a/src/front/Components/Layouts/Users/UserInformations/classes.module.scss
+++ b/src/front/Components/Layouts/Users/UserInformations/classes.module.scss
@@ -14,7 +14,7 @@
 	}
 
 	.user-infos {
-		background-color: var(--grey-soft);
+		background-color: var(--color-neutral-50);
 		display: flex;
 		justify-content: space-between;
 		padding: 24px;
@@ -40,7 +40,7 @@
 
 	.role-container {
 		padding: 32px 16px;
-		border: 1px solid var(--grey);
+		border: 1px solid var(--color-neutral-500);
 
 		margin-top: 32px;
 
@@ -67,7 +67,7 @@
 					align-items: center;
 					display: flex;
 					gap: 16px;
-					background-color: var(--orange-soft);
+					background-color: var(--color-warning-500-soft);
 					border: 1px solid #e7e7e7;
 					border-radius: 5px;
 					padding: 16px;
diff --git a/src/front/Components/Layouts/Users/UserInformations/index.tsx b/src/front/Components/Layouts/Users/UserInformations/index.tsx
index 0a08aa29..e4ca93af 100644
--- a/src/front/Components/Layouts/Users/UserInformations/index.tsx
+++ b/src/front/Components/Layouts/Users/UserInformations/index.tsx
@@ -217,31 +217,31 @@ export default function UserInformations(props: IProps) {
 						<Typography typo={ITypo.H1Bis}>
 							{userSelected?.contact?.first_name + " " + userSelected?.contact?.last_name}
 						</Typography>
-						<Typography typo={ITypo.H3} color={ITypoColor.GREY}>
+						<Typography typo={ITypo.H3} color={ITypoColor.COLOR_NEUTRAL_500}>
 							Office {userSelected?.office_membership?.name.toLocaleUpperCase()}
 						</Typography>
 					</div>
 					<div className={classes["user-infos"]}>
 						<div className={classes["user-infos-row"]}>
-							<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.GREY}>
+							<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.COLOR_NEUTRAL_500}>
 								Nom
 							</Typography>
 							<Typography typo={ITypo.P_18}>{userSelected?.contact?.first_name}</Typography>
 						</div>
 						<div className={classes["user-infos-row"]}>
-							<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.GREY}>
+							<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.COLOR_NEUTRAL_500}>
 								Prénom
 							</Typography>
 							<Typography typo={ITypo.P_18}>{userSelected?.contact?.last_name}</Typography>
 						</div>
 						<div className={classes["user-infos-row"]}>
-							<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.GREY}>
+							<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.COLOR_NEUTRAL_500}>
 								Numéro de téléphone
 							</Typography>
 							<Typography typo={ITypo.P_18}>{userSelected?.contact?.cell_phone_number}</Typography>
 						</div>
 						<div className={classes["user-infos-row"]}>
-							<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.GREY}>
+							<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.COLOR_NEUTRAL_500}>
 								Email
 							</Typography>
 							<Typography typo={ITypo.P_18}>{userSelected?.contact?.email}</Typography>
diff --git a/src/front/Components/Layouts/Users/index.tsx b/src/front/Components/Layouts/Users/index.tsx
index c686a669..c3dbe7d3 100644
--- a/src/front/Components/Layouts/Users/index.tsx
+++ b/src/front/Components/Layouts/Users/index.tsx
@@ -14,7 +14,7 @@ export default class Users extends BasePage<IProps, IState> {
 					<div className={classes["no-folder-selected"]}>
 						<Typography typo={ITypo.H1Bis}>Informations des utilisateurs</Typography>
 						<div className={classes["choose-a-folder"]}>
-							<Typography typo={ITypo.P_18} color={ITypoColor.GREY}>
+							<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_NEUTRAL_500}>
 								Sélectionnez un utilisateur
 							</Typography>
 						</div>
diff --git a/src/front/Themes/constants-old.scss b/src/front/Themes/constants-old.scss
new file mode 100644
index 00000000..975d1a60
--- /dev/null
+++ b/src/front/Themes/constants-old.scss
@@ -0,0 +1,44 @@
+// $screen-xl: 2559px;
+$screen-l: 1439px;
+$screen-ls: 1280px;
+$screen-m: 1023px;
+$screen-s: 767px;
+// $screen-xs: 424px;
+
+$custom-easing: cubic-bezier(0.645, 0.045, 0.355, 1);
+
+// Generic colors
+$black: #000000;
+$white: #ffffff;
+
+// Flash colors
+$green-flash: #12bf4d;
+$blue-flash: #005176;
+$turquoise-flash: #3fa79e;
+$purple-flash: #320756;
+$purple-hover: #4e1480;
+$orange-flash: #ffb017;
+$red-flash: #a63a23;
+$re-hover: #cc4c31;
+$pink-flash: #bd4b91;
+$pink-hover: #e34ba9;
+
+// Soft colors
+$green-soft: #baf2cd;
+$blue-soft: #a7c6d4;
+$orange-soft: #ffdc99;
+$turquoise-soft: #c3eae6;
+$purple-soft: #c5b2d4;
+$orange-soft: #ffdc99;
+$red-soft: #f08771;
+$pink-soft: #f8b9df;
+
+$orange-soft-hover: #ffd078;
+$grey: #939393;
+$grey-medium: #e7e7e7;
+$grey-soft: #f9f9f9;
+
+$modal-background: rgba(0, 0, 0, 0.44);
+
+$shadow-nav: 0px 8px 10px rgba(0, 0, 0, 0.07);
+$shadow-tooltip: 0px 4px 24px rgba(0, 0, 0, 0.15);
diff --git a/src/front/Themes/constants.scss b/src/front/Themes/constants.scss
index 975d1a60..a230b0e4 100644
--- a/src/front/Themes/constants.scss
+++ b/src/front/Themes/constants.scss
@@ -8,35 +8,31 @@ $screen-s: 767px;
 $custom-easing: cubic-bezier(0.645, 0.045, 0.355, 1);
 
 // Generic colors
-$black: #000000;
-$white: #ffffff;
+$color-generic-black: #000000;
+$color-generic-white: #ffffff;
 
 // Flash colors
-$green-flash: #12bf4d;
-$blue-flash: #005176;
-$turquoise-flash: #3fa79e;
-$purple-flash: #320756;
-$purple-hover: #4e1480;
-$orange-flash: #ffb017;
-$red-flash: #a63a23;
-$re-hover: #cc4c31;
-$pink-flash: #bd4b91;
-$pink-hover: #e34ba9;
+$color-neutral-500: #6d7e8a;
+$color-neutral-200: #d7dce0;
+$color-neutral-50: #f7f8f8;
+$color-primary-500: #005bcb;
+$color-primary-700: #0040a4;
+$color-secondary-500: #ff4617;
+$color-secondary-700: #c71707;
+$color-info-500: #29a6ff;
+$color-success-600: #15a450;
+$color-warning-500: #f99f09;
+$color-warning-600: #de7702;
+$color-error-600: #dc2625;
+$color-error-800: #991b1c;
 
 // Soft colors
-$green-soft: #baf2cd;
-$blue-soft: #a7c6d4;
-$orange-soft: #ffdc99;
-$turquoise-soft: #c3eae6;
-$purple-soft: #c5b2d4;
-$orange-soft: #ffdc99;
-$red-soft: #f08771;
-$pink-soft: #f8b9df;
-
-$orange-soft-hover: #ffd078;
-$grey: #939393;
-$grey-medium: #e7e7e7;
-$grey-soft: #f9f9f9;
+$color-primary-500-soft: #005bcb4d;
+$color-secondary-500-soft: #ff46174d;
+$color-info-500-soft: #29a6ff4d;
+$color-success-600-soft: #15a4504d;
+$color-warning-500-soft: #f99f094d;
+$color-error-600-soft: #dc26254d;
 
 $modal-background: rgba(0, 0, 0, 0.44);
 
diff --git a/src/front/Themes/modes.scss b/src/front/Themes/modes.scss
index be21231a..8664fa8c 100644
--- a/src/front/Themes/modes.scss
+++ b/src/front/Themes/modes.scss
@@ -3,8 +3,8 @@
 body.body {
 	//   --black: #000000;
 
-	--green-flash: #{green-flash};
-	--black: #{$black};
+	--color-success-600: #{color-success-600};
+	--black: #{$color-generic-black};
 
 	//   --blue-flash: #005176;
 	//   --turquoise-flash: #3fa79e;
diff --git a/src/front/Themes/variables-old.scss b/src/front/Themes/variables-old.scss
new file mode 100644
index 00000000..f067f836
--- /dev/null
+++ b/src/front/Themes/variables-old.scss
@@ -0,0 +1,36 @@
+@import "@Themes/constants.scss";
+
+:root {
+	--root-max-width: 1440px;
+	--root-margin: auto;
+	--root-padding: 64px 120px;
+
+	--font-primary: "Inter", sans-serif;
+
+	--green-flash: #{$green-flash};
+	--blue-flash: #{$blue-flash};
+	--turquoise-flash: #{$turquoise-flash};
+	--purple-flash: #{$purple-flash};
+	--purple-hover: #{$purple-hover};
+	--orange-flash: #{$orange-flash};
+	--red-flash: #{$red-flash};
+	--re-hover: #{$re-hover};
+	--pink-flash: #{$pink-flash};
+	--pink-hover: #{$pink-hover};
+
+	--green-soft: #{$green-soft};
+	--blue-soft: #{$blue-soft};
+	--turquoise-soft: #{$turquoise-soft};
+	--purple-soft: #{$purple-soft};
+	--orange-soft: #{$orange-soft};
+	--orange-soft-hover: #{$orange-soft-hover};
+	--red-soft: #{$red-soft};
+	--pink-soft: #{$pink-soft};
+
+	--grey: #{$grey};
+	--grey-medium: #{$grey-medium};
+	--grey-soft: #{$grey-soft};
+
+	--black: #{$black};
+	--white: #{$white};
+}
diff --git a/src/front/Themes/variables.scss b/src/front/Themes/variables.scss
index f067f836..d5ae1d02 100644
--- a/src/front/Themes/variables.scss
+++ b/src/front/Themes/variables.scss
@@ -7,30 +7,27 @@
 
 	--font-primary: "Inter", sans-serif;
 
-	--green-flash: #{$green-flash};
-	--blue-flash: #{$blue-flash};
-	--turquoise-flash: #{$turquoise-flash};
-	--purple-flash: #{$purple-flash};
-	--purple-hover: #{$purple-hover};
-	--orange-flash: #{$orange-flash};
-	--red-flash: #{$red-flash};
-	--re-hover: #{$re-hover};
-	--pink-flash: #{$pink-flash};
-	--pink-hover: #{$pink-hover};
+	--color-generic-black: #{$color-generic-black};
+	--color-generic-white: #{$color-generic-white};
 
-	--green-soft: #{$green-soft};
-	--blue-soft: #{$blue-soft};
-	--turquoise-soft: #{$turquoise-soft};
-	--purple-soft: #{$purple-soft};
-	--orange-soft: #{$orange-soft};
-	--orange-soft-hover: #{$orange-soft-hover};
-	--red-soft: #{$red-soft};
-	--pink-soft: #{$pink-soft};
+	--color-neutral-500: #{$color-neutral-500};
+	--color-neutral-200: #{$color-neutral-200};
+	--color-neutral-50: #{$color-neutral-50};
+	--color-primary-500: #{$color-primary-500};
+	--color-primary-700: #{$color-primary-700};
+	--color-secondary-500: #{$color-secondary-500};
+	--color-secondary-700: #{$color-secondary-700};
+	--color-info-500: #{$color-info-500};
+	--color-success-600: #{$color-success-600};
+	--color-warning-500: #{$color-warning-500};
+	--color-warning-600: #{$color-warning-600};
+	--color-error-600: #{$color-error-600};
+	--color-error-800: #{$color-error-800};
 
-	--grey: #{$grey};
-	--grey-medium: #{$grey-medium};
-	--grey-soft: #{$grey-soft};
-
-	--black: #{$black};
-	--white: #{$white};
+	--color-primary-500-soft: #{$color-primary-500-soft};
+	--color-secondary-500-soft: #{$color-secondary-500-soft};
+	--color-info-500-soft: #{$color-info-500-soft};
+	--color-success-600-soft: #{$color-success-600-soft};
+	--color-warning-500-soft: #{$color-warning-500-soft};
+	--color-error-600-soft: #{$color-error-600-soft};
 }

From 5918fa38ff5e07bc13c095e2da524f6cc8b57dbd Mon Sep 17 00:00:00 2001
From: Vins <vincent.alamelle@smart-chain.fr>
Date: Tue, 2 Jul 2024 14:52:36 +0200
Subject: [PATCH 2/7] Reacto typo theme

---
 .../DesignSystem/BlockList/index.tsx          |   2 +-
 .../DesignSystem/CheckBox/index.tsx           |   2 +-
 .../DesignSystem/DepositDocument/index.tsx    |  27 +--
 .../DepositOtherDocument/index.tsx            |  16 +-
 .../DesignSystem/DepositRib/index.tsx         |  11 +-
 .../Document/DocumentNotary/index.tsx         |   4 +-
 .../DesignSystem/FilePreview/index.tsx        |   2 +-
 .../FolderBoxInformation/index.tsx            |  28 +--
 .../DesignSystem/FolderContainer/index.tsx    |   2 +-
 .../DesignSystem/Form/BaseField.tsx           |   2 +-
 .../DesignSystem/Form/DateField/index.tsx     |   2 +-
 .../DesignSystem/Form/SelectField/index.tsx   |   8 +-
 .../DesignSystem/Form/TextField/index.tsx     |   2 +-
 .../DesignSystem/Form/TextareaField/index.tsx |   2 +-
 .../BurgerModal/BurgerModalSubmenu/index.tsx  |   4 +-
 .../DesignSystem/Header/HeaderLink/index.tsx  |   4 +-
 .../HeaderSubmenu/HeaderSubmenuLink/index.tsx |   2 +-
 .../Header/HeaderSubmenu/index.tsx            |   2 +-
 .../Header/NavigationLink/index.tsx           |   2 +-
 .../Notifications/NotificationModal/index.tsx |   6 +-
 .../Components/DesignSystem/Header/index.tsx  |   2 +-
 .../DesignSystem/LogOutButton/index.tsx       |   4 +-
 .../Modal/Elements/Header/index.tsx           |   2 +-
 .../Modal/Elements/Loader/index.tsx           |   2 +-
 .../Components/DesignSystem/Modal/index.tsx   |   8 +-
 .../DesignSystem/MultiSelect/index.tsx        |   4 +-
 .../DesignSystem/Newsletter/index.tsx         |   8 +-
 .../QuantityProgressBar/ProgressBar/index.tsx |   2 +-
 .../QuantityProgressBar/index.tsx             |   2 +-
 .../DesignSystem/RadioBox/index.tsx           |   2 +-
 .../DesignSystem/SearchBar/index.tsx          |   2 +-
 .../Components/DesignSystem/Switch/index.tsx  |   2 +-
 .../ToastsContainer/ToastElement/index.tsx    |   4 +-
 .../Typography/classes.module.scss            | 136 ++++++++------
 .../DesignSystem/Typography/index-old.tsx     |  62 +++++++
 .../DesignSystem/Typography/index.tsx         |  34 ++--
 .../Typography/old-classes.module.scss        | 166 ++++++++++++++++++
 .../UserFolder/DocumentList/index.tsx         |   4 +-
 .../UserFolder/UserFolderHeader/index.tsx     |  16 +-
 .../Components/DesignSystem/Version/index.tsx |   2 +-
 .../Components/Elements/MessageBox/index.tsx  |   2 +-
 .../Components/Elements/NavTab/index.tsx      |   2 +-
 .../Layouts/ClientDashboard/index.tsx         |  18 +-
 .../Layouts/ClientDashboard/index2.tsx        |  14 +-
 .../CollaboratorInformations/index.tsx        |  28 +--
 .../Layouts/Collaborators/index.tsx           |   4 +-
 .../DeedTypes/DeedTypesCreate/index.tsx       |   4 +-
 .../Layouts/DeedTypes/DeedTypesEdit/index.tsx |   4 +-
 .../DeedTypes/DeedTypesInformations/index.tsx |  14 +-
 .../Components/Layouts/DeedTypes/index.tsx    |   4 +-
 .../DocumentTypesCreate/index.tsx             |   2 +-
 .../DocumentTypes/DocumentTypesEdit/index.tsx |   2 +-
 .../DocumentTypesInformations/index.tsx       |  14 +-
 .../Layouts/DocumentTypes/index.tsx           |   4 +-
 .../Folder/AddClientToFolder/index.tsx        |   6 +-
 .../AskDocuments/ParameterDocuments/index.tsx |   6 +-
 .../Layouts/Folder/AskDocuments/index.tsx     |   2 +-
 .../Folder/CreateCustomerNote/index.tsx       |   2 +-
 .../Layouts/Folder/CreateFolder/index.tsx     |   6 +-
 .../FolderInformation/ClientSection/index.tsx |   2 +-
 .../Folder/FolderInformation/index.tsx        |  22 ++-
 .../Layouts/Folder/UpdateClient/index.tsx     |   2 +-
 .../Folder/UpdateCustomerNote/index.tsx       |   2 +-
 .../UpdateFolderCollaborators/index.tsx       |   4 +-
 .../Folder/UpdateFolderDescription/index.tsx  |   2 +-
 .../Folder/UpdateFolderMetadata/index.tsx     |   2 +-
 .../Folder/ViewDocuments/OcrResult/index.tsx  |   6 +-
 .../Layouts/Folder/ViewDocuments/index.tsx    |  16 +-
 src/front/Components/Layouts/Folder/index.tsx |   4 +-
 .../FolderInformation/ClientSection/index.tsx |   2 +-
 .../FolderInformation/index.tsx               |   6 +-
 .../UpdateFolderMetadata/index.tsx            |   2 +-
 .../Layouts/FolderArchived/index.tsx          |   4 +-
 src/front/Components/Layouts/Home/index.tsx   |   2 +-
 src/front/Components/Layouts/Login/index.tsx  |  16 +-
 .../Layouts/LoginCallback/index.tsx           |   4 +-
 .../Layouts/LoginCallbackCustomer/index.tsx   |   4 +-
 .../LoginCustomer/PasswordForgotten/index.tsx |   4 +-
 .../Layouts/LoginCustomer/StepEmail/index.tsx |  12 +-
 .../LoginCustomer/StepNewPassword/index.tsx   |   4 +-
 .../LoginCustomer/StepPassword/index.tsx      |   6 +-
 .../Layouts/LoginCustomer/StepTotp/index.tsx  |   8 +-
 .../Layouts/LoginCustomer/index.tsx           |   2 +-
 .../Components/Layouts/LoginHome/index.tsx    |   8 +-
 .../Components/Layouts/MyAccount/index.tsx    |   6 +-
 .../Offices/OfficeInformations/index.tsx      |  72 ++++----
 .../Components/Layouts/Offices/index.tsx      |   4 +-
 .../Components/Layouts/PageNotFound/index.tsx |   4 +-
 src/front/Components/Layouts/Rib/index.tsx    |   8 +-
 .../Layouts/Roles/RolesCreate/index.tsx       |   4 +-
 .../Layouts/Roles/RolesInformations/index.tsx |   8 +-
 src/front/Components/Layouts/Roles/index.tsx  |   4 +-
 .../Components/Layouts/SelectFolder/index.tsx |   2 +-
 .../SubscribeCheckoutTicket/index.tsx         |  39 ++--
 .../SubscribeIllimityComponent/index.tsx      |  18 +-
 .../SubscribeStandardComponent/index.tsx      |  16 +-
 .../SubscriptionClientInfos/index.tsx         |   8 +-
 .../SubscriptionManageCollaborators/index.tsx |   6 +-
 .../Subscription/SubscriptionError/index.tsx  |   2 +-
 .../SubscriptionFacturation/index.tsx         |  40 ++---
 .../Subscription/SubscriptionInvite/index.tsx |   6 +-
 .../Subscription/SubscriptionNew/index.tsx    |  30 ++--
 .../SubscriptionSuccess/index.tsx             |   2 +-
 .../Layouts/Users/UserInformations/index.tsx  |  32 ++--
 src/front/Components/Layouts/Users/index.tsx  |   4 +-
 105 files changed, 736 insertions(+), 457 deletions(-)
 create mode 100644 src/front/Components/DesignSystem/Typography/index-old.tsx
 create mode 100644 src/front/Components/DesignSystem/Typography/old-classes.module.scss

diff --git a/src/front/Components/DesignSystem/BlockList/index.tsx b/src/front/Components/DesignSystem/BlockList/index.tsx
index ddf1cbb9..1d140528 100644
--- a/src/front/Components/DesignSystem/BlockList/index.tsx
+++ b/src/front/Components/DesignSystem/BlockList/index.tsx
@@ -32,7 +32,7 @@ export default function BlockList({ blocks, onSelectedBlock }: IProps) {
 					<div onClick={selectBlock} key={folder.id} id={folder.id}>
 						<div className={classes["root"]} data-selected={folder.selected.toString()}>
 							<div className={classes["left-side"]}>
-								<Typography typo={ITypo.P_16}>{folder.name}</Typography>
+								<Typography typo={ITypo.TEXT_MD_REGULAR}>{folder.name}</Typography>
 							</div>
 							<div className={classes["right-side"]}>
 								{folder.hasFlag && <WarningBadge />}
diff --git a/src/front/Components/DesignSystem/CheckBox/index.tsx b/src/front/Components/DesignSystem/CheckBox/index.tsx
index 82a84bca..dc8b16f2 100644
--- a/src/front/Components/DesignSystem/CheckBox/index.tsx
+++ b/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.P_ERR_16} color={ITypoColor.COLOR_GENERIC_BLACK}>
+			<Typography typo={ITypo.TEXT_MD_ERROR} color={ITypoColor.COLOR_GENERIC_BLACK}>
 				<label className={classNames(classes["root"], this.props.disabled && classes["disabled"])}>
 					<input
 						type="checkbox"
diff --git a/src/front/Components/DesignSystem/DepositDocument/index.tsx b/src/front/Components/DesignSystem/DepositDocument/index.tsx
index 4ec5c5e3..dd3b0007 100644
--- a/src/front/Components/DesignSystem/DepositDocument/index.tsx
+++ b/src/front/Components/DesignSystem/DepositDocument/index.tsx
@@ -123,7 +123,7 @@ export default class DepositDocument extends React.Component<IProps, IState> {
 						</div>
 						<div className={classes["separator"]} />
 						<div className={classes["right"]}>
-							<Typography typo={ITypo.P_SB_16} color={ITypoColor.COLOR_GENERIC_BLACK} className={classes["title"]}>
+							<Typography typo={ITypo.TEXT_MD_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK} className={classes["title"]}>
 								<div
 									className={
 										this.props.document.document_status === EDocumentStatus.VALIDATED ? classes["validated"] : ""
@@ -140,7 +140,7 @@ export default class DepositDocument extends React.Component<IProps, IState> {
 								)}
 							</Typography>
 							{this.props.document.document_status !== EDocumentStatus.VALIDATED && (
-								<Typography color={ITypoColor.COLOR_NEUTRAL_500} typo={ITypo.CAPTION_14}>
+								<Typography color={ITypoColor.COLOR_NEUTRAL_500} typo={ITypo.TEXT_SM_REGULAR}>
 									Sélectionnez des documents .jpg, .pdf ou .png
 								</Typography>
 							)}
@@ -158,7 +158,7 @@ export default class DepositDocument extends React.Component<IProps, IState> {
 									<div className={classes["left-part"]}>
 										<Image src={DocumentCheckIcon} alt="Document check" />
 										<Typography
-											typo={ITypo.P_16}
+											typo={ITypo.TEXT_MD_REGULAR}
 											color={ITypoColor.COLOR_NEUTRAL_500}
 											title={file.fileName ?? fileObj.name}>
 											{this.shortName(file.fileName || fileObj.name)}
@@ -180,7 +180,7 @@ export default class DepositDocument extends React.Component<IProps, IState> {
 									<div className={classes["loader"]}>
 										<Loader />
 									</div>
-									<Typography typo={ITypo.P_16} color={ITypoColor.COLOR_NEUTRAL_500}>
+									<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
 										Chargement...
 									</Typography>
 								</div>
@@ -191,7 +191,10 @@ export default class DepositDocument extends React.Component<IProps, IState> {
 					{this.props.document.document_status !== EDocumentStatus.VALIDATED && (
 						<div className={classes["bottom-container"]}>
 							<Button variant={EButtonVariant.LINE} className={classes["add-button"]} onClick={this.addDocument}>
-								<Typography typo={ITypo.P_SB_16} color={ITypoColor.COLOR_SECONDARY_500} className={classes["add-document"]}>
+								<Typography
+									typo={ITypo.TEXT_MD_SEMIBOLD}
+									color={ITypoColor.COLOR_SECONDARY_500}
+									className={classes["add-document"]}>
 									Ajouter un document <Image src={PlusIcon} alt="Plus icon" />
 								</Typography>
 							</Button>
@@ -206,7 +209,7 @@ export default class DepositDocument extends React.Component<IProps, IState> {
 						header={"Motif du refus"}
 						confirmText={"J'ai compris"}>
 						<div className={classes["modal-content"]}>
-							<Typography typo={ITypo.P_16} className={classes["text"]}>
+							<Typography typo={ITypo.TEXT_MD_REGULAR} className={classes["text"]}>
 								Votre document a été refusé pour la raison suivante :
 							</Typography>
 							<TextAreaField placeholder="Description" defaultValue={this.state.refusedReason} readonly />
@@ -214,14 +217,14 @@ export default class DepositDocument extends React.Component<IProps, IState> {
 					</Confirm>
 				</div>
 				{this.props.document.document_status === EDocumentStatus.REFUSED && (
-					<Typography typo={ITypo.CAPTION_14} className={classes["error-message"]}>
+					<Typography typo={ITypo.TEXT_SM_REGULAR} className={classes["error-message"]}>
 						Ce document n'est pas conforme. Veuillez le déposer à nouveau.
 					</Typography>
 				)}
 				{this.state.showFailedUploaded && (
 					<Alert onClose={this.onCloseAlertUpload} header={"Fichier non autorisé"} isOpen={!!this.state.showFailedUploaded}>
 						<div className={classes["modal-content"]}>
-							<Typography typo={ITypo.P_16} className={classes["text"]}>
+							<Typography typo={ITypo.TEXT_MD_REGULAR} className={classes["text"]}>
 								{this.state.showFailedUploaded}
 							</Typography>
 						</div>
@@ -265,26 +268,26 @@ export default class DepositDocument extends React.Component<IProps, IState> {
 		switch (history.document_status) {
 			case EDocumentStatus.ASKED:
 				return (
-					<Typography color={ITypoColor.COLOR_NEUTRAL_500} typo={ITypo.CAPTION_14}>
+					<Typography color={ITypoColor.COLOR_NEUTRAL_500} typo={ITypo.TEXT_SM_REGULAR}>
 						Demandé par votre notaire le {this.formatDate(history.created_at!)}
 					</Typography>
 				);
 			case EDocumentStatus.VALIDATED:
 				return (
-					<Typography color={ITypoColor.COLOR_NEUTRAL_500} typo={ITypo.CAPTION_14}>
+					<Typography color={ITypoColor.COLOR_NEUTRAL_500} typo={ITypo.TEXT_SM_REGULAR}>
 						Validé par votre notaire le {this.formatDate(history.created_at!)}
 					</Typography>
 				);
 			case EDocumentStatus.DEPOSITED:
 				return (
-					<Typography color={ITypoColor.COLOR_NEUTRAL_500} typo={ITypo.CAPTION_14}>
+					<Typography color={ITypoColor.COLOR_NEUTRAL_500} typo={ITypo.TEXT_SM_REGULAR}>
 						Déposé le {this.formatDate(history.created_at!)}
 					</Typography>
 				);
 
 			case EDocumentStatus.REFUSED:
 				return (
-					<Typography typo={ITypo.CAPTION_14} color={ITypoColor.COLOR_ERROR_800}>
+					<Typography typo={ITypo.TEXT_SM_REGULAR} color={ITypoColor.COLOR_ERROR_800}>
 						Document non conforme
 						{history.refused_reason && history.refused_reason.length > 0 && (
 							<Button
diff --git a/src/front/Components/DesignSystem/DepositOtherDocument/index.tsx b/src/front/Components/DesignSystem/DepositOtherDocument/index.tsx
index 2fa9b50d..c248c89a 100644
--- a/src/front/Components/DesignSystem/DepositOtherDocument/index.tsx
+++ b/src/front/Components/DesignSystem/DepositOtherDocument/index.tsx
@@ -87,10 +87,10 @@ export default class DepositOtherDocument extends React.Component<IProps, IState
 					canConfirm={!this.state.isLoading}>
 					<div className={classes["modal-content"]}>
 						<div className={classes["container"]}>
-							<Typography typo={ITypo.P_16} className={classes["text"]}>
+							<Typography typo={ITypo.TEXT_MD_REGULAR} className={classes["text"]}>
 								Vous souhaitez envoyer un autre document à votre notaire ?
 							</Typography>
-							<Typography typo={ITypo.P_16} className={classes["text"]}>
+							<Typography typo={ITypo.TEXT_MD_REGULAR} className={classes["text"]}>
 								Glissez / Déposez votre document dans la zone prévue à cet effet ou cliquez sur la zone puis sélectionnez le
 								document correspondant.
 							</Typography>
@@ -111,7 +111,7 @@ export default class DepositOtherDocument extends React.Component<IProps, IState
 									<div className={classes["separator"]} />
 									<div className={classes["right"]}>
 										<Typography
-											typo={ITypo.P_SB_16}
+											typo={ITypo.TEXT_MD_SEMIBOLD}
 											color={ITypoColor.COLOR_GENERIC_BLACK}
 											className={classes["title"]}>
 											<div
@@ -123,7 +123,7 @@ export default class DepositOtherDocument extends React.Component<IProps, IState
 												{this.props.document.document_type?.name}
 											</div>
 										</Typography>
-										<Typography color={ITypoColor.COLOR_NEUTRAL_500} typo={ITypo.CAPTION_14}>
+										<Typography color={ITypoColor.COLOR_NEUTRAL_500} typo={ITypo.TEXT_SM_REGULAR}>
 											Sélectionnez des documents .jpg, .pdf ou .png
 										</Typography>
 									</div>
@@ -137,7 +137,7 @@ export default class DepositOtherDocument extends React.Component<IProps, IState
 												<div className={classes["file-container"]} key={fileObj.name}>
 													<div className={classes["left-part"]}>
 														<Image src={DocumentCheckIcon} alt="Document check" />
-														<Typography typo={ITypo.P_16} color={ITypoColor.COLOR_NEUTRAL_500}>
+														<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
 															{this.shortName(fileObj.name)}
 														</Typography>
 													</div>
@@ -156,7 +156,7 @@ export default class DepositOtherDocument extends React.Component<IProps, IState
 								<div className={classes["bottom-container"]}>
 									<Button variant={EButtonVariant.LINE} className={classes["add-button"]} onClick={this.addDocument}>
 										<Typography
-											typo={ITypo.P_SB_16}
+											typo={ITypo.TEXT_MD_SEMIBOLD}
 											color={ITypoColor.COLOR_SECONDARY_500}
 											className={classes["add-document"]}>
 											Ajouter un document <Image src={PlusIcon} alt="Plus icon" />
@@ -173,7 +173,7 @@ export default class DepositOtherDocument extends React.Component<IProps, IState
 						header={"L'ajout de Document n'est plus autorisé"}
 						isOpen={!!this.state.showFailedDocument}>
 						<div className={classes["modal-content"]}>
-							<Typography typo={ITypo.P_16} className={classes["text"]}>
+							<Typography typo={ITypo.TEXT_MD_REGULAR} className={classes["text"]}>
 								{this.state.showFailedDocument}
 							</Typography>
 						</div>
@@ -182,7 +182,7 @@ export default class DepositOtherDocument extends React.Component<IProps, IState
 				{this.state.showFailedUploaded && (
 					<Alert onClose={this.onCloseAlertUpload} header={"Fichier non autorisé"} isOpen={!!this.state.showFailedUploaded}>
 						<div className={classes["modal-content"]}>
-							<Typography typo={ITypo.P_16} className={classes["text"]}>
+							<Typography typo={ITypo.TEXT_MD_REGULAR} className={classes["text"]}>
 								{this.state.showFailedUploaded}
 							</Typography>
 						</div>
diff --git a/src/front/Components/DesignSystem/DepositRib/index.tsx b/src/front/Components/DesignSystem/DepositRib/index.tsx
index f5fb18a8..034653c5 100644
--- a/src/front/Components/DesignSystem/DepositRib/index.tsx
+++ b/src/front/Components/DesignSystem/DepositRib/index.tsx
@@ -129,10 +129,10 @@ export default class DepositRib extends React.Component<IProps, IState> {
 						<div className={classes["separator"]} />
 
 						<div className={classes["right"]}>
-							<Typography typo={ITypo.P_SB_16} color={ITypoColor.COLOR_GENERIC_BLACK} className={classes["title"]}>
+							<Typography typo={ITypo.TEXT_MD_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK} className={classes["title"]}>
 								<div>Déposer un RIB</div>
 							</Typography>
-							<Typography color={ITypoColor.COLOR_NEUTRAL_500} typo={ITypo.CAPTION_14}>
+							<Typography color={ITypoColor.COLOR_NEUTRAL_500} typo={ITypo.TEXT_SM_REGULAR}>
 								Sélectionnez des documents .jpg, .pdf ou .png
 							</Typography>
 						</div>
@@ -144,7 +144,7 @@ export default class DepositRib extends React.Component<IProps, IState> {
 								<div className={classes["file-container"]} key="0">
 									<div className={classes["left-part"]}>
 										<Image src={DocumentCheckIcon} alt="Document check" />
-										<Typography typo={ITypo.P_16} color={ITypoColor.COLOR_NEUTRAL_500} title={file.name}>
+										<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500} title={file.name}>
 											{this.shortName(file.name)}
 										</Typography>
 									</div>
@@ -161,7 +161,10 @@ export default class DepositRib extends React.Component<IProps, IState> {
 
 					<div className={classes["bottom-container"]}>
 						<Button variant={EButtonVariant.LINE} className={classes["add-button"]} onClick={() => this.fileInput!.click()}>
-							<Typography typo={ITypo.P_SB_16} color={ITypoColor.COLOR_SECONDARY_500} className={classes["add-document"]}>
+							<Typography
+								typo={ITypo.TEXT_MD_SEMIBOLD}
+								color={ITypoColor.COLOR_SECONDARY_500}
+								className={classes["add-document"]}>
 								Ajouter un document <Image src={PlusIcon} alt="Plus icon" />
 							</Typography>
 						</Button>
diff --git a/src/front/Components/DesignSystem/Document/DocumentNotary/index.tsx b/src/front/Components/DesignSystem/Document/DocumentNotary/index.tsx
index 4e6e7c70..5db4bc46 100644
--- a/src/front/Components/DesignSystem/Document/DocumentNotary/index.tsx
+++ b/src/front/Components/DesignSystem/Document/DocumentNotary/index.tsx
@@ -41,8 +41,8 @@ class DocumentNotaryClass extends React.Component<IPropsClass, IState> {
 		return (
 			<div className={classNames(classes["root"], classes[this.props.document.document_status])} onClick={this.onClick}>
 				<div>
-					<Typography typo={ITypo.P_SB_16}>{this.props.document?.document_type?.name}</Typography>
-					<Typography typo={ITypo.CAPTION_14}>{this.getDocumentsTitle()}</Typography>
+					<Typography typo={ITypo.TEXT_MD_SEMIBOLD}>{this.props.document?.document_type?.name}</Typography>
+					<Typography typo={ITypo.TEXT_SM_REGULAR}>{this.getDocumentsTitle()}</Typography>
 				</div>
 				{this.renderIcon()}
 			</div>
diff --git a/src/front/Components/DesignSystem/FilePreview/index.tsx b/src/front/Components/DesignSystem/FilePreview/index.tsx
index 70607659..9dfc749a 100644
--- a/src/front/Components/DesignSystem/FilePreview/index.tsx
+++ b/src/front/Components/DesignSystem/FilePreview/index.tsx
@@ -26,7 +26,7 @@ export default class FilePreview extends React.Component<IProps, IState> {
 				{this.props.href && (
 					<>
 						{!type && (
-							<Typography typo={ITypo.H1} color={ITypoColor.COLOR_GENERIC_BLACK}>
+							<Typography typo={ITypo.DISPLAY_LARGE} color={ITypoColor.COLOR_GENERIC_BLACK}>
 								Erreur lors du chargement du fichier
 							</Typography>
 						)}
diff --git a/src/front/Components/DesignSystem/FolderBoxInformation/index.tsx b/src/front/Components/DesignSystem/FolderBoxInformation/index.tsx
index 7048b425..2c9be9dd 100644
--- a/src/front/Components/DesignSystem/FolderBoxInformation/index.tsx
+++ b/src/front/Components/DesignSystem/FolderBoxInformation/index.tsx
@@ -70,42 +70,42 @@ export default function FolderBoxInformation(props: IProps) {
 			case EFolderBoxInformationType.DESCRIPTION:
 				return (
 					<div className={classes["text-container"]}>
-						<Typography typo={ITypo.NAV_INPUT_16}>Note dossier</Typography>
-						<Typography typo={ITypo.P_18}>{folder.description ?? ""}</Typography>
+						<Typography typo={ITypo.TEXT_MD_GREY}>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.NAV_INPUT_16}>Note client</Typography>
-						<Typography typo={ITypo.P_18}>{note?.content ?? ""}</Typography>
+						<Typography typo={ITypo.TEXT_MD_GREY}>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.NAV_INPUT_16}>Note archive</Typography>
-						<Typography typo={ITypo.P_18}>{folder.archived_description ?? ""}</Typography>
+						<Typography typo={ITypo.TEXT_MD_GREY}>Note archive</Typography>
+						<Typography typo={ITypo.TEXT_LG_REGULAR}>{folder.archived_description ?? ""}</Typography>
 					</div>
 				);
 			case EFolderBoxInformationType.INFORMATIONS:
 				return (
 					<>
 						<div className={classes["text-container"]}>
-							<Typography typo={ITypo.NAV_INPUT_16}>Intitulé du dossier</Typography>
-							<Typography typo={ITypo.P_18}>{folder.name ?? ""}</Typography>
+							<Typography typo={ITypo.TEXT_MD_GREY}>Intitulé du dossier</Typography>
+							<Typography typo={ITypo.TEXT_LG_REGULAR}>{folder.name ?? ""}</Typography>
 						</div>
 						<div className={classes["text-container"]}>
-							<Typography typo={ITypo.NAV_INPUT_16}>Numéro de dossier</Typography>
-							<Typography typo={ITypo.P_18}>{folder.folder_number ?? ""}</Typography>
+							<Typography typo={ITypo.TEXT_MD_GREY}>Numéro de dossier</Typography>
+							<Typography typo={ITypo.TEXT_LG_REGULAR}>{folder.folder_number ?? ""}</Typography>
 						</div>
 						<div className={classes["text-container"]}>
-							<Typography typo={ITypo.NAV_INPUT_16}>Type d'acte</Typography>
-							<Typography typo={ITypo.P_18}>{folder.deed?.deed_type?.name ?? ""}</Typography>
+							<Typography typo={ITypo.TEXT_MD_GREY}>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.NAV_INPUT_16}>Ouverture du dossier</Typography>
-							<Typography typo={ITypo.P_18}>{formatDate(folder.created_at)}</Typography>
+							<Typography typo={ITypo.TEXT_MD_GREY}>Ouverture du dossier</Typography>
+							<Typography typo={ITypo.TEXT_LG_REGULAR}>{formatDate(folder.created_at)}</Typography>
 						</div>
 					</>
 				);
diff --git a/src/front/Components/DesignSystem/FolderContainer/index.tsx b/src/front/Components/DesignSystem/FolderContainer/index.tsx
index b35a87d9..a3ac8f9e 100644
--- a/src/front/Components/DesignSystem/FolderContainer/index.tsx
+++ b/src/front/Components/DesignSystem/FolderContainer/index.tsx
@@ -24,7 +24,7 @@ export default class FolderContainer extends React.Component<IProps, IState> {
 		return (
 			<div className={classes["root"]} onClick={this.onSelectedFolder}>
 				<div className={classes["left-side"]}>
-					<Typography typo={ITypo.P_16}>
+					<Typography typo={ITypo.TEXT_MD_REGULAR}>
 						{this.props.folder.folder_number.concat(" - ").concat(this.props.folder.name)}
 					</Typography>
 					{this.countPendingDocuments() > 0 && (
diff --git a/src/front/Components/DesignSystem/Form/BaseField.tsx b/src/front/Components/DesignSystem/Form/BaseField.tsx
index 76138dfe..488ecc69 100644
--- a/src/front/Components/DesignSystem/Form/BaseField.tsx
+++ b/src/front/Components/DesignSystem/Form/BaseField.tsx
@@ -107,7 +107,7 @@ export default abstract class BaseField<P extends IProps, S extends IState = ISt
 		let errors: JSX.Element[] = [];
 		Object.entries(this.state.validationError.constraints).forEach(([key, value]) => {
 			errors.push(
-				<Typography key={key} typo={ITypo.CAPTION_14} color={ITypoColor.COLOR_ERROR_600}>
+				<Typography key={key} typo={ITypo.TEXT_SM_REGULAR} color={ITypoColor.COLOR_ERROR_600}>
 					{value}
 				</Typography>,
 			);
diff --git a/src/front/Components/DesignSystem/Form/DateField/index.tsx b/src/front/Components/DesignSystem/Form/DateField/index.tsx
index 884b8454..12f06148 100644
--- a/src/front/Components/DesignSystem/Form/DateField/index.tsx
+++ b/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.NAV_INPUT_16} color={ITypoColor.COLOR_NEUTRAL_500}>
+			<Typography typo={ITypo.TEXT_MD_GREY} color={ITypoColor.COLOR_NEUTRAL_500}>
 				<div className={classes["root"]} data-is-errored={this.hasError().toString()}>
 					<input
 						onChange={this.onChange}
diff --git a/src/front/Components/DesignSystem/Form/SelectField/index.tsx b/src/front/Components/DesignSystem/Form/SelectField/index.tsx
index cbde014c..2991eb75 100644
--- a/src/front/Components/DesignSystem/Form/SelectField/index.tsx
+++ b/src/front/Components/DesignSystem/Form/SelectField/index.tsx
@@ -81,14 +81,14 @@ class SelectFieldClass extends React.Component<IPropsClass, IState> {
 							{selectedOption && (
 								<>
 									<span className={classNames(classes["icon"], classes["token-icon"])}>{selectedOption?.icon}</span>
-									<Typography typo={ITypo.P_18}>
+									<Typography typo={ITypo.TEXT_LG_REGULAR}>
 										<span className={classes["text"]}>{selectedOption?.label}</span>
 									</Typography>
 								</>
 							)}
 							{!selectedOption && (
 								<div className={classes["placeholder"]} data-open={(selectedOption ? true : false).toString()}>
-									<Typography typo={ITypo.NAV_INPUT_16}>
+									<Typography typo={ITypo.TEXT_MD_GREY}>
 										<span className={classes["text"]}>{this.props.placeholder ?? ""}</span>
 									</Typography>
 								</div>
@@ -110,7 +110,7 @@ class SelectFieldClass extends React.Component<IPropsClass, IState> {
 								className={classes["container-li"]}
 								onClick={(e) => this.onSelect(option, e)}>
 								<div className={classes["token-icon"]}>{option.icon}</div>
-								<Typography typo={ITypo.P_18}>{option.label}</Typography>
+								<Typography typo={ITypo.TEXT_LG_REGULAR}>{option.label}</Typography>
 							</li>
 						))}
 					</ul>
@@ -199,7 +199,7 @@ class SelectFieldClass extends React.Component<IPropsClass, IState> {
 	private renderErrors(): JSX.Element | null {
 		if (!this.state.errors) return null;
 		return (
-			<Typography typo={ITypo.CAPTION_14} color={ITypoColor.COLOR_ERROR_600}>
+			<Typography typo={ITypo.TEXT_SM_REGULAR} color={ITypoColor.COLOR_ERROR_600}>
 				{this.props.placeholder} ne peut pas être vide
 			</Typography>
 		);
diff --git a/src/front/Components/DesignSystem/Form/TextField/index.tsx b/src/front/Components/DesignSystem/Form/TextField/index.tsx
index ad360cbb..e33d8518 100644
--- a/src/front/Components/DesignSystem/Form/TextField/index.tsx
+++ b/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.NAV_INPUT_16} color={ITypoColor.COLOR_NEUTRAL_500}>
+			<Typography typo={ITypo.TEXT_MD_GREY} color={ITypoColor.COLOR_NEUTRAL_500}>
 				<div className={classes["root"]} data-is-errored={this.hasError().toString()}>
 					<input
 						onChange={this.onChange}
diff --git a/src/front/Components/DesignSystem/Form/TextareaField/index.tsx b/src/front/Components/DesignSystem/Form/TextareaField/index.tsx
index 12ac5508..f1853ee6 100644
--- a/src/front/Components/DesignSystem/Form/TextareaField/index.tsx
+++ b/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.NAV_INPUT_16} color={ITypoColor.COLOR_NEUTRAL_500}>
+			<Typography typo={ITypo.TEXT_MD_GREY} color={ITypoColor.COLOR_NEUTRAL_500}>
 				<div className={classes["root"]} data-is-errored={this.hasError().toString()}>
 					<textarea
 						name={this.props.name}
diff --git a/src/front/Components/DesignSystem/Header/BurgerMenu/BurgerModal/BurgerModalSubmenu/index.tsx b/src/front/Components/DesignSystem/Header/BurgerMenu/BurgerModal/BurgerModalSubmenu/index.tsx
index 4c3e1dae..97b59cc1 100644
--- a/src/front/Components/DesignSystem/Header/BurgerMenu/BurgerModal/BurgerModalSubmenu/index.tsx
+++ b/src/front/Components/DesignSystem/Header/BurgerMenu/BurgerModal/BurgerModalSubmenu/index.tsx
@@ -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.P_SB_18 : ITypo.NAV_HEADER_18}>{props.text}</Typography>
+						<Typography typo={isActive || isSubmenuOpened ? ITypo.TEXT_LG_SEMIBOLD : ITypo.TEXT_LG_GREY}>
+							{props.text}
+						</Typography>
 						{isSubmenuOpened ? <ChevronUpIcon height="20" width="20" /> : <ChevronDownIcon height="20" width="20" />}
 					</div>
 					<div className={classes["underline"]} data-active={(isActive || isSubmenuOpened).toString()} />
diff --git a/src/front/Components/DesignSystem/Header/HeaderLink/index.tsx b/src/front/Components/DesignSystem/Header/HeaderLink/index.tsx
index 5f9230bd..46ce7fba 100644
--- a/src/front/Components/DesignSystem/Header/HeaderLink/index.tsx
+++ b/src/front/Components/DesignSystem/Header/HeaderLink/index.tsx
@@ -37,7 +37,7 @@ export default function HeaderLink(props: IHeaderLinkProps) {
 				onMouseEnter={handleMouseEnter}
 				onMouseLeave={handleMouseLeave}>
 				<div className={classes["content"]}>
-					<Typography typo={isActive || isHovered ? ITypo.P_SB_18 : ITypo.NAV_HEADER_18}>{props.text}</Typography>
+					<Typography typo={isActive || isHovered ? ITypo.TEXT_LG_SEMIBOLD : ITypo.TEXT_LG_GREY}>{props.text}</Typography>
 				</div>
 				<div className={classes["underline"]} data-active={(isActive || isHovered).toString()} />
 			</Link>
@@ -46,7 +46,7 @@ export default function HeaderLink(props: IHeaderLinkProps) {
 		return (
 			<div className={classNames(classes["root"], classes["desactivated"])}>
 				<div className={classes["content"]}>
-					<Typography typo={ITypo.NAV_HEADER_18}>{props.text}</Typography>
+					<Typography typo={ITypo.TEXT_LG_GREY}>{props.text}</Typography>
 				</div>
 			</div>
 		);
diff --git a/src/front/Components/DesignSystem/Header/HeaderSubmenu/HeaderSubmenuLink/index.tsx b/src/front/Components/DesignSystem/Header/HeaderSubmenu/HeaderSubmenuLink/index.tsx
index 60c836f2..040e9c9e 100644
--- a/src/front/Components/DesignSystem/Header/HeaderSubmenu/HeaderSubmenuLink/index.tsx
+++ b/src/front/Components/DesignSystem/Header/HeaderSubmenu/HeaderSubmenuLink/index.tsx
@@ -29,7 +29,7 @@ export default function HeaderSubmenuLink(props: IHeaderLinkProps) {
 
 	return (
 		<Link href={props.path} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
-			<Typography typo={isActive || isHovered ? ITypo.P_SB_18 : ITypo.NAV_HEADER_18}>{props.text}</Typography>
+			<Typography typo={isActive || isHovered ? ITypo.TEXT_LG_SEMIBOLD : ITypo.TEXT_LG_GREY}>{props.text}</Typography>
 		</Link>
 	);
 }
diff --git a/src/front/Components/DesignSystem/Header/HeaderSubmenu/index.tsx b/src/front/Components/DesignSystem/Header/HeaderSubmenu/index.tsx
index 9a0c4c4a..60606b4a 100644
--- a/src/front/Components/DesignSystem/Header/HeaderSubmenu/index.tsx
+++ b/src/front/Components/DesignSystem/Header/HeaderSubmenu/index.tsx
@@ -34,7 +34,7 @@ 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.P_SB_18 : ITypo.NAV_HEADER_18}>{props.text}</Typography>
+						<Typography typo={isActive || isHovered ? ITypo.TEXT_LG_SEMIBOLD : ITypo.TEXT_LG_GREY}>{props.text}</Typography>
 					</div>
 					<div className={classes["underline"]} data-active={(isActive || isHovered).toString()} />
 					{isHovered && (
diff --git a/src/front/Components/DesignSystem/Header/NavigationLink/index.tsx b/src/front/Components/DesignSystem/Header/NavigationLink/index.tsx
index 021f0f43..e659f14f 100644
--- a/src/front/Components/DesignSystem/Header/NavigationLink/index.tsx
+++ b/src/front/Components/DesignSystem/Header/NavigationLink/index.tsx
@@ -29,7 +29,7 @@ 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.P_SB_18 : ITypo.NAV_HEADER_18}>{this.props.text}</Typography>
+					<Typography typo={this.props.isActive ? ITypo.TEXT_LG_SEMIBOLD : ITypo.TEXT_LG_GREY}>{this.props.text}</Typography>
 				</div>
 			</Link>
 		);
diff --git a/src/front/Components/DesignSystem/Header/Notifications/NotificationModal/index.tsx b/src/front/Components/DesignSystem/Header/Notifications/NotificationModal/index.tsx
index 589c0e52..adc9a9da 100644
--- a/src/front/Components/DesignSystem/Header/Notifications/NotificationModal/index.tsx
+++ b/src/front/Components/DesignSystem/Header/Notifications/NotificationModal/index.tsx
@@ -34,13 +34,13 @@ export default class NotificationModal extends React.Component<IProps, IState> {
 				<div className={classes["background"]} onClick={this.props.closeModal} />
 				<div className={classes["root"]}>
 					<div className={classes["notification-header"]}>
-						<Typography typo={ITypo.P_SB_16}>Notifications</Typography>
+						<Typography typo={ITypo.TEXT_MD_SEMIBOLD}>Notifications</Typography>
 						<div className={classes["close-icon"]} onClick={this.props.closeModal}>
 							<Image src={CloseIcon} alt="Close notification modal" className={classes["close-icon"]}></Image>
 						</div>
 					</div>
 					<div className={classes["notification-subheader"]} onClick={this.readAllNotifications}>
-						<Typography typo={ITypo.CAPTION_14} color={ITypoColor.COLOR_SECONDARY_500}>
+						<Typography typo={ITypo.TEXT_SM_REGULAR} color={ITypoColor.COLOR_SECONDARY_500}>
 							Tout marquer comme lu
 						</Typography>
 						<Check color={ITypoColor.COLOR_SECONDARY_500} />
@@ -49,7 +49,7 @@ export default class NotificationModal extends React.Component<IProps, IState> {
 						<>
 							{!this.state.toastList || this.state.toastList.length === 0 ? (
 								<div className={classes["missing-notification"]}>
-									<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_NEUTRAL_500}>
+									<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
 										Vous n'avez pas de notifications.
 									</Typography>
 								</div>
diff --git a/src/front/Components/DesignSystem/Header/index.tsx b/src/front/Components/DesignSystem/Header/index.tsx
index f21c0c50..d4d658a8 100644
--- a/src/front/Components/DesignSystem/Header/index.tsx
+++ b/src/front/Components/DesignSystem/Header/index.tsx
@@ -114,7 +114,7 @@ class HeaderClass extends React.Component<IPropsClass, IState> {
 				{this.state.cancelAt && (
 					<div className={classes["subscription-line"]}>
 						<InformationCircleIcon height="24" />;
-						<Typography typo={ITypo.P_16} color={ITypoColor.COLOR_GENERIC_BLACK}>
+						<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_GENERIC_BLACK}>
 							Assurez vous de sauvegarder tout ce dont vous avez besoin avant la fin de votre abonnement le{" "}
 							{this.state.cancelAt.toLocaleDateString()}.
 						</Typography>
diff --git a/src/front/Components/DesignSystem/LogOutButton/index.tsx b/src/front/Components/DesignSystem/LogOutButton/index.tsx
index a2ca2042..f9102e70 100644
--- a/src/front/Components/DesignSystem/LogOutButton/index.tsx
+++ b/src/front/Components/DesignSystem/LogOutButton/index.tsx
@@ -11,14 +11,14 @@ export default function LogOut() {
 	const router = useRouter();
 	const variables = FrontendVariables.getInstance();
 
-	const disconnect = async() => {
+	const disconnect = async () => {
 		await UserStore.instance.disconnect();
 		router.push(`https://qual-connexion.idnot.fr/user/auth/logout?sourceURL=${variables.FRONT_APP_HOST}`);
 	};
 
 	return (
 		<div className={classes["root"]} onClick={disconnect}>
-			<Typography typo={ITypo.NAV_HEADER_18}>Déconnexion</Typography>
+			<Typography typo={ITypo.TEXT_LG_GREY}>Déconnexion</Typography>
 			<Image src={DisconnectIcon} className={classes["disconnect-icon"]} alt="disconnect" />
 		</div>
 	);
diff --git a/src/front/Components/DesignSystem/Modal/Elements/Header/index.tsx b/src/front/Components/DesignSystem/Modal/Elements/Header/index.tsx
index 3001462d..2e600f65 100644
--- a/src/front/Components/DesignSystem/Modal/Elements/Header/index.tsx
+++ b/src/front/Components/DesignSystem/Modal/Elements/Header/index.tsx
@@ -10,7 +10,7 @@ export default class Header extends React.Component<IProps> {
 	public override render(): JSX.Element {
 		return (
 			<header className={classes["root"]}>
-				<Typography typo={ITypo.H2}>{this.props.content}</Typography>
+				<Typography typo={ITypo.TITLE_H3}>{this.props.content}</Typography>
 			</header>
 		);
 	}
diff --git a/src/front/Components/DesignSystem/Modal/Elements/Loader/index.tsx b/src/front/Components/DesignSystem/Modal/Elements/Loader/index.tsx
index 1e220d7a..8c34b9be 100644
--- a/src/front/Components/DesignSystem/Modal/Elements/Loader/index.tsx
+++ b/src/front/Components/DesignSystem/Modal/Elements/Loader/index.tsx
@@ -13,7 +13,7 @@ export default class PopUpLoader extends React.Component<IProps> {
 			<div className={classes["root"]}>
 				{/* <Loader /> */}
 				TODO: INTEGRER LOARDER ISLOADING
-				<Typography typo={ITypo.P_16}>{this.props.text && this.props.text}</Typography>
+				<Typography typo={ITypo.TEXT_MD_REGULAR}>{this.props.text && this.props.text}</Typography>
 			</div>
 		);
 	}
diff --git a/src/front/Components/DesignSystem/Modal/index.tsx b/src/front/Components/DesignSystem/Modal/index.tsx
index d1ba8b86..9b443031 100644
--- a/src/front/Components/DesignSystem/Modal/index.tsx
+++ b/src/front/Components/DesignSystem/Modal/index.tsx
@@ -60,7 +60,7 @@ export default class Modal extends React.Component<IProps, IState> {
 					<div className={classes["sub-container"]}>
 						{this.props.header && <Header content={this.props.header} />}
 
-						<Typography typo={ITypo.P_16}>
+						<Typography typo={ITypo.TEXT_MD_REGULAR}>
 							<>{this.props.children ? this.props.children : <Loader text={this.props.textLoader} />}</>
 						</Typography>
 						{this.props.children && this.props.footer && <Footer content={this.props.footer} />}
@@ -96,18 +96,16 @@ export default class Modal extends React.Component<IProps, IState> {
 		document.body.style.overflow = "auto";
 		document.removeEventListener("keydown", this.handleKeyDown);
 	}
-	
+
 	protected close() {
 		if (this.props.hasContainerClosable === false) return;
 		if (this.state.willClose) return;
 		this.props.onClose();
 	}
 
-
-
 	private handleKeyDown = (e: KeyboardEvent): void => {
 		if (e.key === "Escape" || e.key === "Esc") {
 			this.props.onClose();
 		}
-	}
+	};
 }
diff --git a/src/front/Components/DesignSystem/MultiSelect/index.tsx b/src/front/Components/DesignSystem/MultiSelect/index.tsx
index a4247866..dd0e3c2a 100644
--- a/src/front/Components/DesignSystem/MultiSelect/index.tsx
+++ b/src/front/Components/DesignSystem/MultiSelect/index.tsx
@@ -55,7 +55,7 @@ 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.NAV_INPUT_16}>{this.props.placeholder}</Typography>
+							<Typography typo={ITypo.TEXT_MD_GREY}>{this.props.placeholder}</Typography>
 						</div>
 					)}
 					<div className={classes["input-container"]}>
@@ -146,7 +146,7 @@ export default class MultiSelect extends React.Component<IProps, IState> {
 		let errors: JSX.Element[] = [];
 		Object.entries(this.state.validationError.constraints).forEach(([key, value]) => {
 			errors.push(
-				<Typography key={key} typo={ITypo.CAPTION_14} color={ITypoColor.COLOR_ERROR_600}>
+				<Typography key={key} typo={ITypo.TEXT_SM_REGULAR} color={ITypoColor.COLOR_ERROR_600}>
 					{value}
 				</Typography>,
 			);
diff --git a/src/front/Components/DesignSystem/Newsletter/index.tsx b/src/front/Components/DesignSystem/Newsletter/index.tsx
index 4a1f3918..bfc7a8c9 100644
--- a/src/front/Components/DesignSystem/Newsletter/index.tsx
+++ b/src/front/Components/DesignSystem/Newsletter/index.tsx
@@ -70,22 +70,22 @@ export default class Newsletter extends React.Component<IProps, IState> {
 					<div className={classes["container"]}>
 						<div className={classes["root"]}>
 							<div className={classes["text"]}>
-								<Typography typo={ITypo.H3} color={ITypoColor.COLOR_GENERIC_WHITE}>
+								<Typography typo={ITypo.TITLE_H5} color={ITypoColor.COLOR_GENERIC_WHITE}>
 									Restez Informé(e) avec notre Newsletter
 								</Typography>
-								<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_GENERIC_WHITE}>
+								<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_GENERIC_WHITE}>
 									Ne manquez aucune de nos actualités, promotions exclusives et conseils d'experts !
 								</Typography>
 								{this.state.errorMessage && (
 									<div>
-										<Typography typo={ITypo.P_ERR_16} color={ITypoColor.COLOR_ERROR_600}>
+										<Typography typo={ITypo.TEXT_MD_ERROR} color={ITypoColor.COLOR_ERROR_600}>
 											{this.state.errorMessage}
 										</Typography>
 									</div>
 								)}
 								{this.state.successMessage && (
 									<div>
-										<Typography typo={ITypo.P_16} color={ITypoColor.COLOR_SUCCESS_600}>
+										<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_SUCCESS_600}>
 											{this.state.successMessage}
 										</Typography>
 									</div>
diff --git a/src/front/Components/DesignSystem/QuantityProgressBar/ProgressBar/index.tsx b/src/front/Components/DesignSystem/QuantityProgressBar/ProgressBar/index.tsx
index e4e3645d..dd47c016 100644
--- a/src/front/Components/DesignSystem/QuantityProgressBar/ProgressBar/index.tsx
+++ b/src/front/Components/DesignSystem/QuantityProgressBar/ProgressBar/index.tsx
@@ -11,7 +11,7 @@ export default class ProgressBar extends React.Component<IProps> {
 		return (
 			<div className={classes["root"]}>
 				<div className={classes["progress"]} style={{ width: quantity }}>
-					<Typography typo={ITypo.P_16}>
+					<Typography typo={ITypo.TEXT_MD_REGULAR}>
 						<div className={classes["percentage"]}>{quantity}</div>
 					</Typography>
 				</div>
diff --git a/src/front/Components/DesignSystem/QuantityProgressBar/index.tsx b/src/front/Components/DesignSystem/QuantityProgressBar/index.tsx
index 6d377b67..c264d405 100644
--- a/src/front/Components/DesignSystem/QuantityProgressBar/index.tsx
+++ b/src/front/Components/DesignSystem/QuantityProgressBar/index.tsx
@@ -19,7 +19,7 @@ export default class QuantityProgressBar extends React.Component<IProps> {
 		return (
 			<div className={classes["root"]}>
 				<div className={classes["title"]}>
-					<Typography typo={ITypo.P_16}>{this.props.title}</Typography>
+					<Typography typo={ITypo.TEXT_MD_REGULAR}>{this.props.title}</Typography>
 				</div>
 				<ProgressBar percentage={percentage} />
 			</div>
diff --git a/src/front/Components/DesignSystem/RadioBox/index.tsx b/src/front/Components/DesignSystem/RadioBox/index.tsx
index 3818ba53..ecd629ea 100644
--- a/src/front/Components/DesignSystem/RadioBox/index.tsx
+++ b/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.P_ERR_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
+			<Typography typo={ITypo.TEXT_LG_ERROR} color={ITypoColor.COLOR_GENERIC_BLACK}>
 				<label className={classes["root"]}>
 					<input
 						type="radio"
diff --git a/src/front/Components/DesignSystem/SearchBar/index.tsx b/src/front/Components/DesignSystem/SearchBar/index.tsx
index cf1bf6c8..ddf5ebf5 100644
--- a/src/front/Components/DesignSystem/SearchBar/index.tsx
+++ b/src/front/Components/DesignSystem/SearchBar/index.tsx
@@ -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.P_ERR_18}>
+					<Typography typo={ITypo.TEXT_LG_ERROR}>
 						<div className={classes["fake-placeholder"]}>{this.props.placeholder}</div>
 					</Typography>
 				)}
diff --git a/src/front/Components/DesignSystem/Switch/index.tsx b/src/front/Components/DesignSystem/Switch/index.tsx
index fa9cd2ff..c013d146 100644
--- a/src/front/Components/DesignSystem/Switch/index.tsx
+++ b/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.P_ERR_16} color={ITypoColor.COLOR_GENERIC_BLACK}>
+			<Typography typo={ITypo.TEXT_MD_ERROR} color={ITypoColor.COLOR_GENERIC_BLACK}>
 				{label}
 			</Typography>
 		</div>
diff --git a/src/front/Components/DesignSystem/Toasts/ToastsContainer/ToastElement/index.tsx b/src/front/Components/DesignSystem/Toasts/ToastsContainer/ToastElement/index.tsx
index 5865b314..f9c914ef 100644
--- a/src/front/Components/DesignSystem/Toasts/ToastsContainer/ToastElement/index.tsx
+++ b/src/front/Components/DesignSystem/Toasts/ToastsContainer/ToastElement/index.tsx
@@ -74,7 +74,7 @@ class ToastElementClass extends React.Component<IPropsClass, IState> {
 
 	private getToastTitle(title: string | React.ReactNode) {
 		if (typeof title === "string") {
-			return <Typography typo={ITypo.P_16}>{title}</Typography>;
+			return <Typography typo={ITypo.TEXT_MD_REGULAR}>{title}</Typography>;
 		}
 		return title;
 	}
@@ -83,7 +83,7 @@ class ToastElementClass extends React.Component<IPropsClass, IState> {
 		if (typeof text === "string") {
 			return (
 				<div className={classes["text-container"]}>
-					<Typography typo={ITypo.CAPTION_14} color={ITypoColor.COLOR_NEUTRAL_500}>
+					<Typography typo={ITypo.TEXT_SM_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
 						{text}
 					</Typography>
 				</div>
diff --git a/src/front/Components/DesignSystem/Typography/classes.module.scss b/src/front/Components/DesignSystem/Typography/classes.module.scss
index 7596398d..2fdd5018 100644
--- a/src/front/Components/DesignSystem/Typography/classes.module.scss
+++ b/src/front/Components/DesignSystem/Typography/classes.module.scss
@@ -4,41 +4,42 @@
 .root {
 	color: $color-generic-black;
 	vertical-align: center;
-	font-family: "Inter", sans-serif;
-	&.H1-60 {
+	font-family: "Poppins", sans-serif;
+	&.display-large {
 		font-style: normal;
-		font-weight: 500;
-		font-size: 56px;
-		line-height: 67.2px;
+		font-weight: 600;
+		font-size: 50px;
+		line-height: 75px;
 
 		@media (max-width: $screen-m) {
 			font-size: 48px;
-			line-height: 56.7px;
+			line-height: 72px;
 		}
 	}
 
-	&.H1-bis-40 {
+	&.title-h1 {
 		font-style: normal;
-		font-weight: 500;
+		font-weight: 600;
 		font-size: 40px;
+		line-height: 60px;
+	}
+
+	&.title-h3 {
+		font-style: normal;
+		font-weight: 300;
+		font-size: 32px;
 		line-height: 48px;
 	}
 
-	&.H2-30 {
+	&.title-h5 {
 		font-style: normal;
-		font-weight: 500;
-		font-size: 30px;
-		line-height: 36px;
-	}
-
-	&.H3-24 {
-		font-style: normal;
-		font-weight: 600;
+		font-weight: 400;
 		font-size: 24px;
-		line-height: 29px;
+		line-height: 36px;
+		color: var(--color-primary-500);
 	}
 
-	&.Paragraphe-semibold-18 {
+	&.text-lg-semibold {
 		font-style: normal;
 		font-weight: 600;
 		font-size: 18px;
@@ -46,39 +47,42 @@
 		letter-spacing: 0.5px;
 	}
 
-	&.Paragraphe-simple-18 {
+	&.text-lg-regular {
 		font-style: normal;
 		font-weight: 400;
 		font-size: 18px;
-		line-height: 22px;
+		line-height: 27px;
+		letter-spacing: 0.5px;
 	}
 
-	&.Paragraphe-MAJ-18 {
+	&.text-lg-uppercase {
 		font-style: normal;
 		font-weight: 400;
 		font-size: 18px;
-		line-height: 22px;
+		line-height: 27px;
+		letter-spacing: 0.5px;
 		text-transform: uppercase;
 	}
 
-	&.Nav-header-off-18 {
-		font-style: normal;
-		font-weight: 400;
-		font-size: 18px;
-		line-height: 22px;
-		letter-spacing: 0.5px;
+	&.text-lg-grey {
 		color: $color-neutral-500;
-	}
-
-	&.Paragraphe-18-error {
 		font-style: normal;
 		font-weight: 400;
 		font-size: 18px;
-		line-height: 22px;
+		line-height: 27px;
 		letter-spacing: 0.5px;
 	}
 
-	&.Paragraphe-semibold-16 {
+	&.text-lg-error {
+		color: $color-error-600;
+		font-style: normal;
+		font-weight: 400;
+		font-size: 18px;
+		line-height: 27px;
+		letter-spacing: 0.5px;
+	}
+
+	&.text-md-semibold {
 		font-style: normal;
 		font-weight: 600;
 		font-size: 16px;
@@ -86,45 +90,61 @@
 		letter-spacing: 0.5px;
 	}
 
-	&.Nav-input-off-16 {
+	&.text-md-regular {
 		font-style: normal;
 		font-weight: 400;
 		font-size: 16px;
-		line-height: 22px;
+		line-height: 24px;
 		letter-spacing: 0.5px;
+	}
+
+	&.text-md-grey {
 		color: $color-neutral-500;
-	}
-
-	&.Paragraphe-simple-16 {
 		font-style: normal;
 		font-weight: 400;
 		font-size: 16px;
-		line-height: 22px;
-		letter-spacing: 0.005em;
-	}
-
-	&.Paragraphe-16-error {
-		color: $color-error-800;
-		font-style: normal;
-		font-weight: 400;
-		font-size: 16px;
-		line-height: 22px;
+		line-height: 24px;
 		letter-spacing: 0.5px;
 	}
 
-	&.Caption_14 {
+	&.text-md-error {
+		color: $color-error-600;
+		font-style: normal;
+		font-weight: 400;
+		font-size: 16px;
+		line-height: 24px;
+		letter-spacing: 0.5px;
+	}
+
+	&.text-sm-regular {
 		font-style: normal;
 		font-weight: 400;
 		font-size: 14px;
-		line-height: 22px;
+		line-height: 21px;
 		letter-spacing: 0.5px;
 	}
 
-	&.Caption_14-semibold {
+	&.text-sm-semibold {
 		font-style: normal;
 		font-weight: 600;
 		font-size: 14px;
-		line-height: 22px;
+		line-height: 21px;
+		letter-spacing: 0.5px;
+	}
+
+	&.text-sm-bold {
+		font-style: normal;
+		font-weight: 600;
+		font-size: 14px;
+		line-height: 21px;
+		letter-spacing: 0.5px;
+	}
+
+	&.text-xs-regular {
+		font-style: normal;
+		font-weight: 400;
+		font-size: 12px;
+		line-height: 18px;
 		letter-spacing: 0.5px;
 	}
 
@@ -141,23 +161,23 @@
 	}
 
 	&.color-primary-500 {
-		color: var(--color-primary-500);
+		color: $color-primary-500;
 	}
 
 	&.color-secondary-500 {
-		color: var(--color-secondary-500);
+		color: $color-secondary-500;
 	}
 
 	&.color-success-600 {
-		color: var(--color-success-600);
+		color: $color-success-600;
 	}
 
 	&.color-error-600 {
-		color: var(--color-error-600);
+		color: $color-error-600;
 	}
 
 	&.color-warning-500 {
-		color: var(--color-warning-500);
+		color: $color-warning-500;
 	}
 
 	&.white {
diff --git a/src/front/Components/DesignSystem/Typography/index-old.tsx b/src/front/Components/DesignSystem/Typography/index-old.tsx
new file mode 100644
index 00000000..b535f96d
--- /dev/null
+++ b/src/front/Components/DesignSystem/Typography/index-old.tsx
@@ -0,0 +1,62 @@
+import React from "react";
+import classes from "./old-classes.module.scss";
+import classNames from "classnames";
+
+type IProps = {
+	typo: ITypo;
+	children: React.ReactNode;
+	color?: ITypoColor;
+	className?: string;
+	title?: string;
+};
+type IState = {};
+
+export enum ITypo {
+	H1 = "H1-60",
+	H1Bis = "H1-bis-40",
+	H2 = "H2-30",
+	H3 = "H3-24",
+
+	P_SB_18 = "Paragraphe-semibold-18",
+	P_18 = "Paragraphe-simple-18",
+	P_MAJ_18 = "Paragraphe-MAJ-18",
+	NAV_HEADER_18 = "Nav-header-off-18",
+	P_ERR_18 = "Paragraphe-18-error",
+
+	P_SB_16 = "Paragraphe-semibold-16",
+	P_16 = "Paragraphe-simple-16",
+	NAV_INPUT_16 = "Nav-input-off-16",
+	P_ERR_16 = "Paragraphe-16-error",
+
+	CAPTION_14 = "Caption_14",
+	CAPTION_14_SB = "Caption_14-semibold",
+}
+
+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",
+}
+
+export default class Typography extends React.Component<IProps, IState> {
+	public override render(): JSX.Element {
+		return (
+			<div
+				className={classNames(
+					classes["root"],
+					classes[this.props.typo],
+					classes[this.props.color ?? ""],
+					this.props.className ?? "",
+				)}
+				title={this.props.title}>
+				{this.props.children}
+			</div>
+		);
+	}
+}
diff --git a/src/front/Components/DesignSystem/Typography/index.tsx b/src/front/Components/DesignSystem/Typography/index.tsx
index cc932d1c..aa8dbd2d 100644
--- a/src/front/Components/DesignSystem/Typography/index.tsx
+++ b/src/front/Components/DesignSystem/Typography/index.tsx
@@ -12,24 +12,28 @@ type IProps = {
 type IState = {};
 
 export enum ITypo {
-	H1 = "H1-60",
-	H1Bis = "H1-bis-40",
-	H2 = "H2-30",
-	H3 = "H3-24",
+	DISPLAY_LARGE = "display-large",
 
-	P_SB_18 = "Paragraphe-semibold-18",
-	P_18 = "Paragraphe-simple-18",
-	P_MAJ_18 = "Paragraphe-MAJ-18",
-	NAV_HEADER_18 = "Nav-header-off-18",
-	P_ERR_18 = "Paragraphe-18-error",
+	TITLE_H1 = "title-h1",
+	TITLE_H3 = "title-h3",
+	TITLE_H5 = "title-h5",
 
-	P_SB_16 = "Paragraphe-semibold-16",
-	P_16 = "Paragraphe-simple-16",
-	NAV_INPUT_16 = "Nav-input-off-16",
-	P_ERR_16 = "Paragraphe-16-error",
+	TEXT_LG_SEMIBOLD = "text-lg-semibold",
+	TEXT_LG_REGULAR = "text-lg-regular",
+	TEXT_LG_UPPERCASE = "text-lg-regular-uppercase",
+	TEXT_LG_GREY = "text-lg-grey",
+	TEXT_LG_ERROR = "text-lg-error",
 
-	CAPTION_14 = "Caption_14",
-	CAPTION_14_SB = "Caption_14-semibold",
+	TEXT_MD_SEMIBOLD = "text-md-semibold",
+	TEXT_MD_REGULAR = "text-md-regular",
+	TEXT_MD_GREY = "text-md-grey",
+	TEXT_MD_ERROR = "text-md-error",
+
+	TEXT_SM_REGULAR = "text-sm-regular",
+	TEXT_SM_SEMIBOLD = "text-sm-semibold",
+	TEXT_SM_BOLD = "text-sm-bold",
+
+	TEXT_XS_REGULAR = "text-xs-regular",
 }
 
 export enum ITypoColor {
diff --git a/src/front/Components/DesignSystem/Typography/old-classes.module.scss b/src/front/Components/DesignSystem/Typography/old-classes.module.scss
new file mode 100644
index 00000000..7596398d
--- /dev/null
+++ b/src/front/Components/DesignSystem/Typography/old-classes.module.scss
@@ -0,0 +1,166 @@
+@import "@Themes/constants.scss";
+@import "@Themes/modes.scss";
+
+.root {
+	color: $color-generic-black;
+	vertical-align: center;
+	font-family: "Inter", sans-serif;
+	&.H1-60 {
+		font-style: normal;
+		font-weight: 500;
+		font-size: 56px;
+		line-height: 67.2px;
+
+		@media (max-width: $screen-m) {
+			font-size: 48px;
+			line-height: 56.7px;
+		}
+	}
+
+	&.H1-bis-40 {
+		font-style: normal;
+		font-weight: 500;
+		font-size: 40px;
+		line-height: 48px;
+	}
+
+	&.H2-30 {
+		font-style: normal;
+		font-weight: 500;
+		font-size: 30px;
+		line-height: 36px;
+	}
+
+	&.H3-24 {
+		font-style: normal;
+		font-weight: 600;
+		font-size: 24px;
+		line-height: 29px;
+	}
+
+	&.Paragraphe-semibold-18 {
+		font-style: normal;
+		font-weight: 600;
+		font-size: 18px;
+		line-height: 22px;
+		letter-spacing: 0.5px;
+	}
+
+	&.Paragraphe-simple-18 {
+		font-style: normal;
+		font-weight: 400;
+		font-size: 18px;
+		line-height: 22px;
+	}
+
+	&.Paragraphe-MAJ-18 {
+		font-style: normal;
+		font-weight: 400;
+		font-size: 18px;
+		line-height: 22px;
+		text-transform: uppercase;
+	}
+
+	&.Nav-header-off-18 {
+		font-style: normal;
+		font-weight: 400;
+		font-size: 18px;
+		line-height: 22px;
+		letter-spacing: 0.5px;
+		color: $color-neutral-500;
+	}
+
+	&.Paragraphe-18-error {
+		font-style: normal;
+		font-weight: 400;
+		font-size: 18px;
+		line-height: 22px;
+		letter-spacing: 0.5px;
+	}
+
+	&.Paragraphe-semibold-16 {
+		font-style: normal;
+		font-weight: 600;
+		font-size: 16px;
+		line-height: 22px;
+		letter-spacing: 0.5px;
+	}
+
+	&.Nav-input-off-16 {
+		font-style: normal;
+		font-weight: 400;
+		font-size: 16px;
+		line-height: 22px;
+		letter-spacing: 0.5px;
+		color: $color-neutral-500;
+	}
+
+	&.Paragraphe-simple-16 {
+		font-style: normal;
+		font-weight: 400;
+		font-size: 16px;
+		line-height: 22px;
+		letter-spacing: 0.005em;
+	}
+
+	&.Paragraphe-16-error {
+		color: $color-error-800;
+		font-style: normal;
+		font-weight: 400;
+		font-size: 16px;
+		line-height: 22px;
+		letter-spacing: 0.5px;
+	}
+
+	&.Caption_14 {
+		font-style: normal;
+		font-weight: 400;
+		font-size: 14px;
+		line-height: 22px;
+		letter-spacing: 0.5px;
+	}
+
+	&.Caption_14-semibold {
+		font-style: normal;
+		font-weight: 600;
+		font-size: 14px;
+		line-height: 22px;
+		letter-spacing: 0.5px;
+	}
+
+	&.color-error-800 {
+		color: $color-error-800;
+	}
+
+	&.color-neutral-500 {
+		color: $color-neutral-500;
+	}
+
+	&.color-generic-black {
+		color: $color-generic-black;
+	}
+
+	&.color-primary-500 {
+		color: var(--color-primary-500);
+	}
+
+	&.color-secondary-500 {
+		color: var(--color-secondary-500);
+	}
+
+	&.color-success-600 {
+		color: var(--color-success-600);
+	}
+
+	&.color-error-600 {
+		color: var(--color-error-600);
+	}
+
+	&.color-warning-500 {
+		color: var(--color-warning-500);
+	}
+
+	&.white {
+		color: $color-generic-white;
+	}
+}
diff --git a/src/front/Components/DesignSystem/UserFolder/DocumentList/index.tsx b/src/front/Components/DesignSystem/UserFolder/DocumentList/index.tsx
index 3d17c55f..a783271a 100644
--- a/src/front/Components/DesignSystem/UserFolder/DocumentList/index.tsx
+++ b/src/front/Components/DesignSystem/UserFolder/DocumentList/index.tsx
@@ -28,9 +28,9 @@ export default class DocumentList extends React.Component<IProps, IState> {
 		return (
 			<div className={classNameToAdd}>
 				<div className={classes["title"]}>
-					<Typography typo={ITypo.P_SB_18}>{this.props.title}</Typography>
+					<Typography typo={ITypo.TEXT_LG_SEMIBOLD}>{this.props.title}</Typography>
 				</div>
-				<Typography typo={ITypo.P_16}>{this.props.subtitle}</Typography>
+				<Typography typo={ITypo.TEXT_MD_REGULAR}>{this.props.subtitle}</Typography>
 				<div className={classes["content"]}>
 					{this.props.documents &&
 						this.props.documents.map((document) => {
diff --git a/src/front/Components/DesignSystem/UserFolder/UserFolderHeader/index.tsx b/src/front/Components/DesignSystem/UserFolder/UserFolderHeader/index.tsx
index 1feab63f..0c3362b8 100644
--- a/src/front/Components/DesignSystem/UserFolder/UserFolderHeader/index.tsx
+++ b/src/front/Components/DesignSystem/UserFolder/UserFolderHeader/index.tsx
@@ -38,26 +38,26 @@ export default class UserFolderHeader extends React.Component<IProps, IState> {
 			<div className={classes["root"]}>
 				<div className={classes["content"]}>
 					<div className={classes["container"]}>
-						<Typography typo={ITypo.NAV_INPUT_16}>Nom</Typography>
-						<Typography typo={ITypo.P_18}>{this.props.customer.contact.last_name}</Typography>
+						<Typography typo={ITypo.TEXT_MD_GREY}>Nom</Typography>
+						<Typography typo={ITypo.TEXT_LG_REGULAR}>{this.props.customer.contact.last_name}</Typography>
 					</div>
 
 					<div className={classes["container"]}>
-						<Typography typo={ITypo.NAV_INPUT_16}>Prénom</Typography>
-						<Typography typo={ITypo.P_18}>{this.props.customer.contact.first_name}</Typography>
+						<Typography typo={ITypo.TEXT_MD_GREY}>Prénom</Typography>
+						<Typography typo={ITypo.TEXT_LG_REGULAR}>{this.props.customer.contact.first_name}</Typography>
 					</div>
 
 					<div className={classes["container"]}>
-						<Typography typo={ITypo.NAV_INPUT_16}>Numéro de téléphone</Typography>
-						<Typography typo={ITypo.P_18}>
+						<Typography typo={ITypo.TEXT_MD_GREY}>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() ?? "")}
 						</Typography>
 					</div>
 
 					<div className={classes["container"]}>
-						<Typography typo={ITypo.NAV_INPUT_16}>E-mail</Typography>
-						<Typography typo={ITypo.P_18}>{this.props.customer.contact.email}</Typography>
+						<Typography typo={ITypo.TEXT_MD_GREY}>E-mail</Typography>
+						<Typography typo={ITypo.TEXT_LG_REGULAR}>{this.props.customer.contact.email}</Typography>
 					</div>
 				</div>
 				{!this.props.isArchived && (
diff --git a/src/front/Components/DesignSystem/Version/index.tsx b/src/front/Components/DesignSystem/Version/index.tsx
index 468e40f5..aaa0d30c 100644
--- a/src/front/Components/DesignSystem/Version/index.tsx
+++ b/src/front/Components/DesignSystem/Version/index.tsx
@@ -10,7 +10,7 @@ export default class Version extends React.Component<IProps, IState> {
 	public override render(): JSX.Element {
 		return (
 			<div className={classes["root"]}>
-				<Typography typo={ITypo.P_16} color={ITypoColor.COLOR_NEUTRAL_500}>
+				<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
 					<div>{VersionFile.version}</div>
 				</Typography>
 			</div>
diff --git a/src/front/Components/Elements/MessageBox/index.tsx b/src/front/Components/Elements/MessageBox/index.tsx
index 60b20862..66d8bede 100644
--- a/src/front/Components/Elements/MessageBox/index.tsx
+++ b/src/front/Components/Elements/MessageBox/index.tsx
@@ -15,7 +15,7 @@ export default function MessageBox(props: IProps) {
 		<div className={classNames(className, classes["root"], classes[type])}>
 			{getIcon(type)}
 			<div className={classes["content"]}>
-				<Typography className={classes["text"]} typo={ITypo.CAPTION_14}>
+				<Typography className={classes["text"]} typo={ITypo.TEXT_SM_REGULAR}>
 					{children}
 				</Typography>
 			</div>
diff --git a/src/front/Components/Elements/NavTab/index.tsx b/src/front/Components/Elements/NavTab/index.tsx
index b7494abe..06abef51 100644
--- a/src/front/Components/Elements/NavTab/index.tsx
+++ b/src/front/Components/Elements/NavTab/index.tsx
@@ -31,7 +31,7 @@ export default function NavTab(props: IProps) {
 							key={item.path.toString()}
 							href={item.path}
 							className={classNames(classes["link"], isMatch && classes["active"])}>
-							<Typography key={index} typo={isMatch ? ITypo.P_SB_18 : ITypo.P_18}>
+							<Typography key={index} typo={isMatch ? ITypo.TEXT_LG_SEMIBOLD : ITypo.TEXT_LG_REGULAR}>
 								{item.label}
 							</Typography>
 						</Link>
diff --git a/src/front/Components/Layouts/ClientDashboard/index.tsx b/src/front/Components/Layouts/ClientDashboard/index.tsx
index c83e51c6..4430a6ec 100644
--- a/src/front/Components/Layouts/ClientDashboard/index.tsx
+++ b/src/front/Components/Layouts/ClientDashboard/index.tsx
@@ -129,38 +129,38 @@ export default function ClientDashboard(props: IProps) {
 				<div className={classes["text-container"]}>
 					{/* TODO Get name from userStore */}
 					<div className={classes["title-container"]}>
-						<Typography typo={ITypo.H1} className={classes["title"]}>
+						<Typography typo={ITypo.DISPLAY_LARGE} className={classes["title"]}>
 							Bonjour {customer?.contact?.first_name.concat(" ", customer?.contact?.last_name)}
 						</Typography>
 					</div>
 
-					<Typography typo={ITypo.P_SB_18} className={classes["folder-number"]} color={ITypoColor.COLOR_NEUTRAL_500}>
+					<Typography typo={ITypo.TEXT_LG_SEMIBOLD} className={classes["folder-number"]} color={ITypoColor.COLOR_NEUTRAL_500}>
 						Dossier {folder?.folder_number} - {folder?.name}
 					</Typography>
 
-					<Typography typo={ITypo.P_SB_18} className={classes["office-name"]} color={ITypoColor.COLOR_NEUTRAL_500}>
+					<Typography typo={ITypo.TEXT_LG_SEMIBOLD} className={classes["office-name"]} color={ITypoColor.COLOR_NEUTRAL_500}>
 						{folder?.office?.name}
 					</Typography>
 
-					<Typography typo={ITypo.H2} className={classes["subtitle"]}>
+					<Typography typo={ITypo.TITLE_H3} className={classes["subtitle"]}>
 						Documents à envoyer
 					</Typography>
 
-					<Typography typo={ITypo.P_16} className={classes["text"]}>
+					<Typography typo={ITypo.TEXT_MD_REGULAR} className={classes["text"]}>
 						Votre notaire est dans l'attente de documents pour valider votre dossier. Voici la liste des documents.
 						<br /> Veuillez glisser / déposer chaque document dans la zone prévue à cet effet ou cliquez sur la zone puis
 						sélectionnez le document correspondant. <br /> En déposant un document, celui-ci est automatiquement enregistré et
 						transmis à votre notaire.
 					</Typography>
 					<div className={classes["note-box"]}>
-						<Typography typo={ITypo.P_16} color={ITypoColor.COLOR_NEUTRAL_500}>
+						<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
 							{note?.content}
 						</Typography>
 					</div>
 				</div>
 
 				<div className={classes["contact"]}>
-					<Typography typo={ITypo.P_SB_18} className={classes["contact-text"]} color={ITypoColor.COLOR_NEUTRAL_500}>
+					<Typography typo={ITypo.TEXT_LG_SEMIBOLD} className={classes["contact-text"]} color={ITypoColor.COLOR_NEUTRAL_500}>
 						<p>
 							{contact?.first_name} {contact?.last_name}
 						</p>
@@ -213,8 +213,8 @@ export default function ClientDashboard(props: IProps) {
 							<DepositDocument document={document} key={document.uid} defaultFiles={document.files ?? []} />
 						))}
 					</div>
-					<Typography typo={ITypo.H2}>Documents supplémentaires (facultatif)</Typography>
-					<Typography typo={ITypo.P_16} className={classes["text"]}>
+					<Typography typo={ITypo.TITLE_H3}>Documents supplémentaires (facultatif)</Typography>
+					<Typography typo={ITypo.TEXT_MD_REGULAR} className={classes["text"]}>
 						Vous souhaitez envoyer d'autres documents à votre notaire ?
 					</Typography>
 					<Button variant={EButtonVariant.GHOST} className={classes["button"]} onClick={onOpenModalAddDocument}>
diff --git a/src/front/Components/Layouts/ClientDashboard/index2.tsx b/src/front/Components/Layouts/ClientDashboard/index2.tsx
index 2ee68774..5ac5414c 100644
--- a/src/front/Components/Layouts/ClientDashboard/index2.tsx
+++ b/src/front/Components/Layouts/ClientDashboard/index2.tsx
@@ -41,8 +41,8 @@ export default class ClientDashboard extends Base<IProps, IState> {
 								<DepositDocument document={document} key={document.uid} defaultFiles={document.files ?? []} />
 							))}
 						</div>
-						<Typography typo={ITypo.H2}>Documents supplémentaires (facultatif)</Typography>
-						<Typography typo={ITypo.P_16} className={classes["text"]}>
+						<Typography typo={ITypo.TITLE_H3}>Documents supplémentaires (facultatif)</Typography>
+						<Typography typo={ITypo.TEXT_MD_REGULAR} className={classes["text"]}>
 							Vous souhaitez envoyer d'autres documents à votre notaire ?
 						</Typography>
 						<Button variant={EButtonVariant.GHOST} className={classes["button"]} onClick={this.onOpenModalAddDocument}>
@@ -58,11 +58,11 @@ export default class ClientDashboard extends Base<IProps, IState> {
 						cancelText={"Annuler"}
 						confirmText={"Déposer le document"}>
 						<div className={classes["modal-content"]}>
-							<Typography typo={ITypo.P_16} className={classes["text"]}>
+							<Typography typo={ITypo.TEXT_MD_REGULAR} className={classes["text"]}>
 								Vous souhaitez envoyer un autre document à votre notaire ?
 							</Typography>
 							<TextField placeholder="Nom du document" />
-							<Typography typo={ITypo.P_16} className={classes["text"]}>
+							<Typography typo={ITypo.TEXT_MD_REGULAR} className={classes["text"]}>
 								Glissez / Déposez votre document dans la zone prévue à cet effet ou cliquez sur la zone puis sélectionnez le
 								document correspondant.
 							</Typography>
@@ -85,15 +85,15 @@ export default class ClientDashboard extends Base<IProps, IState> {
 			<div className={classes["header"]}>
 				<div className={classes["text-container"]}>
 					{/* TODO Get name from userStore */}
-					<Typography typo={ITypo.H1} className={classes["title"]}>
+					<Typography typo={ITypo.DISPLAY_LARGE} className={classes["title"]}>
 						Bonjour {this.state.mockedCustomer?.contact?.first_name.concat(" ", this.state.mockedCustomer?.contact?.last_name)}
 					</Typography>
 
-					<Typography typo={ITypo.H2} className={classes["subtitle"]}>
+					<Typography typo={ITypo.TITLE_H3} className={classes["subtitle"]}>
 						Documents à envoyer
 					</Typography>
 
-					<Typography typo={ITypo.P_16} className={classes["text"]}>
+					<Typography typo={ITypo.TEXT_MD_REGULAR} className={classes["text"]}>
 						Votre notaire est dans l'attente de documents pour valider votre dossier. Voici la liste des documents.Veuillez
 						glisser / déposez chaque document dans la zone prévue à cet effet ou cliquez sur la zone puis sélectionnez le
 						document correspondant. Si un des documents demandés ne vous concernent pas, veuillez contacter votre notaire à
diff --git a/src/front/Components/Layouts/Collaborators/CollaboratorInformations/index.tsx b/src/front/Components/Layouts/Collaborators/CollaboratorInformations/index.tsx
index d094afd5..46957249 100644
--- a/src/front/Components/Layouts/Collaborators/CollaboratorInformations/index.tsx
+++ b/src/front/Components/Layouts/Collaborators/CollaboratorInformations/index.tsx
@@ -149,11 +149,13 @@ export default function CollaboratorInformations(props: IProps) {
 		<DefaultCollaboratorDashboard mobileBackText={"Liste des collaborateurs"}>
 			<div className={classes["root"]}>
 				<div className={classes["folder-header"]}>
-					<Typography typo={ITypo.H1Bis}>{userSelected?.contact?.first_name + " " + userSelected?.contact?.last_name}</Typography>
+					<Typography typo={ITypo.TITLE_H1}>
+						{userSelected?.contact?.first_name + " " + userSelected?.contact?.last_name}
+					</Typography>
 					{userSelected && userSelected.seats?.some((seat) => new Date(seat.subscription!.end_date) >= new Date()) && (
 						<div className={classes["subscription-active"]}>
 							<div className={classes["subscription-active-dot"]} />
-							<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_SUCCESS_600}>
+							<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_SUCCESS_600}>
 								Abonnement actif
 							</Typography>
 						</div>
@@ -161,34 +163,34 @@ export default function CollaboratorInformations(props: IProps) {
 				</div>
 				<div className={classes["user-infos"]}>
 					<div className={classes["user-infos-row"]}>
-						<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.COLOR_NEUTRAL_500}>
+						<Typography typo={ITypo.TEXT_MD_GREY} color={ITypoColor.COLOR_NEUTRAL_500}>
 							Nom
 						</Typography>
-						<Typography typo={ITypo.P_18}>{userSelected?.contact?.first_name}</Typography>
+						<Typography typo={ITypo.TEXT_LG_REGULAR}>{userSelected?.contact?.first_name}</Typography>
 					</div>
 					<div className={classes["user-infos-row"]}>
-						<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.COLOR_NEUTRAL_500}>
+						<Typography typo={ITypo.TEXT_MD_GREY} color={ITypoColor.COLOR_NEUTRAL_500}>
 							Prénom
 						</Typography>
-						<Typography typo={ITypo.P_18}>{userSelected?.contact?.last_name}</Typography>
+						<Typography typo={ITypo.TEXT_LG_REGULAR}>{userSelected?.contact?.last_name}</Typography>
 					</div>
 					<div className={classes["user-infos-row"]}>
-						<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.COLOR_NEUTRAL_500}>
+						<Typography typo={ITypo.TEXT_MD_GREY} color={ITypoColor.COLOR_NEUTRAL_500}>
 							Numéro de téléphone
 						</Typography>
-						<Typography typo={ITypo.P_18}>{userSelected?.contact?.cell_phone_number}</Typography>
+						<Typography typo={ITypo.TEXT_LG_REGULAR}>{userSelected?.contact?.cell_phone_number}</Typography>
 					</div>
 					<div className={classes["user-infos-row"]}>
-						<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.COLOR_NEUTRAL_500}>
+						<Typography typo={ITypo.TEXT_MD_GREY} color={ITypoColor.COLOR_NEUTRAL_500}>
 							Email
 						</Typography>
-						<Typography typo={ITypo.P_18}>{userSelected?.contact?.email}</Typography>
+						<Typography typo={ITypo.TEXT_LG_REGULAR}>{userSelected?.contact?.email}</Typography>
 					</div>
 				</div>
 
 				<div className={classes["role-container"]}>
 					<div className={classes["first-line"]}>
-						<Typography typo={ITypo.P_SB_18}>Modifier le rôle</Typography>
+						<Typography typo={ITypo.TEXT_LG_SEMIBOLD}>Modifier le rôle</Typography>
 						<div className={classes["gestion-role"]}>
 							<Link href={Module.getInstance().get().modules.pages.Roles.props.path}>
 								<Button
@@ -227,7 +229,7 @@ export default function CollaboratorInformations(props: IProps) {
 					confirmText={"Valider"}
 					cancelText={"Annuler"}>
 					<div className={classes["modal-content"]}>
-						<Typography typo={ITypo.P_16} className={classes["text"]}>
+						<Typography typo={ITypo.TEXT_MD_REGULAR} className={classes["text"]}>
 							Attribuer le rôle de <span className={classes["role-name"]}>{selectedOption?.label}</span> à{" "}
 							{userSelected?.contact?.first_name} {userSelected?.contact?.last_name} ?
 						</Typography>
@@ -242,7 +244,7 @@ export default function CollaboratorInformations(props: IProps) {
 					confirmText={"Valider"}
 					cancelText={"Annuler"}>
 					<div className={classes["modal-content"]}>
-						<Typography typo={ITypo.P_16} className={classes["text"]}>
+						<Typography typo={ITypo.TEXT_MD_REGULAR} className={classes["text"]}>
 							{adminRoleType === "add" ? "Attribuer" : "Retirer"} le rôle d'administrateur à{" "}
 							{userSelected?.contact?.first_name} {userSelected?.contact?.last_name} ?
 						</Typography>
diff --git a/src/front/Components/Layouts/Collaborators/index.tsx b/src/front/Components/Layouts/Collaborators/index.tsx
index da438fae..ad0b07a2 100644
--- a/src/front/Components/Layouts/Collaborators/index.tsx
+++ b/src/front/Components/Layouts/Collaborators/index.tsx
@@ -12,9 +12,9 @@ export default class Collaborators extends BasePage<IProps, IState> {
 			<DefaultCollaboratorDashboard title={"Dossier"} mobileBackText={"Liste des collaborateurs"}>
 				<div className={classes["root"]}>
 					<div className={classes["no-folder-selected"]}>
-						<Typography typo={ITypo.H1Bis}>Informations du collaborateur</Typography>
+						<Typography typo={ITypo.TITLE_H1}>Informations du collaborateur</Typography>
 						<div className={classes["choose-a-folder"]}>
-							<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_NEUTRAL_500}>
+							<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
 								Sélectionnez un collaborateur
 							</Typography>
 						</div>
diff --git a/src/front/Components/Layouts/DeedTypes/DeedTypesCreate/index.tsx b/src/front/Components/Layouts/DeedTypes/DeedTypesCreate/index.tsx
index 826bdcbc..016a76a1 100644
--- a/src/front/Components/Layouts/DeedTypes/DeedTypesCreate/index.tsx
+++ b/src/front/Components/Layouts/DeedTypes/DeedTypesCreate/index.tsx
@@ -87,7 +87,7 @@ export default function DeedTypesCreate(props: IProps) {
 		<DefaultDeedTypesDashboard mobileBackText={"Liste des types d'actes"} hasBackArrow title="Créer un type d'acte">
 			<div className={classes["root"]}>
 				<div className={classes["header"]}>
-					<Typography typo={ITypo.H1Bis}>Créer un type d'acte</Typography>
+					<Typography typo={ITypo.TITLE_H1}>Créer un type d'acte</Typography>
 				</div>
 				<Form onSubmit={onSubmitHandler} className={classes["form-container"]} onFieldChange={onFieldChange}>
 					<TextField
@@ -116,7 +116,7 @@ export default function DeedTypesCreate(props: IProps) {
 					cancelText={"Annuler"}
 					confirmText={"Quitter"}>
 					<div className={classes["modal-content"]}>
-						<Typography typo={ITypo.P_16} className={classes["text"]}>
+						<Typography typo={ITypo.TEXT_MD_REGULAR} className={classes["text"]}>
 							Si vous quittez, toutes les modifications que vous avez effectuées ne seront pas enregistrées.
 						</Typography>
 					</div>
diff --git a/src/front/Components/Layouts/DeedTypes/DeedTypesEdit/index.tsx b/src/front/Components/Layouts/DeedTypes/DeedTypesEdit/index.tsx
index ad5cd1e6..09e17c6c 100644
--- a/src/front/Components/Layouts/DeedTypes/DeedTypesEdit/index.tsx
+++ b/src/front/Components/Layouts/DeedTypes/DeedTypesEdit/index.tsx
@@ -103,7 +103,7 @@ export default function DeedTypesEdit() {
 		<DefaultDeedTypesDashboard mobileBackText={"Liste des types d'actes"} hasBackArrow title="Modifier les informations d'un acte">
 			<div className={classes["root"]}>
 				<div className={classes["header"]}>
-					<Typography typo={ITypo.H1Bis}>Modifier les informations de l'acte</Typography>
+					<Typography typo={ITypo.TITLE_H1}>Modifier les informations de l'acte</Typography>
 				</div>
 				<Form onSubmit={onSubmitHandler} className={classes["form-container"]} onFieldChange={onFieldChange}>
 					<TextField
@@ -134,7 +134,7 @@ export default function DeedTypesEdit() {
 					cancelText={"Annuler"}
 					confirmText={"Quitter"}>
 					<div className={classes["modal-content"]}>
-						<Typography typo={ITypo.P_16} className={classes["text"]}>
+						<Typography typo={ITypo.TEXT_MD_REGULAR} className={classes["text"]}>
 							Si vous quittez, toutes les modifications que vous avez effectuées ne seront pas enregistrées.
 						</Typography>
 					</div>
diff --git a/src/front/Components/Layouts/DeedTypes/DeedTypesInformations/index.tsx b/src/front/Components/Layouts/DeedTypes/DeedTypesInformations/index.tsx
index ab863e3d..a26c5d24 100644
--- a/src/front/Components/Layouts/DeedTypes/DeedTypesInformations/index.tsx
+++ b/src/front/Components/Layouts/DeedTypes/DeedTypesInformations/index.tsx
@@ -121,7 +121,7 @@ export default function DeedTypesInformations(props: IProps) {
 		<DefaultDeedTypesDashboard mobileBackText={"Liste des types d'actes"}>
 			<div className={classes["root"]}>
 				<div className={classes["header"]}>
-					<Typography typo={ITypo.H1Bis}>Paramétrage des listes de pièces</Typography>
+					<Typography typo={ITypo.TITLE_H1}>Paramétrage des listes de pièces</Typography>
 					<Link href={Module.getInstance().get().modules.pages.DocumentTypes.props.path}>
 						<Button variant={EButtonVariant.LINE}>
 							Modifier la liste des documents
@@ -130,15 +130,15 @@ export default function DeedTypesInformations(props: IProps) {
 					</Link>
 				</div>
 				<div className={classes["subtitle"]}>
-					<Typography typo={ITypo.H3}>{deedTypeSelected?.name}</Typography>
+					<Typography typo={ITypo.TITLE_H5}>{deedTypeSelected?.name}</Typography>
 				</div>
 				<div className={classes["deed-type-container"]}>
 					<div className={classes["infos"]}>
 						<div className={classNames(classes["middle-box"], classes["box"])}>
-							<Typography typo={ITypo.NAV_INPUT_16} className={classes["box-title"]} color={ITypoColor.COLOR_GENERIC_BLACK}>
+							<Typography typo={ITypo.TEXT_MD_GREY} className={classes["box-title"]} color={ITypoColor.COLOR_GENERIC_BLACK}>
 								Description
 							</Typography>
-							<Typography typo={ITypo.P_18}>{deedTypeSelected?.description}</Typography>
+							<Typography typo={ITypo.TEXT_LG_REGULAR}>{deedTypeSelected?.description}</Typography>
 						</div>
 					</div>
 					<div className={classes["pencil"]}>
@@ -154,7 +154,7 @@ export default function DeedTypesInformations(props: IProps) {
 				<div className={classes["documents-container"]}>
 					<Form onSubmit={onSubmitHandler}>
 						<div className={classes["container-title"]}>
-							<Typography typo={ITypo.P_SB_18}>Sélectionner les documents associés à ce type d'acte</Typography>
+							<Typography typo={ITypo.TEXT_LG_SEMIBOLD}>Sélectionner les documents associés à ce type d'acte</Typography>
 							<Tooltip text="Si vous ne trouvez pas le document que vous souhaitez dans la liste, cliquez sur « Modifier la liste des documents » pour créer ce type de document à la liste" />
 						</div>
 						<div className={classes["documents"]}>
@@ -184,7 +184,7 @@ export default function DeedTypesInformations(props: IProps) {
 					confirmText={"Valider"}
 					cancelText={"Annuler"}>
 					<div className={classes["modal-content"]}>
-						<Typography typo={ITypo.P_16} className={classes["text"]}>
+						<Typography typo={ITypo.TEXT_MD_REGULAR} className={classes["text"]}>
 							Êtes-vous sûr de vouloir supprimer ce type d'acte ?
 						</Typography>
 					</div>
@@ -198,7 +198,7 @@ export default function DeedTypesInformations(props: IProps) {
 					confirmText={"Enregistrer"}
 					cancelText={"Annuler"}>
 					<div className={classes["modal-content"]}>
-						<Typography typo={ITypo.P_16} className={classes["text"]}>
+						<Typography typo={ITypo.TEXT_MD_REGULAR} className={classes["text"]}>
 							Les documents seront associés à ce type d'acte.
 						</Typography>
 					</div>
diff --git a/src/front/Components/Layouts/DeedTypes/index.tsx b/src/front/Components/Layouts/DeedTypes/index.tsx
index 9d25d452..e9a924cd 100644
--- a/src/front/Components/Layouts/DeedTypes/index.tsx
+++ b/src/front/Components/Layouts/DeedTypes/index.tsx
@@ -12,9 +12,9 @@ export default class DeedTypes extends BasePage<IProps, IState> {
 			<DefaultDeedTypesDashboard mobileBackText={"Liste des listes de pièces"}>
 				<div className={classes["root"]}>
 					<div className={classes["no-role-selected"]}>
-						<Typography typo={ITypo.H1Bis}>Paramétrage des listes de pièces</Typography>
+						<Typography typo={ITypo.TITLE_H1}>Paramétrage des listes de pièces</Typography>
 						<div className={classes["choose-a-role"]}>
-							<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_NEUTRAL_500}>
+							<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
 								Sélectionnez un type d'acte
 							</Typography>
 						</div>
diff --git a/src/front/Components/Layouts/DocumentTypes/DocumentTypesCreate/index.tsx b/src/front/Components/Layouts/DocumentTypes/DocumentTypesCreate/index.tsx
index e1b62143..7271a660 100644
--- a/src/front/Components/Layouts/DocumentTypes/DocumentTypesCreate/index.tsx
+++ b/src/front/Components/Layouts/DocumentTypes/DocumentTypesCreate/index.tsx
@@ -52,7 +52,7 @@ export default function DocumentTypesCreate(props: IProps) {
 		<DefaultDocumentTypesDashboard mobileBackText={"Liste des types d'actes"} hasBackArrow title="Créer un type d'acte">
 			<div className={classes["root"]}>
 				<div className={classes["header"]}>
-					<Typography typo={ITypo.H1Bis}>Créer un nouveau document</Typography>
+					<Typography typo={ITypo.TITLE_H1}>Créer un nouveau document</Typography>
 				</div>
 				<Form onSubmit={onSubmitHandler} className={classes["form-container"]}>
 					<TextField
diff --git a/src/front/Components/Layouts/DocumentTypes/DocumentTypesEdit/index.tsx b/src/front/Components/Layouts/DocumentTypes/DocumentTypesEdit/index.tsx
index afe43b5a..b3958e6f 100644
--- a/src/front/Components/Layouts/DocumentTypes/DocumentTypesEdit/index.tsx
+++ b/src/front/Components/Layouts/DocumentTypes/DocumentTypesEdit/index.tsx
@@ -69,7 +69,7 @@ export default function DocumentTypesEdit() {
 		<DefaultDocumentTypesDashboard mobileBackText={"Liste des documents"} hasBackArrow title="Modifier un type de doucment">
 			<div className={classes["root"]}>
 				<div className={classes["header"]}>
-					<Typography typo={ITypo.H1Bis}>Paramétrage des documents</Typography>
+					<Typography typo={ITypo.TITLE_H1}>Paramétrage des documents</Typography>
 				</div>
 				<Form onSubmit={onSubmitHandler} className={classes["form-container"]}>
 					<TextField
diff --git a/src/front/Components/Layouts/DocumentTypes/DocumentTypesInformations/index.tsx b/src/front/Components/Layouts/DocumentTypes/DocumentTypesInformations/index.tsx
index ce3a983a..d011c403 100644
--- a/src/front/Components/Layouts/DocumentTypes/DocumentTypesInformations/index.tsx
+++ b/src/front/Components/Layouts/DocumentTypes/DocumentTypesInformations/index.tsx
@@ -36,7 +36,7 @@ export default function DocumentTypesInformations() {
 		<DefaultDocumentTypesDashboard mobileBackText={"Liste des collaborateurs"}>
 			<div className={classes["root"]}>
 				<div className={classes["header"]}>
-					<Typography typo={ITypo.H1Bis}>Paramétrage des listes de pièces</Typography>
+					<Typography typo={ITypo.TITLE_H1}>Paramétrage des listes de pièces</Typography>
 					<Link href={Module.getInstance().get().modules.pages.DeedTypes.props.path}>
 						<Button variant={EButtonVariant.LINE}>
 							Retour au paramétrage des types d'actes
@@ -47,22 +47,22 @@ export default function DocumentTypesInformations() {
 				<div className={classes["document-infos"]}>
 					<div className={classes["left"]}>
 						<div className={classes["document-infos-row"]}>
-							<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.COLOR_NEUTRAL_500}>
+							<Typography typo={ITypo.TEXT_MD_GREY} color={ITypoColor.COLOR_NEUTRAL_500}>
 								Nom du document
 							</Typography>
-							<Typography typo={ITypo.P_18}>{documentSelected?.name}</Typography>
+							<Typography typo={ITypo.TEXT_LG_REGULAR}>{documentSelected?.name}</Typography>
 						</div>
 						<div className={classes["document-infos-row"]}>
-							<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.COLOR_NEUTRAL_500}>
+							<Typography typo={ITypo.TEXT_MD_GREY} color={ITypoColor.COLOR_NEUTRAL_500}>
 								Description visible par les collaborateurs de l'office
 							</Typography>
-							<Typography typo={ITypo.P_18}>{documentSelected?.private_description}</Typography>
+							<Typography typo={ITypo.TEXT_LG_REGULAR}>{documentSelected?.private_description}</Typography>
 						</div>
 						<div className={classes["document-infos-row"]}>
-							<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.COLOR_NEUTRAL_500}>
+							<Typography typo={ITypo.TEXT_MD_GREY} color={ITypoColor.COLOR_NEUTRAL_500}>
 								Description visible par les clients de l'office
 							</Typography>
-							<Typography typo={ITypo.P_18}>{documentSelected?.public_description}</Typography>
+							<Typography typo={ITypo.TEXT_LG_REGULAR}>{documentSelected?.public_description}</Typography>
 						</div>
 					</div>
 					<div className={classes["right"]}>
diff --git a/src/front/Components/Layouts/DocumentTypes/index.tsx b/src/front/Components/Layouts/DocumentTypes/index.tsx
index 5788e2e0..71aa02f0 100644
--- a/src/front/Components/Layouts/DocumentTypes/index.tsx
+++ b/src/front/Components/Layouts/DocumentTypes/index.tsx
@@ -12,9 +12,9 @@ export default class DocumentTypes extends BasePage<IProps, IState> {
 			<DefaultDocumentTypesDashboard mobileBackText={"Liste des documentss"}>
 				<div className={classes["root"]}>
 					<div className={classes["no-role-selected"]}>
-						<Typography typo={ITypo.H1Bis}>Paramétrage des documents</Typography>
+						<Typography typo={ITypo.TITLE_H1}>Paramétrage des documents</Typography>
 						<div className={classes["choose-a-role"]}>
-							<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_NEUTRAL_500}>
+							<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
 								Sélectionnez un document
 							</Typography>
 						</div>
diff --git a/src/front/Components/Layouts/Folder/AddClientToFolder/index.tsx b/src/front/Components/Layouts/Folder/AddClientToFolder/index.tsx
index 13f4719d..efdf24a9 100644
--- a/src/front/Components/Layouts/Folder/AddClientToFolder/index.tsx
+++ b/src/front/Components/Layouts/Folder/AddClientToFolder/index.tsx
@@ -65,7 +65,7 @@ class AddClientToFolderClass extends BasePage<IPropsClass, IState> {
 					<div className={classes["back-arrow"]}>
 						<BackArrow url={backwardPath} />
 					</div>
-					<Typography typo={ITypo.H1Bis}>Associer un ou plusieurs client(s)</Typography>
+					<Typography typo={ITypo.TITLE_H1}>Associer un ou plusieurs client(s)</Typography>
 					{this.state.isLoaded && (
 						<>
 							<div className={classes["radiobox-container"]}>
@@ -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.P_ERR_18}>Client existant</Typography>
+										<Typography typo={ITypo.TEXT_LG_ERROR}>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.P_ERR_18}>Nouveau client</Typography>
+									<Typography typo={ITypo.TEXT_LG_ERROR}>Nouveau client</Typography>
 								</RadioBox>
 							</div>
 
diff --git a/src/front/Components/Layouts/Folder/AskDocuments/ParameterDocuments/index.tsx b/src/front/Components/Layouts/Folder/AskDocuments/ParameterDocuments/index.tsx
index 3bda2b0b..b6569f3f 100644
--- a/src/front/Components/Layouts/Folder/AskDocuments/ParameterDocuments/index.tsx
+++ b/src/front/Components/Layouts/Folder/AskDocuments/ParameterDocuments/index.tsx
@@ -40,7 +40,7 @@ export default function ParameterDocuments(props: IProps) {
 					value: document.uid,
 				};
 			});
-			formattedOptions.sort((a, b) => a.label > b.label? 1 : -1);
+		formattedOptions.sort((a, b) => (a.label > b.label ? 1 : -1));
 		setFormattedOptions(formattedOptions);
 	}, [props.folder.deed?.document_types]);
 
@@ -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.P_ERR_18}>Document existant</Typography>
+						<Typography typo={ITypo.TEXT_LG_ERROR}>Document existant</Typography>
 					</RadioBox>
 
 					<RadioBox name="document" onChange={selectAddMode} checked={addOrEditDocument === "add"} value={"new client"}>
-						<Typography typo={ITypo.P_ERR_18}>Créer un document</Typography>
+						<Typography typo={ITypo.TEXT_LG_ERROR}>Créer un document</Typography>
 					</RadioBox>
 				</div>
 				{addOrEditDocument === "add" && (
diff --git a/src/front/Components/Layouts/Folder/AskDocuments/index.tsx b/src/front/Components/Layouts/Folder/AskDocuments/index.tsx
index f9f8b03d..e48e6e95 100644
--- a/src/front/Components/Layouts/Folder/AskDocuments/index.tsx
+++ b/src/front/Components/Layouts/Folder/AskDocuments/index.tsx
@@ -53,7 +53,7 @@ class AskDocumentsClass extends BasePage<IPropsClass, IState> {
 			<DefaultNotaryDashboard title={"Demander des documents"} onSelectedFolder={() => {}}>
 				<div className={classes["root"]}>
 					<BackArrow url={backUrl} />
-					<Typography typo={ITypo.H1} color={ITypoColor.COLOR_GENERIC_BLACK} className={classes["title"]}>
+					<Typography typo={ITypo.DISPLAY_LARGE} color={ITypoColor.COLOR_GENERIC_BLACK} className={classes["title"]}>
 						Demander des documents
 					</Typography>
 					<Form onSubmit={this.onFormSubmit}>
diff --git a/src/front/Components/Layouts/Folder/CreateCustomerNote/index.tsx b/src/front/Components/Layouts/Folder/CreateCustomerNote/index.tsx
index f9a71ccd..b9c032c9 100644
--- a/src/front/Components/Layouts/Folder/CreateCustomerNote/index.tsx
+++ b/src/front/Components/Layouts/Folder/CreateCustomerNote/index.tsx
@@ -50,7 +50,7 @@ class CreateCustomerNoteClass extends BasePage<IPropsClass, IState> {
 					<div className={classes["back-arrow"]}>
 						<BackArrow url={this.backwardPath} />
 					</div>
-					<Typography typo={ITypo.H1Bis}>Modifier la note du client</Typography>
+					<Typography typo={ITypo.TITLE_H1}>Modifier la note du client</Typography>
 
 					<Form className={classes["form"]} onSubmit={this.onFormSubmit}>
 						<div className={classes["content"]}>
diff --git a/src/front/Components/Layouts/Folder/CreateFolder/index.tsx b/src/front/Components/Layouts/Folder/CreateFolder/index.tsx
index 37826800..05e91a7d 100644
--- a/src/front/Components/Layouts/Folder/CreateFolder/index.tsx
+++ b/src/front/Components/Layouts/Folder/CreateFolder/index.tsx
@@ -82,10 +82,10 @@ class CreateFolderClass extends BasePage<IPropsClass, IState> {
 			<DefaultDoubleSidePage title={"Dossier"} image={backgroundImage} type="background" showHeader={true}>
 				<div className={classes["root"]}>
 					<BackArrow />
-					<Typography typo={ITypo.H1} color={ITypoColor.COLOR_GENERIC_BLACK} className={classes["title"]}>
+					<Typography typo={ITypo.DISPLAY_LARGE} color={ITypoColor.COLOR_GENERIC_BLACK} className={classes["title"]}>
 						Créer un dossier
 					</Typography>
-					<Typography typo={ITypo.H3} color={ITypoColor.COLOR_PRIMARY_500} className={classes["subtitle"]}>
+					<Typography typo={ITypo.TITLE_H5} color={ITypoColor.COLOR_PRIMARY_500} className={classes["subtitle"]}>
 						Informations dossier
 					</Typography>
 					<Form onSubmit={this.onFormSubmit}>
@@ -118,7 +118,7 @@ class CreateFolderClass extends BasePage<IPropsClass, IState> {
 							/>
 
 							<div className={classes["access-container"]}>
-								<Typography typo={ITypo.H3} color={ITypoColor.COLOR_PRIMARY_500}>
+								<Typography typo={ITypo.TITLE_H5} color={ITypoColor.COLOR_PRIMARY_500}>
 									Accès au dossier
 								</Typography>
 								<div className={classes["radio-container"]}>
diff --git a/src/front/Components/Layouts/Folder/FolderInformation/ClientSection/index.tsx b/src/front/Components/Layouts/Folder/FolderInformation/ClientSection/index.tsx
index 604b5d3c..e4e9910c 100644
--- a/src/front/Components/Layouts/Folder/FolderInformation/ClientSection/index.tsx
+++ b/src/front/Components/Layouts/Folder/FolderInformation/ClientSection/index.tsx
@@ -50,7 +50,7 @@ export default class ClientSection extends React.Component<IProps, IState> {
 				) : (
 					<div className={classes["no-client"]}>
 						<div className={classes["title"]}>
-							<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_NEUTRAL_500}>
+							<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
 								Aucun client n'est associé au dossier.
 							</Typography>
 						</div>
diff --git a/src/front/Components/Layouts/Folder/FolderInformation/index.tsx b/src/front/Components/Layouts/Folder/FolderInformation/index.tsx
index 0fb2898b..586e0699 100644
--- a/src/front/Components/Layouts/Folder/FolderInformation/index.tsx
+++ b/src/front/Components/Layouts/Folder/FolderInformation/index.tsx
@@ -93,7 +93,7 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
 								<div className={classes["folder-header"]}>
 									<div className={classes["header"]}>
 										<div className={classes["title"]}>
-											<Typography typo={ITypo.H1Bis}>Informations du dossier</Typography>
+											<Typography typo={ITypo.TITLE_H1}>Informations du dossier</Typography>
 										</div>
 										<Link href={redirectPathEditCollaborators}>
 											<Button variant={EButtonVariant.LINE} icon={ChevronIcon}>
@@ -192,7 +192,7 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
 									cancelText={"Annuler"}
 									confirmText={"Archiver"}>
 									<div className={classes["modal-title"]}>
-										<Typography typo={ITypo.P_16}>Souhaitez-vous vraiment archiver le dossier ?</Typography>
+										<Typography typo={ITypo.TEXT_MD_REGULAR}>Souhaitez-vous vraiment archiver le dossier ?</Typography>
 									</div>
 									<TextAreaField
 										name="archived_description"
@@ -209,7 +209,7 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
 									cancelText={"Annuler"}
 									confirmText={"Archiver"}>
 									<div className={classes["modal-title"]}>
-										<Typography typo={ITypo.P_16}>
+										<Typography typo={ITypo.TEXT_MD_REGULAR}>
 											Vous êtes en train d’archiver le dossier sans avoir l’ancré, êtes-vous sûr de vouloir le faire ?
 										</Typography>
 									</div>
@@ -228,16 +228,16 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
 									cancelText={"Annuler"}
 									confirmText={"Confirmer"}>
 									<div className={classes["modal-title"]}>
-										<Typography typo={ITypo.P_16}>Cette action sera irréversible.</Typography>
+										<Typography typo={ITypo.TEXT_MD_REGULAR}>Cette action sera irréversible.</Typography>
 									</div>
 								</Confirm>
 								<Newsletter isOpen={false} />
 							</div>
 						) : (
 							<div className={classes["no-folder-selected"]}>
-								<Typography typo={ITypo.H1Bis}>Informations du dossier</Typography>
+								<Typography typo={ITypo.TITLE_H1}>Informations du dossier</Typography>
 								<div className={classes["choose-a-folder"]}>
-									<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_NEUTRAL_500}>
+									<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
 										Sélectionnez un dossier
 									</Typography>
 								</div>
@@ -268,7 +268,10 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
 					showButtons={!this.state.hasValidateAnchoring}>
 					<div className={classes["validate-document-container"]}>
 						{!this.state.hasValidateAnchoring && (
-							<Typography typo={ITypo.P_16} color={ITypoColor.COLOR_GENERIC_BLACK} className={classes["validate-text"]}>
+							<Typography
+								typo={ITypo.TEXT_MD_REGULAR}
+								color={ITypoColor.COLOR_GENERIC_BLACK}
+								className={classes["validate-text"]}>
 								Les documents du dossier seront certifiés sur la blockchain. Pensez à bien télécharger l'ensemble des
 								documents du dossier ainsi que le fichier de preuve d'ancrage pour les mettre dans la GED de votre logiciel
 								de rédaction d'actes.
@@ -276,7 +279,10 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
 						)}
 						{this.state.hasValidateAnchoring && (
 							<div className={classes["document-validating-container"]}>
-								<Typography typo={ITypo.P_16} color={ITypoColor.COLOR_GENERIC_BLACK} className={classes["validate-text"]}>
+								<Typography
+									typo={ITypo.TEXT_MD_REGULAR}
+									color={ITypoColor.COLOR_GENERIC_BLACK}
+									className={classes["validate-text"]}>
 									Veuillez revenir sur le dossier dans 5 minutes et rafraîchir la page pour télécharger le dossier de
 									preuve d'ancrage et le glisser dans la GED de votre logiciel de rédaction d'acte.
 								</Typography>
diff --git a/src/front/Components/Layouts/Folder/UpdateClient/index.tsx b/src/front/Components/Layouts/Folder/UpdateClient/index.tsx
index 88a6e32d..a9bb53d1 100644
--- a/src/front/Components/Layouts/Folder/UpdateClient/index.tsx
+++ b/src/front/Components/Layouts/Folder/UpdateClient/index.tsx
@@ -79,7 +79,7 @@ class UpdateClientClass extends BasePage<IPropsClass, IState> {
 					<div className={classes["back-arrow"]}>
 						<BackArrow url={this.backwardPath} />
 					</div>
-					<Typography typo={ITypo.H1Bis}>Modifier les informations du client</Typography>
+					<Typography typo={ITypo.TITLE_H1}>Modifier les informations du client</Typography>
 					<Form className={classes["form"]} onSubmit={this.onFormSubmit}>
 						<div className={classes["content"]}>
 							<TextField
diff --git a/src/front/Components/Layouts/Folder/UpdateCustomerNote/index.tsx b/src/front/Components/Layouts/Folder/UpdateCustomerNote/index.tsx
index dde3dabc..86d19c6a 100644
--- a/src/front/Components/Layouts/Folder/UpdateCustomerNote/index.tsx
+++ b/src/front/Components/Layouts/Folder/UpdateCustomerNote/index.tsx
@@ -40,7 +40,7 @@ class UpdateCustomerNoteClass extends BasePage<IPropsClass, IState> {
 					<div className={classes["back-arrow"]}>
 						<BackArrow url={this.state.backwardPath} />
 					</div>
-					<Typography typo={ITypo.H1Bis}>Modifier la note du client</Typography>
+					<Typography typo={ITypo.TITLE_H1}>Modifier la note du client</Typography>
 
 					<Form className={classes["form"]} onSubmit={this.onFormSubmit}>
 						<div className={classes["content"]}>
diff --git a/src/front/Components/Layouts/Folder/UpdateFolderCollaborators/index.tsx b/src/front/Components/Layouts/Folder/UpdateFolderCollaborators/index.tsx
index 098eeee0..7fee6ded 100644
--- a/src/front/Components/Layouts/Folder/UpdateFolderCollaborators/index.tsx
+++ b/src/front/Components/Layouts/Folder/UpdateFolderCollaborators/index.tsx
@@ -70,7 +70,7 @@ class UpdateFolderCollaboratorsClass extends BasePage<IPropsClass, IState> {
 					<div className={classes["back-arrow"]}>
 						<BackArrow url={backwardPath} />
 					</div>
-					<Typography typo={ITypo.H1Bis}>Modifier les collaborateurs</Typography>
+					<Typography typo={ITypo.TITLE_H1}>Modifier les collaborateurs</Typography>
 
 					{!this.state.loading && (
 						<Form className={classes["form"]} onSubmit={this.onFormSubmit}>
@@ -207,7 +207,7 @@ class UpdateFolderCollaboratorsClass extends BasePage<IPropsClass, IState> {
 					.modules.pages.Folder.pages.FolderInformation.props.path.replace("[folderUid]", this.props.selectedFolderUid),
 			);
 		} catch (error) {
-			if(!Array.isArray(error)) return;
+			if (!Array.isArray(error)) return;
 			this.setState({ validationError: error });
 		}
 	}
diff --git a/src/front/Components/Layouts/Folder/UpdateFolderDescription/index.tsx b/src/front/Components/Layouts/Folder/UpdateFolderDescription/index.tsx
index 211ec64f..e68e01de 100644
--- a/src/front/Components/Layouts/Folder/UpdateFolderDescription/index.tsx
+++ b/src/front/Components/Layouts/Folder/UpdateFolderDescription/index.tsx
@@ -41,7 +41,7 @@ class UpdateFolderDescriptionClass extends BasePage<IPropsClass, IState> {
 					<div className={classes["back-arrow"]}>
 						<BackArrow url={this.backwardPath} />
 					</div>
-					<Typography typo={ITypo.H1Bis}>Modifier la note du dossier</Typography>
+					<Typography typo={ITypo.TITLE_H1}>Modifier la note du dossier</Typography>
 
 					<Form className={classes["form"]} onSubmit={this.onFormSubmit}>
 						<div className={classes["content"]}>
diff --git a/src/front/Components/Layouts/Folder/UpdateFolderMetadata/index.tsx b/src/front/Components/Layouts/Folder/UpdateFolderMetadata/index.tsx
index 336d55e2..222c4896 100644
--- a/src/front/Components/Layouts/Folder/UpdateFolderMetadata/index.tsx
+++ b/src/front/Components/Layouts/Folder/UpdateFolderMetadata/index.tsx
@@ -55,7 +55,7 @@ class UpdateFolderMetadataClass extends BasePage<IPropsClass, IState> {
 					<div className={classes["back-arrow"]}>
 						<BackArrow url={backwardPath} />
 					</div>
-					<Typography typo={ITypo.H1Bis}>Modifier les informations du dossier</Typography>
+					<Typography typo={ITypo.TITLE_H1}>Modifier les informations du dossier</Typography>
 
 					<Form className={classes["form"]} onSubmit={this.onFormSubmit}>
 						<div className={classes["content"]}>
diff --git a/src/front/Components/Layouts/Folder/ViewDocuments/OcrResult/index.tsx b/src/front/Components/Layouts/Folder/ViewDocuments/OcrResult/index.tsx
index b03fecd6..2e999189 100644
--- a/src/front/Components/Layouts/Folder/ViewDocuments/OcrResult/index.tsx
+++ b/src/front/Components/Layouts/Folder/ViewDocuments/OcrResult/index.tsx
@@ -13,15 +13,15 @@ export default class OcrResult extends React.Component<IProps, IState> {
 	public override render(): JSX.Element | null {
 		return (
 			<div className={classes["root"]}>
-				<Typography typo={ITypo.P_16} className={classes["result-text"]}>
+				<Typography typo={ITypo.TEXT_MD_REGULAR} className={classes["result-text"]}>
 					Résultat de l'analyse :
 				</Typography>
 				<div className={classes["result-container"]}>
-					<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
+					<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_GENERIC_BLACK}>
 						Document conforme à :&nbsp;
 					</Typography>
 					<div className={classes["percentage-container"]}>
-						<Typography typo={ITypo.P_18} color={this.getColor()}>
+						<Typography typo={ITypo.TEXT_LG_REGULAR} color={this.getColor()}>
 							{this.props.percentage}%
 						</Typography>
 						<div className={classes["dot"]} data-color={this.getColor()} />
diff --git a/src/front/Components/Layouts/Folder/ViewDocuments/index.tsx b/src/front/Components/Layouts/Folder/ViewDocuments/index.tsx
index 0a27d6fd..f8faff65 100644
--- a/src/front/Components/Layouts/Folder/ViewDocuments/index.tsx
+++ b/src/front/Components/Layouts/Folder/ViewDocuments/index.tsx
@@ -73,10 +73,10 @@ class ViewDocumentsClass extends BasePage<IPropsClass, IState> {
 			<DefaultNotaryDashboard title={"Demander des documents"} hasBackArrow mobileBackText="Retour aux documents">
 				{this.state.document && this.state.document.files && this.state.selectedFile && !this.state.isLoading && (
 					<div className={classes["root"]}>
-						<Typography typo={ITypo.H1} color={ITypoColor.COLOR_GENERIC_BLACK} className={classes["title"]}>
+						<Typography typo={ITypo.DISPLAY_LARGE} color={ITypoColor.COLOR_GENERIC_BLACK} className={classes["title"]}>
 							{this.state.document.folder?.name}
 						</Typography>
-						<Typography typo={ITypo.H3} color={ITypoColor.COLOR_GENERIC_BLACK} className={classes["subtitle"]}>
+						<Typography typo={ITypo.TITLE_H5} color={ITypoColor.COLOR_GENERIC_BLACK} className={classes["subtitle"]}>
 							{this.state.document.document_type?.name}
 						</Typography>
 						<div className={classes["document-container"]}>
@@ -139,7 +139,10 @@ class ViewDocumentsClass extends BasePage<IPropsClass, IState> {
 							cancelText={"Annuler"}
 							confirmText={"Confirmer"}>
 							<div className={classes["validate-document-container"]}>
-								<Typography typo={ITypo.P_16} color={ITypoColor.COLOR_GENERIC_BLACK} className={classes["validate-text"]}>
+								<Typography
+									typo={ITypo.TEXT_MD_REGULAR}
+									color={ITypoColor.COLOR_GENERIC_BLACK}
+									className={classes["validate-text"]}>
 									Êtes-vous sûr de vouloir valider ce document ?
 								</Typography>
 							</div>
@@ -153,7 +156,10 @@ class ViewDocumentsClass extends BasePage<IPropsClass, IState> {
 							cancelText={"Annuler"}
 							confirmText={"Refuser"}>
 							<div className={classes["refuse-document-container"]}>
-								<Typography typo={ITypo.P_16} color={ITypoColor.COLOR_GENERIC_BLACK} className={classes["refuse-text"]}>
+								<Typography
+									typo={ITypo.TEXT_MD_REGULAR}
+									color={ITypoColor.COLOR_GENERIC_BLACK}
+									className={classes["refuse-text"]}>
 									Veuillez indiquer au client le motif du refus de son document afin qu'il puisse vous renvoyer une bonne
 									version.
 								</Typography>
@@ -164,7 +170,7 @@ class ViewDocumentsClass extends BasePage<IPropsClass, IState> {
 				)}
 				{(!this.state.selectedFile || !this.state.document) && !this.state.isLoading && (
 					<div className={classes["root"]}>
-						<Typography typo={ITypo.P_16} color={ITypoColor.COLOR_GENERIC_BLACK} className={classes["refuse-text"]}>
+						<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_GENERIC_BLACK} className={classes["refuse-text"]}>
 							Document non trouvé
 						</Typography>
 					</div>
diff --git a/src/front/Components/Layouts/Folder/index.tsx b/src/front/Components/Layouts/Folder/index.tsx
index 23444950..f24df0fc 100644
--- a/src/front/Components/Layouts/Folder/index.tsx
+++ b/src/front/Components/Layouts/Folder/index.tsx
@@ -27,9 +27,9 @@ export default class Folder extends BasePage<IProps, IState> {
 			<DefaultNotaryDashboard title={"Dossier"} onSelectedFolder={this.onSelectedFolder} mobileBackText={"Liste des dossiers"}>
 				<div className={classes["root"]}>
 					<div className={classes["no-folder-selected"]}>
-						<Typography typo={ITypo.H1Bis}>Informations du dossier</Typography>
+						<Typography typo={ITypo.TITLE_H1}>Informations du dossier</Typography>
 						<div className={classes["choose-a-folder"]}>
-							<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_NEUTRAL_500}>
+							<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
 								Sélectionnez un dossier
 							</Typography>
 						</div>
diff --git a/src/front/Components/Layouts/FolderArchived/FolderInformation/ClientSection/index.tsx b/src/front/Components/Layouts/FolderArchived/FolderInformation/ClientSection/index.tsx
index 69e5e668..55bb9ec4 100644
--- a/src/front/Components/Layouts/FolderArchived/FolderInformation/ClientSection/index.tsx
+++ b/src/front/Components/Layouts/FolderArchived/FolderInformation/ClientSection/index.tsx
@@ -33,7 +33,7 @@ export default class ClientSection extends React.Component<IProps, IState> {
 					</>
 				) : (
 					<div className={classes["no-client"]}>
-						<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_NEUTRAL_500}>
+						<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
 							Aucun client dans ce dossier
 						</Typography>
 					</div>
diff --git a/src/front/Components/Layouts/FolderArchived/FolderInformation/index.tsx b/src/front/Components/Layouts/FolderArchived/FolderInformation/index.tsx
index 409776b8..8396e6e3 100644
--- a/src/front/Components/Layouts/FolderArchived/FolderInformation/index.tsx
+++ b/src/front/Components/Layouts/FolderArchived/FolderInformation/index.tsx
@@ -63,7 +63,7 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
 								<div className={classes["folder-header"]}>
 									<div className={classes["header"]}>
 										<div className={classes["title"]}>
-											<Typography typo={ITypo.H1Bis}>Informations du dossier</Typography>
+											<Typography typo={ITypo.TITLE_H1}>Informations du dossier</Typography>
 										</div>
 										<Link href={redirectPathEditCollaborators}>
 											<Button variant={EButtonVariant.LINE} icon={ChevronIcon}>
@@ -137,9 +137,9 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
 							</div>
 						) : (
 							<div className={classes["no-folder-selected"]}>
-								<Typography typo={ITypo.H1Bis}>Informations du dossier</Typography>
+								<Typography typo={ITypo.TITLE_H1}>Informations du dossier</Typography>
 								<div className={classes["choose-a-folder"]}>
-									<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_NEUTRAL_500}>
+									<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
 										Aucun dossier sélectionné
 									</Typography>
 								</div>
diff --git a/src/front/Components/Layouts/FolderArchived/UpdateFolderMetadata/index.tsx b/src/front/Components/Layouts/FolderArchived/UpdateFolderMetadata/index.tsx
index 57dcf16a..d253528e 100644
--- a/src/front/Components/Layouts/FolderArchived/UpdateFolderMetadata/index.tsx
+++ b/src/front/Components/Layouts/FolderArchived/UpdateFolderMetadata/index.tsx
@@ -44,7 +44,7 @@ class UpdateFolderMetadataClass extends BasePage<IProps, IState> {
 					<div className={classes["back-arrow"]}>
 						<BackArrow url={backwardPath} />
 					</div>
-					<Typography typo={ITypo.H1Bis}>Modifier les informations du dossier</Typography>
+					<Typography typo={ITypo.TITLE_H1}>Modifier les informations du dossier</Typography>
 
 					<Form className={classes["form"]}>
 						<div className={classes["content"]}>
diff --git a/src/front/Components/Layouts/FolderArchived/index.tsx b/src/front/Components/Layouts/FolderArchived/index.tsx
index c3cedd23..4e8346e9 100644
--- a/src/front/Components/Layouts/FolderArchived/index.tsx
+++ b/src/front/Components/Layouts/FolderArchived/index.tsx
@@ -30,9 +30,9 @@ export default class FolderArchived extends BasePage<IProps, IState> {
 				mobileBackText={"Liste des dossiers"}>
 				<div className={classes["root"]}>
 					<div className={classes["no-folder-selected"]}>
-						<Typography typo={ITypo.H1Bis}>Informations du dossier</Typography>
+						<Typography typo={ITypo.TITLE_H1}>Informations du dossier</Typography>
 						<div className={classes["choose-a-folder"]}>
-							<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_NEUTRAL_500}>
+							<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
 								Aucun dossier sélectionné
 							</Typography>
 						</div>
diff --git a/src/front/Components/Layouts/Home/index.tsx b/src/front/Components/Layouts/Home/index.tsx
index ea575b11..38c46b30 100644
--- a/src/front/Components/Layouts/Home/index.tsx
+++ b/src/front/Components/Layouts/Home/index.tsx
@@ -8,7 +8,7 @@ export default class Home extends BasePage {
 		return (
 			<DefaultTemplate title={"HomePage"}>
 				<div className={classes["root"]}>
-					<Typography typo={ITypo.H1}>HomePage</Typography>
+					<Typography typo={ITypo.DISPLAY_LARGE}>HomePage</Typography>
 				</div>
 			</DefaultTemplate>
 		);
diff --git a/src/front/Components/Layouts/Login/index.tsx b/src/front/Components/Layouts/Login/index.tsx
index 1642ef8a..81f9fd8a 100644
--- a/src/front/Components/Layouts/Login/index.tsx
+++ b/src/front/Components/Layouts/Login/index.tsx
@@ -55,13 +55,13 @@ export default function Login() {
 		<DefaultDoubleSidePage title={"Login"} image={LandingImage}>
 			<div className={classes["root"]}>
 				<Image alt="coffre" src={CoffreIcon} />
-				<Typography typo={ITypo.H1}>
+				<Typography typo={ITypo.DISPLAY_LARGE}>
 					<div className={classes["title"]}>Connexion espace professionnel</div>
 				</Typography>
 				<Button onClick={redirectUserOnConnection} icon={idNoteLogo} iconposition={"left"}>
 					S'identifier avec ID.not
 				</Button>
-				<Typography typo={ITypo.P_18}>
+				<Typography typo={ITypo.TEXT_LG_REGULAR}>
 					<div className={classes["forget-password"]}>Vous n'arrivez pas à vous connecter ?</div>
 				</Typography>
 				<Link href="mailto:support@lecoffre.io">
@@ -77,7 +77,7 @@ export default function Login() {
 				header={"Erreur"}
 				confirmText={"OK"}>
 				<div className={classes["modal-content"]}>
-					<Typography typo={ITypo.P_16} className={classes["text"]}>
+					<Typography typo={ITypo.TEXT_MD_REGULAR} className={classes["text"]}>
 						Vous ne disposez pas d'un abonnement, veuillez contacter l'administrateur de votre office.
 					</Typography>
 				</div>
@@ -91,7 +91,7 @@ export default function Login() {
 				header={"Session expirée"}
 				confirmText={"OK"}>
 				<div className={classes["modal-content"]}>
-					<Typography typo={ITypo.P_16} className={classes["text"]}>
+					<Typography typo={ITypo.TEXT_MD_REGULAR} className={classes["text"]}>
 						Veuillez vous reconnecter.
 					</Typography>
 				</div>
@@ -105,7 +105,7 @@ export default function Login() {
 				confirmText={"Accéder à mon compte ID.not"}
 				cancelText={"OK"}>
 				<div className={classes["modal-content"]}>
-					<Typography typo={ITypo.P_16} className={classes["text"]}>
+					<Typography typo={ITypo.TEXT_MD_REGULAR} className={classes["text"]}>
 						Votre compte ID.not doit être associé à une adresse email @notaires.fr (onglet Mettre à jour mes données
 						professionnelles)
 					</Typography>
@@ -120,12 +120,12 @@ export default function Login() {
 				confirmText={"Contacter l'administrateur"}
 				cancelText={"OK"}>
 				<div className={classes["modal-content"]}>
-					<Typography typo={ITypo.P_16} className={classes["text"]}>
+					<Typography typo={ITypo.TEXT_MD_REGULAR} className={classes["text"]}>
 						L'accès à la version bêta de lecoffre.io est limité à un groupe restreint d'utilisateurs autorisés.
 					</Typography>
 					<ul>
 						<li>
-							<Typography typo={ITypo.P_16} className={classes["text"]}>
+							<Typography typo={ITypo.TEXT_MD_REGULAR} className={classes["text"]}>
 								Si vous êtes intéressé par la participation à notre programme de bêta-test, veuillez nous compléter le
 								formulaire :{" "}
 								<a
@@ -138,7 +138,7 @@ export default function Login() {
 						</li>
 						<div style={{ marginBottom: "10px" }}></div>
 						<li>
-							<Typography typo={ITypo.P_16} className={classes["text"]}>
+							<Typography typo={ITypo.TEXT_MD_REGULAR} className={classes["text"]}>
 								Si vous avez déjà un compte bêta-testeur, veuillez vous connecter sur{" "}
 								<a
 									href="https://compte.idnot.fr/home"
diff --git a/src/front/Components/Layouts/LoginCallback/index.tsx b/src/front/Components/Layouts/LoginCallback/index.tsx
index ee9ffdc5..8525e647 100644
--- a/src/front/Components/Layouts/LoginCallback/index.tsx
+++ b/src/front/Components/Layouts/LoginCallback/index.tsx
@@ -63,13 +63,13 @@ export default function LoginCallBack() {
 		<DefaultDoubleSidePage title={"Login"} image={LandingImage}>
 			<div className={classes["root"]}>
 				<Image alt="coffre" src={CoffreIcon} />
-				<Typography typo={ITypo.H1}>
+				<Typography typo={ITypo.DISPLAY_LARGE}>
 					<div className={classes["title"]}>Connexion espace professionnel</div>
 				</Typography>
 				<div className={classes["loader"]}>
 					<Loader />
 				</div>
-				<Typography typo={ITypo.P_18}>
+				<Typography typo={ITypo.TEXT_LG_REGULAR}>
 					<div className={classes["forget-password"]}>Vous n'arrivez pas à vous connecter ?</div>
 				</Typography>
 				<Link href="mailto:support@lecoffre.io">
diff --git a/src/front/Components/Layouts/LoginCallbackCustomer/index.tsx b/src/front/Components/Layouts/LoginCallbackCustomer/index.tsx
index 3574f7af..2975bb26 100644
--- a/src/front/Components/Layouts/LoginCallbackCustomer/index.tsx
+++ b/src/front/Components/Layouts/LoginCallbackCustomer/index.tsx
@@ -49,13 +49,13 @@ export default function LoginCallBackCustomer() {
 		<DefaultDoubleSidePage title={"Login"} image={LandingImage}>
 			<div className={classes["root"]}>
 				<Image alt="coffre" src={CoffreIcon} />
-				<Typography typo={ITypo.H1}>
+				<Typography typo={ITypo.DISPLAY_LARGE}>
 					<div className={classes["title"]}>Connexion espace client</div>
 				</Typography>
 				<div className={classes["loader"]}>
 					<Loader />
 				</div>
-				<Typography typo={ITypo.P_18}>
+				<Typography typo={ITypo.TEXT_LG_REGULAR}>
 					<div className={classes["forget-password"]}>Vous n'arrivez pas à vous connecter ?</div>
 				</Typography>
 				<Link href="mailto:support@lecoffre.io">
diff --git a/src/front/Components/Layouts/LoginCustomer/PasswordForgotten/index.tsx b/src/front/Components/Layouts/LoginCustomer/PasswordForgotten/index.tsx
index e2b394d2..e170b447 100644
--- a/src/front/Components/Layouts/LoginCustomer/PasswordForgotten/index.tsx
+++ b/src/front/Components/Layouts/LoginCustomer/PasswordForgotten/index.tsx
@@ -15,7 +15,7 @@ export default function PasswordForgotten(props: IProps) {
 
 	return (
 		<div className={classes["root"]}>
-			<Typography typo={ITypo.H1}>
+			<Typography typo={ITypo.DISPLAY_LARGE}>
 				<div className={classes["title"]}>Réinitialisez votre mot de passe</div>
 			</Typography>
 			<Form className={classes["form"]} onSubmit={onSubmit}>
@@ -25,7 +25,7 @@ export default function PasswordForgotten(props: IProps) {
 					validationError={validationErrors.find((error) => error.property === "password")}
 					password
 				/>
-				<Typography typo={ITypo.CAPTION_14} color={ITypoColor.COLOR_NEUTRAL_500} className={classes["password_indication"]}>
+				<Typography typo={ITypo.TEXT_SM_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500} className={classes["password_indication"]}>
 					Au moins 8 caractères dont 1 majuscule, 1 minuscule et 1 chiffre.
 				</Typography>
 				<TextField
diff --git a/src/front/Components/Layouts/LoginCustomer/StepEmail/index.tsx b/src/front/Components/Layouts/LoginCustomer/StepEmail/index.tsx
index abe17e3d..a73b00bf 100644
--- a/src/front/Components/Layouts/LoginCustomer/StepEmail/index.tsx
+++ b/src/front/Components/Layouts/LoginCustomer/StepEmail/index.tsx
@@ -31,16 +31,18 @@ export default function StepEmail(props: IProps) {
 
 	return (
 		<div className={classes["root"]}>
-			<Typography typo={ITypo.H1}>
+			<Typography typo={ITypo.DISPLAY_LARGE}>
 				<div className={classes["title"]}>Identifiez-vous</div>
 			</Typography>
-			{/* <Typography typo={ITypo.P_16}>Pour accéder à votre espace de dépôt des documents, veuillez vous identifier.</Typography>
+			{/* <Typography typo={ITypo.TEXT_MD_REGULAR}>Pour accéder à votre espace de dépôt des documents, veuillez vous identifier.</Typography>
 			<Image alt="france-connect" src={franceConnectLogo} onClick={redirectCustomerOnConnection} className={classes["logo"]} />
 			<div className={classes["what_is_france_connect"]}>Qu'est ce que FranceConnect ?</div>
-			<Typography className={classes["or"]} typo={ITypo.P_16}>
+			<Typography className={classes["or"]} typo={ITypo.TEXT_MD_REGULAR}>
 				Ou
 			</Typography> */}
-			<Typography typo={ITypo.P_16}>Pour accéder à votre espace de dépôt des documents, veuillez vous identifier. </Typography>
+			<Typography typo={ITypo.TEXT_MD_REGULAR}>
+				Pour accéder à votre espace de dépôt des documents, veuillez vous identifier.{" "}
+			</Typography>
 			<Form className={classes["form"]} onSubmit={onSubmit}>
 				<TextField
 					placeholder="E-mail"
@@ -51,7 +53,7 @@ export default function StepEmail(props: IProps) {
 					Suivant
 				</Button>
 			</Form>
-			{/* <Typography typo={ITypo.P_18}>
+			{/* <Typography typo={ITypo.TEXT_LG_REGULAR}>
 					<div className={classes["forget-password"]}>Vous n'arrivez pas à vous connecter ?</div>
 				</Typography>
 				<Link href="mailto:support@lecoffre.io">
diff --git a/src/front/Components/Layouts/LoginCustomer/StepNewPassword/index.tsx b/src/front/Components/Layouts/LoginCustomer/StepNewPassword/index.tsx
index 5ebf7ff2..e322b7a6 100644
--- a/src/front/Components/Layouts/LoginCustomer/StepNewPassword/index.tsx
+++ b/src/front/Components/Layouts/LoginCustomer/StepNewPassword/index.tsx
@@ -15,7 +15,7 @@ export default function StepNewPassword(props: IProps) {
 
 	return (
 		<div className={classes["root"]}>
-			<Typography typo={ITypo.H1}>
+			<Typography typo={ITypo.DISPLAY_LARGE}>
 				<div className={classes["title"]}>Configurez votre mot de passe</div>
 			</Typography>
 			<Form className={classes["form"]} onSubmit={onSubmit}>
@@ -25,7 +25,7 @@ export default function StepNewPassword(props: IProps) {
 					validationError={validationErrors.find((error) => error.property === "password")}
 					password
 				/>
-				<Typography typo={ITypo.CAPTION_14} color={ITypoColor.COLOR_NEUTRAL_500} className={classes["password_indication"]}>
+				<Typography typo={ITypo.TEXT_SM_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500} className={classes["password_indication"]}>
 					Au moins 8 caractères dont 1 majuscule, 1 minuscule et 1 chiffre.
 				</Typography>
 				<TextField
diff --git a/src/front/Components/Layouts/LoginCustomer/StepPassword/index.tsx b/src/front/Components/Layouts/LoginCustomer/StepPassword/index.tsx
index 978dd97b..cb5bd181 100644
--- a/src/front/Components/Layouts/LoginCustomer/StepPassword/index.tsx
+++ b/src/front/Components/Layouts/LoginCustomer/StepPassword/index.tsx
@@ -31,7 +31,7 @@ export default function StepPassword(props: IProps) {
 
 	return (
 		<div className={classes["root"]}>
-			<Typography typo={ITypo.H1}>
+			<Typography typo={ITypo.DISPLAY_LARGE}>
 				<div className={classes["title"]}>Entrez votre mot de passe</div>
 			</Typography>
 			<Form className={classes["form"]} onSubmit={onSubmit}>
@@ -42,7 +42,7 @@ export default function StepPassword(props: IProps) {
 					password
 				/>
 				<div onClick={openModal}>
-					<Typography typo={ITypo.P_16} className={classes["forgot-password"]}>
+					<Typography typo={ITypo.TEXT_MD_REGULAR} className={classes["forgot-password"]}>
 						Mot de passe oublié ?
 					</Typography>
 				</div>
@@ -60,7 +60,7 @@ export default function StepPassword(props: IProps) {
 				confirmText={"Valider"}
 				cancelText={"Annuler"}>
 				<div className={classes["modal-content"]}>
-					<Typography typo={ITypo.P_16} className={classes["text"]}>
+					<Typography typo={ITypo.TEXT_MD_REGULAR} className={classes["text"]}>
 						Un code à usage unique va vous être envoyé par sms pour réinitialiser votre mot de passe.
 					</Typography>
 				</div>
diff --git a/src/front/Components/Layouts/LoginCustomer/StepTotp/index.tsx b/src/front/Components/Layouts/LoginCustomer/StepTotp/index.tsx
index f1fbb1f6..4b4355be 100644
--- a/src/front/Components/Layouts/LoginCustomer/StepTotp/index.tsx
+++ b/src/front/Components/Layouts/LoginCustomer/StepTotp/index.tsx
@@ -37,7 +37,7 @@ export default function StepTotp(props: IProps) {
 
 	return (
 		<div className={classes["root"]}>
-			<Typography typo={ITypo.H1}>
+			<Typography typo={ITypo.DISPLAY_LARGE}>
 				<div className={classes["title"]}>
 					Votre code a été envoyé par SMS au ** ** ** {partialPhoneNumber.replace(/(.{2})/g, "$1 ")}
 				</div>
@@ -53,7 +53,7 @@ export default function StepTotp(props: IProps) {
 				</Button>
 			</Form>
 			<div className={classes["ask-another-code"]}>
-				<Typography typo={ITypo.P_16}>Vous n'avez rien reçu ?</Typography>
+				<Typography typo={ITypo.TEXT_MD_REGULAR}>Vous n'avez rien reçu ?</Typography>
 				<Button
 					variant={EButtonVariant.LINE}
 					disabled={disableNewCodeButton}
@@ -63,9 +63,9 @@ export default function StepTotp(props: IProps) {
 					Envoyer un nouveau code
 				</Button>
 				{secondsBeforeNewCode !== 0 && (
-					<Typography typo={ITypo.P_SB_16} className={classes["new-code-timer"]}>
+					<Typography typo={ITypo.TEXT_MD_SEMIBOLD} className={classes["new-code-timer"]}>
 						Redemandez un code dans
-						<Typography typo={ITypo.P_16} color={ITypoColor.COLOR_SECONDARY_500}>
+						<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_SECONDARY_500}>
 							00:{secondsBeforeNewCode < 10 ? `0${secondsBeforeNewCode}` : secondsBeforeNewCode}
 						</Typography>
 					</Typography>
diff --git a/src/front/Components/Layouts/LoginCustomer/index.tsx b/src/front/Components/Layouts/LoginCustomer/index.tsx
index 6138b1f8..90c6a584 100644
--- a/src/front/Components/Layouts/LoginCustomer/index.tsx
+++ b/src/front/Components/Layouts/LoginCustomer/index.tsx
@@ -242,7 +242,7 @@ export default function Login() {
 				header={"Erreur"}
 				confirmText={"OK"}>
 				<div className={classes["modal-content"]}>
-					<Typography typo={ITypo.P_16} className={classes["text"]}>
+					<Typography typo={ITypo.TEXT_MD_REGULAR} className={classes["text"]}>
 						Une erreur est survenue lors de la connexion. Veuillez réessayer.
 					</Typography>
 				</div>
diff --git a/src/front/Components/Layouts/LoginHome/index.tsx b/src/front/Components/Layouts/LoginHome/index.tsx
index 2540670c..dfc32379 100644
--- a/src/front/Components/Layouts/LoginHome/index.tsx
+++ b/src/front/Components/Layouts/LoginHome/index.tsx
@@ -11,12 +11,12 @@ export default function LoginHome() {
 	return (
 		<DefaultDoubleSidePage title={"Login"} image={LandingImage}>
 			<div className={classes["root"]}>
-				<Typography typo={ITypo.H1}>
+				<Typography typo={ITypo.DISPLAY_LARGE}>
 					<div className={classes["title"]}>Connectez-vous à votre plateforme LEcoffre.io</div>
 				</Typography>
 				<div className={classes["content"]}>
 					<div className={classes["section"]}>
-						<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
+						<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_GENERIC_BLACK}>
 							Je suis un notaire / collaborateur
 						</Typography>
 						<Link href={Module.getInstance().get().modules.pages.Login.props.path}>
@@ -25,7 +25,7 @@ export default function LoginHome() {
 					</div>
 					<div className={classes["separator"]} />
 					<div className={classes["section"]}>
-						<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
+						<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_GENERIC_BLACK}>
 							Je suis un client
 						</Typography>
 						<Link href={Module.getInstance().get().modules.pages.CustomersLogin.props.path}>
@@ -34,7 +34,7 @@ export default function LoginHome() {
 					</div>
 				</div>
 				<div className={classes["bottom"]}>
-					<Typography typo={ITypo.P_18}>
+					<Typography typo={ITypo.TEXT_LG_REGULAR}>
 						<div className={classes["forget-password"]}>Vous n'arrivez pas à vous connecter ?</div>
 					</Typography>
 					<Link href="mailto:support@lecoffre.io">
diff --git a/src/front/Components/Layouts/MyAccount/index.tsx b/src/front/Components/Layouts/MyAccount/index.tsx
index 5c4b29fd..abe3d09b 100644
--- a/src/front/Components/Layouts/MyAccount/index.tsx
+++ b/src/front/Components/Layouts/MyAccount/index.tsx
@@ -27,12 +27,12 @@ export default class MyAccount extends Base<IProps, IState> {
 		return (
 			<DefaultTemplate title={"Mon compte"}>
 				<div className={classes["root"]}>
-					<Typography typo={ITypo.H1} color={ITypoColor.COLOR_GENERIC_BLACK} className={classes["title"]}>
+					<Typography typo={ITypo.DISPLAY_LARGE} color={ITypoColor.COLOR_GENERIC_BLACK} className={classes["title"]}>
 						Mon compte
 					</Typography>
 					<div className={classes["parts-container"]}>
 						<div className={classes["part"]}>
-							<Typography typo={ITypo.H2} color={ITypoColor.COLOR_GENERIC_BLACK}>
+							<Typography typo={ITypo.TITLE_H3} color={ITypoColor.COLOR_GENERIC_BLACK}>
 								Mes informations
 							</Typography>
 							<Form onSubmit={this.onFormSubmit}>
@@ -69,7 +69,7 @@ export default class MyAccount extends Base<IProps, IState> {
 							</Form>
 						</div>
 						<div className={classes["part"]}>
-							<Typography typo={ITypo.H2} color={ITypoColor.COLOR_GENERIC_BLACK}>
+							<Typography typo={ITypo.TITLE_H3} color={ITypoColor.COLOR_GENERIC_BLACK}>
 								Mon office
 							</Typography>
 							<Form onSubmit={this.onFormSubmit}>
diff --git a/src/front/Components/Layouts/Offices/OfficeInformations/index.tsx b/src/front/Components/Layouts/Offices/OfficeInformations/index.tsx
index 1e7e488b..c346a488 100644
--- a/src/front/Components/Layouts/Offices/OfficeInformations/index.tsx
+++ b/src/front/Components/Layouts/Offices/OfficeInformations/index.tsx
@@ -71,42 +71,44 @@ export default function OfficeInformations(props: IProps) {
 		(user: User) => (
 			<>
 				<div key={user.uid + "-" + officeUid} className={classes["user-line-desktop"]}>
-					<Typography typo={ITypo.P_16}>{user.contact?.last_name}</Typography>
-					<Typography typo={ITypo.P_16}>{user.contact?.first_name}</Typography>
-					<Typography typo={ITypo.P_16}>{user.contact?.email}</Typography>
-					<Typography typo={ITypo.P_16}>{user.contact?.phone_number}</Typography>
-					<Typography typo={ITypo.P_16}>{user.office_role ? user.office_role?.name : "Utilisateur restreint"}</Typography>
+					<Typography typo={ITypo.TEXT_MD_REGULAR}>{user.contact?.last_name}</Typography>
+					<Typography typo={ITypo.TEXT_MD_REGULAR}>{user.contact?.first_name}</Typography>
+					<Typography typo={ITypo.TEXT_MD_REGULAR}>{user.contact?.email}</Typography>
+					<Typography typo={ITypo.TEXT_MD_REGULAR}>{user.contact?.phone_number}</Typography>
+					<Typography typo={ITypo.TEXT_MD_REGULAR}>
+						{user.office_role ? user.office_role?.name : "Utilisateur restreint"}
+					</Typography>
 				</div>
 				<div key={user.uid} className={classes["user-line-mobile"]}>
 					<div className={classes["line"]}>
-						<Typography typo={ITypo.P_SB_16} color={ITypoColor.COLOR_GENERIC_BLACK}>
+						<Typography typo={ITypo.TEXT_MD_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK}>
 							Nom
 						</Typography>
-						<Typography typo={ITypo.P_16}>{user.contact?.last_name}</Typography>
+						<Typography typo={ITypo.TEXT_MD_REGULAR}>{user.contact?.last_name}</Typography>
 					</div>
 					<div className={classes["line"]}>
-						<Typography typo={ITypo.P_SB_16} color={ITypoColor.COLOR_GENERIC_BLACK}>
+						<Typography typo={ITypo.TEXT_MD_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK}>
 							Prénom
 						</Typography>
-						<Typography typo={ITypo.P_16}>{user.contact?.first_name}</Typography>
+						<Typography typo={ITypo.TEXT_MD_REGULAR}>{user.contact?.first_name}</Typography>
 					</div>
 					<div className={classes["line"]}>
-						<Typography typo={ITypo.P_SB_16} color={ITypoColor.COLOR_GENERIC_BLACK}>
+						<Typography typo={ITypo.TEXT_MD_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK}>
 							E-mail
 						</Typography>
-						<Typography typo={ITypo.P_16}>{user.contact?.email}</Typography>
+						<Typography typo={ITypo.TEXT_MD_REGULAR}>{user.contact?.email}</Typography>
 					</div>
 					<div className={classes["line"]}>
-						<Typography typo={ITypo.P_SB_16} color={ITypoColor.COLOR_GENERIC_BLACK}>
+						<Typography typo={ITypo.TEXT_MD_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK}>
 							Téléphone
 						</Typography>
-						<Typography typo={ITypo.P_16}>{user.contact?.phone_number}</Typography>
+						<Typography typo={ITypo.TEXT_MD_REGULAR}>{user.contact?.phone_number}</Typography>
 					</div>
 					<div className={classes["line"]}>
-						<Typography typo={ITypo.P_SB_16} color={ITypoColor.COLOR_GENERIC_BLACK}>
+						<Typography typo={ITypo.TEXT_MD_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK}>
 							Rôle
 						</Typography>
-						<Typography typo={ITypo.P_16}>{user.office_role ? user.office_role?.name : user.role?.name}</Typography>
+						<Typography typo={ITypo.TEXT_MD_REGULAR}>{user.office_role ? user.office_role?.name : user.role?.name}</Typography>
 					</div>
 				</div>
 			</>
@@ -118,30 +120,30 @@ export default function OfficeInformations(props: IProps) {
 		<DefaultOfficeDashboard mobileBackText={"Liste des utilisateurs"}>
 			<div className={classes["root"]}>
 				<div className={classes["header"]}>
-					<Typography typo={ITypo.H1Bis}>Office {officeSelected?.crpcen + " - " + officeSelected?.name}</Typography>
+					<Typography typo={ITypo.TITLE_H1}>Office {officeSelected?.crpcen + " - " + officeSelected?.name}</Typography>
 					<div className={classes["header-right"]}>
 						<div className={classes["round"]} />
-						<Typography typo={ITypo.P_16}>Office active</Typography>
+						<Typography typo={ITypo.TEXT_MD_REGULAR}>Office active</Typography>
 					</div>
 				</div>
 				<div className={classes["office-infos"]}>
 					<div className={classes["office-infos-row"]}>
-						<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.COLOR_NEUTRAL_500}>
+						<Typography typo={ITypo.TEXT_MD_GREY} color={ITypoColor.COLOR_NEUTRAL_500}>
 							CRPCEN
 						</Typography>
-						<Typography typo={ITypo.P_18}>{officeSelected?.crpcen}</Typography>
+						<Typography typo={ITypo.TEXT_LG_REGULAR}>{officeSelected?.crpcen}</Typography>
 					</div>
 					<div className={classes["office-infos-row"]}>
-						<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.COLOR_NEUTRAL_500}>
+						<Typography typo={ITypo.TEXT_MD_GREY} color={ITypoColor.COLOR_NEUTRAL_500}>
 							Dénomination
 						</Typography>
-						<Typography typo={ITypo.P_18}>{officeSelected?.name}</Typography>
+						<Typography typo={ITypo.TEXT_LG_REGULAR}>{officeSelected?.name}</Typography>
 					</div>
 					<div className={classes["office-infos-row"]}>
-						<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.COLOR_NEUTRAL_500}>
+						<Typography typo={ITypo.TEXT_MD_GREY} color={ITypoColor.COLOR_NEUTRAL_500}>
 							Addresse
 						</Typography>
-						<Typography typo={ITypo.P_18}>
+						<Typography typo={ITypo.TEXT_LG_REGULAR}>
 							{officeSelected?.address?.address} - {officeSelected?.address?.city} {officeSelected?.address?.zip_code}
 						</Typography>
 					</div>
@@ -149,23 +151,23 @@ export default function OfficeInformations(props: IProps) {
 				<div className={classes["office-users"]}>
 					<div className={classes["users"]}>
 						<div className={classes["title"]}>
-							<Typography typo={ITypo.H3}>Administrateurs</Typography>
+							<Typography typo={ITypo.TITLE_H5}>Administrateurs</Typography>
 						</div>
 						<div className={classes["users-container"]}>
 							<div className={classes["first-line"]}>
-								<Typography typo={ITypo.P_SB_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
+								<Typography typo={ITypo.TEXT_LG_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK}>
 									Nom
 								</Typography>
-								<Typography typo={ITypo.P_SB_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
+								<Typography typo={ITypo.TEXT_LG_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK}>
 									Prénom
 								</Typography>
-								<Typography typo={ITypo.P_SB_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
+								<Typography typo={ITypo.TEXT_LG_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK}>
 									E-mail
 								</Typography>
-								<Typography typo={ITypo.P_SB_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
+								<Typography typo={ITypo.TEXT_LG_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK}>
 									Téléphone
 								</Typography>
-								<Typography typo={ITypo.P_SB_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
+								<Typography typo={ITypo.TEXT_LG_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK}>
 									Rôle
 								</Typography>
 							</div>
@@ -176,23 +178,23 @@ export default function OfficeInformations(props: IProps) {
 					</div>
 					<div className={classes["users"]}>
 						<div className={classes["title"]}>
-							<Typography typo={ITypo.H3}>Collaborateurs</Typography>
+							<Typography typo={ITypo.TITLE_H5}>Collaborateurs</Typography>
 						</div>
 						<div className={classes["users-container"]}>
 							<div className={classes["first-line"]}>
-								<Typography typo={ITypo.P_SB_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
+								<Typography typo={ITypo.TEXT_LG_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK}>
 									Nom
 								</Typography>
-								<Typography typo={ITypo.P_SB_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
+								<Typography typo={ITypo.TEXT_LG_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK}>
 									Prénom
 								</Typography>
-								<Typography typo={ITypo.P_SB_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
+								<Typography typo={ITypo.TEXT_LG_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK}>
 									E-mail
 								</Typography>
-								<Typography typo={ITypo.P_SB_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
+								<Typography typo={ITypo.TEXT_LG_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK}>
 									Téléphone
 								</Typography>
-								<Typography typo={ITypo.P_SB_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
+								<Typography typo={ITypo.TEXT_LG_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK}>
 									Rôle
 								</Typography>
 							</div>
diff --git a/src/front/Components/Layouts/Offices/index.tsx b/src/front/Components/Layouts/Offices/index.tsx
index e5abae44..ca0c54f4 100644
--- a/src/front/Components/Layouts/Offices/index.tsx
+++ b/src/front/Components/Layouts/Offices/index.tsx
@@ -12,9 +12,9 @@ export default class Offices extends BasePage<IProps, IState> {
 			<DefaultOfficeDashboard title={"Dossier"} mobileBackText={"Liste des offices"}>
 				<div className={classes["root"]}>
 					<div className={classes["no-folder-selected"]}>
-						<Typography typo={ITypo.H1Bis}>Informations des offices</Typography>
+						<Typography typo={ITypo.TITLE_H1}>Informations des offices</Typography>
 						<div className={classes["choose-a-folder"]}>
-							<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_NEUTRAL_500}>
+							<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
 								Sélectionnez un office
 							</Typography>
 						</div>
diff --git a/src/front/Components/Layouts/PageNotFound/index.tsx b/src/front/Components/Layouts/PageNotFound/index.tsx
index 7b332088..4f9b7d64 100644
--- a/src/front/Components/Layouts/PageNotFound/index.tsx
+++ b/src/front/Components/Layouts/PageNotFound/index.tsx
@@ -14,8 +14,8 @@ export default class PageNotFound extends BasePage {
 			<DefaultDoubleSidePage title={"Project Not Found"} image={backgroundImage} type="background" showHeader>
 				<div className={classes["root"]}>
 					<div className={classes["content"]}>
-						<Typography typo={ITypo.H1}>Erreur 404</Typography>
-						<Typography typo={ITypo.P_18} className={classes["text"]}>
+						<Typography typo={ITypo.DISPLAY_LARGE}>Erreur 404</Typography>
+						<Typography typo={ITypo.TEXT_LG_REGULAR} className={classes["text"]}>
 							La page que vous recherchez semble introuvable.
 						</Typography>
 						<Link href={Module.getInstance().get().modules.pages.Home.props.path}>
diff --git a/src/front/Components/Layouts/Rib/index.tsx b/src/front/Components/Layouts/Rib/index.tsx
index 4e029146..0941c56b 100644
--- a/src/front/Components/Layouts/Rib/index.tsx
+++ b/src/front/Components/Layouts/Rib/index.tsx
@@ -94,7 +94,7 @@ export default function Rib() {
 	return (
 		<DefaultTemplate title={"RIB"}>
 			<div className={classes["root"]}>
-				<Typography typo={ITypo.H1} color={ITypoColor.COLOR_GENERIC_BLACK} className={classes["title"]}>
+				<Typography typo={ITypo.DISPLAY_LARGE} color={ITypoColor.COLOR_GENERIC_BLACK} className={classes["title"]}>
 					RIB de l'office
 				</Typography>
 				{isLoading && (
@@ -108,7 +108,7 @@ export default function Rib() {
 					<>
 						<div className={classes["document-container"]}>
 							<div>
-								<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_NEUTRAL_500}>
+								<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
 									Aucun RIB n'a été déposé pour cet office
 								</Typography>
 							</div>
@@ -159,10 +159,10 @@ export default function Rib() {
 					closeBtn
 					cancelText={"Annuler"}
 					confirmText={"Supprimer"}>
-					<Typography typo={ITypo.H1} color={ITypoColor.COLOR_GENERIC_BLACK} className={classes["title"]}>
+					<Typography typo={ITypo.DISPLAY_LARGE} color={ITypoColor.COLOR_GENERIC_BLACK} className={classes["title"]}>
 						Supprimer le RIB
 					</Typography>
-					<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_NEUTRAL_500}>
+					<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
 						Voulez-vous vraiment supprimer le RIB de votre office ?
 					</Typography>
 				</Confirm>
diff --git a/src/front/Components/Layouts/Roles/RolesCreate/index.tsx b/src/front/Components/Layouts/Roles/RolesCreate/index.tsx
index 450a3caa..3b0880f9 100644
--- a/src/front/Components/Layouts/Roles/RolesCreate/index.tsx
+++ b/src/front/Components/Layouts/Roles/RolesCreate/index.tsx
@@ -91,7 +91,7 @@ export default function RolesCreate(props: IProps) {
 			<DefaultRolesDashboard mobileBackText={"Liste des rôles"} hasBackArrow title="Créer un rôle">
 				<div className={classes["root"]}>
 					<div className={classes["header"]}>
-						<Typography typo={ITypo.H1Bis}>Créer un rôle</Typography>
+						<Typography typo={ITypo.TITLE_H1}>Créer un rôle</Typography>
 					</div>
 					<Form onSubmit={onSubmitHandler} className={classes["form-container"]} onFieldChange={onFieldChange}>
 						<TextField
@@ -115,7 +115,7 @@ export default function RolesCreate(props: IProps) {
 						cancelText={"Annuler"}
 						confirmText={"Quitter"}>
 						<div className={classes["modal-content"]}>
-							<Typography typo={ITypo.P_16} className={classes["text"]}>
+							<Typography typo={ITypo.TEXT_MD_REGULAR} className={classes["text"]}>
 								Si vous quittez, toutes les modifications que vous avez effectuées ne seront pas enregistrées.
 							</Typography>
 						</div>
diff --git a/src/front/Components/Layouts/Roles/RolesInformations/index.tsx b/src/front/Components/Layouts/Roles/RolesInformations/index.tsx
index 14076403..584c4d7a 100644
--- a/src/front/Components/Layouts/Roles/RolesInformations/index.tsx
+++ b/src/front/Components/Layouts/Roles/RolesInformations/index.tsx
@@ -121,14 +121,14 @@ export default function RolesInformations() {
 		<DefaultRoleDashboard mobileBackText={"Liste des rôles"}>
 			<div className={classes["root"]}>
 				<div className={classes["header"]}>
-					<Typography typo={ITypo.H1Bis}>Gestion des rôles</Typography>
+					<Typography typo={ITypo.TITLE_H1}>Gestion des rôles</Typography>
 				</div>
 				<div className={classes["subtitle"]}>
-					<Typography typo={ITypo.H3}>{roleSelected?.name}</Typography>
+					<Typography typo={ITypo.TITLE_H5}>{roleSelected?.name}</Typography>
 				</div>
 				<div className={classes["rights-container"]}>
 					<div className={classes["rights-header"]}>
-						<Typography typo={ITypo.P_SB_18}>Modifier les droits</Typography>
+						<Typography typo={ITypo.TEXT_LG_SEMIBOLD}>Modifier les droits</Typography>
 					</div>
 					<div className={classes["select-all-container"]}>
 						<CheckBox
@@ -166,7 +166,7 @@ export default function RolesInformations() {
 					confirmText={"Valider"}
 					cancelText={"Annuler"}>
 					<div className={classes["modal-content"]}>
-						<Typography typo={ITypo.P_16} className={classes["text"]}>
+						<Typography typo={ITypo.TEXT_MD_REGULAR} className={classes["text"]}>
 							En enregistrant vous modifiez les droits des rôles.
 						</Typography>
 					</div>
diff --git a/src/front/Components/Layouts/Roles/index.tsx b/src/front/Components/Layouts/Roles/index.tsx
index 0c04595f..13534202 100644
--- a/src/front/Components/Layouts/Roles/index.tsx
+++ b/src/front/Components/Layouts/Roles/index.tsx
@@ -12,9 +12,9 @@ export default class Collaborators extends BasePage<IProps, IState> {
 			<DefaultRoleDashboard mobileBackText={"Liste des rôles"}>
 				<div className={classes["root"]}>
 					<div className={classes["no-role-selected"]}>
-						<Typography typo={ITypo.H1Bis}>Gestion des rôles</Typography>
+						<Typography typo={ITypo.TITLE_H1}>Gestion des rôles</Typography>
 						<div className={classes["choose-a-role"]}>
-							<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_NEUTRAL_500}>
+							<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
 								Sélectionnez un rôle
 							</Typography>
 						</div>
diff --git a/src/front/Components/Layouts/SelectFolder/index.tsx b/src/front/Components/Layouts/SelectFolder/index.tsx
index 8fc86c7f..3a7fd543 100644
--- a/src/front/Components/Layouts/SelectFolder/index.tsx
+++ b/src/front/Components/Layouts/SelectFolder/index.tsx
@@ -58,7 +58,7 @@ export default function SelectFolder() {
 			<div className={classes["root"]}>
 				<div className={classes["select-folder-container"]}>
 					<div className={classes["title"]}>
-						<Typography typo={ITypo.H1}>Vos dossiers</Typography>
+						<Typography typo={ITypo.DISPLAY_LARGE}>Vos dossiers</Typography>
 					</div>
 					<div className={classes["folders-container"]}>
 						<BlockList
diff --git a/src/front/Components/Layouts/Subscription/Components/SubscribeCheckoutTicket/index.tsx b/src/front/Components/Layouts/Subscription/Components/SubscribeCheckoutTicket/index.tsx
index 1b4467f5..3b585053 100644
--- a/src/front/Components/Layouts/Subscription/Components/SubscribeCheckoutTicket/index.tsx
+++ b/src/front/Components/Layouts/Subscription/Components/SubscribeCheckoutTicket/index.tsx
@@ -72,7 +72,7 @@ export default function SubscribeCheckoutTicket(props: IProps) {
 		<div className={classes["root"]}>
 			<div className={classes["container"]}>
 				<div className={classes["forfeit-type"]}>
-					<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
+					<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_GENERIC_BLACK}>
 						{forfeitType === EForfeitType.standard ? "Forfait standard" : "Forfait illimité"}
 					</Typography>
 				</div>
@@ -84,7 +84,7 @@ export default function SubscribeCheckoutTicket(props: IProps) {
 						onChange={handleFrequencyChange}
 						defaultChecked={paymentFrequency === EPaymentFrequencyFront.yearly}
 						disabled={props.disableInputs}>
-						<Typography typo={ITypo.P_ERR_18}>Annuel</Typography>
+						<Typography typo={ITypo.TEXT_LG_ERROR}>Annuel</Typography>
 					</RadioBox>
 					<RadioBox
 						name="paymentFrequency"
@@ -92,18 +92,18 @@ export default function SubscribeCheckoutTicket(props: IProps) {
 						onChange={handleFrequencyChange}
 						defaultChecked={paymentFrequency === EPaymentFrequencyFront.monthly}
 						disabled={props.disableInputs}>
-						<Typography typo={ITypo.P_ERR_18}>Mensuel</Typography>
+						<Typography typo={ITypo.TEXT_LG_ERROR}>Mensuel</Typography>
 					</RadioBox>
 				</div>
 				<div className={classes["separator"]} />
 				<div className={classes["container-line"]}>
 					<div className={classes["line"]}>
 						<div className={classes["line-sub-container"]}>
-							<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
+							<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_GENERIC_BLACK}>
 								{forfeitType === EForfeitType.standard ? "Plan individuel" : "Plan illimité"}
 							</Typography>
 							{paymentFrequency === EPaymentFrequencyFront.yearly && (
-								<Typography typo={ITypo.CAPTION_14_SB} color={ITypoColor.COLOR_GENERIC_BLACK}>
+								<Typography typo={ITypo.TEXT_SM_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK}>
 									{formatFloat(
 										forfeitType === EForfeitType.standard
 											? forfeitsPrices[EForfeitType.standard]
@@ -115,11 +115,14 @@ export default function SubscribeCheckoutTicket(props: IProps) {
 						</div>
 
 						<div className={classes["line-sub-container"]}>
-							<Typography typo={ITypo.P_SB_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
+							<Typography typo={ITypo.TEXT_LG_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK}>
 								{totalPlan}&nbsp;€
 							</Typography>
 							{paymentFrequency === EPaymentFrequencyFront.yearly && (
-								<Typography typo={ITypo.P_16} color={ITypoColor.COLOR_GENERIC_BLACK} className={classes["stroked-price"]}>
+								<Typography
+									typo={ITypo.TEXT_MD_REGULAR}
+									color={ITypoColor.COLOR_GENERIC_BLACK}
+									className={classes["stroked-price"]}>
 									{formatFloat(
 										forfeitType === EForfeitType.standard
 											? forfeitsPrices[EForfeitType.standard] * multiplier
@@ -133,15 +136,15 @@ export default function SubscribeCheckoutTicket(props: IProps) {
 					{forfeitType === EForfeitType.standard && (
 						<div className={classes["line"]}>
 							<div className={classes["line-sub-container"]}>
-								<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
+								<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_GENERIC_BLACK}>
 									{numberOfCollaborators} collaborateurs
 								</Typography>
-								<Typography typo={ITypo.CAPTION_14_SB} color={ITypoColor.COLOR_GENERIC_BLACK}>
+								<Typography typo={ITypo.TEXT_SM_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK}>
 									{formatFloat(collaboratorPrice)}&nbsp;€ x {numberOfCollaborators}{" "}
 									{paymentFrequency === EPaymentFrequencyFront.yearly && "x 12"}
 								</Typography>
 							</div>
-							<Typography typo={ITypo.P_SB_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
+							<Typography typo={ITypo.TEXT_LG_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK}>
 								{formatFloat(totalCollaborator)}&nbsp;€
 							</Typography>
 						</div>
@@ -152,19 +155,19 @@ export default function SubscribeCheckoutTicket(props: IProps) {
 						<div className={classes["separator"]} />
 						<div className={classnames(classes["container-line"], classes["container-tight"])}>
 							<div className={classes["line"]}>
-								<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
+								<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_GENERIC_BLACK}>
 									Total HT
 								</Typography>
-								<Typography typo={ITypo.P_SB_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
+								<Typography typo={ITypo.TEXT_LG_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK}>
 									{formatFloat(totalCollaborator + totalPlan)}
 									&nbsp;€
 								</Typography>
 							</div>
 							<div className={classes["line"]}>
-								<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
+								<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_GENERIC_BLACK}>
 									TVA 20%
 								</Typography>
-								<Typography typo={ITypo.P_SB_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
+								<Typography typo={ITypo.TEXT_LG_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK}>
 									{formatFloat((totalCollaborator + totalPlan) * 0.2)}
 									&nbsp;€
 								</Typography>
@@ -176,19 +179,19 @@ export default function SubscribeCheckoutTicket(props: IProps) {
 				<div className={classnames(classes["container-line"], classes["container-tight"])}>
 					{forfeitType === EForfeitType.unlimited && (
 						<div className={classes["line"]}>
-							<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
+							<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_GENERIC_BLACK}>
 								TVA 20%
 							</Typography>
-							<Typography typo={ITypo.P_SB_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
+							<Typography typo={ITypo.TEXT_LG_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK}>
 								{formatFloat((totalCollaborator + totalPlan) * 0.2)}&nbsp;€
 							</Typography>
 						</div>
 					)}
 					<div className={classes["line"]}>
-						<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
+						<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_GENERIC_BLACK}>
 							Total TTC
 						</Typography>
-						<Typography typo={ITypo.P_SB_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
+						<Typography typo={ITypo.TEXT_LG_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK}>
 							{formatFloat((totalCollaborator + totalPlan) * 1.2)}
 							&nbsp;€
 						</Typography>
diff --git a/src/front/Components/Layouts/Subscription/Components/SubscribeIllimityComponent/index.tsx b/src/front/Components/Layouts/Subscription/Components/SubscribeIllimityComponent/index.tsx
index a1b11d61..1436152f 100644
--- a/src/front/Components/Layouts/Subscription/Components/SubscribeIllimityComponent/index.tsx
+++ b/src/front/Components/Layouts/Subscription/Components/SubscribeIllimityComponent/index.tsx
@@ -62,33 +62,33 @@ export default function SubscribeIllimityComponent({ hasNavTab = true }: IProps)
 								]}
 							/>
 						)}
-						<Typography typo={ITypo.H2} color={ITypoColor.COLOR_GENERIC_BLACK}>
+						<Typography typo={ITypo.TITLE_H3} color={ITypoColor.COLOR_GENERIC_BLACK}>
 							Nombre de collaborateurs illimité
 						</Typography>
 						<div className={classes["infos-container"]}>
 							<div className={classes["line"]}>
 								<Check color={ITypoColor.COLOR_NEUTRAL_500} />
-								<Typography typo={ITypo.P_16} color={ITypoColor.COLOR_NEUTRAL_500}>
+								<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
 									Accompagnement facilité : profitez d'un onboarding individualisé, où nous vous guidons pour une prise en
 									main optimale de l'application
 								</Typography>
 							</div>
 							<div className={classes["line"]}>
 								<Check color={ITypoColor.COLOR_NEUTRAL_500} />
-								<Typography typo={ITypo.P_16} color={ITypoColor.COLOR_NEUTRAL_500}>
+								<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
 									Support technique : notre équipe support est disponible pour vous assister en cas d’incident
 								</Typography>
 							</div>
 							<div className={classes["line"]}>
 								<Check color={ITypoColor.COLOR_NEUTRAL_500} />
-								<Typography typo={ITypo.P_16} color={ITypoColor.COLOR_NEUTRAL_500}>
+								<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
 									Mises à jour régulières : bénéficiez de mises à jour fréquentes pour profiter des dernières
 									fonctionnalités, améliorations de sécurité et performances optimisées
 								</Typography>
 							</div>
 							<div className={classes["line"]}>
 								<Check color={ITypoColor.COLOR_GENERIC_BLACK} />
-								<Typography typo={ITypo.P_16} color={ITypoColor.COLOR_GENERIC_BLACK}>
+								<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_GENERIC_BLACK}>
 									Sans limite d'utilisateurs
 								</Typography>
 							</div>
@@ -114,22 +114,22 @@ export default function SubscribeIllimityComponent({ hasNavTab = true }: IProps)
 						value={EPaymentFrequency.yearly.toString()}
 						onChange={handleFrequencyChange}
 						defaultChecked={paymentFrequency === EPaymentFrequency.yearly}>
-						<Typography typo={ITypo.P_ERR_18}>Annuel</Typography>
+						<Typography typo={ITypo.TEXT_LG_ERROR}>Annuel</Typography>
 					</RadioBox>
 					<RadioBox
 						name="paymentFrequencyInSubscription"
 						value={EPaymentFrequency.monthly.toString()}
 						onChange={handleFrequencyChange}
 						defaultChecked={paymentFrequency === EPaymentFrequency.monthly}>
-						<Typography typo={ITypo.P_ERR_18}>Mensuel</Typography>
+						<Typography typo={ITypo.TEXT_LG_ERROR}>Mensuel</Typography>
 					</RadioBox>
 				</div>
 				<div className={classes["separator"]} />
 				<div className={classes["container-line"]}>
-					<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
+					<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_GENERIC_BLACK}>
 						Total TTC
 					</Typography>
-					<Typography typo={ITypo.P_SB_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
+					<Typography typo={ITypo.TEXT_LG_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK}>
 						{formatFloat(forfeitsPrices[EForfeitType.unlimited] * 1.2 * multiplierToUse)}
 						&nbsp;€
 					</Typography>
diff --git a/src/front/Components/Layouts/Subscription/Components/SubscribeStandardComponent/index.tsx b/src/front/Components/Layouts/Subscription/Components/SubscribeStandardComponent/index.tsx
index 352f4c51..2d63c48d 100644
--- a/src/front/Components/Layouts/Subscription/Components/SubscribeStandardComponent/index.tsx
+++ b/src/front/Components/Layouts/Subscription/Components/SubscribeStandardComponent/index.tsx
@@ -54,27 +54,27 @@ export default function SubscribeStandardComponent({ hasNavTab = true }: IProps)
 								]}
 							/>
 						)}
-						<Typography typo={ITypo.H2} color={ITypoColor.COLOR_GENERIC_BLACK}>
+						<Typography typo={ITypo.TITLE_H3} color={ITypoColor.COLOR_GENERIC_BLACK}>
 							Choisissez le nombre de collaborateurs pour votre abonnement
 						</Typography>
 						<NumberPicker defaultValue={1} onChange={handleCollaboratorsChange} min={1} />
 						<div className={classes["infos-container"]}>
 							<div className={classes["line"]}>
 								<Check color={ITypoColor.COLOR_NEUTRAL_500} />
-								<Typography typo={ITypo.P_16} color={ITypoColor.COLOR_NEUTRAL_500}>
+								<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
 									Accompagnement facilité : profitez d'un onboarding individualisé, où nous vous guidons pour une prise en
 									main optimale de l'application
 								</Typography>
 							</div>
 							<div className={classes["line"]}>
 								<Check color={ITypoColor.COLOR_NEUTRAL_500} />
-								<Typography typo={ITypo.P_16} color={ITypoColor.COLOR_NEUTRAL_500}>
+								<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
 									Support technique : notre équipe support est disponible pour vous assister en cas d’incident
 								</Typography>
 							</div>
 							<div className={classes["line"]}>
 								<Check color={ITypoColor.COLOR_NEUTRAL_500} />
-								<Typography typo={ITypo.P_16} color={ITypoColor.COLOR_NEUTRAL_500}>
+								<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
 									Mises à jour régulières : bénéficiez de mises à jour fréquentes pour profiter des dernières
 									fonctionnalités, améliorations de sécurité et performances optimisées
 								</Typography>
@@ -105,22 +105,22 @@ export default function SubscribeStandardComponent({ hasNavTab = true }: IProps)
 						value={EPaymentFrequency.yearly.toString()}
 						onChange={handleFrequencyChange}
 						defaultChecked={paymentFrequency === EPaymentFrequency.yearly}>
-						<Typography typo={ITypo.P_ERR_18}>Annuel</Typography>
+						<Typography typo={ITypo.TEXT_LG_ERROR}>Annuel</Typography>
 					</RadioBox>
 					<RadioBox
 						name="paymentFrequencyInSubscription"
 						value={EPaymentFrequency.monthly.toString()}
 						onChange={handleFrequencyChange}
 						defaultChecked={paymentFrequency === EPaymentFrequency.monthly}>
-						<Typography typo={ITypo.P_ERR_18}>Mensuel</Typography>
+						<Typography typo={ITypo.TEXT_LG_ERROR}>Mensuel</Typography>
 					</RadioBox>
 				</div>
 				<div className={classes["separator"]} />
 				<div className={classes["container-line"]}>
-					<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
+					<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_GENERIC_BLACK}>
 						Total TTC
 					</Typography>
-					<Typography typo={ITypo.P_SB_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
+					<Typography typo={ITypo.TEXT_LG_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK}>
 						{formatFloat(
 							(forfeitsPrices[EForfeitType.standard] * multiplierToUse +
 								collaboratorPrice * numberOfCollaborators * multiplier) *
diff --git a/src/front/Components/Layouts/Subscription/Components/SubscriptionClientInfos/index.tsx b/src/front/Components/Layouts/Subscription/Components/SubscriptionClientInfos/index.tsx
index 0506f82b..8c34e624 100644
--- a/src/front/Components/Layouts/Subscription/Components/SubscriptionClientInfos/index.tsx
+++ b/src/front/Components/Layouts/Subscription/Components/SubscriptionClientInfos/index.tsx
@@ -10,16 +10,16 @@ export default function SubscriptionClientInfos(props: IProps) {
 	const { customer } = props;
 	return (
 		<div className={classes["root"]}>
-			<Typography typo={ITypo.P_SB_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
+			<Typography typo={ITypo.TEXT_LG_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK}>
 				Informations client
 			</Typography>
-			<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
+			<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_GENERIC_BLACK}>
 				{customer.email}
 			</Typography>
-			{/* <Typography typo={ITypo.P_SB_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
+			{/* <Typography typo={ITypo.TEXT_LG_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK}>
 				Adresse de facturation
 			</Typography> */}
-			<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
+			<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_GENERIC_BLACK}>
 				{customer.name} <br />
 				{/* 23 rue taitbout,
 				<br />
diff --git a/src/front/Components/Layouts/Subscription/Manage/SubscriptionManageCollaborators/index.tsx b/src/front/Components/Layouts/Subscription/Manage/SubscriptionManageCollaborators/index.tsx
index 5bed2fae..a1456bd7 100644
--- a/src/front/Components/Layouts/Subscription/Manage/SubscriptionManageCollaborators/index.tsx
+++ b/src/front/Components/Layouts/Subscription/Manage/SubscriptionManageCollaborators/index.tsx
@@ -83,10 +83,10 @@ export default function SubscriptionManageCollaborators() {
 		<DefaultTemplate title="Nouvelle souscription" hasBackArrow>
 			{subscription && jwt && (
 				<div className={classes["root"]}>
-					<Typography typo={ITypo.H2} color={ITypoColor.COLOR_GENERIC_BLACK}>
+					<Typography typo={ITypo.TITLE_H3} color={ITypoColor.COLOR_GENERIC_BLACK}>
 						Choisissez les collaborateurs pour votre abonnement
 					</Typography>
-					<Typography typo={ITypo.P_SB_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
+					<Typography typo={ITypo.TEXT_LG_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK}>
 						{subscription.nb_seats} sièges disponibles
 					</Typography>
 					<Form onSubmit={handleSubmit}>
@@ -109,7 +109,7 @@ export default function SubscriptionManageCollaborators() {
 								/>
 							))}
 						</div>
-						<Typography typo={ITypo.CAPTION_14} color={ITypoColor.COLOR_GENERIC_BLACK}>
+						<Typography typo={ITypo.TEXT_SM_REGULAR} color={ITypoColor.COLOR_GENERIC_BLACK}>
 							{selectedCollaborators.length} collaborateurs sélectionnés
 						</Typography>
 						<div className={classes["buttons-container"]}>
diff --git a/src/front/Components/Layouts/Subscription/SubscriptionError/index.tsx b/src/front/Components/Layouts/Subscription/SubscriptionError/index.tsx
index 4799aeb8..b3165849 100644
--- a/src/front/Components/Layouts/Subscription/SubscriptionError/index.tsx
+++ b/src/front/Components/Layouts/Subscription/SubscriptionError/index.tsx
@@ -45,7 +45,7 @@ export default function SubscriptionError() {
 				<div className={classes["root"]}>
 					<div className={classes["left"]}>
 						<div className={classes["title"]}>
-							<Typography typo={ITypo.H1} color={ITypoColor.COLOR_GENERIC_BLACK}>
+							<Typography typo={ITypo.DISPLAY_LARGE} color={ITypoColor.COLOR_GENERIC_BLACK}>
 								Paiement échoué
 							</Typography>
 						</div>
diff --git a/src/front/Components/Layouts/Subscription/SubscriptionFacturation/index.tsx b/src/front/Components/Layouts/Subscription/SubscriptionFacturation/index.tsx
index e66e69a0..cbcecbfb 100644
--- a/src/front/Components/Layouts/Subscription/SubscriptionFacturation/index.tsx
+++ b/src/front/Components/Layouts/Subscription/SubscriptionFacturation/index.tsx
@@ -95,12 +95,12 @@ export default function SubscriptionFacturation() {
 				<div className={classes["root"]}>
 					<div className={classes["top-container"]}>
 						<div className={classes["top-container-title"]}>
-							<Typography typo={ITypo.H1} color={ITypoColor.COLOR_GENERIC_BLACK}>
+							<Typography typo={ITypo.DISPLAY_LARGE} color={ITypoColor.COLOR_GENERIC_BLACK}>
 								Abonnement
 							</Typography>
 						</div>
 						<div className={classes["sub-title"]}>
-							<Typography typo={ITypo.P_16} color={ITypoColor.COLOR_GENERIC_BLACK}>
+							<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_GENERIC_BLACK}>
 								Nos forfaits sont adaptés à la taille de votre office
 							</Typography>
 						</div>
@@ -111,23 +111,23 @@ export default function SubscriptionFacturation() {
 							data-inactive={subscription.type === "STANDARD" ? EForfeitType.standard : EForfeitType.unlimited}>
 							<div className={classes["forfeit-header"]}>
 								<div className={classes["left"]}>
-									<Typography typo={ITypo.P_SB_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
+									<Typography typo={ITypo.TEXT_LG_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK}>
 										Forfait standard
 									</Typography>
-									<Typography typo={ITypo.P_16} color={ITypoColor.COLOR_SECONDARY_500}>
+									<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_SECONDARY_500}>
 										Plan par utilisateur
 									</Typography>
 								</div>
 								{subscription.type === "STANDARD" && !cancelAt && (
 									<div className={classes["active-plan"]}>
-										<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_SUCCESS_600}>
+										<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_SUCCESS_600}>
 											Plan actif
 										</Typography>
 									</div>
 								)}
 								{subscription.type === "STANDARD" && cancelAt && (
 									<div className={classes["active-plan"]}>
-										<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_SUCCESS_600}>
+										<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_SUCCESS_600}>
 											Plan actif jusqu'au {cancelAt.toLocaleDateString()}
 										</Typography>
 									</div>
@@ -135,14 +135,14 @@ export default function SubscriptionFacturation() {
 							</div>
 							<div className={classes["separator"]} />
 							<div className={classes["price-container"]}>
-								<Typography typo={ITypo.H1} color={ITypoColor.COLOR_GENERIC_BLACK} className={classes["price"]}>
+								<Typography typo={ITypo.DISPLAY_LARGE} color={ITypoColor.COLOR_GENERIC_BLACK} className={classes["price"]}>
 									{forfeitsPrices[EForfeitType.standard]}€
-									<Typography typo={ITypo.H2} color={ITypoColor.COLOR_GENERIC_BLACK}>
+									<Typography typo={ITypo.TITLE_H3} color={ITypoColor.COLOR_GENERIC_BLACK}>
 										&nbsp;HT&nbsp;
 									</Typography>
 									/ mois
 								</Typography>
-								<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
+								<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_GENERIC_BLACK}>
 									+ {collaboratorPrice}€ / collaborateur / mois
 								</Typography>
 							</div>
@@ -182,23 +182,23 @@ export default function SubscriptionFacturation() {
 							data-inactive={subscription.type === "STANDARD" ? EForfeitType.standard : EForfeitType.unlimited}>
 							<div className={classes["forfeit-header"]}>
 								<div className={classes["left"]}>
-									<Typography typo={ITypo.P_SB_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
+									<Typography typo={ITypo.TEXT_LG_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK}>
 										Forfait illimité
 									</Typography>
-									<Typography typo={ITypo.P_16} color={ITypoColor.COLOR_SECONDARY_500}>
+									<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_SECONDARY_500}>
 										Plan par office
 									</Typography>
 								</div>
 								{subscription.type === "UNLIMITED" && !cancelAt && (
 									<div className={classes["active-plan"]}>
-										<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_SUCCESS_600}>
+										<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_SUCCESS_600}>
 											Plan actif
 										</Typography>
 									</div>
 								)}
 								{subscription.type === "UNLIMITED" && cancelAt && (
 									<div className={classes["active-plan"]}>
-										<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_SUCCESS_600}>
+										<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_SUCCESS_600}>
 											Plan actif jusqu'au {cancelAt.toLocaleDateString()}
 										</Typography>
 									</div>
@@ -206,14 +206,14 @@ export default function SubscriptionFacturation() {
 							</div>
 							<div className={classes["separator"]} />
 							<div className={classes["price-container"]}>
-								<Typography typo={ITypo.H1} color={ITypoColor.COLOR_GENERIC_BLACK} className={classes["price"]}>
+								<Typography typo={ITypo.DISPLAY_LARGE} color={ITypoColor.COLOR_GENERIC_BLACK} className={classes["price"]}>
 									{forfeitsPrices[EForfeitType.unlimited]}€
-									<Typography typo={ITypo.H2} color={ITypoColor.COLOR_GENERIC_BLACK}>
+									<Typography typo={ITypo.TITLE_H3} color={ITypoColor.COLOR_GENERIC_BLACK}>
 										&nbsp;HT&nbsp;
 									</Typography>
 									/ mois
 								</Typography>
-								<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
+								<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_GENERIC_BLACK}>
 									Sans limite de collaborateurs
 								</Typography>
 							</div>
@@ -237,12 +237,12 @@ export default function SubscriptionFacturation() {
 					<div className={classes["actions-container"]}>
 						<Button variant={EButtonVariant.LINE} onClick={cancelOrReactivateSubscription}>
 							{!cancelAt && (
-								<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_ERROR_600}>
+								<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_ERROR_600}>
 									Arrêter l'abonnement
 								</Typography>
 							)}
 							{cancelAt && (
-								<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_ERROR_600}>
+								<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_ERROR_600}>
 									Renouveler l'abonnement
 								</Typography>
 							)}
@@ -260,7 +260,7 @@ export default function SubscriptionFacturation() {
 				confirmText={"Confirmer"}
 				cancelText={"Annuler"}>
 				<div className={classes["modal-content"]}>
-					<Typography typo={ITypo.P_16} className={classes["text"]}>
+					<Typography typo={ITypo.TEXT_MD_REGULAR} className={classes["text"]}>
 						Avant de confirmer, veuillez prendre note des conséquences <br />
 						suivantes :
 						<br />
@@ -304,7 +304,7 @@ export default function SubscriptionFacturation() {
 				confirmText={"Continuer"}
 				cancelText={"Annuler"}>
 				<div className={classes["modal-content"]}>
-					<Typography typo={ITypo.P_16} color={ITypoColor.COLOR_GENERIC_BLACK}>
+					<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_GENERIC_BLACK}>
 						En cas de suppression de sièges, les derniers comptes ajoutés seront concernés. Vous pouvez réattribuer les sièges
 						que vous avez dans votre page sur la page "Gérer mes attributions”.
 					</Typography>
diff --git a/src/front/Components/Layouts/Subscription/SubscriptionInvite/index.tsx b/src/front/Components/Layouts/Subscription/SubscriptionInvite/index.tsx
index 1b50b870..535af14c 100644
--- a/src/front/Components/Layouts/Subscription/SubscriptionInvite/index.tsx
+++ b/src/front/Components/Layouts/Subscription/SubscriptionInvite/index.tsx
@@ -78,16 +78,16 @@ export default function SubscriptionInvite() {
 		<DefaultTemplate title="Nouvelle souscription" hasBackArrow>
 			<div className={classes["root"]}>
 				<div className={classes["container"]}>
-					<Typography typo={ITypo.H1} color={ITypoColor.COLOR_GENERIC_BLACK}>
+					<Typography typo={ITypo.DISPLAY_LARGE} color={ITypoColor.COLOR_GENERIC_BLACK}>
 						Inviter vos collaborateurs
 					</Typography>
 					{!isNaN(nbOfCollaborators) && (
-						<Typography typo={ITypo.P_SB_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
+						<Typography typo={ITypo.TEXT_LG_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK}>
 							{nbOfCollaborators} collaborateurs à inviter
 						</Typography>
 					)}
 					{isNaN(nbOfCollaborators) && (
-						<Typography typo={ITypo.P_SB_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
+						<Typography typo={ITypo.TEXT_LG_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK}>
 							Collaborateurs illimités
 						</Typography>
 					)}
diff --git a/src/front/Components/Layouts/Subscription/SubscriptionNew/index.tsx b/src/front/Components/Layouts/Subscription/SubscriptionNew/index.tsx
index a7d91351..0fb0f214 100644
--- a/src/front/Components/Layouts/Subscription/SubscriptionNew/index.tsx
+++ b/src/front/Components/Layouts/Subscription/SubscriptionNew/index.tsx
@@ -13,12 +13,12 @@ export default function SubscriptionNew() {
 			<div className={classes["root"]}>
 				<div className={classes["top-container"]}>
 					<div className={classes["top-container-title"]}>
-						<Typography typo={ITypo.H1} color={ITypoColor.COLOR_GENERIC_BLACK}>
+						<Typography typo={ITypo.DISPLAY_LARGE} color={ITypoColor.COLOR_GENERIC_BLACK}>
 							Tarifs
 						</Typography>
 					</div>
 					<div className={classes["sub-title"]}>
-						<Typography typo={ITypo.P_16} color={ITypoColor.COLOR_GENERIC_BLACK}>
+						<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_GENERIC_BLACK}>
 							Nos forfaits sont adaptés à la taille de votre office
 						</Typography>
 					</div>
@@ -26,23 +26,23 @@ export default function SubscriptionNew() {
 				<div className={classes["forfeits-container"]}>
 					<div className={classes["forfeit-block"]}>
 						<div className={classes["forfeit-header"]}>
-							<Typography typo={ITypo.P_SB_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
+							<Typography typo={ITypo.TEXT_LG_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK}>
 								Forfait standard
 							</Typography>
-							<Typography typo={ITypo.P_16} color={ITypoColor.COLOR_SECONDARY_500}>
+							<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_SECONDARY_500}>
 								Plan par utilisateur
 							</Typography>
 						</div>
 						<div className={classes["separator"]} />
 						<div className={classes["price-container"]}>
-							<Typography typo={ITypo.H1} color={ITypoColor.COLOR_GENERIC_BLACK} className={classes["price"]}>
+							<Typography typo={ITypo.DISPLAY_LARGE} color={ITypoColor.COLOR_GENERIC_BLACK} className={classes["price"]}>
 								99€
-								<Typography typo={ITypo.H2} color={ITypoColor.COLOR_GENERIC_BLACK}>
+								<Typography typo={ITypo.TITLE_H3} color={ITypoColor.COLOR_GENERIC_BLACK}>
 									&nbsp;HT&nbsp;
 								</Typography>
 								/ mois
 							</Typography>
-							<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
+							<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_GENERIC_BLACK}>
 								+ {collaboratorPrice}€ / collaborateur / mois
 							</Typography>
 						</div>
@@ -54,23 +54,23 @@ export default function SubscriptionNew() {
 					</div>
 					<div className={classes["forfeit-block"]}>
 						<div className={classes["forfeit-header"]}>
-							<Typography typo={ITypo.P_SB_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
+							<Typography typo={ITypo.TEXT_LG_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK}>
 								Forfait illimité
 							</Typography>
-							<Typography typo={ITypo.P_16} color={ITypoColor.COLOR_SECONDARY_500}>
+							<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_SECONDARY_500}>
 								Plan par office
 							</Typography>
 						</div>
 						<div className={classes["separator"]} />
 						<div className={classes["price-container"]}>
-							<Typography typo={ITypo.H1} color={ITypoColor.COLOR_GENERIC_BLACK} className={classes["price"]}>
+							<Typography typo={ITypo.DISPLAY_LARGE} color={ITypoColor.COLOR_GENERIC_BLACK} className={classes["price"]}>
 								{forfeitsPrices[EForfeitType.unlimited]}€
-								<Typography typo={ITypo.H2} color={ITypoColor.COLOR_GENERIC_BLACK}>
+								<Typography typo={ITypo.TITLE_H3} color={ITypoColor.COLOR_GENERIC_BLACK}>
 									&nbsp;HT&nbsp;
 								</Typography>
 								/ mois
 							</Typography>
-							<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
+							<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_GENERIC_BLACK}>
 								Sans limite de collaborateurs
 							</Typography>
 						</div>
@@ -84,20 +84,20 @@ export default function SubscriptionNew() {
 				<div className={classes["infos-container"]}>
 					<div className={classes["line"]}>
 						<Image src={CheckIcon} alt="Check icon" />
-						<Typography typo={ITypo.P_16} color={ITypoColor.COLOR_GENERIC_BLACK}>
+						<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_GENERIC_BLACK}>
 							Accompagnement facilité : profitez d'un onboarding individualisé, où nous vous guidons pour une prise en main
 							optimale de l'application
 						</Typography>
 					</div>
 					<div className={classes["line"]}>
 						<Image src={CheckIcon} alt="Check icon" />
-						<Typography typo={ITypo.P_16} color={ITypoColor.COLOR_GENERIC_BLACK}>
+						<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_GENERIC_BLACK}>
 							Support technique : notre équipe support est disponible pour vous assister en cas d’incident
 						</Typography>
 					</div>
 					<div className={classes["line"]}>
 						<Image src={CheckIcon} alt="Check icon" />
-						<Typography typo={ITypo.P_16} color={ITypoColor.COLOR_GENERIC_BLACK}>
+						<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_GENERIC_BLACK}>
 							Mises à jour régulières : bénéficiez de mises à jour fréquentes pour profiter des dernières fonctionnalités,
 							améliorations de sécurité et performances optimisées
 						</Typography>
diff --git a/src/front/Components/Layouts/Subscription/SubscriptionSuccess/index.tsx b/src/front/Components/Layouts/Subscription/SubscriptionSuccess/index.tsx
index 54c9c7c9..98fca15f 100644
--- a/src/front/Components/Layouts/Subscription/SubscriptionSuccess/index.tsx
+++ b/src/front/Components/Layouts/Subscription/SubscriptionSuccess/index.tsx
@@ -56,7 +56,7 @@ export default function SubscriptionSuccess() {
 				<div className={classes["root"]}>
 					<div className={classes["left"]}>
 						<div className={classes["title"]}>
-							<Typography typo={ITypo.H1} color={ITypoColor.COLOR_GENERIC_BLACK}>
+							<Typography typo={ITypo.DISPLAY_LARGE} color={ITypoColor.COLOR_GENERIC_BLACK}>
 								Abonnement réussi !
 							</Typography>
 						</div>
diff --git a/src/front/Components/Layouts/Users/UserInformations/index.tsx b/src/front/Components/Layouts/Users/UserInformations/index.tsx
index e4ca93af..6e7ce340 100644
--- a/src/front/Components/Layouts/Users/UserInformations/index.tsx
+++ b/src/front/Components/Layouts/Users/UserInformations/index.tsx
@@ -214,54 +214,54 @@ export default function UserInformations(props: IProps) {
 			{!isLoading && (
 				<div className={classes["root"]}>
 					<div className={classes["header"]}>
-						<Typography typo={ITypo.H1Bis}>
+						<Typography typo={ITypo.TITLE_H1}>
 							{userSelected?.contact?.first_name + " " + userSelected?.contact?.last_name}
 						</Typography>
-						<Typography typo={ITypo.H3} color={ITypoColor.COLOR_NEUTRAL_500}>
+						<Typography typo={ITypo.TITLE_H5} color={ITypoColor.COLOR_NEUTRAL_500}>
 							Office {userSelected?.office_membership?.name.toLocaleUpperCase()}
 						</Typography>
 					</div>
 					<div className={classes["user-infos"]}>
 						<div className={classes["user-infos-row"]}>
-							<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.COLOR_NEUTRAL_500}>
+							<Typography typo={ITypo.TEXT_MD_GREY} color={ITypoColor.COLOR_NEUTRAL_500}>
 								Nom
 							</Typography>
-							<Typography typo={ITypo.P_18}>{userSelected?.contact?.first_name}</Typography>
+							<Typography typo={ITypo.TEXT_LG_REGULAR}>{userSelected?.contact?.first_name}</Typography>
 						</div>
 						<div className={classes["user-infos-row"]}>
-							<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.COLOR_NEUTRAL_500}>
+							<Typography typo={ITypo.TEXT_MD_GREY} color={ITypoColor.COLOR_NEUTRAL_500}>
 								Prénom
 							</Typography>
-							<Typography typo={ITypo.P_18}>{userSelected?.contact?.last_name}</Typography>
+							<Typography typo={ITypo.TEXT_LG_REGULAR}>{userSelected?.contact?.last_name}</Typography>
 						</div>
 						<div className={classes["user-infos-row"]}>
-							<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.COLOR_NEUTRAL_500}>
+							<Typography typo={ITypo.TEXT_MD_GREY} color={ITypoColor.COLOR_NEUTRAL_500}>
 								Numéro de téléphone
 							</Typography>
-							<Typography typo={ITypo.P_18}>{userSelected?.contact?.cell_phone_number}</Typography>
+							<Typography typo={ITypo.TEXT_LG_REGULAR}>{userSelected?.contact?.cell_phone_number}</Typography>
 						</div>
 						<div className={classes["user-infos-row"]}>
-							<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.COLOR_NEUTRAL_500}>
+							<Typography typo={ITypo.TEXT_MD_GREY} color={ITypoColor.COLOR_NEUTRAL_500}>
 								Email
 							</Typography>
-							<Typography typo={ITypo.P_18}>{userSelected?.contact?.email}</Typography>
+							<Typography typo={ITypo.TEXT_LG_REGULAR}>{userSelected?.contact?.email}</Typography>
 						</div>
 					</div>
 
 					<div className={classes["role-container"]}>
 						<div className={classes["part"]}>
 							<div className={classes["first-line"]}>
-								<Typography typo={ITypo.P_SB_18}>Rôle au sein de son office</Typography>
+								<Typography typo={ITypo.TEXT_LG_SEMIBOLD}>Rôle au sein de son office</Typography>
 							</div>
 							<div className={classes["second-line"]}>
-								<Typography typo={ITypo.P_18}>
+								<Typography typo={ITypo.TEXT_LG_REGULAR}>
 									{userSelected?.office_role ? userSelected?.office_role?.name : "Utilisateur restreint"}
 								</Typography>
 							</div>
 						</div>
 						<div className={classes["part"]}>
 							<div className={classes["first-line"]}>
-								<Typography typo={ITypo.P_SB_18}>Attribuer un titre</Typography>
+								<Typography typo={ITypo.TEXT_LG_SEMIBOLD}>Attribuer un titre</Typography>
 							</div>
 							<div className={classes["second-line"]}>
 								{!isSuperAdminChecked && !currentAppointment && (
@@ -281,10 +281,10 @@ export default function UserInformations(props: IProps) {
 										</div>
 										<div className={classes["right"]}>
 											<div>
-												<Typography typo={ITypo.P_SB_18}>{currentAppointment.votes?.length}/3</Typography>
+												<Typography typo={ITypo.TEXT_LG_SEMIBOLD}>{currentAppointment.votes?.length}/3</Typography>
 											</div>
 											<div>
-												<Typography typo={ITypo.CAPTION_14}>
+												<Typography typo={ITypo.TEXT_SM_REGULAR}>
 													{currentAppointment.choice === EVote.NOMINATE
 														? `Un ou des collaborateurs souhaitent attribuer le titre de Super Admin à ce collaborateur. Il manque ${
 																3 - currentAppointment.votes?.length!
@@ -318,7 +318,7 @@ export default function UserInformations(props: IProps) {
 						confirmText={"Attribuer un vote"}
 						cancelText={"Annuler"}>
 						<div className={classes["modal-content"]}>
-							<Typography typo={ITypo.P_16} className={classes["text"]}>
+							<Typography typo={ITypo.TEXT_MD_REGULAR} className={classes["text"]}>
 								{superAdminModalType === "add" ? "Nommer" : "Retirer"} une personne Super Administrateur nécessite 3 votes
 								de super administrateurs existants. Souhaitez-vous attribuer un vote ?
 							</Typography>
diff --git a/src/front/Components/Layouts/Users/index.tsx b/src/front/Components/Layouts/Users/index.tsx
index c3dbe7d3..eb9a1afe 100644
--- a/src/front/Components/Layouts/Users/index.tsx
+++ b/src/front/Components/Layouts/Users/index.tsx
@@ -12,9 +12,9 @@ export default class Users extends BasePage<IProps, IState> {
 			<DefaultUserDashboard title={"Dossier"} mobileBackText={"Liste des utilisateurs"}>
 				<div className={classes["root"]}>
 					<div className={classes["no-folder-selected"]}>
-						<Typography typo={ITypo.H1Bis}>Informations des utilisateurs</Typography>
+						<Typography typo={ITypo.TITLE_H1}>Informations des utilisateurs</Typography>
 						<div className={classes["choose-a-folder"]}>
-							<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_NEUTRAL_500}>
+							<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
 								Sélectionnez un utilisateur
 							</Typography>
 						</div>

From 0a08ded8046520f0d5827d3ec337e721537a52fd Mon Sep 17 00:00:00 2001
From: Vins <vincent.alamelle@smart-chain.fr>
Date: Tue, 2 Jul 2024 16:57:41 +0200
Subject: [PATCH 3/7] Added all new colors / typo

---
 .../DesignSystem/CheckBox/index.tsx           |   2 +-
 .../FolderBoxInformation/index.tsx            |  30 ++-
 .../DesignSystem/Form/DateField/index.tsx     |   2 +-
 .../DesignSystem/Form/SelectField/index.tsx   |   2 +-
 .../DesignSystem/Form/TextField/index.tsx     |   2 +-
 .../DesignSystem/Form/TextareaField/index.tsx |   2 +-
 .../BurgerModal/BurgerModalSubmenu/index.tsx  |   6 +-
 .../DesignSystem/Header/HeaderLink/index.tsx  |  12 +-
 .../HeaderSubmenu/HeaderSubmenuLink/index.tsx |   8 +-
 .../Header/HeaderSubmenu/index.tsx            |   8 +-
 .../Header/NavigationLink/index.tsx           |   8 +-
 .../DesignSystem/LogOutButton/index.tsx       |   6 +-
 .../DesignSystem/MultiSelect/index.tsx        |   4 +-
 .../DesignSystem/Newsletter/index.tsx         |   2 +-
 .../DesignSystem/RadioBox/index.tsx           |   2 +-
 .../DesignSystem/SearchBar/index.tsx          |   4 +-
 .../Components/DesignSystem/Switch/index.tsx  |   2 +-
 .../Typography/classes.module.scss            | 244 ++++++++++++------
 .../DesignSystem/Typography/index.tsx         | 122 ++++++++-
 .../UserFolder/UserFolderHeader/index.tsx     |  18 +-
 .../CollaboratorInformations/index.tsx        |   8 +-
 .../DeedTypes/DeedTypesInformations/index.tsx |   5 +-
 .../DocumentTypesInformations/index.tsx       |   6 +-
 .../Folder/AddClientToFolder/index.tsx        |   4 +-
 .../AskDocuments/ParameterDocuments/index.tsx |   4 +-
 .../Offices/OfficeInformations/index.tsx      |   6 +-
 .../SubscribeCheckoutTicket/index.tsx         |   4 +-
 .../SubscribeIllimityComponent/index.tsx      |   4 +-
 .../SubscribeStandardComponent/index.tsx      |   4 +-
 .../Layouts/Users/UserInformations/index.tsx  |   8 +-
 src/front/Themes/constants.scss               |  93 ++++++-
 src/front/Themes/variables.scss               |  94 ++++++-
 32 files changed, 560 insertions(+), 166 deletions(-)

diff --git a/src/front/Components/DesignSystem/CheckBox/index.tsx b/src/front/Components/DesignSystem/CheckBox/index.tsx
index dc8b16f2..f7d719c3 100644
--- a/src/front/Components/DesignSystem/CheckBox/index.tsx
+++ b/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"
diff --git a/src/front/Components/DesignSystem/FolderBoxInformation/index.tsx b/src/front/Components/DesignSystem/FolderBoxInformation/index.tsx
index 2c9be9dd..2d9df590 100644
--- a/src/front/Components/DesignSystem/FolderBoxInformation/index.tsx
+++ b/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>
 					</>
diff --git a/src/front/Components/DesignSystem/Form/DateField/index.tsx b/src/front/Components/DesignSystem/Form/DateField/index.tsx
index 12f06148..47d60181 100644
--- a/src/front/Components/DesignSystem/Form/DateField/index.tsx
+++ b/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}
diff --git a/src/front/Components/DesignSystem/Form/SelectField/index.tsx b/src/front/Components/DesignSystem/Form/SelectField/index.tsx
index 2991eb75..5e8b376d 100644
--- a/src/front/Components/DesignSystem/Form/SelectField/index.tsx
+++ b/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>
diff --git a/src/front/Components/DesignSystem/Form/TextField/index.tsx b/src/front/Components/DesignSystem/Form/TextField/index.tsx
index e33d8518..8e3e5d6d 100644
--- a/src/front/Components/DesignSystem/Form/TextField/index.tsx
+++ b/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}
diff --git a/src/front/Components/DesignSystem/Form/TextareaField/index.tsx b/src/front/Components/DesignSystem/Form/TextareaField/index.tsx
index f1853ee6..d18c86c2 100644
--- a/src/front/Components/DesignSystem/Form/TextareaField/index.tsx
+++ b/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}
diff --git a/src/front/Components/DesignSystem/Header/BurgerMenu/BurgerModal/BurgerModalSubmenu/index.tsx b/src/front/Components/DesignSystem/Header/BurgerMenu/BurgerModal/BurgerModalSubmenu/index.tsx
index 97b59cc1..94665cb1 100644
--- a/src/front/Components/DesignSystem/Header/BurgerMenu/BurgerModal/BurgerModalSubmenu/index.tsx
+++ b/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" />}
diff --git a/src/front/Components/DesignSystem/Header/HeaderLink/index.tsx b/src/front/Components/DesignSystem/Header/HeaderLink/index.tsx
index 46ce7fba..ae1e5d48 100644
--- a/src/front/Components/DesignSystem/Header/HeaderLink/index.tsx
+++ b/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>
 		);
diff --git a/src/front/Components/DesignSystem/Header/HeaderSubmenu/HeaderSubmenuLink/index.tsx b/src/front/Components/DesignSystem/Header/HeaderSubmenu/HeaderSubmenuLink/index.tsx
index 040e9c9e..ce399e69 100644
--- a/src/front/Components/DesignSystem/Header/HeaderSubmenu/HeaderSubmenuLink/index.tsx
+++ b/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>
 	);
 }
diff --git a/src/front/Components/DesignSystem/Header/HeaderSubmenu/index.tsx b/src/front/Components/DesignSystem/Header/HeaderSubmenu/index.tsx
index 60606b4a..c3252389 100644
--- a/src/front/Components/DesignSystem/Header/HeaderSubmenu/index.tsx
+++ b/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 && (
diff --git a/src/front/Components/DesignSystem/Header/NavigationLink/index.tsx b/src/front/Components/DesignSystem/Header/NavigationLink/index.tsx
index e659f14f..403ca5d7 100644
--- a/src/front/Components/DesignSystem/Header/NavigationLink/index.tsx
+++ b/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>
 		);
diff --git a/src/front/Components/DesignSystem/LogOutButton/index.tsx b/src/front/Components/DesignSystem/LogOutButton/index.tsx
index f9102e70..d0eaa38c 100644
--- a/src/front/Components/DesignSystem/LogOutButton/index.tsx
+++ b/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>
 	);
diff --git a/src/front/Components/DesignSystem/MultiSelect/index.tsx b/src/front/Components/DesignSystem/MultiSelect/index.tsx
index dd0e3c2a..f4a121d4 100644
--- a/src/front/Components/DesignSystem/MultiSelect/index.tsx
+++ b/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"]}>
diff --git a/src/front/Components/DesignSystem/Newsletter/index.tsx b/src/front/Components/DesignSystem/Newsletter/index.tsx
index bfc7a8c9..14e2a9a7 100644
--- a/src/front/Components/DesignSystem/Newsletter/index.tsx
+++ b/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>
diff --git a/src/front/Components/DesignSystem/RadioBox/index.tsx b/src/front/Components/DesignSystem/RadioBox/index.tsx
index ecd629ea..7380e10c 100644
--- a/src/front/Components/DesignSystem/RadioBox/index.tsx
+++ b/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"
diff --git a/src/front/Components/DesignSystem/SearchBar/index.tsx b/src/front/Components/DesignSystem/SearchBar/index.tsx
index ddf5ebf5..c9a8012b 100644
--- a/src/front/Components/DesignSystem/SearchBar/index.tsx
+++ b/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>
 				)}
diff --git a/src/front/Components/DesignSystem/Switch/index.tsx b/src/front/Components/DesignSystem/Switch/index.tsx
index c013d146..17ecc44d 100644
--- a/src/front/Components/DesignSystem/Switch/index.tsx
+++ b/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>
diff --git a/src/front/Components/DesignSystem/Typography/classes.module.scss b/src/front/Components/DesignSystem/Typography/classes.module.scss
index 2fdd5018..f77acf04 100644
--- a/src/front/Components/DesignSystem/Typography/classes.module.scss
+++ b/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;
-		letter-spacing: 0.5px;
+		line-height: 27px;
+		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-grey {
-		color: $color-neutral-500;
+	&.text-lg-light {
 		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 {
-		color: $color-error-600;
+	//Text medium
+	&.text-md-bold {
 		font-style: normal;
-		font-weight: 400;
-		font-size: 18px;
-		line-height: 27px;
-		letter-spacing: 0.5px;
+		font-weight: 700;
+		font-size: 16px;
+		line-height: 24px;
+		letter-spacing: 0.5%;
 	}
-
 	&.text-md-semibold {
 		font-style: normal;
 		font-weight: 600;
 		font-size: 16px;
-		line-height: 22px;
-		letter-spacing: 0.5px;
+		line-height: 24px;
+		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-grey {
-		color: $color-neutral-500;
+	&.text-md-uppercase {
 		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-error {
-		color: $color-error-600;
+	&.text-md-light {
 		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-bold {
+	&.text-sm-regular {
 		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 {
-		color: $color-error-800;
+	//Caption
+	&.caption-bold {
+		font-style: normal;
+		font-weight: 700;
+		font-size: 10px;
+		line-height: 15px;
+		letter-spacing: -2%;
 	}
-
-	&.color-neutral-500 {
-		color: $color-neutral-500;
+	&.caption-semibold {
+		font-style: normal;
+		font-weight: 600;
+		font-size: 10px;
+		line-height: 15px;
+		letter-spacing: -2%;
 	}
-
-	&.color-generic-black {
-		color: $color-generic-black;
+	&.caption-regular {
+		font-style: normal;
+		font-weight: 400;
+		font-size: 10px;
+		line-height: 15px;
+		letter-spacing: -2%;
 	}
-
-	&.color-primary-500 {
-		color: $color-primary-500;
+	&.caption-uppercase {
+		font-style: normal;
+		font-weight: 400;
+		font-size: 10px;
+		line-height: 15px;
+		letter-spacing: -2%;
+		text-transform: uppercase;
 	}
-
-	&.color-secondary-500 {
-		color: $color-secondary-500;
-	}
-
-	&.color-success-600 {
-		color: $color-success-600;
-	}
-
-	&.color-error-600 {
-		color: $color-error-600;
-	}
-
-	&.color-warning-500 {
-		color: $color-warning-500;
-	}
-
-	&.white {
-		color: $color-generic-white;
+	&.caption-light {
+		font-style: normal;
+		font-weight: 300;
+		font-size: 10px;
+		line-height: 15px;
+		letter-spacing: -2%;
 	}
 }
diff --git a/src/front/Components/DesignSystem/Typography/index.tsx b/src/front/Components/DesignSystem/Typography/index.tsx
index aa8dbd2d..da974116 100644
--- a/src/front/Components/DesignSystem/Typography/index.tsx
+++ b/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_GREY = "text-lg-grey",
-	TEXT_LG_ERROR = "text-lg-error",
+	TEXT_LG_UPPERCASE = "text-lg-uppercase",
+	TEXT_LG_light = "text-lg-light",
 
+	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_ERROR = "text-md-error",
+	TEXT_MD_UPPERCASE = "text-md-uppercase",
+	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> {
diff --git a/src/front/Components/DesignSystem/UserFolder/UserFolderHeader/index.tsx b/src/front/Components/DesignSystem/UserFolder/UserFolderHeader/index.tsx
index 0c3362b8..0918cd4e 100644
--- a/src/front/Components/DesignSystem/UserFolder/UserFolderHeader/index.tsx
+++ b/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>
diff --git a/src/front/Components/Layouts/Collaborators/CollaboratorInformations/index.tsx b/src/front/Components/Layouts/Collaborators/CollaboratorInformations/index.tsx
index 46957249..41cf6212 100644
--- a/src/front/Components/Layouts/Collaborators/CollaboratorInformations/index.tsx
+++ b/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>
diff --git a/src/front/Components/Layouts/DeedTypes/DeedTypesInformations/index.tsx b/src/front/Components/Layouts/DeedTypes/DeedTypesInformations/index.tsx
index a26c5d24..41f8331c 100644
--- a/src/front/Components/Layouts/DeedTypes/DeedTypesInformations/index.tsx
+++ b/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>
diff --git a/src/front/Components/Layouts/DocumentTypes/DocumentTypesInformations/index.tsx b/src/front/Components/Layouts/DocumentTypes/DocumentTypesInformations/index.tsx
index d011c403..9f055668 100644
--- a/src/front/Components/Layouts/DocumentTypes/DocumentTypesInformations/index.tsx
+++ b/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>
diff --git a/src/front/Components/Layouts/Folder/AddClientToFolder/index.tsx b/src/front/Components/Layouts/Folder/AddClientToFolder/index.tsx
index efdf24a9..cead18f7 100644
--- a/src/front/Components/Layouts/Folder/AddClientToFolder/index.tsx
+++ b/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>
 
diff --git a/src/front/Components/Layouts/Folder/AskDocuments/ParameterDocuments/index.tsx b/src/front/Components/Layouts/Folder/AskDocuments/ParameterDocuments/index.tsx
index b6569f3f..9b21ccce 100644
--- a/src/front/Components/Layouts/Folder/AskDocuments/ParameterDocuments/index.tsx
+++ b/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" && (
diff --git a/src/front/Components/Layouts/Offices/OfficeInformations/index.tsx b/src/front/Components/Layouts/Offices/OfficeInformations/index.tsx
index c346a488..32ec1c8b 100644
--- a/src/front/Components/Layouts/Offices/OfficeInformations/index.tsx
+++ b/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}>
diff --git a/src/front/Components/Layouts/Subscription/Components/SubscribeCheckoutTicket/index.tsx b/src/front/Components/Layouts/Subscription/Components/SubscribeCheckoutTicket/index.tsx
index 3b585053..38e09fe0 100644
--- a/src/front/Components/Layouts/Subscription/Components/SubscribeCheckoutTicket/index.tsx
+++ b/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"]} />
diff --git a/src/front/Components/Layouts/Subscription/Components/SubscribeIllimityComponent/index.tsx b/src/front/Components/Layouts/Subscription/Components/SubscribeIllimityComponent/index.tsx
index 1436152f..7fcc1613 100644
--- a/src/front/Components/Layouts/Subscription/Components/SubscribeIllimityComponent/index.tsx
+++ b/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"]} />
diff --git a/src/front/Components/Layouts/Subscription/Components/SubscribeStandardComponent/index.tsx b/src/front/Components/Layouts/Subscription/Components/SubscribeStandardComponent/index.tsx
index 2d63c48d..94dd619c 100644
--- a/src/front/Components/Layouts/Subscription/Components/SubscribeStandardComponent/index.tsx
+++ b/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"]} />
diff --git a/src/front/Components/Layouts/Users/UserInformations/index.tsx b/src/front/Components/Layouts/Users/UserInformations/index.tsx
index 6e7ce340..4e5a473b 100644
--- a/src/front/Components/Layouts/Users/UserInformations/index.tsx
+++ b/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>
diff --git a/src/front/Themes/constants.scss b/src/front/Themes/constants.scss
index a230b0e4..4ac205b4 100644
--- a/src/front/Themes/constants.scss
+++ b/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
-$color-neutral-500: #6d7e8a;
-$color-neutral-200: #d7dce0;
+// Neutral colors
 $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-success-600: #15a450;
+$color-secondary-800: #9e150e;
+$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-error-800: #991b1c;
+$color-warning-700: #b75306;
+$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;
diff --git a/src/front/Themes/variables.scss b/src/front/Themes/variables.scss
index d5ae1d02..725f8373 100644
--- a/src/front/Themes/variables.scss
+++ b/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};
-	--color-neutral-200: #{$color-neutral-200};
+	// Neutral colors
 	--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-success-600: #{$color-success-600};
+	--color-secondary-800: #{$color-secondary-800};
+	--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-error-800: #{$color-error-800};
+	--color-warning-700: #{$color-warning-700};
+	--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};

From d9e7cd16a43857764a3d760a6c956b00752fe787 Mon Sep 17 00:00:00 2001
From: Maxime Lalo <maxime.lalo.pro@gmail.com>
Date: Thu, 4 Jul 2024 10:11:57 +0200
Subject: [PATCH 4/7] :sparkles: New documentation

---
 .../DesignSystem/Header/Profile/ProfileModal/index.tsx          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/front/Components/DesignSystem/Header/Profile/ProfileModal/index.tsx b/src/front/Components/DesignSystem/Header/Profile/ProfileModal/index.tsx
index d01684e6..5b5d532d 100644
--- a/src/front/Components/DesignSystem/Header/Profile/ProfileModal/index.tsx
+++ b/src/front/Components/DesignSystem/Header/Profile/ProfileModal/index.tsx
@@ -21,7 +21,7 @@ export default class ProfileModal extends React.Component<IProps, IState> {
 				<div className={classes["root"]}>
 					<NavigationLink path={Module.getInstance().get().modules.pages.MyAccount.props.path} text="Mon compte" />
 					<NavigationLink target="_blank" path="/Onboarding_Le_Coffre.pdf" text="Guide de Prise en Main" />
-					<NavigationLink target="_blank" path="/CGU_LeCoffre_io.pdf" text="CGU" />
+					<NavigationLink target="_blank" path="https://ressources.lecoffre.io/" text="CGU" />
 					<div className={classes["separator"]} />
 					<LogOutButton />
 				</div>

From 765f7f38d1695f094897c783186bcbb63eb228d0 Mon Sep 17 00:00:00 2001
From: Maxime Lalo <maxime.lalo.pro@gmail.com>
Date: Thu, 4 Jul 2024 14:43:51 +0200
Subject: [PATCH 5/7] forgot pdf

---
 .../DesignSystem/Header/BurgerMenu/BurgerModal/index.tsx      | 2 +-
 .../DesignSystem/Header/Profile/ProfileModal/index.tsx        | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/front/Components/DesignSystem/Header/BurgerMenu/BurgerModal/index.tsx b/src/front/Components/DesignSystem/Header/BurgerMenu/BurgerModal/index.tsx
index 63f0a869..ede9dd10 100644
--- a/src/front/Components/DesignSystem/Header/BurgerMenu/BurgerModal/index.tsx
+++ b/src/front/Components/DesignSystem/Header/BurgerMenu/BurgerModal/index.tsx
@@ -159,7 +159,7 @@ export default class BurgerModal extends React.Component<IProps, IState> {
 					/>
 					<div className={classes["separator"]} />
 					<NavigationLink path={Module.getInstance().get().modules.pages.MyAccount.props.path} text="Mon compte" />
-					<NavigationLink target="blank" path="/Onboarding_Le_Coffre.pdf" text="Guide de Prise en Main" />
+					<NavigationLink target="blank" path="https://ressources.lecoffre.io/" text="Guide de Prise en Main" />
 					<NavigationLink target="blank" path="https://tally.so/r/mBGaNY" text="Support" />
 					<NavigationLink target="blank" path="/CGU_LeCoffre_io.pdf" text="CGU" />
 					<LogOutButton />
diff --git a/src/front/Components/DesignSystem/Header/Profile/ProfileModal/index.tsx b/src/front/Components/DesignSystem/Header/Profile/ProfileModal/index.tsx
index 5b5d532d..3a815e2e 100644
--- a/src/front/Components/DesignSystem/Header/Profile/ProfileModal/index.tsx
+++ b/src/front/Components/DesignSystem/Header/Profile/ProfileModal/index.tsx
@@ -20,8 +20,8 @@ export default class ProfileModal extends React.Component<IProps, IState> {
 				<div className={classes["background"]} onClick={this.props.closeModal} />
 				<div className={classes["root"]}>
 					<NavigationLink path={Module.getInstance().get().modules.pages.MyAccount.props.path} text="Mon compte" />
-					<NavigationLink target="_blank" path="/Onboarding_Le_Coffre.pdf" text="Guide de Prise en Main" />
-					<NavigationLink target="_blank" path="https://ressources.lecoffre.io/" text="CGU" />
+					<NavigationLink target="_blank" path="https://ressources.lecoffre.io/" text="Guide de Prise en Main" />
+					<NavigationLink target="_blank" path="/CGU_LeCoffre_io.pdf" text="CGU" />
 					<div className={classes["separator"]} />
 					<LogOutButton />
 				</div>

From 168ac97ffb367f4d0447f48ae7ed630130202b5b Mon Sep 17 00:00:00 2001
From: Maxime Lalo <maxime.lalo.pro@gmail.com>
Date: Thu, 4 Jul 2024 16:00:35 +0200
Subject: [PATCH 6/7] :sparkles: Core finished

---
 src/front/Themes/constants.scss | 39 ++++++++++++++++++++++++++++++++
 src/front/Themes/variables.scss | 40 +++++++++++++++++++++++++++++++++
 2 files changed, 79 insertions(+)

diff --git a/src/front/Themes/constants.scss b/src/front/Themes/constants.scss
index 4ac205b4..a9b8ab4a 100644
--- a/src/front/Themes/constants.scss
+++ b/src/front/Themes/constants.scss
@@ -115,3 +115,42 @@ $modal-background: rgba(0, 0, 0, 0.44);
 
 $shadow-nav: 0px 8px 10px rgba(0, 0, 0, 0.07);
 $shadow-tooltip: 0px 4px 24px rgba(0, 0, 0, 0.15);
+
+$spacing-0-25: 2px;
+$spacing-0-5: 4px;
+$spacing-0-75: 6px;
+$spacing-1: 8px;
+$spacing-1-5: 12px;
+$spacing-2: 16px;
+$spacing-3: 24px;
+$spacing-4: 32px;
+$spacing-5: 40px;
+$spacing-6: 48px;
+$spacing-7: 56px;
+$spacing-8: 64px;
+$spacing-9: 72px;
+$spacing-10: 80px;
+$spacing-11: 88px;
+$spacing-12: 96px;
+$spacing-13: 104px;
+$spacing-14: 112px;
+$spacing-15: 120px;
+$spacing-16: 128px;
+
+$radius-xs: 2px;
+$radius-sm: 4px;
+$radius-md: 8px;
+$radius-lg: 16px;
+$radius-xl: 24px;
+$radius-2xl: 32px;
+$radius-3xl: 360px;
+
+$background-primary: #ffffff;
+$background-elevation-1: #f7f8f8;
+$background-elevation-2: #edeff1;
+
+$opacity-disabled: 0.3;
+
+$shadow-sm: 0px 4px 16px 0px rgba(0, 0, 0, 0.1);
+$shadow-md: 0px 4px 18px 0px rgba(0, 0, 0, 0.15);
+$shadow-lg: 0px 4px 20px 0px rgba(0, 0, 0, 0.2);
diff --git a/src/front/Themes/variables.scss b/src/front/Themes/variables.scss
index 725f8373..32e12baa 100644
--- a/src/front/Themes/variables.scss
+++ b/src/front/Themes/variables.scss
@@ -110,4 +110,44 @@
 	--color-success-600-soft: #{$color-success-600-soft};
 	--color-warning-500-soft: #{$color-warning-500-soft};
 	--color-error-600-soft: #{$color-error-600-soft};
+
+	/// Spacing
+	--spacing-0-25: #{$spacing-0-25};
+	--spacing-0-5: #{$spacing-0-5};
+	--spacing-0-75: #{$spacing-0-75};
+	--spacing-1: #{$spacing-1};
+	--spacing-1-5: #{$spacing-1-5};
+	--spacing-2: #{$spacing-2};
+	--spacing-3: #{$spacing-3};
+	--spacing-4: #{$spacing-4};
+	--spacing-5: #{$spacing-5};
+	--spacing-6: #{$spacing-6};
+	--spacing-7: #{$spacing-7};
+	--spacing-8: #{$spacing-8};
+	--spacing-9: #{$spacing-9};
+	--spacing-10: #{$spacing-10};
+	--spacing-11: #{$spacing-11};
+	--spacing-12: #{$spacing-12};
+	--spacing-13: #{$spacing-13};
+	--spacing-14: #{$spacing-14};
+	--spacing-15: #{$spacing-15};
+	--spacing-16: #{$spacing-16};
+
+	--radius-xs: #{$radius-xs};
+	--radius-sm: #{$radius-sm};
+	--radius-md: #{$radius-md};
+	--radius-lg: #{$radius-lg};
+	--radius-xl: #{$radius-xl};
+	--radius-2xl: #{radius-2xl};
+	--radius-3xl: #{radius-3xl};
+
+	--background-primary: #{$background-primary};
+	--background-elevation-1: #{$background-elevation-1};
+	--background-elevation-2: #{$background-elevation-2};
+
+	--opacity-disabled: #{$opacity-disabled};
+
+	--shadow-sm: #{$shadow-sm};
+	--shadow-md: #{$shadow-md};
+	--shadow-lg: #{$shadow-lg};
 }

From c690a6e81c84ca5799c8e5d24af12ad2da8c74c0 Mon Sep 17 00:00:00 2001
From: Maxime Lalo <maxime.lalo.pro@gmail.com>
Date: Thu, 4 Jul 2024 16:07:48 +0200
Subject: [PATCH 7/7] :sparkles: New logo

---
 src/front/Assets/logo.svg                     | 34 -------------------
 src/front/Assets/logo_small_blue.svg          |  4 +++
 src/front/Assets/logo_small_neutral.svg       |  4 +++
 src/front/Assets/logo_standard_blue.svg       | 15 ++++++++
 src/front/Assets/logo_standard_neutral.svg    | 15 ++++++++
 .../Components/DesignSystem/Header/index.tsx  |  2 +-
 .../Components/Materials/Header/index.tsx     |  2 +-
 7 files changed, 40 insertions(+), 36 deletions(-)
 delete mode 100644 src/front/Assets/logo.svg
 create mode 100644 src/front/Assets/logo_small_blue.svg
 create mode 100644 src/front/Assets/logo_small_neutral.svg
 create mode 100644 src/front/Assets/logo_standard_blue.svg
 create mode 100644 src/front/Assets/logo_standard_neutral.svg

diff --git a/src/front/Assets/logo.svg b/src/front/Assets/logo.svg
deleted file mode 100644
index 8269f65f..00000000
--- a/src/front/Assets/logo.svg
+++ /dev/null
@@ -1,34 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg id="Calque_2" data-name="Calque 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1245.64 178.38">
-  <defs>
-    <style>
-      .cls-1 {
-        fill: #41a89f;
-      }
-
-      .cls-1, .cls-2 {
-        stroke-width: 0px;
-      }
-
-      .cls-2 {
-        fill: #4a2779;
-      }
-    </style>
-  </defs>
-  <g id="Calque_1-2" data-name="Calque 1">
-    <g>
-      <path class="cls-2" d="M540.47,39.62c1.42-5.38,3.79-10.47,7.11-15.29,3.32-4.82,7.35-9.05,12.09-12.7,4.74-3.64,10.08-6.48,15.99-8.54,5.92-2.06,12.21-3.08,18.83-3.08h34.6l-4.74,19.69h-15.17c-7.9,0-14.45,1.95-19.67,5.8-5.21,3.87-8.45,8.59-9.72,14.11l-4.98,19.69h30.09l-4.98,19.69h-30.09l-24.41,98.93h-39.34l34.36-138.31.02.02Z"/>
-      <path class="cls-2" d="M631.24,39.62c1.42-5.38,3.79-10.47,7.11-15.29,3.32-4.82,7.35-9.05,12.09-12.7,4.74-3.64,10.08-6.48,15.98-8.54,5.93-2.06,12.22-3.08,18.83-3.08h34.6l-4.74,19.69h-15.16c-7.9,0-14.45,1.95-19.67,5.8-5.21,3.87-8.45,8.59-9.71,14.11l-4.98,19.69h30.1l-4.97,19.69h-30.1l-24.41,98.93h-39.33l34.36-138.31.02.02Z"/>
-      <path class="cls-2" d="M804.21,39.62l-4.98,19.69h-14.93c-7.9,0-14.45,1.95-19.67,5.8-5.21,3.87-8.53,8.59-9.95,14.11l-24.41,98.69h-39.57l24.4-98.46c1.27-5.22,3.51-10.23,6.76-15.07,3.25-4.82,7.24-9.09,11.98-12.81,4.74-3.72,10.11-6.64,16.12-8.78,6-2.14,12.48-3.21,19.43-3.21h34.83v.03Z"/>
-      <path class="cls-2" d="M834.08,177.93c-11.69,0-20.58-2.85-26.67-8.54-6.08-5.69-9.13-12.89-9.13-21.59,0-2.69.39-5.85,1.18-9.49l14.69-59.31c1.42-5.38,3.79-10.47,7.11-15.29,3.32-4.82,7.35-9.01,12.08-12.57,4.74-3.56,10.11-6.36,16.12-8.43,6-2.06,12.32-3.08,18.95-3.08h29.86c11.69,0,20.54,2.82,26.54,8.43,6,5.61,9.01,12.78,9.01,21.48,0,2.85-.4,6.09-1.18,9.73l-9.71,39.38h-78.92l-4.97,19.93c-1.42,5.54-.52,10.2,2.74,14,3.24,3.8,8.8,5.69,16.71,5.69h39.81l-4.74,19.69h-59.47v-.02ZM849.01,98.93h39.57l4.74-19.8c1.26-5.5.47-10.19-2.37-14.03-2.84-3.86-7.03-5.77-12.55-5.77-2.69,0-5.37.51-8.06,1.53-2.69,1.03-5.14,2.44-7.35,4.24-2.21,1.8-4.14,3.92-5.8,6.36-1.66,2.44-2.81,5-3.43,7.67l-4.74,19.8h0Z"/>
-      <path class="cls-2" d="M958,177.93v-39.62h39.57v39.62h-39.57Z"/>
-      <path class="cls-1" d="M1056.56,39.62h39.57l-34.36,138.31h-39.57l34.36-138.31ZM1066.28,0h39.57l-4.74,19.69h-39.57l4.74-19.69Z"/>
-      <path class="cls-1" d="M1145.9,177.93c-11.69,0-20.58-2.85-26.67-8.54-6.08-5.69-9.13-12.89-9.13-21.59,0-2.69.4-5.85,1.18-9.49l14.7-59.31c1.42-5.38,3.79-10.47,7.11-15.29,3.32-4.82,7.35-9.01,12.09-12.57s10.11-6.36,16.11-8.43c6-2.06,12.32-3.08,18.95-3.08h29.87c11.68,0,20.53,2.85,26.53,8.54,6.01,5.69,9.01,12.81,9.01,21.35,0,2.69-.4,5.85-1.18,9.49l-14.7,59.31c-1.42,5.54-3.79,10.68-7.11,15.42-3.32,4.74-7.35,8.94-12.09,12.57-4.74,3.64-10.08,6.49-15.98,8.54-5.92,2.06-12.22,3.08-18.85,3.08h-29.86.02ZM1204.9,79.24c1.42-5.54.71-10.23-2.13-14.11-2.85-3.87-7.04-5.8-12.56-5.8s-10.66,1.95-15.4,5.8c-4.74,3.87-7.82,8.59-9.24,14.11l-14.7,59.07c-1.42,5.54-.71,10.25,2.13,14.11,2.84,3.88,7.03,5.8,12.56,5.8,2.69,0,5.37-.51,8.06-1.53,2.69-1.03,5.13-2.45,7.35-4.27,2.21-1.82,4.1-3.91,5.68-6.28,1.58-2.37,2.76-4.98,3.56-7.83l14.7-59.07Z"/>
-      <path class="cls-1" d="M464.92,52.45c-30.16-7.73-61.61,13.38-70.25,47.15-8.64,33.77,8.8,67.42,38.97,75.16,30.16,7.73,61.61-13.38,70.25-47.15,8.64-33.77-8.8-67.43-38.97-75.16ZM458.89,119.45c.32-.73.58-1.49.79-2.28.41-1.63.54-3.26.4-4.82l31.55-21.18c4.08,10.12,5.04,22,2.01,33.89-2.95,11.53-9.19,21.21-17.27,28.1l-17.49-33.72h.02ZM462.19,64.42c10.14,2.59,18.5,8.84,24.3,17.21l-31.74,21.3c-.96-.63-2.02-1.11-3.19-1.41-.71-.19-1.42-.28-2.13-.32l-17.2-33.2c9.19-4.7,19.67-6.23,29.97-3.59ZM405.49,102.47c3-11.74,9.42-21.56,17.69-28.47l16.51,31.84c-1.25,1.53-2.21,3.4-2.75,5.49-.33,1.3-.47,2.59-.46,3.86l-29.51,19.8c-3.63-9.82-4.39-21.16-1.49-32.52ZM411.84,144.74l29.32-19.68c1.14.89,2.45,1.57,3.9,1.93,1.88.47,3.78.41,5.56-.08l16.78,32.38c-9.3,4.9-19.98,6.53-30.46,3.84-10.62-2.72-19.29-9.43-25.1-18.39Z"/>
-      <path class="cls-1" d="M446.23,177.13c-4.25,0-8.53-.52-12.78-1.61-14.8-3.8-27.08-13.82-34.53-28.22-7.44-14.36-9.23-31.38-4.99-47.91,4.22-16.53,13.95-30.59,27.38-39.6,13.46-9.03,29.02-11.91,43.84-8.11,30.54,7.83,48.26,41.98,39.54,76.12-7.52,29.39-32.23,49.33-58.43,49.33h-.02ZM452.25,51.62c-10.38,0-20.74,3.23-30.06,9.49-13.11,8.79-22.61,22.54-26.73,38.69-4.12,16.15-2.4,32.76,4.87,46.78,7.25,14,19.16,23.72,33.52,27.41,29.68,7.62,60.77-13.29,69.29-46.58,8.51-33.29-8.7-66.59-38.4-74.19-4.12-1.06-8.31-1.58-12.5-1.58l.02-.02ZM447.06,165.19c-3.48,0-6.93-.43-10.32-1.3-10.38-2.66-19.46-9.32-25.58-18.73l-.43-.65,30.44-20.43.46.35c1.11.85,2.31,1.45,3.62,1.79,1.69.43,3.41.41,5.15-.08l.62-.17,17.44,33.64-.7.36c-6.56,3.45-13.65,5.2-20.71,5.2v.02ZM412.93,144.96c5.89,8.73,14.46,14.9,24.22,17.41,9.73,2.5,19.81,1.31,29.19-3.42l-16.13-31.11c-1.8.4-3.59.38-5.34-.06-1.33-.33-2.58-.92-3.73-1.74l-28.2,18.93-.02-.02ZM476.13,154.42l-18.12-34.94.16-.35c.32-.73.57-1.44.76-2.15.38-1.49.51-3.02.38-4.56l-.05-.46,32.75-21.99.36.9c4.27,10.61,4.99,22.82,2.04,34.39-2.91,11.34-8.96,21.21-17.52,28.5l-.76.65ZM459.77,119.41l16.86,32.5c7.91-7.02,13.52-16.35,16.26-27.05,2.8-10.91,2.21-22.41-1.61-32.5l-30.36,20.37c.08,1.57-.06,3.12-.46,4.62-.17.68-.39,1.36-.68,2.04v.02ZM406.58,136.21l-.35-.93c-3.84-10.41-4.36-21.81-1.52-32.99,2.91-11.39,9.29-21.65,17.95-28.88l.76-.63,17.2,33.17-.33.4c-1.23,1.52-2.1,3.26-2.59,5.19-.3,1.2-.46,2.42-.43,3.64v.43l-30.68,20.61-.02.02ZM405.49,102.47l.76.19c-2.69,10.53-2.31,21.26,1.12,31.11l28.31-19c0-1.22.17-2.44.47-3.62.51-1.98,1.37-3.78,2.57-5.38l-15.81-30.51c-8.03,6.98-13.93,16.67-16.68,27.41l-.76-.19.02-.02ZM454.76,103.88l-.44-.28c-.92-.6-1.9-1.04-2.95-1.31-.62-.16-1.26-.25-1.97-.28h-.46l-17.79-34.32.71-.36c9.79-5,20.35-6.26,30.52-3.65,10.03,2.56,18.58,8.64,24.75,17.52l.46.66-32.84,22.05.02-.02ZM449.92,100.45c.65.05,1.25.16,1.83.3,1.04.27,2.04.68,2.97,1.23l30.63-20.56c-5.91-8.22-13.98-13.82-23.38-16.24-9.56-2.45-19.46-1.34-28.7,3.18l16.63,32.09h.02Z"/>
-      <path class="cls-2" d="M44.07.44h39.57l-39.34,158.24h59.24l-4.74,19.69H0L44.07.44Z"/>
-      <path class="cls-2" d="M167.75.44h98.81l-4.74,19.69h-59.24l-14.93,59.55h54.03l-4.74,19.69h-54.03l-14.93,59.31h59.24l-4.74,19.69h-98.81L167.75.44Z"/>
-      <path class="cls-2" d="M311.35,138.76c-1.42,5.54-.71,10.25,2.13,14.11,2.84,3.87,7.03,5.8,12.56,5.8,11.53,0,19.83-6.64,24.88-19.93h19.67c-4.11,13.29-10.43,23.22-18.96,29.78-8.53,6.56-20.22,9.84-35.07,9.84h-10.19c-11.69,0-20.58-2.85-26.67-8.54-6.08-5.69-9.13-12.89-9.13-21.59,0-2.69.39-5.85,1.18-9.49l14.69-59.31c1.42-5.38,3.79-10.47,7.11-15.29,3.32-4.82,7.35-9.02,12.09-12.57,4.74-3.56,10.11-6.36,16.11-8.43,6-2.06,12.32-3.08,18.96-3.08h10.19c12.8,0,21.96,2.26,27.49,6.77,5.53,4.51,8.29,11.26,8.29,20.29,0,3.8-.47,7.91-1.42,12.34h-19.67c1.74-13.13-3.24-19.69-14.93-19.69-5.53,0-10.66,1.95-15.4,5.8-4.74,3.87-7.82,8.59-9.24,14.11l-14.69,59.07.02.02Z"/>
-    </g>
-  </g>
-</svg>
\ No newline at end of file
diff --git a/src/front/Assets/logo_small_blue.svg b/src/front/Assets/logo_small_blue.svg
new file mode 100644
index 00000000..a52c0ab4
--- /dev/null
+++ b/src/front/Assets/logo_small_blue.svg
@@ -0,0 +1,4 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M34.2668 11.4484C34.4117 11.6943 34.7078 11.814 34.985 11.7321L39.5905 10.3514C39.8362 10.2821 40 10.0552 40 9.80929V1.11585C40 0.498042 39.5023 0 38.8849 0H0.932437C0.371719 0 0.0315029 0.378271 0.0315029 0.926734L0 20.8353V38.8841C0 39.502 0.497719 40 1.11514 40H39.0676C39.6283 40 39.9685 39.6218 39.9685 39.067L40 19.1647V19.1016C40 18.3641 39.8929 17.8534 38.8912 18.1371L37.083 18.673C36.7932 18.7612 36.6042 19.0323 36.6168 19.3286L36.6483 19.9969C36.6483 27.9212 32.5217 33.6076 25.2386 35.8393C13.3249 39.4894 2.45708 30.134 3.42102 18.5532C4.08884 10.6036 10.4772 4.14814 18.4155 3.41685C25.1315 2.79904 31.1104 6.1718 34.2605 11.4358L34.2668 11.4484Z" fill="#013391"/>
+<path d="M26.2526 27.9906C27.9348 26.8306 29.2326 25.1537 29.9193 23.1931C30.1021 22.6572 30.247 22.0962 30.3352 21.5225C30.3919 21.1758 30.0643 20.8858 29.7303 20.9929L26.6369 21.9638C26.5046 22.0079 26.3975 22.1088 26.3471 22.2412C25.3706 24.6809 22.8505 26.3263 20.0028 25.9795C17.2244 25.6391 15.0005 23.3318 14.7548 20.5454C14.6729 19.6123 14.8052 18.7171 15.1013 17.9039C15.9518 15.6092 18.1632 13.9701 20.7526 13.9701C22.2142 13.9701 23.5561 14.4933 24.602 15.3633C24.7217 15.4642 24.8855 15.502 25.043 15.4516L27.9789 14.5311C28.1427 14.4807 28.2498 14.3546 28.2939 14.2159C28.3317 14.0709 28.3128 13.907 28.2057 13.7809C26.3093 11.5051 23.386 10.112 20.1414 10.3074C20.1036 10.3137 20.0658 10.32 20.028 10.32L19.0263 7.13005C18.9003 6.71398 18.4593 6.48071 18.0435 6.60679L15.7628 7.31917C15.347 7.45156 15.1139 7.89285 15.2462 8.30893L15.9896 10.6856C16.1219 11.1017 15.9581 11.5556 15.5927 11.7888C13.7845 12.9362 12.367 14.6635 11.6299 16.7061C11.3274 17.5256 11.1384 18.3956 11.0754 19.2971C11.0565 19.6312 11.0502 19.959 11.0628 20.2806C11.0817 20.7155 10.7982 21.1064 10.3824 21.2388L7.87493 22.0457C7.45912 22.1781 7.22601 22.6194 7.35201 23.0355L8.06394 25.3176C8.19624 25.7337 8.63726 25.9606 9.05308 25.8345L11.6047 25.0087C12.0079 24.8826 12.4552 25.0276 12.6883 25.3806C14.4271 27.9843 17.3883 29.7053 20.7526 29.7053C20.8975 29.7053 21.0361 29.7053 21.1747 29.7053C21.6157 29.6801 22.0126 29.9638 22.1449 30.3799L22.9198 32.8763C23.0521 33.2924 23.4931 33.5257 23.9089 33.3933L26.1896 32.6809C26.6054 32.5548 26.8322 32.1072 26.7062 31.6911L25.8872 29.0812C25.7612 28.6777 25.9061 28.2365 26.2526 27.9969V27.9906Z" fill="#013391"/>
+</svg>
diff --git a/src/front/Assets/logo_small_neutral.svg b/src/front/Assets/logo_small_neutral.svg
new file mode 100644
index 00000000..9935033b
--- /dev/null
+++ b/src/front/Assets/logo_small_neutral.svg
@@ -0,0 +1,4 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M34.2668 11.4484C34.4117 11.6943 34.7078 11.814 34.985 11.7321L39.5905 10.3514C39.8362 10.2821 40 10.0552 40 9.80929V1.11585C40 0.498042 39.5023 0 38.8849 0H0.932437C0.371719 0 0.0315029 0.378271 0.0315029 0.926734L0 20.8353V38.8841C0 39.502 0.497719 40 1.11514 40H39.0676C39.6283 40 39.9685 39.6218 39.9685 39.067L40 19.1647V19.1016C40 18.3641 39.8929 17.8534 38.8912 18.1371L37.083 18.673C36.7932 18.7612 36.6042 19.0323 36.6168 19.3286L36.6483 19.9969C36.6483 27.9212 32.5217 33.6076 25.2386 35.8393C13.3249 39.4894 2.45708 30.134 3.42102 18.5532C4.08884 10.6036 10.4772 4.14814 18.4155 3.41685C25.1315 2.79904 31.1104 6.1718 34.2605 11.4358L34.2668 11.4484Z" fill="#24282E"/>
+<path d="M26.2526 27.9906C27.9348 26.8306 29.2326 25.1537 29.9193 23.1931C30.1021 22.6572 30.247 22.0962 30.3352 21.5225C30.3919 21.1758 30.0643 20.8858 29.7303 20.9929L26.6369 21.9638C26.5046 22.0079 26.3975 22.1088 26.3471 22.2412C25.3706 24.6809 22.8505 26.3263 20.0028 25.9795C17.2244 25.6391 15.0005 23.3318 14.7548 20.5454C14.6729 19.6123 14.8052 18.7171 15.1013 17.9039C15.9518 15.6092 18.1632 13.9701 20.7526 13.9701C22.2142 13.9701 23.5561 14.4933 24.602 15.3633C24.7217 15.4642 24.8855 15.502 25.043 15.4516L27.9789 14.5311C28.1427 14.4807 28.2498 14.3546 28.2939 14.2159C28.3317 14.0709 28.3128 13.907 28.2057 13.7809C26.3093 11.5051 23.386 10.112 20.1414 10.3074C20.1036 10.3137 20.0658 10.32 20.028 10.32L19.0263 7.13005C18.9003 6.71398 18.4593 6.48071 18.0435 6.60679L15.7628 7.31917C15.347 7.45156 15.1139 7.89285 15.2462 8.30893L15.9896 10.6856C16.1219 11.1017 15.9581 11.5556 15.5927 11.7888C13.7845 12.9362 12.367 14.6635 11.6299 16.7061C11.3274 17.5256 11.1384 18.3956 11.0754 19.2971C11.0565 19.6312 11.0502 19.959 11.0628 20.2806C11.0817 20.7155 10.7982 21.1064 10.3824 21.2388L7.87493 22.0457C7.45912 22.1781 7.22601 22.6194 7.35201 23.0355L8.06394 25.3176C8.19624 25.7337 8.63726 25.9606 9.05308 25.8345L11.6047 25.0087C12.0079 24.8826 12.4552 25.0276 12.6883 25.3806C14.4271 27.9843 17.3883 29.7053 20.7526 29.7053C20.8975 29.7053 21.0361 29.7053 21.1747 29.7053C21.6157 29.6801 22.0126 29.9638 22.1449 30.3799L22.9198 32.8763C23.0521 33.2924 23.4931 33.5257 23.9089 33.3933L26.1896 32.6809C26.6054 32.5548 26.8322 32.1072 26.7062 31.6911L25.8872 29.0812C25.7612 28.6777 25.9061 28.2365 26.2526 27.9969V27.9906Z" fill="#24282E"/>
+</svg>
diff --git a/src/front/Assets/logo_standard_blue.svg b/src/front/Assets/logo_standard_blue.svg
new file mode 100644
index 00000000..2095bba7
--- /dev/null
+++ b/src/front/Assets/logo_standard_blue.svg
@@ -0,0 +1,15 @@
+<svg width="264" height="40" viewBox="0 0 264 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M57.3379 32.3839H67.4132V36.3293H52.4526V6.53737H57.3379V32.3839Z" fill="#013391"/>
+<path d="M91.7161 26.3419H73.6726C73.8172 28.2268 74.5144 29.745 75.7744 30.8863C77.0293 32.0276 78.5734 32.6008 80.4015 32.6008C83.0301 32.6008 84.8892 31.5008 85.9736 29.3009H91.2462C90.5336 31.475 89.2374 33.2515 87.3679 34.6355C85.4985 36.0195 83.1747 36.7166 80.4015 36.7166C78.1448 36.7166 76.1204 36.2105 74.3336 35.1932C72.5469 34.181 71.1474 32.7506 70.1352 30.907C69.123 29.0634 68.6118 26.9306 68.6118 24.4983C68.6118 22.066 69.1024 19.9332 70.0887 18.0896C71.0751 16.246 72.4591 14.8258 74.2459 13.824C76.0327 12.8221 78.0828 12.3212 80.3963 12.3212C82.7099 12.3212 84.6103 12.8066 86.3558 13.7775C88.1012 14.7484 89.4543 16.1117 90.4303 17.8727C91.4011 19.6285 91.8866 21.6528 91.8866 23.9354C91.8866 24.8236 91.8298 25.6241 91.7161 26.3367V26.3419ZM86.7844 22.3965C86.7534 20.5942 86.1131 19.1534 84.8582 18.0689C83.5981 16.9844 82.0437 16.4422 80.1846 16.4422C78.4959 16.4422 77.0552 16.9793 75.8571 18.0483C74.659 19.1224 73.9412 20.5684 73.714 22.3965H86.7844Z" fill="#013391"/>
+<path d="M97.9488 13.5245C99.307 11.2109 101.151 9.40347 103.48 8.10211C105.809 6.80074 108.36 6.15006 111.133 6.15006C114.304 6.15006 117.128 6.92985 119.597 8.48425C122.071 10.0438 123.862 12.2489 124.978 15.1047H119.106C118.337 13.5348 117.263 12.3625 115.894 11.5879C114.526 10.8133 112.935 10.4311 111.138 10.4311C109.165 10.4311 107.41 10.8752 105.865 11.7583C104.321 12.6466 103.113 13.9169 102.245 15.5746C101.373 17.2323 100.939 19.1585 100.939 21.3585C100.939 23.5584 101.373 25.4898 102.245 27.1475C103.118 28.8052 104.327 30.0859 105.865 30.9844C107.404 31.883 109.165 32.3323 111.138 32.3323C112.94 32.3323 114.526 31.9449 115.894 31.1755C117.263 30.406 118.337 29.2338 119.106 27.6587H124.978C123.862 30.5145 122.071 32.7144 119.597 34.2585C117.123 35.8026 114.304 36.572 111.133 36.572C108.334 36.572 105.772 35.9213 103.459 34.62C101.145 33.3186 99.307 31.5112 97.9488 29.1976C96.5907 26.8841 95.9141 24.2659 95.9141 21.3533C95.9141 18.4407 96.5907 15.8225 97.9488 13.509V13.5245Z" fill="#013391"/>
+<path d="M133.55 35.1932C131.748 34.181 130.333 32.7506 129.305 30.907C128.278 29.0634 127.761 26.9306 127.761 24.4983C127.761 22.066 128.288 19.9693 129.347 18.1102C130.405 16.2511 131.846 14.8258 133.674 13.824C135.502 12.8221 137.547 12.3212 139.804 12.3212C142.061 12.3212 144.106 12.8221 145.934 13.824C147.762 14.8258 149.208 16.2511 150.262 18.1102C151.32 19.9693 151.847 22.0969 151.847 24.4983C151.847 26.8996 151.305 29.0272 150.22 30.8863C149.136 32.7454 147.654 34.181 145.784 35.1932C143.915 36.2054 141.849 36.7166 139.592 36.7166C137.336 36.7166 135.347 36.2105 133.55 35.1932ZM143.125 31.568C144.225 30.9689 145.118 30.0652 145.805 28.8671C146.492 27.669 146.833 26.2076 146.833 24.4931C146.833 22.7786 146.502 21.3275 145.846 20.1449C145.19 18.9571 144.318 18.0637 143.233 17.4647C142.149 16.8657 140.976 16.5661 139.716 16.5661C138.456 16.5661 137.294 16.8657 136.225 17.4647C135.151 18.0637 134.304 18.9571 133.674 20.1449C133.044 21.3326 132.729 22.7786 132.729 24.4931C132.729 27.039 133.38 29.0014 134.681 30.3854C135.983 31.7694 137.62 32.4665 139.587 32.4665C140.842 32.4665 142.025 32.167 143.125 31.568Z" fill="#013391"/>
+<path d="M161.964 16.6952V36.3241H157.037V16.6952H154.254V12.7085H157.037V11.0353C157.037 8.319 157.76 6.34114 159.201 5.09658C160.642 3.85202 162.909 3.23232 165.997 3.23232V7.30683C164.51 7.30683 163.467 7.58569 162.868 8.14342C162.269 8.70115 161.969 9.66684 161.969 11.0353V12.7085H166.343V16.6952H161.964Z" fill="#013391"/>
+<path d="M177.049 16.6952V36.3241H172.122V16.6952H169.339V12.7085H172.122V11.0353C172.122 8.319 172.845 6.34114 174.286 5.09658C175.727 3.85202 177.994 3.23232 181.082 3.23232V7.30683C179.595 7.30683 178.552 7.58569 177.953 8.14342C177.354 8.70115 177.054 9.66684 177.054 11.0353V12.7085H181.428V16.6952H177.049Z" fill="#013391"/>
+<path d="M192.587 13.3334C193.775 12.662 195.18 12.3264 196.811 12.3264V17.3821H195.567C193.651 17.3821 192.205 17.8675 191.219 18.8384C190.232 19.8092 189.742 21.4979 189.742 23.894V36.3241H184.856V12.7085H189.742V16.1375C190.454 14.9394 191.405 13.9996 192.592 13.3282L192.587 13.3334Z" fill="#013391"/>
+<path d="M221.414 26.3419H203.37C203.515 28.2268 204.212 29.745 205.472 30.8863C206.727 32.0276 208.271 32.6008 210.099 32.6008C212.728 32.6008 214.587 31.5008 215.671 29.3009H220.944C220.231 31.475 218.935 33.2515 217.066 34.6355C215.196 36.0195 212.872 36.7166 210.099 36.7166C207.842 36.7166 205.818 36.2105 204.031 35.1932C202.244 34.181 200.845 32.7506 199.833 30.907C198.821 29.0634 198.309 26.9306 198.309 24.4983C198.309 22.066 198.8 19.9332 199.786 18.0896C200.773 16.246 202.157 14.8258 203.943 13.824C205.73 12.8221 207.78 12.3212 210.094 12.3212C212.408 12.3212 214.308 12.8066 216.053 13.7775C217.799 14.7484 219.152 16.1117 220.128 17.8727C221.099 19.6285 221.584 21.6528 221.584 23.9354C221.584 24.8236 221.527 25.6241 221.414 26.3367V26.3419ZM216.482 22.3965C216.451 20.5942 215.811 19.1534 214.556 18.0689C213.296 16.9844 211.741 16.4422 209.882 16.4422C208.194 16.4422 206.753 16.9793 205.555 18.0483C204.357 19.1224 203.639 20.5684 203.412 22.3965H216.482Z" fill="#013391"/>
+<path d="M226.04 35.9833C225.725 35.6683 225.57 35.2707 225.57 34.7852C225.57 34.2998 225.725 33.9022 226.04 33.5871C226.355 33.2721 226.753 33.1172 227.238 33.1172C227.693 33.1172 228.08 33.2721 228.395 33.5871C228.71 33.9022 228.865 34.2998 228.865 34.7852C228.865 35.2707 228.71 35.6735 228.395 35.9833C228.08 36.2983 227.693 36.4533 227.238 36.4533C226.753 36.4533 226.35 36.2983 226.04 35.9833Z" fill="#013391"/>
+<path d="M233.756 7.41528C233.441 7.11576 233.286 6.70779 233.286 6.19138C233.286 5.70595 233.441 5.30831 233.756 4.9933C234.071 4.67828 234.459 4.52336 234.913 4.52336C235.368 4.52336 235.755 4.67828 236.07 4.9933C236.385 5.30831 236.54 5.70595 236.54 6.19138C236.54 6.70779 236.385 7.11059 236.07 7.41528C235.755 7.7148 235.368 7.86456 234.913 7.86456C234.459 7.86456 234.071 7.7148 233.756 7.41528ZM235.858 13.0545V36.3293H233.927V13.0545H235.858Z" fill="#013391"/>
+<path d="M246.145 35.2139C244.399 34.243 243.036 32.8487 242.05 31.0361C241.063 29.2235 240.573 27.101 240.573 24.6687C240.573 22.2364 241.074 20.1604 242.07 18.3478C243.072 16.5352 244.451 15.146 246.207 14.1906C247.963 13.2353 249.93 12.755 252.099 12.755C254.268 12.755 256.23 13.2353 257.971 14.1906C259.716 15.146 261.079 16.5248 262.066 18.3271C263.052 20.1294 263.543 22.2415 263.543 24.6687C263.543 27.0958 263.042 29.2183 262.045 31.0361C261.043 32.8487 259.665 34.243 257.909 35.2139C256.153 36.1847 254.185 36.6701 252.016 36.6701C249.847 36.6701 247.885 36.1847 246.145 35.2139ZM256.752 33.8195C258.224 33.0604 259.401 31.914 260.289 30.3699C261.172 28.8258 261.617 26.9254 261.617 24.6687C261.617 22.412 261.172 20.5529 260.289 19.0088C259.401 17.4647 258.234 16.3183 256.773 15.5591C255.316 14.8 253.741 14.423 252.058 14.423C250.374 14.423 248.809 14.8 247.364 15.5591C245.923 16.3183 244.756 17.4647 243.873 19.0088C242.984 20.5529 242.545 22.4378 242.545 24.6687C242.545 26.8996 242.979 28.8258 243.852 30.3699C244.725 31.914 245.881 33.0656 247.322 33.8195C248.763 34.5787 250.328 34.9557 252.016 34.9557C253.705 34.9557 255.28 34.5787 256.752 33.8195Z" fill="#013391"/>
+<path d="M34.2668 11.4484C34.4117 11.6943 34.7078 11.814 34.985 11.7321L39.5905 10.3514C39.8362 10.2821 40 10.0552 40 9.80929V1.11585C40 0.498042 39.5023 0 38.8849 0H0.932437C0.371719 0 0.0315029 0.378271 0.0315029 0.926734L0 20.8353V38.8841C0 39.502 0.497719 40 1.11514 40H39.0676C39.6283 40 39.9685 39.6218 39.9685 39.067L40 19.1647V19.1016C40 18.3641 39.8929 17.8534 38.8912 18.1371L37.083 18.673C36.7932 18.7612 36.6042 19.0323 36.6168 19.3286L36.6483 19.9969C36.6483 27.9212 32.5217 33.6076 25.2386 35.8393C13.3249 39.4894 2.45708 30.134 3.42102 18.5532C4.08884 10.6036 10.4772 4.14814 18.4155 3.41685C25.1315 2.79904 31.1104 6.1718 34.2605 11.4358L34.2668 11.4484Z" fill="#013391"/>
+<path d="M26.2526 27.9906C27.9348 26.8306 29.2326 25.1537 29.9193 23.1931C30.1021 22.6572 30.247 22.0962 30.3352 21.5225C30.3919 21.1758 30.0643 20.8858 29.7303 20.9929L26.6369 21.9638C26.5046 22.0079 26.3975 22.1088 26.3471 22.2412C25.3706 24.6809 22.8505 26.3263 20.0028 25.9795C17.2244 25.6391 15.0005 23.3318 14.7548 20.5454C14.6729 19.6123 14.8052 18.7171 15.1013 17.9039C15.9518 15.6092 18.1632 13.9701 20.7526 13.9701C22.2142 13.9701 23.5561 14.4933 24.602 15.3633C24.7217 15.4642 24.8855 15.502 25.043 15.4516L27.9789 14.5311C28.1427 14.4807 28.2498 14.3546 28.2939 14.2159C28.3317 14.0709 28.3128 13.907 28.2057 13.7809C26.3093 11.5051 23.386 10.112 20.1414 10.3074C20.1036 10.3137 20.0658 10.32 20.028 10.32L19.0263 7.13005C18.9003 6.71398 18.4593 6.48071 18.0435 6.60679L15.7628 7.31917C15.347 7.45156 15.1139 7.89285 15.2462 8.30893L15.9896 10.6856C16.1219 11.1017 15.9581 11.5556 15.5927 11.7888C13.7845 12.9362 12.367 14.6635 11.6299 16.7061C11.3274 17.5256 11.1384 18.3956 11.0754 19.2971C11.0565 19.6312 11.0502 19.959 11.0628 20.2806C11.0817 20.7155 10.7982 21.1064 10.3824 21.2388L7.87493 22.0457C7.45912 22.1781 7.22601 22.6194 7.35201 23.0355L8.06394 25.3176C8.19624 25.7337 8.63726 25.9606 9.05308 25.8345L11.6047 25.0087C12.0079 24.8826 12.4552 25.0276 12.6883 25.3806C14.4271 27.9843 17.3883 29.7053 20.7526 29.7053C20.8975 29.7053 21.0361 29.7053 21.1747 29.7053C21.6157 29.6801 22.0126 29.9638 22.1449 30.3799L22.9198 32.8763C23.0521 33.2924 23.4931 33.5257 23.9089 33.3933L26.1896 32.6809C26.6054 32.5548 26.8322 32.1072 26.7062 31.6911L25.8872 29.0812C25.7612 28.6777 25.9061 28.2365 26.2526 27.9969V27.9906Z" fill="#013391"/>
+</svg>
diff --git a/src/front/Assets/logo_standard_neutral.svg b/src/front/Assets/logo_standard_neutral.svg
new file mode 100644
index 00000000..242b01dc
--- /dev/null
+++ b/src/front/Assets/logo_standard_neutral.svg
@@ -0,0 +1,15 @@
+<svg width="264" height="40" viewBox="0 0 264 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M57.3379 32.3839H67.4132V36.3293H52.4526V6.53737H57.3379V32.3839Z" fill="#24282E"/>
+<path d="M91.7161 26.3419H73.6726C73.8172 28.2268 74.5144 29.745 75.7744 30.8863C77.0293 32.0276 78.5734 32.6008 80.4015 32.6008C83.0301 32.6008 84.8892 31.5008 85.9736 29.3009H91.2462C90.5336 31.475 89.2374 33.2515 87.3679 34.6355C85.4985 36.0195 83.1747 36.7166 80.4015 36.7166C78.1448 36.7166 76.1204 36.2105 74.3336 35.1932C72.5469 34.181 71.1474 32.7506 70.1352 30.907C69.123 29.0634 68.6118 26.9306 68.6118 24.4983C68.6118 22.066 69.1024 19.9332 70.0887 18.0896C71.0751 16.246 72.4591 14.8258 74.2459 13.824C76.0327 12.8221 78.0828 12.3212 80.3963 12.3212C82.7099 12.3212 84.6103 12.8066 86.3558 13.7775C88.1012 14.7484 89.4543 16.1117 90.4303 17.8727C91.4011 19.6285 91.8866 21.6528 91.8866 23.9354C91.8866 24.8236 91.8298 25.6241 91.7161 26.3367V26.3419ZM86.7844 22.3965C86.7534 20.5942 86.1131 19.1534 84.8582 18.0689C83.5981 16.9844 82.0437 16.4422 80.1846 16.4422C78.4959 16.4422 77.0552 16.9793 75.8571 18.0483C74.659 19.1224 73.9412 20.5684 73.714 22.3965H86.7844Z" fill="#24282E"/>
+<path d="M97.9488 13.5245C99.307 11.2109 101.151 9.40347 103.48 8.10211C105.809 6.80074 108.36 6.15006 111.133 6.15006C114.304 6.15006 117.128 6.92985 119.597 8.48425C122.071 10.0438 123.862 12.2489 124.978 15.1047H119.106C118.337 13.5348 117.263 12.3625 115.894 11.5879C114.526 10.8133 112.935 10.4311 111.138 10.4311C109.165 10.4311 107.41 10.8752 105.865 11.7583C104.321 12.6466 103.113 13.9169 102.245 15.5746C101.373 17.2323 100.939 19.1585 100.939 21.3585C100.939 23.5584 101.373 25.4898 102.245 27.1475C103.118 28.8052 104.327 30.0859 105.865 30.9844C107.404 31.883 109.165 32.3323 111.138 32.3323C112.94 32.3323 114.526 31.9449 115.894 31.1755C117.263 30.406 118.337 29.2338 119.106 27.6587H124.978C123.862 30.5145 122.071 32.7144 119.597 34.2585C117.123 35.8026 114.304 36.572 111.133 36.572C108.334 36.572 105.772 35.9213 103.459 34.62C101.145 33.3186 99.307 31.5112 97.9488 29.1976C96.5907 26.8841 95.9141 24.2659 95.9141 21.3533C95.9141 18.4407 96.5907 15.8225 97.9488 13.509V13.5245Z" fill="#24282E"/>
+<path d="M133.55 35.1932C131.748 34.181 130.333 32.7506 129.305 30.907C128.278 29.0634 127.761 26.9306 127.761 24.4983C127.761 22.066 128.288 19.9693 129.347 18.1102C130.405 16.2511 131.846 14.8258 133.674 13.824C135.502 12.8221 137.547 12.3212 139.804 12.3212C142.061 12.3212 144.106 12.8221 145.934 13.824C147.762 14.8258 149.208 16.2511 150.262 18.1102C151.32 19.9693 151.847 22.0969 151.847 24.4983C151.847 26.8996 151.305 29.0272 150.22 30.8863C149.136 32.7454 147.654 34.181 145.784 35.1932C143.915 36.2054 141.849 36.7166 139.592 36.7166C137.336 36.7166 135.347 36.2105 133.55 35.1932ZM143.125 31.568C144.225 30.9689 145.118 30.0652 145.805 28.8671C146.492 27.669 146.833 26.2076 146.833 24.4931C146.833 22.7786 146.502 21.3275 145.846 20.1449C145.19 18.9571 144.318 18.0637 143.233 17.4647C142.149 16.8657 140.976 16.5661 139.716 16.5661C138.456 16.5661 137.294 16.8657 136.225 17.4647C135.151 18.0637 134.304 18.9571 133.674 20.1449C133.044 21.3326 132.729 22.7786 132.729 24.4931C132.729 27.039 133.38 29.0014 134.681 30.3854C135.983 31.7694 137.62 32.4665 139.587 32.4665C140.842 32.4665 142.025 32.167 143.125 31.568Z" fill="#24282E"/>
+<path d="M161.964 16.6952V36.3241H157.037V16.6952H154.254V12.7085H157.037V11.0353C157.037 8.319 157.76 6.34114 159.201 5.09658C160.642 3.85202 162.909 3.23232 165.997 3.23232V7.30683C164.51 7.30683 163.467 7.58569 162.868 8.14342C162.269 8.70115 161.969 9.66684 161.969 11.0353V12.7085H166.343V16.6952H161.964Z" fill="#24282E"/>
+<path d="M177.049 16.6952V36.3241H172.122V16.6952H169.339V12.7085H172.122V11.0353C172.122 8.319 172.845 6.34114 174.286 5.09658C175.727 3.85202 177.994 3.23232 181.082 3.23232V7.30683C179.595 7.30683 178.552 7.58569 177.953 8.14342C177.354 8.70115 177.054 9.66684 177.054 11.0353V12.7085H181.428V16.6952H177.049Z" fill="#24282E"/>
+<path d="M192.587 13.3334C193.775 12.662 195.18 12.3264 196.811 12.3264V17.3821H195.567C193.651 17.3821 192.205 17.8675 191.219 18.8384C190.232 19.8092 189.742 21.4979 189.742 23.894V36.3241H184.856V12.7085H189.742V16.1375C190.454 14.9394 191.405 13.9996 192.592 13.3282L192.587 13.3334Z" fill="#24282E"/>
+<path d="M221.414 26.3419H203.37C203.515 28.2268 204.212 29.745 205.472 30.8863C206.727 32.0276 208.271 32.6008 210.099 32.6008C212.728 32.6008 214.587 31.5008 215.671 29.3009H220.944C220.231 31.475 218.935 33.2515 217.066 34.6355C215.196 36.0195 212.872 36.7166 210.099 36.7166C207.842 36.7166 205.818 36.2105 204.031 35.1932C202.244 34.181 200.845 32.7506 199.833 30.907C198.821 29.0634 198.309 26.9306 198.309 24.4983C198.309 22.066 198.8 19.9332 199.786 18.0896C200.773 16.246 202.157 14.8258 203.943 13.824C205.73 12.8221 207.78 12.3212 210.094 12.3212C212.408 12.3212 214.308 12.8066 216.053 13.7775C217.799 14.7484 219.152 16.1117 220.128 17.8727C221.099 19.6285 221.584 21.6528 221.584 23.9354C221.584 24.8236 221.527 25.6241 221.414 26.3367V26.3419ZM216.482 22.3965C216.451 20.5942 215.811 19.1534 214.556 18.0689C213.296 16.9844 211.741 16.4422 209.882 16.4422C208.194 16.4422 206.753 16.9793 205.555 18.0483C204.357 19.1224 203.639 20.5684 203.412 22.3965H216.482Z" fill="#24282E"/>
+<path d="M226.04 35.9833C225.725 35.6683 225.57 35.2707 225.57 34.7852C225.57 34.2998 225.725 33.9022 226.04 33.5871C226.355 33.2721 226.753 33.1172 227.238 33.1172C227.693 33.1172 228.08 33.2721 228.395 33.5871C228.71 33.9022 228.865 34.2998 228.865 34.7852C228.865 35.2707 228.71 35.6735 228.395 35.9833C228.08 36.2983 227.693 36.4533 227.238 36.4533C226.753 36.4533 226.35 36.2983 226.04 35.9833Z" fill="#24282E"/>
+<path d="M233.756 7.41528C233.441 7.11576 233.286 6.70779 233.286 6.19138C233.286 5.70595 233.441 5.30831 233.756 4.9933C234.071 4.67828 234.459 4.52336 234.913 4.52336C235.368 4.52336 235.755 4.67828 236.07 4.9933C236.385 5.30831 236.54 5.70595 236.54 6.19138C236.54 6.70779 236.385 7.11059 236.07 7.41528C235.755 7.7148 235.368 7.86456 234.913 7.86456C234.459 7.86456 234.071 7.7148 233.756 7.41528ZM235.858 13.0545V36.3293H233.927V13.0545H235.858Z" fill="#24282E"/>
+<path d="M246.145 35.2139C244.399 34.243 243.036 32.8487 242.05 31.0361C241.063 29.2235 240.573 27.101 240.573 24.6687C240.573 22.2364 241.074 20.1604 242.07 18.3478C243.072 16.5352 244.451 15.146 246.207 14.1906C247.963 13.2353 249.93 12.755 252.099 12.755C254.268 12.755 256.23 13.2353 257.971 14.1906C259.716 15.146 261.079 16.5248 262.066 18.3271C263.052 20.1294 263.543 22.2415 263.543 24.6687C263.543 27.0958 263.042 29.2183 262.045 31.0361C261.043 32.8487 259.665 34.243 257.909 35.2139C256.153 36.1847 254.185 36.6701 252.016 36.6701C249.847 36.6701 247.885 36.1847 246.145 35.2139ZM256.752 33.8195C258.224 33.0604 259.401 31.914 260.289 30.3699C261.172 28.8258 261.617 26.9254 261.617 24.6687C261.617 22.412 261.172 20.5529 260.289 19.0088C259.401 17.4647 258.234 16.3183 256.773 15.5591C255.316 14.8 253.741 14.423 252.058 14.423C250.374 14.423 248.809 14.8 247.364 15.5591C245.923 16.3183 244.756 17.4647 243.873 19.0088C242.984 20.5529 242.545 22.4378 242.545 24.6687C242.545 26.8996 242.979 28.8258 243.852 30.3699C244.725 31.914 245.881 33.0656 247.322 33.8195C248.763 34.5787 250.328 34.9557 252.016 34.9557C253.705 34.9557 255.28 34.5787 256.752 33.8195Z" fill="#24282E"/>
+<path d="M34.2668 11.4484C34.4117 11.6943 34.7078 11.814 34.985 11.7321L39.5905 10.3514C39.8362 10.2821 40 10.0552 40 9.80929V1.11585C40 0.498042 39.5023 0 38.8849 0H0.932437C0.371719 0 0.0315029 0.378271 0.0315029 0.926734L0 20.8353V38.8841C0 39.502 0.497719 40 1.11514 40H39.0676C39.6283 40 39.9685 39.6218 39.9685 39.067L40 19.1647V19.1016C40 18.3641 39.8929 17.8534 38.8912 18.1371L37.083 18.673C36.7932 18.7612 36.6042 19.0323 36.6168 19.3286L36.6483 19.9969C36.6483 27.9212 32.5217 33.6076 25.2386 35.8393C13.3249 39.4894 2.45708 30.134 3.42102 18.5532C4.08884 10.6036 10.4772 4.14814 18.4155 3.41685C25.1315 2.79904 31.1104 6.1718 34.2605 11.4358L34.2668 11.4484Z" fill="#24282E"/>
+<path d="M26.2526 27.9906C27.9348 26.8306 29.2326 25.1537 29.9193 23.1931C30.1021 22.6572 30.247 22.0962 30.3352 21.5225C30.3919 21.1758 30.0643 20.8858 29.7303 20.9929L26.6369 21.9638C26.5046 22.0079 26.3975 22.1088 26.3471 22.2412C25.3706 24.6809 22.8505 26.3263 20.0028 25.9795C17.2244 25.6391 15.0005 23.3318 14.7548 20.5454C14.6729 19.6123 14.8052 18.7171 15.1013 17.9039C15.9518 15.6092 18.1632 13.9701 20.7526 13.9701C22.2142 13.9701 23.5561 14.4933 24.602 15.3633C24.7217 15.4642 24.8855 15.502 25.043 15.4516L27.9789 14.5311C28.1427 14.4807 28.2498 14.3546 28.2939 14.2159C28.3317 14.0709 28.3128 13.907 28.2057 13.7809C26.3093 11.5051 23.386 10.112 20.1414 10.3074C20.1036 10.3137 20.0658 10.32 20.028 10.32L19.0263 7.13005C18.9003 6.71398 18.4593 6.48071 18.0435 6.60679L15.7628 7.31917C15.347 7.45156 15.1139 7.89285 15.2462 8.30893L15.9896 10.6856C16.1219 11.1017 15.9581 11.5556 15.5927 11.7888C13.7845 12.9362 12.367 14.6635 11.6299 16.7061C11.3274 17.5256 11.1384 18.3956 11.0754 19.2971C11.0565 19.6312 11.0502 19.959 11.0628 20.2806C11.0817 20.7155 10.7982 21.1064 10.3824 21.2388L7.87493 22.0457C7.45912 22.1781 7.22601 22.6194 7.35201 23.0355L8.06394 25.3176C8.19624 25.7337 8.63726 25.9606 9.05308 25.8345L11.6047 25.0087C12.0079 24.8826 12.4552 25.0276 12.6883 25.3806C14.4271 27.9843 17.3883 29.7053 20.7526 29.7053C20.8975 29.7053 21.0361 29.7053 21.1747 29.7053C21.6157 29.6801 22.0126 29.9638 22.1449 30.3799L22.9198 32.8763C23.0521 33.2924 23.4931 33.5257 23.9089 33.3933L26.1896 32.6809C26.6054 32.5548 26.8322 32.1072 26.7062 31.6911L25.8872 29.0812C25.7612 28.6777 25.9061 28.2365 26.2526 27.9969V27.9906Z" fill="#24282E"/>
+</svg>
diff --git a/src/front/Components/DesignSystem/Header/index.tsx b/src/front/Components/DesignSystem/Header/index.tsx
index d4d658a8..785c45ed 100644
--- a/src/front/Components/DesignSystem/Header/index.tsx
+++ b/src/front/Components/DesignSystem/Header/index.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import classes from "./classes.module.scss";
 import Image from "next/image";
-import LogoIcon from "@Assets/logo.svg";
+import LogoIcon from "@Assets/logo_standard_neutral.svg";
 import Link from "next/link";
 import Navigation from "./Navigation";
 import Notifications from "./Notifications";
diff --git a/src/front/Components/Materials/Header/index.tsx b/src/front/Components/Materials/Header/index.tsx
index 5eec49eb..8e0455d6 100644
--- a/src/front/Components/Materials/Header/index.tsx
+++ b/src/front/Components/Materials/Header/index.tsx
@@ -2,7 +2,7 @@ import Link from "next/link";
 import React from "react";
 import Image from "next/image";
 import TezosLinkLogo from "@Assets/link_logo.svg";
-import Logo from "@Assets/logo.svg";
+import Logo from "@Assets/logo_standard_neutral.svg";
 import classes from "./classes.module.scss";
 import Burger from "@Front/Components/Elements/Burger";