Merge branch 'dev' into staging

src/front/Assets/logo.svg

@@ -1,34 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg id="Calque_2" data-name="Calque 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1245.64 178.38">
-  <defs>
-    <style>
-      .cls-1 {
-        fill: #41a89f;
-      }
-
-      .cls-1, .cls-2 {
-        stroke-width: 0px;
-      }
-
-      .cls-2 {
-        fill: #4a2779;
-      }
-    </style>
-  </defs>
-  <g id="Calque_1-2" data-name="Calque 1">
-    <g>
-      <path class="cls-2" d="M540.47,39.62c1.42-5.38,3.79-10.47,7.11-15.29,3.32-4.82,7.35-9.05,12.09-12.7,4.74-3.64,10.08-6.48,15.99-8.54,5.92-2.06,12.21-3.08,18.83-3.08h34.6l-4.74,19.69h-15.17c-7.9,0-14.45,1.95-19.67,5.8-5.21,3.87-8.45,8.59-9.72,14.11l-4.98,19.69h30.09l-4.98,19.69h-30.09l-24.41,98.93h-39.34l34.36-138.31.02.02Z"/>
-      <path class="cls-2" d="M631.24,39.62c1.42-5.38,3.79-10.47,7.11-15.29,3.32-4.82,7.35-9.05,12.09-12.7,4.74-3.64,10.08-6.48,15.98-8.54,5.93-2.06,12.22-3.08,18.83-3.08h34.6l-4.74,19.69h-15.16c-7.9,0-14.45,1.95-19.67,5.8-5.21,3.87-8.45,8.59-9.71,14.11l-4.98,19.69h30.1l-4.97,19.69h-30.1l-24.41,98.93h-39.33l34.36-138.31.02.02Z"/>
-      <path class="cls-2" d="M804.21,39.62l-4.98,19.69h-14.93c-7.9,0-14.45,1.95-19.67,5.8-5.21,3.87-8.53,8.59-9.95,14.11l-24.41,98.69h-39.57l24.4-98.46c1.27-5.22,3.51-10.23,6.76-15.07,3.25-4.82,7.24-9.09,11.98-12.81,4.74-3.72,10.11-6.64,16.12-8.78,6-2.14,12.48-3.21,19.43-3.21h34.83v.03Z"/>
-      <path class="cls-2" d="M834.08,177.93c-11.69,0-20.58-2.85-26.67-8.54-6.08-5.69-9.13-12.89-9.13-21.59,0-2.69.39-5.85,1.18-9.49l14.69-59.31c1.42-5.38,3.79-10.47,7.11-15.29,3.32-4.82,7.35-9.01,12.08-12.57,4.74-3.56,10.11-6.36,16.12-8.43,6-2.06,12.32-3.08,18.95-3.08h29.86c11.69,0,20.54,2.82,26.54,8.43,6,5.61,9.01,12.78,9.01,21.48,0,2.85-.4,6.09-1.18,9.73l-9.71,39.38h-78.92l-4.97,19.93c-1.42,5.54-.52,10.2,2.74,14,3.24,3.8,8.8,5.69,16.71,5.69h39.81l-4.74,19.69h-59.47v-.02ZM849.01,98.93h39.57l4.74-19.8c1.26-5.5.47-10.19-2.37-14.03-2.84-3.86-7.03-5.77-12.55-5.77-2.69,0-5.37.51-8.06,1.53-2.69,1.03-5.14,2.44-7.35,4.24-2.21,1.8-4.14,3.92-5.8,6.36-1.66,2.44-2.81,5-3.43,7.67l-4.74,19.8h0Z"/>
-      <path class="cls-2" d="M958,177.93v-39.62h39.57v39.62h-39.57Z"/>
-      <path class="cls-1" d="M1056.56,39.62h39.57l-34.36,138.31h-39.57l34.36-138.31ZM1066.28,0h39.57l-4.74,19.69h-39.57l4.74-19.69Z"/>
-      <path class="cls-1" d="M1145.9,177.93c-11.69,0-20.58-2.85-26.67-8.54-6.08-5.69-9.13-12.89-9.13-21.59,0-2.69.4-5.85,1.18-9.49l14.7-59.31c1.42-5.38,3.79-10.47,7.11-15.29,3.32-4.82,7.35-9.01,12.09-12.57s10.11-6.36,16.11-8.43c6-2.06,12.32-3.08,18.95-3.08h29.87c11.68,0,20.53,2.85,26.53,8.54,6.01,5.69,9.01,12.81,9.01,21.35,0,2.69-.4,5.85-1.18,9.49l-14.7,59.31c-1.42,5.54-3.79,10.68-7.11,15.42-3.32,4.74-7.35,8.94-12.09,12.57-4.74,3.64-10.08,6.49-15.98,8.54-5.92,2.06-12.22,3.08-18.85,3.08h-29.86.02ZM1204.9,79.24c1.42-5.54.71-10.23-2.13-14.11-2.85-3.87-7.04-5.8-12.56-5.8s-10.66,1.95-15.4,5.8c-4.74,3.87-7.82,8.59-9.24,14.11l-14.7,59.07c-1.42,5.54-.71,10.25,2.13,14.11,2.84,3.88,7.03,5.8,12.56,5.8,2.69,0,5.37-.51,8.06-1.53,2.69-1.03,5.13-2.45,7.35-4.27,2.21-1.82,4.1-3.91,5.68-6.28,1.58-2.37,2.76-4.98,3.56-7.83l14.7-59.07Z"/>
-      <path class="cls-1" d="M464.92,52.45c-30.16-7.73-61.61,13.38-70.25,47.15-8.64,33.77,8.8,67.42,38.97,75.16,30.16,7.73,61.61-13.38,70.25-47.15,8.64-33.77-8.8-67.43-38.97-75.16ZM458.89,119.45c.32-.73.58-1.49.79-2.28.41-1.63.54-3.26.4-4.82l31.55-21.18c4.08,10.12,5.04,22,2.01,33.89-2.95,11.53-9.19,21.21-17.27,28.1l-17.49-33.72h.02ZM462.19,64.42c10.14,2.59,18.5,8.84,24.3,17.21l-31.74,21.3c-.96-.63-2.02-1.11-3.19-1.41-.71-.19-1.42-.28-2.13-.32l-17.2-33.2c9.19-4.7,19.67-6.23,29.97-3.59ZM405.49,102.47c3-11.74,9.42-21.56,17.69-28.47l16.51,31.84c-1.25,1.53-2.21,3.4-2.75,5.49-.33,1.3-.47,2.59-.46,3.86l-29.51,19.8c-3.63-9.82-4.39-21.16-1.49-32.52ZM411.84,144.74l29.32-19.68c1.14.89,2.45,1.57,3.9,1.93,1.88.47,3.78.41,5.56-.08l16.78,32.38c-9.3,4.9-19.98,6.53-30.46,3.84-10.62-2.72-19.29-9.43-25.1-18.39Z"/>
-      <path class="cls-1" d="M446.23,177.13c-4.25,0-8.53-.52-12.78-1.61-14.8-3.8-27.08-13.82-34.53-28.22-7.44-14.36-9.23-31.38-4.99-47.91,4.22-16.53,13.95-30.59,27.38-39.6,13.46-9.03,29.02-11.91,43.84-8.11,30.54,7.83,48.26,41.98,39.54,76.12-7.52,29.39-32.23,49.33-58.43,49.33h-.02ZM452.25,51.62c-10.38,0-20.74,3.23-30.06,9.49-13.11,8.79-22.61,22.54-26.73,38.69-4.12,16.15-2.4,32.76,4.87,46.78,7.25,14,19.16,23.72,33.52,27.41,29.68,7.62,60.77-13.29,69.29-46.58,8.51-33.29-8.7-66.59-38.4-74.19-4.12-1.06-8.31-1.58-12.5-1.58l.02-.02ZM447.06,165.19c-3.48,0-6.93-.43-10.32-1.3-10.38-2.66-19.46-9.32-25.58-18.73l-.43-.65,30.44-20.43.46.35c1.11.85,2.31,1.45,3.62,1.79,1.69.43,3.41.41,5.15-.08l.62-.17,17.44,33.64-.7.36c-6.56,3.45-13.65,5.2-20.71,5.2v.02ZM412.93,144.96c5.89,8.73,14.46,14.9,24.22,17.41,9.73,2.5,19.81,1.31,29.19-3.42l-16.13-31.11c-1.8.4-3.59.38-5.34-.06-1.33-.33-2.58-.92-3.73-1.74l-28.2,18.93-.02-.02ZM476.13,154.42l-18.12-34.94.16-.35c.32-.73.57-1.44.76-2.15.38-1.49.51-3.02.38-4.56l-.05-.46,32.75-21.99.36.9c4.27,10.61,4.99,22.82,2.04,34.39-2.91,11.34-8.96,21.21-17.52,28.5l-.76.65ZM459.77,119.41l16.86,32.5c7.91-7.02,13.52-16.35,16.26-27.05,2.8-10.91,2.21-22.41-1.61-32.5l-30.36,20.37c.08,1.57-.06,3.12-.46,4.62-.17.68-.39,1.36-.68,2.04v.02ZM406.58,136.21l-.35-.93c-3.84-10.41-4.36-21.81-1.52-32.99,2.91-11.39,9.29-21.65,17.95-28.88l.76-.63,17.2,33.17-.33.4c-1.23,1.52-2.1,3.26-2.59,5.19-.3,1.2-.46,2.42-.43,3.64v.43l-30.68,20.61-.02.02ZM405.49,102.47l.76.19c-2.69,10.53-2.31,21.26,1.12,31.11l28.31-19c0-1.22.17-2.44.47-3.62.51-1.98,1.37-3.78,2.57-5.38l-15.81-30.51c-8.03,6.98-13.93,16.67-16.68,27.41l-.76-.19.02-.02ZM454.76,103.88l-.44-.28c-.92-.6-1.9-1.04-2.95-1.31-.62-.16-1.26-.25-1.97-.28h-.46l-17.79-34.32.71-.36c9.79-5,20.35-6.26,30.52-3.65,10.03,2.56,18.58,8.64,24.75,17.52l.46.66-32.84,22.05.02-.02ZM449.92,100.45c.65.05,1.25.16,1.83.3,1.04.27,2.04.68,2.97,1.23l30.63-20.56c-5.91-8.22-13.98-13.82-23.38-16.24-9.56-2.45-19.46-1.34-28.7,3.18l16.63,32.09h.02Z"/>
-      <path class="cls-2" d="M44.07.44h39.57l-39.34,158.24h59.24l-4.74,19.69H0L44.07.44Z"/>
-      <path class="cls-2" d="M167.75.44h98.81l-4.74,19.69h-59.24l-14.93,59.55h54.03l-4.74,19.69h-54.03l-14.93,59.31h59.24l-4.74,19.69h-98.81L167.75.44Z"/>
-      <path class="cls-2" d="M311.35,138.76c-1.42,5.54-.71,10.25,2.13,14.11,2.84,3.87,7.03,5.8,12.56,5.8,11.53,0,19.83-6.64,24.88-19.93h19.67c-4.11,13.29-10.43,23.22-18.96,29.78-8.53,6.56-20.22,9.84-35.07,9.84h-10.19c-11.69,0-20.58-2.85-26.67-8.54-6.08-5.69-9.13-12.89-9.13-21.59,0-2.69.39-5.85,1.18-9.49l14.69-59.31c1.42-5.38,3.79-10.47,7.11-15.29,3.32-4.82,7.35-9.02,12.09-12.57,4.74-3.56,10.11-6.36,16.11-8.43,6-2.06,12.32-3.08,18.96-3.08h10.19c12.8,0,21.96,2.26,27.49,6.77,5.53,4.51,8.29,11.26,8.29,20.29,0,3.8-.47,7.91-1.42,12.34h-19.67c1.74-13.13-3.24-19.69-14.93-19.69-5.53,0-10.66,1.95-15.4,5.8-4.74,3.87-7.82,8.59-9.24,14.11l-14.69,59.07.02.02Z"/>
-    </g>
-  </g>
-</svg>

src/front/Assets/logo_small_blue.svg

