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/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/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..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.P_ERR_16} color={ITypoColor.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/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..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.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.GREY} typo={ITypo.CAPTION_14}>
+								<Typography color={ITypoColor.COLOR_NEUTRAL_500} typo={ITypo.TEXT_SM_REGULAR}>
 									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.TEXT_MD_REGULAR}
+											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.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
 										Chargement...
 									</Typography>
 								</div>
@@ -188,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.PINK_FLASH} 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>
@@ -203,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 />
@@ -211,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>
@@ -262,26 +268,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.TEXT_SM_REGULAR}>
 						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.TEXT_SM_REGULAR}>
 						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.TEXT_SM_REGULAR}>
 						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.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/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..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>
@@ -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.TEXT_MD_SEMIBOLD}
+											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.TEXT_SM_REGULAR}>
 											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.TEXT_MD_REGULAR} 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.TEXT_MD_SEMIBOLD}
+											color={ITypoColor.COLOR_SECONDARY_500}
+											className={classes["add-document"]}>
 											Ajouter un document <Image src={PlusIcon} alt="Plus icon" />
 										</Typography>
 									</Button>
@@ -167,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>
@@ -176,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/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..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.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.GREY} 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.GREY} 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.PINK_FLASH} 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/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/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 81046eff..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.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/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/FolderBoxInformation/index.tsx b/src/front/Components/DesignSystem/FolderBoxInformation/index.tsx
index 7048b425..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,42 +70,56 @@ 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_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.NAV_INPUT_16}>Note client</Typography>
-						<Typography typo={ITypo.P_18}>{note?.content ?? ""}</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.NAV_INPUT_16}>Note archive</Typography>
-						<Typography typo={ITypo.P_18}>{folder.archived_description ?? ""}</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>
 				);
 			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_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.NAV_INPUT_16}>Numéro de dossier</Typography>
-							<Typography typo={ITypo.P_18}>{folder.folder_number ?? ""}</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.NAV_INPUT_16}>Type d'acte</Typography>
-							<Typography typo={ITypo.P_18}>{folder.deed?.deed_type?.name ?? ""}</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.NAV_INPUT_16}>Ouverture du dossier</Typography>
-							<Typography typo={ITypo.P_18}>{formatDate(folder.created_at)}</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/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/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/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..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.RED_FLASH}>
+				<Typography key={key} typo={ITypo.TEXT_SM_REGULAR} 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..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.NAV_INPUT_16} color={ITypoColor.GREY}>
+			<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/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..5e8b376d 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_REGULAR}>
 										<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.RED_FLASH}>
+			<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/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..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.NAV_INPUT_16} color={ITypoColor.GREY}>
+			<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/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..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.NAV_INPUT_16} color={ITypoColor.GREY}>
+			<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 4c3e1dae..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,11 @@ 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_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" />}
 					</div>
 					<div className={classes["underline"]} data-active={(isActive || isSubmenuOpened).toString()} />
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/HeaderLink/index.tsx b/src/front/Components/DesignSystem/Header/HeaderLink/index.tsx
index 5f9230bd..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.P_SB_18 : ITypo.NAV_HEADER_18}>{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.NAV_HEADER_18}>{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 60c836f2..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.P_SB_18 : ITypo.NAV_HEADER_18}>{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/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/HeaderSubmenu/index.tsx b/src/front/Components/DesignSystem/Header/HeaderSubmenu/index.tsx
index 9a0c4c4a..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.P_SB_18 : ITypo.NAV_HEADER_18}>{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 021f0f43..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.P_SB_18 : ITypo.NAV_HEADER_18}>{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/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..adc9a9da 100644
--- a/src/front/Components/DesignSystem/Header/Notifications/NotificationModal/index.tsx
+++ b/src/front/Components/DesignSystem/Header/Notifications/NotificationModal/index.tsx
@@ -34,22 +34,22 @@ 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.PINK_FLASH}>
+						<Typography typo={ITypo.TEXT_SM_REGULAR} 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.TEXT_LG_REGULAR} 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..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.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/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/LogOutButton/index.tsx b/src/front/Components/DesignSystem/LogOutButton/index.tsx
index a2ca2042..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";
@@ -11,14 +11,16 @@ 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_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/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/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/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/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..f4a121d4 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);
@@ -56,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.NAV_INPUT_16}>{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"]}>
@@ -147,7 +148,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.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 b27c3c34..14e2a9a7 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.TITLE_H5} color={ITypoColor.COLOR_GENERIC_WHITE}>
 									Restez Informé(e) avec notre Newsletter
 								</Typography>
