Reacto typo theme

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 />}

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

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

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

@@ -123,7 +123,7 @@ export default class DepositDocument extends React.Component<IProps, IState> {
 						</div>
 						<div className={classes["separator"]} />
 						<div className={classes["right"]}>
-							<Typography typo={ITypo.P_SB_16} color={ITypoColor.COLOR_GENERIC_BLACK} className={classes["title"]}>
+							<Typography typo={ITypo.TEXT_MD_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK} className={classes["title"]}>
 								<div
 									className={
 										this.props.document.document_status === EDocumentStatus.VALIDATED ? classes["validated"] : ""
@@ -140,7 +140,7 @@ export default class DepositDocument extends React.Component<IProps, IState> {
 								)}
 							</Typography>
 							{this.props.document.document_status !== EDocumentStatus.VALIDATED && (
-								<Typography color={ITypoColor.COLOR_NEUTRAL_500} typo={ITypo.CAPTION_14}>
+								<Typography color={ITypoColor.COLOR_NEUTRAL_500} typo={ITypo.TEXT_SM_REGULAR}>
 									Sélectionnez des documents .jpg, .pdf ou .png
 								</Typography>
 							)}
@@ -158,7 +158,7 @@ export default class DepositDocument extends React.Component<IProps, IState> {
 									<div className={classes["left-part"]}>
 										<Image src={DocumentCheckIcon} alt="Document check" />
 										<Typography
-											typo={ITypo.P_16}
+											typo={ITypo.TEXT_MD_REGULAR}
 											color={ITypoColor.COLOR_NEUTRAL_500}
 											title={file.fileName ?? fileObj.name}>
 											{this.shortName(file.fileName || fileObj.name)}
@@ -180,7 +180,7 @@ export default class DepositDocument extends React.Component<IProps, IState> {
 									<div className={classes["loader"]}>
 										<Loader />
 									</div>
-									<Typography typo={ITypo.P_16} color={ITypoColor.COLOR_NEUTRAL_500}>
+									<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
 										Chargement...
 									</Typography>
 								</div>
@@ -191,7 +191,10 @@ export default class DepositDocument extends React.Component<IProps, IState> {
 					{this.props.document.document_status !== EDocumentStatus.VALIDATED && (
 						<div className={classes["bottom-container"]}>
 							<Button variant={EButtonVariant.LINE} className={classes["add-button"]} onClick={this.addDocument}>
-								<Typography typo={ITypo.P_SB_16} color={ITypoColor.COLOR_SECONDARY_500} className={classes["add-document"]}>
+								<Typography
+									typo={ITypo.TEXT_MD_SEMIBOLD}
+									color={ITypoColor.COLOR_SECONDARY_500}
+									className={classes["add-document"]}>
 									Ajouter un document <Image src={PlusIcon} alt="Plus icon" />
 								</Typography>
 							</Button>
@@ -206,7 +209,7 @@ export default class DepositDocument extends React.Component<IProps, IState> {
 						header={"Motif du refus"}
 						confirmText={"J'ai compris"}>
 						<div className={classes["modal-content"]}>
-							<Typography typo={ITypo.P_16} className={classes["text"]}>
+							<Typography typo={ITypo.TEXT_MD_REGULAR} className={classes["text"]}>
 								Votre document a été refusé pour la raison suivante :
 							</Typography>
 							<TextAreaField placeholder="Description" defaultValue={this.state.refusedReason} readonly />
@@ -214,14 +217,14 @@ export default class DepositDocument extends React.Component<IProps, IState> {
 					</Confirm>
 				</div>
 				{this.props.document.document_status === EDocumentStatus.REFUSED && (
-					<Typography typo={ITypo.CAPTION_14} className={classes["error-message"]}>
+					<Typography typo={ITypo.TEXT_SM_REGULAR} className={classes["error-message"]}>
 						Ce document n'est pas conforme. Veuillez le déposer à nouveau.
 					</Typography>
 				)}
 				{this.state.showFailedUploaded && (
 					<Alert onClose={this.onCloseAlertUpload} header={"Fichier non autorisé"} isOpen={!!this.state.showFailedUploaded}>
 						<div className={classes["modal-content"]}>
-							<Typography typo={ITypo.P_16} className={classes["text"]}>
+							<Typography typo={ITypo.TEXT_MD_REGULAR} className={classes["text"]}>
 								{this.state.showFailedUploaded}
 							</Typography>
 						</div>
@@ -265,26 +268,26 @@ export default class DepositDocument extends React.Component<IProps, IState> {
 		switch (history.document_status) {
 			case EDocumentStatus.ASKED:
 				return (
-					<Typography color={ITypoColor.COLOR_NEUTRAL_500} typo={ITypo.CAPTION_14}>
+					<Typography color={ITypoColor.COLOR_NEUTRAL_500} typo={ITypo.TEXT_SM_REGULAR}>
 						Demandé par votre notaire le {this.formatDate(history.created_at!)}
 					</Typography>
 				);
 			case EDocumentStatus.VALIDATED:
 				return (
-					<Typography color={ITypoColor.COLOR_NEUTRAL_500} typo={ITypo.CAPTION_14}>
+					<Typography color={ITypoColor.COLOR_NEUTRAL_500} typo={ITypo.TEXT_SM_REGULAR}>
 						Validé par votre notaire le {this.formatDate(history.created_at!)}
 					</Typography>
 				);
 			case EDocumentStatus.DEPOSITED:
 				return (
-					<Typography color={ITypoColor.COLOR_NEUTRAL_500} typo={ITypo.CAPTION_14}>
+					<Typography color={ITypoColor.COLOR_NEUTRAL_500} typo={ITypo.TEXT_SM_REGULAR}>
 						Déposé le {this.formatDate(history.created_at!)}
 					</Typography>
 				);
 
 			case EDocumentStatus.REFUSED:
 				return (
-					<Typography typo={ITypo.CAPTION_14} color={ITypoColor.COLOR_ERROR_800}>
+					<Typography typo={ITypo.TEXT_SM_REGULAR} color={ITypoColor.COLOR_ERROR_800}>
 						Document non conforme
 						{history.refused_reason && history.refused_reason.length > 0 && (
 							<Button

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

@@ -87,10 +87,10 @@ export default class DepositOtherDocument extends React.Component<IProps, IState
 					canConfirm={!this.state.isLoading}>
 					<div className={classes["modal-content"]}>
 						<div className={classes["container"]}>
-							<Typography typo={ITypo.P_16} className={classes["text"]}>
+							<Typography typo={ITypo.TEXT_MD_REGULAR} className={classes["text"]}>
 								Vous souhaitez envoyer un autre document à votre notaire ?
 							</Typography>
-							<Typography typo={ITypo.P_16} className={classes["text"]}>
+							<Typography typo={ITypo.TEXT_MD_REGULAR} className={classes["text"]}>
 								Glissez / Déposez votre document dans la zone prévue à cet effet ou cliquez sur la zone puis sélectionnez le
 								document correspondant.
 							</Typography>
@@ -111,7 +111,7 @@ export default class DepositOtherDocument extends React.Component<IProps, IState
 									<div className={classes["separator"]} />
 									<div className={classes["right"]}>
 										<Typography
-											typo={ITypo.P_SB_16}
+											typo={ITypo.TEXT_MD_SEMIBOLD}
 											color={ITypoColor.COLOR_GENERIC_BLACK}
 											className={classes["title"]}>
 											<div
@@ -123,7 +123,7 @@ export default class DepositOtherDocument extends React.Component<IProps, IState
 												{this.props.document.document_type?.name}
 											</div>
 										</Typography>
-										<Typography color={ITypoColor.COLOR_NEUTRAL_500} typo={ITypo.CAPTION_14}>
+										<Typography color={ITypoColor.COLOR_NEUTRAL_500} typo={ITypo.TEXT_SM_REGULAR}>
 											Sélectionnez des documents .jpg, .pdf ou .png
 										</Typography>
 									</div>
@@ -137,7 +137,7 @@ export default class DepositOtherDocument extends React.Component<IProps, IState
 												<div className={classes["file-container"]} key={fileObj.name}>
 													<div className={classes["left-part"]}>
 														<Image src={DocumentCheckIcon} alt="Document check" />
-														<Typography typo={ITypo.P_16} color={ITypoColor.COLOR_NEUTRAL_500}>
+														<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
 															{this.shortName(fileObj.name)}
 														</Typography>
 													</div>
@@ -156,7 +156,7 @@ export default class DepositOtherDocument extends React.Component<IProps, IState
 								<div className={classes["bottom-container"]}>
 									<Button variant={EButtonVariant.LINE} className={classes["add-button"]} onClick={this.addDocument}>
 										<Typography
-											typo={ITypo.P_SB_16}
+											typo={ITypo.TEXT_MD_SEMIBOLD}
 											color={ITypoColor.COLOR_SECONDARY_500}
 											className={classes["add-document"]}>
 											Ajouter un document <Image src={PlusIcon} alt="Plus icon" />
@@ -173,7 +173,7 @@ export default class DepositOtherDocument extends React.Component<IProps, IState
 						header={"L'ajout de Document n'est plus autorisé"}
 						isOpen={!!this.state.showFailedDocument}>
 						<div className={classes["modal-content"]}>
-							<Typography typo={ITypo.P_16} className={classes["text"]}>
+							<Typography typo={ITypo.TEXT_MD_REGULAR} className={classes["text"]}>
 								{this.state.showFailedDocument}
 							</Typography>
 						</div>
@@ -182,7 +182,7 @@ export default class DepositOtherDocument extends React.Component<IProps, IState
 				{this.state.showFailedUploaded && (
 					<Alert onClose={this.onCloseAlertUpload} header={"Fichier non autorisé"} isOpen={!!this.state.showFailedUploaded}>
 						<div className={classes["modal-content"]}>
-							<Typography typo={ITypo.P_16} className={classes["text"]}>
+							<Typography typo={ITypo.TEXT_MD_REGULAR} className={classes["text"]}>
 								{this.state.showFailedUploaded}
 							</Typography>
 						</div>

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

@@ -129,10 +129,10 @@ export default class DepositRib extends React.Component<IProps, IState> {
 						<div className={classes["separator"]} />
 
 						<div className={classes["right"]}>
-							<Typography typo={ITypo.P_SB_16} color={ITypoColor.COLOR_GENERIC_BLACK} className={classes["title"]}>
+							<Typography typo={ITypo.TEXT_MD_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK} className={classes["title"]}>
 								<div>Déposer un RIB</div>
 							</Typography>
-							<Typography color={ITypoColor.COLOR_NEUTRAL_500} typo={ITypo.CAPTION_14}>
+							<Typography color={ITypoColor.COLOR_NEUTRAL_500} typo={ITypo.TEXT_SM_REGULAR}>
 								Sélectionnez des documents .jpg, .pdf ou .png
 							</Typography>
 						</div>
@@ -144,7 +144,7 @@ export default class DepositRib extends React.Component<IProps, IState> {
 								<div className={classes["file-container"]} key="0">
 									<div className={classes["left-part"]}>
 										<Image src={DocumentCheckIcon} alt="Document check" />
-										<Typography typo={ITypo.P_16} color={ITypoColor.COLOR_NEUTRAL_500} title={file.name}>
+										<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500} title={file.name}>
 											{this.shortName(file.name)}
 										</Typography>
 									</div>
@@ -161,7 +161,10 @@ export default class DepositRib extends React.Component<IProps, IState> {
 
 					<div className={classes["bottom-container"]}>
 						<Button variant={EButtonVariant.LINE} className={classes["add-button"]} onClick={() => this.fileInput!.click()}>
-							<Typography typo={ITypo.P_SB_16} color={ITypoColor.COLOR_SECONDARY_500} className={classes["add-document"]}>
+							<Typography
+								typo={ITypo.TEXT_MD_SEMIBOLD}
+								color={ITypoColor.COLOR_SECONDARY_500}
+								className={classes["add-document"]}>
 								Ajouter un document <Image src={PlusIcon} alt="Plus icon" />
 							</Typography>
 						</Button>

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.TEXT_MD_SEMIBOLD}>{this.props.document?.document_type?.name}</Typography>
-					<Typography typo={ITypo.CAPTION_14}>{this.getDocumentsTitle()}</Typography>
+					<Typography typo={ITypo.TEXT_SM_REGULAR}>{this.getDocumentsTitle()}</Typography>
 				</div>
 				{this.renderIcon()}
 			</div>

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

@@ -26,7 +26,7 @@ export default class FilePreview extends React.Component<IProps, IState> {
 				{this.props.href && (
 					<>
 						{!type && (
-							<Typography typo={ITypo.H1} color={ITypoColor.COLOR_GENERIC_BLACK}>
+							<Typography typo={ITypo.DISPLAY_LARGE} color={ITypoColor.COLOR_GENERIC_BLACK}>
 								Erreur lors du chargement du fichier
 							</Typography>
 						)}

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

@@ -70,42 +70,42 @@ export default function FolderBoxInformation(props: IProps) {
 			case EFolderBoxInformationType.DESCRIPTION:
 				return (
 					<div className={classes["text-container"]}>
-						<Typography typo={ITypo.NAV_INPUT_16}>Note dossier</Typography>
+						<Typography typo={ITypo.TEXT_MD_GREY}>Note dossier</Typography>
-						<Typography typo={ITypo.P_18}>{folder.description ?? ""}</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.TEXT_MD_GREY}>Note client</Typography>
-						<Typography typo={ITypo.P_18}>{note?.content ?? ""}</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.TEXT_MD_GREY}>Note archive</Typography>
-						<Typography typo={ITypo.P_18}>{folder.archived_description ?? ""}</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.TEXT_MD_GREY}>Intitulé du dossier</Typography>
-							<Typography typo={ITypo.P_18}>{folder.name ?? ""}</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.TEXT_MD_GREY}>Numéro de dossier</Typography>
-							<Typography typo={ITypo.P_18}>{folder.folder_number ?? ""}</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.TEXT_MD_GREY}>Type d'acte</Typography>
-							<Typography typo={ITypo.P_18}>{folder.deed?.deed_type?.name ?? ""}</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.TEXT_MD_GREY}>Ouverture du dossier</Typography>
-							<Typography typo={ITypo.P_18}>{formatDate(folder.created_at)}</Typography>
+							<Typography typo={ITypo.TEXT_LG_REGULAR}>{formatDate(folder.created_at)}</Typography>
 						</div>
 					</>
 				);

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 && (

src/front/Components/DesignSystem/Form/BaseField.tsx

@@ -107,7 +107,7 @@ export default abstract class BaseField<P extends IProps, S extends IState = ISt
 		let errors: JSX.Element[] = [];
 		Object.entries(this.state.validationError.constraints).forEach(([key, value]) => {
 			errors.push(
-				<Typography key={key} typo={ITypo.CAPTION_14} color={ITypoColor.COLOR_ERROR_600}>
+				<Typography key={key} typo={ITypo.TEXT_SM_REGULAR} color={ITypoColor.COLOR_ERROR_600}>
 					{value}
 				</Typography>,
 			);

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

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

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

@@ -81,14 +81,14 @@ class SelectFieldClass extends React.Component<IPropsClass, IState> {
 							{selectedOption && (
 								<>
 									<span className={classNames(classes["icon"], classes["token-icon"])}>{selectedOption?.icon}</span>
-									<Typography typo={ITypo.P_18}>
+									<Typography typo={ITypo.TEXT_LG_REGULAR}>
 										<span className={classes["text"]}>{selectedOption?.label}</span>
 									</Typography>
 								</>
 							)}
 							{!selectedOption && (
 								<div className={classes["placeholder"]} data-open={(selectedOption ? true : false).toString()}>
-									<Typography typo={ITypo.NAV_INPUT_16}>
+									<Typography typo={ITypo.TEXT_MD_GREY}>
 										<span className={classes["text"]}>{this.props.placeholder ?? ""}</span>
 									</Typography>
 								</div>
@@ -110,7 +110,7 @@ class SelectFieldClass extends React.Component<IPropsClass, IState> {
 								className={classes["container-li"]}
 								onClick={(e) => this.onSelect(option, e)}>
 								<div className={classes["token-icon"]}>{option.icon}</div>
-								<Typography typo={ITypo.P_18}>{option.label}</Typography>
+								<Typography typo={ITypo.TEXT_LG_REGULAR}>{option.label}</Typography>
 							</li>
 						))}
 					</ul>
@@ -199,7 +199,7 @@ class SelectFieldClass extends React.Component<IPropsClass, IState> {
 	private renderErrors(): JSX.Element | null {
 		if (!this.state.errors) return null;
 		return (
-			<Typography typo={ITypo.CAPTION_14} color={ITypoColor.COLOR_ERROR_600}>
+			<Typography typo={ITypo.TEXT_SM_REGULAR} color={ITypoColor.COLOR_ERROR_600}>
 				{this.props.placeholder} ne peut pas être vide
 			</Typography>
 		);

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

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

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

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

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

@@ -34,7 +34,9 @@ export default function HeaderSubmenu(props: IProps) {
 			<div className={classes["container"]}>
 				<div className={classNames(classes["root"], (isActive || isSubmenuOpened) && classes["active"])}>
 					<div className={classes["content"]} onClick={toggle}>
-						<Typography typo={isActive || isSubmenuOpened ? ITypo.P_SB_18 : ITypo.NAV_HEADER_18}>{props.text}</Typography>
+						<Typography typo={isActive || isSubmenuOpened ? ITypo.TEXT_LG_SEMIBOLD : ITypo.TEXT_LG_GREY}>
+							{props.text}
+						</Typography>
 						{isSubmenuOpened ? <ChevronUpIcon height="20" width="20" /> : <ChevronDownIcon height="20" width="20" />}
 					</div>
 					<div className={classes["underline"]} data-active={(isActive || isSubmenuOpened).toString()} />

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

@@ -37,7 +37,7 @@ export default function HeaderLink(props: IHeaderLinkProps) {
 				onMouseEnter={handleMouseEnter}
 				onMouseLeave={handleMouseLeave}>
 				<div className={classes["content"]}>
-					<Typography typo={isActive || isHovered ? ITypo.P_SB_18 : ITypo.NAV_HEADER_18}>{props.text}</Typography>
+					<Typography typo={isActive || isHovered ? ITypo.TEXT_LG_SEMIBOLD : ITypo.TEXT_LG_GREY}>{props.text}</Typography>
 				</div>
 				<div className={classes["underline"]} data-active={(isActive || isHovered).toString()} />
 			</Link>
@@ -46,7 +46,7 @@ export default function HeaderLink(props: IHeaderLinkProps) {
 		return (
 			<div className={classNames(classes["root"], classes["desactivated"])}>
 				<div className={classes["content"]}>
-					<Typography typo={ITypo.NAV_HEADER_18}>{props.text}</Typography>
+					<Typography typo={ITypo.TEXT_LG_GREY}>{props.text}</Typography>
 				</div>
 			</div>
 		);

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

@@ -29,7 +29,7 @@ export default function HeaderSubmenuLink(props: IHeaderLinkProps) {
 
 	return (
 		<Link href={props.path} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
-			<Typography typo={isActive || isHovered ? ITypo.P_SB_18 : ITypo.NAV_HEADER_18}>{props.text}</Typography>
+			<Typography typo={isActive || isHovered ? ITypo.TEXT_LG_SEMIBOLD : ITypo.TEXT_LG_GREY}>{props.text}</Typography>
 		</Link>
 	);
 }

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

@@ -34,7 +34,7 @@ export default function HeaderSubmenu(props: IProps) {
 			<div className={classes["container"]} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
 				<div className={classNames(classes["root"], (isActive || isHovered) && classes["active"])}>
 					<div className={classes["content"]}>
-						<Typography typo={isActive || isHovered ? ITypo.P_SB_18 : ITypo.NAV_HEADER_18}>{props.text}</Typography>
+						<Typography typo={isActive || isHovered ? ITypo.TEXT_LG_SEMIBOLD : ITypo.TEXT_LG_GREY}>{props.text}</Typography>
 					</div>
 					<div className={classes["underline"]} data-active={(isActive || isHovered).toString()} />
 					{isHovered && (

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

@@ -29,7 +29,7 @@ class NavigationLinkClass extends React.Component<IPropsClass, IStateClass> {
 				onClick={this.props.onClick}
 				target={this.props.target}>
 				<div className={classes["content"]}>
-					<Typography typo={this.props.isActive ? ITypo.P_SB_18 : ITypo.NAV_HEADER_18}>{this.props.text}</Typography>
+					<Typography typo={this.props.isActive ? ITypo.TEXT_LG_SEMIBOLD : ITypo.TEXT_LG_GREY}>{this.props.text}</Typography>
 				</div>
 			</Link>
 		);

src/front/Components/DesignSystem/Header/Notifications/NotificationModal/index.tsx

@@ -34,13 +34,13 @@ export default class NotificationModal extends React.Component<IProps, IState> {
 				<div className={classes["background"]} onClick={this.props.closeModal} />
 				<div className={classes["root"]}>
 					<div className={classes["notification-header"]}>
-						<Typography typo={ITypo.P_SB_16}>Notifications</Typography>
+						<Typography typo={ITypo.TEXT_MD_SEMIBOLD}>Notifications</Typography>
 						<div className={classes["close-icon"]} onClick={this.props.closeModal}>
 							<Image src={CloseIcon} alt="Close notification modal" className={classes["close-icon"]}></Image>
 						</div>
 					</div>
 					<div className={classes["notification-subheader"]} onClick={this.readAllNotifications}>
-						<Typography typo={ITypo.CAPTION_14} color={ITypoColor.COLOR_SECONDARY_500}>
+						<Typography typo={ITypo.TEXT_SM_REGULAR} color={ITypoColor.COLOR_SECONDARY_500}>
 							Tout marquer comme lu
 						</Typography>
 						<Check color={ITypoColor.COLOR_SECONDARY_500} />
@@ -49,7 +49,7 @@ export default class NotificationModal extends React.Component<IProps, IState> {
 						<>
 							{!this.state.toastList || this.state.toastList.length === 0 ? (
 								<div className={classes["missing-notification"]}>
-									<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_NEUTRAL_500}>
+									<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
 										Vous n'avez pas de notifications.
 									</Typography>
 								</div>

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

@@ -114,7 +114,7 @@ class HeaderClass extends React.Component<IPropsClass, IState> {
 				{this.state.cancelAt && (
 					<div className={classes["subscription-line"]}>
 						<InformationCircleIcon height="24" />;
-						<Typography typo={ITypo.P_16} color={ITypoColor.COLOR_GENERIC_BLACK}>
+						<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_GENERIC_BLACK}>
 							Assurez vous de sauvegarder tout ce dont vous avez besoin avant la fin de votre abonnement le{" "}
 							{this.state.cancelAt.toLocaleDateString()}.
 						</Typography>

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

@@ -18,7 +18,7 @@ export default function LogOut() {
 
 	return (
 		<div className={classes["root"]} onClick={disconnect}>
-			<Typography typo={ITypo.NAV_HEADER_18}>Déconnexion</Typography>
+			<Typography typo={ITypo.TEXT_LG_GREY}>Déconnexion</Typography>
 			<Image src={DisconnectIcon} className={classes["disconnect-icon"]} alt="disconnect" />
 		</div>
 	);

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>
 		);
 	}

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>
 		);
 	}

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} />}
@@ -103,11 +103,9 @@ export default class Modal extends React.Component<IProps, IState> {
 		this.props.onClose();
 	}
 
-
-
 	private handleKeyDown = (e: KeyboardEvent): void => {
 		if (e.key === "Escape" || e.key === "Esc") {
 			this.props.onClose();
 		}
-	}
+	};
 }

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

@@ -55,7 +55,7 @@ export default class MultiSelect extends React.Component<IProps, IState> {
 						<div
 							className={classes["placeholder"]}
 							data-selected={(this.state.isFocused || this.state.selectedOptions.length >= 1).toString()}>
-							<Typography typo={ITypo.NAV_INPUT_16}>{this.props.placeholder}</Typography>
+							<Typography typo={ITypo.TEXT_MD_GREY}>{this.props.placeholder}</Typography>
 						</div>
 					)}
 					<div className={classes["input-container"]}>
@@ -146,7 +146,7 @@ export default class MultiSelect extends React.Component<IProps, IState> {
 		let errors: JSX.Element[] = [];
 		Object.entries(this.state.validationError.constraints).forEach(([key, value]) => {
 			errors.push(
-				<Typography key={key} typo={ITypo.CAPTION_14} color={ITypoColor.COLOR_ERROR_600}>
+				<Typography key={key} typo={ITypo.TEXT_SM_REGULAR} color={ITypoColor.COLOR_ERROR_600}>
 					{value}
 				</Typography>,
 			);

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

@@ -70,22 +70,22 @@ export default class Newsletter extends React.Component<IProps, IState> {
 					<div className={classes["container"]}>
 						<div className={classes["root"]}>
 							<div className={classes["text"]}>
-								<Typography typo={ITypo.H3} color={ITypoColor.COLOR_GENERIC_WHITE}>
+								<Typography typo={ITypo.TITLE_H5} color={ITypoColor.COLOR_GENERIC_WHITE}>
 									Restez Informé(e) avec notre Newsletter
 								</Typography>
-								<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_GENERIC_WHITE}>
+								<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_GENERIC_WHITE}>
 									Ne manquez aucune de nos actualités, promotions exclusives et conseils d'experts !
 								</Typography>
 								{this.state.errorMessage && (
 									<div>
-										<Typography typo={ITypo.P_ERR_16} color={ITypoColor.COLOR_ERROR_600}>
+										<Typography typo={ITypo.TEXT_MD_ERROR} color={ITypoColor.COLOR_ERROR_600}>
 											{this.state.errorMessage}
 										</Typography>
 									</div>
 								)}
 								{this.state.successMessage && (
 									<div>
-										<Typography typo={ITypo.P_16} color={ITypoColor.COLOR_SUCCESS_600}>
+										<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_SUCCESS_600}>
 											{this.state.successMessage}
 										</Typography>
 									</div>

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>

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>

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

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

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

@@ -32,7 +32,7 @@ export default class SearchBar extends React.Component<IProps, IState> {
 			<div className={classes["root"]}>
 				<Image src={LoopIcon} alt="Loop icon" />
 				{!this.state.hasValue && (
-					<Typography typo={ITypo.P_ERR_18}>
+					<Typography typo={ITypo.TEXT_LG_ERROR}>
 						<div className={classes["fake-placeholder"]}>{this.props.placeholder}</div>
 					</Typography>
 				)}

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

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

src/front/Components/DesignSystem/Toasts/ToastsContainer/ToastElement/index.tsx

@@ -74,7 +74,7 @@ class ToastElementClass extends React.Component<IPropsClass, IState> {
 
 	private getToastTitle(title: string | React.ReactNode) {
 		if (typeof title === "string") {
-			return <Typography typo={ITypo.P_16}>{title}</Typography>;
+			return <Typography typo={ITypo.TEXT_MD_REGULAR}>{title}</Typography>;
 		}
 		return title;
 	}
@@ -83,7 +83,7 @@ class ToastElementClass extends React.Component<IPropsClass, IState> {
 		if (typeof text === "string") {
 			return (
 				<div className={classes["text-container"]}>
-					<Typography typo={ITypo.CAPTION_14} color={ITypoColor.COLOR_NEUTRAL_500}>
+					<Typography typo={ITypo.TEXT_SM_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
 						{text}
 					</Typography>
 				</div>

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

@@ -4,41 +4,42 @@
 .root {
 	color: $color-generic-black;
 	vertical-align: center;
-	font-family: "Inter", sans-serif;
+	font-family: "Poppins", sans-serif;
-	&.H1-60 {
+	&.display-large {
 		font-style: normal;
-		font-weight: 500;
+		font-weight: 600;
-		font-size: 56px;
+		font-size: 50px;
-		line-height: 67.2px;
+		line-height: 75px;
 
 		@media (max-width: $screen-m) {
 			font-size: 48px;
-			line-height: 56.7px;
+			line-height: 72px;
 		}
 	}
 
-	&.H1-bis-40 {
+	&.title-h1 {
 		font-style: normal;
-		font-weight: 500;
+		font-weight: 600;
 		font-size: 40px;
+		line-height: 60px;
+	}
+
+	&.title-h3 {
+		font-style: normal;
+		font-weight: 300;
+		font-size: 32px;
 		line-height: 48px;
 	}
 
-	&.H2-30 {
+	&.title-h5 {
 		font-style: normal;
-		font-weight: 500;
+		font-weight: 400;
-		font-size: 30px;
-		line-height: 36px;
-	}
-
-	&.H3-24 {
-		font-style: normal;
-		font-weight: 600;
 		font-size: 24px;
-		line-height: 29px;
+		line-height: 36px;
+		color: var(--color-primary-500);
 	}
 
-	&.Paragraphe-semibold-18 {
+	&.text-lg-semibold {
 		font-style: normal;
 		font-weight: 600;
 		font-size: 18px;
@@ -46,39 +47,42 @@
 		letter-spacing: 0.5px;
 	}
 
-	&.Paragraphe-simple-18 {
+	&.text-lg-regular {
 		font-style: normal;
 		font-weight: 400;
 		font-size: 18px;
-		line-height: 22px;
+		line-height: 27px;
+		letter-spacing: 0.5px;
 	}
 
-	&.Paragraphe-MAJ-18 {
+	&.text-lg-uppercase {
 		font-style: normal;
 		font-weight: 400;
 		font-size: 18px;
-		line-height: 22px;
+		line-height: 27px;
+		letter-spacing: 0.5px;
 		text-transform: uppercase;
 	}
 
-	&.Nav-header-off-18 {
+	&.text-lg-grey {
-		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;
+		line-height: 27px;
 		letter-spacing: 0.5px;
 	}
 
-	&.Paragraphe-semibold-16 {
+	&.text-lg-error {
+		color: $color-error-600;
+		font-style: normal;
+		font-weight: 400;
+		font-size: 18px;
+		line-height: 27px;
+		letter-spacing: 0.5px;
+	}
+
+	&.text-md-semibold {
 		font-style: normal;
 		font-weight: 600;
 		font-size: 16px;
@@ -86,45 +90,61 @@
 		letter-spacing: 0.5px;
 	}
 
-	&.Nav-input-off-16 {
+	&.text-md-regular {
 		font-style: normal;
 		font-weight: 400;
 		font-size: 16px;
-		line-height: 22px;
+		line-height: 24px;
 		letter-spacing: 0.5px;
+	}
+
+	&.text-md-grey {
 		color: $color-neutral-500;
-	}
-
-	&.Paragraphe-simple-16 {
 		font-style: normal;
 		font-weight: 400;
 		font-size: 16px;
-		line-height: 22px;
+		line-height: 24px;
-		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 {
+	&.text-md-error {
+		color: $color-error-600;
+		font-style: normal;
+		font-weight: 400;
+		font-size: 16px;
+		line-height: 24px;
+		letter-spacing: 0.5px;
+	}
+
+	&.text-sm-regular {
 		font-style: normal;
 		font-weight: 400;
 		font-size: 14px;
-		line-height: 22px;
+		line-height: 21px;
 		letter-spacing: 0.5px;
 	}
 
-	&.Caption_14-semibold {
+	&.text-sm-semibold {
 		font-style: normal;
 		font-weight: 600;
 		font-size: 14px;
-		line-height: 22px;
+		line-height: 21px;
+		letter-spacing: 0.5px;
+	}
+
+	&.text-sm-bold {
+		font-style: normal;
+		font-weight: 600;
+		font-size: 14px;
+		line-height: 21px;
+		letter-spacing: 0.5px;
+	}
+
+	&.text-xs-regular {
+		font-style: normal;
+		font-weight: 400;
+		font-size: 12px;
+		line-height: 18px;
 		letter-spacing: 0.5px;
 	}
 
@@ -141,23 +161,23 @@
 	}
 
 	&.color-primary-500 {
-		color: var(--color-primary-500);
+		color: $color-primary-500;
 	}
 
 	&.color-secondary-500 {
-		color: var(--color-secondary-500);
+		color: $color-secondary-500;
 	}
 
 	&.color-success-600 {
-		color: var(--color-success-600);
+		color: $color-success-600;
 	}
 
 	&.color-error-600 {
-		color: var(--color-error-600);
+		color: $color-error-600;
 	}
 
 	&.color-warning-500 {
-		color: var(--color-warning-500);
+		color: $color-warning-500;
 	}
 
 	&.white {

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>
+		);
+	}
+}

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

@@ -12,24 +12,28 @@ type IProps = {
 type IState = {};
 
 export enum ITypo {
-	H1 = "H1-60",
+	DISPLAY_LARGE = "display-large",
-	H1Bis = "H1-bis-40",
-	H2 = "H2-30",
-	H3 = "H3-24",
 
-	P_SB_18 = "Paragraphe-semibold-18",
+	TITLE_H1 = "title-h1",
-	P_18 = "Paragraphe-simple-18",
+	TITLE_H3 = "title-h3",
-	P_MAJ_18 = "Paragraphe-MAJ-18",
+	TITLE_H5 = "title-h5",
-	NAV_HEADER_18 = "Nav-header-off-18",
-	P_ERR_18 = "Paragraphe-18-error",
 
-	P_SB_16 = "Paragraphe-semibold-16",
+	TEXT_LG_SEMIBOLD = "text-lg-semibold",
-	P_16 = "Paragraphe-simple-16",
+	TEXT_LG_REGULAR = "text-lg-regular",
-	NAV_INPUT_16 = "Nav-input-off-16",
+	TEXT_LG_UPPERCASE = "text-lg-regular-uppercase",
-	P_ERR_16 = "Paragraphe-16-error",
+	TEXT_LG_GREY = "text-lg-grey",
+	TEXT_LG_ERROR = "text-lg-error",
 
-	CAPTION_14 = "Caption_14",
+	TEXT_MD_SEMIBOLD = "text-md-semibold",
-	CAPTION_14_SB = "Caption_14-semibold",
+	TEXT_MD_REGULAR = "text-md-regular",
+	TEXT_MD_GREY = "text-md-grey",
+	TEXT_MD_ERROR = "text-md-error",
+
+	TEXT_SM_REGULAR = "text-sm-regular",
+	TEXT_SM_SEMIBOLD = "text-sm-semibold",
+	TEXT_SM_BOLD = "text-sm-bold",
+
+	TEXT_XS_REGULAR = "text-xs-regular",
 }
 
 export enum ITypoColor {

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;
+	}
+}

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) => {

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

@@ -38,26 +38,26 @@ export default class UserFolderHeader extends React.Component<IProps, IState> {
 			<div className={classes["root"]}>
 				<div className={classes["content"]}>
 					<div className={classes["container"]}>
-						<Typography typo={ITypo.NAV_INPUT_16}>Nom</Typography>
+						<Typography typo={ITypo.TEXT_MD_GREY}>Nom</Typography>
-						<Typography typo={ITypo.P_18}>{this.props.customer.contact.last_name}</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.TEXT_MD_GREY}>Prénom</Typography>
-						<Typography typo={ITypo.P_18}>{this.props.customer.contact.first_name}</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.TEXT_MD_GREY}>Numéro de téléphone</Typography>
-						<Typography typo={ITypo.P_18}>
+						<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.TEXT_MD_GREY}>E-mail</Typography>
-						<Typography typo={ITypo.P_18}>{this.props.customer.contact.email}</Typography>
+						<Typography typo={ITypo.TEXT_LG_REGULAR}>{this.props.customer.contact.email}</Typography>
 					</div>
 				</div>
 				{!this.props.isArchived && (

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

@@ -10,7 +10,7 @@ export default class Version extends React.Component<IProps, IState> {
 	public override render(): JSX.Element {
 		return (
 			<div className={classes["root"]}>
-				<Typography typo={ITypo.P_16} color={ITypoColor.COLOR_NEUTRAL_500}>
+				<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
 					<div>{VersionFile.version}</div>
 				</Typography>
 			</div>

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>

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>

src/front/Components/Layouts/ClientDashboard/index.tsx

@@ -129,38 +129,38 @@ export default function ClientDashboard(props: IProps) {
 				<div className={classes["text-container"]}>
 					{/* TODO Get name from userStore */}
 					<div className={classes["title-container"]}>
-						<Typography typo={ITypo.H1} className={classes["title"]}>
+						<Typography typo={ITypo.DISPLAY_LARGE} className={classes["title"]}>
 							Bonjour {customer?.contact?.first_name.concat(" ", customer?.contact?.last_name)}
 						</Typography>
 					</div>
 
-					<Typography typo={ITypo.P_SB_18} className={classes["folder-number"]} color={ITypoColor.COLOR_NEUTRAL_500}>
+					<Typography typo={ITypo.TEXT_LG_SEMIBOLD} className={classes["folder-number"]} color={ITypoColor.COLOR_NEUTRAL_500}>
 						Dossier {folder?.folder_number} - {folder?.name}
 					</Typography>
 
-					<Typography typo={ITypo.P_SB_18} className={classes["office-name"]} color={ITypoColor.COLOR_NEUTRAL_500}>
+					<Typography typo={ITypo.TEXT_LG_SEMIBOLD} className={classes["office-name"]} color={ITypoColor.COLOR_NEUTRAL_500}>
 						{folder?.office?.name}
 					</Typography>
 
-					<Typography typo={ITypo.H2} className={classes["subtitle"]}>
+					<Typography typo={ITypo.TITLE_H3} className={classes["subtitle"]}>
 						Documents à envoyer
 					</Typography>
 
-					<Typography typo={ITypo.P_16} className={classes["text"]}>
+					<Typography typo={ITypo.TEXT_MD_REGULAR} className={classes["text"]}>
 						Votre notaire est dans l'attente de documents pour valider votre dossier. Voici la liste des documents.
 						<br /> Veuillez glisser / déposer chaque document dans la zone prévue à cet effet ou cliquez sur la zone puis
 						sélectionnez le document correspondant. <br /> En déposant un document, celui-ci est automatiquement enregistré et
 						transmis à votre notaire.
 					</Typography>
 					<div className={classes["note-box"]}>
-						<Typography typo={ITypo.P_16} color={ITypoColor.COLOR_NEUTRAL_500}>
+						<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
 							{note?.content}
 						</Typography>
 					</div>
 				</div>
 
 				<div className={classes["contact"]}>
-					<Typography typo={ITypo.P_SB_18} className={classes["contact-text"]} color={ITypoColor.COLOR_NEUTRAL_500}>
+					<Typography typo={ITypo.TEXT_LG_SEMIBOLD} className={classes["contact-text"]} color={ITypoColor.COLOR_NEUTRAL_500}>
 						<p>
 							{contact?.first_name} {contact?.last_name}
 						</p>
@@ -213,8 +213,8 @@ export default function ClientDashboard(props: IProps) {
 							<DepositDocument document={document} key={document.uid} defaultFiles={document.files ?? []} />
 						))}
 					</div>
-					<Typography typo={ITypo.H2}>Documents supplémentaires (facultatif)</Typography>
+					<Typography typo={ITypo.TITLE_H3}>Documents supplémentaires (facultatif)</Typography>
-					<Typography typo={ITypo.P_16} className={classes["text"]}>
+					<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}>

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.TITLE_H3}>Documents supplémentaires (facultatif)</Typography>
-						<Typography typo={ITypo.P_16} className={classes["text"]}>
+						<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 à

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

@@ -149,11 +149,13 @@ export default function CollaboratorInformations(props: IProps) {
 		<DefaultCollaboratorDashboard mobileBackText={"Liste des collaborateurs"}>
 			<div className={classes["root"]}>
 				<div className={classes["folder-header"]}>
-					<Typography typo={ITypo.H1Bis}>{userSelected?.contact?.first_name + " " + userSelected?.contact?.last_name}</Typography>
+					<Typography typo={ITypo.TITLE_H1}>
+						{userSelected?.contact?.first_name + " " + userSelected?.contact?.last_name}
+					</Typography>
 					{userSelected && userSelected.seats?.some((seat) => new Date(seat.subscription!.end_date) >= new Date()) && (
 						<div className={classes["subscription-active"]}>
 							<div className={classes["subscription-active-dot"]} />
-							<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_SUCCESS_600}>
+							<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_SUCCESS_600}>
 								Abonnement actif
 							</Typography>
 						</div>
@@ -161,34 +163,34 @@ export default function CollaboratorInformations(props: IProps) {
 				</div>
 				<div className={classes["user-infos"]}>
 					<div className={classes["user-infos-row"]}>
-						<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.COLOR_NEUTRAL_500}>
+						<Typography typo={ITypo.TEXT_MD_GREY} color={ITypoColor.COLOR_NEUTRAL_500}>
 							Nom
 						</Typography>
-						<Typography typo={ITypo.P_18}>{userSelected?.contact?.first_name}</Typography>
+						<Typography typo={ITypo.TEXT_LG_REGULAR}>{userSelected?.contact?.first_name}</Typography>
 					</div>
 					<div className={classes["user-infos-row"]}>
-						<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.COLOR_NEUTRAL_500}>
+						<Typography typo={ITypo.TEXT_MD_GREY} color={ITypoColor.COLOR_NEUTRAL_500}>
 							Prénom
 						</Typography>
-						<Typography typo={ITypo.P_18}>{userSelected?.contact?.last_name}</Typography>
+						<Typography typo={ITypo.TEXT_LG_REGULAR}>{userSelected?.contact?.last_name}</Typography>
 					</div>
 					<div className={classes["user-infos-row"]}>
-						<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.COLOR_NEUTRAL_500}>
+						<Typography typo={ITypo.TEXT_MD_GREY} color={ITypoColor.COLOR_NEUTRAL_500}>
 							Numéro de téléphone
 						</Typography>
-						<Typography typo={ITypo.P_18}>{userSelected?.contact?.cell_phone_number}</Typography>
+						<Typography typo={ITypo.TEXT_LG_REGULAR}>{userSelected?.contact?.cell_phone_number}</Typography>
 					</div>
 					<div className={classes["user-infos-row"]}>
-						<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.COLOR_NEUTRAL_500}>
+						<Typography typo={ITypo.TEXT_MD_GREY} color={ITypoColor.COLOR_NEUTRAL_500}>
 							Email
 						</Typography>
-						<Typography typo={ITypo.P_18}>{userSelected?.contact?.email}</Typography>
+						<Typography typo={ITypo.TEXT_LG_REGULAR}>{userSelected?.contact?.email}</Typography>
 					</div>
 				</div>
 
 				<div className={classes["role-container"]}>
 					<div className={classes["first-line"]}>
-						<Typography typo={ITypo.P_SB_18}>Modifier le rôle</Typography>
+						<Typography typo={ITypo.TEXT_LG_SEMIBOLD}>Modifier le rôle</Typography>
 						<div className={classes["gestion-role"]}>
 							<Link href={Module.getInstance().get().modules.pages.Roles.props.path}>
 								<Button
@@ -227,7 +229,7 @@ export default function CollaboratorInformations(props: IProps) {
 					confirmText={"Valider"}
 					cancelText={"Annuler"}>
 					<div className={classes["modal-content"]}>
-						<Typography typo={ITypo.P_16} className={classes["text"]}>
+						<Typography typo={ITypo.TEXT_MD_REGULAR} className={classes["text"]}>
 							Attribuer le rôle de <span className={classes["role-name"]}>{selectedOption?.label}</span> à{" "}
 							{userSelected?.contact?.first_name} {userSelected?.contact?.last_name} ?
 						</Typography>
@@ -242,7 +244,7 @@ export default function CollaboratorInformations(props: IProps) {
 					confirmText={"Valider"}
 					cancelText={"Annuler"}>
 					<div className={classes["modal-content"]}>
-						<Typography typo={ITypo.P_16} className={classes["text"]}>
+						<Typography typo={ITypo.TEXT_MD_REGULAR} className={classes["text"]}>
 							{adminRoleType === "add" ? "Attribuer" : "Retirer"} le rôle d'administrateur à{" "}
 							{userSelected?.contact?.first_name} {userSelected?.contact?.last_name} ?
 						</Typography>

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

@@ -12,9 +12,9 @@ export default class Collaborators extends BasePage<IProps, IState> {
 			<DefaultCollaboratorDashboard title={"Dossier"} mobileBackText={"Liste des collaborateurs"}>
 				<div className={classes["root"]}>
 					<div className={classes["no-folder-selected"]}>
-						<Typography typo={ITypo.H1Bis}>Informations du collaborateur</Typography>
+						<Typography typo={ITypo.TITLE_H1}>Informations du collaborateur</Typography>
 						<div className={classes["choose-a-folder"]}>
-							<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_NEUTRAL_500}>
+							<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
 								Sélectionnez un collaborateur
 							</Typography>
 						</div>

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>

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>

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

@@ -121,7 +121,7 @@ export default function DeedTypesInformations(props: IProps) {
 		<DefaultDeedTypesDashboard mobileBackText={"Liste des types d'actes"}>
 			<div className={classes["root"]}>
 				<div className={classes["header"]}>
-					<Typography typo={ITypo.H1Bis}>Paramétrage des listes de pièces</Typography>
+					<Typography typo={ITypo.TITLE_H1}>Paramétrage des listes de pièces</Typography>
 					<Link href={Module.getInstance().get().modules.pages.DocumentTypes.props.path}>
 						<Button variant={EButtonVariant.LINE}>
 							Modifier la liste des documents
@@ -130,15 +130,15 @@ export default function DeedTypesInformations(props: IProps) {
 					</Link>
 				</div>
 				<div className={classes["subtitle"]}>
-					<Typography typo={ITypo.H3}>{deedTypeSelected?.name}</Typography>
+					<Typography typo={ITypo.TITLE_H5}>{deedTypeSelected?.name}</Typography>
 				</div>
 				<div className={classes["deed-type-container"]}>
 					<div className={classes["infos"]}>
 						<div className={classNames(classes["middle-box"], classes["box"])}>
-							<Typography typo={ITypo.NAV_INPUT_16} className={classes["box-title"]} color={ITypoColor.COLOR_GENERIC_BLACK}>
+							<Typography typo={ITypo.TEXT_MD_GREY} className={classes["box-title"]} color={ITypoColor.COLOR_GENERIC_BLACK}>
 								Description
 							</Typography>
-							<Typography typo={ITypo.P_18}>{deedTypeSelected?.description}</Typography>
+							<Typography typo={ITypo.TEXT_LG_REGULAR}>{deedTypeSelected?.description}</Typography>
 						</div>
 					</div>
 					<div className={classes["pencil"]}>
@@ -154,7 +154,7 @@ export default function DeedTypesInformations(props: IProps) {
 				<div className={classes["documents-container"]}>
 					<Form onSubmit={onSubmitHandler}>
 						<div className={classes["container-title"]}>
-							<Typography typo={ITypo.P_SB_18}>Sélectionner les documents associés à ce type d'acte</Typography>
+							<Typography typo={ITypo.TEXT_LG_SEMIBOLD}>Sélectionner les documents associés à ce type d'acte</Typography>
 							<Tooltip text="Si vous ne trouvez pas le document que vous souhaitez dans la liste, cliquez sur « Modifier la liste des documents » pour créer ce type de document à la liste" />
 						</div>
 						<div className={classes["documents"]}>
@@ -184,7 +184,7 @@ export default function DeedTypesInformations(props: IProps) {
 					confirmText={"Valider"}
 					cancelText={"Annuler"}>
 					<div className={classes["modal-content"]}>
-						<Typography typo={ITypo.P_16} className={classes["text"]}>
+						<Typography typo={ITypo.TEXT_MD_REGULAR} className={classes["text"]}>
 							Êtes-vous sûr de vouloir supprimer ce type d'acte ?
 						</Typography>
 					</div>
@@ -198,7 +198,7 @@ export default function DeedTypesInformations(props: IProps) {
 					confirmText={"Enregistrer"}
 					cancelText={"Annuler"}>
 					<div className={classes["modal-content"]}>
-						<Typography typo={ITypo.P_16} className={classes["text"]}>
+						<Typography typo={ITypo.TEXT_MD_REGULAR} className={classes["text"]}>
 							Les documents seront associés à ce type d'acte.
 						</Typography>
 					</div>

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

@@ -12,9 +12,9 @@ export default class DeedTypes extends BasePage<IProps, IState> {
 			<DefaultDeedTypesDashboard mobileBackText={"Liste des listes de pièces"}>
 				<div className={classes["root"]}>
 					<div className={classes["no-role-selected"]}>
-						<Typography typo={ITypo.H1Bis}>Paramétrage des listes de pièces</Typography>
+						<Typography typo={ITypo.TITLE_H1}>Paramétrage des listes de pièces</Typography>
 						<div className={classes["choose-a-role"]}>
-							<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_NEUTRAL_500}>
+							<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
 								Sélectionnez un type d'acte
 							</Typography>
 						</div>

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

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

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

@@ -36,7 +36,7 @@ export default function DocumentTypesInformations() {
 		<DefaultDocumentTypesDashboard mobileBackText={"Liste des collaborateurs"}>
 			<div className={classes["root"]}>
 				<div className={classes["header"]}>
-					<Typography typo={ITypo.H1Bis}>Paramétrage des listes de pièces</Typography>
+					<Typography typo={ITypo.TITLE_H1}>Paramétrage des listes de pièces</Typography>
 					<Link href={Module.getInstance().get().modules.pages.DeedTypes.props.path}>
 						<Button variant={EButtonVariant.LINE}>
 							Retour au paramétrage des types d'actes
@@ -47,22 +47,22 @@ export default function DocumentTypesInformations() {
 				<div className={classes["document-infos"]}>
 					<div className={classes["left"]}>
 						<div className={classes["document-infos-row"]}>
-							<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.COLOR_NEUTRAL_500}>
+							<Typography typo={ITypo.TEXT_MD_GREY} color={ITypoColor.COLOR_NEUTRAL_500}>
 								Nom du document
 							</Typography>
-							<Typography typo={ITypo.P_18}>{documentSelected?.name}</Typography>
+							<Typography typo={ITypo.TEXT_LG_REGULAR}>{documentSelected?.name}</Typography>
 						</div>
 						<div className={classes["document-infos-row"]}>
-							<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.COLOR_NEUTRAL_500}>
+							<Typography typo={ITypo.TEXT_MD_GREY} color={ITypoColor.COLOR_NEUTRAL_500}>
 								Description visible par les collaborateurs de l'office
 							</Typography>
-							<Typography typo={ITypo.P_18}>{documentSelected?.private_description}</Typography>
+							<Typography typo={ITypo.TEXT_LG_REGULAR}>{documentSelected?.private_description}</Typography>
 						</div>
 						<div className={classes["document-infos-row"]}>
-							<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.COLOR_NEUTRAL_500}>
+							<Typography typo={ITypo.TEXT_MD_GREY} color={ITypoColor.COLOR_NEUTRAL_500}>
 								Description visible par les clients de l'office
 							</Typography>
-							<Typography typo={ITypo.P_18}>{documentSelected?.public_description}</Typography>
+							<Typography typo={ITypo.TEXT_LG_REGULAR}>{documentSelected?.public_description}</Typography>
 						</div>
 					</div>
 					<div className={classes["right"]}>

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

@@ -12,9 +12,9 @@ export default class DocumentTypes extends BasePage<IProps, IState> {
 			<DefaultDocumentTypesDashboard mobileBackText={"Liste des documentss"}>
 				<div className={classes["root"]}>
 					<div className={classes["no-role-selected"]}>
-						<Typography typo={ITypo.H1Bis}>Paramétrage des documents</Typography>
+						<Typography typo={ITypo.TITLE_H1}>Paramétrage des documents</Typography>
 						<div className={classes["choose-a-role"]}>
-							<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_NEUTRAL_500}>
+							<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
 								Sélectionnez un document
 							</Typography>
 						</div>

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

@@ -65,7 +65,7 @@ class AddClientToFolderClass extends BasePage<IPropsClass, IState> {
 					<div className={classes["back-arrow"]}>
 						<BackArrow url={backwardPath} />
 					</div>
-					<Typography typo={ITypo.H1Bis}>Associer un ou plusieurs client(s)</Typography>
+					<Typography typo={ITypo.TITLE_H1}>Associer un ou plusieurs client(s)</Typography>
 					{this.state.isLoaded && (
 						<>
 							<div className={classes["radiobox-container"]}>
@@ -75,7 +75,7 @@ class AddClientToFolderClass extends BasePage<IPropsClass, IState> {
 										onChange={this.onExistingClientSelected}
 										checked={this.state.selectedOption === "existing_customer"}
 										value={"existing client"}>
-										<Typography typo={ITypo.P_ERR_18}>Client existant</Typography>
+										<Typography typo={ITypo.TEXT_LG_ERROR}>Client existant</Typography>
 									</RadioBox>
 								)}
 
@@ -84,7 +84,7 @@ class AddClientToFolderClass extends BasePage<IPropsClass, IState> {
 									onChange={this.onNewClientSelected}
 									checked={this.state.selectedOption === "new_customer"}
 									value={"new client"}>
-									<Typography typo={ITypo.P_ERR_18}>Nouveau client</Typography>
+									<Typography typo={ITypo.TEXT_LG_ERROR}>Nouveau client</Typography>
 								</RadioBox>
 							</div>
 

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

@@ -40,7 +40,7 @@ export default function ParameterDocuments(props: IProps) {
 					value: document.uid,
 				};
 			});
-			formattedOptions.sort((a, b) => a.label > b.label? 1 : -1);
+		formattedOptions.sort((a, b) => (a.label > b.label ? 1 : -1));
 		setFormattedOptions(formattedOptions);
 	}, [props.folder.deed?.document_types]);
 
@@ -129,11 +129,11 @@ export default function ParameterDocuments(props: IProps) {
 			<div className={classes["add-document-form-container"]}>
 				<div className={classes["radiobox-container"]}>
 					<RadioBox name="document" onChange={selectEditMode} checked={addOrEditDocument === "edit"} value={"existing client"}>
-						<Typography typo={ITypo.P_ERR_18}>Document existant</Typography>
+						<Typography typo={ITypo.TEXT_LG_ERROR}>Document existant</Typography>
 					</RadioBox>
 
 					<RadioBox name="document" onChange={selectAddMode} checked={addOrEditDocument === "add"} value={"new client"}>
-						<Typography typo={ITypo.P_ERR_18}>Créer un document</Typography>
+						<Typography typo={ITypo.TEXT_LG_ERROR}>Créer un document</Typography>
 					</RadioBox>
 				</div>
 				{addOrEditDocument === "add" && (

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

@@ -53,7 +53,7 @@ class AskDocumentsClass extends BasePage<IPropsClass, IState> {
 			<DefaultNotaryDashboard title={"Demander des documents"} onSelectedFolder={() => {}}>
 				<div className={classes["root"]}>
 					<BackArrow url={backUrl} />
-					<Typography typo={ITypo.H1} color={ITypoColor.COLOR_GENERIC_BLACK} className={classes["title"]}>
+					<Typography typo={ITypo.DISPLAY_LARGE} color={ITypoColor.COLOR_GENERIC_BLACK} className={classes["title"]}>
 						Demander des documents
 					</Typography>
 					<Form onSubmit={this.onFormSubmit}>

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"]}>

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

@@ -82,10 +82,10 @@ class CreateFolderClass extends BasePage<IPropsClass, IState> {
 			<DefaultDoubleSidePage title={"Dossier"} image={backgroundImage} type="background" showHeader={true}>
 				<div className={classes["root"]}>
 					<BackArrow />
-					<Typography typo={ITypo.H1} color={ITypoColor.COLOR_GENERIC_BLACK} className={classes["title"]}>
+					<Typography typo={ITypo.DISPLAY_LARGE} color={ITypoColor.COLOR_GENERIC_BLACK} className={classes["title"]}>
 						Créer un dossier
 					</Typography>
-					<Typography typo={ITypo.H3} color={ITypoColor.COLOR_PRIMARY_500} className={classes["subtitle"]}>
+					<Typography typo={ITypo.TITLE_H5} color={ITypoColor.COLOR_PRIMARY_500} className={classes["subtitle"]}>
 						Informations dossier
 					</Typography>
 					<Form onSubmit={this.onFormSubmit}>
@@ -118,7 +118,7 @@ class CreateFolderClass extends BasePage<IPropsClass, IState> {
 							/>
 
 							<div className={classes["access-container"]}>
-								<Typography typo={ITypo.H3} color={ITypoColor.COLOR_PRIMARY_500}>
+								<Typography typo={ITypo.TITLE_H5} color={ITypoColor.COLOR_PRIMARY_500}>
 									Accès au dossier
 								</Typography>
 								<div className={classes["radio-container"]}>

src/front/Components/Layouts/Folder/FolderInformation/ClientSection/index.tsx

@@ -50,7 +50,7 @@ export default class ClientSection extends React.Component<IProps, IState> {
 				) : (
 					<div className={classes["no-client"]}>
 						<div className={classes["title"]}>
-							<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_NEUTRAL_500}>
+							<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
 								Aucun client n'est associé au dossier.
 							</Typography>
 						</div>

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

@@ -93,7 +93,7 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
 								<div className={classes["folder-header"]}>
 									<div className={classes["header"]}>
 										<div className={classes["title"]}>
-											<Typography typo={ITypo.H1Bis}>Informations du dossier</Typography>
+											<Typography typo={ITypo.TITLE_H1}>Informations du dossier</Typography>
 										</div>
 										<Link href={redirectPathEditCollaborators}>
 											<Button variant={EButtonVariant.LINE} icon={ChevronIcon}>
@@ -192,7 +192,7 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
 									cancelText={"Annuler"}
 									confirmText={"Archiver"}>
 									<div className={classes["modal-title"]}>
-										<Typography typo={ITypo.P_16}>Souhaitez-vous vraiment archiver le dossier ?</Typography>
+										<Typography typo={ITypo.TEXT_MD_REGULAR}>Souhaitez-vous vraiment archiver le dossier ?</Typography>
 									</div>
 									<TextAreaField
 										name="archived_description"
@@ -209,7 +209,7 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
 									cancelText={"Annuler"}
 									confirmText={"Archiver"}>
 									<div className={classes["modal-title"]}>
-										<Typography typo={ITypo.P_16}>
+										<Typography typo={ITypo.TEXT_MD_REGULAR}>
 											Vous êtes en train d’archiver le dossier sans avoir l’ancré, êtes-vous sûr de vouloir le faire ?
 										</Typography>
 									</div>
@@ -228,16 +228,16 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
 									cancelText={"Annuler"}
 									confirmText={"Confirmer"}>
 									<div className={classes["modal-title"]}>
-										<Typography typo={ITypo.P_16}>Cette action sera irréversible.</Typography>
+										<Typography typo={ITypo.TEXT_MD_REGULAR}>Cette action sera irréversible.</Typography>
 									</div>
 								</Confirm>
 								<Newsletter isOpen={false} />
 							</div>
 						) : (
 							<div className={classes["no-folder-selected"]}>
-								<Typography typo={ITypo.H1Bis}>Informations du dossier</Typography>
+								<Typography typo={ITypo.TITLE_H1}>Informations du dossier</Typography>
 								<div className={classes["choose-a-folder"]}>
-									<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_NEUTRAL_500}>
+									<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
 										Sélectionnez un dossier
 									</Typography>
 								</div>
@@ -268,7 +268,10 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
 					showButtons={!this.state.hasValidateAnchoring}>
 					<div className={classes["validate-document-container"]}>
 						{!this.state.hasValidateAnchoring && (
-							<Typography typo={ITypo.P_16} color={ITypoColor.COLOR_GENERIC_BLACK} className={classes["validate-text"]}>
+							<Typography
+								typo={ITypo.TEXT_MD_REGULAR}
+								color={ITypoColor.COLOR_GENERIC_BLACK}
+								className={classes["validate-text"]}>
 								Les documents du dossier seront certifiés sur la blockchain. Pensez à bien télécharger l'ensemble des
 								documents du dossier ainsi que le fichier de preuve d'ancrage pour les mettre dans la GED de votre logiciel
 								de rédaction d'actes.
@@ -276,7 +279,10 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
 						)}
 						{this.state.hasValidateAnchoring && (
 							<div className={classes["document-validating-container"]}>
-								<Typography typo={ITypo.P_16} color={ITypoColor.COLOR_GENERIC_BLACK} className={classes["validate-text"]}>
+								<Typography
+									typo={ITypo.TEXT_MD_REGULAR}
+									color={ITypoColor.COLOR_GENERIC_BLACK}
+									className={classes["validate-text"]}>
 									Veuillez revenir sur le dossier dans 5 minutes et rafraîchir la page pour télécharger le dossier de
 									preuve d'ancrage et le glisser dans la GED de votre logiciel de rédaction d'acte.
 								</Typography>

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

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"]}>

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}>

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"]}>

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"]}>

src/front/Components/Layouts/Folder/ViewDocuments/OcrResult/index.tsx

@@ -13,15 +13,15 @@ export default class OcrResult extends React.Component<IProps, IState> {
 	public override render(): JSX.Element | null {
 		return (
 			<div className={classes["root"]}>
-				<Typography typo={ITypo.P_16} className={classes["result-text"]}>
+				<Typography typo={ITypo.TEXT_MD_REGULAR} className={classes["result-text"]}>
 					Résultat de l'analyse :
 				</Typography>
 				<div className={classes["result-container"]}>
-					<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
+					<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_GENERIC_BLACK}>
 						Document conforme à :&nbsp;
 					</Typography>
 					<div className={classes["percentage-container"]}>
-						<Typography typo={ITypo.P_18} color={this.getColor()}>
+						<Typography typo={ITypo.TEXT_LG_REGULAR} color={this.getColor()}>
 							{this.props.percentage}%
 						</Typography>
 						<div className={classes["dot"]} data-color={this.getColor()} />

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

@@ -73,10 +73,10 @@ class ViewDocumentsClass extends BasePage<IPropsClass, IState> {
 			<DefaultNotaryDashboard title={"Demander des documents"} hasBackArrow mobileBackText="Retour aux documents">
 				{this.state.document && this.state.document.files && this.state.selectedFile && !this.state.isLoading && (
 					<div className={classes["root"]}>
-						<Typography typo={ITypo.H1} color={ITypoColor.COLOR_GENERIC_BLACK} className={classes["title"]}>
+						<Typography typo={ITypo.DISPLAY_LARGE} color={ITypoColor.COLOR_GENERIC_BLACK} className={classes["title"]}>
 							{this.state.document.folder?.name}
 						</Typography>
-						<Typography typo={ITypo.H3} color={ITypoColor.COLOR_GENERIC_BLACK} className={classes["subtitle"]}>
+						<Typography typo={ITypo.TITLE_H5} color={ITypoColor.COLOR_GENERIC_BLACK} className={classes["subtitle"]}>
 							{this.state.document.document_type?.name}
 						</Typography>
 						<div className={classes["document-container"]}>
@@ -139,7 +139,10 @@ class ViewDocumentsClass extends BasePage<IPropsClass, IState> {
 							cancelText={"Annuler"}
 							confirmText={"Confirmer"}>
 							<div className={classes["validate-document-container"]}>
-								<Typography typo={ITypo.P_16} color={ITypoColor.COLOR_GENERIC_BLACK} className={classes["validate-text"]}>
+								<Typography
+									typo={ITypo.TEXT_MD_REGULAR}
+									color={ITypoColor.COLOR_GENERIC_BLACK}
+									className={classes["validate-text"]}>
 									Êtes-vous sûr de vouloir valider ce document ?
 								</Typography>
 							</div>
@@ -153,7 +156,10 @@ class ViewDocumentsClass extends BasePage<IPropsClass, IState> {
 							cancelText={"Annuler"}
 							confirmText={"Refuser"}>
 							<div className={classes["refuse-document-container"]}>
-								<Typography typo={ITypo.P_16} color={ITypoColor.COLOR_GENERIC_BLACK} className={classes["refuse-text"]}>
+								<Typography
+									typo={ITypo.TEXT_MD_REGULAR}
+									color={ITypoColor.COLOR_GENERIC_BLACK}
+									className={classes["refuse-text"]}>
 									Veuillez indiquer au client le motif du refus de son document afin qu'il puisse vous renvoyer une bonne
 									version.
 								</Typography>
@@ -164,7 +170,7 @@ class ViewDocumentsClass extends BasePage<IPropsClass, IState> {
 				)}
 				{(!this.state.selectedFile || !this.state.document) && !this.state.isLoading && (
 					<div className={classes["root"]}>
-						<Typography typo={ITypo.P_16} color={ITypoColor.COLOR_GENERIC_BLACK} className={classes["refuse-text"]}>
+						<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_GENERIC_BLACK} className={classes["refuse-text"]}>
 							Document non trouvé
 						</Typography>
 					</div>

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

@@ -27,9 +27,9 @@ export default class Folder extends BasePage<IProps, IState> {
 			<DefaultNotaryDashboard title={"Dossier"} onSelectedFolder={this.onSelectedFolder} mobileBackText={"Liste des dossiers"}>
 				<div className={classes["root"]}>
 					<div className={classes["no-folder-selected"]}>
-						<Typography typo={ITypo.H1Bis}>Informations du dossier</Typography>
+						<Typography typo={ITypo.TITLE_H1}>Informations du dossier</Typography>
 						<div className={classes["choose-a-folder"]}>
-							<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_NEUTRAL_500}>
+							<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
 								Sélectionnez un dossier
 							</Typography>
 						</div>

src/front/Components/Layouts/FolderArchived/FolderInformation/ClientSection/index.tsx

@@ -33,7 +33,7 @@ export default class ClientSection extends React.Component<IProps, IState> {
 					</>
 				) : (
 					<div className={classes["no-client"]}>
-						<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_NEUTRAL_500}>
+						<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
 							Aucun client dans ce dossier
 						</Typography>
 					</div>

src/front/Components/Layouts/FolderArchived/FolderInformation/index.tsx

@@ -63,7 +63,7 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
 								<div className={classes["folder-header"]}>
 									<div className={classes["header"]}>
 										<div className={classes["title"]}>
-											<Typography typo={ITypo.H1Bis}>Informations du dossier</Typography>
+											<Typography typo={ITypo.TITLE_H1}>Informations du dossier</Typography>
 										</div>
 										<Link href={redirectPathEditCollaborators}>
 											<Button variant={EButtonVariant.LINE} icon={ChevronIcon}>
@@ -137,9 +137,9 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
 							</div>
 						) : (
 							<div className={classes["no-folder-selected"]}>
-								<Typography typo={ITypo.H1Bis}>Informations du dossier</Typography>
+								<Typography typo={ITypo.TITLE_H1}>Informations du dossier</Typography>
 								<div className={classes["choose-a-folder"]}>
-									<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_NEUTRAL_500}>
+									<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
 										Aucun dossier sélectionné
 									</Typography>
 								</div>

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"]}>

src/front/Components/Layouts/FolderArchived/index.tsx

@@ -30,9 +30,9 @@ export default class FolderArchived extends BasePage<IProps, IState> {
 				mobileBackText={"Liste des dossiers"}>
 				<div className={classes["root"]}>
 					<div className={classes["no-folder-selected"]}>
-						<Typography typo={ITypo.H1Bis}>Informations du dossier</Typography>
+						<Typography typo={ITypo.TITLE_H1}>Informations du dossier</Typography>
 						<div className={classes["choose-a-folder"]}>
-							<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_NEUTRAL_500}>
+							<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
 								Aucun dossier sélectionné
 							</Typography>
 						</div>

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>
 		);

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"

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">

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">

src/front/Components/Layouts/LoginCustomer/PasswordForgotten/index.tsx

@@ -15,7 +15,7 @@ export default function PasswordForgotten(props: IProps) {
 
 	return (
 		<div className={classes["root"]}>
-			<Typography typo={ITypo.H1}>
+			<Typography typo={ITypo.DISPLAY_LARGE}>
 				<div className={classes["title"]}>Réinitialisez votre mot de passe</div>
 			</Typography>
 			<Form className={classes["form"]} onSubmit={onSubmit}>
@@ -25,7 +25,7 @@ export default function PasswordForgotten(props: IProps) {
 					validationError={validationErrors.find((error) => error.property === "password")}
 					password
 				/>
-				<Typography typo={ITypo.CAPTION_14} color={ITypoColor.COLOR_NEUTRAL_500} className={classes["password_indication"]}>
+				<Typography typo={ITypo.TEXT_SM_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500} className={classes["password_indication"]}>
 					Au moins 8 caractères dont 1 majuscule, 1 minuscule et 1 chiffre.
 				</Typography>
 				<TextField

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">

src/front/Components/Layouts/LoginCustomer/StepNewPassword/index.tsx

@@ -15,7 +15,7 @@ export default function StepNewPassword(props: IProps) {
 
 	return (
 		<div className={classes["root"]}>
-			<Typography typo={ITypo.H1}>
+			<Typography typo={ITypo.DISPLAY_LARGE}>
 				<div className={classes["title"]}>Configurez votre mot de passe</div>
 			</Typography>
 			<Form className={classes["form"]} onSubmit={onSubmit}>
@@ -25,7 +25,7 @@ export default function StepNewPassword(props: IProps) {
 					validationError={validationErrors.find((error) => error.property === "password")}
 					password
 				/>
-				<Typography typo={ITypo.CAPTION_14} color={ITypoColor.COLOR_NEUTRAL_500} className={classes["password_indication"]}>
+				<Typography typo={ITypo.TEXT_SM_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500} className={classes["password_indication"]}>
 					Au moins 8 caractères dont 1 majuscule, 1 minuscule et 1 chiffre.
 				</Typography>
 				<TextField

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>

src/front/Components/Layouts/LoginCustomer/StepTotp/index.tsx

@@ -37,7 +37,7 @@ export default function StepTotp(props: IProps) {
 
 	return (
 		<div className={classes["root"]}>
-			<Typography typo={ITypo.H1}>
+			<Typography typo={ITypo.DISPLAY_LARGE}>
 				<div className={classes["title"]}>
 					Votre code a été envoyé par SMS au ** ** ** {partialPhoneNumber.replace(/(.{2})/g, "$1 ")}
 				</div>
@@ -53,7 +53,7 @@ export default function StepTotp(props: IProps) {
 				</Button>
 			</Form>
 			<div className={classes["ask-another-code"]}>
-				<Typography typo={ITypo.P_16}>Vous n'avez rien reçu ?</Typography>
+				<Typography typo={ITypo.TEXT_MD_REGULAR}>Vous n'avez rien reçu ?</Typography>
 				<Button
 					variant={EButtonVariant.LINE}
 					disabled={disableNewCodeButton}
@@ -63,9 +63,9 @@ export default function StepTotp(props: IProps) {
 					Envoyer un nouveau code
 				</Button>
 				{secondsBeforeNewCode !== 0 && (
-					<Typography typo={ITypo.P_SB_16} className={classes["new-code-timer"]}>
+					<Typography typo={ITypo.TEXT_MD_SEMIBOLD} className={classes["new-code-timer"]}>
 						Redemandez un code dans
-						<Typography typo={ITypo.P_16} color={ITypoColor.COLOR_SECONDARY_500}>
+						<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_SECONDARY_500}>
 							00:{secondsBeforeNewCode < 10 ? `0${secondsBeforeNewCode}` : secondsBeforeNewCode}
 						</Typography>
 					</Typography>

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>

src/front/Components/Layouts/LoginHome/index.tsx

@@ -11,12 +11,12 @@ export default function LoginHome() {
 	return (
 		<DefaultDoubleSidePage title={"Login"} image={LandingImage}>
 			<div className={classes["root"]}>
-				<Typography typo={ITypo.H1}>
+				<Typography typo={ITypo.DISPLAY_LARGE}>
 					<div className={classes["title"]}>Connectez-vous à votre plateforme LEcoffre.io</div>
 				</Typography>
 				<div className={classes["content"]}>
 					<div className={classes["section"]}>
-						<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
+						<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_GENERIC_BLACK}>
 							Je suis un notaire / collaborateur
 						</Typography>
 						<Link href={Module.getInstance().get().modules.pages.Login.props.path}>
@@ -25,7 +25,7 @@ export default function LoginHome() {
 					</div>
 					<div className={classes["separator"]} />
 					<div className={classes["section"]}>
-						<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
+						<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_GENERIC_BLACK}>
 							Je suis un client
 						</Typography>
 						<Link href={Module.getInstance().get().modules.pages.CustomersLogin.props.path}>
@@ -34,7 +34,7 @@ export default function LoginHome() {
 					</div>
 				</div>
 				<div className={classes["bottom"]}>
-					<Typography typo={ITypo.P_18}>
+					<Typography typo={ITypo.TEXT_LG_REGULAR}>
 						<div className={classes["forget-password"]}>Vous n'arrivez pas à vous connecter ?</div>
 					</Typography>
 					<Link href="mailto:support@lecoffre.io">

src/front/Components/Layouts/MyAccount/index.tsx

@@ -27,12 +27,12 @@ export default class MyAccount extends Base<IProps, IState> {
 		return (
 			<DefaultTemplate title={"Mon compte"}>
 				<div className={classes["root"]}>
-					<Typography typo={ITypo.H1} color={ITypoColor.COLOR_GENERIC_BLACK} className={classes["title"]}>
+					<Typography typo={ITypo.DISPLAY_LARGE} color={ITypoColor.COLOR_GENERIC_BLACK} className={classes["title"]}>
 						Mon compte
 					</Typography>
 					<div className={classes["parts-container"]}>
 						<div className={classes["part"]}>
-							<Typography typo={ITypo.H2} color={ITypoColor.COLOR_GENERIC_BLACK}>
+							<Typography typo={ITypo.TITLE_H3} color={ITypoColor.COLOR_GENERIC_BLACK}>
 								Mes informations
 							</Typography>
 							<Form onSubmit={this.onFormSubmit}>
@@ -69,7 +69,7 @@ export default class MyAccount extends Base<IProps, IState> {
 							</Form>
 						</div>
 						<div className={classes["part"]}>
-							<Typography typo={ITypo.H2} color={ITypoColor.COLOR_GENERIC_BLACK}>
+							<Typography typo={ITypo.TITLE_H3} color={ITypoColor.COLOR_GENERIC_BLACK}>
 								Mon office
 							</Typography>
 							<Form onSubmit={this.onFormSubmit}>

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.TEXT_MD_REGULAR}>{user.contact?.last_name}</Typography>
-					<Typography typo={ITypo.P_16}>{user.contact?.first_name}</Typography>
+					<Typography typo={ITypo.TEXT_MD_REGULAR}>{user.contact?.first_name}</Typography>
-					<Typography typo={ITypo.P_16}>{user.contact?.email}</Typography>
+					<Typography typo={ITypo.TEXT_MD_REGULAR}>{user.contact?.email}</Typography>
-					<Typography typo={ITypo.P_16}>{user.contact?.phone_number}</Typography>
+					<Typography typo={ITypo.TEXT_MD_REGULAR}>{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.office_role ? user.office_role?.name : "Utilisateur restreint"}
+					</Typography>
 				</div>
 				<div key={user.uid} className={classes["user-line-mobile"]}>
 					<div className={classes["line"]}>
-						<Typography typo={ITypo.P_SB_16} color={ITypoColor.COLOR_GENERIC_BLACK}>
+						<Typography typo={ITypo.TEXT_MD_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK}>
 							Nom
 						</Typography>
-						<Typography typo={ITypo.P_16}>{user.contact?.last_name}</Typography>
+						<Typography typo={ITypo.TEXT_MD_REGULAR}>{user.contact?.last_name}</Typography>
 					</div>
 					<div className={classes["line"]}>
-						<Typography typo={ITypo.P_SB_16} color={ITypoColor.COLOR_GENERIC_BLACK}>
+						<Typography typo={ITypo.TEXT_MD_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK}>
 							Prénom
 						</Typography>
-						<Typography typo={ITypo.P_16}>{user.contact?.first_name}</Typography>
+						<Typography typo={ITypo.TEXT_MD_REGULAR}>{user.contact?.first_name}</Typography>
 					</div>
 					<div className={classes["line"]}>
-						<Typography typo={ITypo.P_SB_16} color={ITypoColor.COLOR_GENERIC_BLACK}>
+						<Typography typo={ITypo.TEXT_MD_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK}>
 							E-mail
 						</Typography>
-						<Typography typo={ITypo.P_16}>{user.contact?.email}</Typography>
+						<Typography typo={ITypo.TEXT_MD_REGULAR}>{user.contact?.email}</Typography>
 					</div>
 					<div className={classes["line"]}>
-						<Typography typo={ITypo.P_SB_16} color={ITypoColor.COLOR_GENERIC_BLACK}>
+						<Typography typo={ITypo.TEXT_MD_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK}>
 							Téléphone
 						</Typography>
-						<Typography typo={ITypo.P_16}>{user.contact?.phone_number}</Typography>
+						<Typography typo={ITypo.TEXT_MD_REGULAR}>{user.contact?.phone_number}</Typography>
 					</div>
 					<div className={classes["line"]}>
-						<Typography typo={ITypo.P_SB_16} color={ITypoColor.COLOR_GENERIC_BLACK}>
+						<Typography typo={ITypo.TEXT_MD_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK}>
 							Rôle
 						</Typography>
-						<Typography typo={ITypo.P_16}>{user.office_role ? user.office_role?.name : user.role?.name}</Typography>
+						<Typography typo={ITypo.TEXT_MD_REGULAR}>{user.office_role ? user.office_role?.name : user.role?.name}</Typography>
 					</div>
 				</div>
 			</>
@@ -118,30 +120,30 @@ export default function OfficeInformations(props: IProps) {
 		<DefaultOfficeDashboard mobileBackText={"Liste des utilisateurs"}>
 			<div className={classes["root"]}>
 				<div className={classes["header"]}>
-					<Typography typo={ITypo.H1Bis}>Office {officeSelected?.crpcen + " - " + officeSelected?.name}</Typography>
+					<Typography typo={ITypo.TITLE_H1}>Office {officeSelected?.crpcen + " - " + officeSelected?.name}</Typography>
 					<div className={classes["header-right"]}>
 						<div className={classes["round"]} />
-						<Typography typo={ITypo.P_16}>Office active</Typography>
+						<Typography typo={ITypo.TEXT_MD_REGULAR}>Office active</Typography>
 					</div>
 				</div>
 				<div className={classes["office-infos"]}>
 					<div className={classes["office-infos-row"]}>
-						<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.COLOR_NEUTRAL_500}>
+						<Typography typo={ITypo.TEXT_MD_GREY} color={ITypoColor.COLOR_NEUTRAL_500}>
 							CRPCEN
 						</Typography>
-						<Typography typo={ITypo.P_18}>{officeSelected?.crpcen}</Typography>
+						<Typography typo={ITypo.TEXT_LG_REGULAR}>{officeSelected?.crpcen}</Typography>
 					</div>
 					<div className={classes["office-infos-row"]}>
-						<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.COLOR_NEUTRAL_500}>
+						<Typography typo={ITypo.TEXT_MD_GREY} color={ITypoColor.COLOR_NEUTRAL_500}>
 							Dénomination
 						</Typography>
-						<Typography typo={ITypo.P_18}>{officeSelected?.name}</Typography>
+						<Typography typo={ITypo.TEXT_LG_REGULAR}>{officeSelected?.name}</Typography>
 					</div>
 					<div className={classes["office-infos-row"]}>
-						<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.COLOR_NEUTRAL_500}>
+						<Typography typo={ITypo.TEXT_MD_GREY} color={ITypoColor.COLOR_NEUTRAL_500}>
 							Addresse
 						</Typography>
-						<Typography typo={ITypo.P_18}>
+						<Typography typo={ITypo.TEXT_LG_REGULAR}>
 							{officeSelected?.address?.address} - {officeSelected?.address?.city} {officeSelected?.address?.zip_code}
 						</Typography>
 					</div>
@@ -149,23 +151,23 @@ export default function OfficeInformations(props: IProps) {
 				<div className={classes["office-users"]}>
 					<div className={classes["users"]}>
 						<div className={classes["title"]}>
-							<Typography typo={ITypo.H3}>Administrateurs</Typography>
+							<Typography typo={ITypo.TITLE_H5}>Administrateurs</Typography>
 						</div>
 						<div className={classes["users-container"]}>
 							<div className={classes["first-line"]}>
-								<Typography typo={ITypo.P_SB_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
+								<Typography typo={ITypo.TEXT_LG_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK}>
 									Nom
 								</Typography>
-								<Typography typo={ITypo.P_SB_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
+								<Typography typo={ITypo.TEXT_LG_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK}>
 									Prénom
 								</Typography>
-								<Typography typo={ITypo.P_SB_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
+								<Typography typo={ITypo.TEXT_LG_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK}>
 									E-mail
 								</Typography>
-								<Typography typo={ITypo.P_SB_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
+								<Typography typo={ITypo.TEXT_LG_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK}>
 									Téléphone
 								</Typography>
-								<Typography typo={ITypo.P_SB_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
+								<Typography typo={ITypo.TEXT_LG_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK}>
 									Rôle
 								</Typography>
 							</div>
@@ -176,23 +178,23 @@ export default function OfficeInformations(props: IProps) {
 					</div>
 					<div className={classes["users"]}>
 						<div className={classes["title"]}>
-							<Typography typo={ITypo.H3}>Collaborateurs</Typography>
+							<Typography typo={ITypo.TITLE_H5}>Collaborateurs</Typography>
 						</div>
 						<div className={classes["users-container"]}>
 							<div className={classes["first-line"]}>
-								<Typography typo={ITypo.P_SB_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
+								<Typography typo={ITypo.TEXT_LG_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK}>
 									Nom
 								</Typography>
-								<Typography typo={ITypo.P_SB_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
+								<Typography typo={ITypo.TEXT_LG_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK}>
 									Prénom
 								</Typography>
-								<Typography typo={ITypo.P_SB_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
+								<Typography typo={ITypo.TEXT_LG_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK}>
 									E-mail
 								</Typography>
-								<Typography typo={ITypo.P_SB_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
+								<Typography typo={ITypo.TEXT_LG_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK}>
 									Téléphone
 								</Typography>
-								<Typography typo={ITypo.P_SB_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
+								<Typography typo={ITypo.TEXT_LG_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK}>
 									Rôle
 								</Typography>
 							</div>

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

@@ -12,9 +12,9 @@ export default class Offices extends BasePage<IProps, IState> {
 			<DefaultOfficeDashboard title={"Dossier"} mobileBackText={"Liste des offices"}>
 				<div className={classes["root"]}>
 					<div className={classes["no-folder-selected"]}>
-						<Typography typo={ITypo.H1Bis}>Informations des offices</Typography>
+						<Typography typo={ITypo.TITLE_H1}>Informations des offices</Typography>
 						<div className={classes["choose-a-folder"]}>
-							<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_NEUTRAL_500}>
+							<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
 								Sélectionnez un office
 							</Typography>
 						</div>

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.DISPLAY_LARGE}>Erreur 404</Typography>
-						<Typography typo={ITypo.P_18} className={classes["text"]}>
+						<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}>

src/front/Components/Layouts/Rib/index.tsx

@@ -94,7 +94,7 @@ export default function Rib() {
 	return (
 		<DefaultTemplate title={"RIB"}>
 			<div className={classes["root"]}>
-				<Typography typo={ITypo.H1} color={ITypoColor.COLOR_GENERIC_BLACK} className={classes["title"]}>
+				<Typography typo={ITypo.DISPLAY_LARGE} color={ITypoColor.COLOR_GENERIC_BLACK} className={classes["title"]}>
 					RIB de l'office
 				</Typography>
 				{isLoading && (
@@ -108,7 +108,7 @@ export default function Rib() {
 					<>
 						<div className={classes["document-container"]}>
 							<div>
-								<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_NEUTRAL_500}>
+								<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
 									Aucun RIB n'a été déposé pour cet office
 								</Typography>
 							</div>
@@ -159,10 +159,10 @@ export default function Rib() {
 					closeBtn
 					cancelText={"Annuler"}
 					confirmText={"Supprimer"}>
-					<Typography typo={ITypo.H1} color={ITypoColor.COLOR_GENERIC_BLACK} className={classes["title"]}>
+					<Typography typo={ITypo.DISPLAY_LARGE} color={ITypoColor.COLOR_GENERIC_BLACK} className={classes["title"]}>
 						Supprimer le RIB
 					</Typography>
-					<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_NEUTRAL_500}>
+					<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
 						Voulez-vous vraiment supprimer le RIB de votre office ?
 					</Typography>
 				</Confirm>

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>

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>

src/front/Components/Layouts/Roles/index.tsx

@@ -12,9 +12,9 @@ export default class Collaborators extends BasePage<IProps, IState> {
 			<DefaultRoleDashboard mobileBackText={"Liste des rôles"}>
 				<div className={classes["root"]}>
 					<div className={classes["no-role-selected"]}>
-						<Typography typo={ITypo.H1Bis}>Gestion des rôles</Typography>
+						<Typography typo={ITypo.TITLE_H1}>Gestion des rôles</Typography>
 						<div className={classes["choose-a-role"]}>
-							<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_NEUTRAL_500}>
+							<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
 								Sélectionnez un rôle
 							</Typography>
 						</div>

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

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

@@ -72,7 +72,7 @@ export default function SubscribeCheckoutTicket(props: IProps) {
 		<div className={classes["root"]}>
 			<div className={classes["container"]}>
 				<div className={classes["forfeit-type"]}>
-					<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
+					<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_GENERIC_BLACK}>
 						{forfeitType === EForfeitType.standard ? "Forfait standard" : "Forfait illimité"}
 					</Typography>
 				</div>
@@ -84,7 +84,7 @@ export default function SubscribeCheckoutTicket(props: IProps) {
 						onChange={handleFrequencyChange}
 						defaultChecked={paymentFrequency === EPaymentFrequencyFront.yearly}
 						disabled={props.disableInputs}>
-						<Typography typo={ITypo.P_ERR_18}>Annuel</Typography>
+						<Typography typo={ITypo.TEXT_LG_ERROR}>Annuel</Typography>
 					</RadioBox>
 					<RadioBox
 						name="paymentFrequency"
@@ -92,18 +92,18 @@ export default function SubscribeCheckoutTicket(props: IProps) {
 						onChange={handleFrequencyChange}
 						defaultChecked={paymentFrequency === EPaymentFrequencyFront.monthly}
 						disabled={props.disableInputs}>
-						<Typography typo={ITypo.P_ERR_18}>Mensuel</Typography>
+						<Typography typo={ITypo.TEXT_LG_ERROR}>Mensuel</Typography>
 					</RadioBox>
 				</div>
 				<div className={classes["separator"]} />
 				<div className={classes["container-line"]}>
 					<div className={classes["line"]}>
 						<div className={classes["line-sub-container"]}>
-							<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
+							<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_GENERIC_BLACK}>
 								{forfeitType === EForfeitType.standard ? "Plan individuel" : "Plan illimité"}
 							</Typography>
 							{paymentFrequency === EPaymentFrequencyFront.yearly && (
-								<Typography typo={ITypo.CAPTION_14_SB} color={ITypoColor.COLOR_GENERIC_BLACK}>
+								<Typography typo={ITypo.TEXT_SM_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK}>
 									{formatFloat(
 										forfeitType === EForfeitType.standard
 											? forfeitsPrices[EForfeitType.standard]
@@ -115,11 +115,14 @@ export default function SubscribeCheckoutTicket(props: IProps) {
 						</div>
 
 						<div className={classes["line-sub-container"]}>
-							<Typography typo={ITypo.P_SB_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
+							<Typography typo={ITypo.TEXT_LG_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK}>
 								{totalPlan}&nbsp;€
 							</Typography>
 							{paymentFrequency === EPaymentFrequencyFront.yearly && (
-								<Typography typo={ITypo.P_16} color={ITypoColor.COLOR_GENERIC_BLACK} className={classes["stroked-price"]}>
+								<Typography
+									typo={ITypo.TEXT_MD_REGULAR}
+									color={ITypoColor.COLOR_GENERIC_BLACK}
+									className={classes["stroked-price"]}>
 									{formatFloat(
 										forfeitType === EForfeitType.standard
 											? forfeitsPrices[EForfeitType.standard] * multiplier
@@ -133,15 +136,15 @@ export default function SubscribeCheckoutTicket(props: IProps) {
 					{forfeitType === EForfeitType.standard && (
 						<div className={classes["line"]}>
 							<div className={classes["line-sub-container"]}>
-								<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
+								<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_GENERIC_BLACK}>
 									{numberOfCollaborators} collaborateurs
 								</Typography>
-								<Typography typo={ITypo.CAPTION_14_SB} color={ITypoColor.COLOR_GENERIC_BLACK}>
+								<Typography typo={ITypo.TEXT_SM_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK}>
 									{formatFloat(collaboratorPrice)}&nbsp;€ x {numberOfCollaborators}{" "}
 									{paymentFrequency === EPaymentFrequencyFront.yearly && "x 12"}
 								</Typography>
 							</div>
-							<Typography typo={ITypo.P_SB_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
+							<Typography typo={ITypo.TEXT_LG_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK}>
 								{formatFloat(totalCollaborator)}&nbsp;€
 							</Typography>
 						</div>
@@ -152,19 +155,19 @@ export default function SubscribeCheckoutTicket(props: IProps) {
 						<div className={classes["separator"]} />
 						<div className={classnames(classes["container-line"], classes["container-tight"])}>
 							<div className={classes["line"]}>
-								<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
+								<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_GENERIC_BLACK}>
 									Total HT
 								</Typography>
-								<Typography typo={ITypo.P_SB_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
+								<Typography typo={ITypo.TEXT_LG_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK}>
 									{formatFloat(totalCollaborator + totalPlan)}
 									&nbsp;€
 								</Typography>
 							</div>
 							<div className={classes["line"]}>
-								<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
+								<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_GENERIC_BLACK}>
 									TVA 20%
 								</Typography>
-								<Typography typo={ITypo.P_SB_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
+								<Typography typo={ITypo.TEXT_LG_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK}>
 									{formatFloat((totalCollaborator + totalPlan) * 0.2)}
 									&nbsp;€
 								</Typography>
@@ -176,19 +179,19 @@ export default function SubscribeCheckoutTicket(props: IProps) {
 				<div className={classnames(classes["container-line"], classes["container-tight"])}>
 					{forfeitType === EForfeitType.unlimited && (
 						<div className={classes["line"]}>
-							<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
+							<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_GENERIC_BLACK}>
 								TVA 20%
 							</Typography>
-							<Typography typo={ITypo.P_SB_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
+							<Typography typo={ITypo.TEXT_LG_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK}>
 								{formatFloat((totalCollaborator + totalPlan) * 0.2)}&nbsp;€
 							</Typography>
 						</div>
 					)}
 					<div className={classes["line"]}>
-						<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
+						<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_GENERIC_BLACK}>
 							Total TTC
 						</Typography>
-						<Typography typo={ITypo.P_SB_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
+						<Typography typo={ITypo.TEXT_LG_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK}>
 							{formatFloat((totalCollaborator + totalPlan) * 1.2)}
 							&nbsp;€
 						</Typography>

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

@@ -62,33 +62,33 @@ export default function SubscribeIllimityComponent({ hasNavTab = true }: IProps)
 								]}
 							/>
 						)}
-						<Typography typo={ITypo.H2} color={ITypoColor.COLOR_GENERIC_BLACK}>
+						<Typography typo={ITypo.TITLE_H3} color={ITypoColor.COLOR_GENERIC_BLACK}>
 							Nombre de collaborateurs illimité
 						</Typography>
 						<div className={classes["infos-container"]}>
 							<div className={classes["line"]}>
 								<Check color={ITypoColor.COLOR_NEUTRAL_500} />
-								<Typography typo={ITypo.P_16} color={ITypoColor.COLOR_NEUTRAL_500}>
+								<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
 									Accompagnement facilité : profitez d'un onboarding individualisé, où nous vous guidons pour une prise en
 									main optimale de l'application
 								</Typography>
 							</div>
 							<div className={classes["line"]}>
 								<Check color={ITypoColor.COLOR_NEUTRAL_500} />
-								<Typography typo={ITypo.P_16} color={ITypoColor.COLOR_NEUTRAL_500}>
+								<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
 									Support technique : notre équipe support est disponible pour vous assister en cas d’incident
 								</Typography>
 							</div>
 							<div className={classes["line"]}>
 								<Check color={ITypoColor.COLOR_NEUTRAL_500} />
-								<Typography typo={ITypo.P_16} color={ITypoColor.COLOR_NEUTRAL_500}>
+								<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
 									Mises à jour régulières : bénéficiez de mises à jour fréquentes pour profiter des dernières
 									fonctionnalités, améliorations de sécurité et performances optimisées
 								</Typography>
 							</div>
 							<div className={classes["line"]}>
 								<Check color={ITypoColor.COLOR_GENERIC_BLACK} />
-								<Typography typo={ITypo.P_16} color={ITypoColor.COLOR_GENERIC_BLACK}>
+								<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_GENERIC_BLACK}>
 									Sans limite d'utilisateurs
 								</Typography>
 							</div>
@@ -114,22 +114,22 @@ export default function SubscribeIllimityComponent({ hasNavTab = true }: IProps)
 						value={EPaymentFrequency.yearly.toString()}
 						onChange={handleFrequencyChange}
 						defaultChecked={paymentFrequency === EPaymentFrequency.yearly}>
-						<Typography typo={ITypo.P_ERR_18}>Annuel</Typography>
+						<Typography typo={ITypo.TEXT_LG_ERROR}>Annuel</Typography>
 					</RadioBox>
 					<RadioBox
 						name="paymentFrequencyInSubscription"
 						value={EPaymentFrequency.monthly.toString()}
 						onChange={handleFrequencyChange}
 						defaultChecked={paymentFrequency === EPaymentFrequency.monthly}>
-						<Typography typo={ITypo.P_ERR_18}>Mensuel</Typography>
+						<Typography typo={ITypo.TEXT_LG_ERROR}>Mensuel</Typography>
 					</RadioBox>
 				</div>
 				<div className={classes["separator"]} />
 				<div className={classes["container-line"]}>
-					<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
+					<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_GENERIC_BLACK}>
 						Total TTC
 					</Typography>
-					<Typography typo={ITypo.P_SB_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
+					<Typography typo={ITypo.TEXT_LG_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK}>
 						{formatFloat(forfeitsPrices[EForfeitType.unlimited] * 1.2 * multiplierToUse)}
 						&nbsp;€
 					</Typography>

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

@@ -54,27 +54,27 @@ export default function SubscribeStandardComponent({ hasNavTab = true }: IProps)
 								]}
 							/>
 						)}
-						<Typography typo={ITypo.H2} color={ITypoColor.COLOR_GENERIC_BLACK}>
+						<Typography typo={ITypo.TITLE_H3} color={ITypoColor.COLOR_GENERIC_BLACK}>
 							Choisissez le nombre de collaborateurs pour votre abonnement
 						</Typography>
 						<NumberPicker defaultValue={1} onChange={handleCollaboratorsChange} min={1} />
 						<div className={classes["infos-container"]}>
 							<div className={classes["line"]}>
 								<Check color={ITypoColor.COLOR_NEUTRAL_500} />
-								<Typography typo={ITypo.P_16} color={ITypoColor.COLOR_NEUTRAL_500}>
+								<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
 									Accompagnement facilité : profitez d'un onboarding individualisé, où nous vous guidons pour une prise en
 									main optimale de l'application
 								</Typography>
 							</div>
 							<div className={classes["line"]}>
 								<Check color={ITypoColor.COLOR_NEUTRAL_500} />
-								<Typography typo={ITypo.P_16} color={ITypoColor.COLOR_NEUTRAL_500}>
+								<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
 									Support technique : notre équipe support est disponible pour vous assister en cas d’incident
 								</Typography>
 							</div>
 							<div className={classes["line"]}>
 								<Check color={ITypoColor.COLOR_NEUTRAL_500} />
-								<Typography typo={ITypo.P_16} color={ITypoColor.COLOR_NEUTRAL_500}>
+								<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
 									Mises à jour régulières : bénéficiez de mises à jour fréquentes pour profiter des dernières
 									fonctionnalités, améliorations de sécurité et performances optimisées
 								</Typography>
@@ -105,22 +105,22 @@ export default function SubscribeStandardComponent({ hasNavTab = true }: IProps)
 						value={EPaymentFrequency.yearly.toString()}
 						onChange={handleFrequencyChange}
 						defaultChecked={paymentFrequency === EPaymentFrequency.yearly}>
-						<Typography typo={ITypo.P_ERR_18}>Annuel</Typography>
+						<Typography typo={ITypo.TEXT_LG_ERROR}>Annuel</Typography>
 					</RadioBox>
 					<RadioBox
 						name="paymentFrequencyInSubscription"
 						value={EPaymentFrequency.monthly.toString()}
 						onChange={handleFrequencyChange}
 						defaultChecked={paymentFrequency === EPaymentFrequency.monthly}>
-						<Typography typo={ITypo.P_ERR_18}>Mensuel</Typography>
+						<Typography typo={ITypo.TEXT_LG_ERROR}>Mensuel</Typography>
 					</RadioBox>
 				</div>
 				<div className={classes["separator"]} />
 				<div className={classes["container-line"]}>
-					<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
+					<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_GENERIC_BLACK}>
 						Total TTC
 					</Typography>
-					<Typography typo={ITypo.P_SB_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
+					<Typography typo={ITypo.TEXT_LG_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK}>
 						{formatFloat(
 							(forfeitsPrices[EForfeitType.standard] * multiplierToUse +
 								collaboratorPrice * numberOfCollaborators * multiplier) *

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

@@ -10,16 +10,16 @@ export default function SubscriptionClientInfos(props: IProps) {
 	const { customer } = props;
 	return (
 		<div className={classes["root"]}>
-			<Typography typo={ITypo.P_SB_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
+			<Typography typo={ITypo.TEXT_LG_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK}>
 				Informations client
 			</Typography>
-			<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
+			<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_GENERIC_BLACK}>
 				{customer.email}
 			</Typography>
-			{/* <Typography typo={ITypo.P_SB_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
+			{/* <Typography typo={ITypo.TEXT_LG_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK}>
 				Adresse de facturation
 			</Typography> */}
-			<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
+			<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_GENERIC_BLACK}>
 				{customer.name} <br />
 				{/* 23 rue taitbout,
 				<br />

src/front/Components/Layouts/Subscription/Manage/SubscriptionManageCollaborators/index.tsx

@@ -83,10 +83,10 @@ export default function SubscriptionManageCollaborators() {
 		<DefaultTemplate title="Nouvelle souscription" hasBackArrow>
 			{subscription && jwt && (
 				<div className={classes["root"]}>
-					<Typography typo={ITypo.H2} color={ITypoColor.COLOR_GENERIC_BLACK}>
+					<Typography typo={ITypo.TITLE_H3} color={ITypoColor.COLOR_GENERIC_BLACK}>
 						Choisissez les collaborateurs pour votre abonnement
 					</Typography>
-					<Typography typo={ITypo.P_SB_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
+					<Typography typo={ITypo.TEXT_LG_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK}>
 						{subscription.nb_seats} sièges disponibles
 					</Typography>
 					<Form onSubmit={handleSubmit}>
@@ -109,7 +109,7 @@ export default function SubscriptionManageCollaborators() {
 								/>
 							))}
 						</div>
-						<Typography typo={ITypo.CAPTION_14} color={ITypoColor.COLOR_GENERIC_BLACK}>
+						<Typography typo={ITypo.TEXT_SM_REGULAR} color={ITypoColor.COLOR_GENERIC_BLACK}>
 							{selectedCollaborators.length} collaborateurs sélectionnés
 						</Typography>
 						<div className={classes["buttons-container"]}>

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

@@ -45,7 +45,7 @@ export default function SubscriptionError() {
 				<div className={classes["root"]}>
 					<div className={classes["left"]}>
 						<div className={classes["title"]}>
-							<Typography typo={ITypo.H1} color={ITypoColor.COLOR_GENERIC_BLACK}>
+							<Typography typo={ITypo.DISPLAY_LARGE} color={ITypoColor.COLOR_GENERIC_BLACK}>
 								Paiement échoué
 							</Typography>
 						</div>

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

@@ -95,12 +95,12 @@ export default function SubscriptionFacturation() {
 				<div className={classes["root"]}>
 					<div className={classes["top-container"]}>
 						<div className={classes["top-container-title"]}>
-							<Typography typo={ITypo.H1} color={ITypoColor.COLOR_GENERIC_BLACK}>
+							<Typography typo={ITypo.DISPLAY_LARGE} color={ITypoColor.COLOR_GENERIC_BLACK}>
 								Abonnement
 							</Typography>
 						</div>
 						<div className={classes["sub-title"]}>
-							<Typography typo={ITypo.P_16} color={ITypoColor.COLOR_GENERIC_BLACK}>
+							<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_GENERIC_BLACK}>
 								Nos forfaits sont adaptés à la taille de votre office
 							</Typography>
 						</div>
@@ -111,23 +111,23 @@ export default function SubscriptionFacturation() {
 							data-inactive={subscription.type === "STANDARD" ? EForfeitType.standard : EForfeitType.unlimited}>
 							<div className={classes["forfeit-header"]}>
 								<div className={classes["left"]}>
-									<Typography typo={ITypo.P_SB_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
+									<Typography typo={ITypo.TEXT_LG_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK}>
 										Forfait standard
 									</Typography>
-									<Typography typo={ITypo.P_16} color={ITypoColor.COLOR_SECONDARY_500}>
+									<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_SECONDARY_500}>
 										Plan par utilisateur
 									</Typography>
 								</div>
 								{subscription.type === "STANDARD" && !cancelAt && (
 									<div className={classes["active-plan"]}>
-										<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_SUCCESS_600}>
+										<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_SUCCESS_600}>
 											Plan actif
 										</Typography>
 									</div>
 								)}
 								{subscription.type === "STANDARD" && cancelAt && (
 									<div className={classes["active-plan"]}>
-										<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_SUCCESS_600}>
+										<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_SUCCESS_600}>
 											Plan actif jusqu'au {cancelAt.toLocaleDateString()}
 										</Typography>
 									</div>
@@ -135,14 +135,14 @@ export default function SubscriptionFacturation() {
 							</div>
 							<div className={classes["separator"]} />
 							<div className={classes["price-container"]}>
-								<Typography typo={ITypo.H1} color={ITypoColor.COLOR_GENERIC_BLACK} className={classes["price"]}>
+								<Typography typo={ITypo.DISPLAY_LARGE} color={ITypoColor.COLOR_GENERIC_BLACK} className={classes["price"]}>
 									{forfeitsPrices[EForfeitType.standard]}€
-									<Typography typo={ITypo.H2} color={ITypoColor.COLOR_GENERIC_BLACK}>
+									<Typography typo={ITypo.TITLE_H3} color={ITypoColor.COLOR_GENERIC_BLACK}>
 										&nbsp;HT&nbsp;
 									</Typography>
 									/ mois
 								</Typography>
-								<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
+								<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_GENERIC_BLACK}>
 									+ {collaboratorPrice}€ / collaborateur / mois
 								</Typography>
 							</div>
@@ -182,23 +182,23 @@ export default function SubscriptionFacturation() {
 							data-inactive={subscription.type === "STANDARD" ? EForfeitType.standard : EForfeitType.unlimited}>
 							<div className={classes["forfeit-header"]}>
 								<div className={classes["left"]}>
-									<Typography typo={ITypo.P_SB_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
+									<Typography typo={ITypo.TEXT_LG_SEMIBOLD} color={ITypoColor.COLOR_GENERIC_BLACK}>
 										Forfait illimité
 									</Typography>
-									<Typography typo={ITypo.P_16} color={ITypoColor.COLOR_SECONDARY_500}>
+									<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_SECONDARY_500}>
 										Plan par office
 									</Typography>
 								</div>
 								{subscription.type === "UNLIMITED" && !cancelAt && (
 									<div className={classes["active-plan"]}>
-										<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_SUCCESS_600}>
+										<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_SUCCESS_600}>
 											Plan actif
 										</Typography>
 									</div>
 								)}
 								{subscription.type === "UNLIMITED" && cancelAt && (
 									<div className={classes["active-plan"]}>
-										<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_SUCCESS_600}>
+										<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_SUCCESS_600}>
 											Plan actif jusqu'au {cancelAt.toLocaleDateString()}
 										</Typography>
 									</div>
@@ -206,14 +206,14 @@ export default function SubscriptionFacturation() {
 							</div>
 							<div className={classes["separator"]} />
 							<div className={classes["price-container"]}>
-								<Typography typo={ITypo.H1} color={ITypoColor.COLOR_GENERIC_BLACK} className={classes["price"]}>
+								<Typography typo={ITypo.DISPLAY_LARGE} color={ITypoColor.COLOR_GENERIC_BLACK} className={classes["price"]}>
 									{forfeitsPrices[EForfeitType.unlimited]}€
-									<Typography typo={ITypo.H2} color={ITypoColor.COLOR_GENERIC_BLACK}>
+									<Typography typo={ITypo.TITLE_H3} color={ITypoColor.COLOR_GENERIC_BLACK}>
 										&nbsp;HT&nbsp;
 									</Typography>
 									/ mois
 								</Typography>
-								<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_GENERIC_BLACK}>
+								<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_GENERIC_BLACK}>
 									Sans limite de collaborateurs
 								</Typography>
 							</div>
@@ -237,12 +237,12 @@ export default function SubscriptionFacturation() {
 					<div className={classes["actions-container"]}>
 						<Button variant={EButtonVariant.LINE} onClick={cancelOrReactivateSubscription}>
 							{!cancelAt && (
-								<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_ERROR_600}>
+								<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_ERROR_600}>
 									Arrêter l'abonnement
 								</Typography>
 							)}
 							{cancelAt && (
-								<Typography typo={ITypo.P_18} color={ITypoColor.COLOR_ERROR_600}>
+								<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_ERROR_600}>
 									Renouveler l'abonnement
 								</Typography>
 							)}
@@ -260,7 +260,7 @@ export default function SubscriptionFacturation() {
 				confirmText={"Confirmer"}
 				cancelText={"Annuler"}>
 				<div className={classes["modal-content"]}>
-					<Typography typo={ITypo.P_16} className={classes["text"]}>
+					<Typography typo={ITypo.TEXT_MD_REGULAR} className={classes["text"]}>
 						Avant de confirmer, veuillez prendre note des conséquences <br />
 						suivantes :
 						<br />
@@ -304,7 +304,7 @@ export default function SubscriptionFacturation() {
 				confirmText={"Continuer"}
 				cancelText={"Annuler"}>
 				<div className={classes["modal-content"]}>
-					<Typography typo={ITypo.P_16} color={ITypoColor.COLOR_GENERIC_BLACK}>
+					<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_GENERIC_BLACK}>
 						En cas de suppression de sièges, les derniers comptes ajoutés seront concernés. Vous pouvez réattribuer les sièges
 						que vous avez dans votre page sur la page "Gérer mes attributions”.
 					</Typography>