@@ -0,0 +1,4 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M34.2668 11.4484C34.4117 11.6943 34.7078 11.814 34.985 11.7321L39.5905 10.3514C39.8362 10.2821 40 10.0552 40 9.80929V1.11585C40 0.498042 39.5023 0 38.8849 0H0.932437C0.371719 0 0.0315029 0.378271 0.0315029 0.926734L0 20.8353V38.8841C0 39.502 0.497719 40 1.11514 40H39.0676C39.6283 40 39.9685 39.6218 39.9685 39.067L40 19.1647V19.1016C40 18.3641 39.8929 17.8534 38.8912 18.1371L37.083 18.673C36.7932 18.7612 36.6042 19.0323 36.6168 19.3286L36.6483 19.9969C36.6483 27.9212 32.5217 33.6076 25.2386 35.8393C13.3249 39.4894 2.45708 30.134 3.42102 18.5532C4.08884 10.6036 10.4772 4.14814 18.4155 3.41685C25.1315 2.79904 31.1104 6.1718 34.2605 11.4358L34.2668 11.4484Z" fill="#013391"/>
+<path d="M26.2526 27.9906C27.9348 26.8306 29.2326 25.1537 29.9193 23.1931C30.1021 22.6572 30.247 22.0962 30.3352 21.5225C30.3919 21.1758 30.0643 20.8858 29.7303 20.9929L26.6369 21.9638C26.5046 22.0079 26.3975 22.1088 26.3471 22.2412C25.3706 24.6809 22.8505 26.3263 20.0028 25.9795C17.2244 25.6391 15.0005 23.3318 14.7548 20.5454C14.6729 19.6123 14.8052 18.7171 15.1013 17.9039C15.9518 15.6092 18.1632 13.9701 20.7526 13.9701C22.2142 13.9701 23.5561 14.4933 24.602 15.3633C24.7217 15.4642 24.8855 15.502 25.043 15.4516L27.9789 14.5311C28.1427 14.4807 28.2498 14.3546 28.2939 14.2159C28.3317 14.0709 28.3128 13.907 28.2057 13.7809C26.3093 11.5051 23.386 10.112 20.1414 10.3074C20.1036 10.3137 20.0658 10.32 20.028 10.32L19.0263 7.13005C18.9003 6.71398 18.4593 6.48071 18.0435 6.60679L15.7628 7.31917C15.347 7.45156 15.1139 7.89285 15.2462 8.30893L15.9896 10.6856C16.1219 11.1017 15.9581 11.5556 15.5927 11.7888C13.7845 12.9362 12.367 14.6635 11.6299 16.7061C11.3274 17.5256 11.1384 18.3956 11.0754 19.2971C11.0565 19.6312 11.0502 19.959 11.0628 20.2806C11.0817 20.7155 10.7982 21.1064 10.3824 21.2388L7.87493 22.0457C7.45912 22.1781 7.22601 22.6194 7.35201 23.0355L8.06394 25.3176C8.19624 25.7337 8.63726 25.9606 9.05308 25.8345L11.6047 25.0087C12.0079 24.8826 12.4552 25.0276 12.6883 25.3806C14.4271 27.9843 17.3883 29.7053 20.7526 29.7053C20.8975 29.7053 21.0361 29.7053 21.1747 29.7053C21.6157 29.6801 22.0126 29.9638 22.1449 30.3799L22.9198 32.8763C23.0521 33.2924 23.4931 33.5257 23.9089 33.3933L26.1896 32.6809C26.6054 32.5548 26.8322 32.1072 26.7062 31.6911L25.8872 29.0812C25.7612 28.6777 25.9061 28.2365 26.2526 27.9969V27.9906Z" fill="#013391"/>
+</svg>

src/front/Assets/logo_small_neutral.svg

@@ -0,0 +1,4 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M34.2668 11.4484C34.4117 11.6943 34.7078 11.814 34.985 11.7321L39.5905 10.3514C39.8362 10.2821 40 10.0552 40 9.80929V1.11585C40 0.498042 39.5023 0 38.8849 0H0.932437C0.371719 0 0.0315029 0.378271 0.0315029 0.926734L0 20.8353V38.8841C0 39.502 0.497719 40 1.11514 40H39.0676C39.6283 40 39.9685 39.6218 39.9685 39.067L40 19.1647V19.1016C40 18.3641 39.8929 17.8534 38.8912 18.1371L37.083 18.673C36.7932 18.7612 36.6042 19.0323 36.6168 19.3286L36.6483 19.9969C36.6483 27.9212 32.5217 33.6076 25.2386 35.8393C13.3249 39.4894 2.45708 30.134 3.42102 18.5532C4.08884 10.6036 10.4772 4.14814 18.4155 3.41685C25.1315 2.79904 31.1104 6.1718 34.2605 11.4358L34.2668 11.4484Z" fill="#24282E"/>
+<path d="M26.2526 27.9906C27.9348 26.8306 29.2326 25.1537 29.9193 23.1931C30.1021 22.6572 30.247 22.0962 30.3352 21.5225C30.3919 21.1758 30.0643 20.8858 29.7303 20.9929L26.6369 21.9638C26.5046 22.0079 26.3975 22.1088 26.3471 22.2412C25.3706 24.6809 22.8505 26.3263 20.0028 25.9795C17.2244 25.6391 15.0005 23.3318 14.7548 20.5454C14.6729 19.6123 14.8052 18.7171 15.1013 17.9039C15.9518 15.6092 18.1632 13.9701 20.7526 13.9701C22.2142 13.9701 23.5561 14.4933 24.602 15.3633C24.7217 15.4642 24.8855 15.502 25.043 15.4516L27.9789 14.5311C28.1427 14.4807 28.2498 14.3546 28.2939 14.2159C28.3317 14.0709 28.3128 13.907 28.2057 13.7809C26.3093 11.5051 23.386 10.112 20.1414 10.3074C20.1036 10.3137 20.0658 10.32 20.028 10.32L19.0263 7.13005C18.9003 6.71398 18.4593 6.48071 18.0435 6.60679L15.7628 7.31917C15.347 7.45156 15.1139 7.89285 15.2462 8.30893L15.9896 10.6856C16.1219 11.1017 15.9581 11.5556 15.5927 11.7888C13.7845 12.9362 12.367 14.6635 11.6299 16.7061C11.3274 17.5256 11.1384 18.3956 11.0754 19.2971C11.0565 19.6312 11.0502 19.959 11.0628 20.2806C11.0817 20.7155 10.7982 21.1064 10.3824 21.2388L7.87493 22.0457C7.45912 22.1781 7.22601 22.6194 7.35201 23.0355L8.06394 25.3176C8.19624 25.7337 8.63726 25.9606 9.05308 25.8345L11.6047 25.0087C12.0079 24.8826 12.4552 25.0276 12.6883 25.3806C14.4271 27.9843 17.3883 29.7053 20.7526 29.7053C20.8975 29.7053 21.0361 29.7053 21.1747 29.7053C21.6157 29.6801 22.0126 29.9638 22.1449 30.3799L22.9198 32.8763C23.0521 33.2924 23.4931 33.5257 23.9089 33.3933L26.1896 32.6809C26.6054 32.5548 26.8322 32.1072 26.7062 31.6911L25.8872 29.0812C25.7612 28.6777 25.9061 28.2365 26.2526 27.9969V27.9906Z" fill="#24282E"/>
+</svg>

src/front/Assets/logo_standard_blue.svg

@@ -0,0 +1,15 @@
+<svg width="264" height="40" viewBox="0 0 264 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M57.3379 32.3839H67.4132V36.3293H52.4526V6.53737H57.3379V32.3839Z" fill="#013391"/>
+<path d="M91.7161 26.3419H73.6726C73.8172 28.2268 74.5144 29.745 75.7744 30.8863C77.0293 32.0276 78.5734 32.6008 80.4015 32.6008C83.0301 32.6008 84.8892 31.5008 85.9736 29.3009H91.2462C90.5336 31.475 89.2374 33.2515 87.3679 34.6355C85.4985 36.0195 83.1747 36.7166 80.4015 36.7166C78.1448 36.7166 76.1204 36.2105 74.3336 35.1932C72.5469 34.181 71.1474 32.7506 70.1352 30.907C69.123 29.0634 68.6118 26.9306 68.6118 24.4983C68.6118 22.066 69.1024 19.9332 70.0887 18.0896C71.0751 16.246 72.4591 14.8258 74.2459 13.824C76.0327 12.8221 78.0828 12.3212 80.3963 12.3212C82.7099 12.3212 84.6103 12.8066 86.3558 13.7775C88.1012 14.7484 89.4543 16.1117 90.4303 17.8727C91.4011 19.6285 91.8866 21.6528 91.8866 23.9354C91.8866 24.8236 91.8298 25.6241 91.7161 26.3367V26.3419ZM86.7844 22.3965C86.7534 20.5942 86.1131 19.1534 84.8582 18.0689C83.5981 16.9844 82.0437 16.4422 80.1846 16.4422C78.4959 16.4422 77.0552 16.9793 75.8571 18.0483C74.659 19.1224 73.9412 20.5684 73.714 22.3965H86.7844Z" fill="#013391"/>
+<path d="M97.9488 13.5245C99.307 11.2109 101.151 9.40347 103.48 8.10211C105.809 6.80074 108.36 6.15006 111.133 6.15006C114.304 6.15006 117.128 6.92985 119.597 8.48425C122.071 10.0438 123.862 12.2489 124.978 15.1047H119.106C118.337 13.5348 117.263 12.3625 115.894 11.5879C114.526 10.8133 112.935 10.4311 111.138 10.4311C109.165 10.4311 107.41 10.8752 105.865 11.7583C104.321 12.6466 103.113 13.9169 102.245 15.5746C101.373 17.2323 100.939 19.1585 100.939 21.3585C100.939 23.5584 101.373 25.4898 102.245 27.1475C103.118 28.8052 104.327 30.0859 105.865 30.9844C107.404 31.883 109.165 32.3323 111.138 32.3323C112.94 32.3323 114.526 31.9449 115.894 31.1755C117.263 30.406 118.337 29.2338 119.106 27.6587H124.978C123.862 30.5145 122.071 32.7144 119.597 34.2585C117.123 35.8026 114.304 36.572 111.133 36.572C108.334 36.572 105.772 35.9213 103.459 34.62C101.145 33.3186 99.307 31.5112 97.9488 29.1976C96.5907 26.8841 95.9141 24.2659 95.9141 21.3533C95.9141 18.4407 96.5907 15.8225 97.9488 13.509V13.5245Z" fill="#013391"/>
+<path d="M133.55 35.1932C131.748 34.181 130.333 32.7506 129.305 30.907C128.278 29.0634 127.761 26.9306 127.761 24.4983C127.761 22.066 128.288 19.9693 129.347 18.1102C130.405 16.2511 131.846 14.8258 133.674 13.824C135.502 12.8221 137.547 12.3212 139.804 12.3212C142.061 12.3212 144.106 12.8221 145.934 13.824C147.762 14.8258 149.208 16.2511 150.262 18.1102C151.32 19.9693 151.847 22.0969 151.847 24.4983C151.847 26.8996 151.305 29.0272 150.22 30.8863C149.136 32.7454 147.654 34.181 145.784 35.1932C143.915 36.2054 141.849 36.7166 139.592 36.7166C137.336 36.7166 135.347 36.2105 133.55 35.1932ZM143.125 31.568C144.225 30.9689 145.118 30.0652 145.805 28.8671C146.492 27.669 146.833 26.2076 146.833 24.4931C146.833 22.7786 146.502 21.3275 145.846 20.1449C145.19 18.9571 144.318 18.0637 143.233 17.4647C142.149 16.8657 140.976 16.5661 139.716 16.5661C138.456 16.5661 137.294 16.8657 136.225 17.4647C135.151 18.0637 134.304 18.9571 133.674 20.1449C133.044 21.3326 132.729 22.7786 132.729 24.4931C132.729 27.039 133.38 29.0014 134.681 30.3854C135.983 31.7694 137.62 32.4665 139.587 32.4665C140.842 32.4665 142.025 32.167 143.125 31.568Z" fill="#013391"/>
+<path d="M161.964 16.6952V36.3241H157.037V16.6952H154.254V12.7085H157.037V11.0353C157.037 8.319 157.76 6.34114 159.201 5.09658C160.642 3.85202 162.909 3.23232 165.997 3.23232V7.30683C164.51 7.30683 163.467 7.58569 162.868 8.14342C162.269 8.70115 161.969 9.66684 161.969 11.0353V12.7085H166.343V16.6952H161.964Z" fill="#013391"/>
+<path d="M177.049 16.6952V36.3241H172.122V16.6952H169.339V12.7085H172.122V11.0353C172.122 8.319 172.845 6.34114 174.286 5.09658C175.727 3.85202 177.994 3.23232 181.082 3.23232V7.30683C179.595 7.30683 178.552 7.58569 177.953 8.14342C177.354 8.70115 177.054 9.66684 177.054 11.0353V12.7085H181.428V16.6952H177.049Z" fill="#013391"/>
+<path d="M192.587 13.3334C193.775 12.662 195.18 12.3264 196.811 12.3264V17.3821H195.567C193.651 17.3821 192.205 17.8675 191.219 18.8384C190.232 19.8092 189.742 21.4979 189.742 23.894V36.3241H184.856V12.7085H189.742V16.1375C190.454 14.9394 191.405 13.9996 192.592 13.3282L192.587 13.3334Z" fill="#013391"/>
+<path d="M221.414 26.3419H203.37C203.515 28.2268 204.212 29.745 205.472 30.8863C206.727 32.0276 208.271 32.6008 210.099 32.6008C212.728 32.6008 214.587 31.5008 215.671 29.3009H220.944C220.231 31.475 218.935 33.2515 217.066 34.6355C215.196 36.0195 212.872 36.7166 210.099 36.7166C207.842 36.7166 205.818 36.2105 204.031 35.1932C202.244 34.181 200.845 32.7506 199.833 30.907C198.821 29.0634 198.309 26.9306 198.309 24.4983C198.309 22.066 198.8 19.9332 199.786 18.0896C200.773 16.246 202.157 14.8258 203.943 13.824C205.73 12.8221 207.78 12.3212 210.094 12.3212C212.408 12.3212 214.308 12.8066 216.053 13.7775C217.799 14.7484 219.152 16.1117 220.128 17.8727C221.099 19.6285 221.584 21.6528 221.584 23.9354C221.584 24.8236 221.527 25.6241 221.414 26.3367V26.3419ZM216.482 22.3965C216.451 20.5942 215.811 19.1534 214.556 18.0689C213.296 16.9844 211.741 16.4422 209.882 16.4422C208.194 16.4422 206.753 16.9793 205.555 18.0483C204.357 19.1224 203.639 20.5684 203.412 22.3965H216.482Z" fill="#013391"/>
+<path d="M226.04 35.9833C225.725 35.6683 225.57 35.2707 225.57 34.7852C225.57 34.2998 225.725 33.9022 226.04 33.5871C226.355 33.2721 226.753 33.1172 227.238 33.1172C227.693 33.1172 228.08 33.2721 228.395 33.5871C228.71 33.9022 228.865 34.2998 228.865 34.7852C228.865 35.2707 228.71 35.6735 228.395 35.9833C228.08 36.2983 227.693 36.4533 227.238 36.4533C226.753 36.4533 226.35 36.2983 226.04 35.9833Z" fill="#013391"/>
+<path d="M233.756 7.41528C233.441 7.11576 233.286 6.70779 233.286 6.19138C233.286 5.70595 233.441 5.30831 233.756 4.9933C234.071 4.67828 234.459 4.52336 234.913 4.52336C235.368 4.52336 235.755 4.67828 236.07 4.9933C236.385 5.30831 236.54 5.70595 236.54 6.19138C236.54 6.70779 236.385 7.11059 236.07 7.41528C235.755 7.7148 235.368 7.86456 234.913 7.86456C234.459 7.86456 234.071 7.7148 233.756 7.41528ZM235.858 13.0545V36.3293H233.927V13.0545H235.858Z" fill="#013391"/>
+<path d="M246.145 35.2139C244.399 34.243 243.036 32.8487 242.05 31.0361C241.063 29.2235 240.573 27.101 240.573 24.6687C240.573 22.2364 241.074 20.1604 242.07 18.3478C243.072 16.5352 244.451 15.146 246.207 14.1906C247.963 13.2353 249.93 12.755 252.099 12.755C254.268 12.755 256.23 13.2353 257.971 14.1906C259.716 15.146 261.079 16.5248 262.066 18.3271C263.052 20.1294 263.543 22.2415 263.543 24.6687C263.543 27.0958 263.042 29.2183 262.045 31.0361C261.043 32.8487 259.665 34.243 257.909 35.2139C256.153 36.1847 254.185 36.6701 252.016 36.6701C249.847 36.6701 247.885 36.1847 246.145 35.2139ZM256.752 33.8195C258.224 33.0604 259.401 31.914 260.289 30.3699C261.172 28.8258 261.617 26.9254 261.617 24.6687C261.617 22.412 261.172 20.5529 260.289 19.0088C259.401 17.4647 258.234 16.3183 256.773 15.5591C255.316 14.8 253.741 14.423 252.058 14.423C250.374 14.423 248.809 14.8 247.364 15.5591C245.923 16.3183 244.756 17.4647 243.873 19.0088C242.984 20.5529 242.545 22.4378 242.545 24.6687C242.545 26.8996 242.979 28.8258 243.852 30.3699C244.725 31.914 245.881 33.0656 247.322 33.8195C248.763 34.5787 250.328 34.9557 252.016 34.9557C253.705 34.9557 255.28 34.5787 256.752 33.8195Z" fill="#013391"/>
+<path d="M34.2668 11.4484C34.4117 11.6943 34.7078 11.814 34.985 11.7321L39.5905 10.3514C39.8362 10.2821 40 10.0552 40 9.80929V1.11585C40 0.498042 39.5023 0 38.8849 0H0.932437C0.371719 0 0.0315029 0.378271 0.0315029 0.926734L0 20.8353V38.8841C0 39.502 0.497719 40 1.11514 40H39.0676C39.6283 40 39.9685 39.6218 39.9685 39.067L40 19.1647V19.1016C40 18.3641 39.8929 17.8534 38.8912 18.1371L37.083 18.673C36.7932 18.7612 36.6042 19.0323 36.6168 19.3286L36.6483 19.9969C36.6483 27.9212 32.5217 33.6076 25.2386 35.8393C13.3249 39.4894 2.45708 30.134 3.42102 18.5532C4.08884 10.6036 10.4772 4.14814 18.4155 3.41685C25.1315 2.79904 31.1104 6.1718 34.2605 11.4358L34.2668 11.4484Z" fill="#013391"/>
+<path d="M26.2526 27.9906C27.9348 26.8306 29.2326 25.1537 29.9193 23.1931C30.1021 22.6572 30.247 22.0962 30.3352 21.5225C30.3919 21.1758 30.0643 20.8858 29.7303 20.9929L26.6369 21.9638C26.5046 22.0079 26.3975 22.1088 26.3471 22.2412C25.3706 24.6809 22.8505 26.3263 20.0028 25.9795C17.2244 25.6391 15.0005 23.3318 14.7548 20.5454C14.6729 19.6123 14.8052 18.7171 15.1013 17.9039C15.9518 15.6092 18.1632 13.9701 20.7526 13.9701C22.2142 13.9701 23.5561 14.4933 24.602 15.3633C24.7217 15.4642 24.8855 15.502 25.043 15.4516L27.9789 14.5311C28.1427 14.4807 28.2498 14.3546 28.2939 14.2159C28.3317 14.0709 28.3128 13.907 28.2057 13.7809C26.3093 11.5051 23.386 10.112 20.1414 10.3074C20.1036 10.3137 20.0658 10.32 20.028 10.32L19.0263 7.13005C18.9003 6.71398 18.4593 6.48071 18.0435 6.60679L15.7628 7.31917C15.347 7.45156 15.1139 7.89285 15.2462 8.30893L15.9896 10.6856C16.1219 11.1017 15.9581 11.5556 15.5927 11.7888C13.7845 12.9362 12.367 14.6635 11.6299 16.7061C11.3274 17.5256 11.1384 18.3956 11.0754 19.2971C11.0565 19.6312 11.0502 19.959 11.0628 20.2806C11.0817 20.7155 10.7982 21.1064 10.3824 21.2388L7.87493 22.0457C7.45912 22.1781 7.22601 22.6194 7.35201 23.0355L8.06394 25.3176C8.19624 25.7337 8.63726 25.9606 9.05308 25.8345L11.6047 25.0087C12.0079 24.8826 12.4552 25.0276 12.6883 25.3806C14.4271 27.9843 17.3883 29.7053 20.7526 29.7053C20.8975 29.7053 21.0361 29.7053 21.1747 29.7053C21.6157 29.6801 22.0126 29.9638 22.1449 30.3799L22.9198 32.8763C23.0521 33.2924 23.4931 33.5257 23.9089 33.3933L26.1896 32.6809C26.6054 32.5548 26.8322 32.1072 26.7062 31.6911L25.8872 29.0812C25.7612 28.6777 25.9061 28.2365 26.2526 27.9969V27.9906Z" fill="#013391"/>
+</svg>