-								<Typography typo={ITypo.P_18} color={ITypoColor.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.RED_FLASH}>
+										<Typography typo={ITypo.TEXT_MD_REGULAR} 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.TEXT_MD_REGULAR} 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/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/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..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.P_ERR_18} color={ITypoColor.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/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/SearchBar/index.tsx b/src/front/Components/DesignSystem/SearchBar/index.tsx
index cf1bf6c8..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.P_ERR_18}>
+					<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/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..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.P_ERR_16} color={ITypoColor.BLACK}>
+			<Typography typo={ITypo.TEXT_MD_REGULAR} 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..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.GREY}>
+					<Typography typo={ITypo.TEXT_SM_REGULAR} 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..f77acf04 100644
--- a/src/front/Components/DesignSystem/Typography/classes.module.scss
+++ b/src/front/Components/DesignSystem/Typography/classes.module.scss
@@ -2,165 +2,279 @@
 @import "@Themes/modes.scss";
 
 .root {
-	color: $black;
+	color: $color-neutral-950;
 	vertical-align: center;
-	font-family: "Inter", sans-serif;
-	&.H1-60 {
+	font-family: "Poppins", sans-serif;
+
+	//Displays
+	&.display-large {
 		font-style: normal;
-		font-weight: 500;
-		font-size: 56px;
-		line-height: 67.2px;
+		font-weight: 600;
+		font-size: 50px;
+		line-height: 75px;
+		letter-spacing: -2%;
 
 		@media (max-width: $screen-m) {
 			font-size: 48px;
-			line-height: 56.7px;
+			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;
+			line-height: 72px;
 		}
 	}
 
-	&.H1-bis-40 {
+	//Titles
+	&.title-h1 {
 		font-style: normal;
-		font-weight: 500;
+		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%;
 	}
-
-	&.H2-30 {
-		font-style: normal;
-		font-weight: 500;
-		font-size: 30px;
-		line-height: 36px;
-	}
-
-	&.H3-24 {
+	&.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: 29px;
+		line-height: 36px;
+		letter-spacing: -2%;
+	}
+	&.title-h6 {
+		font-style: normal;
+		font-weight: 400;
+		font-size: 20px;
+		line-height: 30px;
+		letter-spacing: -2%;
 	}
 
-	&.Paragraphe-semibold-18 {
+	//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%;
 	}
-
-	&.Paragraphe-simple-18 {
+	&.text-lg-regular {
 		font-style: normal;
 		font-weight: 400;
 		font-size: 18px;
-		line-height: 22px;
+		line-height: 27px;
+		letter-spacing: 0.5%;
 	}
-
-	&.Paragraphe-MAJ-18 {
+	&.text-lg-uppercase {
 		font-style: normal;
 		font-weight: 400;
 		font-size: 18px;
-		line-height: 22px;
+		line-height: 27px;
+		letter-spacing: 0.5%;
 		text-transform: uppercase;
 	}
-
-	&.Nav-header-off-18 {
+	&.text-lg-light {
 		font-style: normal;
-		font-weight: 400;
+		font-weight: 300;
 		font-size: 18px;
-		line-height: 22px;
-		letter-spacing: 0.5px;
-		color: $grey;
+		line-height: 27px;
+		letter-spacing: 0.5%;
 	}
 
-	&.Paragraphe-18-error {
+	//Text medium
+	&.text-md-bold {
 		font-style: normal;
-		font-weight: 400;
-		font-size: 18px;
-		line-height: 22px;
-		letter-spacing: 0.5px;
+		font-weight: 700;
+		font-size: 16px;
+		line-height: 24px;
+		letter-spacing: 0.5%;
 	}
-
-	&.Paragraphe-semibold-16 {
+	&.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%;
 	}
-
-	&.Nav-input-off-16 {
+	&.text-md-regular {
 		font-style: normal;
 		font-weight: 400;
 		font-size: 16px;
-		line-height: 22px;
-		letter-spacing: 0.5px;
-		color: $grey;
+		line-height: 24px;
+		letter-spacing: 0.5%;
 	}
-
-	&.Paragraphe-simple-16 {
+	&.text-md-uppercase {
 		font-style: normal;
 		font-weight: 400;
 		font-size: 16px;
-		line-height: 22px;
-		letter-spacing: 0.005em;
+		line-height: 24px;
+		letter-spacing: 0.5%;
+		text-transform: uppercase;
 	}
-
-	&.Paragraphe-16-error {
-		color: $re-hover;
+	&.text-md-light {
 		font-style: normal;
-		font-weight: 400;
+		font-weight: 300;
 		font-size: 16px;
-		line-height: 22px;
-		letter-spacing: 0.5px;
+		line-height: 24px;
+		letter-spacing: 0.5%;
 	}
 
-	&.Caption_14 {
+	//Text small
+	&.text-sm-bold {
 		font-style: normal;
-		font-weight: 400;
+		font-weight: 700;
 		font-size: 14px;
-		line-height: 22px;
-		letter-spacing: 0.5px;
+		line-height: 21px;
+		letter-spacing: 0.5%;
 	}
-
-	&.Caption_14-semibold {
+	&.text-sm-semibold {
 		font-style: normal;
 		font-weight: 600;
 		font-size: 14px;
-		line-height: 22px;
-		letter-spacing: 0.5px;
+		line-height: 21px;
+		letter-spacing: 0.5%;
+	}
+	&.text-sm-regular {
+		font-style: normal;
+		font-weight: 400;
+		font-size: 14px;
+		line-height: 21px;
+		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%;
 	}
 
-	&.re-hover {
-		color: $re-hover;
+	//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.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%;
 	}
 
-	&.grey {
-		color: $grey;
+	//Caption
+	&.caption-bold {
+		font-style: normal;
+		font-weight: 700;
+		font-size: 10px;
+		line-height: 15px;
+		letter-spacing: -2%;
 	}
-
-	&.black {
-		color: $black;
+	&.caption-semibold {
+		font-style: normal;
+		font-weight: 600;
+		font-size: 10px;
+		line-height: 15px;
+		letter-spacing: -2%;
 	}
-
-	&.purple-flash {
-		color: var(--purple-flash);
+	&.caption-regular {
+		font-style: normal;
+		font-weight: 400;
+		font-size: 10px;
+		line-height: 15px;
+		letter-spacing: -2%;
 	}
-
-	&.pink-flash {
-		color: var(--pink-flash);
+	&.caption-uppercase {
+		font-style: normal;
+		font-weight: 400;
+		font-size: 10px;
+		line-height: 15px;
+		letter-spacing: -2%;
+		text-transform: uppercase;
 	}
-
-	&.green-flash {
-		color: var(--green-flash);
-	}
-
-	&.red-flash {
-		color: var(--red-flash);
-	}
-
-	&.orange-flash {
-		color: var(--orange-flash);
-	}
-
-	&.white {
-		color: $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-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 1cc80368..da974116 100644
--- a/src/front/Components/DesignSystem/Typography/index.tsx
+++ b/src/front/Components/DesignSystem/Typography/index.tsx
@@ -12,36 +12,134 @@ type IProps = {
 type IState = {};
 
 export enum ITypo {
-	H1 = "H1-60",
-	H1Bis = "H1-bis-40",
-	H2 = "H2-30",
-	H3 = "H3-24",
+	DISPLAY_LARGE = "display-large",
+	DISPLAY_MEDIUM = "display-medium",
+	DISPLAY_SMALL = "display-small",
 
-	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_H2 = "title-h2",
+	TITLE_H3 = "title-h3",
+	TITLE_H4 = "title-h4",
+	TITLE_H5 = "title-h5",
+	TITLE_H6 = "title-h6",
 
-	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_BOLD = "text-lg-bold",
+	TEXT_LG_SEMIBOLD = "text-lg-semibold",
+	TEXT_LG_REGULAR = "text-lg-regular",
+	TEXT_LG_UPPERCASE = "text-lg-uppercase",
+	TEXT_LG_light = "text-lg-light",
 
-	CAPTION_14 = "Caption_14",
-	CAPTION_14_SB = "Caption_14-semibold",
+	TEXT_MD_BOLD = "text-md-bold",
+	TEXT_MD_SEMIBOLD = "text-md-semibold",
+	TEXT_MD_REGULAR = "text-md-regular",
+	TEXT_MD_UPPERCASE = "text-md-uppercase",
+	TEXT_MD_light = "text-md-light",
+
+	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 {
-	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_GENERIC_BLACK = "color-generic-black",
+	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/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/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/UserFolderHeader/index.tsx b/src/front/Components/DesignSystem/UserFolder/UserFolderHeader/index.tsx
index 1feab63f..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,26 +38,34 @@ 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_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.NAV_INPUT_16}>Prénom</Typography>
-						<Typography typo={ITypo.P_18}>{this.props.customer.contact.first_name}</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.NAV_INPUT_16}>Numéro de téléphone</Typography>
-						<Typography typo={ITypo.P_18}>
+						<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() ?? "")}
 						</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_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
+							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/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..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.GREY}>
+				<Typography typo={ITypo.TEXT_MD_REGULAR} 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/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/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..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.GREY}>
+					<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.GREY}>
+					<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.GREY}>
+						<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.GREY}>
+					<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/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..41cf6212 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.GREEN_FLASH}>
+							<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.GREY}>
+						<Typography typo={ITypo.TEXT_MD_REGULAR} 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.GREY}>
+						<Typography typo={ITypo.TEXT_MD_REGULAR} 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.GREY}>
+						<Typography typo={ITypo.TEXT_MD_REGULAR} 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.GREY}>
+						<Typography typo={ITypo.TEXT_MD_REGULAR} 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 00314e81..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.GREY}>
+							<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/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..41f8331c 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,18 @@ 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.BLACK}>
+							<Typography
+								typo={ITypo.TEXT_MD_REGULAR}
+								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 +157,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 +187,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 +201,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 319c5bbd..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.GREY}>
+							<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/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..9f055668 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.GREY}>
+							<Typography typo={ITypo.TEXT_MD_REGULAR} 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.GREY}>
+							<Typography typo={ITypo.TEXT_MD_REGULAR} 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.GREY}>
+							<Typography typo={ITypo.TEXT_MD_REGULAR} 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 99b018b4..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.GREY}>
+							<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..cead18f7 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_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.P_ERR_18}>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 3bda2b0b..9b21ccce 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_REGULAR}>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_REGULAR}>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 6a6c75b8..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.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 8dbb9084..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.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.PURPLE_FLASH} 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.PURPLE_FLASH}>
+								<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 6a195747..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.GREY}>
+							<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 5a5f46d0..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.GREY}>
+									<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.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.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/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..2e999189 100644
--- a/src/front/Components/Layouts/Folder/ViewDocuments/OcrResult/index.tsx
+++ b/src/front/Components/Layouts/Folder/ViewDocuments/OcrResult/index.tsx
@@ -13,19 +13,19 @@ 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.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()}>
-                            {this.props.percentage}%
-                        </Typography>
-                        <div className={classes["dot"]} data-color={this.getColor()} />
-                    </div>
+					<div className={classes["percentage-container"]}>
+						<Typography typo={ITypo.TEXT_LG_REGULAR} 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..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.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.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.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.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.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 b0a21db8..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.GREY}>
+							<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 bd084620..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.GREY}>
+						<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 ef018df8..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.GREY}>
+									<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 cda457a3..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.GREY}>
+							<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 1ffcd778..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.GREY} 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 eb343bfd..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.GREY} 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 9c97e688..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.PINK_FLASH}>
+						<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/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..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.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.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 7510f09d..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.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.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.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/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..32ec1c8b 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.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.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.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.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.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.GREY}>
+						<Typography typo={ITypo.TEXT_MD_REGULAR} 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.GREY}>
+						<Typography typo={ITypo.TEXT_MD_REGULAR} 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.GREY}>
+						<Typography typo={ITypo.TEXT_MD_REGULAR} 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.BLACK}>
+								<Typography typo={ITypo.TEXT_LG_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK}>
 									Nom
 								</Typography>
