diff --git a/src/frontend/apps/lti_site/apps/classroom/components/SelectContent/SelectContentTab/index.tsx b/src/frontend/apps/lti_site/apps/classroom/components/SelectContent/SelectContentTab/index.tsx
index 5c60f66aa5..ac26862d77 100644
--- a/src/frontend/apps/lti_site/apps/classroom/components/SelectContent/SelectContentTab/index.tsx
+++ b/src/frontend/apps/lti_site/apps/classroom/components/SelectContent/SelectContentTab/index.tsx
@@ -1,5 +1,6 @@
 import { Tab } from 'grommet';
 import { useCreateClassroom } from 'lib-classroom';
+import { colorsTokens } from 'lib-common';
 import { ClassroomSVG } from 'lib-components';
 import React from 'react';
 import { useIntl } from 'react-intl';
@@ -76,7 +77,13 @@ const SelectContentTab = ({
     <Tab
       title={
         <RichTabTitle
-          icon={<ClassroomSVG width={30} height={30} iconColor="blue-active" />}
+          icon={
+            <ClassroomSVG
+              width={30}
+              height={30}
+              iconColor={colorsTokens['info-500']}
+            />
+          }
           label={intl.formatMessage(commonMessages.titleClassroom)}
         />
       }
diff --git a/src/frontend/apps/lti_site/apps/deposit/components/Dashboard/index.tsx b/src/frontend/apps/lti_site/apps/deposit/components/Dashboard/index.tsx
index 5e4e9ff1ea..efbf912f2a 100644
--- a/src/frontend/apps/lti_site/apps/deposit/components/Dashboard/index.tsx
+++ b/src/frontend/apps/lti_site/apps/deposit/components/Dashboard/index.tsx
@@ -1,7 +1,6 @@
 import { Loader } from '@openfun/cunningham-react';
 import { ThemeContext, ThemeType } from 'grommet';
-import { normalizeColor } from 'grommet/utils';
-import { theme } from 'lib-common';
+import { colorsTokens } from 'lib-common';
 import { Box, UploadManager, useCurrentResourceContext } from 'lib-components';
 import React, { Fragment } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
@@ -41,7 +40,7 @@ const extendedTheme: ThemeType = {
     font: {
       family: 'Roboto-Bold',
     },
-    color: 'blue-active',
+    color: colorsTokens['info-500'],
     level: {
       1: {
         medium: {
@@ -54,14 +53,14 @@ const extendedTheme: ThemeType = {
     primary: {},
   },
   text: {
-    extend: `color: ${normalizeColor('blue-active', theme)};`,
+    extend: `color: ${colorsTokens['info-500']};`,
   },
   paragraph: {
-    extend: `color: ${normalizeColor('blue-active', theme)};`,
+    extend: `color: ${colorsTokens['info-500']};`,
   },
   pagination: {
     button: {
-      extend: `color: ${normalizeColor('blue-active', theme)};`,
+      extend: `color: ${colorsTokens['info-500']};`,
     },
   },
 };
diff --git a/src/frontend/apps/lti_site/apps/deposit/components/SelectContent/SelectContentTab/index.tsx b/src/frontend/apps/lti_site/apps/deposit/components/SelectContent/SelectContentTab/index.tsx
index 2773567f19..2004a6cacf 100644
--- a/src/frontend/apps/lti_site/apps/deposit/components/SelectContent/SelectContentTab/index.tsx
+++ b/src/frontend/apps/lti_site/apps/deposit/components/SelectContent/SelectContentTab/index.tsx
@@ -1,5 +1,6 @@
 import { Tab } from 'grommet';
 import { DocumentStore } from 'grommet-icons';
+import { colorsTokens } from 'lib-common';
 import React from 'react';
 import { useIntl } from 'react-intl';
 
@@ -78,7 +79,11 @@ const SelectContentTab = ({
       title={
         <RichTabTitle
           icon={
-            <DocumentStore a11yTitle="" size="medium" color="blue-active" />
+            <DocumentStore
+              a11yTitle=""
+              size="medium"
+              color={colorsTokens['info-500']}
+            />
           }
           label={intl.formatMessage(commonMessages.titleDeposit)}
         />
diff --git a/src/frontend/apps/lti_site/apps/markdown/components/SelectContent/SelectContentTab/index.tsx b/src/frontend/apps/lti_site/apps/markdown/components/SelectContent/SelectContentTab/index.tsx
index a98b0ace6b..ef48c61d57 100644
--- a/src/frontend/apps/lti_site/apps/markdown/components/SelectContent/SelectContentTab/index.tsx
+++ b/src/frontend/apps/lti_site/apps/markdown/components/SelectContent/SelectContentTab/index.tsx
@@ -1,5 +1,6 @@
 import { Tab } from 'grommet';
 import { TextWrap } from 'grommet-icons';
+import { colorsTokens } from 'lib-common';
 import { useCreateMarkdownDocument } from 'lib-markdown';
 import React from 'react';
 import { useIntl } from 'react-intl';
@@ -78,7 +79,13 @@ const SelectContentTab = ({
     <Tab
       title={
         <RichTabTitle
-          icon={<TextWrap a11yTitle="" size="medium" color="blue-active" />}
+          icon={
+            <TextWrap
+              a11yTitle=""
+              size="medium"
+              color={colorsTokens['info-500']}
+            />
+          }
           label={intl.formatMessage(commonMessages.titleMarkdown)}
         />
       }
diff --git a/src/frontend/apps/lti_site/components/PlaylistPortability/index.tsx b/src/frontend/apps/lti_site/components/PlaylistPortability/index.tsx
index ec0e16fed7..238ff0f9a1 100644
--- a/src/frontend/apps/lti_site/components/PlaylistPortability/index.tsx
+++ b/src/frontend/apps/lti_site/components/PlaylistPortability/index.tsx
@@ -1,5 +1,6 @@
 import { Button, Input, Loader } from '@openfun/cunningham-react';
 import { AddCircle, Trash } from 'grommet-icons';
+import { colorsTokens } from 'lib-common';
 import {
   Box,
   BoxError,
@@ -240,7 +241,7 @@ export const PlaylistPortability = ({ object }: PlaylistPortabilityProps) => {
                 <AddCircle
                   aria-label={intl.formatMessage(messages.addPortability)}
                   onClick={addPlaylistPortability}
-                  color="blue-active"
+                  color={colorsTokens['info-500']}
                   style={{ cursor: 'pointer' }}
                   role="button"
                 />
diff --git a/src/frontend/apps/lti_site/components/SelectContent/SelectContentTabs/index.tsx b/src/frontend/apps/lti_site/components/SelectContent/SelectContentTabs/index.tsx
index cb3de7ebf3..d34c84c0ab 100644
--- a/src/frontend/apps/lti_site/components/SelectContent/SelectContentTabs/index.tsx
+++ b/src/frontend/apps/lti_site/components/SelectContent/SelectContentTabs/index.tsx
@@ -1,7 +1,7 @@
 import { Grommet, Tab, Tabs } from 'grommet';
 import { deepMerge } from 'grommet/utils';
 import { Document as DocumentIcon } from 'grommet-icons';
-import { theme as baseTheme } from 'lib-common';
+import { theme as baseTheme, colorsTokens } from 'lib-common';
 import {
   Box,
   BoxLoader,
@@ -33,10 +33,10 @@ const customTheme = deepMerge(baseTheme, {
   tab: {
     active: {
       background: 'bg-menu-hover',
-      color: 'blue-active',
+      color: colorsTokens['info-500'],
     },
     border: undefined,
-    color: 'blue-active',
+    color: colorsTokens['info-500'],
     margin: 'none',
     pad: '6px 12px',
     extend: 'border-radius: 6px;',
@@ -157,7 +157,11 @@ export const SelectContentTabs = ({
             title={
               <RichTabTitle
                 icon={
-                  <WebinarSVG width={30} height={30} iconColor="blue-active" />
+                  <WebinarSVG
+                    width={30}
+                    height={30}
+                    iconColor={colorsTokens['info-500']}
+                  />
                 }
                 label={intl.formatMessage(commonMessages.titleWebinar)}
               />
@@ -185,7 +189,11 @@ export const SelectContentTabs = ({
             title={
               <RichTabTitle
                 icon={
-                  <PlaySVG width={30} height={30} iconColor="blue-active" />
+                  <PlaySVG
+                    width={30}
+                    height={30}
+                    iconColor={colorsTokens['info-500']}
+                  />
                 }
                 label={intl.formatMessage(commonMessages.titleVideo)}
               />
@@ -216,7 +224,7 @@ export const SelectContentTabs = ({
                   <DocumentIcon
                     a11yTitle=""
                     size="medium"
-                    color="blue-active"
+                    color={colorsTokens['info-500']}
                   />
                 }
                 label={intl.formatMessage(commonMessages.titleDocument)}
diff --git a/src/frontend/apps/lti_site/components/UploadableObjectStatusBadge/index.tsx b/src/frontend/apps/lti_site/components/UploadableObjectStatusBadge/index.tsx
index b3d8b0e903..a2338c6f35 100644
--- a/src/frontend/apps/lti_site/components/UploadableObjectStatusBadge/index.tsx
+++ b/src/frontend/apps/lti_site/components/UploadableObjectStatusBadge/index.tsx
@@ -1,5 +1,5 @@
 import { normalizeColor } from 'grommet/utils';
-import { theme } from 'lib-common';
+import { colorsTokens, theme } from 'lib-common';
 import {
   UploadManagerStatus,
   UploadableObject,
@@ -81,14 +81,14 @@ export const UploadableObjectStatusBadge = ({
     case uploadState.DELETED:
     case uploadState.PROCESSING:
       return (
-        <Badge role="status" background="brand">
+        <Badge role="status" background={colorsTokens['info-300']}>
           <FormattedMessage {...messages[object.upload_state]} />
         </Badge>
       );
 
     case uploadState.ERROR:
       return (
-        <Badge role="status" background="status-error">
+        <Badge role="status" background={colorsTokens['danger-400']}>
           <FormattedMessage {...messages[uploadState.ERROR]} />
         </Badge>
       );
@@ -98,7 +98,7 @@ export const UploadableObjectStatusBadge = ({
         case UploadManagerStatus.INIT:
         case UploadManagerStatus.UPLOADING:
           return (
-            <Badge role="status" background="brand">
+            <Badge role="status" background={colorsTokens['info-300']}>
               <FormattedMessage {...messages.uploading} />
             </Badge>
           );
@@ -106,21 +106,21 @@ export const UploadableObjectStatusBadge = ({
         case UploadManagerStatus.ERR_POLICY:
         case UploadManagerStatus.ERR_UPLOAD:
           return (
-            <Badge role="status" background="status-error">
+            <Badge role="status" background={colorsTokens['danger-400']}>
               <FormattedMessage {...messages[uploadState.ERROR]} />
             </Badge>
           );
 
         case UploadManagerStatus.ERR_SIZE:
           return (
-            <Badge role="status" background="status-error">
+            <Badge role="status" background={colorsTokens['danger-400']}>
               <FormattedMessage {...messages[uploadState.ERROR]} />
             </Badge>
           );
 
         case UploadManagerStatus.SUCCESS:
           return (
-            <Badge role="status" background="brand">
+            <Badge role="status" background={colorsTokens['info-300']}>
               <FormattedMessage {...messages[uploadState.PROCESSING]} />
             </Badge>
           );
diff --git a/src/frontend/apps/standalone_site/src/features/Authentication/components/RenaterAuthenticator.tsx b/src/frontend/apps/standalone_site/src/features/Authentication/components/RenaterAuthenticator.tsx
index 558419fb94..205d0c4342 100644
--- a/src/frontend/apps/standalone_site/src/features/Authentication/components/RenaterAuthenticator.tsx
+++ b/src/frontend/apps/standalone_site/src/features/Authentication/components/RenaterAuthenticator.tsx
@@ -104,7 +104,7 @@ export const RenaterAuthenticator = () => {
               )}
             </Fragment>
           }
-          background="status-error"
+          background={colorsTokens['danger-400']}
           width="full"
           margin={{ bottom: 'small' }}
         />
@@ -116,7 +116,7 @@ export const RenaterAuthenticator = () => {
         align="center"
         gap="small"
       >
-        <Box background="blue-active" height="1px" width="100%" />
+        <Box background={colorsTokens['info-500']} height="1px" width="100%" />
         <Box width="100%">
           <Text
             size={isSmallerBreakpoint(breakpoint, 'small') ? 'tiny' : 'small'}
@@ -126,7 +126,7 @@ export const RenaterAuthenticator = () => {
             {intl.formatMessage(messages.textConnectWith)}
           </Text>
         </Box>
-        <Box background="blue-active" height="1px" width="100%" />
+        <Box background={colorsTokens['info-500']} height="1px" width="100%" />
       </Box>
       <ThemeContext.Extend value={{ select: { step: options.length || 20 } }}>
         <FormField label={intl.formatMessage(messages.labelSelectRenater)}>
diff --git a/src/frontend/apps/standalone_site/src/features/Contents/components/ContentsFilter/ContentsFilter.tsx b/src/frontend/apps/standalone_site/src/features/Contents/components/ContentsFilter/ContentsFilter.tsx
index 4141e0a496..cabb5f5e11 100644
--- a/src/frontend/apps/standalone_site/src/features/Contents/components/ContentsFilter/ContentsFilter.tsx
+++ b/src/frontend/apps/standalone_site/src/features/Contents/components/ContentsFilter/ContentsFilter.tsx
@@ -1,5 +1,5 @@
 import { Filter } from 'grommet-icons';
-import { Breakpoints } from 'lib-common';
+import { Breakpoints, colorsTokens } from 'lib-common';
 import { Badge, Box, Playlist, Text, useResponsive } from 'lib-components';
 import { Fragment, useEffect, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
@@ -127,7 +127,7 @@ const ContentsFilter = ({ setFilter, filter }: ContentsFilterProps) => {
         }}
       >
         <Text>
-          <Filter color="blue-active" size="20px" />
+          <Filter color={colorsTokens['info-500']} size="20px" />
           {intl.formatMessage(messages.labelFilter)}
         </Text>
         {badgeCounter > 0 && (
diff --git a/src/frontend/apps/standalone_site/src/features/Contents/features/ClassRoom/components/Read/ClassRoomItem.tsx b/src/frontend/apps/standalone_site/src/features/Contents/features/ClassRoom/components/Read/ClassRoomItem.tsx
index 617cf79921..d298377dce 100644
--- a/src/frontend/apps/standalone_site/src/features/Contents/features/ClassRoom/components/Read/ClassRoomItem.tsx
+++ b/src/frontend/apps/standalone_site/src/features/Contents/features/ClassRoom/components/Read/ClassRoomItem.tsx
@@ -1,5 +1,6 @@
 import { Checkbox } from '@openfun/cunningham-react';
 import { FormSchedule, InProgress } from 'grommet-icons';
+import { colorsTokens } from 'lib-common';
 import {
   Box,
   ClassroomLite,
@@ -83,7 +84,7 @@ const ClassRoom = ({ classroom }: { classroom: ClassroomLite }) => {
           <Fragment>
             {classroom.starting_at && (
               <Box gap="small" align="center" direction="row">
-                <FormSchedule size="medium" color="blue-active" />
+                <FormSchedule size="medium" color={colorsTokens['info-500']} />
                 <Text size="tiny" weight="bold">
                   {localDate(classroom.starting_at, intl.locale)}
                 </Text>
@@ -91,14 +92,21 @@ const ClassRoom = ({ classroom }: { classroom: ClassroomLite }) => {
             )}
             {classroom.estimated_duration && (
               <Box gap="small" align="center" direction="row">
-                <InProgress color="blue-active" style={{ height: '20px' }} />
+                <InProgress
+                  color={colorsTokens['info-500']}
+                  style={{ height: '20px' }}
+                />
                 <Text size="tiny" weight="bold">
                   {classroom.estimated_duration}
                 </Text>
               </Box>
             )}
             <Box gap="small" align="center" direction="row">
-              <VueListIcon width={20} height={20} color="blue-active" />
+              <VueListIcon
+                width={20}
+                height={20}
+                color={colorsTokens['info-500']}
+              />
               <Text size="tiny" weight="bold">
                 {classroom.playlist.title}
               </Text>
diff --git a/src/frontend/apps/standalone_site/src/features/Contents/features/Live/components/Read/Live.tsx b/src/frontend/apps/standalone_site/src/features/Contents/features/Live/components/Read/Live.tsx
index 33e4c6c3e8..d2bb2274b0 100644
--- a/src/frontend/apps/standalone_site/src/features/Contents/features/Live/components/Read/Live.tsx
+++ b/src/frontend/apps/standalone_site/src/features/Contents/features/Live/components/Read/Live.tsx
@@ -1,4 +1,5 @@
 import { Checkbox } from '@openfun/cunningham-react';
+import { colorsTokens } from 'lib-common';
 import { Box, ContentCard, StyledLink, Text, Video } from 'lib-components';
 import { useEffect, useState } from 'react';
 
@@ -69,7 +70,11 @@ const Live = ({ live }: { live: Video }) => {
         }
         footer={
           <Box gap="small" align="center" direction="row">
-            <VueListIcon width={20} height={20} color="blue-active" />
+            <VueListIcon
+              width={20}
+              height={20}
+              color={colorsTokens['info-500']}
+            />
             <Text size="tiny" weight="bold">
               {live.playlist.title}
             </Text>
diff --git a/src/frontend/apps/standalone_site/src/features/Contents/features/Video/components/Read/Video.tsx b/src/frontend/apps/standalone_site/src/features/Contents/features/Video/components/Read/Video.tsx
index 1804b6b576..7e493e3589 100644
--- a/src/frontend/apps/standalone_site/src/features/Contents/features/Video/components/Read/Video.tsx
+++ b/src/frontend/apps/standalone_site/src/features/Contents/features/Video/components/Read/Video.tsx
@@ -1,4 +1,5 @@
 import { Checkbox } from '@openfun/cunningham-react';
+import { colorsTokens } from 'lib-common';
 import {
   Box,
   ContentCard,
@@ -76,7 +77,11 @@ const Video = ({ video }: { video: IVideo }) => {
         }
         footer={
           <Box gap="small" align="center" direction="row">
-            <VueListIcon width={20} height={20} color="blue-active" />
+            <VueListIcon
+              width={20}
+              height={20}
+              color={colorsTokens['info-500']}
+            />
             <Text size="tiny" weight="bold">
               {video.playlist.title}
             </Text>
diff --git a/src/frontend/apps/standalone_site/src/features/Header/Header.tsx b/src/frontend/apps/standalone_site/src/features/Header/Header.tsx
index 9e94806aa9..ba85110333 100644
--- a/src/frontend/apps/standalone_site/src/features/Header/Header.tsx
+++ b/src/frontend/apps/standalone_site/src/features/Header/Header.tsx
@@ -1,7 +1,6 @@
 import { Button } from '@openfun/cunningham-react';
 import { DropButton } from 'grommet';
-import { normalizeColor } from 'grommet/utils';
-import { Breakpoints, Nullable, theme } from 'lib-common';
+import { Breakpoints, Nullable, colorsTokens } from 'lib-common';
 import {
   AnonymousUser,
   Box,
@@ -24,7 +23,7 @@ import { LanguagePicker } from 'features/Language/';
 import { Burger } from 'features/Menu';
 import { routes } from 'routes/routes';
 
-const colorMenu = normalizeColor('blue-active', theme);
+const colorMenu = colorsTokens['info-500'];
 
 interface PropsExtended {
   $isScrollTop: boolean;
@@ -42,7 +41,7 @@ const HeaderBox = styled(Box)<PropsExtended>`
         background: #fff;                                                                     
         box-shadow: 1px 1px 20px #cce4f3;
       `}
-  z-index: 11;
+  z-index: 20;
   height: auto;
 `;
 
@@ -221,7 +220,7 @@ const Header = forwardRef<Nullable<HTMLDivElement>>((_props, ref) => {
           dropProps={{
             round: 'xsmall',
             border: {
-              color: 'blue-active',
+              color: colorsTokens['info-500'],
               size: '2px',
             },
             style: {
diff --git a/src/frontend/apps/standalone_site/src/features/Header/HeaderLight.tsx b/src/frontend/apps/standalone_site/src/features/Header/HeaderLight.tsx
index 0a449de4c5..d26c2b13ba 100644
--- a/src/frontend/apps/standalone_site/src/features/Header/HeaderLight.tsx
+++ b/src/frontend/apps/standalone_site/src/features/Header/HeaderLight.tsx
@@ -1,6 +1,6 @@
 import { Image } from 'grommet';
 import { normalizeColor } from 'grommet/utils';
-import { Nullable, theme } from 'lib-common';
+import { Nullable, colorsTokens, theme } from 'lib-common';
 import { Box, useSiteConfig } from 'lib-components';
 import { forwardRef } from 'react';
 import { Link } from 'react-router-dom';
@@ -63,7 +63,7 @@ export const HeaderLight = forwardRef<
       ref={ref}
       role="menubar"
       pad="small"
-      background={bgcolor || 'bg-marsha'}
+      background={bgcolor || colorsTokens['primary-100']}
     >
       {Logo}
     </Box>
diff --git a/src/frontend/apps/standalone_site/src/features/Menu/components/Menu.tsx b/src/frontend/apps/standalone_site/src/features/Menu/components/Menu.tsx
index a2087c9d60..2d8cd4584f 100644
--- a/src/frontend/apps/standalone_site/src/features/Menu/components/Menu.tsx
+++ b/src/frontend/apps/standalone_site/src/features/Menu/components/Menu.tsx
@@ -1,5 +1,4 @@
-import { normalizeColor } from 'grommet/utils';
-import { theme } from 'lib-common';
+import { colorsTokens } from 'lib-common';
 import { Box, Text, useResponsive } from 'lib-components';
 import { defineMessages, useIntl } from 'react-intl';
 import styled from 'styled-components';
@@ -18,7 +17,7 @@ const messages = defineMessages({
   },
 });
 
-const colorMenu = normalizeColor('blue-active', theme);
+const colorMenu = colorsTokens['info-500'];
 const sizeMenu = '18.75rem';
 
 interface PropsExtended {
diff --git a/src/frontend/apps/standalone_site/src/features/Menu/components/MenuItem.tsx b/src/frontend/apps/standalone_site/src/features/Menu/components/MenuItem.tsx
index 289a3f42f4..13e3f30a07 100644
--- a/src/frontend/apps/standalone_site/src/features/Menu/components/MenuItem.tsx
+++ b/src/frontend/apps/standalone_site/src/features/Menu/components/MenuItem.tsx
@@ -9,7 +9,7 @@ import { Route } from 'routes';
 
 const NavLinkStyled = styled(NavLink)`
   text-decoration: none;
-  color: ${normalizeColor('blue-active', theme)};
+  color: ${colorsTokens['info-500']};
   display: flex;
   gap: 1rem;
   align-items: center;
diff --git a/src/frontend/apps/standalone_site/src/features/PagesApi/components/PagesApi.tsx b/src/frontend/apps/standalone_site/src/features/PagesApi/components/PagesApi.tsx
index ae292cc3c5..fcaae59bcc 100644
--- a/src/frontend/apps/standalone_site/src/features/PagesApi/components/PagesApi.tsx
+++ b/src/frontend/apps/standalone_site/src/features/PagesApi/components/PagesApi.tsx
@@ -1,5 +1,4 @@
-import { normalizeColor } from 'grommet/utils';
-import { sizesTokens, theme } from 'lib-common';
+import { colorsTokens, sizesTokens } from 'lib-common';
 import { Box, BoxLoader, Heading } from 'lib-components';
 import ReactMarkdown from 'react-markdown';
 import { useLocation } from 'react-router-dom';
@@ -12,7 +11,7 @@ const BoxMarkdown = styled(Box)`
     color: #000;
   }
   & a {
-    color: ${normalizeColor('blue-active', theme)};
+    color: ${colorsTokens['info-500']};
   }
   box-shadow: inset rgba(2, 117, 180, 0.3) 1px 1px 6px 0px;
   & h1 {
diff --git a/src/frontend/apps/standalone_site/src/features/Playlist/features/UpdatePlaylist/components/UserListRow.tsx b/src/frontend/apps/standalone_site/src/features/Playlist/features/UpdatePlaylist/components/UserListRow.tsx
index 08a7ec9958..e9382f467f 100644
--- a/src/frontend/apps/standalone_site/src/features/Playlist/features/UpdatePlaylist/components/UserListRow.tsx
+++ b/src/frontend/apps/standalone_site/src/features/Playlist/features/UpdatePlaylist/components/UserListRow.tsx
@@ -1,4 +1,5 @@
 import { Button, Select } from '@openfun/cunningham-react';
+import { colorsTokens } from 'lib-common';
 import {
   AnonymousUser,
   BinSVG,
@@ -191,7 +192,7 @@ export const UserDeleteColumn = ({
         aria-label={intl.formatMessage(messages.deleteUserLabel)}
         icon={
           <BinSVG
-            iconColor={userId === idUser ? 'grey' : 'blue-active'}
+            iconColor={userId === idUser ? 'grey' : colorsTokens['info-500']}
             width="18px"
             height="18px"
           />
diff --git a/src/frontend/apps/standalone_site/src/features/PortabilityRequests/components/PortabilityRequestStateTag.tsx b/src/frontend/apps/standalone_site/src/features/PortabilityRequests/components/PortabilityRequestStateTag.tsx
index bbb007bf99..dca3bd3157 100644
--- a/src/frontend/apps/standalone_site/src/features/PortabilityRequests/components/PortabilityRequestStateTag.tsx
+++ b/src/frontend/apps/standalone_site/src/features/PortabilityRequests/components/PortabilityRequestStateTag.tsx
@@ -1,13 +1,13 @@
 import { Tag } from 'grommet';
 import { normalizeColor } from 'grommet/utils';
-import { theme } from 'lib-common';
+import { colorsTokens, theme } from 'lib-common';
 import { PortabilityRequestState } from 'lib-components';
 import { defineMessages, useIntl } from 'react-intl';
 import styled from 'styled-components';
 
 const NeutralStyledTag = styled(Tag)`
-  color: ${normalizeColor('blue-active', theme)};
-  border-color: ${normalizeColor('blue-active', theme)};
+  color: ${colorsTokens['info-500']};
+  border-color: ${colorsTokens['info-500']};
   width: fit-content;
   & > div {
     width: 100%;
@@ -24,8 +24,8 @@ const StatusOkStyledTag = styled(Tag)`
 `;
 
 const StatusErrorStyledTag = styled(Tag)`
-  color: ${normalizeColor('status-error', theme)};
-  border-color: ${normalizeColor('status-error', theme)};
+  color: ${colorsTokens['danger-400']};
+  border-color: ${colorsTokens['danger-400']};
   width: fit-content;
   & > div {
     width: 100%;
diff --git a/src/frontend/apps/standalone_site/src/styles/theme.extend.ts b/src/frontend/apps/standalone_site/src/styles/theme.extend.ts
index 9a48d33d2c..110ef49dc5 100644
--- a/src/frontend/apps/standalone_site/src/styles/theme.extend.ts
+++ b/src/frontend/apps/standalone_site/src/styles/theme.extend.ts
@@ -1,5 +1,5 @@
 import { deepMerge } from 'grommet/utils';
-import { theme } from 'lib-common';
+import { colorsTokens, theme } from 'lib-common';
 import { css } from 'styled-components';
 
 export const themeExtend = {
@@ -9,7 +9,7 @@ export const themeExtend = {
   global: {
     colors: {
       text: {
-        light: 'blue-active',
+        light: colorsTokens['info-500'],
       },
     },
     elevation: {
diff --git a/src/frontend/packages/lib_classroom/src/components/ClassroomInfoBar/index.tsx b/src/frontend/packages/lib_classroom/src/components/ClassroomInfoBar/index.tsx
index 634e649f21..8413f5181f 100644
--- a/src/frontend/packages/lib_classroom/src/components/ClassroomInfoBar/index.tsx
+++ b/src/frontend/packages/lib_classroom/src/components/ClassroomInfoBar/index.tsx
@@ -1,6 +1,5 @@
 import { Input } from '@openfun/cunningham-react';
-import { normalizeColor } from 'grommet/utils';
-import { theme } from 'lib-common';
+import { colorsTokens } from 'lib-common';
 import { Box, BoxProps, EditionSVG, report } from 'lib-components';
 import { useCallback, useEffect, useState } from 'react';
 import toast from 'react-hot-toast';
@@ -108,8 +107,7 @@ export const ClassroomInfoBar = (props: BoxProps<'div'>) => {
         <Input
           icon={
             <EditionSVG
-              iconColor={normalizeColor('blue-chat', theme)}
-              width="25px"
+              iconColor={colorsTokens['info-500']}
               height="25px"
               containerStyle={{ margin: 'auto' }}
             />
diff --git a/src/frontend/packages/lib_classroom/src/components/ClassroomWidgetProvider/widgets/Recordings/Recording/DeleteClassroomRecordingButton/index.tsx b/src/frontend/packages/lib_classroom/src/components/ClassroomWidgetProvider/widgets/Recordings/Recording/DeleteClassroomRecordingButton/index.tsx
index e8b8ab4ad3..a6938145fc 100644
--- a/src/frontend/packages/lib_classroom/src/components/ClassroomWidgetProvider/widgets/Recordings/Recording/DeleteClassroomRecordingButton/index.tsx
+++ b/src/frontend/packages/lib_classroom/src/components/ClassroomWidgetProvider/widgets/Recordings/Recording/DeleteClassroomRecordingButton/index.tsx
@@ -1,3 +1,4 @@
+import { colorsTokens } from 'lib-common';
 import {
   BinSVG,
   ButtonLoader,
@@ -103,7 +104,11 @@ export const DeleteClassroomRecordingButton = ({
         isSubmitting={deleteClassroomRecording.isLoading}
         color="tertiary"
       >
-        <BinSVG height="18px" iconColor="blue-active" width="14px" />
+        <BinSVG
+          height="18px"
+          iconColor={colorsTokens['info-500']}
+          width="14px"
+        />
       </ButtonLoader>
     </div>
   );
diff --git a/src/frontend/packages/lib_classroom/src/components/ClassroomWidgetProvider/widgets/SupportSharing/UploadDocuments/DocumentRow/index.tsx b/src/frontend/packages/lib_classroom/src/components/ClassroomWidgetProvider/widgets/SupportSharing/UploadDocuments/DocumentRow/index.tsx
index b0e27c1a13..6c16b271c9 100644
--- a/src/frontend/packages/lib_classroom/src/components/ClassroomWidgetProvider/widgets/SupportSharing/UploadDocuments/DocumentRow/index.tsx
+++ b/src/frontend/packages/lib_classroom/src/components/ClassroomWidgetProvider/widgets/SupportSharing/UploadDocuments/DocumentRow/index.tsx
@@ -1,5 +1,6 @@
 import { Button } from '@openfun/cunningham-react';
 import { Anchor } from 'grommet';
+import { colorsTokens } from 'lib-common';
 import {
   BinSVG,
   Box,
@@ -128,7 +129,13 @@ export const DocumentRow = ({
           aria-label={intl.formatMessage(messages.buttonLabel)}
           onClick={() => setDeleteDocument()}
           style={{ display: 'flex' }}
-          icon={<BinSVG height="18px" iconColor="blue-active" width="14px" />}
+          icon={
+            <BinSVG
+              height="18px"
+              iconColor={colorsTokens['info-500']}
+              width="14px"
+            />
+          }
           color="tertiary"
         />
       </Box>
@@ -167,7 +174,9 @@ export const DocumentRow = ({
             }
             icon={
               <ValidSVG
-                iconColor={document.is_default ? 'brand' : 'light-5'}
+                iconColor={
+                  document.is_default ? colorsTokens['info-300'] : 'light-5'
+                }
                 height="20px"
                 width="20px"
               />
diff --git a/src/frontend/packages/lib_classroom/src/components/DashboardClassroomForm/index.tsx b/src/frontend/packages/lib_classroom/src/components/DashboardClassroomForm/index.tsx
index 2545090e56..d79182bf50 100644
--- a/src/frontend/packages/lib_classroom/src/components/DashboardClassroomForm/index.tsx
+++ b/src/frontend/packages/lib_classroom/src/components/DashboardClassroomForm/index.tsx
@@ -53,7 +53,7 @@ const DashboardClassroomForm = ({ classroom }: DashboardClassroomFormProps) => {
       },
     },
     tab: {
-      extend: ` color:${normalizeColor('blue-active', theme)};\
+      extend: ` color:${colorsTokens['info-500']};\
         font-family: 'Roboto-Bold';\
         height: 21px;\
         letter-spacing: -0.36px;\
@@ -84,7 +84,7 @@ const DashboardClassroomForm = ({ classroom }: DashboardClassroomFormProps) => {
 
   return (
     <CurrentClassroomProvider value={classroom}>
-      <Box background={colorsTokens.main} fill>
+      <Box background={colorsTokens['primary-100']} fill>
         <StyledClassroomInformationBarWrapper
           align="center"
           background="white"
diff --git a/src/frontend/packages/lib_classroom/src/components/DashboardClassroomStudent/index.tsx b/src/frontend/packages/lib_classroom/src/components/DashboardClassroomStudent/index.tsx
index 7fde2b67de..151cf57e72 100644
--- a/src/frontend/packages/lib_classroom/src/components/DashboardClassroomStudent/index.tsx
+++ b/src/frontend/packages/lib_classroom/src/components/DashboardClassroomStudent/index.tsx
@@ -226,7 +226,7 @@ const DashboardClassroomStudent = ({
             <ICalendarLinkStyled event={scheduledEvent}>
               <Schedule
                 a11yTitle={intl.formatMessage(messages.a11AddCalendar)}
-                color="blue-active"
+                color={colorsTokens['info-500']}
               />
               <Text className="pl-s">
                 {intl.formatMessage(messages.addCalendar)}
diff --git a/src/frontend/packages/lib_components/src/common/Card/WhiteCard/index.tsx b/src/frontend/packages/lib_components/src/common/Card/WhiteCard/index.tsx
index 52d557ed63..45e96748fd 100644
--- a/src/frontend/packages/lib_components/src/common/Card/WhiteCard/index.tsx
+++ b/src/frontend/packages/lib_components/src/common/Card/WhiteCard/index.tsx
@@ -17,7 +17,7 @@ export const WhiteCard = ({
 
   return (
     <Box
-      background={colorsTokens['main']}
+      background={colorsTokens['primary-100']}
       margin={{ left: isDesktop ? 'auto' : undefined }}
       basis={isDesktop ? '50%' : '100%'}
       justify="center"
diff --git a/src/frontend/packages/lib_components/src/common/CopyClipboard/index.tsx b/src/frontend/packages/lib_components/src/common/CopyClipboard/index.tsx
index e9f86aa3ed..1e2af89e19 100644
--- a/src/frontend/packages/lib_components/src/common/CopyClipboard/index.tsx
+++ b/src/frontend/packages/lib_components/src/common/CopyClipboard/index.tsx
@@ -1,5 +1,6 @@
 import { Button } from '@openfun/cunningham-react';
 import ClipboardJS from 'clipboard';
+import { colorsTokens } from 'lib-common';
 import React, { ReactElement, useEffect } from 'react';
 
 import { DashedBoxCustom } from '@lib-components/common/DashedBoxCustom';
@@ -62,7 +63,11 @@ export const CopyClipboard = ({
           title={title}
           color="tertiary"
         >
-          <CopySVG iconColor="blue-active" width="20px" height="25px" />
+          <CopySVG
+            iconColor={colorsTokens['info-500']}
+            width="20px"
+            height="25px"
+          />
         </Button>
       </DashedBoxCustom>
     </Box>
diff --git a/src/frontend/packages/lib_components/src/common/FoldableItem/index.tsx b/src/frontend/packages/lib_components/src/common/FoldableItem/index.tsx
index d50384e9f9..641c07fe24 100644
--- a/src/frontend/packages/lib_components/src/common/FoldableItem/index.tsx
+++ b/src/frontend/packages/lib_components/src/common/FoldableItem/index.tsx
@@ -1,4 +1,5 @@
 import { Collapsible } from 'grommet';
+import { colorsTokens } from 'lib-common';
 import React, { useRef, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
@@ -57,7 +58,7 @@ export const FoldableItem = ({
         <InfoCircleSVG
           height="17px"
           width="17px"
-          iconColor="blue-active"
+          iconColor={colorsTokens['info-500']}
           onClick={() => {
             if (!infoText) {
               //  this should not happen since button is disabled
@@ -84,7 +85,7 @@ export const FoldableItem = ({
                 transform: open ? undefined : 'rotate(-90deg)',
                 transition: '150ms linear all',
               }}
-              iconColor="blue-active"
+              iconColor={colorsTokens['info-500']}
               height="9px"
               width="14.5px"
             />
diff --git a/src/frontend/packages/lib_components/src/common/Modal/Modal.tsx b/src/frontend/packages/lib_components/src/common/Modal/Modal.tsx
index 59c9ebcdd3..3cee06711e 100644
--- a/src/frontend/packages/lib_components/src/common/Modal/Modal.tsx
+++ b/src/frontend/packages/lib_components/src/common/Modal/Modal.tsx
@@ -1,7 +1,6 @@
 import { Layer, LayerProps } from 'grommet';
-import { normalizeColor } from 'grommet/utils';
 import { FormClose } from 'grommet-icons';
-import { Nullable, theme } from 'lib-common';
+import { Nullable, colorsTokens } from 'lib-common';
 import {
   MutableRefObject,
   PropsWithChildren,
@@ -26,7 +25,7 @@ const messages = defineMessages({
 });
 
 const FormCloseIcon = styled(FormClose)`
-  background-color: ${normalizeColor('blue-active', theme)};
+  background-color: ${colorsTokens['info-500']};
   border-radius: 100%;
   align-self: end;
   cursor: pointer;
diff --git a/src/frontend/packages/lib_components/src/common/SVGIcons/ClassroomSVG.tsx b/src/frontend/packages/lib_components/src/common/SVGIcons/ClassroomSVG.tsx
index e8ed344ccc..6c59e0385d 100644
--- a/src/frontend/packages/lib_components/src/common/SVGIcons/ClassroomSVG.tsx
+++ b/src/frontend/packages/lib_components/src/common/SVGIcons/ClassroomSVG.tsx
@@ -1,11 +1,6 @@
-import { normalizeColor } from 'grommet/utils';
-import { theme } from 'lib-common';
-import React from 'react';
-
 import SVGIcon, { SvgProps } from '.';
 
 export const ClassroomSVG = (svgProps: SvgProps) => {
-  const color = normalizeColor(svgProps.iconColor, theme);
   return (
     <SVGIcon viewBox={{ x: 0, y: 0, width: 25, height: 25 }} {...svgProps}>
       <g fill="none" fillRule="evenodd" stroke="none" strokeWidth="1">
@@ -13,7 +8,14 @@ export const ClassroomSVG = (svgProps: SvgProps) => {
           d="M17.9636364,4.72727273 L6.03636365,4.72727273 C5.21636364,4.72727273 4.54545455,5.39818182 4.54545455,6.21818183 L4.54545455,15.1636364 C4.54545455,15.9836364 5.21636364,16.6545455 6.03636365,16.6545455 L17.9636364,16.6545455 C18.7836365,16.6545455 19.4545455,15.9836364 19.4545455,15.1636364 L19.4545455,6.21818183 C19.4545455,5.39818182 18.7836365,4.72727273 17.9636364,4.72727273 Z M10.1363637,12.6812728 L10.1363637,8.70054548 C10.1363637,8.11163638 10.7923637,7.7538182 11.2843637,8.07436366 L14.3780001,10.0647273 C14.8327273,10.3554546 14.8327273,11.0263637 14.3780001,11.3170909 L11.2843637,13.3074546 C10.7923637,13.6280001 10.1363637,13.2701819 10.1363637,12.6812728 Z"
           id="Shape"
         />
-        <rect fill={color} x="8" y="18" width="8" height="2" rx="1" />
+        <rect
+          fill={svgProps.iconColor}
+          x="8"
+          y="18"
+          width="8"
+          height="2"
+          rx="1"
+        />
       </g>
     </SVGIcon>
   );
diff --git a/src/frontend/packages/lib_components/src/common/SVGIcons/index.tsx b/src/frontend/packages/lib_components/src/common/SVGIcons/index.tsx
index 04b987d224..1becae70c7 100644
--- a/src/frontend/packages/lib_components/src/common/SVGIcons/index.tsx
+++ b/src/frontend/packages/lib_components/src/common/SVGIcons/index.tsx
@@ -1,5 +1,4 @@
 import { ThemeContext } from 'grommet';
-import { normalizeColor } from 'grommet/utils';
 import React, { PropsWithChildren, SVGProps, useContext } from 'react';
 import styled, { CSSProperties } from 'styled-components';
 
@@ -18,13 +17,12 @@ type StyledRectProps = RectInternalProps & ComponentWithTheme;
 type StyledSVGProps = SVGInternalProps & ComponentWithTheme;
 
 const StyledRect = styled.rect<StyledRectProps>`
-  fill: ${(props) =>
-    normalizeColor(props.focusColor ?? 'none', props.grommetTheme)};
+  fill: ${({ focusColor }) => focusColor || 'none'};
 `;
 
 const StyledSVG = styled.svg<StyledSVGProps>`
   path {
-    fill: ${(props) => normalizeColor(props.iconColor, props.grommetTheme)};
+    fill: ${({ iconColor }) => iconColor};
   }
 `;
 
diff --git a/src/frontend/packages/lib_components/src/common/SchedulingFields/index.tsx b/src/frontend/packages/lib_components/src/common/SchedulingFields/index.tsx
index 8eeda8263b..0196a3e8ed 100644
--- a/src/frontend/packages/lib_components/src/common/SchedulingFields/index.tsx
+++ b/src/frontend/packages/lib_components/src/common/SchedulingFields/index.tsx
@@ -1,7 +1,7 @@
 import { DatePicker } from '@openfun/cunningham-react';
 import { FormField, TextInput } from 'grommet';
 import { MarginType } from 'grommet/utils';
-import { Nullable } from 'lib-common';
+import { Nullable, colorsTokens } from 'lib-common';
 import { DateTime, Duration, Settings } from 'luxon';
 import React, { useEffect, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
@@ -244,7 +244,7 @@ export const SchedulingFields = ({
             label={intl.formatMessage(messages.startingAtTimeTextLabel)}
             htmlFor="starting_at_time"
             margin="none"
-            background={startingAtError ? 'status-error-off' : 'white'}
+            background={startingAtError ? colorsTokens['danger-100'] : 'white'}
             height="80%"
             disabled={disabled}
           >
diff --git a/src/frontend/packages/lib_components/src/common/UploadableObjectProgress/index.tsx b/src/frontend/packages/lib_components/src/common/UploadableObjectProgress/index.tsx
index f7340f5571..c2f9c7d308 100644
--- a/src/frontend/packages/lib_components/src/common/UploadableObjectProgress/index.tsx
+++ b/src/frontend/packages/lib_components/src/common/UploadableObjectProgress/index.tsx
@@ -1,4 +1,5 @@
 import { Meter, MeterProps } from 'grommet';
+import { colorsTokens } from 'lib-common';
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import styled from 'styled-components';
@@ -30,7 +31,7 @@ export const UploadableObjectProgress = ({
   // There is a conflict in the type of the `values` prop between `react` and `grommet`
   // Use the const type to ensure correctness and the `any` escape hatch for the actual value
   const values: MeterProps['values'] = [
-    { color: 'brand', label: `${progress}%`, value: progress },
+    { color: colorsTokens['info-300'], label: `${progress}%`, value: progress },
   ];
   return (
     <Box direction="row" justify="space-between">
diff --git a/src/frontend/packages/lib_components/src/common/WidgetsContainer/index.tsx b/src/frontend/packages/lib_components/src/common/WidgetsContainer/index.tsx
index eaae6853ba..e82c30af19 100644
--- a/src/frontend/packages/lib_components/src/common/WidgetsContainer/index.tsx
+++ b/src/frontend/packages/lib_components/src/common/WidgetsContainer/index.tsx
@@ -77,7 +77,11 @@ export const WidgetsContainer = ({ children }: WidgetsContainerProps) => {
         ? children
             .filter((widget) => widget.size === WidgetSize.LARGE)
             .map((widget, index) => (
-              <Box background={colorsTokens['main']} gap="small" key={index}>
+              <Box
+                background={colorsTokens['primary-100']}
+                gap="small"
+                key={index}
+              >
                 {widget.component}
               </Box>
             ))
@@ -88,7 +92,7 @@ export const WidgetsContainer = ({ children }: WidgetsContainerProps) => {
       <Box
         ref={mainContainerRef}
         direction="row"
-        background={colorsTokens['main']}
+        background={colorsTokens['primary-100']}
         justify="center"
       >
         {mapper.map((_, indexColumn) => (
diff --git a/src/frontend/packages/lib_components/src/utils/useResizer.tsx b/src/frontend/packages/lib_components/src/utils/useResizer.tsx
index 5b092c475a..54a9c4298e 100644
--- a/src/frontend/packages/lib_components/src/utils/useResizer.tsx
+++ b/src/frontend/packages/lib_components/src/utils/useResizer.tsx
@@ -1,5 +1,4 @@
-import { normalizeColor } from 'grommet/utils';
-import { Nullable, theme } from 'lib-common';
+import { Nullable, colorsTokens } from 'lib-common';
 import React, {
   CSSProperties,
   PropsWithChildren,
@@ -21,7 +20,7 @@ const StyledResizeSeparator = styled(Box)`
   cursor: col-resize;
 
   &:hover div {
-    background-color: ${normalizeColor('blue-active', theme)};
+    background-color: ${colorsTokens['info-500']};
   }
 `;
 
diff --git a/src/frontend/packages/lib_markdown/src/components/MarkdownEditor/index.tsx b/src/frontend/packages/lib_markdown/src/components/MarkdownEditor/index.tsx
index 33cb24ff30..79402ef25b 100644
--- a/src/frontend/packages/lib_markdown/src/components/MarkdownEditor/index.tsx
+++ b/src/frontend/packages/lib_markdown/src/components/MarkdownEditor/index.tsx
@@ -347,7 +347,7 @@ export const MarkdownEditor = ({ markdownDocumentId }: MarkdownEditorProps) => {
                   />
                 </MarkdownImageDropzone>
                 <Box>
-                  <Footer background="brand" pad="xxsmall">
+                  <Footer background={colorsTokens['info-300']} pad="xxsmall">
                     <Text color="white">
                       {intl.formatMessage(messages.editorEmptyDragDropHelper)}
                     </Text>
diff --git a/src/frontend/packages/lib_markdown/src/components/MarkdownImageProgressToast/index.tsx b/src/frontend/packages/lib_markdown/src/components/MarkdownImageProgressToast/index.tsx
index e2549886ea..3dd2bddcd4 100644
--- a/src/frontend/packages/lib_markdown/src/components/MarkdownImageProgressToast/index.tsx
+++ b/src/frontend/packages/lib_markdown/src/components/MarkdownImageProgressToast/index.tsx
@@ -1,4 +1,5 @@
 import { Meter, Stack } from 'grommet';
+import { colorsTokens } from 'lib-common';
 import { Box, Text } from 'lib-components';
 import React from 'react';
 
@@ -21,7 +22,7 @@ export const MarkdownImageProgressToast = ({
           <Meter
             values={[
               {
-                color: 'brand',
+                color: colorsTokens['info-300'],
                 label: progressPercent,
                 value: progress,
               },
diff --git a/src/frontend/packages/lib_markdown/src/components/MarkdownNotFoundView/index.tsx b/src/frontend/packages/lib_markdown/src/components/MarkdownNotFoundView/index.tsx
index 7f51fe33be..af861fb678 100644
--- a/src/frontend/packages/lib_markdown/src/components/MarkdownNotFoundView/index.tsx
+++ b/src/frontend/packages/lib_markdown/src/components/MarkdownNotFoundView/index.tsx
@@ -1,4 +1,5 @@
 import { Search } from 'grommet-icons';
+import { colorsTokens } from 'lib-common';
 import { Box, Heading } from 'lib-components';
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
@@ -28,7 +29,7 @@ export const MarkdownNotFoundView = () => {
     <Box justify="space-evenly">
       <Box margin="auto">
         <Heading>
-          <Search size="large" color="blue-active" />
+          <Search size="large" color={colorsTokens['info-500']} />
           {intl.formatMessage(messages.notFound.title)}
         </Heading>
       </Box>
diff --git a/src/frontend/packages/lib_video/src/components/common/VideoWidgetProvider/LocalizedTimedTextTrackUpload/TimedTextTrackItem/DeleteTimedTextTrackItemUploadButton/index.tsx b/src/frontend/packages/lib_video/src/components/common/VideoWidgetProvider/LocalizedTimedTextTrackUpload/TimedTextTrackItem/DeleteTimedTextTrackItemUploadButton/index.tsx
index b3a06301b6..7fc0690594 100644
--- a/src/frontend/packages/lib_video/src/components/common/VideoWidgetProvider/LocalizedTimedTextTrackUpload/TimedTextTrackItem/DeleteTimedTextTrackItemUploadButton/index.tsx
+++ b/src/frontend/packages/lib_video/src/components/common/VideoWidgetProvider/LocalizedTimedTextTrackUpload/TimedTextTrackItem/DeleteTimedTextTrackItemUploadButton/index.tsx
@@ -1,4 +1,5 @@
 import { Button } from '@openfun/cunningham-react';
+import { colorsTokens } from 'lib-common';
 import { BinSVG, TimedText } from 'lib-components';
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
@@ -29,7 +30,13 @@ export const DeleteTimedTextTrackItemUploadButton = ({
       aria-label={intl.formatMessage(messages.buttonLabel)}
       onClick={() => setDeleteTimedTextTrackUploadModal(timedTextTrack)}
       color="tertiary"
-      icon={<BinSVG height="18px" iconColor="blue-active" width="14px" />}
+      icon={
+        <BinSVG
+          height="18px"
+          iconColor={colorsTokens['info-500']}
+          width="14px"
+        />
+      }
     />
   );
 };
diff --git a/src/frontend/packages/lib_video/src/components/common/VideoWidgetProvider/widgets/SharedLiveMedia/SharedLiveMediaItem/AllowedDownloadButton/index.tsx b/src/frontend/packages/lib_video/src/components/common/VideoWidgetProvider/widgets/SharedLiveMedia/SharedLiveMediaItem/AllowedDownloadButton/index.tsx
index 6b4dc5983c..5916f56e0a 100644
--- a/src/frontend/packages/lib_video/src/components/common/VideoWidgetProvider/widgets/SharedLiveMedia/SharedLiveMediaItem/AllowedDownloadButton/index.tsx
+++ b/src/frontend/packages/lib_video/src/components/common/VideoWidgetProvider/widgets/SharedLiveMedia/SharedLiveMediaItem/AllowedDownloadButton/index.tsx
@@ -1,4 +1,5 @@
 import { Button } from '@openfun/cunningham-react';
+import { colorsTokens } from 'lib-common';
 import { DownloadSVG, SharedLiveMedia, report } from 'lib-components';
 import React from 'react';
 import toast from 'react-hot-toast';
@@ -68,7 +69,13 @@ export const AllowedDownloadButton = ({
         })
       }
       title={intl.formatMessage(messages.buttonLabel)}
-      icon={<DownloadSVG iconColor="blue-active" width="24px" height="24px" />}
+      icon={
+        <DownloadSVG
+          iconColor={colorsTokens['info-500']}
+          width="24px"
+          height="24px"
+        />
+      }
       color="tertiary"
     />
   );
diff --git a/src/frontend/packages/lib_video/src/components/common/VideoWidgetProvider/widgets/SharedLiveMedia/SharedLiveMediaItem/DisallowedDownloadButton/index.tsx b/src/frontend/packages/lib_video/src/components/common/VideoWidgetProvider/widgets/SharedLiveMedia/SharedLiveMediaItem/DisallowedDownloadButton/index.tsx
index b7eaed89d6..5c09898c77 100644
--- a/src/frontend/packages/lib_video/src/components/common/VideoWidgetProvider/widgets/SharedLiveMedia/SharedLiveMediaItem/DisallowedDownloadButton/index.tsx
+++ b/src/frontend/packages/lib_video/src/components/common/VideoWidgetProvider/widgets/SharedLiveMedia/SharedLiveMediaItem/DisallowedDownloadButton/index.tsx
@@ -1,3 +1,4 @@
+import { colorsTokens } from '@lib-common/cunningham';
 import { Button } from '@openfun/cunningham-react';
 import { NoDownloadSVG, SharedLiveMedia, report } from 'lib-components';
 import React from 'react';
@@ -69,7 +70,13 @@ export const DisallowedDownloadButton = ({
       }
       title={intl.formatMessage(messages.buttonLabel)}
       color="tertiary"
-      icon={<NoDownloadSVG iconColor="blue-off" width="24px" height="24px" />}
+      icon={
+        <NoDownloadSVG
+          iconColor={colorsTokens['info-200']}
+          width="24px"
+          height="24px"
+        />
+      }
     />
   );
 };
diff --git a/src/frontend/packages/lib_video/src/components/common/VideoWidgetProvider/widgets/VODCreation/HarvestVOD/index.tsx b/src/frontend/packages/lib_video/src/components/common/VideoWidgetProvider/widgets/VODCreation/HarvestVOD/index.tsx
index 0ce101cbdc..cf77228a14 100644
--- a/src/frontend/packages/lib_video/src/components/common/VideoWidgetProvider/widgets/VODCreation/HarvestVOD/index.tsx
+++ b/src/frontend/packages/lib_video/src/components/common/VideoWidgetProvider/widgets/VODCreation/HarvestVOD/index.tsx
@@ -1,3 +1,4 @@
+import { colorsTokens } from 'lib-common';
 import { Text, useFetchButton, useVideo } from 'lib-components';
 import React, { Fragment, useEffect } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
@@ -55,7 +56,12 @@ export const HarvestVOD = () => {
 
   return (
     <Fragment>
-      <Text type="p" className="mt-0" color="blue-active" textAlign="center">
+      <Text
+        type="p"
+        className="mt-0"
+        color={colorsTokens['info-500']}
+        textAlign="center"
+      >
         {intl.formatMessage(messages.harvestLiveMessage)}
       </Text>
       <FetchButton
diff --git a/src/frontend/packages/lib_video/src/components/common/VideoWidgetProvider/widgets/WidgetThumbnail/ThumbnailRemoveButton/index.tsx b/src/frontend/packages/lib_video/src/components/common/VideoWidgetProvider/widgets/WidgetThumbnail/ThumbnailRemoveButton/index.tsx
index 94fa242b90..91422872e2 100644
--- a/src/frontend/packages/lib_video/src/components/common/VideoWidgetProvider/widgets/WidgetThumbnail/ThumbnailRemoveButton/index.tsx
+++ b/src/frontend/packages/lib_video/src/components/common/VideoWidgetProvider/widgets/WidgetThumbnail/ThumbnailRemoveButton/index.tsx
@@ -1,4 +1,5 @@
 import { Button } from '@openfun/cunningham-react';
+import { colorsTokens } from 'lib-common';
 import {
   BinSVG,
   Modal,
@@ -100,7 +101,13 @@ export const ThumbnailRemoveButton = ({
       {thumbnail && thumbnail.is_ready_to_show && (
         <Button
           aria-label={intl.formatMessage(messages.deleteButtonLabel)}
-          icon={<BinSVG width="14px" height="18px" iconColor="blue-active" />}
+          icon={
+            <BinSVG
+              width="14px"
+              height="18px"
+              iconColor={colorsTokens['info-500']}
+            />
+          }
           onClick={() => modalActions.current?.open()}
           color="tertiary"
           title={intl.formatMessage(messages.deleteButtonLabel)}
diff --git a/src/frontend/packages/lib_video/src/components/common/VideoWizard/CreateVOD/UploadVideoForm/UploadVideoDropzone/index.spec.tsx b/src/frontend/packages/lib_video/src/components/common/VideoWizard/CreateVOD/UploadVideoForm/UploadVideoDropzone/index.spec.tsx
index ea88d1530d..05de953dba 100644
--- a/src/frontend/packages/lib_video/src/components/common/VideoWizard/CreateVOD/UploadVideoForm/UploadVideoDropzone/index.spec.tsx
+++ b/src/frontend/packages/lib_video/src/components/common/VideoWizard/CreateVOD/UploadVideoForm/UploadVideoDropzone/index.spec.tsx
@@ -2,8 +2,7 @@
 /* eslint-disable testing-library/no-node-access */
 import { fireEvent, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { normalizeColor } from 'grommet/utils';
-import { theme } from 'lib-common';
+import { colorsTokens } from 'lib-common';
 import { render } from 'lib-tests';
 
 import { UploadVideoDropzone } from '.';
@@ -23,7 +22,7 @@ describe('<UploadVideoDropzone />', () => {
     const dashedBox =
       container.firstElementChild!.children[1].firstElementChild;
     expect(dashedBox).toHaveStyle(
-      `background-color: ${normalizeColor('bg-select', theme)}`,
+      `background-color: ${colorsTokens['info-150']}}`,
     );
 
     const svg = container.getElementsByTagName('path')[0];
@@ -52,7 +51,7 @@ describe('<UploadVideoDropzone />', () => {
     const text = screen.getByText('Add a video or drag & drop it');
 
     expect(dashedBox).toHaveStyle(
-      `background-color: ${normalizeColor('bg-select', theme)}`,
+      `background-color: ${colorsTokens['info-150']}`,
     );
     expect(svg).toHaveStyle('fill: #b4cff2');
     expect(text).toHaveStyle('color: #b4cff2');
@@ -73,7 +72,7 @@ describe('<UploadVideoDropzone />', () => {
     );
     await waitFor(() =>
       expect(dashedBox).toHaveStyle(
-        `background-color: ${normalizeColor('bg-select', theme)}`,
+        `background-color: ${colorsTokens['info-150']}`,
       ),
     );
     expect(svg).toHaveStyle('fill: #b4cff2');
diff --git a/src/frontend/packages/lib_video/src/components/live/Student/StudentLiveStarter/StudentLiveAdvertising/StudentLiveRegistration/index.tsx b/src/frontend/packages/lib_video/src/components/live/Student/StudentLiveStarter/StudentLiveAdvertising/StudentLiveRegistration/index.tsx
index a259bc5580..15185b20e8 100644
--- a/src/frontend/packages/lib_video/src/components/live/Student/StudentLiveStarter/StudentLiveAdvertising/StudentLiveRegistration/index.tsx
+++ b/src/frontend/packages/lib_video/src/components/live/Student/StudentLiveStarter/StudentLiveAdvertising/StudentLiveRegistration/index.tsx
@@ -1,5 +1,4 @@
-import { normalizeColor } from 'grommet/utils';
-import { Maybe, theme } from 'lib-common';
+import { Maybe, colorsTokens } from 'lib-common';
 import {
   AnonymousUser,
   Heading,
@@ -83,7 +82,7 @@ export const StudentLiveRegistration = () => {
 
   return (
     <AdvertisingBox margin={{ bottom: 'large' }} pad="large">
-      <Heading level={4} color={normalizeColor('blue-active', theme)}>
+      <Heading level={4} color={colorsTokens['info-500']}>
         {intl.formatMessage(messages.formTitle)}
       </Heading>
 
diff --git a/src/frontend/packages/lib_video/src/components/live/common/ViewersList/components/ViewersListItemContainer/index.spec.tsx b/src/frontend/packages/lib_video/src/components/live/common/ViewersList/components/ViewersListItemContainer/index.spec.tsx
index c5090c5e28..4b6351d713 100644
--- a/src/frontend/packages/lib_video/src/components/live/common/ViewersList/components/ViewersListItemContainer/index.spec.tsx
+++ b/src/frontend/packages/lib_video/src/components/live/common/ViewersList/components/ViewersListItemContainer/index.spec.tsx
@@ -1,6 +1,5 @@
 import { screen } from '@testing-library/react';
-import { normalizeColor } from 'grommet/utils';
-import { theme } from 'lib-common';
+import { colorsTokens } from 'lib-common';
 import { render } from 'lib-tests';
 import React from 'react';
 import renderer from 'react-test-renderer';
@@ -29,12 +28,8 @@ describe('<ViewersListItemContainer />', () => {
       )
       .toJSON();
 
-    expect(tree).toHaveStyleRule(
-      'background',
-      normalizeColor('bg-marsha', theme),
-      {
-        modifier: ':hover',
-      },
-    );
+    expect(tree).toHaveStyleRule('background', colorsTokens['primary-100'], {
+      modifier: ':hover',
+    });
   });
 });