src/front/Assets/logo_standard_neutral.svg

@@ -0,0 +1,15 @@
+<svg width="264" height="40" viewBox="0 0 264 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M57.3379 32.3839H67.4132V36.3293H52.4526V6.53737H57.3379V32.3839Z" fill="#24282E"/>
+<path d="M91.7161 26.3419H73.6726C73.8172 28.2268 74.5144 29.745 75.7744 30.8863C77.0293 32.0276 78.5734 32.6008 80.4015 32.6008C83.0301 32.6008 84.8892 31.5008 85.9736 29.3009H91.2462C90.5336 31.475 89.2374 33.2515 87.3679 34.6355C85.4985 36.0195 83.1747 36.7166 80.4015 36.7166C78.1448 36.7166 76.1204 36.2105 74.3336 35.1932C72.5469 34.181 71.1474 32.7506 70.1352 30.907C69.123 29.0634 68.6118 26.9306 68.6118 24.4983C68.6118 22.066 69.1024 19.9332 70.0887 18.0896C71.0751 16.246 72.4591 14.8258 74.2459 13.824C76.0327 12.8221 78.0828 12.3212 80.3963 12.3212C82.7099 12.3212 84.6103 12.8066 86.3558 13.7775C88.1012 14.7484 89.4543 16.1117 90.4303 17.8727C91.4011 19.6285 91.8866 21.6528 91.8866 23.9354C91.8866 24.8236 91.8298 25.6241 91.7161 26.3367V26.3419ZM86.7844 22.3965C86.7534 20.5942 86.1131 19.1534 84.8582 18.0689C83.5981 16.9844 82.0437 16.4422 80.1846 16.4422C78.4959 16.4422 77.0552 16.9793 75.8571 18.0483C74.659 19.1224 73.9412 20.5684 73.714 22.3965H86.7844Z" fill="#24282E"/>
+<path d="M97.9488 13.5245C99.307 11.2109 101.151 9.40347 103.48 8.10211C105.809 6.80074 108.36 6.15006 111.133 6.15006C114.304 6.15006 117.128 6.92985 119.597 8.48425C122.071 10.0438 123.862 12.2489 124.978 15.1047H119.106C118.337 13.5348 117.263 12.3625 115.894 11.5879C114.526 10.8133 112.935 10.4311 111.138 10.4311C109.165 10.4311 107.41 10.8752 105.865 11.7583C104.321 12.6466 103.113 13.9169 102.245 15.5746C101.373 17.2323 100.939 19.1585 100.939 21.3585C100.939 23.5584 101.373 25.4898 102.245 27.1475C103.118 28.8052 104.327 30.0859 105.865 30.9844C107.404 31.883 109.165 32.3323 111.138 32.3323C112.94 32.3323 114.526 31.9449 115.894 31.1755C117.263 30.406 118.337 29.2338 119.106 27.6587H124.978C123.862 30.5145 122.071 32.7144 119.597 34.2585C117.123 35.8026 114.304 36.572 111.133 36.572C108.334 36.572 105.772 35.9213 103.459 34.62C101.145 33.3186 99.307 31.5112 97.9488 29.1976C96.5907 26.8841 95.9141 24.2659 95.9141 21.3533C95.9141 18.4407 96.5907 15.8225 97.9488 13.509V13.5245Z" fill="#24282E"/>
+<path d="M133.55 35.1932C131.748 34.181 130.333 32.7506 129.305 30.907C128.278 29.0634 127.761 26.9306 127.761 24.4983C127.761 22.066 128.288 19.9693 129.347 18.1102C130.405 16.2511 131.846 14.8258 133.674 13.824C135.502 12.8221 137.547 12.3212 139.804 12.3212C142.061 12.3212 144.106 12.8221 145.934 13.824C147.762 14.8258 149.208 16.2511 150.262 18.1102C151.32 19.9693 151.847 22.0969 151.847 24.4983C151.847 26.8996 151.305 29.0272 150.22 30.8863C149.136 32.7454 147.654 34.181 145.784 35.1932C143.915 36.2054 141.849 36.7166 139.592 36.7166C137.336 36.7166 135.347 36.2105 133.55 35.1932ZM143.125 31.568C144.225 30.9689 145.118 30.0652 145.805 28.8671C146.492 27.669 146.833 26.2076 146.833 24.4931C146.833 22.7786 146.502 21.3275 145.846 20.1449C145.19 18.9571 144.318 18.0637 143.233 17.4647C142.149 16.8657 140.976 16.5661 139.716 16.5661C138.456 16.5661 137.294 16.8657 136.225 17.4647C135.151 18.0637 134.304 18.9571 133.674 20.1449C133.044 21.3326 132.729 22.7786 132.729 24.4931C132.729 27.039 133.38 29.0014 134.681 30.3854C135.983 31.7694 137.62 32.4665 139.587 32.4665C140.842 32.4665 142.025 32.167 143.125 31.568Z" fill="#24282E"/>
+<path d="M161.964 16.6952V36.3241H157.037V16.6952H154.254V12.7085H157.037V11.0353C157.037 8.319 157.76 6.34114 159.201 5.09658C160.642 3.85202 162.909 3.23232 165.997 3.23232V7.30683C164.51 7.30683 163.467 7.58569 162.868 8.14342C162.269 8.70115 161.969 9.66684 161.969 11.0353V12.7085H166.343V16.6952H161.964Z" fill="#24282E"/>
+<path d="M177.049 16.6952V36.3241H172.122V16.6952H169.339V12.7085H172.122V11.0353C172.122 8.319 172.845 6.34114 174.286 5.09658C175.727 3.85202 177.994 3.23232 181.082 3.23232V7.30683C179.595 7.30683 178.552 7.58569 177.953 8.14342C177.354 8.70115 177.054 9.66684 177.054 11.0353V12.7085H181.428V16.6952H177.049Z" fill="#24282E"/>
+<path d="M192.587 13.3334C193.775 12.662 195.18 12.3264 196.811 12.3264V17.3821H195.567C193.651 17.3821 192.205 17.8675 191.219 18.8384C190.232 19.8092 189.742 21.4979 189.742 23.894V36.3241H184.856V12.7085H189.742V16.1375C190.454 14.9394 191.405 13.9996 192.592 13.3282L192.587 13.3334Z" fill="#24282E"/>
+<path d="M221.414 26.3419H203.37C203.515 28.2268 204.212 29.745 205.472 30.8863C206.727 32.0276 208.271 32.6008 210.099 32.6008C212.728 32.6008 214.587 31.5008 215.671 29.3009H220.944C220.231 31.475 218.935 33.2515 217.066 34.6355C215.196 36.0195 212.872 36.7166 210.099 36.7166C207.842 36.7166 205.818 36.2105 204.031 35.1932C202.244 34.181 200.845 32.7506 199.833 30.907C198.821 29.0634 198.309 26.9306 198.309 24.4983C198.309 22.066 198.8 19.9332 199.786 18.0896C200.773 16.246 202.157 14.8258 203.943 13.824C205.73 12.8221 207.78 12.3212 210.094 12.3212C212.408 12.3212 214.308 12.8066 216.053 13.7775C217.799 14.7484 219.152 16.1117 220.128 17.8727C221.099 19.6285 221.584 21.6528 221.584 23.9354C221.584 24.8236 221.527 25.6241 221.414 26.3367V26.3419ZM216.482 22.3965C216.451 20.5942 215.811 19.1534 214.556 18.0689C213.296 16.9844 211.741 16.4422 209.882 16.4422C208.194 16.4422 206.753 16.9793 205.555 18.0483C204.357 19.1224 203.639 20.5684 203.412 22.3965H216.482Z" fill="#24282E"/>
+<path d="M226.04 35.9833C225.725 35.6683 225.57 35.2707 225.57 34.7852C225.57 34.2998 225.725 33.9022 226.04 33.5871C226.355 33.2721 226.753 33.1172 227.238 33.1172C227.693 33.1172 228.08 33.2721 228.395 33.5871C228.71 33.9022 228.865 34.2998 228.865 34.7852C228.865 35.2707 228.71 35.6735 228.395 35.9833C228.08 36.2983 227.693 36.4533 227.238 36.4533C226.753 36.4533 226.35 36.2983 226.04 35.9833Z" fill="#24282E"/>
+<path d="M233.756 7.41528C233.441 7.11576 233.286 6.70779 233.286 6.19138C233.286 5.70595 233.441 5.30831 233.756 4.9933C234.071 4.67828 234.459 4.52336 234.913 4.52336C235.368 4.52336 235.755 4.67828 236.07 4.9933C236.385 5.30831 236.54 5.70595 236.54 6.19138C236.54 6.70779 236.385 7.11059 236.07 7.41528C235.755 7.7148 235.368 7.86456 234.913 7.86456C234.459 7.86456 234.071 7.7148 233.756 7.41528ZM235.858 13.0545V36.3293H233.927V13.0545H235.858Z" fill="#24282E"/>
+<path d="M246.145 35.2139C244.399 34.243 243.036 32.8487 242.05 31.0361C241.063 29.2235 240.573 27.101 240.573 24.6687C240.573 22.2364 241.074 20.1604 242.07 18.3478C243.072 16.5352 244.451 15.146 246.207 14.1906C247.963 13.2353 249.93 12.755 252.099 12.755C254.268 12.755 256.23 13.2353 257.971 14.1906C259.716 15.146 261.079 16.5248 262.066 18.3271C263.052 20.1294 263.543 22.2415 263.543 24.6687C263.543 27.0958 263.042 29.2183 262.045 31.0361C261.043 32.8487 259.665 34.243 257.909 35.2139C256.153 36.1847 254.185 36.6701 252.016 36.6701C249.847 36.6701 247.885 36.1847 246.145 35.2139ZM256.752 33.8195C258.224 33.0604 259.401 31.914 260.289 30.3699C261.172 28.8258 261.617 26.9254 261.617 24.6687C261.617 22.412 261.172 20.5529 260.289 19.0088C259.401 17.4647 258.234 16.3183 256.773 15.5591C255.316 14.8 253.741 14.423 252.058 14.423C250.374 14.423 248.809 14.8 247.364 15.5591C245.923 16.3183 244.756 17.4647 243.873 19.0088C242.984 20.5529 242.545 22.4378 242.545 24.6687C242.545 26.8996 242.979 28.8258 243.852 30.3699C244.725 31.914 245.881 33.0656 247.322 33.8195C248.763 34.5787 250.328 34.9557 252.016 34.9557C253.705 34.9557 255.28 34.5787 256.752 33.8195Z" fill="#24282E"/>
+<path d="M34.2668 11.4484C34.4117 11.6943 34.7078 11.814 34.985 11.7321L39.5905 10.3514C39.8362 10.2821 40 10.0552 40 9.80929V1.11585C40 0.498042 39.5023 0 38.8849 0H0.932437C0.371719 0 0.0315029 0.378271 0.0315029 0.926734L0 20.8353V38.8841C0 39.502 0.497719 40 1.11514 40H39.0676C39.6283 40 39.9685 39.6218 39.9685 39.067L40 19.1647V19.1016C40 18.3641 39.8929 17.8534 38.8912 18.1371L37.083 18.673C36.7932 18.7612 36.6042 19.0323 36.6168 19.3286L36.6483 19.9969C36.6483 27.9212 32.5217 33.6076 25.2386 35.8393C13.3249 39.4894 2.45708 30.134 3.42102 18.5532C4.08884 10.6036 10.4772 4.14814 18.4155 3.41685C25.1315 2.79904 31.1104 6.1718 34.2605 11.4358L34.2668 11.4484Z" fill="#24282E"/>
+<path d="M26.2526 27.9906C27.9348 26.8306 29.2326 25.1537 29.9193 23.1931C30.1021 22.6572 30.247 22.0962 30.3352 21.5225C30.3919 21.1758 30.0643 20.8858 29.7303 20.9929L26.6369 21.9638C26.5046 22.0079 26.3975 22.1088 26.3471 22.2412C25.3706 24.6809 22.8505 26.3263 20.0028 25.9795C17.2244 25.6391 15.0005 23.3318 14.7548 20.5454C14.6729 19.6123 14.8052 18.7171 15.1013 17.9039C15.9518 15.6092 18.1632 13.9701 20.7526 13.9701C22.2142 13.9701 23.5561 14.4933 24.602 15.3633C24.7217 15.4642 24.8855 15.502 25.043 15.4516L27.9789 14.5311C28.1427 14.4807 28.2498 14.3546 28.2939 14.2159C28.3317 14.0709 28.3128 13.907 28.2057 13.7809C26.3093 11.5051 23.386 10.112 20.1414 10.3074C20.1036 10.3137 20.0658 10.32 20.028 10.32L19.0263 7.13005C18.9003 6.71398 18.4593 6.48071 18.0435 6.60679L15.7628 7.31917C15.347 7.45156 15.1139 7.89285 15.2462 8.30893L15.9896 10.6856C16.1219 11.1017 15.9581 11.5556 15.5927 11.7888C13.7845 12.9362 12.367 14.6635 11.6299 16.7061C11.3274 17.5256 11.1384 18.3956 11.0754 19.2971C11.0565 19.6312 11.0502 19.959 11.0628 20.2806C11.0817 20.7155 10.7982 21.1064 10.3824 21.2388L7.87493 22.0457C7.45912 22.1781 7.22601 22.6194 7.35201 23.0355L8.06394 25.3176C8.19624 25.7337 8.63726 25.9606 9.05308 25.8345L11.6047 25.0087C12.0079 24.8826 12.4552 25.0276 12.6883 25.3806C14.4271 27.9843 17.3883 29.7053 20.7526 29.7053C20.8975 29.7053 21.0361 29.7053 21.1747 29.7053C21.6157 29.6801 22.0126 29.9638 22.1449 30.3799L22.9198 32.8763C23.0521 33.2924 23.4931 33.5257 23.9089 33.3933L26.1896 32.6809C26.6054 32.5548 26.8322 32.1072 26.7062 31.6911L25.8872 29.0812C25.7612 28.6777 25.9061 28.2365 26.2526 27.9969V27.9906Z" fill="#24282E"/>
+</svg>

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