-								<Typography typo={ITypo.P_SB_18} color={ITypoColor.BLACK}>
+								<Typography typo={ITypo.TEXT_LG_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK}>
 									Prénom
 								</Typography>
-								<Typography typo={ITypo.P_SB_18} color={ITypoColor.BLACK}>
+								<Typography typo={ITypo.TEXT_LG_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK}>
 									E-mail
 								</Typography>
-								<Typography typo={ITypo.P_SB_18} color={ITypoColor.BLACK}>
+								<Typography typo={ITypo.TEXT_LG_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK}>
 									Téléphone
 								</Typography>
-								<Typography typo={ITypo.P_SB_18} color={ITypoColor.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.BLACK}>
+								<Typography typo={ITypo.TEXT_LG_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK}>
 									Nom
 								</Typography>
-								<Typography typo={ITypo.P_SB_18} color={ITypoColor.BLACK}>
+								<Typography typo={ITypo.TEXT_LG_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK}>
 									Prénom
 								</Typography>
-								<Typography typo={ITypo.P_SB_18} color={ITypoColor.BLACK}>
+								<Typography typo={ITypo.TEXT_LG_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK}>
 									E-mail
 								</Typography>
-								<Typography typo={ITypo.P_SB_18} color={ITypoColor.BLACK}>
+								<Typography typo={ITypo.TEXT_LG_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK}>
 									Téléphone
 								</Typography>
-								<Typography typo={ITypo.P_SB_18} color={ITypoColor.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 1427203c..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.GREY}>
+							<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 0e4507b7..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.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.GREY}>
+								<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.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.GREY}>
+					<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 333601eb..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.GREY}>
+							<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 3c24a43b..38e09fe0 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.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_REGULAR}>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_REGULAR}>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.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.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.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.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.BLACK}>
+								<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_GENERIC_BLACK}>
 									{numberOfCollaborators} collaborateurs
 								</Typography>
-								<Typography typo={ITypo.CAPTION_14_SB} color={ITypoColor.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.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.BLACK}>
+								<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_GENERIC_BLACK}>
 									Total HT
 								</Typography>
-								<Typography typo={ITypo.P_SB_18} color={ITypoColor.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.BLACK}>
+								<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_GENERIC_BLACK}>
 									TVA 20%
 								</Typography>
-								<Typography typo={ITypo.P_SB_18} color={ITypoColor.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.BLACK}>
+							<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_GENERIC_BLACK}>
 								TVA 20%
 							</Typography>
-							<Typography typo={ITypo.P_SB_18} color={ITypoColor.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.BLACK}>
+						<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_GENERIC_BLACK}>
 							Total TTC
 						</Typography>
-						<Typography typo={ITypo.P_SB_18} color={ITypoColor.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 886c9e3c..7fcc1613 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.TITLE_H3} 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.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.GREY} />
-								<Typography typo={ITypo.P_16} color={ITypoColor.GREY}>
+								<Check 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.GREY} />
-								<Typography typo={ITypo.P_16} color={ITypoColor.GREY}>
+								<Check 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.BLACK} />
-								<Typography typo={ITypo.P_16} color={ITypoColor.BLACK}>
+								<Check 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_REGULAR}>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_REGULAR}>Mensuel</Typography>
 					</RadioBox>
 				</div>
 				<div className={classes["separator"]} />
 				<div className={classes["container-line"]}>