@@ -6,15 +6,15 @@
 	align-items: center;
 	width: 100%;
 	padding: 24px;
-	border: 1px solid $grey-medium;
+	border: 1px solid $color-neutral-200;
 	cursor: pointer;
 
 	&:hover {
-		background-color: $grey-medium;
+		background-color: $color-neutral-200;
 	}
 
 	&[data-selected="true"] {
-		background-color: $grey-medium;
+		background-color: $color-neutral-200;
 	}
 
 	.left-side {

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/Button/classes.module.scss

@@ -23,51 +23,51 @@
 	}
 
 	&[variant="primary"] {
-		color: $white;
+		color: $color-generic-white;
-		background-color: $purple-flash;
+		background-color: $color-primary-500;
-		border-color: $purple-flash;
+		border-color: $color-primary-500;
 		padding: 24px 48px;
 		font-weight: 400;
 		font-size: 18px;
 		line-height: 22px;
 
 		&:hover {
-			border-color: $purple-hover;
+			border-color: $color-primary-700;
-			background-color: $purple-hover;
+			background-color: $color-primary-700;
 		}
 
 		&:disabled {
-			border-color: $purple-soft;
+			border-color: $color-primary-500-soft;
-			background-color: $purple-soft;
+			background-color: $color-primary-500-soft;
 			pointer-events: none;
 		}
 	}
 
 	&[variant="secondary"] {
-		color: $white;
+		color: $color-generic-white;
-		background-color: $red-flash;
+		background-color: $color-error-600;
-		border-color: $red-flash;
+		border-color: $color-error-600;
 		padding: 24px 48px;
 		font-weight: 400;
 		font-size: 18px;
 		line-height: 22px;
 
 		&:hover {
-			border-color: $re-hover;
+			border-color: $color-error-800;
-			background-color: $re-hover;
+			background-color: $color-error-800;
 		}
 
 		&:disabled {
-			border-color: $red-soft;
+			border-color: $color-error-600-soft;
-			background-color: $red-soft;
+			background-color: $color-error-600-soft;
 			pointer-events: none;
 		}
 	}
 
 	&[variant="ghost"] {
-		color: $pink-flash;
+		color: $color-secondary-500;
 		background-color: transparent;
-		border-color: $pink-flash;
+		border-color: $color-secondary-500;
 		padding: 24px 48px;
 		font-weight: 400;
 		font-size: 18px;
@@ -75,26 +75,26 @@
 
 		svg {
 			path {
-				stroke: $white;
+				stroke: $color-generic-white;
 			}
 		}
 
 		&:hover {
-			border-color: $pink-hover;
+			border-color: $color-secondary-700;
-			color: $pink-hover;
+			color: $color-secondary-700;
 		}
 
 		&:disabled {
-			border-color: $pink-soft;
+			border-color: $color-secondary-500-soft;
-			background-color: $pink-soft;
+			background-color: $color-secondary-500-soft;
 			pointer-events: none;
 		}
 	}
 
 	&[variant="white"] {
-		color: $pink-flash;
+		color: $color-secondary-500;
 		background-color: white;
-		border-color: $pink-flash;
+		border-color: $color-secondary-500;
 		padding: 24px 48px;
 		font-weight: 400;
 		font-size: 18px;
@@ -102,18 +102,18 @@
 
 		svg {
 			path {
-				stroke: $white;
+				stroke: $color-generic-white;
 			}
 		}
 
 		&:hover {
-			border-color: $pink-hover;
+			border-color: $color-secondary-700;
-			color: $pink-hover;
+			color: $color-secondary-700;
 		}
 
 		&:disabled {
-			border-color: $pink-soft;
+			border-color: $color-secondary-500-soft;
-			background-color: $pink-soft;
+			background-color: $color-secondary-500-soft;
 			pointer-events: none;
 		}
 	}
@@ -132,7 +132,7 @@
 	}
 
 	&[variant="line"] {
-		color: $pink-flash;
+		color: $color-secondary-500;
 		background-color: transparent;
 		border-color: transparent;
 		padding: 0;

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

@@ -13,7 +13,7 @@
 		background-color: transparent;
 		width: 16px;
 		height: 16px;
-		border: 1px solid $turquoise-flash;
+		border: 1px solid $color-secondary-500;
 		border-radius: 2px;
 		margin-right: 16px;
 		display: grid;
@@ -30,7 +30,7 @@
 		display: grid;
 		width: 16px;
 		height: 16px;
-		background-color: $turquoise-flash;
+		background-color: $color-secondary-500;
 		border-radius: 2px;
 		transform: scale(0);
 	}

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

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

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

@@ -1,19 +1,17 @@
 .container {
-
-
 	.root {
 		padding: 24px;
-		background-color: var(--white);
+		background-color: var(--color-generic-white);
 		border: 1px dashed #e7e7e7;
 
 		height: fit-content;
 
 		&[data-drag-over="true"] {
-			border: 1px dashed var(--grey);
+			border: 1px dashed var(--color-neutral-500);
 		}
 
 		&.validated {
-			border: 1px dashed var(--green-flash);
+			border: 1px dashed var(--color-success-600);
 		}
 
 		.top-container {
@@ -34,12 +32,12 @@
 				margin-left: 18px;
 
 				.validated {
-					color: var(--green-flash);
+					color: var(--color-success-600);
 				}
 
 				.refused-button {
 					font-size: 14px;
-					color: var(--re-hover);
+					color: var(--color-error-800);
 					margin-left: 8px;
 				}
 
@@ -102,7 +100,7 @@
 	}
 
 	.error-message {
-		color: var(--red-flash);
+		color: var(--color-error-600);
 		margin-top: 8px;
 	}
-}
+}

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

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

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