-					<Typography typo={ITypo.P_18} color={ITypoColor.BLACK}>
+					<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_GENERIC_BLACK}>
 						Total TTC
 					</Typography>
-					<Typography typo={ITypo.P_SB_18} color={ITypoColor.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 1af57fc9..94dd619c 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.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.GREY} />
-								<Typography typo={ITypo.P_16} color={ITypoColor.GREY}>
+								<Check 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.GREY} />
-								<Typography typo={ITypo.P_16} color={ITypoColor.GREY}>
+								<Check 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.GREY} />
-								<Typography typo={ITypo.P_16} color={ITypoColor.GREY}>
+								<Check 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_REGULAR}>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_REGULAR}>Mensuel</Typography>
 					</RadioBox>
 				</div>
 				<div className={classes["separator"]} />
 				<div className={classes["container-line"]}>
-					<Typography typo={ITypo.P_18} color={ITypoColor.BLACK}>
+					<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_GENERIC_BLACK}>
 						Total TTC
 					</Typography>
-					<Typography typo={ITypo.P_SB_18} color={ITypoColor.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 ce769b4c..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.BLACK}>
+			<Typography typo={ITypo.TEXT_LG_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK}>
 				Informations client
 			</Typography>
-			<Typography typo={ITypo.P_18} color={ITypoColor.BLACK}>
+			<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_GENERIC_BLACK}>
 				{customer.email}
 			</Typography>
-			{/* <Typography typo={ITypo.P_SB_18} color={ITypoColor.BLACK}>
+			{/* <Typography typo={ITypo.TEXT_LG_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK}>
 				Adresse de facturation
 			</Typography> */}
-			<Typography typo={ITypo.P_18} color={ITypoColor.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 17a66917..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.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.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.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/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..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.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 056267b6..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.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.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.BLACK}>
+									<Typography typo={ITypo.TEXT_LG_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK}>
 										Forfait standard
 									</Typography>
-									<Typography typo={ITypo.P_16} color={ITypoColor.PINK_FLASH}>
+									<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.GREEN_FLASH}>
+										<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.GREEN_FLASH}>
+										<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.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.BLACK}>
+									<Typography typo={ITypo.TITLE_H3} color={ITypoColor.COLOR_GENERIC_BLACK}>
 										&nbsp;HT&nbsp;
 									</Typography>
 									/ mois
 								</Typography>
-								<Typography typo={ITypo.P_18} color={ITypoColor.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.BLACK}>
+									<Typography typo={ITypo.TEXT_LG_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK}>
 										Forfait illimité
 									</Typography>
-									<Typography typo={ITypo.P_16} color={ITypoColor.PINK_FLASH}>
+									<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.GREEN_FLASH}>
+										<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.GREEN_FLASH}>
+										<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.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.BLACK}>
+									<Typography typo={ITypo.TITLE_H3} color={ITypoColor.COLOR_GENERIC_BLACK}>
 										&nbsp;HT&nbsp;
 									</Typography>
 									/ mois
 								</Typography>