@@ -1,18 +1,18 @@
 .container {
 	.root {
 		padding: 24px;
-		background-color: var(--white);
+		background-color: var(--color-generic-white);
 		border: 1px dashed #e7e7e7;
 
 		height: fit-content;
 		margin-top: 16px;
 
 		&[data-drag-over="true"] {
-			border: 1px dashed var(--grey);
+			border: 1px dashed var(--color-neutral-500);
 		}
 
 		&.validated {
-			border: 1px dashed var(--green-flash);
+			border: 1px dashed var(--color-success-600);
 		}
 
 		.top-container {
@@ -33,12 +33,12 @@
 				margin-left: 18px;
 
 				.validated {
-					color: var(--green-flash);
+					color: var(--color-success-600);
 				}
 
 				.refused-button {
 					font-size: 14px;
-					color: var(--re-hover);
+					color: var(--color-error-800);
 					margin-left: 8px;
 				}
 
@@ -101,7 +101,7 @@
 	}
 
 	.error-message {
-		color: var(--red-flash);
+		color: var(--color-error-600);
 		margin-top: 8px;
 	}
 }

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

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

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

@@ -1,19 +1,17 @@
 .container {
-
-
 	.root {
 		padding: 24px;
-		background-color: var(--white);
+		background-color: var(--color-generic-white);
 		border: 1px dashed #e7e7e7;
 
 		height: fit-content;
 
 		&[data-drag-over="true"] {
-			border: 1px dashed var(--grey);
+			border: 1px dashed var(--color-neutral-500);
 		}
 
 		&.validated {
-			border: 1px dashed var(--green-flash);
+			border: 1px dashed var(--color-success-600);
 		}
 
 		.top-container {
@@ -34,12 +32,12 @@
 				margin-left: 18px;
 
 				.validated {
-					color: var(--green-flash);
+					color: var(--color-success-600);
 				}
 
 				.refused-button {
 					font-size: 14px;
-					color: var(--re-hover);
+					color: var(--color-error-800);
 					margin-left: 8px;
 				}
 
@@ -102,7 +100,7 @@
 	}
 
 	.error-message {
-		color: var(--red-flash);
+		color: var(--color-error-600);
 		margin-top: 8px;
 	}
-}
+}

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

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

src/front/Components/DesignSystem/Document/DocumentNotary/classes.module.scss

@@ -1,30 +1,30 @@
 @import "@Themes/constants.scss";
 
 .root {
-	border: 1px solid $grey-medium;
+	border: 1px solid $color-neutral-200;
 	padding: 16px;
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
 	&.DEPOSITED {
 		cursor: pointer;
-		border: 1px solid $orange-soft;
+		border: 1px solid $color-warning-500-soft;
 		&:hover {
-			border: 1px solid $orange-soft;
+			border: 1px solid $color-warning-500-soft;
-			outline: 1px solid $orange-soft;
+			outline: 1px solid $color-warning-500-soft;
 		}
 	}
 	&.VALIDATED {
 		cursor: pointer;
-		border: 1px solid $green-soft;
+		border: 1px solid $color-success-600-soft;
 		&:hover {
-			border: 1px solid $green-soft;
+			border: 1px solid $color-success-600-soft;
-			outline: 1px solid $green-soft;
+			outline: 1px solid $color-success-600-soft;
 		}
 	}
 
 	.valid-radius {
-		background-color: $green-flash;
+		background-color: color-success-600;
 		padding: 6px;
 		border-radius: 20px;
 	}

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.BLACK}>
+							<Typography typo={ITypo.DISPLAY_LARGE} color={ITypoColor.COLOR_GENERIC_BLACK}>
 								Erreur lors du chargement du fichier
 							</Typography>
 						)}

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

@@ -18,6 +18,6 @@
 		max-height: calc(100vh - 215px);
 		height: calc(100vh - 215px);
 		overflow: auto;
-		border-right: 1px solid var(--grey-medium);
+		border-right: 1px solid var(--color-neutral-200);
 	}
 }

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

@@ -1,7 +1,7 @@
 @import "@Themes/constants.scss";
 
 .root {
-	background-color: var(--grey-soft);
+	background-color: var(--color-neutral-50);
 	padding: 24px;
 	width: 100%;
 	display: flex;

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

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

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

@@ -6,11 +6,11 @@
 	align-items: center;
 	width: 100%;
 	padding: 24px;
-	border: 1px solid $grey-medium;
+	border: 1px solid $color-neutral-200;
 	cursor: pointer;
 
 	&:hover {
-		background-color: $grey-medium;
+		background-color: $color-neutral-200;
 	}
 
 	.left-side {

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/FolderList/classes.module.scss

@@ -4,11 +4,11 @@
 	height: calc(100vh - 290px);
 	overflow-y: scroll;
 
-	&.archived{
+	&.archived {
 		height: calc(100vh - 220px);
 	}
 
 	.active {
-		background-color: var(--grey-medium);
+		background-color: var(--color-neutral-200);
 	}
-}
+}

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

@@ -18,6 +18,6 @@
 		max-height: calc(100vh - 290px);
 		height: calc(100vh - 290px);
 		overflow: auto;
-		border-right: 1px solid var(--grey-medium);
+		border-right: 1px solid var(--color-neutral-200);
 	}
 }

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

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

src/front/Components/DesignSystem/Form/DateField/classes.module.scss

@@ -12,7 +12,7 @@
 		gap: 10px;
 		width: 100%;
 		height: 70px;
-		border: 1px solid var(--grey-medium);
+		border: 1px solid var(--color-neutral-200);
 
 		&:disabled {
 			cursor: not-allowed;
@@ -76,16 +76,16 @@
 			padding: 0 16px;
 			pointer-events: none;
 			position: absolute;
-			background: $white;
+			background: $color-generic-white;
 			transition: transform 0.3s ease-in-out;
 		}
 	}
 
 	&[data-is-errored="true"] {
 		.input {
-			border: 1px solid var(--red-flash);
+			border: 1px solid var(--color-error-600);
 			~ .fake-placeholder {
-				color: var(--red-flash);
+				color: var(--color-error-600);
 			}
 		}
 	}

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

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

src/front/Components/DesignSystem/Form/SelectField/classes.module.scss

@@ -5,14 +5,14 @@
 	position: relative;
 	flex-direction: column;
 	width: 100%;
-	border: 1px solid var(--grey-medium);
+	border: 1px solid var(--color-neutral-200);
 