-								<Typography typo={ITypo.P_18} color={ITypoColor.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.RED_FLASH}>
+								<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_ERROR_600}>
 									Arrêter l'abonnement
 								</Typography>
 							)}
 							{cancelAt && (
-								<Typography typo={ITypo.P_18} color={ITypoColor.RED_FLASH}>
+								<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.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 eb3fa504..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.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.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.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 3bda6882..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.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.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.BLACK}>
+							<Typography typo={ITypo.TEXT_LG_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK}>
 								Forfait standard
 							</Typography>
-							<Typography typo={ITypo.P_16} color={ITypoColor.PINK_FLASH}>
+							<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.BLACK} className={classes["price"]}>
+							<Typography typo={ITypo.DISPLAY_LARGE} color={ITypoColor.COLOR_GENERIC_BLACK} className={classes["price"]}>
 								99€
-								<Typography typo={ITypo.H2} color={ITypoColor.BLACK}>
+								<Typography typo={ITypo.TITLE_H3} color={ITypoColor.COLOR_GENERIC_BLACK}>
 									&nbsp;HT&nbsp;
 								</Typography>
 								/ mois
 							</Typography>
-							<Typography typo={ITypo.P_18} color={ITypoColor.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.BLACK}>
+							<Typography typo={ITypo.TEXT_LG_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK}>
 								Forfait illimité
 							</Typography>
-							<Typography typo={ITypo.P_16} color={ITypoColor.PINK_FLASH}>
+							<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.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.BLACK}>
+								<Typography typo={ITypo.TITLE_H3} color={ITypoColor.COLOR_GENERIC_BLACK}>
 									&nbsp;HT&nbsp;
 								</Typography>
 								/ mois
 							</Typography>
-							<Typography typo={ITypo.P_18} color={ITypoColor.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.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.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.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/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..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.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/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..4e5a473b 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.GREY}>
+						<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.GREY}>
+							<Typography typo={ITypo.TEXT_MD_REGULAR} 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.GREY}>
+							<Typography typo={ITypo.TEXT_MD_REGULAR} 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.GREY}>
+							<Typography typo={ITypo.TEXT_MD_REGULAR} 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.GREY}>
+							<Typography typo={ITypo.TEXT_MD_REGULAR} 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 c686a669..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.GREY}>
+							<Typography typo={ITypo.TEXT_LG_REGULAR} 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..4ac205b4 100644
--- a/src/front/Themes/constants.scss
+++ b/src/front/Themes/constants.scss
@@ -8,35 +8,108 @@ $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;
+$color-generic-none: #00000000;
 
-// 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;
+// 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;
 
-// 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;
+// 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;
 
-$orange-soft-hover: #ffd078;
-$grey: #939393;
-$grey-medium: #e7e7e7;
-$grey-soft: #f9f9f9;
+// 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-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-warning-700: #b75306;
+$color-warning-800: #943f0d;
+$color-warning-900: #7a340e;
+$color-warning-950: #461a02;
+
+// 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;
+$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..725f8373 100644
--- a/src/front/Themes/variables.scss
+++ b/src/front/Themes/variables.scss
@@ -5,32 +5,109 @@
 	--root-margin: auto;
 	--root-padding: 64px 120px;
 
-	--font-primary: "Inter", sans-serif;
+	--font-primary: "Poppins", 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};
+	// Generic colors
+	--color-generic-black: #{$color-generic-black};
+	--color-generic-white: #{$color-generic-white};
+	--color-generic-none: #{$color-generic-none};
 
-	--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};
+	// 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};
 
-	--grey: #{$grey};
-	--grey-medium: #{$grey-medium};
-	--grey-soft: #{$grey-soft};
+	// 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};
 
-	--black: #{$black};
-	--white: #{$white};
+	// 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-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-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};
+	--color-success-600-soft: #{$color-success-600-soft};
+	--color-warning-500-soft: #{$color-warning-500-soft};
+	--color-error-600-soft: #{$color-error-600-soft};
 }