-	&[data-errored="true"]{
+	&[data-errored="true"] {
-		border: 1px solid var(--red-flash);
+		border: 1px solid var(--color-error-600);
 	}
-	
+
-	&[data-disabled="true"]{
+	&[data-disabled="true"] {
-		.container-label{
+		.container-label {
 			cursor: not-allowed;
 		}
 		opacity: 0.6;
@@ -23,13 +23,11 @@
 		justify-content: space-between;
 		align-items: center;
 		width: 100%;
-		background-color: $white;
+		background-color: $color-generic-white;
 		cursor: pointer;
 		padding: 24px;
 		z-index: 1;
 
-		
-
 		&[data-border-right-collapsed="true"] {
 			border-radius: 8px 0 0 8px;
 		}
@@ -52,7 +50,7 @@
 				position: absolute;
 				top: 24px;
 				left: 8px;
-				background-color: $white;
+				background-color: $color-generic-white;
 				padding: 0 16px;
 
 				&[data-open="true"] {
@@ -64,7 +62,7 @@
 		.chevron-icon {
 			height: 24px;
 
-			fill: $grey;
+			fill: $color-neutral-500;
 			transition: all 350ms $custom-easing;
 			transform: rotate(90deg);
 
@@ -87,7 +85,7 @@
 		opacity: 1;
 		overflow: hidden;
 		top: 50px;
-		background-color: $white;
+		background-color: $color-generic-white;
 
 		&[data-open="false"] {
 			height: 0;

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

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

src/front/Components/DesignSystem/Form/TextField/classes.module.scss

@@ -12,7 +12,7 @@
 		gap: 10px;
 		width: 100%;
 		height: 70px;
-		border: 1px solid var(--grey-medium);
+		border: 1px solid var(--color-neutral-200);
 
 		&:disabled {
 			cursor: not-allowed;
@@ -76,16 +76,16 @@
 			padding: 0 16px;
 			pointer-events: none;
 			position: absolute;
-			background: $white;
+			background: $color-generic-white;
 			transition: transform 0.3s ease-in-out;
 		}
 	}
 
 	&[data-is-errored="true"] {
 		.input {
-			border: 1px solid var(--red-flash);
+			border: 1px solid var(--color-error-600);
 			~ .fake-placeholder {
-				color: var(--red-flash);
+				color: var(--color-error-600);
 			}
 		}
 	}

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

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

src/front/Components/DesignSystem/Form/TextareaField/classes.module.scss

@@ -25,7 +25,7 @@
 
 		width: 100%;
 		height: 100px;
-		border: 1px solid var(--grey-medium);
+		border: 1px solid var(--color-neutral-200);
 
 		~ .fake-placeholder {
 			z-index: 2;
@@ -34,7 +34,7 @@
 			padding: 0 16px;
 			pointer-events: none;
 			position: absolute;
-			background: $white;
+			background: $color-generic-white;
 			transform: translateY(35px);
 			transition: transform 0.3s ease-in-out;
 		}
@@ -54,9 +54,9 @@
 
 	&[data-is-errored="true"] {
 		.textarea {
-			border: 1px solid var(--red-flash);
+			border: 1px solid var(--color-error-600);
 			~ .fake-placeholder {
-				color: var(--red-flash);
+				color: var(--color-error-600);
 			}
 		}
 	}

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

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

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

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

src/front/Components/DesignSystem/Header/BurgerMenu/BurgerModal/classes.module.scss

@@ -3,7 +3,7 @@
 .root {
 	display: flex;
 	flex-direction: column;
-	background-color: $white;
+	background-color: $color-generic-white;
 	box-shadow: $shadow-nav;
 	padding: 24px;
 	position: absolute;
@@ -19,7 +19,7 @@
 
 	.separator {
 		width: 100%;
-		border: 1px solid $grey-medium;
+		border: 1px solid $color-neutral-200;
 	}
 }
 

src/front/Components/DesignSystem/Header/HeaderLink/classes.module.scss

@@ -14,13 +14,13 @@
 	.underline {
 		width: 100%;
 		height: 3px;
-		background-color: $white;
+		background-color: $color-generic-white;
 		position: absolute;
 		bottom: 0;
 		left: 0;
 
 		&[data-active="true"] {
-			background-color: $black;
+			background-color: $color-generic-black;
 		}
 	}
 

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

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

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

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

src/front/Components/DesignSystem/Header/HeaderSubmenu/classes.module.scss

@@ -13,13 +13,13 @@
 	.underline {
 		width: 100%;
 		height: 3px;
-		background-color: $white;
+		background-color: $color-generic-white;
 		position: absolute;
 		bottom: 0;
 		left: 0;
 
 		&[data-active="true"] {
-			background-color: $black;
+			background-color: $color-generic-black;
 		}
 	}
 

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

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

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

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

src/front/Components/DesignSystem/Header/Notifications/NotificationModal/classes.module.scss

@@ -5,7 +5,7 @@
 	flex-direction: column;
 	width: 390px;
 	max-height: 80vh;
-	background-color: $white;
+	background-color: $color-generic-white;
 	box-shadow: $shadow-nav;
 	padding: 24px;
 	position: absolute;
@@ -37,7 +37,7 @@
 		gap: 8px;
 		text-decoration: underline;
 		text-underline-offset: 2px;
-		color: var(--pink-flash);
+		color: var(--color-secondary-500);
 		cursor: pointer;
 	}
 

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

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

src/front/Components/DesignSystem/Header/Profile/ProfileModal/classes.module.scss

@@ -3,7 +3,7 @@
 .root {
 	display: flex;
 	flex-direction: column;
-	background-color: $white;
+	background-color: $color-generic-white;
 	box-shadow: $shadow-nav;
 	padding: 24px;
 	position: absolute;
@@ -27,7 +27,7 @@
 
 	.separator {
 		width: 100%;
-		border: 1px solid $grey-medium;
+		border: 1px solid $color-neutral-200;
 	}
 }
 

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

@@ -5,7 +5,7 @@
 	align-items: center;
 	justify-content: space-between;
 	height: 83px;
-	background-color: $white;
+	background-color: $color-generic-white;
 	box-shadow: $shadow-nav;
 	padding: 0 48px;
 	position: sticky;
@@ -81,6 +81,6 @@
 	gap: 8px;
 	justify-content: center;
 	align-items: center;
-	background-color: var(--grey-soft);
+	background-color: var(--color-neutral-50);
 	padding: 14px 0;
 }

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

@@ -1,7 +1,7 @@
 import React from "react";
 import classes from "./classes.module.scss";
 import Image from "next/image";
-import LogoIcon from "@Assets/logo.svg";
+import LogoIcon from "@Assets/logo_standard_neutral.svg";
 import Link from "next/link";
 import Navigation from "./Navigation";
 import Notifications from "./Notifications";
@@ -114,7 +114,7 @@ class HeaderClass extends React.Component<IPropsClass, IState> {
 				{this.state.cancelAt && (
 					<div className={classes["subscription-line"]}>
 						<InformationCircleIcon height="24" />;
-						<Typography typo={ITypo.P_16} color={ITypoColor.BLACK}>
+						<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_GENERIC_BLACK}>
 							Assurez vous de sauvegarder tout ce dont vous avez besoin avant la fin de votre abonnement le{" "}
 							{this.state.cancelAt.toLocaleDateString()}.
 						</Typography>

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

@@ -9,7 +9,7 @@
 	height: 100%;
 	border-radius: 50%;
 	border: 8px solid;
-	border-color: var(--grey-soft);
+	border-color: var(--color-neutral-50);
-	border-right-color: var(--blue-soft);
+	border-right-color: var(--color-info-500-soft);
 	animation: s2 1s infinite linear;
 }

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

@@ -2,7 +2,7 @@ import React from "react";
 import Image from "next/image";
 import DisconnectIcon from "@Assets/Icons/disconnect.svg";
 import classes from "./classes.module.scss";
-import Typography, { ITypo } from "../Typography";
+import Typography, { ITypo, ITypoColor } from "../Typography";
 import { useRouter } from "next/router";
 import UserStore from "@Front/Stores/UserStore";
 import { FrontendVariables } from "@Front/Config/VariablesFront";
@@ -11,14 +11,16 @@ export default function LogOut() {
 	const router = useRouter();
 	const variables = FrontendVariables.getInstance();
 
-	const disconnect = async() => {
+	const disconnect = async () => {
 		await UserStore.instance.disconnect();
 		router.push(`https://qual-connexion.idnot.fr/user/auth/logout?sourceURL=${variables.FRONT_APP_HOST}`);
 	};
 
 	return (
 		<div className={classes["root"]} onClick={disconnect}>
-			<Typography typo={ITypo.NAV_HEADER_18}>Déconnexion</Typography>
+			<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
+				Déconnexion
+			</Typography>
 			<Image src={DisconnectIcon} className={classes["disconnect-icon"]} alt="disconnect" />
 		</div>
 	);

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/classes.module.scss

@@ -51,7 +51,7 @@
 		position: relative;
 		width: 610px;
 		max-height: 90%;
-		background: $white;
+		background: $color-generic-white;
 		box-shadow: 0px 6px 12px rgba(255, 255, 255, 0.11);
 		overflow: auto;
 		padding: 32px;

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

@@ -60,7 +60,7 @@ export default class Modal extends React.Component<IProps, IState> {
 					<div className={classes["sub-container"]}>
 						{this.props.header && <Header content={this.props.header} />}
 
-						<Typography typo={ITypo.P_16}>
+						<Typography typo={ITypo.TEXT_MD_REGULAR}>
 							<>{this.props.children ? this.props.children : <Loader text={this.props.textLoader} />}</>
 						</Typography>
 						{this.props.children && this.props.footer && <Footer content={this.props.footer} />}
@@ -96,18 +96,16 @@ export default class Modal extends React.Component<IProps, IState> {
 		document.body.style.overflow = "auto";
 		document.removeEventListener("keydown", this.handleKeyDown);
 	}
-	
+
 	protected close() {
 		if (this.props.hasContainerClosable === false) return;
 		if (this.state.willClose) return;
 		this.props.onClose();
 	}
 
-
-
 	private handleKeyDown = (e: KeyboardEvent): void => {
 		if (e.key === "Escape" || e.key === "Esc") {
 			this.props.onClose();
 		}
-	}
+	};
 }

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

@@ -7,7 +7,7 @@
 		flex-direction: column;
 		flex: 1;
 		position: relative;
-		border: 1px solid $grey-medium;
+		border: 1px solid $color-neutral-200;
 		background-color: transparent;
 
 		.placeholder {
@@ -66,12 +66,12 @@
 			z-index: 1;
 			padding: 0 16px;
 		}
-		
+
 		&[data-is-errored="true"] {
 			.input {
-				border: 1px solid var(--red-flash);
+				border: 1px solid var(--color-error-600);
 				~ .fake-placeholder {
-					color: var(--red-flash);
+					color: var(--color-error-600);
 				}
 			}
 		}

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

@@ -37,8 +37,7 @@ export default class MultiSelect extends React.Component<IProps, IState> {
 		this.state = {
 			isFocused: false,
 			selectedOptions: [],
-			validationError: this.props.validationError ?? null
+			validationError: this.props.validationError ?? null,
-
 		};
 		this.hasError = this.hasError.bind(this);
 		this.onChange = this.onChange.bind(this);
@@ -56,7 +55,9 @@ export default class MultiSelect extends React.Component<IProps, IState> {
 						<div
 							className={classes["placeholder"]}
 							data-selected={(this.state.isFocused || this.state.selectedOptions.length >= 1).toString()}>
-							<Typography typo={ITypo.NAV_INPUT_16}>{this.props.placeholder}</Typography>
+							<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
+								{this.props.placeholder}
+							</Typography>
 						</div>
 					)}
 					<div className={classes["input-container"]}>
@@ -147,7 +148,7 @@ export default class MultiSelect extends React.Component<IProps, IState> {
 		let errors: JSX.Element[] = [];
 		Object.entries(this.state.validationError.constraints).forEach(([key, value]) => {
 			errors.push(
-				<Typography key={key} typo={ITypo.CAPTION_14} color={ITypoColor.RED_FLASH}>
+				<Typography key={key} typo={ITypo.TEXT_SM_REGULAR} color={ITypoColor.COLOR_ERROR_600}>
 					{value}
 				</Typography>,
 			);

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

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

src/front/Components/DesignSystem/QuantityProgressBar/ProgressBar/classes.module.scss

@@ -2,7 +2,7 @@
 
 .root {
 	position: relative;
-	background-color: $grey-medium;
+	background-color: $color-neutral-200;
 	box-shadow: inset 0px 4px 8px rgba(0, 0, 0, 0.08);
 	height: 12px;
 	border-radius: 5px;
@@ -15,7 +15,7 @@
 	width: 100%;
 	height: 100%;
 	transition: width 300ms;
-	background-color: $turquoise-flash;
+	background-color: $color-secondary-500;
 
 	.percentage {
 		width: 0;

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/classes.module.scss

@@ -11,7 +11,7 @@
 		background-color: transparent;
 		width: 15px;
 		height: 15px;
-		border: 1px solid $turquoise-flash;
+		border: 1px solid $color-secondary-500;
 		border-radius: 100px;
 		margin-right: 16px;
 		display: flex;
@@ -25,7 +25,7 @@
 		content: "";
 		width: 11px;
 		height: 11px;
-		background-color: $turquoise-flash;
+		background-color: $color-secondary-500;
 		border-radius: 100px;
 		transform: scale(0);
 	}

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

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

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

@@ -4,15 +4,15 @@
 	display: flex;
 	align-items: center;
 	padding-left: 24px;
-	background-color: $white;
+	background-color: $color-generic-white;
-	border: 1px solid $grey-medium;
+	border: 1px solid $color-neutral-200;
 	position: relative;
 
 	.fake-placeholder {
 		position: absolute;
 		left: 47px;
 		top: 24px;
-		color: $grey;
+		color: $color-neutral-500;
 		pointer-events: none;
 	}
 
@@ -26,6 +26,6 @@
 		font-weight: 400;
 		font-size: 18px;
 		line-height: 22px;
-		color: $grey;
+		color: $color-neutral-500;
 	}
 }

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

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

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

@@ -8,17 +8,17 @@
 		cursor: not-allowed;
 		opacity: 0.5;
 	}
-	
+
 	.switch-container {
 		position: relative;
 		width: 46px;
 		height: 24px;
-		background-color: var(--grey-medium);
+		background-color: var(--color-neutral-200);
 		border-radius: 64px;
 
 		transition: all 200ms ease-in-out;
 		&[data-checked="true"] {
-			background-color: var(--turquoise-flash);
+			background-color: var(--color-secondary-500);
 
 			.round {
 				left: 24px;

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

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

src/front/Components/DesignSystem/Toasts/ToastsContainer/ToastElement/classes.module.scss

@@ -26,7 +26,7 @@
 	pointer-events: all;
 	position: relative;
 	padding: 24px;
-	background: var(--orange-soft);
+	background: var(--color-warning-500-soft);
 	box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.11);
 	border-radius: 5px;
 
@@ -45,7 +45,7 @@
 	&[data-clickable="true"] {
 		cursor: pointer;
 		&:hover {
-			background: var(--orange-soft-hover);
+			background: var(--color-warning-500-soft);
 		}
 	}
 

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

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

src/front/Components/DesignSystem/ToolTip/Content/classes.module.scss

@@ -3,7 +3,7 @@
 .root {
 	min-width: 100px;
 	max-width: 320px;
-	background: $white;
+	background: $color-generic-white;
 	border-radius: 5px !important;
 	position: fixed;
 	transition: opacity 0.2s ease-in-out;
@@ -29,5 +29,5 @@
 	position: absolute;
 	right: 20px;
 	margin-top: -4px;
-	fill: $white;
+	fill: $color-generic-white;
 }

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

@@ -19,8 +19,8 @@ type IState = {
 const LightTooltip = styled(({ className, ...props }: TooltipProps) => <TooltipMUI {...props} classes={{ popper: className }} />)(
 	({ theme }) => ({
 		[`& .${tooltipClasses.tooltip}`]: {
-			backgroundColor: "var(--white)",
+			backgroundColor: "var(--color-generic-white)",
-			color: "var(--black)",
+			color: "var(--color-generic-black)",
 			boxShadow: "0px 4px 24px 0px #00000026",
 			fontSize: 14,
 			fontWeight: 400,
@@ -30,7 +30,7 @@ const LightTooltip = styled(({ className, ...props }: TooltipProps) => <TooltipM
 			borderRadius: "0px",
 		},
 		[`& .${tooltipClasses.arrow}`]: {
-			color: "var(--white)",
+			color: "var(--color-generic-white)",
 		},
 	}),
 );

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

@@ -2,165 +2,279 @@
 @import "@Themes/modes.scss";
 
 .root {
-	color: $black;
+	color: $color-neutral-950;
 	vertical-align: center;
-	font-family: "Inter", sans-serif;
+	font-family: "Poppins", sans-serif;
-	&.H1-60 {
+
+	//Displays
+	&.display-large {
 		font-style: normal;
-		font-weight: 500;
+		font-weight: 600;
-		font-size: 56px;
+		font-size: 50px;
-		line-height: 67.2px;
+		line-height: 75px;
+		letter-spacing: -2%;
 
 		@media (max-width: $screen-m) {
 			font-size: 48px;
-			line-height: 56.7px;
+			line-height: 72px;
+		}
+	}
+	&.display-medium {
+		font-style: normal;
+		font-weight: 600;
+		font-size: 48px;
+		line-height: 72px;
+		letter-spacing: -2%;
+
+		@media (max-width: $screen-m) {
+			font-size: 48px;
+			line-height: 72px;
+		}
+	}
+	&.display-small {
+		font-style: normal;
+		font-weight: 600;
+		font-size: 44px;
+		line-height: 66px;
+		letter-spacing: -2%;
+
+		@media (max-width: $screen-m) {
+			font-size: 48px;
+			line-height: 72px;
 		}
 	}
 
-	&.H1-bis-40 {
+	//Titles
+	&.title-h1 {
 		font-style: normal;
-		font-weight: 500;
+		font-weight: 600;
 		font-size: 40px;
+		line-height: 60px;
+		letter-spacing: -2%;
+	}
+	&.title-h2 {
+		font-style: normal;
+		font-weight: 400;
+		font-size: 36px;
+		line-height: 54px;
+		letter-spacing: -2%;
+	}
+	&.title-h3 {
+		font-style: normal;
+		font-weight: 300;
+		font-size: 32px;
 		line-height: 48px;
+		letter-spacing: -2%;
 	}
-
+	&.title-h4 {
-	&.H2-30 {
-		font-style: normal;
-		font-weight: 500;
-		font-size: 30px;
-		line-height: 36px;
-	}
-
-	&.H3-24 {
 		font-style: normal;
 		font-weight: 600;
+		font-size: 28px;
+		line-height: 42px;
+		letter-spacing: -2%;
+	}
+	&.title-h5 {
+		font-style: normal;
+		font-weight: 400;
 		font-size: 24px;
-		line-height: 29px;
+		line-height: 36px;
+		letter-spacing: -2%;
+	}
+	&.title-h6 {
+		font-style: normal;
+		font-weight: 400;
+		font-size: 20px;
+		line-height: 30px;
+		letter-spacing: -2%;
 	}
 
-	&.Paragraphe-semibold-18 {
+	//Text large
+	&.text-lg-bold {
+		font-style: normal;
+		font-weight: 700;
+		font-size: 18px;
+		line-height: 27px;
+		letter-spacing: 0.5%;
+	}
+	&.text-lg-semibold {
 		font-style: normal;
 		font-weight: 600;
 		font-size: 18px;
-		line-height: 22px;
+		line-height: 27px;
-		letter-spacing: 0.5px;
+		letter-spacing: 0.5%;
 	}
-
+	&.text-lg-regular {
-	&.Paragraphe-simple-18 {
 		font-style: normal;
 		font-weight: 400;
 		font-size: 18px;
-		line-height: 22px;
+		line-height: 27px;
+		letter-spacing: 0.5%;
 	}
-
+	&.text-lg-uppercase {
-	&.Paragraphe-MAJ-18 {
 		font-style: normal;
 		font-weight: 400;
 		font-size: 18px;
-		line-height: 22px;
+		line-height: 27px;
+		letter-spacing: 0.5%;
 		text-transform: uppercase;
 	}
-
+	&.text-lg-light {
-	&.Nav-header-off-18 {
 		font-style: normal;
-		font-weight: 400;
+		font-weight: 300;
 		font-size: 18px;
-		line-height: 22px;
+		line-height: 27px;
-		letter-spacing: 0.5px;
+		letter-spacing: 0.5%;
-		color: $grey;
 	}
 
-	&.Paragraphe-18-error {
+	//Text medium
+	&.text-md-bold {
 		font-style: normal;
-		font-weight: 400;
+		font-weight: 700;
-		font-size: 18px;
+		font-size: 16px;
-		line-height: 22px;
+		line-height: 24px;
-		letter-spacing: 0.5px;
+		letter-spacing: 0.5%;
 	}
-
+	&.text-md-semibold {
-	&.Paragraphe-semibold-16 {
 		font-style: normal;
 		font-weight: 600;
 		font-size: 16px;
-		line-height: 22px;
+		line-height: 24px;
-		letter-spacing: 0.5px;
+		letter-spacing: 0.5%;
 	}
-
+	&.text-md-regular {
-	&.Nav-input-off-16 {
 		font-style: normal;
 		font-weight: 400;
 		font-size: 16px;
-		line-height: 22px;
+		line-height: 24px;
-		letter-spacing: 0.5px;
+		letter-spacing: 0.5%;
-		color: $grey;
 	}
-
+	&.text-md-uppercase {
-	&.Paragraphe-simple-16 {
 		font-style: normal;
 		font-weight: 400;
 		font-size: 16px;
-		line-height: 22px;
+		line-height: 24px;
-		letter-spacing: 0.005em;
+		letter-spacing: 0.5%;
+		text-transform: uppercase;
 	}
-
+	&.text-md-light {
-	&.Paragraphe-16-error {
-		color: $re-hover;
 		font-style: normal;
-		font-weight: 400;
+		font-weight: 300;
 		font-size: 16px;
-		line-height: 22px;
+		line-height: 24px;
-		letter-spacing: 0.5px;
+		letter-spacing: 0.5%;
 	}
 
-	&.Caption_14 {
+	//Text small
+	&.text-sm-bold {
 		font-style: normal;
-		font-weight: 400;
+		font-weight: 700;
 		font-size: 14px;
-		line-height: 22px;
+		line-height: 21px;
-		letter-spacing: 0.5px;
+		letter-spacing: 0.5%;
 	}
-
+	&.text-sm-semibold {
-	&.Caption_14-semibold {
 		font-style: normal;
 		font-weight: 600;
 		font-size: 14px;
-		line-height: 22px;
+		line-height: 21px;
-		letter-spacing: 0.5px;
+		letter-spacing: 0.5%;
+	}
+	&.text-sm-regular {
+		font-style: normal;
+		font-weight: 400;
+		font-size: 14px;
+		line-height: 21px;
+		letter-spacing: 0.5%;
+	}
+	&.text-sm-uppercase {
+		font-style: normal;
+		font-weight: 400;
+		font-size: 14px;
+		line-height: 21px;
+		letter-spacing: 0.5%;
+		text-transform: uppercase;
+	}
+	&.text-sm-light {
+		font-style: normal;
+		font-weight: 300;
+		font-size: 14px;
+		line-height: 21px;
+		letter-spacing: 0.5%;
 	}
 
-	&.re-hover {
+	//Text extra small
-		color: $re-hover;
+	&.text-xs-bold {
+		font-style: normal;
+		font-weight: 700;
+		font-size: 12px;
+		line-height: 18px;
+		letter-spacing: 0.5%;
+	}
+	&.text-xs-semibold {
+		font-style: normal;
+		font-weight: 600;
+		font-size: 12px;
+		line-height: 18px;
+		letter-spacing: 0.5%;
+	}
+	&.text-xs-regular {
+		font-style: normal;
+		font-weight: 400;
+		font-size: 12px;
+		line-height: 18px;
+		letter-spacing: 0.5%;
+	}
+	&.text-xs-uppercase {
+		font-style: normal;
+		font-weight: 400;
+		font-size: 12px;
+		line-height: 18px;
+		letter-spacing: 0.5%;
+		text-transform: uppercase;
+	}
+	&.text-xs-light {
+		font-style: normal;
+		font-weight: 300;
+		font-size: 12px;
+		line-height: 18px;
+		letter-spacing: 0.5%;
 	}
 
-	&.grey {
+	//Caption
-		color: $grey;
+	&.caption-bold {
+		font-style: normal;
+		font-weight: 700;
+		font-size: 10px;
+		line-height: 15px;
+		letter-spacing: -2%;
 	}
-
+	&.caption-semibold {
-	&.black {
+		font-style: normal;
-		color: $black;
+		font-weight: 600;
+		font-size: 10px;
+		line-height: 15px;
+		letter-spacing: -2%;
 	}
-
+	&.caption-regular {
-	&.purple-flash {
+		font-style: normal;
-		color: var(--purple-flash);
+		font-weight: 400;
+		font-size: 10px;
+		line-height: 15px;
+		letter-spacing: -2%;
 	}
-
+	&.caption-uppercase {
-	&.pink-flash {
+		font-style: normal;
-		color: var(--pink-flash);
+		font-weight: 400;
+		font-size: 10px;
+		line-height: 15px;
+		letter-spacing: -2%;
+		text-transform: uppercase;
 	}
-
+	&.caption-light {
-	&.green-flash {
+		font-style: normal;
-		color: var(--green-flash);
+		font-weight: 300;
-	}
+		font-size: 10px;
-
+		line-height: 15px;
-	&.red-flash {
+		letter-spacing: -2%;
-		color: var(--red-flash);
-	}
-
-	&.orange-flash {
-		color: var(--orange-flash);
-	}
-
-	&.white {
-		color: $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,36 +12,134 @@ type IProps = {
 type IState = {};
 
 export enum ITypo {
-	H1 = "H1-60",
+	DISPLAY_LARGE = "display-large",
-	H1Bis = "H1-bis-40",
+	DISPLAY_MEDIUM = "display-medium",
-	H2 = "H2-30",
+	DISPLAY_SMALL = "display-small",
-	H3 = "H3-24",
 
-	P_SB_18 = "Paragraphe-semibold-18",
+	TITLE_H1 = "title-h1",
-	P_18 = "Paragraphe-simple-18",
+	TITLE_H2 = "title-h2",
-	P_MAJ_18 = "Paragraphe-MAJ-18",
+	TITLE_H3 = "title-h3",
-	NAV_HEADER_18 = "Nav-header-off-18",
+	TITLE_H4 = "title-h4",
-	P_ERR_18 = "Paragraphe-18-error",
+	TITLE_H5 = "title-h5",
+	TITLE_H6 = "title-h6",
 
-	P_SB_16 = "Paragraphe-semibold-16",
+	TEXT_LG_BOLD = "text-lg-bold",
-	P_16 = "Paragraphe-simple-16",
+	TEXT_LG_SEMIBOLD = "text-lg-semibold",
-	NAV_INPUT_16 = "Nav-input-off-16",
+	TEXT_LG_REGULAR = "text-lg-regular",
-	P_ERR_16 = "Paragraphe-16-error",
+	TEXT_LG_UPPERCASE = "text-lg-uppercase",
+	TEXT_LG_light = "text-lg-light",
 
-	CAPTION_14 = "Caption_14",
+	TEXT_MD_BOLD = "text-md-bold",
-	CAPTION_14_SB = "Caption_14-semibold",
+	TEXT_MD_SEMIBOLD = "text-md-semibold",
+	TEXT_MD_REGULAR = "text-md-regular",
+	TEXT_MD_UPPERCASE = "text-md-uppercase",
+	TEXT_MD_light = "text-md-light",
+
+	TEXT_SM_BOLD = "text-sm-bold",
+	TEXT_SM_SEMIBOLD = "text-sm-semibold",
+	TEXT_SM_REGULAR = "text-sm-regular",
+	TEXT_SM_UPPERCASE = "text-sm-uppercase",
+	TEXT_SM_light = "text-sm-light",
+
+	TEXT_XS_BOLD = "text-xs-bold",
+	TEXT_XS_SEMIBOLD = "text-xs-semibold",
+	TEXT_XS_REGULAR = "text-xs-regular",
+	TEXT_XS_UPPERCASE = "text-xs-uppercase",
+	TEXT_XS_light = "text-xs-light",
+
+	CAPTION_BOLD = "caption-bold",
+	CAPTION_SEMIBOLD = "caption-semibold",
+	CAPTION_REGULAR = "caption-regular",
+	CAPTION_UPPERCASE = "caption-uppercase",
+	CAPTION_LIGHT = "caption-light",
 }
 
 export enum ITypoColor {
-	RE_HOVER = "re-hover",
+	COLOR_GENERIC_BLACK = "color-generic-black",
-	GREY = "grey",
+	COLOR_GENERIC_WHITE = "color-generic-white",
-	BLACK = "black",
+	COLOR_GENERIC_NONE = "color-generic-none",
-	PURPLE_FLASH = "purple-flash",
+
-	PINK_FLASH = "pink-flash",
+	COLOR_NEUTRAL_50 = "color-neutral-50",
-	GREEN_FLASH = "green-flash",
+	COLOR_NEUTRAL_100 = "color-neutral-100",
-	ORANGE_FLASH = "orange-flash",
+	COLOR_NEUTRAL_200 = "color-neutral-200",
-	RED_FLASH = "red-flash",
+	COLOR_NEUTRAL_300 = "color-neutral-300",
-	WHITE = "white",
+	COLOR_NEUTRAL_400 = "color-neutral-400",
+	COLOR_NEUTRAL_500 = "color-neutral-500",
+	COLOR_NEUTRAL_600 = "color-neutral-600",
+	COLOR_NEUTRAL_700 = "color-neutral-700",
+	COLOR_NEUTRAL_800 = "color-neutral-800",
+	COLOR_NEUTRAL_900 = "color-neutral-900",
+	COLOR_NEUTRAL_950 = "color-neutral-950",
+
+	COLOR_PRIMARY_50 = "color-primary-50",
+	COLOR_PRIMARY_100 = "color-primary-100",
+	COLOR_PRIMARY_200 = "color-primary-200",
+	COLOR_PRIMARY_300 = "color-primary-300",
+	COLOR_PRIMARY_400 = "color-primary-400",
+	COLOR_PRIMARY_500 = "color-primary-500",
+	COLOR_PRIMARY_600 = "color-primary-600",
+	COLOR_PRIMARY_700 = "color-primary-700",
+	COLOR_PRIMARY_800 = "color-primary-800",
+	COLOR_PRIMARY_900 = "color-primary-900",
+	COLOR_PRIMARY_950 = "color-primary-950",
+
+	COLOR_SECONDARY_50 = "color-secondary-50",
+	COLOR_SECONDARY_100 = "color-secondary-100",
+	COLOR_SECONDARY_200 = "color-secondary-200",
+	COLOR_SECONDARY_300 = "color-secondary-300",
+	COLOR_SECONDARY_400 = "color-secondary-400",
+	COLOR_SECONDARY_500 = "color-secondary-500",
+	COLOR_SECONDARY_600 = "color-secondary-600",
+	COLOR_SECONDARY_700 = "color-secondary-700",
+	COLOR_SECONDARY_800 = "color-secondary-800",
+	COLOR_SECONDARY_900 = "color-secondary-900",
+	COLOR_SECONDARY_950 = "color-secondary-950",
+
+	COLOR_ERROR_50 = "color-error-50",
+	COLOR_ERROR_100 = "color-error-100",
+	COLOR_ERROR_200 = "color-error-200",
+	COLOR_ERROR_300 = "color-error-300",
+	COLOR_ERROR_400 = "color-error-400",
+	COLOR_ERROR_500 = "color-error-500",
+	COLOR_ERROR_600 = "color-error-600",
+	COLOR_ERROR_700 = "color-error-700",
+	COLOR_ERROR_800 = "color-error-800",
+	COLOR_ERROR_900 = "color-error-900",
+	COLOR_ERROR_950 = "color-error-950",
+
+	COLOR_WARNING_50 = "color-warning-50",
+	COLOR_WARNING_100 = "color-warning-100",
+	COLOR_WARNING_200 = "color-warning-200",
+	COLOR_WARNING_300 = "color-warning-300",
+	COLOR_WARNING_400 = "color-warning-400",
+	COLOR_WARNING_500 = "color-warning-500",
+	COLOR_WARNING_700 = "color-warning-700",
+	COLOR_WARNING_800 = "color-warning-800",
+	COLOR_WARNING_900 = "color-warning-900",
+	COLOR_WARNING_950 = "color-warning-950",
+
+	COLOR_SUCCESS_50 = "color-success-50",
+	COLOR_SUCCESS_100 = "color-success-100",
+	COLOR_SUCCESS_200 = "color-success-200",
+	COLOR_SUCCESS_300 = "color-success-300",
+	COLOR_SUCCESS_400 = "color-success-400",
+	COLOR_SUCCESS_500 = "color-success-500",
+	COLOR_SUCCESS_600 = "color-success-600",
+	COLOR_SUCCESS_700 = "color-success-700",
+	COLOR_SUCCESS_800 = "color-success-800",
+	COLOR_SUCCESS_900 = "color-success-900",
+	COLOR_SUCCESS_950 = "color-success-950",
+
+	COLOR_INFO_50 = "color-info-50",
+	COLOR_INFO_100 = "color-info-100",
+	COLOR_INFO_200 = "color-info-200",
+	COLOR_INFO_300 = "color-info-300",
+	COLOR_INFO_400 = "color-info-400",
+	COLOR_INFO_500 = "color-info-500",
+	COLOR_INFO_700 = "color-info-700",
+	COLOR_INFO_800 = "color-info-800",
+	COLOR_INFO_900 = "color-info-900",
+	COLOR_INFO_950 = "color-info-950",
 }
 
 export default class Typography extends React.Component<IProps, IState> {

src/front/Components/DesignSystem/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/classes.module.scss

@@ -5,7 +5,7 @@
 	align-items: center;
 	justify-content: space-between;
 	padding: 24px;
-	background-color: var(--grey-soft);
+	background-color: var(--color-neutral-50);
 	width: 100%;
 	gap: 32px;
 	.content {

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

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

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

@@ -21,7 +21,7 @@
 }
 
 .root {
-	border: 1px solid $grey;
+	border: 1px solid $color-neutral-500;
 	padding: 16px;
 	transition: all 350ms $custom-easing;
 

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

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

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

@@ -1,7 +1,7 @@
 @import "@Themes/constants.scss";
 
 .root {
-	background-color: $orange-flash;
+	background-color: $color-warning-500;
 	padding: 6px;
 	border-radius: 20px;
 }

src/front/Components/Elements/MessageBox/classes.module.scss

@@ -20,12 +20,12 @@
 	}
 
 	&.success {
-		border: 1px solid var(--green-flash);
+		border: 1px solid var(--color-success-600);
 		background: #12bf4d0d;
 	}
 
 	&.error {
-		border: 1px solid var(--red-soft);
+		border: 1px solid var(--color-error-600-soft);
 		background: #f087711a;
 	}
 }

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/LayoutTemplates/DefaultCollaboratorDashboard/CollaboratorListContainer/classes.module.scss

@@ -17,7 +17,7 @@
 	.folderlist-container {
 		max-height: calc(100vh - 215px);
 		height: 100%;
-		border-right: 1px solid var(--grey-medium);
+		border-right: 1px solid var(--color-neutral-200);
 		overflow: auto;
 	}
 }

src/front/Components/LayoutTemplates/DefaultCollaboratorDashboard/CollaboratorListContainer/index.tsx

@@ -59,7 +59,7 @@ export default function CollaboratorListContainer(props: IProps) {
 											height: "12px",
 											width: "12px",
 											borderRadius: "100px",
-											backgroundColor: "var(--green-flash)",
+											backgroundColor: "var(--color-success-600)",
 										}}
 									/>
 								) : (

src/front/Components/LayoutTemplates/DefaultCollaboratorDashboard/classes.module.scss

@@ -20,14 +20,14 @@
 			position: absolute;
 			width: 100%;
 			height: 100%;
-			background-color: var(--white);
+			background-color: var(--color-generic-white);
 			opacity: 0.5;
 			z-index: 2;
 			transition: all 0.3s $custom-easing;
 		}
 
 		.left-side {
-			background-color: $white;
+			background-color: $color-generic-white;
 			z-index: 3;
 			display: flex;
 			width: 389px;
@@ -60,14 +60,14 @@
 
 		.closable-left-side {
 			position: absolute;
-			background-color: $white;
+			background-color: $color-generic-white;
 			z-index: 0;
 			display: flex;
 			justify-content: center;
 			min-width: 56px;
 			max-width: 56px;
 			height: calc(100vh - 83px);
-			border-right: 1px $grey-medium solid;
+			border-right: 1px $color-neutral-200 solid;
 
 			@media (min-width: $screen-m) {
 				display: none;

src/front/Components/LayoutTemplates/DefaultDeedTypeDashboard/DeedTypeListContainer/classes.module.scss

@@ -20,7 +20,7 @@
 		max-height: calc(100vh - 290px);
 		height: calc(100vh - 290px);
 		overflow: auto;
-		border-right: 1px solid var(--grey-medium);
+		border-right: 1px solid var(--color-neutral-200);
 	}
 
 	.create-container {

src/front/Components/LayoutTemplates/DefaultDeedTypeDashboard/classes.module.scss

@@ -20,14 +20,14 @@
 			position: absolute;
 			width: 100%;
 			height: 100%;
-			background-color: var(--white);
+			background-color: var(--color-generic-white);
 			opacity: 0.5;
 			z-index: 2;
 			transition: all 0.3s $custom-easing;
 		}
 
 		.left-side {
-			background-color: $white;
+			background-color: $color-generic-white;
 			z-index: 3;
 			display: flex;
 			width: 389px;
@@ -60,14 +60,14 @@
 
 		.closable-left-side {
 			position: absolute;
-			background-color: $white;
+			background-color: $color-generic-white;
 			z-index: 0;
 			display: flex;
 			justify-content: center;
 			min-width: 56px;
 			max-width: 56px;
 			height: calc(100vh - 83px);
-			border-right: 1px $grey-medium solid;
+			border-right: 1px $color-neutral-200 solid;
 
 			@media (min-width: $screen-m) {
 				display: none;

src/front/Components/LayoutTemplates/DefaultDocumentTypesDashboard/DocumentTypeListContainer/classes.module.scss

@@ -18,7 +18,7 @@
 		max-height: calc(100vh - 290px);
 		height: calc(100vh - 290px);
 		overflow: auto;
-		border-right: 1px solid var(--grey-medium);
+		border-right: 1px solid var(--color-neutral-200);
 	}
 
 	.create-container {

src/front/Components/LayoutTemplates/DefaultDocumentTypesDashboard/classes.module.scss

@@ -20,14 +20,14 @@
 			position: absolute;
 			width: 100%;
 			height: 100%;
-			background-color: var(--white);
+			background-color: var(--color-generic-white);
 			opacity: 0.5;
 			z-index: 2;
 			transition: all 0.3s $custom-easing;
 		}
 
 		.left-side {
-			background-color: $white;
+			background-color: $color-generic-white;
 			z-index: 3;
 			display: flex;
 			width: 389px;
@@ -60,14 +60,14 @@
 
 		.closable-left-side {
 			position: absolute;
-			background-color: $white;
+			background-color: $color-generic-white;
 			z-index: 0;
 			display: flex;
 			justify-content: center;
 			min-width: 56px;
 			max-width: 56px;
 			height: calc(100vh - 83px);
-			border-right: 1px $grey-medium solid;
+			border-right: 1px $color-neutral-200 solid;
 
 			@media (min-width: $screen-m) {
 				display: none;

src/front/Components/LayoutTemplates/DefaultDoubleSidePage/classes.module.scss

@@ -30,7 +30,7 @@
 					display: none;
 				}
 
-				background: var(--grey-soft);
+				background: var(--color-neutral-50);
 
 				.image {
 					width: 100%;
@@ -56,4 +56,4 @@
 			}
 		}
 	}
-}
+}

src/front/Components/LayoutTemplates/DefaultNotaryDashboard/classes.module.scss

@@ -20,14 +20,14 @@
 			position: absolute;
 			width: 100%;
 			height: 100%;
-			background-color: var(--white);
+			background-color: var(--color-generic-white);
 			opacity: 0.5;
 			z-index: 2;
 			transition: all 0.3s $custom-easing;
 		}
 
 		.left-side {
-			background-color: $white;
+			background-color: $color-generic-white;
 			z-index: 3;
 			display: flex;
 			width: 389px;
@@ -60,14 +60,14 @@
 
 		.closable-left-side {
 			position: absolute;
-			background-color: $white;
+			background-color: $color-generic-white;
 			z-index: 0;
 			display: flex;
 			justify-content: center;
 			min-width: 56px;
 			max-width: 56px;
 			height: calc(100vh - 83px);
-			border-right: 1px $grey-medium solid;
+			border-right: 1px $color-neutral-200 solid;
 
 			@media (min-width: $screen-m) {
 				display: none;
@@ -88,18 +88,18 @@
 			min-width: calc(100vw - 389px);
 			padding: 64px 48px;
 			overflow-y: auto;
-			
+
 			@media (max-width: ($screen-m - 1px)) {
 				min-width: calc(100vw - 56px);
 			}
-			
+
-			@media(max-width: $screen-s){
+			@media (max-width: $screen-s) {
 				padding: 40px 16px 64px 16px;
 				flex: 1;
 				min-width: unset;
 			}
 
-			.back-arrow-mobile{
+			.back-arrow-mobile {
 				display: none;
 				@media (max-width: $screen-s) {
 					display: block;
@@ -107,7 +107,7 @@
 				}
 			}
 
-			.back-arrow-desktop{
+			.back-arrow-desktop {
 				@media (max-width: $screen-s) {
 					display: none;
 				}

src/front/Components/LayoutTemplates/DefaultOfficeDashboard/OfficeListContainer/classes.module.scss

@@ -18,6 +18,6 @@
 		max-height: 100vh;
 		height: 100vh;
 		overflow: auto;
-		border-right: 1px solid var(--grey-medium);
+		border-right: 1px solid var(--color-neutral-200);
 	}
 }

src/front/Components/LayoutTemplates/DefaultOfficeDashboard/classes.module.scss

@@ -20,14 +20,14 @@
 			position: absolute;
 			width: 100%;
 			height: 100%;
-			background-color: var(--white);
+			background-color: var(--color-generic-white);
 			opacity: 0.5;
 			z-index: 2;
 			transition: all 0.3s $custom-easing;
 		}
 
 		.left-side {
-			background-color: $white;
+			background-color: $color-generic-white;
 			z-index: 3;
 			display: flex;
 			width: 389px;
@@ -60,14 +60,14 @@
 
 		.closable-left-side {
 			position: absolute;
-			background-color: $white;
+			background-color: $color-generic-white;
 			z-index: 0;
 			display: flex;
 			justify-content: center;
 			min-width: 56px;
 			max-width: 56px;
 			height: calc(100vh - 83px);
-			border-right: 1px $grey-medium solid;
+			border-right: 1px $color-neutral-200 solid;
 
 			@media (min-width: $screen-m) {
 				display: none;

src/front/Components/LayoutTemplates/DefaultRoleDashboard/RoleListContainer/classes.module.scss

@@ -20,7 +20,7 @@
 		max-height: calc(100vh - 215px);
 		height: calc(100vh - 215px);
 		overflow: auto;
-		border-right: 1px solid var(--grey-medium);
+		border-right: 1px solid var(--color-neutral-200);
 	}
 
 	.create-container {

src/front/Components/LayoutTemplates/DefaultRoleDashboard/classes.module.scss

@@ -20,14 +20,14 @@
 			position: absolute;
 			width: 100%;
 			height: 100%;
-			background-color: var(--white);
+			background-color: var(--color-generic-white);
 			opacity: 0.5;
 			z-index: 2;
 			transition: all 0.3s $custom-easing;
 		}
 
 		.left-side {
-			background-color: $white;
+			background-color: $color-generic-white;
 			z-index: 3;
 			display: flex;
 			width: 389px;
@@ -60,14 +60,14 @@
 
 		.closable-left-side {
 			position: absolute;
-			background-color: $white;
+			background-color: $color-generic-white;
 			z-index: 0;
 			display: flex;
 			justify-content: center;
 			min-width: 56px;
 			max-width: 56px;
 			height: calc(100vh - 83px);
-			border-right: 1px $grey-medium solid;
+			border-right: 1px $color-neutral-200 solid;
 
 			@media (min-width: $screen-m) {
 				display: none;

src/front/Components/LayoutTemplates/DefaultUserDashboard/UserListContainer/classes.module.scss

@@ -18,6 +18,6 @@
 		max-height: 100vh;
 		height: 100vh;
 		overflow: auto;
-		border-right: 1px solid var(--grey-medium);
+		border-right: 1px solid var(--color-neutral-200);
 	}
 }

src/front/Components/LayoutTemplates/DefaultUserDashboard/classes.module.scss

@@ -20,14 +20,14 @@
 			position: absolute;
 			width: 100%;
 			height: 100%;
-			background-color: var(--white);
+			background-color: var(--color-generic-white);
 			opacity: 0.5;
 			z-index: 2;
 			transition: all 0.3s $custom-easing;
 		}
 
 		.left-side {
-			background-color: $white;
+			background-color: $color-generic-white;
 			z-index: 3;
 			display: flex;
 			width: 389px;
@@ -60,14 +60,14 @@
 
 		.closable-left-side {
 			position: absolute;
-			background-color: $white;
+			background-color: $color-generic-white;
 			z-index: 0;
 			display: flex;
 			justify-content: center;
 			min-width: 56px;
 			max-width: 56px;
 			height: calc(100vh - 83px);
-			border-right: 1px $grey-medium solid;
+			border-right: 1px $color-neutral-200 solid;
 
 			@media (min-width: $screen-m) {
 				display: none;

src/front/Components/Layouts/ClientDashboard/classes.module.scss

@@ -72,7 +72,7 @@
 	}
 
 	.sub-container {
-		background-color: var(--grey-soft);
+		background-color: var(--color-neutral-50);
 		padding: 64px;
 
 		.content {
@@ -113,7 +113,7 @@
 		}
 
 		.component-to-replace {
-			background-color: var(--grey-soft);
+			background-color: var(--color-neutral-50);
 			height: 98px;
 			width: 100%;
 		}

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

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