From 198bf5a333d34373b2a7567e68fe605e948417a4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rapha=C3=ABl=20Bosi?=
 <71827178+bosiraphael@users.noreply.github.com>
Date: Wed, 29 Oct 2025 19:08:51 +0100
Subject: [PATCH] Complete color refactoring (#15414)

# Complete color refactoring

Closes https://github.com/twentyhq/core-team-issues/issues/1779

- Updated all colors to use Radix colors with P3 color space allowing
for brighter colors
- Created our own gray scale interpolated on Radix's scale to have the
same values for grays as the old ones in the app
- Introduced dark and light colors as well as there transparent versions
- Added many new colors from radix that can be used in the tags or in
the graphs
- Updated multiple color utilities to match new behaviors
- Changed the computation of Avatar colors to return only colors from
the theme (before it was random hsl)

These changes allow the user to use new colors in tags or charts, the
colors are brighter and with better contrast. We have a full range of
color variations from 1 to 12 where before we only had 4 adaptative
colors.
All these changes will allow us to develop custom themes for the user
soon, where users can choose their accent colors, background colors and
there contrast.
---
 package.json                                  |   1 +
 .../CustomResolverFetchMoreLoader.tsx         |   5 +-
 .../emails/components/EmailThreadPreview.tsx  |   7 +-
 .../components/AdvancedTextEditor.tsx         |   2 +-
 .../SettingsBillingCreditsSection.tsx         |   9 +-
 .../components/SubscriptionBenefit.tsx        |   4 +-
 .../ChartColorPaletteOption.tsx               |   9 +-
 .../ChartColorSelectionDropdownContent.tsx    |  26 +-
 .../components/AppRootErrorFallback.tsx       |  18 +-
 .../src/modules/file/components/FileIcon.tsx  |   2 +-
 .../components/KeyboardShortcutMenuStyles.tsx |   2 +-
 .../ObjectFilterDropdownBooleanSelect.tsx     |   2 +-
 .../RecordBoardColumnFetchMoreLoader.tsx      |   3 +-
 .../record-card/components/RecordCard.tsx     |   4 +-
 .../components/TextVariableEditor.tsx         |   2 +-
 .../ui/form-types/components/VariableChip.tsx |   6 +-
 .../MultipleRecordPickerFetchMoreLoader.tsx   |   3 +-
 .../RecordTableCellFocusedPortalContent.tsx   |   2 +-
 ...ecordTableRowVirtualizedDebugRowHelper.tsx |   4 +-
 .../OnboardingModalCircularIcon.tsx           |   6 +-
 .../components/PageLayoutGridLayout.tsx       |   2 +-
 .../components/PageLayoutGridOverlay.tsx      |   4 +-
 .../graph/constants/GraphColorScaleMax.ts     |   1 +
 .../constants/GraphColorScaleMinIndex.ts      |   1 +
 .../GraphGroupColorMinimumAlpha.constant.ts   |   1 -
 .../GraphMaximumNumberOfGroupColors.ts        |   2 +-
 .../components/GraphWidgetAggregateChart.tsx  |   4 +-
 .../hooks/__tests__/useBarChartData.test.ts   |  28 +
 .../hooks/__tests__/useGaugeChartData.test.ts |  28 +
 .../hooks/__tests__/useLineChartData.test.ts  |  28 +
 .../hooks/__tests__/usePieChartData.test.ts   |  28 +
 .../widgets/graph/types/GraphColorScheme.ts   |  14 +
 .../graph/utils/createGraphColorRegistry.ts   | 533 ++++++++++++++++--
 .../widgets/graph/utils/generateGroupColor.ts |  19 +-
 .../utils/useSourceContent.ts                 |   4 +-
 .../settings/components/SettingsRadioCard.tsx |   2 +-
 .../SettingsDataModelFieldSelectForm.tsx      |  10 +-
 .../components/OverridableCheckbox.tsx        |   2 +-
 .../components/PermissionIcon.tsx             |   4 +-
 .../components/SpreadsheetImportTable.tsx     |   9 +-
 .../modules/ui/input/components/TextArea.tsx  |   3 +-
 .../modal/components/ConfirmationModal.tsx    |   2 +-
 .../components/NavigationDrawerItem.tsx       |   2 +-
 .../navigation/step-bar/components/Step.tsx   |   2 +-
 .../drag-select/components/DragSelect.tsx     |   4 +-
 .../__stories__/DragSelect.stories.tsx        |   4 +-
 .../views/components/SortOrFilterChip.tsx     |   2 +-
 ...wBarFilterDropdownAdvancedFilterButton.tsx |   2 +-
 .../components/ViewPickerDropdown.tsx         |   2 +-
 .../utils/getWorkflowDiagramColors.ts         |   8 +-
 .../WorkflowDiagramStepNodeIcon.tsx           |   2 +-
 .../getActionIconColorOrThrow.test.ts         |  50 +-
 .../utils/getActionIconColorOrThrow.ts        |   2 +-
 .../__tests__/getTriggerIconColor.test.ts     |  22 +-
 .../data-model/SettingsObjectDetailPage.tsx   |  12 +-
 .../utils/generate-random-subdomain.util.ts   |   2 -
 .../src/display/avatar/components/Avatar.tsx  |  17 +-
 .../components/AnimatedCheckmark.tsx          |   2 +-
 .../checkmark/components/Checkmark.tsx        |   4 +-
 .../src/display/info/components/Info.tsx      |   6 +-
 .../src/display/tooltip/AppTooltip.tsx        |   6 +-
 .../button/components/AnimatedButton.tsx      |  28 +-
 .../components/AnimatedLightIconButton.tsx    |   2 +-
 .../input/button/components/Button/Button.tsx |  31 +-
 .../Button/internal/ButtonHotKeys.tsx         |   2 +-
 .../button/components/FloatingButton.tsx      |   4 +-
 .../button/components/FloatingIconButton.tsx  |   2 +-
 .../input/button/components/IconButton.tsx    |  19 +-
 .../input/button/components/LightButton.tsx   |   2 +-
 .../button/components/LightIconButton.tsx     |   2 +-
 .../theme/utils/getBaseCodeEditorTheme.ts     |  54 +-
 .../components/ColorSchemeCard.tsx            |  37 +-
 .../src/input/components/Checkbox.tsx         |   8 +-
 .../twenty-ui/src/input/components/Radio.tsx  |   5 +-
 .../components/__stories__/Toggle.stories.tsx |   4 +-
 .../components/internal/JsonNodeLabel.tsx     |   4 +-
 .../components/internal/JsonNodeValue.tsx     |   4 +-
 .../AnimatedExpandableContainer.stories.tsx   |   4 +-
 .../components/AdvancedSettingsToggle.tsx     |  10 +-
 .../components/MenuItemSelectColor.tsx        |  25 +-
 .../components/NavigationBarItem.tsx          |   2 +-
 .../testing/decorators/ComponentDecorator.tsx |   8 +-
 .../src/theme/constants/AccentDark.ts         |  14 +-
 .../src/theme/constants/AccentLight.ts        |  14 +-
 .../src/theme/constants/AdaptiveColorsDark.ts |  44 --
 .../theme/constants/AdaptiveColorsLight.ts    |  44 --
 .../src/theme/constants/BackgroundDark.ts     |  55 +-
 .../src/theme/constants/BackgroundLight.ts    |  55 +-
 .../src/theme/constants/BorderDark.ts         |  22 +-
 .../src/theme/constants/BorderLight.ts        |  22 +-
 .../src/theme/constants/BoxShadowDark.ts      |  20 +-
 .../src/theme/constants/BoxShadowLight.ts     |  25 +-
 .../twenty-ui/src/theme/constants/CodeDark.ts |  10 +-
 .../src/theme/constants/CodeLight.ts          |  10 +-
 .../twenty-ui/src/theme/constants/Colors.ts   |   7 -
 .../src/theme/constants/ColorsDark.ts         |   9 +
 .../src/theme/constants/ColorsLight.ts        |   9 +
 .../twenty-ui/src/theme/constants/FontDark.ts |  18 +-
 .../src/theme/constants/FontLight.ts          |  18 +-
 .../src/theme/constants/GrayScale.ts          |  22 -
 .../src/theme/constants/GrayScaleDark.ts      |  14 +
 .../src/theme/constants/GrayScaleDarkAlpha.ts |  14 +
 .../src/theme/constants/GrayScaleLight.ts     |  14 +
 .../theme/constants/GrayScaleLightAlpha.ts    |  14 +
 .../theme/constants/IllustrationIconDark.ts   |  12 +-
 .../theme/constants/IllustrationIconLight.ts  |  12 +-
 .../src/theme/constants/MainColorNames.ts     |   6 +-
 .../src/theme/constants/MainColors.ts         |  15 -
 .../src/theme/constants/MainColorsDark.ts     |  41 ++
 .../src/theme/constants/MainColorsLight.ts    |  41 ++
 .../src/theme/constants/SecondaryColors.ts    | 107 ----
 .../theme/constants/SecondaryColorsDark.ts    | 394 +++++++++++++
 .../theme/constants/SecondaryColorsLight.ts   | 394 +++++++++++++
 .../src/theme/constants/SnackBarCommon.ts     |  21 -
 .../src/theme/constants/SnackBarDark.ts       |  19 +-
 .../src/theme/constants/SnackBarLight.ts      |  19 +-
 .../twenty-ui/src/theme/constants/TagDark.ts  |  82 ++-
 .../twenty-ui/src/theme/constants/TagLight.ts |  82 ++-
 .../src/theme/constants/ThemeCommon.ts        |   4 -
 .../src/theme/constants/ThemeDark.ts          |  11 +-
 .../src/theme/constants/ThemeLight.ts         |   6 +-
 .../theme/constants/TransparentColorsDark.ts  | 394 +++++++++++++
 .../theme/constants/TransparentColorsLight.ts | 394 +++++++++++++
 packages/twenty-ui/src/theme/index.ts         |  19 +-
 .../utils/__tests__/stringToHslColor.test.ts  |   7 -
 .../stringToThemeColorP3String.test.ts        |  32 ++
 .../utilities/color/utils/stringToHslColor.ts |  13 -
 .../color/utils/stringToThemeColorP3String.ts |  31 +
 packages/twenty-ui/src/utilities/index.ts     |   5 +-
 yarn.lock                                     |   8 +
 130 files changed, 3094 insertions(+), 803 deletions(-)
 create mode 100644 packages/twenty-front/src/modules/page-layout/widgets/graph/constants/GraphColorScaleMax.ts
 create mode 100644 packages/twenty-front/src/modules/page-layout/widgets/graph/constants/GraphColorScaleMinIndex.ts
 delete mode 100644 packages/twenty-front/src/modules/page-layout/widgets/graph/constants/GraphGroupColorMinimumAlpha.constant.ts
 delete mode 100644 packages/twenty-ui/src/theme/constants/AdaptiveColorsDark.ts
 delete mode 100644 packages/twenty-ui/src/theme/constants/AdaptiveColorsLight.ts
 delete mode 100644 packages/twenty-ui/src/theme/constants/Colors.ts
 create mode 100644 packages/twenty-ui/src/theme/constants/ColorsDark.ts
 create mode 100644 packages/twenty-ui/src/theme/constants/ColorsLight.ts
 delete mode 100644 packages/twenty-ui/src/theme/constants/GrayScale.ts
 create mode 100644 packages/twenty-ui/src/theme/constants/GrayScaleDark.ts
 create mode 100644 packages/twenty-ui/src/theme/constants/GrayScaleDarkAlpha.ts
 create mode 100644 packages/twenty-ui/src/theme/constants/GrayScaleLight.ts
 create mode 100644 packages/twenty-ui/src/theme/constants/GrayScaleLightAlpha.ts
 delete mode 100644 packages/twenty-ui/src/theme/constants/MainColors.ts
 create mode 100644 packages/twenty-ui/src/theme/constants/MainColorsDark.ts
 create mode 100644 packages/twenty-ui/src/theme/constants/MainColorsLight.ts
 delete mode 100644 packages/twenty-ui/src/theme/constants/SecondaryColors.ts
 create mode 100644 packages/twenty-ui/src/theme/constants/SecondaryColorsDark.ts
 create mode 100644 packages/twenty-ui/src/theme/constants/SecondaryColorsLight.ts
 delete mode 100644 packages/twenty-ui/src/theme/constants/SnackBarCommon.ts
 create mode 100644 packages/twenty-ui/src/theme/constants/TransparentColorsDark.ts
 create mode 100644 packages/twenty-ui/src/theme/constants/TransparentColorsLight.ts
 delete mode 100644 packages/twenty-ui/src/utilities/color/utils/__tests__/stringToHslColor.test.ts
 create mode 100644 packages/twenty-ui/src/utilities/color/utils/__tests__/stringToThemeColorP3String.test.ts
 delete mode 100644 packages/twenty-ui/src/utilities/color/utils/stringToHslColor.ts
 create mode 100644 packages/twenty-ui/src/utilities/color/utils/stringToThemeColorP3String.ts

diff --git a/package.json b/package.json
index 62e5954b4c4..d930a925a8c 100644
--- a/package.json
+++ b/package.json
@@ -7,6 +7,7 @@
     "@floating-ui/react": "^0.24.3",
     "@linaria/core": "^6.2.0",
     "@linaria/react": "^6.2.1",
+    "@radix-ui/colors": "^3.0.0",
     "@sentry/profiling-node": "^9.26.0",
     "@sentry/react": "^9.26.0",
     "@sniptt/guards": "^0.2.0",
diff --git a/packages/twenty-front/src/modules/activities/components/CustomResolverFetchMoreLoader.tsx b/packages/twenty-front/src/modules/activities/components/CustomResolverFetchMoreLoader.tsx
index 871f33d8b7d..606b9d320c2 100644
--- a/packages/twenty-front/src/modules/activities/components/CustomResolverFetchMoreLoader.tsx
+++ b/packages/twenty-front/src/modules/activities/components/CustomResolverFetchMoreLoader.tsx
@@ -1,6 +1,5 @@
-import { useInView } from 'react-intersection-observer';
 import styled from '@emotion/styled';
-import { GRAY_SCALE } from 'twenty-ui/theme';
+import { useInView } from 'react-intersection-observer';
 
 type CustomResolverFetchMoreLoaderProps = {
   loading: boolean;
@@ -10,7 +9,7 @@ type CustomResolverFetchMoreLoaderProps = {
 const StyledText = styled.div`
   align-items: center;
   box-shadow: none;
-  color: ${GRAY_SCALE.gray40};
+  color: ${({ theme }) => theme.grayScale.gray9};
   display: flex;
   height: 32px;
   margin-left: ${({ theme }) => theme.spacing(8)};
diff --git a/packages/twenty-front/src/modules/activities/emails/components/EmailThreadPreview.tsx b/packages/twenty-front/src/modules/activities/emails/components/EmailThreadPreview.tsx
index 049ce08f2be..3e4c380a578 100644
--- a/packages/twenty-front/src/modules/activities/emails/components/EmailThreadPreview.tsx
+++ b/packages/twenty-front/src/modules/activities/emails/components/EmailThreadPreview.tsx
@@ -3,8 +3,8 @@ import styled from '@emotion/styled';
 import { ActivityRow } from '@/activities/components/ActivityRow';
 import { EmailThreadNotShared } from '@/activities/emails/components/EmailThreadNotShared';
 import { useOpenEmailThreadInCommandMenu } from '@/command-menu/hooks/useOpenEmailThreadInCommandMenu';
+import { useTheme } from '@emotion/react';
 import { Avatar } from 'twenty-ui/display';
-import { GRAY_SCALE } from 'twenty-ui/theme';
 import {
   MessageChannelVisibility,
   type TimelineThread,
@@ -105,6 +105,7 @@ export const EmailThreadPreview = ({ thread }: EmailThreadPreviewProps) => {
   };
 
   const isDisabled = visibility !== MessageChannelVisibility.SHARE_EVERYTHING;
+  const theme = useTheme();
 
   return (
     <ActivityRow onClick={handleThreadClick} disabled={isDisabled}>
@@ -135,8 +136,8 @@ export const EmailThreadPreview = ({ thread }: EmailThreadPreviewProps) => {
               avatarUrl={finalAvatarUrl}
               placeholder={finalDisplayedName}
               type="rounded"
-              color={isCountIcon ? GRAY_SCALE.gray50 : undefined}
-              backgroundColor={isCountIcon ? GRAY_SCALE.gray10 : undefined}
+              color={isCountIcon ? theme.grayScale.gray11 : undefined}
+              backgroundColor={isCountIcon ? theme.grayScale.gray2 : undefined}
             />
           )}
         </StyledParticipantsContainer>
diff --git a/packages/twenty-front/src/modules/advanced-text-editor/components/AdvancedTextEditor.tsx b/packages/twenty-front/src/modules/advanced-text-editor/components/AdvancedTextEditor.tsx
index 81b0e8adaab..ec9fab55bf8 100644
--- a/packages/twenty-front/src/modules/advanced-text-editor/components/AdvancedTextEditor.tsx
+++ b/packages/twenty-front/src/modules/advanced-text-editor/components/AdvancedTextEditor.tsx
@@ -47,7 +47,7 @@ const StyledEditorContainer = styled.div<{
     }
 
     .variable-tag {
-      background-color: ${({ theme }) => theme.color.blue10};
+      background-color: ${({ theme }) => theme.color.blue3};
       border-radius: ${({ theme }) => theme.border.radius.sm};
       color: ${({ theme }) => theme.color.blue};
       padding: ${({ theme }) => theme.spacing(1)};
diff --git a/packages/twenty-front/src/modules/billing/components/SettingsBillingCreditsSection.tsx b/packages/twenty-front/src/modules/billing/components/SettingsBillingCreditsSection.tsx
index 23a8600e166..67b24288af8 100644
--- a/packages/twenty-front/src/modules/billing/components/SettingsBillingCreditsSection.tsx
+++ b/packages/twenty-front/src/modules/billing/components/SettingsBillingCreditsSection.tsx
@@ -8,12 +8,13 @@ import { useCurrentMetered } from '@/billing/hooks/useCurrentMetered';
 import { useGetWorkflowNodeExecutionUsage } from '@/billing/hooks/useGetWorkflowNodeExecutionUsage';
 import { useNumberFormat } from '@/localization/hooks/useNumberFormat';
 import { useSubscriptionStatus } from '@/workspace/hooks/useSubscriptionStatus';
+import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { t } from '@lingui/core/macro';
 import { H2Title } from 'twenty-ui/display';
 import { ProgressBar } from 'twenty-ui/feedback';
 import { Section } from 'twenty-ui/layout';
-import { BACKGROUND_LIGHT, COLOR } from 'twenty-ui/theme';
+import { BACKGROUND_LIGHT } from 'twenty-ui/theme';
 import { SubscriptionStatus } from '~/generated/graphql';
 import { formatToShortNumber } from '~/utils/format/formatToShortNumber';
 
@@ -61,6 +62,8 @@ export const SettingsBillingCreditsSection = ({
     currentBillingSubscription.interval,
   );
 
+  const theme = useTheme();
+
   return (
     <>
       <Section>
@@ -75,7 +78,9 @@ export const SettingsBillingCreditsSection = ({
           />
           <ProgressBar
             value={displayedProgressBarValue}
-            barColor={progressBarValue > 100 ? COLOR.red40 : COLOR.blue}
+            barColor={
+              progressBarValue > 100 ? theme.color.red8 : theme.color.blue
+            }
             backgroundColor={BACKGROUND_LIGHT.tertiary}
             withBorderRadius={true}
           />
diff --git a/packages/twenty-front/src/modules/billing/components/SubscriptionBenefit.tsx b/packages/twenty-front/src/modules/billing/components/SubscriptionBenefit.tsx
index 2ccb1d09def..a7934896ff0 100644
--- a/packages/twenty-front/src/modules/billing/components/SubscriptionBenefit.tsx
+++ b/packages/twenty-front/src/modules/billing/components/SubscriptionBenefit.tsx
@@ -1,6 +1,6 @@
-import React from 'react';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
+import React from 'react';
 import { IconCheck } from 'twenty-ui/display';
 
 const StyledBenefitContainer = styled.div`
@@ -27,7 +27,7 @@ export const SubscriptionBenefit = ({ children }: SubscriptionBenefitProps) => {
   return (
     <StyledBenefitContainer>
       <StyledCheckContainer>
-        <IconCheck color={theme.grayScale.gray50} size={14} />
+        <IconCheck color={theme.grayScale.gray11} size={14} />
       </StyledCheckContainer>
       {children}
     </StyledBenefitContainer>
diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartColorPaletteOption.tsx b/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartColorPaletteOption.tsx
index 4de92707920..f4f66c77a6e 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartColorPaletteOption.tsx
+++ b/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartColorPaletteOption.tsx
@@ -1,8 +1,9 @@
 import { SelectableListItem } from '@/ui/layout/selectable-list/components/SelectableListItem';
+import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { ColorSample } from 'twenty-ui/display';
 import { MenuItemSelect } from 'twenty-ui/navigation';
-import { MAIN_COLORS, type ThemeColor } from 'twenty-ui/theme';
+import { type ThemeColor } from 'twenty-ui/theme';
 
 type ChartColorPaletteOptionProps = {
   selectedItemId: string | null;
@@ -21,7 +22,9 @@ export const ChartColorPaletteOption = ({
   currentColor,
   onSelectColor,
 }: ChartColorPaletteOptionProps) => {
-  const paletteColors: Array<keyof typeof MAIN_COLORS> = [
+  const theme = useTheme();
+
+  const paletteColors: Array<keyof typeof theme.color> = [
     'purple',
     'pink',
     'red',
@@ -32,7 +35,7 @@ export const ChartColorPaletteOption = ({
   const colorSamples = (
     <StyledColorSamplesContainer>
       {paletteColors.map((paletteColorName) => {
-        const baseColor = MAIN_COLORS[paletteColorName];
+        const baseColor = theme.color[paletteColorName] as string;
         return <ColorSample key={paletteColorName} color={baseColor} />;
       })}
     </StyledColorSamplesContainer>
diff --git a/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartColorSelectionDropdownContent.tsx b/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartColorSelectionDropdownContent.tsx
index 1f7b9b5d663..c17d65d3b45 100644
--- a/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartColorSelectionDropdownContent.tsx
+++ b/packages/twenty-front/src/modules/command-menu/pages/page-layout/components/dropdown-content/ChartColorSelectionDropdownContent.tsx
@@ -115,19 +115,11 @@ export const ChartColorSelectionDropdownContent = () => {
             currentColor={currentColor}
             onSelectColor={handleSelectColor}
           />
-        </SelectableList>
-      </DropdownMenuItemsContainer>
-      {regularColorOptions.length > 0 && (
-        <>
-          <DropdownMenuSeparator />
-          <DropdownMenuItemsContainer>
-            <SelectableList
-              selectableListInstanceId={dropdownId}
-              focusId={dropdownId}
-              selectableItemIdArray={filteredColorOptions.map(
-                (colorOption) => colorOption.id,
-              )}
-            >
+
+          {regularColorOptions.length > 0 && (
+            <>
+              <DropdownMenuSeparator />
+
               {regularColorOptions.map((colorOption) => (
                 <ChartColorGradientOption
                   key={colorOption.id}
@@ -137,10 +129,10 @@ export const ChartColorSelectionDropdownContent = () => {
                   onSelectColor={handleSelectColor}
                 />
               ))}
-            </SelectableList>
-          </DropdownMenuItemsContainer>
-        </>
-      )}
+            </>
+          )}
+        </SelectableList>
+      </DropdownMenuItemsContainer>
     </>
   );
 };
diff --git a/packages/twenty-front/src/modules/error-handler/components/AppRootErrorFallback.tsx b/packages/twenty-front/src/modules/error-handler/components/AppRootErrorFallback.tsx
index 7e289785792..c9d04670035 100644
--- a/packages/twenty-front/src/modules/error-handler/components/AppRootErrorFallback.tsx
+++ b/packages/twenty-front/src/modules/error-handler/components/AppRootErrorFallback.tsx
@@ -3,7 +3,7 @@ import styled from '@emotion/styled';
 import { t } from '@lingui/core/macro';
 import { motion } from 'framer-motion';
 import { IconReload } from 'twenty-ui/display';
-import { GRAY_SCALE, THEME_DARK } from 'twenty-ui/theme';
+import { THEME_DARK } from 'twenty-ui/theme';
 
 type AppRootErrorFallbackProps = AppErrorDisplayProps;
 
@@ -17,8 +17,8 @@ const StyledContainer = styled.div`
 `;
 
 const StyledPanel = styled.div`
-  background: ${GRAY_SCALE.gray0};
-  border: 1px solid ${GRAY_SCALE.gray20};
+  background: ${({ theme }) => theme.grayScale.gray1};
+  border: 1px solid ${({ theme }) => theme.grayScale.gray5};
   border-radius: 8px;
   height: 100%;
   overflow-x: auto;
@@ -66,13 +66,13 @@ const StyledEmptyTextContainer = styled.div`
 `;
 
 const StyledEmptyTitle = styled.div`
-  color: ${GRAY_SCALE.gray60};
+  color: ${({ theme }) => theme.grayScale.gray12};
   font-size: 1.23rem;
   font-weight: 600;
 `;
 
 const StyledEmptySubTitle = styled.div`
-  color: ${GRAY_SCALE.gray50};
+  color: ${({ theme }) => theme.grayScale.gray11};
   font-size: 0.92rem;
   font-weight: 400;
   line-height: 1.5;
@@ -83,9 +83,9 @@ const StyledEmptySubTitle = styled.div`
 
 const StyledButton = styled.button`
   align-items: center;
-  background: ${GRAY_SCALE.gray0};
-  border: 1px solid ${GRAY_SCALE.gray20};
-  color: ${GRAY_SCALE.gray60};
+  background: ${({ theme }) => theme.grayScale.gray1};
+  border: 1px solid ${({ theme }) => theme.grayScale.gray5};
+  color: ${({ theme }) => theme.grayScale.gray12};
   border-radius: 8px;
   cursor: pointer;
   display: flex;
@@ -94,7 +94,7 @@ const StyledButton = styled.button`
 `;
 
 const StyledIcon = styled(IconReload)`
-  color: ${GRAY_SCALE.gray60};
+  color: ${({ theme }) => theme.grayScale.gray12};
   margin-right: 8px;
 `;
 
diff --git a/packages/twenty-front/src/modules/file/components/FileIcon.tsx b/packages/twenty-front/src/modules/file/components/FileIcon.tsx
index 0f0d91aecbb..6330ae2b70a 100644
--- a/packages/twenty-front/src/modules/file/components/FileIcon.tsx
+++ b/packages/twenty-front/src/modules/file/components/FileIcon.tsx
@@ -8,7 +8,7 @@ const StyledIconContainer = styled.div<{ background: string }>`
   align-items: center;
   background: ${({ background }) => background};
   border-radius: ${({ theme }) => theme.border.radius.sm};
-  color: ${({ theme }) => theme.grayScale.gray0};
+  color: ${({ theme }) => theme.grayScale.gray1};
   display: flex;
   flex-shrink: 0;
   justify-content: center;
diff --git a/packages/twenty-front/src/modules/keyboard-shortcut-menu/components/KeyboardShortcutMenuStyles.tsx b/packages/twenty-front/src/modules/keyboard-shortcut-menu/components/KeyboardShortcutMenuStyles.tsx
index 0e5c1d94fce..1c5b129430b 100644
--- a/packages/twenty-front/src/modules/keyboard-shortcut-menu/components/KeyboardShortcutMenuStyles.tsx
+++ b/packages/twenty-front/src/modules/keyboard-shortcut-menu/components/KeyboardShortcutMenuStyles.tsx
@@ -40,7 +40,7 @@ export const StyledContainer = styled.div`
 `;
 
 export const StyledGroupHeading = styled.label`
-  color: ${({ theme }) => theme.color.gray50};
+  color: ${({ theme }) => theme.color.gray10};
   padding-bottom: ${({ theme }) => theme.spacing(1)};
   padding-top: ${({ theme }) => theme.spacing(4)};
 `;
diff --git a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownBooleanSelect.tsx b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownBooleanSelect.tsx
index 7a6e2443edb..85ef069ec88 100644
--- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownBooleanSelect.tsx
+++ b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownBooleanSelect.tsx
@@ -68,7 +68,7 @@ export const ObjectFilterDropdownBooleanSelect = () => {
               <BooleanDisplay value={option} />
               {objectFilterDropdownFilterValue === option.toString() && (
                 <StyledIconCheckContainer>
-                  <IconCheck color={theme.grayScale.gray50} size={16} />
+                  <IconCheck color={theme.grayScale.gray11} size={16} />
                 </StyledIconCheckContainer>
               )}
             </StyledBooleanSelectContainer>
diff --git a/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnFetchMoreLoader.tsx b/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnFetchMoreLoader.tsx
index 3c89076ad19..068701ceb85 100644
--- a/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnFetchMoreLoader.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnFetchMoreLoader.tsx
@@ -7,12 +7,11 @@ import { RecordBoardColumnContext } from '@/object-record/record-board/record-bo
 import { isRecordBoardFetchingRecordsByColumnFamilyState } from '@/object-record/record-board/states/isRecordBoardFetchingRecordsByColumnFamilyState';
 import { recordBoardShouldFetchMoreInColumnComponentFamilyState } from '@/object-record/record-board/states/recordBoardShouldFetchMoreInColumnComponentFamilyState';
 import { useSetRecoilComponentFamilyState } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentFamilyState';
-import { GRAY_SCALE } from 'twenty-ui/theme';
 
 const StyledText = styled.div`
   align-items: center;
   box-shadow: none;
-  color: ${GRAY_SCALE.gray40};
+  color: ${({ theme }) => theme.grayScale.gray9};
   display: flex;
   height: 32px;
   margin-left: ${({ theme }) => theme.spacing(8)};
diff --git a/packages/twenty-front/src/modules/object-record/record-card/components/RecordCard.tsx b/packages/twenty-front/src/modules/object-record/record-card/components/RecordCard.tsx
index 97e9e69a412..eafd98d4c88 100644
--- a/packages/twenty-front/src/modules/object-record/record-card/components/RecordCard.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-card/components/RecordCard.tsx
@@ -28,14 +28,14 @@ const StyledBoardCard = styled.div<{
 
   &[data-active='true'] {
     background-color: ${({ theme }) => theme.accent.quaternary};
-    border: 1px solid ${({ theme }) => theme.adaptiveColors.blue3};
+    border: 1px solid ${({ theme }) => theme.color.blue7};
   }
 
   &:hover {
     border: 1px solid ${({ theme }) => theme.border.color.strong};
 
     &[data-active='true'] {
-      border: 1px solid ${({ theme }) => theme.adaptiveColors.blue3};
+      border: 1px solid ${({ theme }) => theme.color.blue7};
     }
   }
 
diff --git a/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/TextVariableEditor.tsx b/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/TextVariableEditor.tsx
index 4047121ffc2..c185e81ad8c 100644
--- a/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/TextVariableEditor.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/TextVariableEditor.tsx
@@ -43,7 +43,7 @@ const StyledEditor = styled.div<{
     }
 
     .variable-tag {
-      background-color: ${({ theme }) => theme.color.blue10};
+      background-color: ${({ theme }) => theme.color.blue3};
       border-radius: ${({ theme }) => theme.border.radius.sm};
       color: ${({ theme }) => theme.color.blue};
       padding: ${({ theme }) => theme.spacing(1)};
diff --git a/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/VariableChip.tsx b/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/VariableChip.tsx
index 4a43e5ce582..8ee1ff8b816 100644
--- a/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/VariableChip.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/VariableChip.tsx
@@ -8,11 +8,11 @@ import { IconAlertTriangle, IconX } from 'twenty-ui/display';
 
 const StyledChip = styled.div<{ deletable: boolean; danger: boolean }>`
   background-color: ${({ theme, danger }) =>
-    danger ? theme.adaptiveColors.red1 : theme.adaptiveColors.blue1};
+    danger ? theme.color.red3 : theme.color.blue3};
   border-width: 1px;
   border-style: solid;
   border-color: ${({ theme, danger }) =>
-    danger ? theme.adaptiveColors.red2 : theme.adaptiveColors.blue2};
+    danger ? theme.color.red5 : theme.color.blue5};
   border-radius: 4px;
   height: 20px;
   box-sizing: border-box;
@@ -62,7 +62,7 @@ const StyledDelete = styled.button<{ danger: boolean }>`
 
   &:hover {
     background-color: ${({ theme, danger }) =>
-      danger ? theme.adaptiveColors.red2 : theme.adaptiveColors.blue2};
+      danger ? theme.color.red5 : theme.color.blue5};
   }
 `;
 
diff --git a/packages/twenty-front/src/modules/object-record/record-picker/multiple-record-picker/components/MultipleRecordPickerFetchMoreLoader.tsx b/packages/twenty-front/src/modules/object-record/record-picker/multiple-record-picker/components/MultipleRecordPickerFetchMoreLoader.tsx
index ebb976f4bd9..6c9549ff7ed 100644
--- a/packages/twenty-front/src/modules/object-record/record-picker/multiple-record-picker/components/MultipleRecordPickerFetchMoreLoader.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-picker/multiple-record-picker/components/MultipleRecordPickerFetchMoreLoader.tsx
@@ -16,12 +16,11 @@ import styled from '@emotion/styled';
 import { useCallback } from 'react';
 import { useInView } from 'react-intersection-observer';
 import { useRecoilCallback } from 'recoil';
-import { GRAY_SCALE } from 'twenty-ui/theme';
 
 const StyledText = styled.div`
   align-items: center;
   box-shadow: none;
-  color: ${GRAY_SCALE.gray40};
+  color: ${({ theme }) => theme.grayScale.gray9};
   display: flex;
   height: 32px;
   margin-left: ${({ theme }) => theme.spacing(8)};
diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellFocusedPortalContent.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellFocusedPortalContent.tsx
index 3051db14614..a3089793f81 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellFocusedPortalContent.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellFocusedPortalContent.tsx
@@ -26,7 +26,7 @@ const StyledRecordTableCellFocusPortalContent = styled.div<{
 
   height: ${RECORD_TABLE_ROW_HEIGHT}px;
 
-  outline: ${({ theme }) => `1px solid ${theme.adaptiveColors.blue4}`};
+  outline: ${({ theme }) => `1px solid ${theme.color.blue8}`};
 
   user-select: none;
 `;
diff --git a/packages/twenty-front/src/modules/object-record/record-table/virtualization/components/RecordTableRowVirtualizedDebugRowHelper.tsx b/packages/twenty-front/src/modules/object-record/record-table/virtualization/components/RecordTableRowVirtualizedDebugRowHelper.tsx
index bcae13a63cf..f877c8a6a25 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/virtualization/components/RecordTableRowVirtualizedDebugRowHelper.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-table/virtualization/components/RecordTableRowVirtualizedDebugRowHelper.tsx
@@ -17,8 +17,8 @@ const StyledDebugRow = styled.div`
   top: ${({ theme }) => theme.spacing(1.25)};
   z-index: 20;
   color: ${({ theme }) => theme.font.color.primary};
-  background-color: ${({ theme }) => theme.adaptiveColors.gray1};
-  border: 1px solid ${({ theme }) => theme.adaptiveColors.blue4};
+  background-color: ${({ theme }) => theme.color.gray3};
+  border: 1px solid ${({ theme }) => theme.color.blue8};
   padding: ${({ theme }) => theme.spacing(0.5)};
   display: flex;
   max-height: ${({ theme }) => theme.spacing(4)};
diff --git a/packages/twenty-front/src/modules/onboarding/components/OnboardingModalCircularIcon.tsx b/packages/twenty-front/src/modules/onboarding/components/OnboardingModalCircularIcon.tsx
index 6d55340ab43..61e378e6f1f 100644
--- a/packages/twenty-front/src/modules/onboarding/components/OnboardingModalCircularIcon.tsx
+++ b/packages/twenty-front/src/modules/onboarding/components/OnboardingModalCircularIcon.tsx
@@ -1,7 +1,6 @@
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { type IconComponent } from 'twenty-ui/display';
-import { RGBA } from 'twenty-ui/theme';
 
 const StyledCheckContainer = styled.div<{ color: string }>`
   align-items: center;
@@ -9,7 +8,7 @@ const StyledCheckContainer = styled.div<{ color: string }>`
   justify-content: center;
   border: 2px solid ${({ color }) => color};
   border-radius: ${({ theme }) => theme.border.radius.rounded};
-  box-shadow: ${({ color }) => color && `-4px 4px 0 -2px ${RGBA(color, 1)}`};
+  box-shadow: ${({ color }) => color && `-4px 4px 0 -2px ${color}`};
   height: 36px;
   width: 36px;
 `;
@@ -22,8 +21,7 @@ export const OnboardingModalCircularIcon = ({
   Icon,
 }: OnboardingModalCircularIconProps) => {
   const theme = useTheme();
-  const color =
-    theme.name === 'light' ? theme.grayScale.gray90 : theme.grayScale.gray10;
+  const color = theme.grayScale.gray2;
 
   return (
     <StyledCheckContainer color={color}>
diff --git a/packages/twenty-front/src/modules/page-layout/components/PageLayoutGridLayout.tsx b/packages/twenty-front/src/modules/page-layout/components/PageLayoutGridLayout.tsx
index 02ff1322750..4c1355e5196 100644
--- a/packages/twenty-front/src/modules/page-layout/components/PageLayoutGridLayout.tsx
+++ b/packages/twenty-front/src/modules/page-layout/components/PageLayoutGridLayout.tsx
@@ -38,7 +38,7 @@ const StyledGridContainer = styled.div`
   user-select: none;
 
   .react-grid-placeholder {
-    background: ${({ theme }) => theme.adaptiveColors.blue3} !important;
+    background: ${({ theme }) => theme.color.blue7} !important;
 
     border-radius: ${({ theme }) => theme.border.radius.md};
   }
diff --git a/packages/twenty-front/src/modules/page-layout/components/PageLayoutGridOverlay.tsx b/packages/twenty-front/src/modules/page-layout/components/PageLayoutGridOverlay.tsx
index a581d4762ae..5361598977c 100644
--- a/packages/twenty-front/src/modules/page-layout/components/PageLayoutGridOverlay.tsx
+++ b/packages/twenty-front/src/modules/page-layout/components/PageLayoutGridOverlay.tsx
@@ -31,10 +31,10 @@ const StyledGridOverlay = styled.div<{
 
 const StyledGridCell = styled.div<{ isSelected?: boolean }>`
   background: ${({ isSelected, theme }) =>
-    isSelected ? theme.adaptiveColors.blue1 : 'transparent'};
+    isSelected ? theme.color.blue3 : 'transparent'};
   border: 1px solid
     ${({ theme, isSelected }) =>
-      isSelected ? theme.adaptiveColors.blue3 : theme.border.color.light};
+      isSelected ? theme.color.blue7 : theme.border.color.light};
   border-radius: ${({ theme }) => theme.border.radius.md};
   transition: background-color 0.3s ease;
 
diff --git a/packages/twenty-front/src/modules/page-layout/widgets/graph/constants/GraphColorScaleMax.ts b/packages/twenty-front/src/modules/page-layout/widgets/graph/constants/GraphColorScaleMax.ts
new file mode 100644
index 00000000000..f0013c95b74
--- /dev/null
+++ b/packages/twenty-front/src/modules/page-layout/widgets/graph/constants/GraphColorScaleMax.ts
@@ -0,0 +1 @@
+export const GRAPH_COLOR_SCALE_MAX = 8;
diff --git a/packages/twenty-front/src/modules/page-layout/widgets/graph/constants/GraphColorScaleMinIndex.ts b/packages/twenty-front/src/modules/page-layout/widgets/graph/constants/GraphColorScaleMinIndex.ts
new file mode 100644
index 00000000000..380f2c8e364
--- /dev/null
+++ b/packages/twenty-front/src/modules/page-layout/widgets/graph/constants/GraphColorScaleMinIndex.ts
@@ -0,0 +1 @@
+export const GRAPH_COLOR_SCALE_MIN = 2;
diff --git a/packages/twenty-front/src/modules/page-layout/widgets/graph/constants/GraphGroupColorMinimumAlpha.constant.ts b/packages/twenty-front/src/modules/page-layout/widgets/graph/constants/GraphGroupColorMinimumAlpha.constant.ts
deleted file mode 100644
index c4ffc23790a..00000000000
--- a/packages/twenty-front/src/modules/page-layout/widgets/graph/constants/GraphGroupColorMinimumAlpha.constant.ts
+++ /dev/null
@@ -1 +0,0 @@
-export const GRAPH_GROUP_COLOR_MINIMUM_ALPHA = 0.2;
diff --git a/packages/twenty-front/src/modules/page-layout/widgets/graph/constants/GraphMaximumNumberOfGroupColors.ts b/packages/twenty-front/src/modules/page-layout/widgets/graph/constants/GraphMaximumNumberOfGroupColors.ts
index 3ff67fb6813..70be4df04d1 100644
--- a/packages/twenty-front/src/modules/page-layout/widgets/graph/constants/GraphMaximumNumberOfGroupColors.ts
+++ b/packages/twenty-front/src/modules/page-layout/widgets/graph/constants/GraphMaximumNumberOfGroupColors.ts
@@ -1 +1 @@
-export const GRAPH_MAXIMUM_NUMBER_OF_GROUP_COLORS = 10;
+export const GRAPH_MAXIMUM_NUMBER_OF_GROUP_COLORS = 5;
diff --git a/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetAggregateChart/components/GraphWidgetAggregateChart.tsx b/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetAggregateChart/components/GraphWidgetAggregateChart.tsx
index d7a7e47643f..5983d725a76 100644
--- a/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetAggregateChart/components/GraphWidgetAggregateChart.tsx
+++ b/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetAggregateChart/components/GraphWidgetAggregateChart.tsx
@@ -60,12 +60,12 @@ export const GraphWidgetAggregateChart = ({
           </StyledTrendPercentageValue>
           {trendPercentage >= 0 ? (
             <IconTrendingUp
-              color={theme.color.turquoise40}
+              color={theme.color.turquoise8}
               size={theme.icon.size.md}
             />
           ) : (
             <IconTrendingDown
-              color={theme.adaptiveColors.red4}
+              color={theme.color.red8}
               size={theme.icon.size.md}
             />
           )}
diff --git a/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetBarChart/hooks/__tests__/useBarChartData.test.ts b/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetBarChart/hooks/__tests__/useBarChartData.test.ts
index 2c847b637bc..7a81fd1a00d 100644
--- a/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetBarChart/hooks/__tests__/useBarChartData.test.ts
+++ b/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetBarChart/hooks/__tests__/useBarChartData.test.ts
@@ -17,6 +17,20 @@ describe('useBarChartData', () => {
         hover: ['green3', 'green4'],
       },
       solid: 'greenSolid',
+      variations: [
+        'green1',
+        'green2',
+        'green3',
+        'green4',
+        'green5',
+        'green6',
+        'green7',
+        'green8',
+        'green9',
+        'green10',
+        'green11',
+        'green12',
+      ],
     },
     purple: {
       name: 'purple',
@@ -25,6 +39,20 @@ describe('useBarChartData', () => {
         hover: ['purple3', 'purple4'],
       },
       solid: 'purpleSolid',
+      variations: [
+        'purple1',
+        'purple2',
+        'purple3',
+        'purple4',
+        'purple5',
+        'purple6',
+        'purple7',
+        'purple8',
+        'purple9',
+        'purple10',
+        'purple11',
+        'purple12',
+      ],
     },
   };
 
diff --git a/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetGaugeChart/hooks/__tests__/useGaugeChartData.test.ts b/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetGaugeChart/hooks/__tests__/useGaugeChartData.test.ts
index 33a384ece5e..530f2a2de5c 100644
--- a/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetGaugeChart/hooks/__tests__/useGaugeChartData.test.ts
+++ b/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetGaugeChart/hooks/__tests__/useGaugeChartData.test.ts
@@ -12,6 +12,20 @@ describe('useGaugeChartData', () => {
         hover: ['blue3', 'blue4'],
       },
       solid: 'blueSolid',
+      variations: [
+        'blue1',
+        'blue2',
+        'blue3',
+        'blue4',
+        'blue5',
+        'blue6',
+        'blue7',
+        'blue8',
+        'blue9',
+        'blue10',
+        'blue11',
+        'blue12',
+      ],
     },
     green: {
       name: 'green',
@@ -20,6 +34,20 @@ describe('useGaugeChartData', () => {
         hover: ['green3', 'green4'],
       },
       solid: 'greenSolid',
+      variations: [
+        'green1',
+        'green2',
+        'green3',
+        'green4',
+        'green5',
+        'green6',
+        'green7',
+        'green8',
+        'green9',
+        'green10',
+        'green11',
+        'green12',
+      ],
     },
   };
 
diff --git a/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetLineChart/hooks/__tests__/useLineChartData.test.ts b/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetLineChart/hooks/__tests__/useLineChartData.test.ts
index fd4de091a1b..c48e494608e 100644
--- a/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetLineChart/hooks/__tests__/useLineChartData.test.ts
+++ b/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetLineChart/hooks/__tests__/useLineChartData.test.ts
@@ -14,6 +14,20 @@ describe('useLineChartData', () => {
         hover: ['red3', 'red4'],
       },
       solid: 'redSolid',
+      variations: [
+        'red1',
+        'red2',
+        'red3',
+        'red4',
+        'red5',
+        'red6',
+        'red7',
+        'red8',
+        'red9',
+        'red10',
+        'red11',
+        'red12',
+      ],
     },
     blue: {
       name: 'blue',
@@ -22,6 +36,20 @@ describe('useLineChartData', () => {
         hover: ['blue3', 'blue4'],
       },
       solid: 'blueSolid',
+      variations: [
+        'blue1',
+        'blue2',
+        'blue3',
+        'blue4',
+        'blue5',
+        'blue6',
+        'blue7',
+        'blue8',
+        'blue9',
+        'blue10',
+        'blue11',
+        'blue12',
+      ],
     },
   };
 
diff --git a/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetPieChart/hooks/__tests__/usePieChartData.test.ts b/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetPieChart/hooks/__tests__/usePieChartData.test.ts
index cf7030e9c0d..7a476d37a2e 100644
--- a/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetPieChart/hooks/__tests__/usePieChartData.test.ts
+++ b/packages/twenty-front/src/modules/page-layout/widgets/graph/graphWidgetPieChart/hooks/__tests__/usePieChartData.test.ts
@@ -17,6 +17,20 @@ describe('usePieChartData', () => {
         hover: ['red3', 'red4'],
       },
       solid: 'redSolid',
+      variations: [
+        'red1',
+        'red2',
+        'red3',
+        'red4',
+        'red5',
+        'red6',
+        'red7',
+        'red8',
+        'red9',
+        'red10',
+        'red11',
+        'red12',
+      ],
     },
     blue: {
       name: 'blue',
@@ -25,6 +39,20 @@ describe('usePieChartData', () => {
         hover: ['blue3', 'blue4'],
       },
       solid: 'blueSolid',
+      variations: [
+        'blue1',
+        'blue2',
+        'blue3',
+        'blue4',
+        'blue5',
+        'blue6',
+        'blue7',
+        'blue8',
+        'blue9',
+        'blue10',
+        'blue11',
+        'blue12',
+      ],
     },
   };
 
diff --git a/packages/twenty-front/src/modules/page-layout/widgets/graph/types/GraphColorScheme.ts b/packages/twenty-front/src/modules/page-layout/widgets/graph/types/GraphColorScheme.ts
index b8adee8b5d4..017d139dd44 100644
--- a/packages/twenty-front/src/modules/page-layout/widgets/graph/types/GraphColorScheme.ts
+++ b/packages/twenty-front/src/modules/page-layout/widgets/graph/types/GraphColorScheme.ts
@@ -5,4 +5,18 @@ export type GraphColorScheme = {
     hover: [string, string];
   };
   solid: string;
+  variations: [
+    string,
+    string,
+    string,
+    string,
+    string,
+    string,
+    string,
+    string,
+    string,
+    string,
+    string,
+    string,
+  ];
 };
diff --git a/packages/twenty-front/src/modules/page-layout/widgets/graph/utils/createGraphColorRegistry.ts b/packages/twenty-front/src/modules/page-layout/widgets/graph/utils/createGraphColorRegistry.ts
index a232af28135..9a6c86cc697 100644
--- a/packages/twenty-front/src/modules/page-layout/widgets/graph/utils/createGraphColorRegistry.ts
+++ b/packages/twenty-front/src/modules/page-layout/widgets/graph/utils/createGraphColorRegistry.ts
@@ -8,84 +8,551 @@ export const createGraphColorRegistry = (
   blue: {
     name: 'blue',
     gradient: {
-      normal: [theme.adaptiveColors.blue1, theme.adaptiveColors.blue2],
-      hover: [theme.adaptiveColors.blue3, theme.adaptiveColors.blue4],
+      normal: [theme.color.blue3, theme.color.blue5],
+      hover: [theme.color.blue7, theme.color.blue8],
     },
-    solid: theme.adaptiveColors.blue4,
+    solid: theme.color.blue8,
+    variations: [
+      theme.color.blue1,
+      theme.color.blue2,
+      theme.color.blue3,
+      theme.color.blue4,
+      theme.color.blue5,
+      theme.color.blue6,
+      theme.color.blue7,
+      theme.color.blue8,
+      theme.color.blue9,
+      theme.color.blue10,
+      theme.color.blue11,
+      theme.color.blue12,
+    ],
   },
   purple: {
     name: 'purple',
     gradient: {
-      normal: [theme.adaptiveColors.purple1, theme.adaptiveColors.purple2],
-      hover: [theme.adaptiveColors.purple3, theme.adaptiveColors.purple4],
+      normal: [theme.color.purple3, theme.color.purple5],
+      hover: [theme.color.purple7, theme.color.purple8],
     },
-    solid: theme.adaptiveColors.purple4,
+    solid: theme.color.purple8,
+    variations: [
+      theme.color.purple1,
+      theme.color.purple2,
+      theme.color.purple3,
+      theme.color.purple4,
+      theme.color.purple5,
+      theme.color.purple6,
+      theme.color.purple7,
+      theme.color.purple8,
+      theme.color.purple9,
+      theme.color.purple10,
+      theme.color.purple11,
+      theme.color.purple12,
+    ],
   },
   turquoise: {
     name: 'turquoise',
     gradient: {
-      normal: [
-        theme.adaptiveColors.turquoise1,
-        theme.adaptiveColors.turquoise2,
-      ],
-      hover: [theme.adaptiveColors.turquoise3, theme.adaptiveColors.turquoise4],
+      normal: [theme.color.turquoise3, theme.color.turquoise5],
+      hover: [theme.color.turquoise7, theme.color.turquoise8],
     },
-    solid: theme.adaptiveColors.turquoise4,
+    solid: theme.color.turquoise8,
+    variations: [
+      theme.color.turquoise1,
+      theme.color.turquoise2,
+      theme.color.turquoise3,
+      theme.color.turquoise4,
+      theme.color.turquoise5,
+      theme.color.turquoise6,
+      theme.color.turquoise7,
+      theme.color.turquoise8,
+      theme.color.turquoise9,
+      theme.color.turquoise10,
+      theme.color.turquoise11,
+      theme.color.turquoise12,
+    ],
   },
   orange: {
     name: 'orange',
     gradient: {
-      normal: [theme.adaptiveColors.orange1, theme.adaptiveColors.orange2],
-      hover: [theme.adaptiveColors.orange3, theme.adaptiveColors.orange4],
+      normal: [theme.color.orange3, theme.color.orange5],
+      hover: [theme.color.orange7, theme.color.orange8],
     },
-    solid: theme.adaptiveColors.orange4,
+    solid: theme.color.orange8,
+    variations: [
+      theme.color.orange1,
+      theme.color.orange2,
+      theme.color.orange3,
+      theme.color.orange4,
+      theme.color.orange5,
+      theme.color.orange6,
+      theme.color.orange7,
+      theme.color.orange8,
+      theme.color.orange9,
+      theme.color.orange10,
+      theme.color.orange11,
+      theme.color.orange12,
+    ],
   },
   pink: {
     name: 'pink',
     gradient: {
-      normal: [theme.adaptiveColors.pink1, theme.adaptiveColors.pink2],
-      hover: [theme.adaptiveColors.pink3, theme.adaptiveColors.pink4],
+      normal: [theme.color.pink3, theme.color.pink5],
+      hover: [theme.color.pink7, theme.color.pink8],
     },
-    solid: theme.adaptiveColors.pink4,
+    solid: theme.color.pink8,
+    variations: [
+      theme.color.pink1,
+      theme.color.pink2,
+      theme.color.pink3,
+      theme.color.pink4,
+      theme.color.pink5,
+      theme.color.pink6,
+      theme.color.pink7,
+      theme.color.pink8,
+      theme.color.pink9,
+      theme.color.pink10,
+      theme.color.pink11,
+      theme.color.pink12,
+    ],
   },
   yellow: {
     name: 'yellow',
     gradient: {
-      normal: [theme.adaptiveColors.yellow1, theme.adaptiveColors.yellow2],
-      hover: [theme.adaptiveColors.yellow3, theme.adaptiveColors.yellow4],
+      normal: [theme.color.yellow3, theme.color.yellow5],
+      hover: [theme.color.yellow7, theme.color.yellow8],
     },
-    solid: theme.adaptiveColors.yellow4,
+    solid: theme.color.yellow8,
+    variations: [
+      theme.color.yellow1,
+      theme.color.yellow2,
+      theme.color.yellow3,
+      theme.color.yellow4,
+      theme.color.yellow5,
+      theme.color.yellow6,
+      theme.color.yellow7,
+      theme.color.yellow8,
+      theme.color.yellow9,
+      theme.color.yellow10,
+      theme.color.yellow11,
+      theme.color.yellow12,
+    ],
   },
   red: {
     name: 'red',
     gradient: {
-      normal: [theme.adaptiveColors.red1, theme.adaptiveColors.red2],
-      hover: [theme.adaptiveColors.red3, theme.adaptiveColors.red4],
+      normal: [theme.color.red3, theme.color.red5],
+      hover: [theme.color.red7, theme.color.red8],
     },
-    solid: theme.adaptiveColors.red4,
+    solid: theme.color.red8,
+    variations: [
+      theme.color.red1,
+      theme.color.red2,
+      theme.color.red3,
+      theme.color.red4,
+      theme.color.red5,
+      theme.color.red6,
+      theme.color.red7,
+      theme.color.red8,
+      theme.color.red9,
+      theme.color.red10,
+      theme.color.red11,
+      theme.color.red12,
+    ],
   },
   green: {
     name: 'green',
     gradient: {
-      normal: [theme.adaptiveColors.green1, theme.adaptiveColors.green2],
-      hover: [theme.adaptiveColors.green3, theme.adaptiveColors.green4],
+      normal: [theme.color.green3, theme.color.green5],
+      hover: [theme.color.green7, theme.color.green8],
     },
-    solid: theme.adaptiveColors.green4,
+    solid: theme.color.green8,
+    variations: [
+      theme.color.green1,
+      theme.color.green2,
+      theme.color.green3,
+      theme.color.green4,
+      theme.color.green5,
+      theme.color.green6,
+      theme.color.green7,
+      theme.color.green8,
+      theme.color.green9,
+      theme.color.green10,
+      theme.color.green11,
+      theme.color.green12,
+    ],
   },
   sky: {
     name: 'sky',
     gradient: {
-      normal: [theme.adaptiveColors.sky1, theme.adaptiveColors.sky2],
-      hover: [theme.adaptiveColors.sky3, theme.adaptiveColors.sky4],
+      normal: [theme.color.sky3, theme.color.sky5],
+      hover: [theme.color.sky7, theme.color.sky8],
     },
-    solid: theme.adaptiveColors.sky4,
+    solid: theme.color.sky8,
+    variations: [
+      theme.color.sky1,
+      theme.color.sky2,
+      theme.color.sky3,
+      theme.color.sky4,
+      theme.color.sky5,
+      theme.color.sky6,
+      theme.color.sky7,
+      theme.color.sky8,
+      theme.color.sky9,
+      theme.color.sky10,
+      theme.color.sky11,
+      theme.color.sky12,
+    ],
   },
   gray: {
     name: 'gray',
     gradient: {
-      normal: [theme.adaptiveColors.gray1, theme.adaptiveColors.gray2],
-      hover: [theme.adaptiveColors.gray3, theme.adaptiveColors.gray4],
+      normal: [theme.color.gray3, theme.color.gray5],
+      hover: [theme.color.gray7, theme.color.gray8],
     },
-    solid: theme.adaptiveColors.gray4,
+    solid: theme.color.gray8,
+    variations: [
+      theme.color.gray1,
+      theme.color.gray2,
+      theme.color.gray3,
+      theme.color.gray4,
+      theme.color.gray5,
+      theme.color.gray6,
+      theme.color.gray7,
+      theme.color.gray8,
+      theme.color.gray9,
+      theme.color.gray10,
+      theme.color.gray11,
+      theme.color.gray12,
+    ],
+  },
+  tomato: {
+    name: 'tomato',
+    gradient: {
+      normal: [theme.color.tomato3, theme.color.tomato5],
+      hover: [theme.color.tomato7, theme.color.tomato8],
+    },
+    solid: theme.color.tomato8,
+    variations: [
+      theme.color.tomato1,
+      theme.color.tomato2,
+      theme.color.tomato3,
+      theme.color.tomato4,
+      theme.color.tomato5,
+      theme.color.tomato6,
+      theme.color.tomato7,
+      theme.color.tomato8,
+      theme.color.tomato9,
+      theme.color.tomato10,
+      theme.color.tomato11,
+      theme.color.tomato12,
+    ],
+  },
+  ruby: {
+    name: 'ruby',
+    gradient: {
+      normal: [theme.color.ruby3, theme.color.ruby5],
+      hover: [theme.color.ruby7, theme.color.ruby8],
+    },
+    solid: theme.color.ruby8,
+    variations: [
+      theme.color.ruby1,
+      theme.color.ruby2,
+      theme.color.ruby3,
+      theme.color.ruby4,
+      theme.color.ruby5,
+      theme.color.ruby6,
+      theme.color.ruby7,
+      theme.color.ruby8,
+      theme.color.ruby9,
+      theme.color.ruby10,
+      theme.color.ruby11,
+      theme.color.ruby12,
+    ],
+  },
+  crimson: {
+    name: 'crimson',
+    gradient: {
+      normal: [theme.color.crimson3, theme.color.crimson5],
+      hover: [theme.color.crimson7, theme.color.crimson8],
+    },
+    solid: theme.color.crimson8,
+    variations: [
+      theme.color.crimson1,
+      theme.color.crimson2,
+      theme.color.crimson3,
+      theme.color.crimson4,
+      theme.color.crimson5,
+      theme.color.crimson6,
+      theme.color.crimson7,
+      theme.color.crimson8,
+      theme.color.crimson9,
+      theme.color.crimson10,
+      theme.color.crimson11,
+      theme.color.crimson12,
+    ],
+  },
+  plum: {
+    name: 'plum',
+    gradient: {
+      normal: [theme.color.plum3, theme.color.plum5],
+      hover: [theme.color.plum7, theme.color.plum8],
+    },
+    solid: theme.color.plum8,
+    variations: [
+      theme.color.plum1,
+      theme.color.plum2,
+      theme.color.plum3,
+      theme.color.plum4,
+      theme.color.plum5,
+      theme.color.plum6,
+      theme.color.plum7,
+      theme.color.plum8,
+      theme.color.plum9,
+      theme.color.plum10,
+      theme.color.plum11,
+      theme.color.plum12,
+    ],
+  },
+  violet: {
+    name: 'violet',
+    gradient: {
+      normal: [theme.color.violet3, theme.color.violet5],
+      hover: [theme.color.violet7, theme.color.violet8],
+    },
+    solid: theme.color.violet8,
+    variations: [
+      theme.color.violet1,
+      theme.color.violet2,
+      theme.color.violet3,
+      theme.color.violet4,
+      theme.color.violet5,
+      theme.color.violet6,
+      theme.color.violet7,
+      theme.color.violet8,
+      theme.color.violet9,
+      theme.color.violet10,
+      theme.color.violet11,
+      theme.color.violet12,
+    ],
+  },
+  iris: {
+    name: 'iris',
+    gradient: {
+      normal: [theme.color.iris3, theme.color.iris5],
+      hover: [theme.color.iris7, theme.color.iris8],
+    },
+    solid: theme.color.iris8,
+    variations: [
+      theme.color.iris1,
+      theme.color.iris2,
+      theme.color.iris3,
+      theme.color.iris4,
+      theme.color.iris5,
+      theme.color.iris6,
+      theme.color.iris7,
+      theme.color.iris8,
+      theme.color.iris9,
+      theme.color.iris10,
+      theme.color.iris11,
+      theme.color.iris12,
+    ],
+  },
+  cyan: {
+    name: 'cyan',
+    gradient: {
+      normal: [theme.color.cyan3, theme.color.cyan5],
+      hover: [theme.color.cyan7, theme.color.cyan8],
+    },
+    solid: theme.color.cyan8,
+    variations: [
+      theme.color.cyan1,
+      theme.color.cyan2,
+      theme.color.cyan3,
+      theme.color.cyan4,
+      theme.color.cyan5,
+      theme.color.cyan6,
+      theme.color.cyan7,
+      theme.color.cyan8,
+      theme.color.cyan9,
+      theme.color.cyan10,
+      theme.color.cyan11,
+      theme.color.cyan12,
+    ],
+  },
+  jade: {
+    name: 'jade',
+    gradient: {
+      normal: [theme.color.jade3, theme.color.jade5],
+      hover: [theme.color.jade7, theme.color.jade8],
+    },
+    solid: theme.color.jade8,
+    variations: [
+      theme.color.jade1,
+      theme.color.jade2,
+      theme.color.jade3,
+      theme.color.jade4,
+      theme.color.jade5,
+      theme.color.jade6,
+      theme.color.jade7,
+      theme.color.jade8,
+      theme.color.jade9,
+      theme.color.jade10,
+      theme.color.jade11,
+      theme.color.jade12,
+    ],
+  },
+  grass: {
+    name: 'grass',
+    gradient: {
+      normal: [theme.color.grass3, theme.color.grass5],
+      hover: [theme.color.grass7, theme.color.grass8],
+    },
+    solid: theme.color.grass8,
+    variations: [
+      theme.color.grass1,
+      theme.color.grass2,
+      theme.color.grass3,
+      theme.color.grass4,
+      theme.color.grass5,
+      theme.color.grass6,
+      theme.color.grass7,
+      theme.color.grass8,
+      theme.color.grass9,
+      theme.color.grass10,
+      theme.color.grass11,
+      theme.color.grass12,
+    ],
+  },
+  mint: {
+    name: 'mint',
+    gradient: {
+      normal: [theme.color.mint3, theme.color.mint5],
+      hover: [theme.color.mint7, theme.color.mint8],
+    },
+    solid: theme.color.mint8,
+    variations: [
+      theme.color.mint1,
+      theme.color.mint2,
+      theme.color.mint3,
+      theme.color.mint4,
+      theme.color.mint5,
+      theme.color.mint6,
+      theme.color.mint7,
+      theme.color.mint8,
+      theme.color.mint9,
+      theme.color.mint10,
+      theme.color.mint11,
+      theme.color.mint12,
+    ],
+  },
+  lime: {
+    name: 'lime',
+    gradient: {
+      normal: [theme.color.lime3, theme.color.lime5],
+      hover: [theme.color.lime7, theme.color.lime8],
+    },
+    solid: theme.color.lime8,
+    variations: [
+      theme.color.lime1,
+      theme.color.lime2,
+      theme.color.lime3,
+      theme.color.lime4,
+      theme.color.lime5,
+      theme.color.lime6,
+      theme.color.lime7,
+      theme.color.lime8,
+      theme.color.lime9,
+      theme.color.lime10,
+      theme.color.lime11,
+      theme.color.lime12,
+    ],
+  },
+  bronze: {
+    name: 'bronze',
+    gradient: {
+      normal: [theme.color.bronze3, theme.color.bronze5],
+      hover: [theme.color.bronze7, theme.color.bronze8],
+    },
+    solid: theme.color.bronze8,
+    variations: [
+      theme.color.bronze1,
+      theme.color.bronze2,
+      theme.color.bronze3,
+      theme.color.bronze4,
+      theme.color.bronze5,
+      theme.color.bronze6,
+      theme.color.bronze7,
+      theme.color.bronze8,
+      theme.color.bronze9,
+      theme.color.bronze10,
+      theme.color.bronze11,
+      theme.color.bronze12,
+    ],
+  },
+  gold: {
+    name: 'gold',
+    gradient: {
+      normal: [theme.color.gold3, theme.color.gold5],
+      hover: [theme.color.gold7, theme.color.gold8],
+    },
+    solid: theme.color.gold8,
+    variations: [
+      theme.color.gold1,
+      theme.color.gold2,
+      theme.color.gold3,
+      theme.color.gold4,
+      theme.color.gold5,
+      theme.color.gold6,
+      theme.color.gold7,
+      theme.color.gold8,
+      theme.color.gold9,
+      theme.color.gold10,
+      theme.color.gold11,
+      theme.color.gold12,
+    ],
+  },
+  brown: {
+    name: 'brown',
+    gradient: {
+      normal: [theme.color.brown3, theme.color.brown5],
+      hover: [theme.color.brown7, theme.color.brown8],
+    },
+    solid: theme.color.brown8,
+    variations: [
+      theme.color.brown1,
+      theme.color.brown2,
+      theme.color.brown3,
+      theme.color.brown4,
+      theme.color.brown5,
+      theme.color.brown6,
+      theme.color.brown7,
+      theme.color.brown8,
+      theme.color.brown9,
+      theme.color.brown10,
+      theme.color.brown11,
+      theme.color.brown12,
+    ],
+  },
+  amber: {
+    name: 'amber',
+    gradient: {
+      normal: [theme.color.amber3, theme.color.amber5],
+      hover: [theme.color.amber7, theme.color.amber8],
+    },
+    solid: theme.color.amber8,
+    variations: [
+      theme.color.amber1,
+      theme.color.amber2,
+      theme.color.amber3,
+      theme.color.amber4,
+      theme.color.amber5,
+      theme.color.amber6,
+      theme.color.amber7,
+      theme.color.amber8,
+      theme.color.amber9,
+      theme.color.amber10,
+      theme.color.amber11,
+      theme.color.amber12,
+    ],
   },
 });
diff --git a/packages/twenty-front/src/modules/page-layout/widgets/graph/utils/generateGroupColor.ts b/packages/twenty-front/src/modules/page-layout/widgets/graph/utils/generateGroupColor.ts
index c3ec9874917..6df93f1ad48 100644
--- a/packages/twenty-front/src/modules/page-layout/widgets/graph/utils/generateGroupColor.ts
+++ b/packages/twenty-front/src/modules/page-layout/widgets/graph/utils/generateGroupColor.ts
@@ -1,6 +1,5 @@
-import { RGBA } from 'twenty-ui/theme';
-
-import { GRAPH_GROUP_COLOR_MINIMUM_ALPHA } from '@/page-layout/widgets/graph/constants/GraphGroupColorMinimumAlpha.constant';
+import { GRAPH_COLOR_SCALE_MAX } from '@/page-layout/widgets/graph/constants/GraphColorScaleMax';
+import { GRAPH_COLOR_SCALE_MIN } from '@/page-layout/widgets/graph/constants/GraphColorScaleMinIndex';
 import { GRAPH_MAXIMUM_NUMBER_OF_GROUP_COLORS } from '@/page-layout/widgets/graph/constants/GraphMaximumNumberOfGroupColors';
 import { type GraphColorScheme } from '@/page-layout/widgets/graph/types/GraphColorScheme';
 
@@ -23,10 +22,14 @@ export const generateGroupColor = ({
     GRAPH_MAXIMUM_NUMBER_OF_GROUP_COLORS,
   );
 
-  const ratio = (effectiveGroupIndex + 1) / effectiveTotalGroups;
-  const alpha =
-    GRAPH_GROUP_COLOR_MINIMUM_ALPHA +
-    (1 - GRAPH_GROUP_COLOR_MINIMUM_ALPHA) * ratio;
+  const colorIndexRange = GRAPH_COLOR_SCALE_MAX - GRAPH_COLOR_SCALE_MIN;
 
-  return RGBA(colorScheme.solid, alpha);
+  const variationIndex =
+    GRAPH_COLOR_SCALE_MIN -
+    1 +
+    Math.floor(
+      ((effectiveGroupIndex + 1) / effectiveTotalGroups) * colorIndexRange,
+    );
+
+  return colorScheme.variations[variationIndex];
 };
diff --git a/packages/twenty-front/src/modules/settings/admin-panel/config-variables/utils/useSourceContent.ts b/packages/twenty-front/src/modules/settings/admin-panel/config-variables/utils/useSourceContent.ts
index 8a015a5f4a4..9b0b647bcb5 100644
--- a/packages/twenty-front/src/modules/settings/admin-panel/config-variables/utils/useSourceContent.ts
+++ b/packages/twenty-front/src/modules/settings/admin-panel/config-variables/utils/useSourceContent.ts
@@ -12,12 +12,12 @@ export const useSourceContent = (source: ConfigSource) => {
     case ConfigSource.DATABASE:
       return {
         text: t`Stored in database`,
-        color: theme.color.blue50,
+        color: theme.color.blue10,
       };
     case ConfigSource.ENVIRONMENT:
       return {
         text: t`Environment variable`,
-        color: theme.color.green50,
+        color: theme.color.green10,
       };
     case ConfigSource.DEFAULT:
       return {
diff --git a/packages/twenty-front/src/modules/settings/components/SettingsRadioCard.tsx b/packages/twenty-front/src/modules/settings/components/SettingsRadioCard.tsx
index 64e04c403e2..66c6c3f05d7 100644
--- a/packages/twenty-front/src/modules/settings/components/SettingsRadioCard.tsx
+++ b/packages/twenty-front/src/modules/settings/components/SettingsRadioCard.tsx
@@ -59,7 +59,7 @@ export const SettingsRadioCard = ({
 
   return (
     <StyledRadioCardContent tabIndex={0} onClick={onClick}>
-      {Icon && <Icon size={theme.icon.size.xl} color={theme.color.gray50} />}
+      {Icon && <Icon size={theme.icon.size.xl} color={theme.color.gray10} />}
       <span>
         {title && <StyledTitle>{title}</StyledTitle>}
         {description && <StyledDescription>{description}</StyledDescription>}
diff --git a/packages/twenty-front/src/modules/settings/data-model/fields/forms/select/components/SettingsDataModelFieldSelectForm.tsx b/packages/twenty-front/src/modules/settings/data-model/fields/forms/select/components/SettingsDataModelFieldSelectForm.tsx
index 6098e1aacc7..69a4e43499d 100644
--- a/packages/twenty-front/src/modules/settings/data-model/fields/forms/select/components/SettingsDataModelFieldSelectForm.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/fields/forms/select/components/SettingsDataModelFieldSelectForm.tsx
@@ -19,6 +19,7 @@ import { applySimpleQuotesToString } from '~/utils/string/applySimpleQuotesToStr
 
 import { AdvancedSettingsWrapper } from '@/settings/components/AdvancedSettingsWrapper';
 import { isAdvancedModeEnabledState } from '@/ui/navigation/navigation-drawer/states/isAdvancedModeEnabledState';
+import { useTheme } from '@emotion/react';
 import { t } from '@lingui/core/macro';
 import { useEffect, useState } from 'react';
 import { useSearchParams } from 'react-router-dom';
@@ -27,7 +28,6 @@ import { isDefined } from 'twenty-shared/utils';
 import { IconPlus, IconPoint } from 'twenty-ui/display';
 import { LightButton } from 'twenty-ui/input';
 import { CardContent, CardFooter } from 'twenty-ui/layout';
-import { MAIN_COLORS } from 'twenty-ui/theme';
 import { SettingsDataModelFieldSelectFormOptionRow } from './SettingsDataModelFieldSelectFormOptionRow';
 
 export const settingsDataModelFieldSelectFormSchema = z.object({
@@ -89,7 +89,7 @@ const StyledLabelContainer = styled.div`
 `;
 
 const StyledIconContainer = styled.div`
-  border-right: 1px solid ${MAIN_COLORS.yellow};
+  border-right: 1px solid ${({ theme }) => theme.color.yellow};
   display: flex;
 
   margin-bottom: ${({ theme }) => theme.spacing(1.5)};
@@ -248,6 +248,8 @@ export const SettingsDataModelFieldSelectForm = ({
     setFormValue('options', newOptions, { shouldDirty: true });
   };
 
+  const theme = useTheme();
+
   return (
     <>
       <Controller
@@ -269,8 +271,8 @@ export const SettingsDataModelFieldSelectForm = ({
                     <StyledIconContainer>
                       <StyledIconPoint
                         size={12}
-                        color={MAIN_COLORS.yellow}
-                        fill={MAIN_COLORS.yellow}
+                        color={theme.color.yellow}
+                        fill={theme.color.yellow}
                       />
                     </StyledIconContainer>
                     <StyledApiKey>{t`API values`}</StyledApiKey>
diff --git a/packages/twenty-front/src/modules/settings/roles/role-permissions/object-level-permissions/object-form/components/OverridableCheckbox.tsx b/packages/twenty-front/src/modules/settings/roles/role-permissions/object-level-permissions/object-form/components/OverridableCheckbox.tsx
index e7cb24fe4dc..072bea943e7 100644
--- a/packages/twenty-front/src/modules/settings/roles/role-permissions/object-level-permissions/object-form/components/OverridableCheckbox.tsx
+++ b/packages/twenty-front/src/modules/settings/roles/role-permissions/object-level-permissions/object-form/components/OverridableCheckbox.tsx
@@ -85,7 +85,7 @@ export const OverridableCheckbox = ({
               <AnimatedRotate animateOnHover={!disabled}>
                 <IconReload
                   size={theme.icon.size.md}
-                  color={theme.adaptiveColors.orange4}
+                  color={theme.color.orange8}
                 />
               </AnimatedRotate>
             </StyledIconWrapper>
diff --git a/packages/twenty-front/src/modules/settings/roles/role-permissions/objects-permissions/components/PermissionIcon.tsx b/packages/twenty-front/src/modules/settings/roles/role-permissions/objects-permissions/components/PermissionIcon.tsx
index 23ac14df8a8..a3bff757138 100644
--- a/packages/twenty-front/src/modules/settings/roles/role-permissions/objects-permissions/components/PermissionIcon.tsx
+++ b/packages/twenty-front/src/modules/settings/roles/role-permissions/objects-permissions/components/PermissionIcon.tsx
@@ -13,10 +13,10 @@ type PermissionIconProps = {
 const StyledIconWrapper = styled.div<{ isRevoked?: boolean }>`
   align-items: center;
   background: ${({ theme, isRevoked }) =>
-    isRevoked ? theme.adaptiveColors.orange1 : theme.adaptiveColors.blue1};
+    isRevoked ? theme.color.orange3 : theme.color.blue3};
   border: 1px solid
     ${({ theme, isRevoked }) =>
-      isRevoked ? theme.adaptiveColors.orange3 : theme.adaptiveColors.blue3};
+      isRevoked ? theme.color.orange7 : theme.color.blue7};
   border-radius: ${({ theme }) => theme.border.radius.sm};
   display: flex;
   height: ${({ theme }) => theme.spacing(4)};
diff --git a/packages/twenty-front/src/modules/spreadsheet-import/components/SpreadsheetImportTable.tsx b/packages/twenty-front/src/modules/spreadsheet-import/components/SpreadsheetImportTable.tsx
index a4988889e3a..c45ce0e2e83 100644
--- a/packages/twenty-front/src/modules/spreadsheet-import/components/SpreadsheetImportTable.tsx
+++ b/packages/twenty-front/src/modules/spreadsheet-import/components/SpreadsheetImportTable.tsx
@@ -4,14 +4,13 @@ import styled from '@emotion/styled';
 import DataGrid, { type DataGridProps } from 'react-data-grid';
 
 import { useSpreadsheetImportInternal } from '@/spreadsheet-import/hooks/useSpreadsheetImportInternal';
-import { RGBA } from 'twenty-ui/theme';
 
 const StyledDataGrid = styled(DataGrid)`
   --rdg-background-color: ${({ theme }) => theme.background.primary};
   --rdg-border-color: ${({ theme }) => theme.border.color.medium};
   --rdg-color: ${({ theme }) => theme.font.color.primary};
   --rdg-error-cell-background-color: ${({ theme }) =>
-    RGBA(theme.color.red, 0.4)};
+    theme.color.transparent.red5};
   --rdg-font-size: ${({ theme }) => theme.font.size.sm};
   --rdg-frozen-cell-box-shadow: none;
   --rdg-header-background-color: ${({ theme }) => theme.background.primary};
@@ -67,15 +66,15 @@ const StyledDataGrid = styled(DataGrid)`
   }
 
   .rdg-cell-error {
-    background-color: ${({ theme }) => theme.adaptiveColors.yellow1};
+    background-color: ${({ theme }) => theme.color.yellow3};
   }
 
   .rdg-cell-warning {
-    background-color: ${({ theme }) => RGBA(theme.color.orange, 0.08)};
+    background-color: ${({ theme }) => theme.color.transparent.orange2};
   }
 
   .rdg-cell-info {
-    background-color: ${({ theme }) => RGBA(theme.color.blue, 0.08)};
+    background-color: ${({ theme }) => theme.color.transparent.blue2};
   }
 
   .rdg-static {
diff --git a/packages/twenty-front/src/modules/ui/input/components/TextArea.tsx b/packages/twenty-front/src/modules/ui/input/components/TextArea.tsx
index 942f89fc4d2..83e9e5c2fc5 100644
--- a/packages/twenty-front/src/modules/ui/input/components/TextArea.tsx
+++ b/packages/twenty-front/src/modules/ui/input/components/TextArea.tsx
@@ -5,7 +5,6 @@ import TextareaAutosize from 'react-textarea-autosize';
 import { usePushFocusItemToFocusStack } from '@/ui/utilities/focus/hooks/usePushFocusItemToFocusStack';
 import { useRemoveFocusItemFromFocusStackById } from '@/ui/utilities/focus/hooks/useRemoveFocusItemFromFocusStackById';
 import { FocusComponentType } from '@/ui/utilities/focus/types/FocusComponentType';
-import { RGBA } from 'twenty-ui/theme';
 import { turnIntoEmptyStringIfWhitespacesOnly } from '~/utils/string/turnIntoEmptyStringIfWhitespacesOnly';
 
 const MAX_ROWS = 5;
@@ -56,7 +55,7 @@ const StyledTextArea = styled(TextareaAutosize)`
   &:focus {
     outline: none;
     ${({ theme }) => {
-      return `box-shadow: 0px 0px 0px 3px ${RGBA(theme.color.blue, 0.1)};
+      return `box-shadow: 0px 0px 0px 3px ${theme.color.transparent.blue2};
       border-color: ${theme.color.blue};`;
     }};
   }
diff --git a/packages/twenty-front/src/modules/ui/layout/modal/components/ConfirmationModal.tsx b/packages/twenty-front/src/modules/ui/layout/modal/components/ConfirmationModal.tsx
index 4cce7f24738..5f0a31a7507 100644
--- a/packages/twenty-front/src/modules/ui/layout/modal/components/ConfirmationModal.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/modal/components/ConfirmationModal.tsx
@@ -53,7 +53,7 @@ export const StyledConfirmationButton = styled(StyledCenteredButton)`
   font-size: ${({ theme }) => theme.font.size.md};
   line-height: ${({ theme }) => theme.text.lineHeight.lg};
   :hover {
-    background-color: ${({ theme }) => theme.color.red10};
+    background-color: ${({ theme }) => theme.color.red3};
   }
 `;
 
diff --git a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx
index 9191cfd7198..eb493f584c2 100644
--- a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx
+++ b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx
@@ -161,7 +161,7 @@ const StyledItemCount = styled.span`
   align-items: center;
   background-color: ${({ theme }) => theme.color.blue};
   border-radius: ${({ theme }) => theme.border.radius.rounded};
-  color: ${({ theme }) => theme.grayScale.gray0};
+  color: ${({ theme }) => theme.grayScale.gray1};
   display: flex;
   font-size: ${({ theme }) => theme.font.size.xs};
   font-weight: ${({ theme }) => theme.font.weight.semiBold};
diff --git a/packages/twenty-front/src/modules/ui/navigation/step-bar/components/Step.tsx b/packages/twenty-front/src/modules/ui/navigation/step-bar/components/Step.tsx
index 541fd1020d8..fae8cbd4eeb 100644
--- a/packages/twenty-front/src/modules/ui/navigation/step-bar/components/Step.tsx
+++ b/packages/twenty-front/src/modules/ui/navigation/step-bar/components/Step.tsx
@@ -118,7 +118,7 @@ export const Step = ({
         {isInPreviousSteps && (
           <AnimatedCheckmark
             isAnimating={isInPreviousSteps}
-            color={theme.grayScale.gray60}
+            color={theme.grayScale.gray12}
           />
         )}
         {!isInPreviousSteps && (
diff --git a/packages/twenty-front/src/modules/ui/utilities/drag-select/components/DragSelect.tsx b/packages/twenty-front/src/modules/ui/utilities/drag-select/components/DragSelect.tsx
index 68eab7e4fbc..a479676a88f 100644
--- a/packages/twenty-front/src/modules/ui/utilities/drag-select/components/DragSelect.tsx
+++ b/packages/twenty-front/src/modules/ui/utilities/drag-select/components/DragSelect.tsx
@@ -27,8 +27,8 @@ const StyledDragSelection = styled.div<SelectionBox>`
   position: absolute;
   z-index: 99;
   opacity: 0.2;
-  border: 1px solid ${({ theme }) => theme.color.blue10};
-  background: ${({ theme }) => theme.color.blue30};
+  border: 1px solid ${({ theme }) => theme.color.blue3};
+  background: ${({ theme }) => theme.color.blue7};
   top: ${({ top }) => top}px;
   left: ${({ left }) => left}px;
   width: ${({ width }) => width}px;
diff --git a/packages/twenty-front/src/modules/ui/utilities/drag-select/components/__stories__/DragSelect.stories.tsx b/packages/twenty-front/src/modules/ui/utilities/drag-select/components/__stories__/DragSelect.stories.tsx
index 3c8450bcc00..dcf392609af 100644
--- a/packages/twenty-front/src/modules/ui/utilities/drag-select/components/__stories__/DragSelect.stories.tsx
+++ b/packages/twenty-front/src/modules/ui/utilities/drag-select/components/__stories__/DragSelect.stories.tsx
@@ -24,7 +24,7 @@ const StyledSelectableItem = styled.div<{ selected?: boolean }>`
   border: 1px solid ${({ theme }) => theme.border.color.medium};
   border-radius: ${({ theme }) => theme.border.radius.sm};
   background: ${({ theme, selected }) =>
-    selected ? theme.color.blue10 : theme.background.secondary};
+    selected ? theme.color.blue3 : theme.background.secondary};
   display: flex;
   align-items: center;
   justify-content: center;
@@ -34,7 +34,7 @@ const StyledSelectableItem = styled.div<{ selected?: boolean }>`
 
   &:hover {
     background: ${({ theme, selected }) =>
-      selected ? theme.color.blue20 : theme.background.tertiary};
+      selected ? theme.color.blue5 : theme.background.tertiary};
   }
 `;
 
diff --git a/packages/twenty-front/src/modules/views/components/SortOrFilterChip.tsx b/packages/twenty-front/src/modules/views/components/SortOrFilterChip.tsx
index eab9512f065..5764b36eed5 100644
--- a/packages/twenty-front/src/modules/views/components/SortOrFilterChip.tsx
+++ b/packages/twenty-front/src/modules/views/components/SortOrFilterChip.tsx
@@ -73,7 +73,7 @@ const StyledDelete = styled.button<{ variant: SortOrFilterChipVariant }>`
     background-color: ${({ theme, variant }) => {
       switch (variant) {
         case 'danger':
-          return theme.color.red20;
+          return theme.color.red5;
         case 'default':
         default:
           return theme.accent.secondary;
diff --git a/packages/twenty-front/src/modules/views/components/ViewBarFilterDropdownAdvancedFilterButton.tsx b/packages/twenty-front/src/modules/views/components/ViewBarFilterDropdownAdvancedFilterButton.tsx
index 99bd5ef34d6..a9a4de42a2f 100644
--- a/packages/twenty-front/src/modules/views/components/ViewBarFilterDropdownAdvancedFilterButton.tsx
+++ b/packages/twenty-front/src/modules/views/components/ViewBarFilterDropdownAdvancedFilterButton.tsx
@@ -27,7 +27,7 @@ import { MenuItem } from 'twenty-ui/navigation';
 import { v4 } from 'uuid';
 
 const StyledPill = styled(Pill)`
-  background: ${({ theme }) => theme.color.blueAccent10};
+  background: ${({ theme }) => theme.color.blue3};
   color: ${({ theme }) => theme.color.blue};
 `;
 
diff --git a/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerDropdown.tsx b/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerDropdown.tsx
index 2de057c17df..8a81ca87299 100644
--- a/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerDropdown.tsx
+++ b/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerDropdown.tsx
@@ -21,7 +21,7 @@ import { MOBILE_VIEWPORT } from 'twenty-ui/theme';
 
 const StyledDropdownLabelAdornments = styled.span`
   align-items: center;
-  color: ${({ theme }) => theme.grayScale.gray35};
+  color: ${({ theme }) => theme.grayScale.gray8};
   display: inline-flex;
   gap: ${({ theme }) => theme.spacing(1)};
   margin-left: ${({ theme }) => theme.spacing(1)};
diff --git a/packages/twenty-front/src/modules/workflow/workflow-diagram/utils/getWorkflowDiagramColors.ts b/packages/twenty-front/src/modules/workflow/workflow-diagram/utils/getWorkflowDiagramColors.ts
index 738391f873b..1fd35a93770 100644
--- a/packages/twenty-front/src/modules/workflow/workflow-diagram/utils/getWorkflowDiagramColors.ts
+++ b/packages/twenty-front/src/modules/workflow/workflow-diagram/utils/getWorkflowDiagramColors.ts
@@ -26,7 +26,7 @@ export const getWorkflowDiagramColors = ({
     case 'RUNNING': {
       return {
         selected: {
-          background: theme.adaptiveColors.yellow1,
+          background: theme.color.yellow3,
           borderColor: theme.color.yellow,
           color: theme.tag.text.yellow,
           titleColor: theme.font.color.primary,
@@ -44,7 +44,7 @@ export const getWorkflowDiagramColors = ({
     case 'FAILED': {
       return {
         selected: {
-          background: theme.adaptiveColors.red1,
+          background: theme.color.red3,
           borderColor: theme.color.red,
           color: theme.tag.text.red,
           titleColor: theme.font.color.primary,
@@ -63,7 +63,7 @@ export const getWorkflowDiagramColors = ({
     case 'SUCCESS': {
       return {
         selected: {
-          background: theme.adaptiveColors.turquoise1,
+          background: theme.color.turquoise3,
           borderColor: theme.color.turquoise,
           color: theme.tag.text.green,
           titleColor: theme.font.color.primary,
@@ -81,7 +81,7 @@ export const getWorkflowDiagramColors = ({
     default: {
       return {
         selected: {
-          background: theme.adaptiveColors.blue1,
+          background: theme.color.blue3,
           borderColor: theme.color.blue,
           color: theme.tag.text.blue,
           titleColor: theme.font.color.primary,
diff --git a/packages/twenty-front/src/modules/workflow/workflow-diagram/workflow-nodes/components/WorkflowDiagramStepNodeIcon.tsx b/packages/twenty-front/src/modules/workflow/workflow-diagram/workflow-nodes/components/WorkflowDiagramStepNodeIcon.tsx
index ed95dac5948..cab7c1e6cc7 100644
--- a/packages/twenty-front/src/modules/workflow/workflow-diagram/workflow-nodes/components/WorkflowDiagramStepNodeIcon.tsx
+++ b/packages/twenty-front/src/modules/workflow/workflow-diagram/workflow-nodes/components/WorkflowDiagramStepNodeIcon.tsx
@@ -52,7 +52,7 @@ export const WorkflowDiagramStepNodeIcon = ({
         case 'DELAY':
         case 'FILTER':
         case 'ITERATOR':
-          return <Icon size={theme.icon.size.md} color={theme.color.green60} />;
+          return <Icon size={theme.icon.size.md} color={theme.color.green12} />;
         default: {
           return (
             <Icon
diff --git a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/utils/__tests__/getActionIconColorOrThrow.test.ts b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/utils/__tests__/getActionIconColorOrThrow.test.ts
index fb42c8e4e24..32a1141d482 100644
--- a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/utils/__tests__/getActionIconColorOrThrow.test.ts
+++ b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/utils/__tests__/getActionIconColorOrThrow.test.ts
@@ -1,17 +1,17 @@
 import { type WorkflowActionType } from '@/workflow/types/Workflow';
 import { type Theme } from '@emotion/react';
-import { COLOR, GRAY_SCALE } from 'twenty-ui/theme';
+import { COLOR_LIGHT, GRAY_SCALE_LIGHT } from 'twenty-ui/theme';
 import { getActionIconColorOrThrow } from '../getActionIconColorOrThrow';
 
 const mockTheme: Theme = {
   color: {
-    orange: COLOR.orange,
-    pink: COLOR.pink,
-    red: COLOR.red,
+    orange: COLOR_LIGHT.orange,
+    pink: COLOR_LIGHT.pink,
+    red: COLOR_LIGHT.red,
   },
   font: {
     color: {
-      tertiary: GRAY_SCALE.gray40,
+      tertiary: GRAY_SCALE_LIGHT.gray9,
     },
   },
 } as Theme;
@@ -85,7 +85,7 @@ describe('getActionIconColorOrThrow', () => {
         actionType: 'FILTER',
       });
 
-      expect(result).toBe(mockTheme.color.green60);
+      expect(result).toBe(mockTheme.color.green12);
     });
   });
 
@@ -93,13 +93,13 @@ describe('getActionIconColorOrThrow', () => {
     it('should use the provided theme colors correctly', () => {
       const customTheme: Theme = {
         color: {
-          red: COLOR.red,
-          orange: COLOR.orange,
-          pink: COLOR.turquoise,
+          red: COLOR_LIGHT.red,
+          orange: COLOR_LIGHT.orange,
+          pink: COLOR_LIGHT.turquoise,
         },
         font: {
           color: {
-            tertiary: GRAY_SCALE.gray50,
+            tertiary: GRAY_SCALE_LIGHT.gray11,
           },
         },
       } as Theme;
@@ -109,28 +109,28 @@ describe('getActionIconColorOrThrow', () => {
           theme: customTheme,
           actionType: 'CODE',
         }),
-      ).toBe(COLOR.red);
+      ).toBe(COLOR_LIGHT.red);
 
       expect(
         getActionIconColorOrThrow({
           theme: customTheme,
           actionType: 'SEND_EMAIL',
         }),
-      ).toBe(COLOR.red);
+      ).toBe(COLOR_LIGHT.red);
 
       expect(
         getActionIconColorOrThrow({
           theme: customTheme,
           actionType: 'AI_AGENT',
         }),
-      ).toBe(COLOR.turquoise);
+      ).toBe(COLOR_LIGHT.turquoise);
 
       expect(
         getActionIconColorOrThrow({
           theme: customTheme,
           actionType: 'CREATE_RECORD',
         }),
-      ).toBe(GRAY_SCALE.gray50);
+      ).toBe(GRAY_SCALE_LIGHT.gray11);
     });
   });
 
@@ -231,49 +231,49 @@ describe('getActionIconColorOrThrow', () => {
     it('should use the provided theme colors correctly', () => {
       const customTheme: Theme = {
         color: {
-          red: COLOR.red,
-          orange: COLOR.orange,
-          pink: COLOR.turquoise,
+          red: COLOR_LIGHT.red,
+          orange: COLOR_LIGHT.orange,
+          pink: COLOR_LIGHT.turquoise,
         },
         font: {
           color: {
-            tertiary: GRAY_SCALE.gray50,
+            tertiary: GRAY_SCALE_LIGHT.gray11,
           },
         },
       } as Theme;
 
       expect(
         getActionIconColorOrThrow({ theme: customTheme, actionType: 'CODE' }),
-      ).toBe(COLOR.red);
+      ).toBe(COLOR_LIGHT.red);
       expect(
         getActionIconColorOrThrow({
           theme: customTheme,
           actionType: 'SEND_EMAIL',
         }),
-      ).toBe(COLOR.red);
+      ).toBe(COLOR_LIGHT.red);
       expect(
         getActionIconColorOrThrow({
           theme: customTheme,
           actionType: 'AI_AGENT',
         }),
-      ).toBe(COLOR.turquoise);
+      ).toBe(COLOR_LIGHT.turquoise);
       expect(
         getActionIconColorOrThrow({
           theme: customTheme,
           actionType: 'CREATE_RECORD',
         }),
-      ).toBe(GRAY_SCALE.gray50);
+      ).toBe(GRAY_SCALE_LIGHT.gray11);
     });
 
     it('should return undefined when red color is missing for SEND_EMAIL action', () => {
       const themeWithoutBlue: Theme = {
         color: {
-          orange: COLOR.orange,
-          pink: COLOR.pink,
+          orange: COLOR_LIGHT.orange,
+          pink: COLOR_LIGHT.pink,
         },
         font: {
           color: {
-            tertiary: GRAY_SCALE.gray40,
+            tertiary: GRAY_SCALE_LIGHT.gray9,
           },
         },
       } as Theme;
diff --git a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/utils/getActionIconColorOrThrow.ts b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/utils/getActionIconColorOrThrow.ts
index 584a7af7830..741d19cbecb 100644
--- a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/utils/getActionIconColorOrThrow.ts
+++ b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/utils/getActionIconColorOrThrow.ts
@@ -26,7 +26,7 @@ export const getActionIconColorOrThrow = ({
     case 'EMPTY':
     case 'FILTER':
     case 'DELAY':
-      return theme.color.green60;
+      return theme.color.green12;
     case 'AI_AGENT':
       return theme.color.pink;
     default:
diff --git a/packages/twenty-front/src/modules/workflow/workflow-trigger/utils/__tests__/getTriggerIconColor.test.ts b/packages/twenty-front/src/modules/workflow/workflow-trigger/utils/__tests__/getTriggerIconColor.test.ts
index b9bb791c2a2..0524dbfd706 100644
--- a/packages/twenty-front/src/modules/workflow/workflow-trigger/utils/__tests__/getTriggerIconColor.test.ts
+++ b/packages/twenty-front/src/modules/workflow/workflow-trigger/utils/__tests__/getTriggerIconColor.test.ts
@@ -1,12 +1,12 @@
 import { type Theme } from '@emotion/react';
-import { COLOR } from 'twenty-ui/theme';
+import { COLOR_LIGHT } from 'twenty-ui/theme';
 import { getTriggerIconColor } from '../getTriggerIconColor';
 
 describe('getTriggerIconColor', () => {
   const mockTheme: Theme = {
     color: {
-      blue: COLOR.blue,
-      purple: COLOR.purple,
+      blue: COLOR_LIGHT.blue,
+      purple: COLOR_LIGHT.purple,
     },
   } as unknown as Theme;
 
@@ -16,7 +16,7 @@ describe('getTriggerIconColor', () => {
       triggerType: 'DATABASE_EVENT',
     });
 
-    expect(result).toBe(COLOR.blue);
+    expect(result).toBe(COLOR_LIGHT.blue);
   });
 
   it('returns the purple color for cron from theme', () => {
@@ -25,14 +25,14 @@ describe('getTriggerIconColor', () => {
       triggerType: 'CRON',
     });
 
-    expect(result).toBe(COLOR.purple);
+    expect(result).toBe(COLOR_LIGHT.purple);
   });
 
   it('works with different theme configurations', () => {
     const differentTheme: Theme = {
       color: {
-        blue: COLOR.blue,
-        purple: COLOR.purple,
+        blue: COLOR_LIGHT.blue,
+        purple: COLOR_LIGHT.purple,
       },
     } as unknown as Theme;
 
@@ -41,14 +41,14 @@ describe('getTriggerIconColor', () => {
       triggerType: 'DATABASE_EVENT',
     });
 
-    expect(result).toBe(COLOR.blue);
+    expect(result).toBe(COLOR_LIGHT.blue);
   });
 
   it('maintains reference to theme.color.blue', () => {
     const customTheme: Theme = {
       color: {
-        blue: COLOR.blue,
-        purple: COLOR.purple,
+        blue: COLOR_LIGHT.blue,
+        purple: COLOR_LIGHT.purple,
       },
     } as unknown as Theme;
 
@@ -57,6 +57,6 @@ describe('getTriggerIconColor', () => {
       triggerType: 'DATABASE_EVENT',
     });
 
-    expect(result).toBe(COLOR.blue);
+    expect(result).toBe(COLOR_LIGHT.blue);
   });
 });
diff --git a/packages/twenty-front/src/pages/settings/data-model/SettingsObjectDetailPage.tsx b/packages/twenty-front/src/pages/settings/data-model/SettingsObjectDetailPage.tsx
index b841ece9400..ee025d3dcb6 100644
--- a/packages/twenty-front/src/pages/settings/data-model/SettingsObjectDetailPage.tsx
+++ b/packages/twenty-front/src/pages/settings/data-model/SettingsObjectDetailPage.tsx
@@ -14,8 +14,11 @@ import styled from '@emotion/styled';
 import { useRecoilState, useRecoilValue } from 'recoil';
 import { AppPath, SettingsPath } from 'twenty-shared/types';
 
+import { isObjectMetadataReadOnly } from '@/object-record/read-only/utils/isObjectMetadataReadOnly';
+import { SettingsItemTypeTag } from '@/settings/components/SettingsItemTypeTag';
 import { activeTabIdComponentState } from '@/ui/layout/tab-list/states/activeTabIdComponentState';
 import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
+import { useTheme } from '@emotion/react';
 import { useLingui } from '@lingui/react/macro';
 import { getSettingsPath, isDefined } from 'twenty-shared/utils';
 import {
@@ -28,13 +31,10 @@ import {
 } from 'twenty-ui/display';
 import { Button } from 'twenty-ui/input';
 import { UndecoratedLink } from 'twenty-ui/navigation';
-import { MAIN_COLORS } from 'twenty-ui/theme';
 import { FeatureFlagKey } from '~/generated/graphql';
 import { useNavigateApp } from '~/hooks/useNavigateApp';
 import { SETTINGS_OBJECT_DETAIL_TABS } from '~/pages/settings/data-model/constants/SettingsObjectDetailTabs';
 import { updatedObjectNamePluralState } from '~/pages/settings/data-model/states/updatedObjectNamePluralState';
-import { SettingsItemTypeTag } from '@/settings/components/SettingsItemTypeTag';
-import { isObjectMetadataReadOnly } from '@/object-record/read-only/utils/isObjectMetadataReadOnly';
 
 const StyledContentContainer = styled.div`
   flex: 1;
@@ -91,6 +91,8 @@ export const SettingsObjectDetailPage = () => {
     setUpdatedObjectNamePlural,
   ]);
 
+  const theme = useTheme();
+
   if (!isDefined(objectMetadataItem)) return <></>;
 
   const tabs = [
@@ -114,8 +116,8 @@ export const SettingsObjectDetailPage = () => {
       pill: (
         <IconPoint
           size={12}
-          color={MAIN_COLORS.yellow}
-          fill={MAIN_COLORS.yellow}
+          color={theme.color.yellow}
+          fill={theme.color.yellow}
         />
       ),
     },
diff --git a/packages/twenty-server/src/engine/core-modules/domain/subdomain-manager/utils/generate-random-subdomain.util.ts b/packages/twenty-server/src/engine/core-modules/domain/subdomain-manager/utils/generate-random-subdomain.util.ts
index 765b770a178..099e72c88ab 100644
--- a/packages/twenty-server/src/engine/core-modules/domain/subdomain-manager/utils/generate-random-subdomain.util.ts
+++ b/packages/twenty-server/src/engine/core-modules/domain/subdomain-manager/utils/generate-random-subdomain.util.ts
@@ -151,9 +151,7 @@ export const generateRandomSubdomain = () => {
     'garnet',
     'jade',
     'lavender',
-    'mauve',
     'navy',
-    'olive',
     'platinum',
     'plum',
     'rose',
diff --git a/packages/twenty-ui/src/display/avatar/components/Avatar.tsx b/packages/twenty-ui/src/display/avatar/components/Avatar.tsx
index f04116bb51b..2b8b8beeb54 100644
--- a/packages/twenty-ui/src/display/avatar/components/Avatar.tsx
+++ b/packages/twenty-ui/src/display/avatar/components/Avatar.tsx
@@ -8,9 +8,10 @@ import { type AvatarSize } from '@ui/display/avatar/types/AvatarSize';
 import { type AvatarType } from '@ui/display/avatar/types/AvatarType';
 import { type IconComponent } from '@ui/display/icon/types/IconComponent';
 import { ThemeContext } from '@ui/theme';
-import { type Nullable, stringToHslColor } from '@ui/utilities';
+import { stringToThemeColorP3String } from '@ui/utilities';
 import { REACT_APP_SERVER_BASE_URL } from '@ui/utilities/config';
 import { useRecoilState } from 'recoil';
+import { type Nullable } from 'twenty-shared/types';
 import { getImageAbsoluteURI } from 'twenty-shared/utils';
 
 const StyledAvatar = styled.div<{
@@ -112,10 +113,20 @@ export const Avatar = ({
 
   const fixedColor = isPlaceholderFirstCharEmpty
     ? theme.font.color.tertiary
-    : (color ?? stringToHslColor(placeholderColorSeed ?? '', 75, 25));
+    : (color ??
+      stringToThemeColorP3String({
+        string: placeholderColorSeed ?? '',
+        theme,
+        variant: 12,
+      }));
   const fixedBackgroundColor = isPlaceholderFirstCharEmpty
     ? theme.background.transparent.light
-    : (backgroundColor ?? stringToHslColor(placeholderColorSeed ?? '', 75, 85));
+    : (backgroundColor ??
+      stringToThemeColorP3String({
+        string: placeholderColorSeed ?? '',
+        theme,
+        variant: 4,
+      }));
 
   const showBackgroundColor = showPlaceholder;
 
diff --git a/packages/twenty-ui/src/display/checkmark/components/AnimatedCheckmark.tsx b/packages/twenty-ui/src/display/checkmark/components/AnimatedCheckmark.tsx
index ac969b1c1d3..0fe806bb9f1 100644
--- a/packages/twenty-ui/src/display/checkmark/components/AnimatedCheckmark.tsx
+++ b/packages/twenty-ui/src/display/checkmark/components/AnimatedCheckmark.tsx
@@ -26,7 +26,7 @@ export const AnimatedCheckmark = ({
     >
       <motion.path
         fill="none"
-        stroke={color ?? theme.grayScale.gray0}
+        stroke={color ?? theme.grayScale.gray1}
         strokeWidth={4}
         d="M14 27l7.8 7.8L38 14"
         pathLength="1"
diff --git a/packages/twenty-ui/src/display/checkmark/components/Checkmark.tsx b/packages/twenty-ui/src/display/checkmark/components/Checkmark.tsx
index 7078c8798c2..1de6aba0ff8 100644
--- a/packages/twenty-ui/src/display/checkmark/components/Checkmark.tsx
+++ b/packages/twenty-ui/src/display/checkmark/components/Checkmark.tsx
@@ -1,6 +1,6 @@
-import React from 'react';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
+import React from 'react';
 
 import { IconCheck } from '@ui/display/icon/components/TablerIcons';
 
@@ -23,7 +23,7 @@ export const Checkmark = ({ className }: CheckmarkProps) => {
 
   return (
     <StyledContainer className={className}>
-      <IconCheck color={theme.grayScale.gray0} size={14} />
+      <IconCheck color={theme.grayScale.gray1} size={14} />
     </StyledContainer>
   );
 };
diff --git a/packages/twenty-ui/src/display/info/components/Info.tsx b/packages/twenty-ui/src/display/info/components/Info.tsx
index 5590dd107b9..878f0e523e2 100644
--- a/packages/twenty-ui/src/display/info/components/Info.tsx
+++ b/packages/twenty-ui/src/display/info/components/Info.tsx
@@ -38,12 +38,12 @@ const StyledInfo = styled.div<Pick<InfoProps, 'accent'>>`
     switch (accent) {
       case 'blue':
         return css`
-          background: ${theme.color.blueAccent20};
-          color: ${theme.color.blue50};
+          background: ${theme.color.blue5};
+          color: ${theme.color.blue10};
         `;
       case 'danger':
         return css`
-          background: ${theme.color.red10};
+          background: ${theme.color.red3};
           color: ${theme.color.red};
         `;
     }
diff --git a/packages/twenty-ui/src/display/tooltip/AppTooltip.tsx b/packages/twenty-ui/src/display/tooltip/AppTooltip.tsx
index 86c063a7024..4950821e7f2 100644
--- a/packages/twenty-ui/src/display/tooltip/AppTooltip.tsx
+++ b/packages/twenty-ui/src/display/tooltip/AppTooltip.tsx
@@ -1,8 +1,6 @@
 import styled from '@emotion/styled';
 import { type PlacesType, type PositionStrategy, Tooltip } from 'react-tooltip';
 
-import { RGBA } from '@ui/theme/constants/Rgba';
-
 export enum TooltipPosition {
   Top = 'top',
   Left = 'left',
@@ -19,11 +17,11 @@ export enum TooltipDelay {
 
 const StyledAppTooltip = styled(Tooltip)<{ width?: string }>`
   backdrop-filter: ${({ theme }) => theme.blur.strong};
-  background-color: ${({ theme }) => RGBA(theme.color.gray80, 0.8)};
+  background-color: ${({ theme }) => theme.color.transparent.gray11};
   border-radius: ${({ theme }) => theme.border.radius.sm};
 
   box-shadow: ${({ theme }) => theme.boxShadow.light};
-  color: ${({ theme }) => theme.grayScale.gray0};
+  color: ${({ theme }) => theme.grayScale.gray1};
 
   font-size: ${({ theme }) => theme.font.size.sm};
   font-weight: ${({ theme }) => theme.font.weight.regular};
diff --git a/packages/twenty-ui/src/input/button/components/AnimatedButton.tsx b/packages/twenty-ui/src/input/button/components/AnimatedButton.tsx
index 359b9be37c8..2363c78024f 100644
--- a/packages/twenty-ui/src/input/button/components/AnimatedButton.tsx
+++ b/packages/twenty-ui/src/input/button/components/AnimatedButton.tsx
@@ -92,18 +92,18 @@ const StyledButton = styled.button<
                       : theme.background.transparent.medium
                   }`
                 : 'none'};
-              color: ${!inverted ? theme.grayScale.gray0 : theme.color.blue};
+              color: ${!inverted ? theme.grayScale.gray1 : theme.color.blue};
               ${disabled
                 ? ''
                 : css`
                     &:hover {
                       background: ${!inverted
-                        ? theme.color.blue50
+                        ? theme.color.blue10
                         : theme.background.secondary};
                     }
                     &:active {
                       background: ${!inverted
-                        ? theme.color.blue60
+                        ? theme.color.blue12
                         : theme.background.tertiary};
                     }
                   `}
@@ -122,7 +122,7 @@ const StyledButton = styled.button<
               box-shadow: ${!disabled && focus
                 ? `0 0 0 3px ${
                     !inverted
-                      ? theme.color.red10
+                      ? theme.color.red3
                       : theme.background.transparent.medium
                   }`
                 : 'none'};
@@ -132,12 +132,12 @@ const StyledButton = styled.button<
                 : css`
                     &:hover {
                       background: ${!inverted
-                        ? theme.color.red40
+                        ? theme.color.red8
                         : theme.background.secondary};
                     }
                     &:active {
                       background: ${!inverted
-                        ? theme.color.red50
+                        ? theme.color.red10
                         : theme.background.tertiary};
                     }
                   `}
@@ -160,10 +160,10 @@ const StyledButton = styled.button<
                     : 'transparent'
                 : variant === 'secondary'
                   ? focus || disabled
-                    ? theme.grayScale.gray0
+                    ? theme.grayScale.gray1
                     : theme.background.transparent.primary
                   : focus
-                    ? theme.grayScale.gray0
+                    ? theme.grayScale.gray1
                     : 'transparent'};
               border-width: 1px 1px 1px 1px !important;
               box-shadow: ${!disabled && focus
@@ -206,10 +206,10 @@ const StyledButton = styled.button<
                     : 'transparent'
                 : variant === 'secondary'
                   ? focus || disabled
-                    ? theme.grayScale.gray0
+                    ? theme.grayScale.gray1
                     : theme.background.transparent.primary
                   : focus
-                    ? theme.grayScale.gray0
+                    ? theme.grayScale.gray1
                     : 'transparent'};
               border-width: 1px 1px 1px 1px !important;
               box-shadow: ${!disabled && focus
@@ -252,16 +252,16 @@ const StyledButton = styled.button<
                     : 'transparent'
                 : variant === 'secondary'
                   ? focus || disabled
-                    ? theme.grayScale.gray0
+                    ? theme.grayScale.gray1
                     : theme.background.transparent.primary
                   : focus
-                    ? theme.grayScale.gray0
+                    ? theme.grayScale.gray1
                     : 'transparent'};
               border-width: 1px 1px 1px 1px !important;
               box-shadow: ${!disabled && focus
                 ? `0 0 0 3px ${
                     !inverted
-                      ? theme.color.red10
+                      ? theme.color.red3
                       : theme.background.transparent.medium
                   }`
                 : 'none'};
@@ -369,7 +369,7 @@ const StyledShortcutLabel = styled.div<{
       case 'danger':
         return variant === 'primary'
           ? theme.border.color.danger
-          : theme.color.red40;
+          : theme.color.red8;
       default:
         return theme.font.color.light;
     }
diff --git a/packages/twenty-ui/src/input/button/components/AnimatedLightIconButton.tsx b/packages/twenty-ui/src/input/button/components/AnimatedLightIconButton.tsx
index 0175a19e835..d2231bf5c87 100644
--- a/packages/twenty-ui/src/input/button/components/AnimatedLightIconButton.tsx
+++ b/packages/twenty-ui/src/input/button/components/AnimatedLightIconButton.tsx
@@ -33,7 +33,7 @@ const StyledButton = styled.button<
     !disabled && focus ? `1px solid ${theme.color.blue}` : 'none'};
   border-radius: ${({ theme }) => theme.border.radius.sm};
   box-shadow: ${({ disabled, theme, focus }) =>
-    !disabled && focus ? `0 0 0 3px ${theme.color.blue10}` : 'none'};
+    !disabled && focus ? `0 0 0 3px ${theme.color.blue3}` : 'none'};
   color: ${({ theme, accent, active, disabled, focus }) => {
     switch (accent) {
       case 'secondary':
diff --git a/packages/twenty-ui/src/input/button/components/Button/Button.tsx b/packages/twenty-ui/src/input/button/components/Button/Button.tsx
index bbdd8ca4661..925945f7b59 100644
--- a/packages/twenty-ui/src/input/button/components/Button/Button.tsx
+++ b/packages/twenty-ui/src/input/button/components/Button/Button.tsx
@@ -5,6 +5,7 @@ import { type IconComponent } from '@ui/display/icon/types/IconComponent';
 import { ButtonHotkeys } from '@ui/input/button/components/Button/internal/ButtonHotKeys';
 import { ButtonIcon } from '@ui/input/button/components/Button/internal/ButtonIcon';
 import { ButtonSoon } from '@ui/input/button/components/Button/internal/ButtonSoon';
+import { GRAY_SCALE_LIGHT } from '@ui/theme';
 import { useIsMobile } from '@ui/utilities';
 import { type ClickOutsideAttributes } from '@ui/utilities/types/ClickOutsideAttributes';
 import React, { useState } from 'react';
@@ -123,18 +124,18 @@ const StyledButton = styled('button', {
                       : theme.background.transparent.medium
                   }`
                 : 'none'};
-              color: ${!inverted ? theme.grayScale.gray0 : theme.color.blue};
+              color: ${!inverted ? GRAY_SCALE_LIGHT.gray1 : theme.color.blue};
               ${disabled
                 ? ''
                 : css`
                     &:hover {
                       background: ${!inverted
-                        ? theme.color.blue50
+                        ? theme.color.blue10
                         : theme.background.secondary};
                     }
                     &:active {
                       background: ${!inverted
-                        ? theme.color.blue60
+                        ? theme.color.blue12
                         : theme.background.tertiary};
                     }
                   `}
@@ -153,7 +154,7 @@ const StyledButton = styled('button', {
               box-shadow: ${!disabled && focus
                 ? `0 0 0 3px ${
                     !inverted
-                      ? theme.color.red10
+                      ? theme.color.red3
                       : theme.background.transparent.medium
                   }`
                 : 'none'};
@@ -163,12 +164,12 @@ const StyledButton = styled('button', {
                 : css`
                     &:hover {
                       background: ${!inverted
-                        ? theme.color.red40
+                        ? theme.color.red8
                         : theme.background.secondary};
                     }
                     &:active {
                       background: ${!inverted
-                        ? theme.color.red50
+                        ? theme.color.red10
                         : theme.background.tertiary};
                     }
                   `}
@@ -191,10 +192,10 @@ const StyledButton = styled('button', {
                     : 'transparent'
                 : variant === 'secondary'
                   ? focus || disabled
-                    ? theme.grayScale.gray0
+                    ? GRAY_SCALE_LIGHT.gray1
                     : theme.background.transparent.primary
                   : focus
-                    ? theme.grayScale.gray0
+                    ? GRAY_SCALE_LIGHT.gray1
                     : 'transparent'};
               border-width: 1px 1px 1px 1px !important;
               box-shadow: ${!disabled && focus
@@ -237,10 +238,10 @@ const StyledButton = styled('button', {
                     : 'transparent'
                 : variant === 'secondary'
                   ? focus || disabled
-                    ? theme.grayScale.gray0
+                    ? GRAY_SCALE_LIGHT.gray1
                     : theme.background.transparent.primary
                   : focus
-                    ? theme.grayScale.gray0
+                    ? GRAY_SCALE_LIGHT.gray1
                     : 'transparent'};
               border-width: 1px 1px 1px 1px !important;
               box-shadow: ${!disabled && focus
@@ -283,23 +284,23 @@ const StyledButton = styled('button', {
                     : 'transparent'
                 : variant === 'secondary'
                   ? focus || disabled
-                    ? theme.grayScale.gray0
+                    ? GRAY_SCALE_LIGHT.gray1
                     : theme.background.transparent.primary
                   : focus
-                    ? theme.grayScale.gray0
+                    ? GRAY_SCALE_LIGHT.gray1
                     : 'transparent'};
               border-width: 1px 1px 1px 1px !important;
               box-shadow: ${!disabled && focus
                 ? `0 0 0 3px ${
                     !inverted
-                      ? theme.color.red10
+                      ? theme.color.red3
                       : theme.background.transparent.medium
                   }`
                 : 'none'};
               color: ${!inverted
                 ? !disabled
                   ? theme.font.color.danger
-                  : theme.color.red20
+                  : theme.color.red5
                 : theme.font.color.inverted};
               &:hover {
                 background: ${!inverted
@@ -386,7 +387,7 @@ const StyledButtonWrapper = styled.div<
                   : theme.font.color.extraLight
                 : theme.font.color.secondary;
             case 'blue':
-              return !inverted ? theme.grayScale.gray0 : theme.color.blue;
+              return !inverted ? GRAY_SCALE_LIGHT.gray1 : theme.color.blue;
             case 'danger':
               return !inverted ? theme.background.primary : theme.color.red;
           }
diff --git a/packages/twenty-ui/src/input/button/components/Button/internal/ButtonHotKeys.tsx b/packages/twenty-ui/src/input/button/components/Button/internal/ButtonHotKeys.tsx
index cb782390055..ab5b482747d 100644
--- a/packages/twenty-ui/src/input/button/components/Button/internal/ButtonHotKeys.tsx
+++ b/packages/twenty-ui/src/input/button/components/Button/internal/ButtonHotKeys.tsx
@@ -37,7 +37,7 @@ const StyledShortcutLabel = styled.div<{
       case 'danger':
         return variant === 'primary'
           ? theme.border.color.danger
-          : theme.color.red40;
+          : theme.color.red8;
       default:
         return theme.font.color.light;
     }
diff --git a/packages/twenty-ui/src/input/button/components/FloatingButton.tsx b/packages/twenty-ui/src/input/button/components/FloatingButton.tsx
index 4aab922e025..5056a40480c 100644
--- a/packages/twenty-ui/src/input/button/components/FloatingButton.tsx
+++ b/packages/twenty-ui/src/input/button/components/FloatingButton.tsx
@@ -59,10 +59,10 @@ const StyledButton = styled('button', {
       ? `0px 2px 4px 0px ${
           theme.background.transparent.light
         }, 0px 0px 4px 0px ${theme.background.transparent.medium}${
-          focus ? `,0 0 0 3px ${theme.color.blue10}` : ''
+          focus ? `,0 0 0 3px ${theme.color.blue3}` : ''
         }`
       : focus
-        ? `0 0 0 3px ${theme.color.blue10}`
+        ? `0 0 0 3px ${theme.color.blue3}`
         : 'none'};
   color: ${({ theme, disabled, focus }) => {
     return !disabled
diff --git a/packages/twenty-ui/src/input/button/components/FloatingIconButton.tsx b/packages/twenty-ui/src/input/button/components/FloatingIconButton.tsx
index 9011029ecc9..662ec3ba77c 100644
--- a/packages/twenty-ui/src/input/button/components/FloatingIconButton.tsx
+++ b/packages/twenty-ui/src/input/button/components/FloatingIconButton.tsx
@@ -63,7 +63,7 @@ const StyledButton = styled('button', { shouldForwardProp })<
     applyShadow
       ? theme.boxShadow.light
       : focus
-        ? `0 0 0 3px ${theme.color.blue10}`
+        ? `0 0 0 3px ${theme.color.blue3}`
         : 'none'};
   box-sizing: border-box;
   color: ${({ theme, disabled, focus }) => {
diff --git a/packages/twenty-ui/src/input/button/components/IconButton.tsx b/packages/twenty-ui/src/input/button/components/IconButton.tsx
index 87d02fb22e5..6afea934288 100644
--- a/packages/twenty-ui/src/input/button/components/IconButton.tsx
+++ b/packages/twenty-ui/src/input/button/components/IconButton.tsx
@@ -1,6 +1,7 @@
 import { css, useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { type IconComponent } from '@ui/display';
+import { GRAY_SCALE_LIGHT } from '@ui/theme';
 import React from 'react';
 
 export type IconButtonSize = 'medium' | 'small';
@@ -70,17 +71,17 @@ const StyledButton = styled.button<
               box-shadow: ${!disabled && focus
                 ? `0 0 0 3px ${theme.accent.tertiary}`
                 : 'none'};
-              color: ${theme.grayScale.gray0};
+              color: ${GRAY_SCALE_LIGHT.gray1};
               opacity: ${disabled ? 0.24 : 1};
 
               ${disabled
                 ? ''
                 : css`
                     &:hover {
-                      background: ${theme.color.blue50};
+                      background: ${theme.color.blue10};
                     }
                     &:active {
-                      background: ${theme.color.blue60};
+                      background: ${theme.color.blue12};
                     }
                   `}
             `;
@@ -94,9 +95,9 @@ const StyledButton = styled.button<
                 : 'transparent'};
               border-width: ${!disabled && focus ? '1px 1px !important' : 0};
               box-shadow: ${!disabled && focus
-                ? `0 0 0 3px ${theme.color.red10}`
+                ? `0 0 0 3px ${theme.color.red3}`
                 : 'none'};
-              color: ${theme.grayScale.gray0};
+              color: ${GRAY_SCALE_LIGHT.gray1};
               opacity: ${disabled ? 0.24 : 1};
 
               ${disabled
@@ -104,7 +105,7 @@ const StyledButton = styled.button<
                 : css`
                     &:hover,
                     &:active {
-                      background: ${theme.color.red50};
+                      background: ${theme.color.red10};
                     }
                   `}
             `;
@@ -153,7 +154,7 @@ const StyledButton = styled.button<
               border-color: ${variant === 'secondary'
                 ? !disabled
                   ? theme.color.blue
-                  : theme.color.blue20
+                  : theme.color.blue5
                 : focus
                   ? theme.color.blue
                   : 'transparent'};
@@ -183,9 +184,9 @@ const StyledButton = styled.button<
                   : 'transparent'};
               border-width: ${!disabled && focus ? '1px 1px !important' : 0};
               box-shadow: ${!disabled && focus
-                ? `0 0 0 3px ${theme.color.red10}`
+                ? `0 0 0 3px ${theme.color.red3}`
                 : 'none'};
-              color: ${!disabled ? theme.font.color.danger : theme.color.red20};
+              color: ${!disabled ? theme.font.color.danger : theme.color.red5};
               &:hover {
                 background: ${!disabled
                   ? theme.background.danger
diff --git a/packages/twenty-ui/src/input/button/components/LightButton.tsx b/packages/twenty-ui/src/input/button/components/LightButton.tsx
index 475e4091f92..6fbe252096e 100644
--- a/packages/twenty-ui/src/input/button/components/LightButton.tsx
+++ b/packages/twenty-ui/src/input/button/components/LightButton.tsx
@@ -27,7 +27,7 @@ const StyledButton = styled.button<
 
   border-radius: ${({ theme }) => theme.border.radius.sm};
   box-shadow: ${({ theme, focus }) =>
-    focus ? `0 0 0 3px  ${theme.color.blue10}` : 'none'};
+    focus ? `0 0 0 3px  ${theme.color.blue3}` : 'none'};
   color: ${({ theme, accent, active, disabled, focus }) => {
     switch (accent) {
       case 'secondary':
diff --git a/packages/twenty-ui/src/input/button/components/LightIconButton.tsx b/packages/twenty-ui/src/input/button/components/LightIconButton.tsx
index 632d00399c8..a336a793c49 100644
--- a/packages/twenty-ui/src/input/button/components/LightIconButton.tsx
+++ b/packages/twenty-ui/src/input/button/components/LightIconButton.tsx
@@ -30,7 +30,7 @@ const StyledButton = styled.button<
     !disabled && focus ? `1px solid ${theme.color.blue}` : 'none'};
   border-radius: ${({ theme }) => theme.border.radius.sm};
   box-shadow: ${({ disabled, theme, focus }) =>
-    !disabled && focus ? `0 0 0 3px ${theme.color.blue10}` : 'none'};
+    !disabled && focus ? `0 0 0 3px ${theme.color.blue3}` : 'none'};
   color: ${({ theme, accent, active, disabled, focus }) => {
     switch (accent) {
       case 'secondary':
diff --git a/packages/twenty-ui/src/input/code-editor/theme/utils/getBaseCodeEditorTheme.ts b/packages/twenty-ui/src/input/code-editor/theme/utils/getBaseCodeEditorTheme.ts
index ec2a40c1db4..6e571e6b058 100644
--- a/packages/twenty-ui/src/input/code-editor/theme/utils/getBaseCodeEditorTheme.ts
+++ b/packages/twenty-ui/src/input/code-editor/theme/utils/getBaseCodeEditorTheme.ts
@@ -1,5 +1,35 @@
 import { type ThemeType } from '@ui/theme';
 import { type editor } from 'monaco-editor';
+import { isDefined } from 'twenty-shared/utils';
+
+const convertColorToHex = (color: string): string => {
+  const displayP3Match = color.match(
+    /color\(display-p3\s+([\d.]+)\s+([\d.]+)\s+([\d.]+)(?:\s+\/\s+([\d.]+))?\)/,
+  );
+
+  if (isDefined(displayP3Match)) {
+    const [, r, g, b, a] = displayP3Match;
+    const rHex = Math.round(parseFloat(r) * 255)
+      .toString(16)
+      .padStart(2, '0');
+    const gHex = Math.round(parseFloat(g) * 255)
+      .toString(16)
+      .padStart(2, '0');
+    const bHex = Math.round(parseFloat(b) * 255)
+      .toString(16)
+      .padStart(2, '0');
+
+    if (isDefined(a)) {
+      const aHex = Math.round(parseFloat(a) * 255)
+        .toString(16)
+        .padStart(2, '0');
+      return `#${rHex}${gHex}${bHex}${aHex}`;
+    }
+    return `#${rHex}${gHex}${bHex}`;
+  }
+
+  return color;
+};
 
 export const getBaseCodeEditorTheme = ({
   theme,
@@ -12,26 +42,32 @@ export const getBaseCodeEditorTheme = ({
     rules: [
       {
         token: '',
-        foreground: theme.code.text.gray,
+        foreground: convertColorToHex(theme.code.text.gray),
         fontStyle: 'bold',
       },
-      { token: 'keyword', foreground: theme.code.text.sky },
+      { token: 'keyword', foreground: convertColorToHex(theme.code.text.sky) },
       {
         token: 'delimiter',
-        foreground: theme.code.text.gray,
+        foreground: convertColorToHex(theme.code.text.gray),
       },
-      { token: 'string', foreground: theme.code.text.pink },
+      { token: 'string', foreground: convertColorToHex(theme.code.text.pink) },
       {
         token: 'comment',
-        foreground: theme.code.text.orange,
+        foreground: convertColorToHex(theme.code.text.orange),
       },
     ],
     colors: {
       'editor.background': '#00000000',
-      'editorCursor.foreground': theme.font.color.primary,
-      'editorLineNumber.foreground': theme.font.color.extraLight,
-      'editorLineNumber.activeForeground': theme.font.color.light,
-      'editor.lineHighlightBackground': theme.background.tertiary,
+      'editorCursor.foreground': convertColorToHex(theme.font.color.primary),
+      'editorLineNumber.foreground': convertColorToHex(
+        theme.font.color.extraLight,
+      ),
+      'editorLineNumber.activeForeground': convertColorToHex(
+        theme.font.color.light,
+      ),
+      'editor.lineHighlightBackground': convertColorToHex(
+        theme.background.tertiary,
+      ),
     },
   };
 };
diff --git a/packages/twenty-ui/src/input/color-scheme/components/ColorSchemeCard.tsx b/packages/twenty-ui/src/input/color-scheme/components/ColorSchemeCard.tsx
index 1896cce530f..ac55d9f18b3 100644
--- a/packages/twenty-ui/src/input/color-scheme/components/ColorSchemeCard.tsx
+++ b/packages/twenty-ui/src/input/color-scheme/components/ColorSchemeCard.tsx
@@ -1,6 +1,7 @@
 import styled from '@emotion/styled';
 import { Checkmark } from '@ui/display/checkmark/components/Checkmark';
 import { type ColorScheme } from '@ui/input/types/ColorScheme';
+import { GRAY_SCALE_DARK, GRAY_SCALE_LIGHT } from '@ui/theme';
 import {
   AnimatePresence,
   type AnimationControls,
@@ -13,22 +14,22 @@ const StyledColorSchemeBackground = styled.div<
   Pick<ColorSchemeCardProps, 'variant'>
 >`
   align-items: flex-end;
-  background: ${({ variant, theme }) => {
+  background: ${({ variant }) => {
     switch (variant) {
       case 'Dark':
-        return theme.grayScale.gray75;
+        return GRAY_SCALE_DARK.gray4;
       case 'Light':
       default:
-        return theme.grayScale.gray15;
+        return GRAY_SCALE_LIGHT.gray4;
     }
   }};
-  border: ${({ variant, theme }) => {
+  border: ${({ variant }) => {
     switch (variant) {
       case 'Dark':
-        return `1px solid ${theme.grayScale.gray70};`;
+        return `1px solid ${GRAY_SCALE_DARK.gray5};`;
       case 'Light':
       default:
-        return `1px solid ${theme.grayScale.gray20};`;
+        return `1px solid ${GRAY_SCALE_LIGHT.gray5};`;
     }
   }};
   border-radius: ${({ theme }) => theme.border.radius.md};
@@ -46,42 +47,42 @@ const StyledColorSchemeBackground = styled.div<
 const StyledColorSchemeContent = styled(motion.div)<
   Pick<ColorSchemeCardProps, 'variant'>
 >`
-  background: ${({ theme, variant }) => {
+  background: ${({ variant }) => {
     switch (variant) {
       case 'Dark':
-        return theme.grayScale.gray75;
+        return GRAY_SCALE_DARK.gray1;
       case 'Light':
-        return theme.grayScale.gray0;
+        return GRAY_SCALE_LIGHT.gray1;
     }
   }};
 
-  border-left: ${({ variant, theme }) => {
+  border-left: ${({ variant }) => {
     switch (variant) {
       case 'Dark':
-        return `1px solid ${theme.grayScale.gray60};`;
+        return `1px solid ${GRAY_SCALE_DARK.gray5};`;
       case 'Light':
       default:
-        return `1px solid ${theme.grayScale.gray20};`;
+        return `1px solid ${GRAY_SCALE_LIGHT.gray5};`;
     }
   }};
   border-radius: ${({ theme }) => theme.border.radius.md} 0px 0px 0px;
-  border-top: ${({ variant, theme }) => {
+  border-top: ${({ variant }) => {
     switch (variant) {
       case 'Dark':
-        return `1px solid ${theme.grayScale.gray60};`;
+        return `1px solid ${GRAY_SCALE_DARK.gray5};`;
       case 'Light':
       default:
-        return `1px solid ${theme.grayScale.gray20};`;
+        return `1px solid ${GRAY_SCALE_LIGHT.gray5};`;
     }
   }};
   box-sizing: border-box;
-  color: ${({ variant, theme }) => {
+  color: ${({ variant }) => {
     switch (variant) {
       case 'Dark':
-        return theme.grayScale.gray30;
+        return GRAY_SCALE_DARK.gray12;
       case 'Light':
       default:
-        return theme.grayScale.gray60;
+        return GRAY_SCALE_LIGHT.gray12;
     }
   }};
   display: flex;
diff --git a/packages/twenty-ui/src/input/components/Checkbox.tsx b/packages/twenty-ui/src/input/components/Checkbox.tsx
index 1000d5cd87f..106876a18bf 100644
--- a/packages/twenty-ui/src/input/components/Checkbox.tsx
+++ b/packages/twenty-ui/src/input/components/Checkbox.tsx
@@ -113,8 +113,8 @@ const StyledInput = styled.input<InputProps>`
       if (!(indeterminate || isChecked)) return 'transparent';
       return disabled
         ? accent === CheckboxAccent.Blue
-          ? theme.adaptiveColors.blue3
-          : theme.adaptiveColors.orange3
+          ? theme.color.blue7
+          : theme.color.orange7
         : accent === CheckboxAccent.Blue
           ? theme.color.blue
           : theme.color.orange;
@@ -131,8 +131,8 @@ const StyledInput = styled.input<InputProps>`
         case indeterminate || isChecked:
           return disabled
             ? accent === CheckboxAccent.Blue
-              ? theme.adaptiveColors.blue3
-              : theme.adaptiveColors.orange3
+              ? theme.color.blue7
+              : theme.color.orange7
             : accent === CheckboxAccent.Blue
               ? theme.color.blue
               : theme.color.orange;
diff --git a/packages/twenty-ui/src/input/components/Radio.tsx b/packages/twenty-ui/src/input/components/Radio.tsx
index 684116ce352..7f3e003ff35 100644
--- a/packages/twenty-ui/src/input/components/Radio.tsx
+++ b/packages/twenty-ui/src/input/components/Radio.tsx
@@ -1,7 +1,6 @@
 import styled from '@emotion/styled';
 import { motion } from 'framer-motion';
 import * as React from 'react';
-import { RGBA } from '@ui/theme';
 import { RadioGroup } from './RadioGroup';
 
 export enum RadioSize {
@@ -56,7 +55,7 @@ const StyledRadioInput = styled(motion.input)<RadioInputProps>`
         if (!checked) {
           return theme.background.tertiary;
         }
-        return RGBA(theme.color.blue, 0.12);
+        return theme.color.transparent.blue2;
       }};
   }
 
@@ -64,7 +63,7 @@ const StyledRadioInput = styled(motion.input)<RadioInputProps>`
     background-color: ${({ theme }) => theme.color.blue};
     border: none;
     &::after {
-      background-color: ${({ theme }) => theme.grayScale.gray0};
+      background-color: ${({ theme }) => theme.grayScale.gray1};
       border-radius: 50%;
       content: '';
       height: ${({ 'radio-size': radioSize }) =>
diff --git a/packages/twenty-ui/src/input/components/__stories__/Toggle.stories.tsx b/packages/twenty-ui/src/input/components/__stories__/Toggle.stories.tsx
index dedc1964700..65720916412 100644
--- a/packages/twenty-ui/src/input/components/__stories__/Toggle.stories.tsx
+++ b/packages/twenty-ui/src/input/components/__stories__/Toggle.stories.tsx
@@ -4,7 +4,7 @@ import {
   type CatalogStory,
   ComponentDecorator,
 } from '@ui/testing';
-import { MAIN_COLORS } from '@ui/theme';
+import { MAIN_COLORS_LIGHT } from '@ui/theme';
 import { useState } from 'react';
 
 import { Toggle, type ToggleSize } from '../Toggle';
@@ -88,7 +88,7 @@ export const Catalog: CatalogStory<Story, typeof InteractiveToggle> = {
             if (color === 'default') {
               return {};
             }
-            return { color: MAIN_COLORS.yellow };
+            return { color: MAIN_COLORS_LIGHT.yellow };
           },
         },
       ],
diff --git a/packages/twenty-ui/src/json-visualizer/components/internal/JsonNodeLabel.tsx b/packages/twenty-ui/src/json-visualizer/components/internal/JsonNodeLabel.tsx
index c3f981927a0..c99f27f2256 100644
--- a/packages/twenty-ui/src/json-visualizer/components/internal/JsonNodeLabel.tsx
+++ b/packages/twenty-ui/src/json-visualizer/components/internal/JsonNodeLabel.tsx
@@ -9,13 +9,13 @@ const StyledLabelContainer = styled.span<{
   align-items: center;
   background-color: ${({ theme, highlighting }) =>
     highlighting === 'blue'
-      ? theme.adaptiveColors.blue1
+      ? theme.color.blue3
       : highlighting === 'red'
         ? theme.background.danger
         : theme.background.transparent.lighter};
   border-color: ${({ theme, highlighting }) =>
     highlighting === 'blue'
-      ? theme.adaptiveColors.blue2
+      ? theme.color.blue5
       : highlighting === 'red'
         ? theme.border.color.danger
         : theme.border.color.medium};
diff --git a/packages/twenty-ui/src/json-visualizer/components/internal/JsonNodeValue.tsx b/packages/twenty-ui/src/json-visualizer/components/internal/JsonNodeValue.tsx
index fe6d46394ed..6498a222ee9 100644
--- a/packages/twenty-ui/src/json-visualizer/components/internal/JsonNodeValue.tsx
+++ b/packages/twenty-ui/src/json-visualizer/components/internal/JsonNodeValue.tsx
@@ -9,9 +9,9 @@ const StyledText = styled.span<{
   box-sizing: border-box;
   color: ${({ theme, highlighting }) =>
     highlighting === 'blue'
-      ? theme.adaptiveColors.blue4
+      ? theme.color.blue8
       : highlighting === 'red'
-        ? theme.adaptiveColors.red4
+        ? theme.color.red8
         : theme.font.color.tertiary};
   display: inline-flex;
   height: 24px;
diff --git a/packages/twenty-ui/src/layout/animated-expandable-container/__stories__/AnimatedExpandableContainer.stories.tsx b/packages/twenty-ui/src/layout/animated-expandable-container/__stories__/AnimatedExpandableContainer.stories.tsx
index 23762649fb1..d95e0ac7e64 100644
--- a/packages/twenty-ui/src/layout/animated-expandable-container/__stories__/AnimatedExpandableContainer.stories.tsx
+++ b/packages/twenty-ui/src/layout/animated-expandable-container/__stories__/AnimatedExpandableContainer.stories.tsx
@@ -6,7 +6,7 @@ import { AnimatedExpandableContainer } from '../components/AnimatedExpandableCon
 
 const StyledButton = styled.button`
   padding: ${({ theme }) => theme.spacing(2)} ${({ theme }) => theme.spacing(4)};
-  background-color: ${({ theme }) => theme.color.blue50};
+  background-color: ${({ theme }) => theme.color.blue10};
   color: ${({ theme }) => theme.font.color.primary};
   border: none;
   border-radius: ${({ theme }) => theme.spacing(1)};
@@ -14,7 +14,7 @@ const StyledButton = styled.button`
   margin-bottom: ${({ theme }) => theme.spacing(3)};
 
   &:hover {
-    background-color: ${({ theme }) => theme.color.blue40};
+    background-color: ${({ theme }) => theme.color.blue8};
   }
 `;
 
diff --git a/packages/twenty-ui/src/navigation/link/components/AdvancedSettingsToggle.tsx b/packages/twenty-ui/src/navigation/link/components/AdvancedSettingsToggle.tsx
index 2541d6e70f8..f6d0e8e531c 100644
--- a/packages/twenty-ui/src/navigation/link/components/AdvancedSettingsToggle.tsx
+++ b/packages/twenty-ui/src/navigation/link/components/AdvancedSettingsToggle.tsx
@@ -1,7 +1,7 @@
+import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { IconPoint } from '@ui/display';
 import { Toggle } from '@ui/input';
-import { MAIN_COLORS } from '@ui/theme';
 import { useId } from 'react';
 
 const StyledContainer = styled.div`
@@ -50,13 +50,15 @@ export const AdvancedSettingsToggle = ({
   };
   const instanceId = useId();
 
+  const theme = useTheme();
+
   return (
     <StyledContainer>
       <StyledIconContainer>
         <IconPoint
           size={12}
-          color={MAIN_COLORS.yellow}
-          fill={MAIN_COLORS.yellow}
+          color={theme.color.yellow}
+          fill={theme.color.yellow}
         />
       </StyledIconContainer>
       <StyledToggleContainer htmlFor={instanceId}>
@@ -65,7 +67,7 @@ export const AdvancedSettingsToggle = ({
         <Toggle
           id={instanceId}
           onChange={onChange}
-          color={MAIN_COLORS.yellow}
+          color={theme.color.yellow}
           value={isAdvancedModeEnabled}
         />
       </StyledToggleContainer>
diff --git a/packages/twenty-ui/src/navigation/menu/menu-item/components/MenuItemSelectColor.tsx b/packages/twenty-ui/src/navigation/menu/menu-item/components/MenuItemSelectColor.tsx
index 38fc9f08f02..b1df1e2de0e 100644
--- a/packages/twenty-ui/src/navigation/menu/menu-item/components/MenuItemSelectColor.tsx
+++ b/packages/twenty-ui/src/navigation/menu/menu-item/components/MenuItemSelectColor.tsx
@@ -21,16 +21,31 @@ type MenuItemSelectColorProps = {
 };
 
 export const colorLabels: Record<ThemeColor, string> = {
-  green: 'Green',
+  gray: 'Gray',
+  tomato: 'Tomato',
+  red: 'Red',
+  ruby: 'Ruby',
+  crimson: 'Crimson',
+  pink: 'Pink',
+  plum: 'Plum',
+  purple: 'Purple',
+  violet: 'Violet',
+  iris: 'Iris',
+  cyan: 'Cyan',
   turquoise: 'Turquoise',
   sky: 'Sky',
   blue: 'Blue',
-  purple: 'Purple',
-  pink: 'Pink',
-  red: 'Red',
+  jade: 'Jade',
+  green: 'Green',
+  grass: 'Grass',
+  mint: 'Mint',
+  lime: 'Lime',
+  bronze: 'Bronze',
+  gold: 'Gold',
+  brown: 'Brown',
   orange: 'Orange',
+  amber: 'Amber',
   yellow: 'Yellow',
-  gray: 'Gray',
 };
 
 export const MenuItemSelectColor = ({
diff --git a/packages/twenty-ui/src/navigation/navigation-bar/components/NavigationBarItem.tsx b/packages/twenty-ui/src/navigation/navigation-bar/components/NavigationBarItem.tsx
index 62010254290..7f893f57454 100644
--- a/packages/twenty-ui/src/navigation/navigation-bar/components/NavigationBarItem.tsx
+++ b/packages/twenty-ui/src/navigation/navigation-bar/components/NavigationBarItem.tsx
@@ -35,7 +35,7 @@ export const NavigationBarItem = ({
 
   return (
     <StyledIconButton isActive={isActive} onClick={onClick}>
-      <Icon color={theme.color.gray50} size={theme.icon.size.lg} />
+      <Icon color={theme.color.gray10} size={theme.icon.size.lg} />
     </StyledIconButton>
   );
 };
diff --git a/packages/twenty-ui/src/testing/decorators/ComponentDecorator.tsx b/packages/twenty-ui/src/testing/decorators/ComponentDecorator.tsx
index 1681e3953d6..9fac6823b79 100644
--- a/packages/twenty-ui/src/testing/decorators/ComponentDecorator.tsx
+++ b/packages/twenty-ui/src/testing/decorators/ComponentDecorator.tsx
@@ -1,6 +1,6 @@
 import { type Decorator } from '@storybook/react';
 
-import { GRAY_SCALE, MAIN_COLORS } from '@ui/theme';
+import { GRAY_SCALE_LIGHT, MAIN_COLORS_LIGHT } from '@ui/theme';
 
 import { ComponentStorybookLayout } from '../ComponentStorybookLayout';
 
@@ -9,11 +9,11 @@ const getBackgroundColor = (inverted: boolean, accent: string) => {
 
   switch (accent) {
     case 'default':
-      return GRAY_SCALE.gray50;
+      return GRAY_SCALE_LIGHT.gray11;
     case 'danger':
-      return MAIN_COLORS.red;
+      return MAIN_COLORS_LIGHT.red;
     case 'blue':
-      return MAIN_COLORS.blue;
+      return MAIN_COLORS_LIGHT.blue;
     default:
       return undefined;
   }
diff --git a/packages/twenty-ui/src/theme/constants/AccentDark.ts b/packages/twenty-ui/src/theme/constants/AccentDark.ts
index 35918883d30..ad81c0c5d26 100644
--- a/packages/twenty-ui/src/theme/constants/AccentDark.ts
+++ b/packages/twenty-ui/src/theme/constants/AccentDark.ts
@@ -1,10 +1,10 @@
-import { COLOR } from './Colors';
+import { COLOR_DARK } from '@ui/theme/constants/ColorsDark';
 
 export const ACCENT_DARK = {
-  primary: COLOR.blueAccent75,
-  secondary: COLOR.blueAccent80,
-  tertiary: COLOR.blueAccent85,
-  quaternary: COLOR.blueAccent90,
-  accent3570: COLOR.blueAccent70,
-  accent4060: COLOR.blueAccent60,
+  primary: COLOR_DARK.blue5,
+  secondary: COLOR_DARK.blue5,
+  tertiary: COLOR_DARK.blue3,
+  quaternary: COLOR_DARK.blue2,
+  accent3570: COLOR_DARK.blue8,
+  accent4060: COLOR_DARK.blue8,
 };
diff --git a/packages/twenty-ui/src/theme/constants/AccentLight.ts b/packages/twenty-ui/src/theme/constants/AccentLight.ts
index 7c898969720..ca089977f40 100644
--- a/packages/twenty-ui/src/theme/constants/AccentLight.ts
+++ b/packages/twenty-ui/src/theme/constants/AccentLight.ts
@@ -1,10 +1,10 @@
-import { COLOR } from './Colors';
+import { COLOR_LIGHT } from '@ui/theme/constants/ColorsLight';
 
 export const ACCENT_LIGHT = {
-  primary: COLOR.blueAccent25,
-  secondary: COLOR.blueAccent20,
-  tertiary: COLOR.blueAccent15,
-  quaternary: COLOR.blueAccent10,
-  accent3570: COLOR.blueAccent35,
-  accent4060: COLOR.blueAccent40,
+  primary: COLOR_LIGHT.blue5,
+  secondary: COLOR_LIGHT.blue5,
+  tertiary: COLOR_LIGHT.blue3,
+  quaternary: COLOR_LIGHT.blue2,
+  accent3570: COLOR_LIGHT.blue8,
+  accent4060: COLOR_LIGHT.blue8,
 };
diff --git a/packages/twenty-ui/src/theme/constants/AdaptiveColorsDark.ts b/packages/twenty-ui/src/theme/constants/AdaptiveColorsDark.ts
deleted file mode 100644
index d91fa6a92b5..00000000000
--- a/packages/twenty-ui/src/theme/constants/AdaptiveColorsDark.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-import { THEME_COMMON } from '@ui/theme/constants/ThemeCommon';
-
-export const ADAPTIVE_COLORS_DARK = {
-  green1: THEME_COMMON.color.green80,
-  green2: THEME_COMMON.color.green70,
-  green3: THEME_COMMON.color.green60,
-  green4: THEME_COMMON.color.green50,
-  turquoise1: THEME_COMMON.color.turquoise80,
-  turquoise2: THEME_COMMON.color.turquoise70,
-  turquoise3: THEME_COMMON.color.turquoise60,
-  turquoise4: THEME_COMMON.color.turquoise50,
-  sky1: THEME_COMMON.color.sky80,
-  sky2: THEME_COMMON.color.sky70,
-  sky3: THEME_COMMON.color.sky60,
-  sky4: THEME_COMMON.color.sky50,
-  blue1: THEME_COMMON.color.blue80,
-  blue2: THEME_COMMON.color.blue70,
-  blue3: THEME_COMMON.color.blue60,
-  blue4: THEME_COMMON.color.blue50,
-  red1: THEME_COMMON.color.red80,
-  red2: THEME_COMMON.color.red70,
-  red3: THEME_COMMON.color.red60,
-  red4: THEME_COMMON.color.red50,
-  orange1: THEME_COMMON.color.orange80,
-  orange2: THEME_COMMON.color.orange70,
-  orange3: THEME_COMMON.color.orange60,
-  orange4: THEME_COMMON.color.orange50,
-  yellow1: THEME_COMMON.color.yellow80,
-  yellow2: THEME_COMMON.color.yellow70,
-  yellow3: THEME_COMMON.color.yellow60,
-  yellow4: THEME_COMMON.color.yellow50,
-  pink1: THEME_COMMON.color.pink80,
-  pink2: THEME_COMMON.color.pink70,
-  pink3: THEME_COMMON.color.pink60,
-  pink4: THEME_COMMON.color.pink50,
-  purple1: THEME_COMMON.color.purple80,
-  purple2: THEME_COMMON.color.purple70,
-  purple3: THEME_COMMON.color.purple60,
-  purple4: THEME_COMMON.color.purple50,
-  gray1: THEME_COMMON.color.gray80,
-  gray2: THEME_COMMON.color.gray70,
-  gray3: THEME_COMMON.color.gray60,
-  gray4: THEME_COMMON.color.gray50,
-};
diff --git a/packages/twenty-ui/src/theme/constants/AdaptiveColorsLight.ts b/packages/twenty-ui/src/theme/constants/AdaptiveColorsLight.ts
deleted file mode 100644
index db3ad684334..00000000000
--- a/packages/twenty-ui/src/theme/constants/AdaptiveColorsLight.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-import { THEME_COMMON } from '@ui/theme/constants/ThemeCommon';
-
-export const ADAPTIVE_COLORS_LIGHT = {
-  green1: THEME_COMMON.color.green10,
-  green2: THEME_COMMON.color.green20,
-  green3: THEME_COMMON.color.green30,
-  green4: THEME_COMMON.color.green40,
-  turquoise1: THEME_COMMON.color.turquoise10,
-  turquoise2: THEME_COMMON.color.turquoise20,
-  turquoise3: THEME_COMMON.color.turquoise30,
-  turquoise4: THEME_COMMON.color.turquoise40,
-  sky1: THEME_COMMON.color.sky10,
-  sky2: THEME_COMMON.color.sky20,
-  sky3: THEME_COMMON.color.sky30,
-  sky4: THEME_COMMON.color.sky40,
-  blue1: THEME_COMMON.color.blue10,
-  blue2: THEME_COMMON.color.blue20,
-  blue3: THEME_COMMON.color.blue30,
-  blue4: THEME_COMMON.color.blue40,
-  red1: THEME_COMMON.color.red10,
-  red2: THEME_COMMON.color.red20,
-  red3: THEME_COMMON.color.red30,
-  red4: THEME_COMMON.color.red40,
-  orange1: THEME_COMMON.color.orange10,
-  orange2: THEME_COMMON.color.orange20,
-  orange3: THEME_COMMON.color.orange30,
-  orange4: THEME_COMMON.color.orange40,
-  yellow1: THEME_COMMON.color.yellow10,
-  yellow2: THEME_COMMON.color.yellow20,
-  yellow3: THEME_COMMON.color.yellow30,
-  yellow4: THEME_COMMON.color.yellow40,
-  pink1: THEME_COMMON.color.pink10,
-  pink2: THEME_COMMON.color.pink20,
-  pink3: THEME_COMMON.color.pink30,
-  pink4: THEME_COMMON.color.pink40,
-  purple1: THEME_COMMON.color.purple10,
-  purple2: THEME_COMMON.color.purple20,
-  purple3: THEME_COMMON.color.purple30,
-  purple4: THEME_COMMON.color.purple40,
-  gray1: THEME_COMMON.color.gray10,
-  gray2: THEME_COMMON.color.gray20,
-  gray3: THEME_COMMON.color.gray30,
-  gray4: THEME_COMMON.color.gray40,
-};
diff --git a/packages/twenty-ui/src/theme/constants/BackgroundDark.ts b/packages/twenty-ui/src/theme/constants/BackgroundDark.ts
index be09af7284e..a1da21ebaeb 100644
--- a/packages/twenty-ui/src/theme/constants/BackgroundDark.ts
+++ b/packages/twenty-ui/src/theme/constants/BackgroundDark.ts
@@ -1,35 +1,36 @@
-/* eslint-disable @nx/workspace-no-hardcoded-colors */
 import DarkNoise from '@assets/themes/dark-noise.jpg';
+import * as RadixColors from '@radix-ui/colors';
 
-import { COLOR } from './Colors';
-import { GRAY_SCALE } from './GrayScale';
-import { RGBA } from './Rgba';
+import { COLOR_DARK } from '@ui/theme/constants/ColorsDark';
+import { GRAY_SCALE_DARK } from './GrayScaleDark';
+import { TRANSPARENT_COLORS_DARK } from './TransparentColorsDark';
 
 export const BACKGROUND_DARK = {
   noisy: `url(${DarkNoise.toString()});`,
-  primary: GRAY_SCALE.gray85,
-  secondary: GRAY_SCALE.gray80,
-  tertiary: GRAY_SCALE.gray75,
-  quaternary: GRAY_SCALE.gray70,
-  invertedPrimary: GRAY_SCALE.gray20,
-  invertedSecondary: GRAY_SCALE.gray35,
-  danger: COLOR.red80,
+  primary: GRAY_SCALE_DARK.gray1,
+  secondary: GRAY_SCALE_DARK.gray2,
+  tertiary: GRAY_SCALE_DARK.gray4,
+  quaternary: GRAY_SCALE_DARK.gray5,
+  invertedPrimary: GRAY_SCALE_DARK.gray12,
+  invertedSecondary: GRAY_SCALE_DARK.gray11,
+  danger: COLOR_DARK.red12,
   transparent: {
-    primary: RGBA(GRAY_SCALE.gray85, 0.5),
-    secondary: RGBA(GRAY_SCALE.gray80, 0.5),
-    strong: RGBA(GRAY_SCALE.gray0, 0.14),
-    medium: RGBA(GRAY_SCALE.gray0, 0.1),
-    light: RGBA(GRAY_SCALE.gray0, 0.06),
-    lighter: RGBA(GRAY_SCALE.gray0, 0.03),
-    danger: RGBA(COLOR.red, 0.08),
-    blue: RGBA(COLOR.blue, 0.2),
-    orange: RGBA(COLOR.orange, 0.2),
+    primary: RadixColors.blackP3A.blackA7,
+    secondary: RadixColors.blackP3A.blackA6,
+    strong: TRANSPARENT_COLORS_DARK.gray7,
+    medium: TRANSPARENT_COLORS_DARK.gray5,
+    light: TRANSPARENT_COLORS_DARK.gray2,
+    lighter: TRANSPARENT_COLORS_DARK.gray1,
+    danger: TRANSPARENT_COLORS_DARK.red3,
+    blue: TRANSPARENT_COLORS_DARK.blue4,
+    orange: TRANSPARENT_COLORS_DARK.orange4,
+    success: TRANSPARENT_COLORS_DARK.green4,
   },
-  overlayPrimary: RGBA(GRAY_SCALE.gray100, 0.8),
-  overlaySecondary: RGBA(GRAY_SCALE.gray100, 0.6),
-  overlayTertiary: RGBA(GRAY_SCALE.gray100, 0.4),
-  radialGradient: `radial-gradient(50% 62.62% at 50% 0%, #505050 0%, ${GRAY_SCALE.gray60} 100%)`,
-  radialGradientHover: `radial-gradient(76.32% 95.59% at 50% 0%, #505050 0%, ${GRAY_SCALE.gray60} 100%)`,
-  primaryInverted: GRAY_SCALE.gray20,
-  primaryInvertedHover: GRAY_SCALE.gray15,
+  overlayPrimary: '#000000b8',
+  overlaySecondary: '#0000005c',
+  overlayTertiary: '#0000005c',
+  radialGradient: `radial-gradient(50% 62.62% at 50% 0%, ${GRAY_SCALE_DARK.gray9} 0%, ${GRAY_SCALE_DARK.gray10} 100%)`,
+  radialGradientHover: `radial-gradient(76.32% 95.59% at 50% 0%, ${GRAY_SCALE_DARK.gray10} 0%, ${GRAY_SCALE_DARK.gray11} 100%)`,
+  primaryInverted: GRAY_SCALE_DARK.gray12,
+  primaryInvertedHover: GRAY_SCALE_DARK.gray11,
 };
diff --git a/packages/twenty-ui/src/theme/constants/BackgroundLight.ts b/packages/twenty-ui/src/theme/constants/BackgroundLight.ts
index 0a172656e93..4c9932d7ae5 100644
--- a/packages/twenty-ui/src/theme/constants/BackgroundLight.ts
+++ b/packages/twenty-ui/src/theme/constants/BackgroundLight.ts
@@ -1,35 +1,36 @@
-/* eslint-disable @nx/workspace-no-hardcoded-colors */
 import LightNoise from '@assets/themes/light-noise.png';
+import * as RadixColors from '@radix-ui/colors';
 
-import { COLOR } from './Colors';
-import { GRAY_SCALE } from './GrayScale';
-import { RGBA } from './Rgba';
+import { COLOR_LIGHT } from '@ui/theme/constants/ColorsLight';
+import { GRAY_SCALE_LIGHT } from './GrayScaleLight';
+import { TRANSPARENT_COLORS_LIGHT } from './TransparentColorsLight';
 
 export const BACKGROUND_LIGHT = {
   noisy: `url(${LightNoise.toString()});`,
-  primary: GRAY_SCALE.gray0,
-  secondary: GRAY_SCALE.gray10,
-  tertiary: GRAY_SCALE.gray15,
-  quaternary: GRAY_SCALE.gray20,
-  invertedPrimary: GRAY_SCALE.gray60,
-  invertedSecondary: GRAY_SCALE.gray50,
-  danger: COLOR.red10,
+  primary: GRAY_SCALE_LIGHT.gray1,
+  secondary: GRAY_SCALE_LIGHT.gray2,
+  tertiary: GRAY_SCALE_LIGHT.gray4,
+  quaternary: GRAY_SCALE_LIGHT.gray5,
+  invertedPrimary: GRAY_SCALE_LIGHT.gray12,
+  invertedSecondary: GRAY_SCALE_LIGHT.gray11,
+  danger: COLOR_LIGHT.red3,
   transparent: {
-    primary: RGBA(GRAY_SCALE.gray0, 0.5),
-    secondary: RGBA(GRAY_SCALE.gray10, 0.5),
-    strong: RGBA(GRAY_SCALE.gray100, 0.16),
-    medium: RGBA(GRAY_SCALE.gray100, 0.08),
-    light: RGBA(GRAY_SCALE.gray100, 0.04),
-    lighter: RGBA(GRAY_SCALE.gray100, 0.02),
-    danger: RGBA(COLOR.red, 0.08),
-    blue: RGBA(COLOR.blue, 0.08),
-    orange: RGBA(COLOR.orange, 0.08),
+    primary: RadixColors.whiteP3A.whiteA7,
+    secondary: RadixColors.whiteP3A.whiteA6,
+    strong: TRANSPARENT_COLORS_LIGHT.gray7,
+    medium: TRANSPARENT_COLORS_LIGHT.gray5,
+    light: TRANSPARENT_COLORS_LIGHT.gray2,
+    lighter: TRANSPARENT_COLORS_LIGHT.gray1,
+    danger: TRANSPARENT_COLORS_LIGHT.red3,
+    blue: TRANSPARENT_COLORS_LIGHT.blue3,
+    orange: TRANSPARENT_COLORS_LIGHT.orange3,
+    success: TRANSPARENT_COLORS_LIGHT.green3,
   },
-  overlayPrimary: RGBA(GRAY_SCALE.gray80, 0.8),
-  overlaySecondary: RGBA(GRAY_SCALE.gray80, 0.4),
-  overlayTertiary: RGBA(GRAY_SCALE.gray80, 0.08),
-  radialGradient: `radial-gradient(50% 62.62% at 50% 0%, #505050 0%, ${GRAY_SCALE.gray60} 100%)`,
-  radialGradientHover: `radial-gradient(76.32% 95.59% at 50% 0%, #505050 0%, ${GRAY_SCALE.gray60} 100%)`,
-  primaryInverted: GRAY_SCALE.gray60,
-  primaryInvertedHover: GRAY_SCALE.gray55,
+  overlayPrimary: TRANSPARENT_COLORS_LIGHT.gray11,
+  overlaySecondary: TRANSPARENT_COLORS_LIGHT.gray9,
+  overlayTertiary: TRANSPARENT_COLORS_LIGHT.gray4,
+  radialGradient: `radial-gradient(50% 62.62% at 50% 0%, ${GRAY_SCALE_LIGHT.gray9} 0%, ${GRAY_SCALE_LIGHT.gray10} 100%)`,
+  radialGradientHover: `radial-gradient(76.32% 95.59% at 50% 0%, ${GRAY_SCALE_LIGHT.gray10} 0%, ${GRAY_SCALE_LIGHT.gray11} 100%)`,
+  primaryInverted: GRAY_SCALE_LIGHT.gray12,
+  primaryInvertedHover: GRAY_SCALE_LIGHT.gray11,
 };
diff --git a/packages/twenty-ui/src/theme/constants/BorderDark.ts b/packages/twenty-ui/src/theme/constants/BorderDark.ts
index af94312799e..2ae9260a562 100644
--- a/packages/twenty-ui/src/theme/constants/BorderDark.ts
+++ b/packages/twenty-ui/src/theme/constants/BorderDark.ts
@@ -1,18 +1,18 @@
-import { RGBA } from '@ui/theme/constants/Rgba';
+import { COLOR_DARK } from '@ui/theme/constants/ColorsDark';
 import { BORDER_COMMON } from './BorderCommon';
-import { COLOR } from './Colors';
-import { GRAY_SCALE } from './GrayScale';
+import { GRAY_SCALE_DARK } from './GrayScaleDark';
+import { TRANSPARENT_COLORS_DARK } from './TransparentColorsDark';
 
 export const BORDER_DARK = {
   color: {
-    strong: GRAY_SCALE.gray55,
-    medium: GRAY_SCALE.gray65,
-    light: GRAY_SCALE.gray70,
-    secondaryInverted: GRAY_SCALE.gray35,
-    inverted: GRAY_SCALE.gray20,
-    danger: COLOR.red70,
-    blue: COLOR.blue30,
-    transparentStrong: RGBA(GRAY_SCALE.gray100, 0.16),
+    strong: GRAY_SCALE_DARK.gray6,
+    medium: GRAY_SCALE_DARK.gray5,
+    light: GRAY_SCALE_DARK.gray4,
+    secondaryInverted: GRAY_SCALE_DARK.gray11,
+    inverted: GRAY_SCALE_DARK.gray12,
+    danger: COLOR_DARK.red5,
+    blue: COLOR_DARK.blue7,
+    transparentStrong: TRANSPARENT_COLORS_DARK.gray4,
   },
   ...BORDER_COMMON,
 };
diff --git a/packages/twenty-ui/src/theme/constants/BorderLight.ts b/packages/twenty-ui/src/theme/constants/BorderLight.ts
index 916c5002fd0..a104188b80a 100644
--- a/packages/twenty-ui/src/theme/constants/BorderLight.ts
+++ b/packages/twenty-ui/src/theme/constants/BorderLight.ts
@@ -1,18 +1,18 @@
-import { RGBA } from '@ui/theme/constants/Rgba';
+import { COLOR_LIGHT } from '@ui/theme/constants/ColorsLight';
 import { BORDER_COMMON } from './BorderCommon';
-import { COLOR } from './Colors';
-import { GRAY_SCALE } from './GrayScale';
+import { GRAY_SCALE_LIGHT } from './GrayScaleLight';
+import { TRANSPARENT_COLORS_LIGHT } from './TransparentColorsLight';
 
 export const BORDER_LIGHT = {
   color: {
-    strong: GRAY_SCALE.gray25,
-    medium: GRAY_SCALE.gray20,
-    light: GRAY_SCALE.gray15,
-    secondaryInverted: GRAY_SCALE.gray50,
-    inverted: GRAY_SCALE.gray60,
-    danger: COLOR.red20,
-    blue: COLOR.blue30,
-    transparentStrong: RGBA(GRAY_SCALE.gray100, 0.16),
+    strong: GRAY_SCALE_LIGHT.gray6,
+    medium: GRAY_SCALE_LIGHT.gray5,
+    light: GRAY_SCALE_LIGHT.gray4,
+    secondaryInverted: GRAY_SCALE_LIGHT.gray11,
+    inverted: GRAY_SCALE_LIGHT.gray12,
+    danger: COLOR_LIGHT.red5,
+    blue: COLOR_LIGHT.blue7,
+    transparentStrong: TRANSPARENT_COLORS_LIGHT.gray4,
   },
   ...BORDER_COMMON,
 };
diff --git a/packages/twenty-ui/src/theme/constants/BoxShadowDark.ts b/packages/twenty-ui/src/theme/constants/BoxShadowDark.ts
index f5dd8abc65a..b98c7825ac7 100644
--- a/packages/twenty-ui/src/theme/constants/BoxShadowDark.ts
+++ b/packages/twenty-ui/src/theme/constants/BoxShadowDark.ts
@@ -1,19 +1,19 @@
-import { GRAY_SCALE } from './GrayScale';
-import { RGBA } from './Rgba';
+import { RGBA } from '@ui/theme/constants/Rgba';
 
+/* eslint-disable @nx/workspace-no-hardcoded-colors */
 export const BOX_SHADOW_DARK = {
-  color: RGBA(GRAY_SCALE.gray100, 0.6),
+  color: RGBA('#000000', 0.6),
   light: `0px 2px 4px 0px ${RGBA(
-    GRAY_SCALE.gray100,
+    '#000000',
     0.04,
-  )}, 0px 0px 4px 0px ${RGBA(GRAY_SCALE.gray100, 0.08)}`,
+  )}, 0px 0px 4px 0px ${RGBA('#000000', 0.08)}`,
   strong: `2px 4px 16px 0px ${RGBA(
-    GRAY_SCALE.gray100,
+    '#000000',
     0.16,
-  )}, 0px 2px 4px 0px ${RGBA(GRAY_SCALE.gray100, 0.08)}`,
-  underline: `0px 1px 0px 0px ${RGBA(GRAY_SCALE.gray100, 0.32)}`,
+  )}, 0px 2px 4px 0px ${RGBA('#000000', 0.08)}`,
+  underline: `0px 1px 0px 0px ${RGBA('#000000', 0.32)}`,
   superHeavy: `2px 4px 16px 0px ${RGBA(
-    GRAY_SCALE.gray100,
+    '#000000',
     0.12,
-  )}, 0px 2px 4px 0px ${RGBA(GRAY_SCALE.gray100, 0.04)}`,
+  )}, 0px 2px 4px 0px ${RGBA('#000000', 0.04)}`,
 };
diff --git a/packages/twenty-ui/src/theme/constants/BoxShadowLight.ts b/packages/twenty-ui/src/theme/constants/BoxShadowLight.ts
index 3173fc6fb01..bca674ee7e2 100644
--- a/packages/twenty-ui/src/theme/constants/BoxShadowLight.ts
+++ b/packages/twenty-ui/src/theme/constants/BoxShadowLight.ts
@@ -1,22 +1,9 @@
-import { GRAY_SCALE } from './GrayScale';
-import { RGBA } from './Rgba';
+import { GRAY_SCALE_LIGHT_ALPHA } from '@ui/theme/constants/GrayScaleLightAlpha';
 
 export const BOX_SHADOW_LIGHT = {
-  color: RGBA(GRAY_SCALE.gray100, 0.04),
-  light: `0px 2px 4px 0px ${RGBA(
-    GRAY_SCALE.gray100,
-    0.04,
-  )}, 0px 0px 4px 0px ${RGBA(GRAY_SCALE.gray100, 0.08)}`,
-  strong: `2px 4px 16px 0px ${RGBA(
-    GRAY_SCALE.gray100,
-    0.12,
-  )}, 0px 2px 4px 0px ${RGBA(GRAY_SCALE.gray100, 0.04)}`,
-  underline: `0px 1px 0px 0px ${RGBA(GRAY_SCALE.gray100, 0.32)}`,
-  superHeavy: `0px 0px 8px 0px ${RGBA(
-    GRAY_SCALE.gray100,
-    0.16,
-  )}, 0px 8px 64px -16px ${RGBA(
-    GRAY_SCALE.gray100,
-    0.48,
-  )}, 0px 24px 56px -16px ${RGBA(GRAY_SCALE.gray100, 0.08)}`,
+  color: GRAY_SCALE_LIGHT_ALPHA.gray2,
+  light: `0px 2px 4px 0px ${GRAY_SCALE_LIGHT_ALPHA.gray2}, 0px 0px 4px 0px ${GRAY_SCALE_LIGHT_ALPHA.gray5}`,
+  strong: `2px 4px 16px 0px ${GRAY_SCALE_LIGHT_ALPHA.gray7}, 0px 2px 4px 0px ${GRAY_SCALE_LIGHT_ALPHA.gray5}`,
+  underline: `0px 1px 0px 0px ${GRAY_SCALE_LIGHT_ALPHA.gray9}`,
+  superHeavy: `0px 0px 8px 0px ${GRAY_SCALE_LIGHT_ALPHA.gray7}, 0px 8px 64px -16px ${GRAY_SCALE_LIGHT_ALPHA.gray10}, 0px 24px 56px -16px ${GRAY_SCALE_LIGHT_ALPHA.gray5}`,
 };
diff --git a/packages/twenty-ui/src/theme/constants/CodeDark.ts b/packages/twenty-ui/src/theme/constants/CodeDark.ts
index dc675bf1f8e..e60e8ac2725 100644
--- a/packages/twenty-ui/src/theme/constants/CodeDark.ts
+++ b/packages/twenty-ui/src/theme/constants/CodeDark.ts
@@ -1,10 +1,10 @@
-import { COLOR } from './Colors';
+import { COLOR_DARK } from '@ui/theme/constants/ColorsDark';
 
 export const CODE_DARK = {
   text: {
-    gray: COLOR.gray50,
-    sky: COLOR.sky50,
-    pink: COLOR.pink50,
-    orange: COLOR.orange40,
+    gray: COLOR_DARK.gray10,
+    sky: COLOR_DARK.sky10,
+    pink: COLOR_DARK.pink10,
+    orange: COLOR_DARK.orange8,
   },
 };
diff --git a/packages/twenty-ui/src/theme/constants/CodeLight.ts b/packages/twenty-ui/src/theme/constants/CodeLight.ts
index 3f2f47fa5e9..238e1f5099f 100644
--- a/packages/twenty-ui/src/theme/constants/CodeLight.ts
+++ b/packages/twenty-ui/src/theme/constants/CodeLight.ts
@@ -1,10 +1,10 @@
-import { COLOR } from './Colors';
+import { COLOR_LIGHT } from '@ui/theme/constants/ColorsLight';
 
 export const CODE_LIGHT = {
   text: {
-    gray: COLOR.gray50,
-    sky: COLOR.sky50,
-    pink: COLOR.pink50,
-    orange: COLOR.orange40,
+    gray: COLOR_LIGHT.gray10,
+    sky: COLOR_LIGHT.sky10,
+    pink: COLOR_LIGHT.pink10,
+    orange: COLOR_LIGHT.orange8,
   },
 };
diff --git a/packages/twenty-ui/src/theme/constants/Colors.ts b/packages/twenty-ui/src/theme/constants/Colors.ts
deleted file mode 100644
index 21d046f615b..00000000000
--- a/packages/twenty-ui/src/theme/constants/Colors.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { MAIN_COLORS } from './MainColors';
-import { SECONDARY_COLORS } from './SecondaryColors';
-
-export const COLOR = {
-  ...MAIN_COLORS,
-  ...SECONDARY_COLORS,
-};
diff --git a/packages/twenty-ui/src/theme/constants/ColorsDark.ts b/packages/twenty-ui/src/theme/constants/ColorsDark.ts
new file mode 100644
index 00000000000..dffa3b08e39
--- /dev/null
+++ b/packages/twenty-ui/src/theme/constants/ColorsDark.ts
@@ -0,0 +1,9 @@
+import { MAIN_COLORS_DARK } from './MainColorsDark';
+import { SECONDARY_COLORS_DARK } from './SecondaryColorsDark';
+import { TRANSPARENT_COLORS_DARK } from './TransparentColorsDark';
+
+export const COLOR_DARK = {
+  ...MAIN_COLORS_DARK,
+  ...SECONDARY_COLORS_DARK,
+  transparent: TRANSPARENT_COLORS_DARK,
+};
diff --git a/packages/twenty-ui/src/theme/constants/ColorsLight.ts b/packages/twenty-ui/src/theme/constants/ColorsLight.ts
new file mode 100644
index 00000000000..31d65c0f9fc
--- /dev/null
+++ b/packages/twenty-ui/src/theme/constants/ColorsLight.ts
@@ -0,0 +1,9 @@
+import { MAIN_COLORS_LIGHT } from './MainColorsLight';
+import { SECONDARY_COLORS_LIGHT } from './SecondaryColorsLight';
+import { TRANSPARENT_COLORS_LIGHT } from './TransparentColorsLight';
+
+export const COLOR_LIGHT = {
+  ...MAIN_COLORS_LIGHT,
+  ...SECONDARY_COLORS_LIGHT,
+  transparent: TRANSPARENT_COLORS_LIGHT,
+};
diff --git a/packages/twenty-ui/src/theme/constants/FontDark.ts b/packages/twenty-ui/src/theme/constants/FontDark.ts
index 340eee19d3c..3d1fada0aa8 100644
--- a/packages/twenty-ui/src/theme/constants/FontDark.ts
+++ b/packages/twenty-ui/src/theme/constants/FontDark.ts
@@ -1,16 +1,16 @@
-import { COLOR } from './Colors';
+import { COLOR_DARK } from '@ui/theme/constants/ColorsDark';
 import { FONT_COMMON } from './FontCommon';
-import { GRAY_SCALE } from './GrayScale';
+import { GRAY_SCALE_DARK } from './GrayScaleDark';
 
 export const FONT_DARK = {
   color: {
-    primary: GRAY_SCALE.gray20,
-    secondary: GRAY_SCALE.gray35,
-    tertiary: GRAY_SCALE.gray45,
-    light: GRAY_SCALE.gray50,
-    extraLight: GRAY_SCALE.gray55,
-    inverted: GRAY_SCALE.gray100,
-    danger: COLOR.red,
+    primary: GRAY_SCALE_DARK.gray12,
+    secondary: GRAY_SCALE_DARK.gray11,
+    tertiary: GRAY_SCALE_DARK.gray9,
+    light: GRAY_SCALE_DARK.gray8,
+    extraLight: GRAY_SCALE_DARK.gray7,
+    inverted: GRAY_SCALE_DARK.gray1,
+    danger: COLOR_DARK.red,
   },
   ...FONT_COMMON,
 };
diff --git a/packages/twenty-ui/src/theme/constants/FontLight.ts b/packages/twenty-ui/src/theme/constants/FontLight.ts
index 469b748420c..2870a62851c 100644
--- a/packages/twenty-ui/src/theme/constants/FontLight.ts
+++ b/packages/twenty-ui/src/theme/constants/FontLight.ts
@@ -1,16 +1,16 @@
-import { COLOR } from './Colors';
+import { COLOR_LIGHT } from '@ui/theme/constants/ColorsLight';
 import { FONT_COMMON } from './FontCommon';
-import { GRAY_SCALE } from './GrayScale';
+import { GRAY_SCALE_LIGHT } from './GrayScaleLight';
 
 export const FONT_LIGHT = {
   color: {
-    primary: GRAY_SCALE.gray60,
-    secondary: GRAY_SCALE.gray50,
-    tertiary: GRAY_SCALE.gray40,
-    light: GRAY_SCALE.gray35,
-    extraLight: GRAY_SCALE.gray30,
-    inverted: GRAY_SCALE.gray0,
-    danger: COLOR.red,
+    primary: GRAY_SCALE_LIGHT.gray12,
+    secondary: GRAY_SCALE_LIGHT.gray11,
+    tertiary: GRAY_SCALE_LIGHT.gray9,
+    light: GRAY_SCALE_LIGHT.gray8,
+    extraLight: GRAY_SCALE_LIGHT.gray7,
+    inverted: GRAY_SCALE_LIGHT.gray1,
+    danger: COLOR_LIGHT.red,
   },
   ...FONT_COMMON,
 };
diff --git a/packages/twenty-ui/src/theme/constants/GrayScale.ts b/packages/twenty-ui/src/theme/constants/GrayScale.ts
deleted file mode 100644
index 90c194d9241..00000000000
--- a/packages/twenty-ui/src/theme/constants/GrayScale.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-/* eslint-disable @nx/workspace-no-hardcoded-colors */
-export const GRAY_SCALE = {
-  gray100: '#000000',
-  gray90: '#141414',
-  gray85: '#171717',
-  gray80: '#1b1b1b',
-  gray75: '#1d1d1d',
-  gray70: '#222222',
-  gray65: '#292929',
-  gray60: '#333333',
-  gray55: '#4c4c4c',
-  gray50: '#666666',
-  gray45: '#818181',
-  gray40: '#999999',
-  gray35: '#b3b3b3',
-  gray30: '#cccccc',
-  gray25: '#d6d6d6',
-  gray20: '#ebebeb',
-  gray15: '#f1f1f1',
-  gray10: '#fcfcfc',
-  gray0: '#ffffff',
-};
diff --git a/packages/twenty-ui/src/theme/constants/GrayScaleDark.ts b/packages/twenty-ui/src/theme/constants/GrayScaleDark.ts
new file mode 100644
index 00000000000..b6c7137cdb7
--- /dev/null
+++ b/packages/twenty-ui/src/theme/constants/GrayScaleDark.ts
@@ -0,0 +1,14 @@
+export const GRAY_SCALE_DARK = {
+  gray1: 'color(display-p3 0.09 0.09 0.09)',
+  gray2: 'color(display-p3 0.106 0.106 0.106)',
+  gray3: 'color(display-p3 0.098 0.098 0.098)',
+  gray4: 'color(display-p3 0.114 0.114 0.114)',
+  gray5: 'color(display-p3 0.133 0.133 0.133)',
+  gray6: 'color(display-p3 0.282 0.282 0.282)',
+  gray7: 'color(display-p3 0.298 0.298 0.298)',
+  gray8: 'color(display-p3 0.4 0.4 0.4)',
+  gray9: 'color(display-p3 0.506 0.506 0.506)',
+  gray10: 'color(display-p3 0.482 0.482 0.482)',
+  gray11: 'color(display-p3 0.702 0.702 0.702)',
+  gray12: 'color(display-p3 0.922 0.922 0.922)',
+};
diff --git a/packages/twenty-ui/src/theme/constants/GrayScaleDarkAlpha.ts b/packages/twenty-ui/src/theme/constants/GrayScaleDarkAlpha.ts
new file mode 100644
index 00000000000..76d05e33fa2
--- /dev/null
+++ b/packages/twenty-ui/src/theme/constants/GrayScaleDarkAlpha.ts
@@ -0,0 +1,14 @@
+export const GRAY_SCALE_DARK_ALPHA = {
+  gray1: 'color(display-p3 1 1 1 / 0.031)',
+  gray2: 'color(display-p3 1 1 1 / 0.059)',
+  gray3: 'color(display-p3 1 1 1 / 0.047)',
+  gray4: 'color(display-p3 1 1 1 / 0.071)',
+  gray5: 'color(display-p3 1 1 1 / 0.102)',
+  gray6: 'color(display-p3 1 1 1 / 0.114)',
+  gray7: 'color(display-p3 1 1 1 / 0.141)',
+  gray8: 'color(display-p3 1 1 1 / 0.22)',
+  gray9: 'color(display-p3 1 1 1 / 0.427)',
+  gray10: 'color(display-p3 1 1 1 / 0.478)',
+  gray11: 'color(display-p3 1 1 1 / 0.565)',
+  gray12: 'color(display-p3 1 1 1 / 0.91)',
+};
diff --git a/packages/twenty-ui/src/theme/constants/GrayScaleLight.ts b/packages/twenty-ui/src/theme/constants/GrayScaleLight.ts
new file mode 100644
index 00000000000..8a6796129fd
--- /dev/null
+++ b/packages/twenty-ui/src/theme/constants/GrayScaleLight.ts
@@ -0,0 +1,14 @@
+export const GRAY_SCALE_LIGHT = {
+  gray1: 'color(display-p3 1 1 1)',
+  gray2: 'color(display-p3 0.988 0.988 0.988)',
+  gray3: 'color(display-p3 0.976 0.976 0.976)',
+  gray4: 'color(display-p3 0.945 0.945 0.945)',
+  gray5: 'color(display-p3 0.922 0.922 0.922)',
+  gray6: 'color(display-p3 0.839 0.839 0.839)',
+  gray7: 'color(display-p3 0.8 0.8 0.8)',
+  gray8: 'color(display-p3 0.702 0.702 0.702)',
+  gray9: 'color(display-p3 0.6 0.6 0.6)',
+  gray10: 'color(display-p3 0.514 0.514 0.514)',
+  gray11: 'color(display-p3 0.4 0.4 0.4)',
+  gray12: 'color(display-p3 0.2 0.2 0.2)',
+};
diff --git a/packages/twenty-ui/src/theme/constants/GrayScaleLightAlpha.ts b/packages/twenty-ui/src/theme/constants/GrayScaleLightAlpha.ts
new file mode 100644
index 00000000000..954c2c51085
--- /dev/null
+++ b/packages/twenty-ui/src/theme/constants/GrayScaleLightAlpha.ts
@@ -0,0 +1,14 @@
+export const GRAY_SCALE_LIGHT_ALPHA = {
+  gray1: 'color(display-p3 0 0 0 / 0.02)',
+  gray2: 'color(display-p3 0 0 0 / 0.039)',
+  gray3: 'color(display-p3 0 0 0 / 0.047)',
+  gray4: 'color(display-p3 0 0 0 / 0.071)',
+  gray5: 'color(display-p3 0 0 0 / 0.078)',
+  gray6: 'color(display-p3 0 0 0 / 0.114)',
+  gray7: 'color(display-p3 0 0 0 / 0.161)',
+  gray8: 'color(display-p3 0 0 0 / 0.22)',
+  gray9: 'color(display-p3 0 0 0 / 0.361)',
+  gray10: 'color(display-p3 0 0 0 / 0.478)',
+  gray11: 'color(display-p3 0 0 0 / 0.722)',
+  gray12: 'color(display-p3 0 0 0 / 0.91)',
+};
diff --git a/packages/twenty-ui/src/theme/constants/IllustrationIconDark.ts b/packages/twenty-ui/src/theme/constants/IllustrationIconDark.ts
index 81be4f25d0f..e70f4ce4170 100644
--- a/packages/twenty-ui/src/theme/constants/IllustrationIconDark.ts
+++ b/packages/twenty-ui/src/theme/constants/IllustrationIconDark.ts
@@ -1,13 +1,13 @@
-import { GRAY_SCALE } from '@ui/theme/constants/GrayScale';
-import { COLOR } from './Colors';
+import { COLOR_DARK } from '@ui/theme/constants/ColorsDark';
+import { GRAY_SCALE_DARK } from '@ui/theme/constants/GrayScaleDark';
 
 export const ILLUSTRATION_ICON_DARK = {
   color: {
-    blue: COLOR.blue50,
-    gray: GRAY_SCALE.gray50,
+    blue: COLOR_DARK.blue10,
+    gray: GRAY_SCALE_DARK.gray8,
   },
   fill: {
-    blue: COLOR.blue70,
-    gray: GRAY_SCALE.gray70,
+    blue: COLOR_DARK.blue12,
+    gray: GRAY_SCALE_DARK.gray5,
   },
 };
diff --git a/packages/twenty-ui/src/theme/constants/IllustrationIconLight.ts b/packages/twenty-ui/src/theme/constants/IllustrationIconLight.ts
index b5ae3dc27a9..3f61bbebd84 100644
--- a/packages/twenty-ui/src/theme/constants/IllustrationIconLight.ts
+++ b/packages/twenty-ui/src/theme/constants/IllustrationIconLight.ts
@@ -1,13 +1,13 @@
-import { GRAY_SCALE } from '@ui/theme/constants/GrayScale';
-import { COLOR } from './Colors';
+import { COLOR_LIGHT } from '@ui/theme/constants/ColorsLight';
+import { GRAY_SCALE_LIGHT } from '@ui/theme/constants/GrayScaleLight';
 
 export const ILLUSTRATION_ICON_LIGHT = {
   color: {
-    blue: COLOR.blue40,
-    gray: GRAY_SCALE.gray40,
+    blue: COLOR_LIGHT.blue8,
+    gray: GRAY_SCALE_LIGHT.gray9,
   },
   fill: {
-    blue: COLOR.blue20,
-    gray: GRAY_SCALE.gray20,
+    blue: COLOR_LIGHT.blue5,
+    gray: GRAY_SCALE_LIGHT.gray5,
   },
 };
diff --git a/packages/twenty-ui/src/theme/constants/MainColorNames.ts b/packages/twenty-ui/src/theme/constants/MainColorNames.ts
index 7abcdc90cc5..36b4d812cb2 100644
--- a/packages/twenty-ui/src/theme/constants/MainColorNames.ts
+++ b/packages/twenty-ui/src/theme/constants/MainColorNames.ts
@@ -1,5 +1,5 @@
-import { MAIN_COLORS } from './MainColors';
+import { MAIN_COLORS_LIGHT } from './MainColorsLight';
 
-export const MAIN_COLOR_NAMES = Object.keys(MAIN_COLORS) as ThemeColor[];
+export const MAIN_COLOR_NAMES = Object.keys(MAIN_COLORS_LIGHT) as ThemeColor[];
 
-export type ThemeColor = keyof typeof MAIN_COLORS;
+export type ThemeColor = keyof typeof MAIN_COLORS_LIGHT;
diff --git a/packages/twenty-ui/src/theme/constants/MainColors.ts b/packages/twenty-ui/src/theme/constants/MainColors.ts
deleted file mode 100644
index 0fdab5f5121..00000000000
--- a/packages/twenty-ui/src/theme/constants/MainColors.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-/* eslint-disable @nx/workspace-no-hardcoded-colors */
-import { GRAY_SCALE } from './GrayScale';
-
-export const MAIN_COLORS = {
-  green: '#55ef3c',
-  turquoise: '#15de8f',
-  sky: '#00e0ff',
-  blue: '#1961ed',
-  purple: '#915ffd',
-  pink: '#f54bd0',
-  red: '#f83e3e',
-  orange: '#ff7222',
-  yellow: '#ffd338',
-  gray: GRAY_SCALE.gray30,
-};
diff --git a/packages/twenty-ui/src/theme/constants/MainColorsDark.ts b/packages/twenty-ui/src/theme/constants/MainColorsDark.ts
new file mode 100644
index 00000000000..f430fff360c
--- /dev/null
+++ b/packages/twenty-ui/src/theme/constants/MainColorsDark.ts
@@ -0,0 +1,41 @@
+import * as RadixColors from '@radix-ui/colors';
+import { GRAY_SCALE_DARK } from '@ui/theme/constants/GrayScaleDark';
+
+export const MAIN_COLORS_DARK = {
+  // Grays
+  gray: GRAY_SCALE_DARK.gray7,
+
+  // Reds
+  tomato: RadixColors.tomatoDarkP3.tomato9,
+  red: RadixColors.redDarkP3.red9,
+  ruby: RadixColors.rubyDarkP3.ruby9,
+  crimson: RadixColors.crimsonDarkP3.crimson9,
+
+  // Pinks & Purples
+  pink: RadixColors.pinkDarkP3.pink9,
+  plum: RadixColors.plumDarkP3.plum9,
+  purple: RadixColors.purpleDarkP3.purple9,
+  violet: RadixColors.violetDarkP3.violet9,
+  iris: RadixColors.irisDarkP3.iris9,
+
+  // Cyans & Blues
+  cyan: RadixColors.cyanDarkP3.cyan9,
+  turquoise: RadixColors.tealDarkP3.teal9,
+  sky: RadixColors.skyDarkP3.sky9,
+  blue: RadixColors.indigoDarkP3.indigo9,
+
+  // Greens
+  jade: RadixColors.jadeDarkP3.jade9,
+  green: RadixColors.greenDarkP3.green9,
+  grass: RadixColors.grassDarkP3.grass9,
+  mint: RadixColors.mintDarkP3.mint9,
+  lime: RadixColors.limeDarkP3.lime9,
+
+  // Oranges & Yellows
+  bronze: RadixColors.bronzeDarkP3.bronze9,
+  gold: RadixColors.goldDarkP3.gold9,
+  brown: RadixColors.brownDarkP3.brown9,
+  orange: RadixColors.orangeDarkP3.orange9,
+  amber: RadixColors.amberDarkP3.amber9,
+  yellow: RadixColors.yellowDarkP3.yellow9,
+};
diff --git a/packages/twenty-ui/src/theme/constants/MainColorsLight.ts b/packages/twenty-ui/src/theme/constants/MainColorsLight.ts
new file mode 100644
index 00000000000..ce46ddbb61f
--- /dev/null
+++ b/packages/twenty-ui/src/theme/constants/MainColorsLight.ts
@@ -0,0 +1,41 @@
+import * as RadixColors from '@radix-ui/colors';
+import { GRAY_SCALE_LIGHT } from './GrayScaleLight';
+
+export const MAIN_COLORS_LIGHT = {
+  // Grays
+  gray: GRAY_SCALE_LIGHT.gray7,
+
+  // Reds
+  tomato: RadixColors.tomatoP3.tomato9,
+  red: RadixColors.redP3.red9,
+  ruby: RadixColors.rubyP3.ruby9,
+  crimson: RadixColors.crimsonP3.crimson9,
+
+  // Pinks & Purples
+  pink: RadixColors.pinkP3.pink9,
+  plum: RadixColors.plumP3.plum9,
+  purple: RadixColors.purpleP3.purple9,
+  violet: RadixColors.violetP3.violet9,
+  iris: RadixColors.irisP3.iris9,
+
+  // Cyans & Blues
+  cyan: RadixColors.cyanP3.cyan9,
+  turquoise: RadixColors.tealP3.teal9,
+  sky: RadixColors.skyP3.sky9,
+  blue: RadixColors.indigoP3.indigo9,
+
+  // Greens
+  jade: RadixColors.jadeP3.jade9,
+  green: RadixColors.greenP3.green9,
+  grass: RadixColors.grassP3.grass9,
+  mint: RadixColors.mintP3.mint9,
+  lime: RadixColors.limeP3.lime9,
+
+  // Oranges & Yellows
+  bronze: RadixColors.bronzeP3.bronze9,
+  gold: RadixColors.goldP3.gold9,
+  brown: RadixColors.brownP3.brown9,
+  orange: RadixColors.orangeP3.orange9,
+  amber: RadixColors.amberP3.amber9,
+  yellow: RadixColors.yellowP3.yellow9,
+};
diff --git a/packages/twenty-ui/src/theme/constants/SecondaryColors.ts b/packages/twenty-ui/src/theme/constants/SecondaryColors.ts
deleted file mode 100644
index a44505ef192..00000000000
--- a/packages/twenty-ui/src/theme/constants/SecondaryColors.ts
+++ /dev/null
@@ -1,107 +0,0 @@
-/* eslint-disable @nx/workspace-no-hardcoded-colors */
-import { GRAY_SCALE } from './GrayScale';
-
-export const SECONDARY_COLORS = {
-  yellow80: '#2e2a1a',
-  yellow70: '#453d1e',
-  yellow60: '#746224',
-  yellow50: '#b99b2e',
-  yellow40: '#ffe074',
-  yellow30: '#ffedaf',
-  yellow20: '#fff6d7',
-  yellow10: '#fffbeb',
-
-  green80: '#1d2d1b',
-  green70: '#23421e',
-  green60: '#2a5822',
-  green50: '#42ae31',
-  green40: '#88f477',
-  green30: '#ccfac5',
-  green20: '#ddfcd8',
-  green10: '#eefdec',
-
-  turquoise80: '#172b23',
-  turquoise70: '#173f2f',
-  turquoise60: '#166747',
-  turquoise50: '#16a26b',
-  turquoise40: '#5be8b1',
-  turquoise30: '#a1f2d2',
-  turquoise20: '#d0f8e9',
-  turquoise10: '#e8fcf4',
-
-  sky80: '#152b2e',
-  sky70: '#123f45',
-  sky60: '#0e6874',
-  sky50: '#07a4b9',
-  sky40: '#4de9ff',
-  sky30: '#99f3ff',
-  sky20: '#ccf9ff',
-  sky10: '#e5fcff',
-
-  blue80: '#171e2c',
-  blue70: '#172642',
-  blue60: '#18356d',
-  blue50: '#184bad',
-  blue40: '#5e90f2',
-  blue30: '#a3c0f8',
-  blue20: '#d1dffb',
-  blue10: '#e8effd',
-
-  purple80: '#231e2e',
-  purple70: '#2f2545',
-  purple60: '#483473',
-  purple50: '#6c49b8',
-  purple40: '#b28ffe',
-  purple30: '#d3bffe',
-  purple20: '#e9dfff',
-  purple10: '#f4efff',
-
-  pink80: '#2d1c29',
-  pink70: '#43213c',
-  pink60: '#702c61',
-  pink50: '#b23b98',
-  pink40: '#f881de',
-  pink30: '#fbb7ec',
-  pink20: '#fddbf6',
-  pink10: '#feedfa',
-
-  red80: '#2d1b1b',
-  red70: '#441f1f',
-  red60: '#712727',
-  red50: '#b43232',
-  red40: '#fa7878',
-  red30: '#fcb2b2',
-  red20: '#fed8d8',
-  red10: '#feecec',
-
-  orange80: '#2e2018',
-  orange70: '#452919',
-  orange60: '#743b1b',
-  orange50: '#b9571f',
-  orange40: '#ff9c64',
-  orange30: '#ffc7a7',
-  orange20: '#ffe3d3',
-  orange10: '#fff1e9',
-
-  gray80: GRAY_SCALE.gray70,
-  gray70: GRAY_SCALE.gray65,
-  gray60: GRAY_SCALE.gray55,
-  gray50: GRAY_SCALE.gray40,
-  gray40: GRAY_SCALE.gray25,
-  gray35: GRAY_SCALE.gray35,
-  gray30: GRAY_SCALE.gray20,
-  gray20: GRAY_SCALE.gray15,
-  gray10: GRAY_SCALE.gray10,
-  blueAccent90: '#141a25',
-  blueAccent85: '#151d2e',
-  blueAccent80: '#152037',
-  blueAccent75: '#16233f',
-  blueAccent70: '#17294a',
-  blueAccent60: '#18356d',
-  blueAccent40: '#a3c0f8',
-  blueAccent35: '#c8d9fb',
-  blueAccent25: '#dae6fc',
-  blueAccent20: '#e2ecfd',
-  blueAccent15: '#edf2fe',
-  blueAccent10: '#f5f9fd',
-};
diff --git a/packages/twenty-ui/src/theme/constants/SecondaryColorsDark.ts b/packages/twenty-ui/src/theme/constants/SecondaryColorsDark.ts
new file mode 100644
index 00000000000..8c47a849474
--- /dev/null
+++ b/packages/twenty-ui/src/theme/constants/SecondaryColorsDark.ts
@@ -0,0 +1,394 @@
+import * as RadixColors from '@radix-ui/colors';
+import { GRAY_SCALE_DARK } from '@ui/theme/constants/GrayScaleDark';
+
+export const SECONDARY_COLORS_DARK = {
+  yellow1: RadixColors.yellowDarkP3.yellow1,
+  yellow2: RadixColors.yellowDarkP3.yellow2,
+  yellow3: RadixColors.yellowDarkP3.yellow3,
+  yellow4: RadixColors.yellowDarkP3.yellow4,
+  yellow5: RadixColors.yellowDarkP3.yellow5,
+  yellow6: RadixColors.yellowDarkP3.yellow6,
+  yellow7: RadixColors.yellowDarkP3.yellow7,
+  yellow8: RadixColors.yellowDarkP3.yellow8,
+  yellow9: RadixColors.yellowDarkP3.yellow9,
+  yellow10: RadixColors.yellowDarkP3.yellow10,
+  yellow11: RadixColors.yellowDarkP3.yellow11,
+  yellow12: RadixColors.yellowDarkP3.yellow12,
+
+  green1: RadixColors.greenDarkP3.green1,
+  green2: RadixColors.greenDarkP3.green2,
+  green3: RadixColors.greenDarkP3.green3,
+  green4: RadixColors.greenDarkP3.green4,
+  green5: RadixColors.greenDarkP3.green5,
+  green6: RadixColors.greenDarkP3.green6,
+  green7: RadixColors.greenDarkP3.green7,
+  green8: RadixColors.greenDarkP3.green8,
+  green9: RadixColors.greenDarkP3.green9,
+  green10: RadixColors.greenDarkP3.green10,
+  green11: RadixColors.greenDarkP3.green11,
+  green12: RadixColors.greenDarkP3.green12,
+
+  turquoise1: RadixColors.tealDarkP3.teal1,
+  turquoise2: RadixColors.tealDarkP3.teal2,
+  turquoise3: RadixColors.tealDarkP3.teal3,
+  turquoise4: RadixColors.tealDarkP3.teal4,
+  turquoise5: RadixColors.tealDarkP3.teal5,
+  turquoise6: RadixColors.tealDarkP3.teal6,
+  turquoise7: RadixColors.tealDarkP3.teal7,
+  turquoise8: RadixColors.tealDarkP3.teal8,
+  turquoise9: RadixColors.tealDarkP3.teal9,
+  turquoise10: RadixColors.tealDarkP3.teal10,
+  turquoise11: RadixColors.tealDarkP3.teal11,
+  turquoise12: RadixColors.tealDarkP3.teal12,
+
+  sky1: RadixColors.skyDarkP3.sky1,
+  sky2: RadixColors.skyDarkP3.sky2,
+  sky3: RadixColors.skyDarkP3.sky3,
+  sky4: RadixColors.skyDarkP3.sky4,
+  sky5: RadixColors.skyDarkP3.sky5,
+  sky6: RadixColors.skyDarkP3.sky6,
+  sky7: RadixColors.skyDarkP3.sky7,
+  sky8: RadixColors.skyDarkP3.sky8,
+  sky9: RadixColors.skyP3.sky9,
+  sky10: RadixColors.skyDarkP3.sky10,
+  sky11: RadixColors.skyDarkP3.sky11,
+  sky12: RadixColors.skyDarkP3.sky12,
+
+  blue1: RadixColors.indigoDarkP3.indigo1,
+  blue2: RadixColors.indigoDarkP3.indigo2,
+  blue3: RadixColors.indigoDarkP3.indigo3,
+  blue4: RadixColors.indigoDarkP3.indigo4,
+  blue5: RadixColors.indigoDarkP3.indigo5,
+  blue6: RadixColors.indigoDarkP3.indigo6,
+  blue7: RadixColors.indigoDarkP3.indigo7,
+  blue8: RadixColors.indigoDarkP3.indigo8,
+  blue9: RadixColors.indigoDarkP3.indigo9,
+  blue10: RadixColors.indigoDarkP3.indigo10,
+  blue11: RadixColors.indigoDarkP3.indigo11,
+  blue12: RadixColors.indigoDarkP3.indigo12,
+
+  purple1: RadixColors.violetDarkP3.violet1,
+  purple2: RadixColors.violetDarkP3.violet2,
+  purple3: RadixColors.violetDarkP3.violet3,
+  purple4: RadixColors.violetDarkP3.violet4,
+  purple5: RadixColors.violetDarkP3.violet5,
+  purple6: RadixColors.violetDarkP3.violet6,
+  purple7: RadixColors.violetDarkP3.violet7,
+  purple8: RadixColors.violetDarkP3.violet8,
+  purple9: RadixColors.violetDarkP3.violet9,
+  purple10: RadixColors.violetDarkP3.violet10,
+  purple11: RadixColors.violetDarkP3.violet11,
+  purple12: RadixColors.violetDarkP3.violet12,
+
+  pink1: RadixColors.pinkDarkP3.pink1,
+  pink2: RadixColors.pinkDarkP3.pink2,
+  pink3: RadixColors.pinkDarkP3.pink3,
+  pink4: RadixColors.pinkDarkP3.pink4,
+  pink5: RadixColors.pinkDarkP3.pink5,
+  pink6: RadixColors.pinkDarkP3.pink6,
+  pink7: RadixColors.pinkDarkP3.pink7,
+  pink8: RadixColors.pinkDarkP3.pink8,
+  pink9: RadixColors.pinkDarkP3.pink9,
+  pink10: RadixColors.pinkDarkP3.pink10,
+  pink11: RadixColors.pinkDarkP3.pink11,
+  pink12: RadixColors.pinkDarkP3.pink12,
+
+  red1: RadixColors.redDarkP3.red1,
+  red2: RadixColors.redDarkP3.red2,
+  red3: RadixColors.redDarkP3.red3,
+  red4: RadixColors.redDarkP3.red4,
+  red5: RadixColors.redDarkP3.red5,
+  red6: RadixColors.redDarkP3.red6,
+  red7: RadixColors.redDarkP3.red7,
+  red8: RadixColors.redDarkP3.red8,
+  red9: RadixColors.redDarkP3.red9,
+  red10: RadixColors.redDarkP3.red10,
+  red11: RadixColors.redDarkP3.red11,
+  red12: RadixColors.redDarkP3.red12,
+
+  orange1: RadixColors.orangeDarkP3.orange1,
+  orange2: RadixColors.orangeDarkP3.orange2,
+  orange3: RadixColors.orangeDarkP3.orange3,
+  orange4: RadixColors.orangeDarkP3.orange4,
+  orange5: RadixColors.orangeDarkP3.orange5,
+  orange6: RadixColors.orangeDarkP3.orange6,
+  orange7: RadixColors.orangeDarkP3.orange7,
+  orange8: RadixColors.orangeDarkP3.orange8,
+  orange9: RadixColors.orangeDarkP3.orange9,
+  orange10: RadixColors.orangeDarkP3.orange10,
+  orange11: RadixColors.orangeDarkP3.orange11,
+  orange12: RadixColors.orangeDarkP3.orange12,
+
+  gray1: GRAY_SCALE_DARK.gray1,
+  gray2: GRAY_SCALE_DARK.gray2,
+  gray3: GRAY_SCALE_DARK.gray3,
+  gray4: GRAY_SCALE_DARK.gray4,
+  gray5: GRAY_SCALE_DARK.gray5,
+  gray6: GRAY_SCALE_DARK.gray6,
+  gray7: GRAY_SCALE_DARK.gray7,
+  gray8: GRAY_SCALE_DARK.gray8,
+  gray9: GRAY_SCALE_DARK.gray9,
+  gray10: GRAY_SCALE_DARK.gray10,
+  gray11: GRAY_SCALE_DARK.gray11,
+  gray12: GRAY_SCALE_DARK.gray12,
+
+  mauve1: RadixColors.mauveDarkP3.mauve1,
+  mauve2: RadixColors.mauveDarkP3.mauve2,
+  mauve3: RadixColors.mauveDarkP3.mauve3,
+  mauve4: RadixColors.mauveDarkP3.mauve4,
+  mauve5: RadixColors.mauveDarkP3.mauve5,
+  mauve6: RadixColors.mauveDarkP3.mauve6,
+  mauve7: RadixColors.mauveDarkP3.mauve7,
+  mauve8: RadixColors.mauveDarkP3.mauve8,
+  mauve9: RadixColors.mauveDarkP3.mauve9,
+  mauve10: RadixColors.mauveDarkP3.mauve10,
+  mauve11: RadixColors.mauveDarkP3.mauve11,
+  mauve12: RadixColors.mauveDarkP3.mauve12,
+
+  slate1: RadixColors.slateDarkP3.slate1,
+  slate2: RadixColors.slateDarkP3.slate2,
+  slate3: RadixColors.slateDarkP3.slate3,
+  slate4: RadixColors.slateDarkP3.slate4,
+  slate5: RadixColors.slateDarkP3.slate5,
+  slate6: RadixColors.slateDarkP3.slate6,
+  slate7: RadixColors.slateDarkP3.slate7,
+  slate8: RadixColors.slateDarkP3.slate8,
+  slate9: RadixColors.slateDarkP3.slate9,
+  slate10: RadixColors.slateDarkP3.slate10,
+  slate11: RadixColors.slateDarkP3.slate11,
+  slate12: RadixColors.slateDarkP3.slate12,
+
+  sage1: RadixColors.sageDarkP3.sage1,
+  sage2: RadixColors.sageDarkP3.sage2,
+  sage3: RadixColors.sageDarkP3.sage3,
+  sage4: RadixColors.sageDarkP3.sage4,
+  sage5: RadixColors.sageDarkP3.sage5,
+  sage6: RadixColors.sageDarkP3.sage6,
+  sage7: RadixColors.sageDarkP3.sage7,
+  sage8: RadixColors.sageDarkP3.sage8,
+  sage9: RadixColors.sageDarkP3.sage9,
+  sage10: RadixColors.sageDarkP3.sage10,
+  sage11: RadixColors.sageDarkP3.sage11,
+  sage12: RadixColors.sageDarkP3.sage12,
+
+  olive1: RadixColors.oliveDarkP3.olive1,
+  olive2: RadixColors.oliveDarkP3.olive2,
+  olive3: RadixColors.oliveDarkP3.olive3,
+  olive4: RadixColors.oliveDarkP3.olive4,
+  olive5: RadixColors.oliveDarkP3.olive5,
+  olive6: RadixColors.oliveDarkP3.olive6,
+  olive7: RadixColors.oliveDarkP3.olive7,
+  olive8: RadixColors.oliveDarkP3.olive8,
+  olive9: RadixColors.oliveDarkP3.olive9,
+  olive10: RadixColors.oliveDarkP3.olive10,
+  olive11: RadixColors.oliveDarkP3.olive11,
+  olive12: RadixColors.oliveDarkP3.olive12,
+
+  sand1: RadixColors.sandDarkP3.sand1,
+  sand2: RadixColors.sandDarkP3.sand2,
+  sand3: RadixColors.sandDarkP3.sand3,
+  sand4: RadixColors.sandDarkP3.sand4,
+  sand5: RadixColors.sandDarkP3.sand5,
+  sand6: RadixColors.sandDarkP3.sand6,
+  sand7: RadixColors.sandDarkP3.sand7,
+  sand8: RadixColors.sandDarkP3.sand8,
+  sand9: RadixColors.sandDarkP3.sand9,
+  sand10: RadixColors.sandDarkP3.sand10,
+  sand11: RadixColors.sandDarkP3.sand11,
+  sand12: RadixColors.sandDarkP3.sand12,
+
+  tomato1: RadixColors.tomatoDarkP3.tomato1,
+  tomato2: RadixColors.tomatoDarkP3.tomato2,
+  tomato3: RadixColors.tomatoDarkP3.tomato3,
+  tomato4: RadixColors.tomatoDarkP3.tomato4,
+  tomato5: RadixColors.tomatoDarkP3.tomato5,
+  tomato6: RadixColors.tomatoDarkP3.tomato6,
+  tomato7: RadixColors.tomatoDarkP3.tomato7,
+  tomato8: RadixColors.tomatoDarkP3.tomato8,
+  tomato9: RadixColors.tomatoDarkP3.tomato9,
+  tomato10: RadixColors.tomatoDarkP3.tomato10,
+  tomato11: RadixColors.tomatoDarkP3.tomato11,
+  tomato12: RadixColors.tomatoDarkP3.tomato12,
+
+  ruby1: RadixColors.rubyDarkP3.ruby1,
+  ruby2: RadixColors.rubyDarkP3.ruby2,
+  ruby3: RadixColors.rubyDarkP3.ruby3,
+  ruby4: RadixColors.rubyDarkP3.ruby4,
+  ruby5: RadixColors.rubyDarkP3.ruby5,
+  ruby6: RadixColors.rubyDarkP3.ruby6,
+  ruby7: RadixColors.rubyDarkP3.ruby7,
+  ruby8: RadixColors.rubyDarkP3.ruby8,
+  ruby9: RadixColors.rubyDarkP3.ruby9,
+  ruby10: RadixColors.rubyDarkP3.ruby10,
+  ruby11: RadixColors.rubyDarkP3.ruby11,
+  ruby12: RadixColors.rubyDarkP3.ruby12,
+
+  crimson1: RadixColors.crimsonDarkP3.crimson1,
+  crimson2: RadixColors.crimsonDarkP3.crimson2,
+  crimson3: RadixColors.crimsonDarkP3.crimson3,
+  crimson4: RadixColors.crimsonDarkP3.crimson4,
+  crimson5: RadixColors.crimsonDarkP3.crimson5,
+  crimson6: RadixColors.crimsonDarkP3.crimson6,
+  crimson7: RadixColors.crimsonDarkP3.crimson7,
+  crimson8: RadixColors.crimsonDarkP3.crimson8,
+  crimson9: RadixColors.crimsonDarkP3.crimson9,
+  crimson10: RadixColors.crimsonDarkP3.crimson10,
+  crimson11: RadixColors.crimsonDarkP3.crimson11,
+  crimson12: RadixColors.crimsonDarkP3.crimson12,
+
+  plum1: RadixColors.plumDarkP3.plum1,
+  plum2: RadixColors.plumDarkP3.plum2,
+  plum3: RadixColors.plumDarkP3.plum3,
+  plum4: RadixColors.plumDarkP3.plum4,
+  plum5: RadixColors.plumDarkP3.plum5,
+  plum6: RadixColors.plumDarkP3.plum6,
+  plum7: RadixColors.plumDarkP3.plum7,
+  plum8: RadixColors.plumDarkP3.plum8,
+  plum9: RadixColors.plumDarkP3.plum9,
+  plum10: RadixColors.plumDarkP3.plum10,
+  plum11: RadixColors.plumDarkP3.plum11,
+  plum12: RadixColors.plumDarkP3.plum12,
+
+  violet1: RadixColors.violetDarkP3.violet1,
+  violet2: RadixColors.violetDarkP3.violet2,
+  violet3: RadixColors.violetDarkP3.violet3,
+  violet4: RadixColors.violetDarkP3.violet4,
+  violet5: RadixColors.violetDarkP3.violet5,
+  violet6: RadixColors.violetDarkP3.violet6,
+  violet7: RadixColors.violetDarkP3.violet7,
+  violet8: RadixColors.violetDarkP3.violet8,
+  violet9: RadixColors.violetDarkP3.violet9,
+  violet10: RadixColors.violetDarkP3.violet10,
+  violet11: RadixColors.violetDarkP3.violet11,
+  violet12: RadixColors.violetDarkP3.violet12,
+
+  iris1: RadixColors.irisDarkP3.iris1,
+  iris2: RadixColors.irisDarkP3.iris2,
+  iris3: RadixColors.irisDarkP3.iris3,
+  iris4: RadixColors.irisDarkP3.iris4,
+  iris5: RadixColors.irisDarkP3.iris5,
+  iris6: RadixColors.irisDarkP3.iris6,
+  iris7: RadixColors.irisDarkP3.iris7,
+  iris8: RadixColors.irisDarkP3.iris8,
+  iris9: RadixColors.irisDarkP3.iris9,
+  iris10: RadixColors.irisDarkP3.iris10,
+  iris11: RadixColors.irisDarkP3.iris11,
+  iris12: RadixColors.irisDarkP3.iris12,
+
+  cyan1: RadixColors.cyanDarkP3.cyan1,
+  cyan2: RadixColors.cyanDarkP3.cyan2,
+  cyan3: RadixColors.cyanDarkP3.cyan3,
+  cyan4: RadixColors.cyanDarkP3.cyan4,
+  cyan5: RadixColors.cyanDarkP3.cyan5,
+  cyan6: RadixColors.cyanDarkP3.cyan6,
+  cyan7: RadixColors.cyanDarkP3.cyan7,
+  cyan8: RadixColors.cyanDarkP3.cyan8,
+  cyan9: RadixColors.cyanDarkP3.cyan9,
+  cyan10: RadixColors.cyanDarkP3.cyan10,
+  cyan11: RadixColors.cyanDarkP3.cyan11,
+  cyan12: RadixColors.cyanDarkP3.cyan12,
+
+  jade1: RadixColors.jadeDarkP3.jade1,
+  jade2: RadixColors.jadeDarkP3.jade2,
+  jade3: RadixColors.jadeDarkP3.jade3,
+  jade4: RadixColors.jadeDarkP3.jade4,
+  jade5: RadixColors.jadeDarkP3.jade5,
+  jade6: RadixColors.jadeDarkP3.jade6,
+  jade7: RadixColors.jadeDarkP3.jade7,
+  jade8: RadixColors.jadeDarkP3.jade8,
+  jade9: RadixColors.jadeDarkP3.jade9,
+  jade10: RadixColors.jadeDarkP3.jade10,
+  jade11: RadixColors.jadeDarkP3.jade11,
+  jade12: RadixColors.jadeDarkP3.jade12,
+
+  grass1: RadixColors.grassDarkP3.grass1,
+  grass2: RadixColors.grassDarkP3.grass2,
+  grass3: RadixColors.grassDarkP3.grass3,
+  grass4: RadixColors.grassDarkP3.grass4,
+  grass5: RadixColors.grassDarkP3.grass5,
+  grass6: RadixColors.grassDarkP3.grass6,
+  grass7: RadixColors.grassDarkP3.grass7,
+  grass8: RadixColors.grassDarkP3.grass8,
+  grass9: RadixColors.grassDarkP3.grass9,
+  grass10: RadixColors.grassDarkP3.grass10,
+  grass11: RadixColors.grassDarkP3.grass11,
+  grass12: RadixColors.grassDarkP3.grass12,
+
+  mint1: RadixColors.mintDarkP3.mint1,
+  mint2: RadixColors.mintDarkP3.mint2,
+  mint3: RadixColors.mintDarkP3.mint3,
+  mint4: RadixColors.mintDarkP3.mint4,
+  mint5: RadixColors.mintDarkP3.mint5,
+  mint6: RadixColors.mintDarkP3.mint6,
+  mint7: RadixColors.mintDarkP3.mint7,
+  mint8: RadixColors.mintDarkP3.mint8,
+  mint9: RadixColors.mintDarkP3.mint9,
+  mint10: RadixColors.mintDarkP3.mint10,
+  mint11: RadixColors.mintDarkP3.mint11,
+  mint12: RadixColors.mintDarkP3.mint12,
+
+  lime1: RadixColors.limeDarkP3.lime1,
+  lime2: RadixColors.limeDarkP3.lime2,
+  lime3: RadixColors.limeDarkP3.lime3,
+  lime4: RadixColors.limeDarkP3.lime4,
+  lime5: RadixColors.limeDarkP3.lime5,
+  lime6: RadixColors.limeDarkP3.lime6,
+  lime7: RadixColors.limeDarkP3.lime7,
+  lime8: RadixColors.limeDarkP3.lime8,
+  lime9: RadixColors.limeDarkP3.lime9,
+  lime10: RadixColors.limeDarkP3.lime10,
+  lime11: RadixColors.limeDarkP3.lime11,
+  lime12: RadixColors.limeDarkP3.lime12,
+
+  bronze1: RadixColors.bronzeDarkP3.bronze1,
+  bronze2: RadixColors.bronzeDarkP3.bronze2,
+  bronze3: RadixColors.bronzeDarkP3.bronze3,
+  bronze4: RadixColors.bronzeDarkP3.bronze4,
+  bronze5: RadixColors.bronzeDarkP3.bronze5,
+  bronze6: RadixColors.bronzeDarkP3.bronze6,
+  bronze7: RadixColors.bronzeDarkP3.bronze7,
+  bronze8: RadixColors.bronzeDarkP3.bronze8,
+  bronze9: RadixColors.bronzeDarkP3.bronze9,
+  bronze10: RadixColors.bronzeDarkP3.bronze10,
+  bronze11: RadixColors.bronzeDarkP3.bronze11,
+  bronze12: RadixColors.bronzeDarkP3.bronze12,
+
+  gold1: RadixColors.goldDarkP3.gold1,
+  gold2: RadixColors.goldDarkP3.gold2,
+  gold3: RadixColors.goldDarkP3.gold3,
+  gold4: RadixColors.goldDarkP3.gold4,
+  gold5: RadixColors.goldDarkP3.gold5,
+  gold6: RadixColors.goldDarkP3.gold6,
+  gold7: RadixColors.goldDarkP3.gold7,
+  gold8: RadixColors.goldDarkP3.gold8,
+  gold9: RadixColors.goldDarkP3.gold9,
+  gold10: RadixColors.goldDarkP3.gold10,
+  gold11: RadixColors.goldDarkP3.gold11,
+  gold12: RadixColors.goldDarkP3.gold12,
+
+  brown1: RadixColors.brownDarkP3.brown1,
+  brown2: RadixColors.brownDarkP3.brown2,
+  brown3: RadixColors.brownDarkP3.brown3,
+  brown4: RadixColors.brownDarkP3.brown4,
+  brown5: RadixColors.brownDarkP3.brown5,
+  brown6: RadixColors.brownDarkP3.brown6,
+  brown7: RadixColors.brownDarkP3.brown7,
+  brown8: RadixColors.brownDarkP3.brown8,
+  brown9: RadixColors.brownDarkP3.brown9,
+  brown10: RadixColors.brownDarkP3.brown10,
+  brown11: RadixColors.brownDarkP3.brown11,
+  brown12: RadixColors.brownDarkP3.brown12,
+
+  amber1: RadixColors.amberDarkP3.amber1,
+  amber2: RadixColors.amberDarkP3.amber2,
+  amber3: RadixColors.amberDarkP3.amber3,
+  amber4: RadixColors.amberDarkP3.amber4,
+  amber5: RadixColors.amberDarkP3.amber5,
+  amber6: RadixColors.amberDarkP3.amber6,
+  amber7: RadixColors.amberDarkP3.amber7,
+  amber8: RadixColors.amberDarkP3.amber8,
+  amber9: RadixColors.amberDarkP3.amber9,
+  amber10: RadixColors.amberDarkP3.amber10,
+  amber11: RadixColors.amberDarkP3.amber11,
+  amber12: RadixColors.amberDarkP3.amber12,
+};
diff --git a/packages/twenty-ui/src/theme/constants/SecondaryColorsLight.ts b/packages/twenty-ui/src/theme/constants/SecondaryColorsLight.ts
new file mode 100644
index 00000000000..3bffa61e657
--- /dev/null
+++ b/packages/twenty-ui/src/theme/constants/SecondaryColorsLight.ts
@@ -0,0 +1,394 @@
+import * as RadixColors from '@radix-ui/colors';
+import { GRAY_SCALE_LIGHT } from './GrayScaleLight';
+
+export const SECONDARY_COLORS_LIGHT = {
+  yellow1: RadixColors.yellowP3.yellow1,
+  yellow2: RadixColors.yellowP3.yellow2,
+  yellow3: RadixColors.yellowP3.yellow3,
+  yellow4: RadixColors.yellowP3.yellow4,
+  yellow5: RadixColors.yellowP3.yellow5,
+  yellow6: RadixColors.yellowP3.yellow6,
+  yellow7: RadixColors.yellowP3.yellow7,
+  yellow8: RadixColors.yellowP3.yellow8,
+  yellow9: RadixColors.yellowP3.yellow9,
+  yellow10: RadixColors.yellowP3.yellow10,
+  yellow11: RadixColors.yellowP3.yellow11,
+  yellow12: RadixColors.yellowP3.yellow12,
+
+  green1: RadixColors.greenP3.green1,
+  green2: RadixColors.greenP3.green2,
+  green3: RadixColors.greenP3.green3,
+  green4: RadixColors.greenP3.green4,
+  green5: RadixColors.greenP3.green5,
+  green6: RadixColors.greenP3.green6,
+  green7: RadixColors.greenP3.green7,
+  green8: RadixColors.greenP3.green8,
+  green9: RadixColors.greenP3.green9,
+  green10: RadixColors.greenP3.green10,
+  green11: RadixColors.greenP3.green11,
+  green12: RadixColors.greenP3.green12,
+
+  turquoise1: RadixColors.tealP3.teal1,
+  turquoise2: RadixColors.tealP3.teal2,
+  turquoise3: RadixColors.tealP3.teal3,
+  turquoise4: RadixColors.tealP3.teal4,
+  turquoise5: RadixColors.tealP3.teal5,
+  turquoise6: RadixColors.tealP3.teal6,
+  turquoise7: RadixColors.tealP3.teal7,
+  turquoise8: RadixColors.tealP3.teal8,
+  turquoise9: RadixColors.tealP3.teal9,
+  turquoise10: RadixColors.tealP3.teal10,
+  turquoise11: RadixColors.tealP3.teal11,
+  turquoise12: RadixColors.tealP3.teal12,
+
+  sky1: RadixColors.skyP3.sky1,
+  sky2: RadixColors.skyP3.sky2,
+  sky3: RadixColors.skyP3.sky3,
+  sky4: RadixColors.skyP3.sky4,
+  sky5: RadixColors.skyP3.sky5,
+  sky6: RadixColors.skyP3.sky6,
+  sky7: RadixColors.skyP3.sky7,
+  sky8: RadixColors.skyP3.sky8,
+  sky9: RadixColors.skyP3.sky9,
+  sky10: RadixColors.skyP3.sky10,
+  sky11: RadixColors.skyP3.sky11,
+  sky12: RadixColors.skyP3.sky12,
+
+  blue1: RadixColors.indigoP3.indigo1,
+  blue2: RadixColors.indigoP3.indigo2,
+  blue3: RadixColors.indigoP3.indigo3,
+  blue4: RadixColors.indigoP3.indigo4,
+  blue5: RadixColors.indigoP3.indigo5,
+  blue6: RadixColors.indigoP3.indigo6,
+  blue7: RadixColors.indigoP3.indigo7,
+  blue8: RadixColors.indigoP3.indigo8,
+  blue9: RadixColors.indigoP3.indigo9,
+  blue10: RadixColors.indigoP3.indigo10,
+  blue11: RadixColors.indigoP3.indigo11,
+  blue12: RadixColors.indigoP3.indigo12,
+
+  purple1: RadixColors.violetP3.violet1,
+  purple2: RadixColors.violetP3.violet2,
+  purple3: RadixColors.violetP3.violet3,
+  purple4: RadixColors.violetP3.violet4,
+  purple5: RadixColors.violetP3.violet5,
+  purple6: RadixColors.violetP3.violet6,
+  purple7: RadixColors.violetP3.violet7,
+  purple8: RadixColors.violetP3.violet8,
+  purple9: RadixColors.violetP3.violet9,
+  purple10: RadixColors.violetP3.violet10,
+  purple11: RadixColors.violetP3.violet11,
+  purple12: RadixColors.violetP3.violet12,
+
+  pink1: RadixColors.pinkP3.pink1,
+  pink2: RadixColors.pinkP3.pink2,
+  pink3: RadixColors.pinkP3.pink3,
+  pink4: RadixColors.pinkP3.pink4,
+  pink5: RadixColors.pinkP3.pink5,
+  pink6: RadixColors.pinkP3.pink6,
+  pink7: RadixColors.pinkP3.pink7,
+  pink8: RadixColors.pinkP3.pink8,
+  pink9: RadixColors.pinkP3.pink9,
+  pink10: RadixColors.pinkP3.pink10,
+  pink11: RadixColors.pinkP3.pink11,
+  pink12: RadixColors.pinkP3.pink12,
+
+  red1: RadixColors.redP3.red1,
+  red2: RadixColors.redP3.red2,
+  red3: RadixColors.redP3.red3,
+  red4: RadixColors.redP3.red4,
+  red5: RadixColors.redP3.red5,
+  red6: RadixColors.redP3.red6,
+  red7: RadixColors.redP3.red7,
+  red8: RadixColors.redP3.red8,
+  red9: RadixColors.redP3.red9,
+  red10: RadixColors.redP3.red10,
+  red11: RadixColors.redP3.red11,
+  red12: RadixColors.redP3.red12,
+
+  orange1: RadixColors.orangeP3.orange1,
+  orange2: RadixColors.orangeP3.orange2,
+  orange3: RadixColors.orangeP3.orange3,
+  orange4: RadixColors.orangeP3.orange4,
+  orange5: RadixColors.orangeP3.orange5,
+  orange6: RadixColors.orangeP3.orange6,
+  orange7: RadixColors.orangeP3.orange7,
+  orange8: RadixColors.orangeP3.orange8,
+  orange9: RadixColors.orangeP3.orange9,
+  orange10: RadixColors.orangeP3.orange10,
+  orange11: RadixColors.orangeP3.orange11,
+  orange12: RadixColors.orangeP3.orange12,
+
+  gray1: GRAY_SCALE_LIGHT.gray1,
+  gray2: GRAY_SCALE_LIGHT.gray2,
+  gray3: GRAY_SCALE_LIGHT.gray3,
+  gray4: GRAY_SCALE_LIGHT.gray4,
+  gray5: GRAY_SCALE_LIGHT.gray5,
+  gray6: GRAY_SCALE_LIGHT.gray6,
+  gray7: GRAY_SCALE_LIGHT.gray7,
+  gray8: GRAY_SCALE_LIGHT.gray8,
+  gray9: GRAY_SCALE_LIGHT.gray9,
+  gray10: GRAY_SCALE_LIGHT.gray10,
+  gray11: GRAY_SCALE_LIGHT.gray11,
+  gray12: GRAY_SCALE_LIGHT.gray12,
+
+  mauve1: RadixColors.mauveP3.mauve1,
+  mauve2: RadixColors.mauveP3.mauve2,
+  mauve3: RadixColors.mauveP3.mauve3,
+  mauve4: RadixColors.mauveP3.mauve4,
+  mauve5: RadixColors.mauveP3.mauve5,
+  mauve6: RadixColors.mauveP3.mauve6,
+  mauve7: RadixColors.mauveP3.mauve7,
+  mauve8: RadixColors.mauveP3.mauve8,
+  mauve9: RadixColors.mauveP3.mauve9,
+  mauve10: RadixColors.mauveP3.mauve10,
+  mauve11: RadixColors.mauveP3.mauve11,
+  mauve12: RadixColors.mauveP3.mauve12,
+
+  slate1: RadixColors.slateP3.slate1,
+  slate2: RadixColors.slateP3.slate2,
+  slate3: RadixColors.slateP3.slate3,
+  slate4: RadixColors.slateP3.slate4,
+  slate5: RadixColors.slateP3.slate5,
+  slate6: RadixColors.slateP3.slate6,
+  slate7: RadixColors.slateP3.slate7,
+  slate8: RadixColors.slateP3.slate8,
+  slate9: RadixColors.slateP3.slate9,
+  slate10: RadixColors.slateP3.slate10,
+  slate11: RadixColors.slateP3.slate11,
+  slate12: RadixColors.slateP3.slate12,
+
+  sage1: RadixColors.sageP3.sage1,
+  sage2: RadixColors.sageP3.sage2,
+  sage3: RadixColors.sageP3.sage3,
+  sage4: RadixColors.sageP3.sage4,
+  sage5: RadixColors.sageP3.sage5,
+  sage6: RadixColors.sageP3.sage6,
+  sage7: RadixColors.sageP3.sage7,
+  sage8: RadixColors.sageP3.sage8,
+  sage9: RadixColors.sageP3.sage9,
+  sage10: RadixColors.sageP3.sage10,
+  sage11: RadixColors.sageP3.sage11,
+  sage12: RadixColors.sageP3.sage12,
+
+  olive1: RadixColors.oliveP3.olive1,
+  olive2: RadixColors.oliveP3.olive2,
+  olive3: RadixColors.oliveP3.olive3,
+  olive4: RadixColors.oliveP3.olive4,
+  olive5: RadixColors.oliveP3.olive5,
+  olive6: RadixColors.oliveP3.olive6,
+  olive7: RadixColors.oliveP3.olive7,
+  olive8: RadixColors.oliveP3.olive8,
+  olive9: RadixColors.oliveP3.olive9,
+  olive10: RadixColors.oliveP3.olive10,
+  olive11: RadixColors.oliveP3.olive11,
+  olive12: RadixColors.oliveP3.olive12,
+
+  sand1: RadixColors.sandP3.sand1,
+  sand2: RadixColors.sandP3.sand2,
+  sand3: RadixColors.sandP3.sand3,
+  sand4: RadixColors.sandP3.sand4,
+  sand5: RadixColors.sandP3.sand5,
+  sand6: RadixColors.sandP3.sand6,
+  sand7: RadixColors.sandP3.sand7,
+  sand8: RadixColors.sandP3.sand8,
+  sand9: RadixColors.sandP3.sand9,
+  sand10: RadixColors.sandP3.sand10,
+  sand11: RadixColors.sandP3.sand11,
+  sand12: RadixColors.sandP3.sand12,
+
+  tomato1: RadixColors.tomatoP3.tomato1,
+  tomato2: RadixColors.tomatoP3.tomato2,
+  tomato3: RadixColors.tomatoP3.tomato3,
+  tomato4: RadixColors.tomatoP3.tomato4,
+  tomato5: RadixColors.tomatoP3.tomato5,
+  tomato6: RadixColors.tomatoP3.tomato6,
+  tomato7: RadixColors.tomatoP3.tomato7,
+  tomato8: RadixColors.tomatoP3.tomato8,
+  tomato9: RadixColors.tomatoP3.tomato9,
+  tomato10: RadixColors.tomatoP3.tomato10,
+  tomato11: RadixColors.tomatoP3.tomato11,
+  tomato12: RadixColors.tomatoP3.tomato12,
+
+  ruby1: RadixColors.rubyP3.ruby1,
+  ruby2: RadixColors.rubyP3.ruby2,
+  ruby3: RadixColors.rubyP3.ruby3,
+  ruby4: RadixColors.rubyP3.ruby4,
+  ruby5: RadixColors.rubyP3.ruby5,
+  ruby6: RadixColors.rubyP3.ruby6,
+  ruby7: RadixColors.rubyP3.ruby7,
+  ruby8: RadixColors.rubyP3.ruby8,
+  ruby9: RadixColors.rubyP3.ruby9,
+  ruby10: RadixColors.rubyP3.ruby10,
+  ruby11: RadixColors.rubyP3.ruby11,
+  ruby12: RadixColors.rubyP3.ruby12,
+
+  crimson1: RadixColors.crimsonP3.crimson1,
+  crimson2: RadixColors.crimsonP3.crimson2,
+  crimson3: RadixColors.crimsonP3.crimson3,
+  crimson4: RadixColors.crimsonP3.crimson4,
+  crimson5: RadixColors.crimsonP3.crimson5,
+  crimson6: RadixColors.crimsonP3.crimson6,
+  crimson7: RadixColors.crimsonP3.crimson7,
+  crimson8: RadixColors.crimsonP3.crimson8,
+  crimson9: RadixColors.crimsonP3.crimson9,
+  crimson10: RadixColors.crimsonP3.crimson10,
+  crimson11: RadixColors.crimsonP3.crimson11,
+  crimson12: RadixColors.crimsonP3.crimson12,
+
+  plum1: RadixColors.plumP3.plum1,
+  plum2: RadixColors.plumP3.plum2,
+  plum3: RadixColors.plumP3.plum3,
+  plum4: RadixColors.plumP3.plum4,
+  plum5: RadixColors.plumP3.plum5,
+  plum6: RadixColors.plumP3.plum6,
+  plum7: RadixColors.plumP3.plum7,
+  plum8: RadixColors.plumP3.plum8,
+  plum9: RadixColors.plumP3.plum9,
+  plum10: RadixColors.plumP3.plum10,
+  plum11: RadixColors.plumP3.plum11,
+  plum12: RadixColors.plumP3.plum12,
+
+  violet1: RadixColors.violetP3.violet1,
+  violet2: RadixColors.violetP3.violet2,
+  violet3: RadixColors.violetP3.violet3,
+  violet4: RadixColors.violetP3.violet4,
+  violet5: RadixColors.violetP3.violet5,
+  violet6: RadixColors.violetP3.violet6,
+  violet7: RadixColors.violetP3.violet7,
+  violet8: RadixColors.violetP3.violet8,
+  violet9: RadixColors.violetP3.violet9,
+  violet10: RadixColors.violetP3.violet10,
+  violet11: RadixColors.violetP3.violet11,
+  violet12: RadixColors.violetP3.violet12,
+
+  iris1: RadixColors.irisP3.iris1,
+  iris2: RadixColors.irisP3.iris2,
+  iris3: RadixColors.irisP3.iris3,
+  iris4: RadixColors.irisP3.iris4,
+  iris5: RadixColors.irisP3.iris5,
+  iris6: RadixColors.irisP3.iris6,
+  iris7: RadixColors.irisP3.iris7,
+  iris8: RadixColors.irisP3.iris8,
+  iris9: RadixColors.irisP3.iris9,
+  iris10: RadixColors.irisP3.iris10,
+  iris11: RadixColors.irisP3.iris11,
+  iris12: RadixColors.irisP3.iris12,
+
+  cyan1: RadixColors.cyanP3.cyan1,
+  cyan2: RadixColors.cyanP3.cyan2,
+  cyan3: RadixColors.cyanP3.cyan3,
+  cyan4: RadixColors.cyanP3.cyan4,
+  cyan5: RadixColors.cyanP3.cyan5,
+  cyan6: RadixColors.cyanP3.cyan6,
+  cyan7: RadixColors.cyanP3.cyan7,
+  cyan8: RadixColors.cyanP3.cyan8,
+  cyan9: RadixColors.cyanP3.cyan9,
+  cyan10: RadixColors.cyanP3.cyan10,
+  cyan11: RadixColors.cyanP3.cyan11,
+  cyan12: RadixColors.cyanP3.cyan12,
+
+  jade1: RadixColors.jadeP3.jade1,
+  jade2: RadixColors.jadeP3.jade2,
+  jade3: RadixColors.jadeP3.jade3,
+  jade4: RadixColors.jadeP3.jade4,
+  jade5: RadixColors.jadeP3.jade5,
+  jade6: RadixColors.jadeP3.jade6,
+  jade7: RadixColors.jadeP3.jade7,
+  jade8: RadixColors.jadeP3.jade8,
+  jade9: RadixColors.jadeP3.jade9,
+  jade10: RadixColors.jadeP3.jade10,
+  jade11: RadixColors.jadeP3.jade11,
+  jade12: RadixColors.jadeP3.jade12,
+
+  grass1: RadixColors.grassP3.grass1,
+  grass2: RadixColors.grassP3.grass2,
+  grass3: RadixColors.grassP3.grass3,
+  grass4: RadixColors.grassP3.grass4,
+  grass5: RadixColors.grassP3.grass5,
+  grass6: RadixColors.grassP3.grass6,
+  grass7: RadixColors.grassP3.grass7,
+  grass8: RadixColors.grassP3.grass8,
+  grass9: RadixColors.grassP3.grass9,
+  grass10: RadixColors.grassP3.grass10,
+  grass11: RadixColors.grassP3.grass11,
+  grass12: RadixColors.grassP3.grass12,
+
+  mint1: RadixColors.mintP3.mint1,
+  mint2: RadixColors.mintP3.mint2,
+  mint3: RadixColors.mintP3.mint3,
+  mint4: RadixColors.mintP3.mint4,
+  mint5: RadixColors.mintP3.mint5,
+  mint6: RadixColors.mintP3.mint6,
+  mint7: RadixColors.mintP3.mint7,
+  mint8: RadixColors.mintP3.mint8,
+  mint9: RadixColors.mintP3.mint9,
+  mint10: RadixColors.mintP3.mint10,
+  mint11: RadixColors.mintP3.mint11,
+  mint12: RadixColors.mintP3.mint12,
+
+  lime1: RadixColors.limeP3.lime1,
+  lime2: RadixColors.limeP3.lime2,
+  lime3: RadixColors.limeP3.lime3,
+  lime4: RadixColors.limeP3.lime4,
+  lime5: RadixColors.limeP3.lime5,
+  lime6: RadixColors.limeP3.lime6,
+  lime7: RadixColors.limeP3.lime7,
+  lime8: RadixColors.limeP3.lime8,
+  lime9: RadixColors.limeP3.lime9,
+  lime10: RadixColors.limeP3.lime10,
+  lime11: RadixColors.limeP3.lime11,
+  lime12: RadixColors.limeP3.lime12,
+
+  bronze1: RadixColors.bronzeP3.bronze1,
+  bronze2: RadixColors.bronzeP3.bronze2,
+  bronze3: RadixColors.bronzeP3.bronze3,
+  bronze4: RadixColors.bronzeP3.bronze4,
+  bronze5: RadixColors.bronzeP3.bronze5,
+  bronze6: RadixColors.bronzeP3.bronze6,
+  bronze7: RadixColors.bronzeP3.bronze7,
+  bronze8: RadixColors.bronzeP3.bronze8,
+  bronze9: RadixColors.bronzeP3.bronze9,
+  bronze10: RadixColors.bronzeP3.bronze10,
+  bronze11: RadixColors.bronzeP3.bronze11,
+  bronze12: RadixColors.bronzeP3.bronze12,
+
+  gold1: RadixColors.goldP3.gold1,
+  gold2: RadixColors.goldP3.gold2,
+  gold3: RadixColors.goldP3.gold3,
+  gold4: RadixColors.goldP3.gold4,
+  gold5: RadixColors.goldP3.gold5,
+  gold6: RadixColors.goldP3.gold6,
+  gold7: RadixColors.goldP3.gold7,
+  gold8: RadixColors.goldP3.gold8,
+  gold9: RadixColors.goldP3.gold9,
+  gold10: RadixColors.goldP3.gold10,
+  gold11: RadixColors.goldP3.gold11,
+  gold12: RadixColors.goldP3.gold12,
+
+  brown1: RadixColors.brownP3.brown1,
+  brown2: RadixColors.brownP3.brown2,
+  brown3: RadixColors.brownP3.brown3,
+  brown4: RadixColors.brownP3.brown4,
+  brown5: RadixColors.brownP3.brown5,
+  brown6: RadixColors.brownP3.brown6,
+  brown7: RadixColors.brownP3.brown7,
+  brown8: RadixColors.brownP3.brown8,
+  brown9: RadixColors.brownP3.brown9,
+  brown10: RadixColors.brownP3.brown10,
+  brown11: RadixColors.brownP3.brown11,
+  brown12: RadixColors.brownP3.brown12,
+
+  amber1: RadixColors.amberP3.amber1,
+  amber2: RadixColors.amberP3.amber2,
+  amber3: RadixColors.amberP3.amber3,
+  amber4: RadixColors.amberP3.amber4,
+  amber5: RadixColors.amberP3.amber5,
+  amber6: RadixColors.amberP3.amber6,
+  amber7: RadixColors.amberP3.amber7,
+  amber8: RadixColors.amberP3.amber8,
+  amber9: RadixColors.amberP3.amber9,
+  amber10: RadixColors.amberP3.amber10,
+  amber11: RadixColors.amberP3.amber11,
+  amber12: RadixColors.amberP3.amber12,
+};
diff --git a/packages/twenty-ui/src/theme/constants/SnackBarCommon.ts b/packages/twenty-ui/src/theme/constants/SnackBarCommon.ts
deleted file mode 100644
index 8fe725611c0..00000000000
--- a/packages/twenty-ui/src/theme/constants/SnackBarCommon.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { MAIN_COLORS } from '@ui/theme/constants/MainColors';
-import { RGBA } from '@ui/theme/constants/Rgba';
-
-export const SNACK_BAR_COMMON = {
-  success: {
-    color: MAIN_COLORS.turquoise,
-    backgroundColor: RGBA(MAIN_COLORS.turquoise, 0.04),
-  },
-  error: {
-    color: MAIN_COLORS.red,
-    backgroundColor: RGBA(MAIN_COLORS.red, 0.04),
-  },
-  warning: {
-    color: MAIN_COLORS.orange,
-    backgroundColor: RGBA(MAIN_COLORS.orange, 0.04),
-  },
-  info: {
-    color: MAIN_COLORS.blue,
-    backgroundColor: RGBA(MAIN_COLORS.blue, 0.04),
-  },
-};
diff --git a/packages/twenty-ui/src/theme/constants/SnackBarDark.ts b/packages/twenty-ui/src/theme/constants/SnackBarDark.ts
index 4148b99dcec..3404932b7be 100644
--- a/packages/twenty-ui/src/theme/constants/SnackBarDark.ts
+++ b/packages/twenty-ui/src/theme/constants/SnackBarDark.ts
@@ -1,9 +1,24 @@
 import { BACKGROUND_DARK } from '@ui/theme/constants/BackgroundDark';
 import { FONT_DARK } from '@ui/theme/constants/FontDark';
-import { SNACK_BAR_COMMON } from '@ui/theme/constants/SnackBarCommon';
+import { MAIN_COLORS_DARK } from '@ui/theme/constants/MainColorsDark';
 
 export const SNACK_BAR_DARK = {
-  ...SNACK_BAR_COMMON,
+  success: {
+    color: MAIN_COLORS_DARK.turquoise,
+    backgroundColor: BACKGROUND_DARK.transparent.success,
+  },
+  error: {
+    color: MAIN_COLORS_DARK.red,
+    backgroundColor: BACKGROUND_DARK.transparent.danger,
+  },
+  warning: {
+    color: MAIN_COLORS_DARK.orange,
+    backgroundColor: BACKGROUND_DARK.transparent.orange,
+  },
+  info: {
+    color: MAIN_COLORS_DARK.blue,
+    backgroundColor: BACKGROUND_DARK.transparent.blue,
+  },
   default: {
     color: FONT_DARK.color.primary,
     backgroundColor: BACKGROUND_DARK.transparent.light,
diff --git a/packages/twenty-ui/src/theme/constants/SnackBarLight.ts b/packages/twenty-ui/src/theme/constants/SnackBarLight.ts
index 15230a03d57..38a13940a38 100644
--- a/packages/twenty-ui/src/theme/constants/SnackBarLight.ts
+++ b/packages/twenty-ui/src/theme/constants/SnackBarLight.ts
@@ -1,9 +1,24 @@
 import { BACKGROUND_LIGHT } from '@ui/theme/constants/BackgroundLight';
 import { FONT_LIGHT } from '@ui/theme/constants/FontLight';
-import { SNACK_BAR_COMMON } from '@ui/theme/constants/SnackBarCommon';
+import { MAIN_COLORS_LIGHT } from '@ui/theme/constants/MainColorsLight';
 
 export const SNACK_BAR_LIGHT = {
-  ...SNACK_BAR_COMMON,
+  success: {
+    color: MAIN_COLORS_LIGHT.turquoise,
+    backgroundColor: BACKGROUND_LIGHT.transparent.success,
+  },
+  error: {
+    color: MAIN_COLORS_LIGHT.red,
+    backgroundColor: BACKGROUND_LIGHT.transparent.danger,
+  },
+  warning: {
+    color: MAIN_COLORS_LIGHT.orange,
+    backgroundColor: BACKGROUND_LIGHT.transparent.orange,
+  },
+  info: {
+    color: MAIN_COLORS_LIGHT.blue,
+    backgroundColor: BACKGROUND_LIGHT.transparent.blue,
+  },
   default: {
     color: FONT_LIGHT.color.primary,
     backgroundColor: BACKGROUND_LIGHT.transparent.light,
diff --git a/packages/twenty-ui/src/theme/constants/TagDark.ts b/packages/twenty-ui/src/theme/constants/TagDark.ts
index 5728ca8e2f3..cde57b776a1 100644
--- a/packages/twenty-ui/src/theme/constants/TagDark.ts
+++ b/packages/twenty-ui/src/theme/constants/TagDark.ts
@@ -1,28 +1,68 @@
-import { COLOR } from './Colors';
+import { COLOR_DARK } from '@ui/theme/constants/ColorsDark';
 
 export const TAG_DARK = {
   text: {
-    green: COLOR.green10,
-    turquoise: COLOR.turquoise10,
-    sky: COLOR.sky10,
-    blue: COLOR.blue10,
-    purple: COLOR.purple10,
-    pink: COLOR.pink10,
-    red: COLOR.red10,
-    orange: COLOR.orange10,
-    yellow: COLOR.yellow10,
-    gray: COLOR.gray10,
+    gray: COLOR_DARK.gray11,
+    mauve: COLOR_DARK.mauve11,
+    slate: COLOR_DARK.slate11,
+    sage: COLOR_DARK.sage11,
+    olive: COLOR_DARK.olive11,
+    sand: COLOR_DARK.sand11,
+    tomato: COLOR_DARK.tomato11,
+    red: COLOR_DARK.red11,
+    ruby: COLOR_DARK.ruby11,
+    crimson: COLOR_DARK.crimson11,
+    pink: COLOR_DARK.pink11,
+    plum: COLOR_DARK.plum11,
+    purple: COLOR_DARK.purple11,
+    violet: COLOR_DARK.violet11,
+    iris: COLOR_DARK.iris11,
+    cyan: COLOR_DARK.cyan11,
+    turquoise: COLOR_DARK.turquoise11,
+    sky: COLOR_DARK.sky11,
+    blue: COLOR_DARK.blue11,
+    jade: COLOR_DARK.jade11,
+    green: COLOR_DARK.green11,
+    grass: COLOR_DARK.grass11,
+    mint: COLOR_DARK.mint11,
+    lime: COLOR_DARK.lime11,
+    bronze: COLOR_DARK.bronze11,
+    gold: COLOR_DARK.gold11,
+    brown: COLOR_DARK.brown11,
+    orange: COLOR_DARK.orange11,
+    amber: COLOR_DARK.amber11,
+    yellow: COLOR_DARK.yellow11,
   },
   background: {
-    green: COLOR.green60,
-    turquoise: COLOR.turquoise60,
-    sky: COLOR.sky60,
-    blue: COLOR.blue60,
-    purple: COLOR.purple60,
-    pink: COLOR.pink60,
-    red: COLOR.red60,
-    orange: COLOR.orange60,
-    yellow: COLOR.yellow60,
-    gray: COLOR.gray60,
+    gray: COLOR_DARK.gray4,
+    mauve: COLOR_DARK.mauve4,
+    slate: COLOR_DARK.slate4,
+    sage: COLOR_DARK.sage4,
+    olive: COLOR_DARK.olive4,
+    sand: COLOR_DARK.sand4,
+    tomato: COLOR_DARK.tomato4,
+    red: COLOR_DARK.red4,
+    ruby: COLOR_DARK.ruby4,
+    crimson: COLOR_DARK.crimson4,
+    pink: COLOR_DARK.pink4,
+    plum: COLOR_DARK.plum4,
+    purple: COLOR_DARK.purple4,
+    violet: COLOR_DARK.violet4,
+    iris: COLOR_DARK.iris4,
+    cyan: COLOR_DARK.cyan4,
+    turquoise: COLOR_DARK.turquoise4,
+    sky: COLOR_DARK.sky4,
+    blue: COLOR_DARK.blue4,
+    jade: COLOR_DARK.jade4,
+    green: COLOR_DARK.green4,
+    grass: COLOR_DARK.grass4,
+    mint: COLOR_DARK.mint4,
+    lime: COLOR_DARK.lime4,
+    bronze: COLOR_DARK.bronze4,
+    gold: COLOR_DARK.gold4,
+    brown: COLOR_DARK.brown4,
+    orange: COLOR_DARK.orange4,
+    amber: COLOR_DARK.amber4,
+    yellow: COLOR_DARK.yellow4,
   },
 };
diff --git a/packages/twenty-ui/src/theme/constants/TagLight.ts b/packages/twenty-ui/src/theme/constants/TagLight.ts
index 29bdee8be63..05af2a03fef 100644
--- a/packages/twenty-ui/src/theme/constants/TagLight.ts
+++ b/packages/twenty-ui/src/theme/constants/TagLight.ts
@@ -1,28 +1,68 @@
-import { COLOR } from './Colors';
+import { COLOR_LIGHT } from '@ui/theme/constants/ColorsLight';
 
 export const TAG_LIGHT = {
   text: {
-    green: COLOR.green60,
-    turquoise: COLOR.turquoise60,
-    sky: COLOR.sky60,
-    blue: COLOR.blue60,
-    purple: COLOR.purple60,
-    pink: COLOR.pink60,
-    red: COLOR.red60,
-    orange: COLOR.orange60,
-    yellow: COLOR.yellow60,
-    gray: COLOR.gray60,
+    gray: COLOR_LIGHT.gray11,
+    mauve: COLOR_LIGHT.mauve11,
+    slate: COLOR_LIGHT.slate11,
+    sage: COLOR_LIGHT.sage11,
+    olive: COLOR_LIGHT.olive11,
+    sand: COLOR_LIGHT.sand11,
+    tomato: COLOR_LIGHT.tomato11,
+    red: COLOR_LIGHT.red11,
+    ruby: COLOR_LIGHT.ruby11,
+    crimson: COLOR_LIGHT.crimson11,
+    pink: COLOR_LIGHT.pink11,
+    plum: COLOR_LIGHT.plum11,
+    purple: COLOR_LIGHT.purple11,
+    violet: COLOR_LIGHT.violet11,
+    iris: COLOR_LIGHT.iris11,
+    cyan: COLOR_LIGHT.cyan11,
+    turquoise: COLOR_LIGHT.turquoise11,
+    sky: COLOR_LIGHT.sky11,
+    blue: COLOR_LIGHT.blue11,
+    jade: COLOR_LIGHT.jade11,
+    green: COLOR_LIGHT.green11,
+    grass: COLOR_LIGHT.grass11,
+    mint: COLOR_LIGHT.mint11,
+    lime: COLOR_LIGHT.lime11,
+    bronze: COLOR_LIGHT.bronze11,
+    gold: COLOR_LIGHT.gold11,
+    brown: COLOR_LIGHT.brown11,
+    orange: COLOR_LIGHT.orange11,
+    amber: COLOR_LIGHT.amber11,
+    yellow: COLOR_LIGHT.yellow11,
   },
   background: {
-    green: COLOR.green20,
-    turquoise: COLOR.turquoise20,
-    sky: COLOR.sky20,
-    blue: COLOR.blue20,
-    purple: COLOR.purple20,
-    pink: COLOR.pink20,
-    red: COLOR.red20,
-    orange: COLOR.orange20,
-    yellow: COLOR.yellow20,
-    gray: COLOR.gray20,
+    gray: COLOR_LIGHT.gray4,
+    mauve: COLOR_LIGHT.mauve4,
+    slate: COLOR_LIGHT.slate4,
+    sage: COLOR_LIGHT.sage4,
+    olive: COLOR_LIGHT.olive4,
+    sand: COLOR_LIGHT.sand4,
+    tomato: COLOR_LIGHT.tomato4,
+    red: COLOR_LIGHT.red4,
+    ruby: COLOR_LIGHT.ruby4,
+    crimson: COLOR_LIGHT.crimson4,
+    pink: COLOR_LIGHT.pink4,
+    plum: COLOR_LIGHT.plum4,
+    purple: COLOR_LIGHT.purple4,
+    violet: COLOR_LIGHT.violet4,
+    iris: COLOR_LIGHT.iris4,
+    cyan: COLOR_LIGHT.cyan4,
+    turquoise: COLOR_LIGHT.turquoise4,
+    sky: COLOR_LIGHT.sky4,
+    blue: COLOR_LIGHT.blue4,
+    jade: COLOR_LIGHT.jade4,
+    green: COLOR_LIGHT.green4,
+    grass: COLOR_LIGHT.grass4,
+    mint: COLOR_LIGHT.mint4,
+    lime: COLOR_LIGHT.lime4,
+    bronze: COLOR_LIGHT.bronze4,
+    gold: COLOR_LIGHT.gold4,
+    brown: COLOR_LIGHT.brown4,
+    orange: COLOR_LIGHT.orange4,
+    amber: COLOR_LIGHT.amber4,
+    yellow: COLOR_LIGHT.yellow4,
   },
 };
diff --git a/packages/twenty-ui/src/theme/constants/ThemeCommon.ts b/packages/twenty-ui/src/theme/constants/ThemeCommon.ts
index 166c7a9f02d..3091da7e416 100644
--- a/packages/twenty-ui/src/theme/constants/ThemeCommon.ts
+++ b/packages/twenty-ui/src/theme/constants/ThemeCommon.ts
@@ -1,13 +1,9 @@
 import { ANIMATION } from './Animation';
-import { COLOR } from './Colors';
-import { GRAY_SCALE } from './GrayScale';
 import { ICON } from './Icon';
 import { MODAL } from './Modal';
 import { TEXT } from './Text';
 
 export const THEME_COMMON = {
-  color: COLOR,
-  grayScale: GRAY_SCALE,
   icon: ICON,
   modal: MODAL,
   text: TEXT,
diff --git a/packages/twenty-ui/src/theme/constants/ThemeDark.ts b/packages/twenty-ui/src/theme/constants/ThemeDark.ts
index 5d883f8531e..93f4380634a 100644
--- a/packages/twenty-ui/src/theme/constants/ThemeDark.ts
+++ b/packages/twenty-ui/src/theme/constants/ThemeDark.ts
@@ -1,7 +1,11 @@
-import { ADAPTIVE_COLORS_DARK } from '@ui/theme/constants/AdaptiveColorsDark';
 import { BLUR_DARK } from '@ui/theme/constants/BlurDark';
 import { ILLUSTRATION_ICON_DARK } from '@ui/theme/constants/IllustrationIconDark';
-import { SNACK_BAR_DARK, type ThemeType } from '..';
+import {
+  COLOR_DARK,
+  GRAY_SCALE_DARK,
+  SNACK_BAR_DARK,
+  type ThemeType,
+} from '..';
 import { ACCENT_DARK } from './AccentDark';
 import { BACKGROUND_DARK } from './BackgroundDark';
 import { BORDER_DARK } from './BorderDark';
@@ -25,6 +29,7 @@ export const THEME_DARK: ThemeType = {
     tag: TAG_DARK,
     code: CODE_DARK,
     IllustrationIcon: ILLUSTRATION_ICON_DARK,
-    adaptiveColors: ADAPTIVE_COLORS_DARK,
+    grayScale: GRAY_SCALE_DARK,
+    color: COLOR_DARK,
   },
 };
diff --git a/packages/twenty-ui/src/theme/constants/ThemeLight.ts b/packages/twenty-ui/src/theme/constants/ThemeLight.ts
index 51c361413b7..930d0fbd30e 100644
--- a/packages/twenty-ui/src/theme/constants/ThemeLight.ts
+++ b/packages/twenty-ui/src/theme/constants/ThemeLight.ts
@@ -1,5 +1,6 @@
-import { ADAPTIVE_COLORS_LIGHT } from '@ui/theme/constants/AdaptiveColorsLight';
 import { BLUR_LIGHT } from '@ui/theme/constants/BlurLight';
+import { COLOR_LIGHT } from '@ui/theme/constants/ColorsLight';
+import { GRAY_SCALE_LIGHT } from '@ui/theme/constants/GrayScaleLight';
 import { ILLUSTRATION_ICON_LIGHT } from '@ui/theme/constants/IllustrationIconLight';
 import { SNACK_BAR_LIGHT } from '@ui/theme/constants/SnackBarLight';
 import { ACCENT_LIGHT } from './AccentLight';
@@ -25,6 +26,7 @@ export const THEME_LIGHT = {
     tag: TAG_LIGHT,
     code: CODE_LIGHT,
     IllustrationIcon: ILLUSTRATION_ICON_LIGHT,
-    adaptiveColors: ADAPTIVE_COLORS_LIGHT,
+    grayScale: GRAY_SCALE_LIGHT,
+    color: COLOR_LIGHT,
   },
 };
diff --git a/packages/twenty-ui/src/theme/constants/TransparentColorsDark.ts b/packages/twenty-ui/src/theme/constants/TransparentColorsDark.ts
new file mode 100644
index 00000000000..e1dc3985f1d
--- /dev/null
+++ b/packages/twenty-ui/src/theme/constants/TransparentColorsDark.ts
@@ -0,0 +1,394 @@
+import * as RadixColors from '@radix-ui/colors';
+import { GRAY_SCALE_DARK_ALPHA } from '@ui/theme/constants/GrayScaleDarkAlpha';
+
+export const TRANSPARENT_COLORS_DARK = {
+  green1: RadixColors.greenDarkA.greenA1,
+  green2: RadixColors.greenDarkA.greenA2,
+  green3: RadixColors.greenDarkA.greenA3,
+  green4: RadixColors.greenDarkA.greenA4,
+  green5: RadixColors.greenDarkA.greenA5,
+  green6: RadixColors.greenDarkA.greenA6,
+  green7: RadixColors.greenDarkA.greenA7,
+  green8: RadixColors.greenDarkA.greenA8,
+  green9: RadixColors.greenDarkA.greenA9,
+  green10: RadixColors.greenDarkA.greenA10,
+  green11: RadixColors.greenDarkA.greenA11,
+  green12: RadixColors.greenDarkA.greenA12,
+
+  turquoise1: RadixColors.tealDarkA.tealA1,
+  turquoise2: RadixColors.tealDarkA.tealA2,
+  turquoise3: RadixColors.tealDarkA.tealA3,
+  turquoise4: RadixColors.tealDarkA.tealA4,
+  turquoise5: RadixColors.tealDarkA.tealA5,
+  turquoise6: RadixColors.tealDarkA.tealA6,
+  turquoise7: RadixColors.tealDarkA.tealA7,
+  turquoise8: RadixColors.tealDarkA.tealA8,
+  turquoise9: RadixColors.tealDarkA.tealA9,
+  turquoise10: RadixColors.tealDarkA.tealA10,
+  turquoise11: RadixColors.tealDarkA.tealA11,
+  turquoise12: RadixColors.tealDarkA.tealA12,
+
+  sky1: RadixColors.skyDarkA.skyA1,
+  sky2: RadixColors.skyDarkA.skyA2,
+  sky3: RadixColors.skyDarkA.skyA3,
+  sky4: RadixColors.skyDarkA.skyA4,
+  sky5: RadixColors.skyDarkA.skyA5,
+  sky6: RadixColors.skyDarkA.skyA6,
+  sky7: RadixColors.skyDarkA.skyA7,
+  sky8: RadixColors.skyDarkA.skyA8,
+  sky9: RadixColors.skyDarkA.skyA9,
+  sky10: RadixColors.skyDarkA.skyA10,
+  sky11: RadixColors.skyDarkA.skyA11,
+  sky12: RadixColors.skyDarkA.skyA12,
+
+  blue1: RadixColors.indigoDarkA.indigoA1,
+  blue2: RadixColors.indigoDarkA.indigoA2,
+  blue3: RadixColors.indigoDarkA.indigoA3,
+  blue4: RadixColors.indigoDarkA.indigoA4,
+  blue5: RadixColors.indigoDarkA.indigoA5,
+  blue6: RadixColors.indigoDarkA.indigoA6,
+  blue7: RadixColors.indigoDarkA.indigoA7,
+  blue8: RadixColors.indigoDarkA.indigoA8,
+  blue9: RadixColors.indigoDarkA.indigoA9,
+  blue10: RadixColors.indigoDarkA.indigoA10,
+  blue11: RadixColors.indigoDarkA.indigoA11,
+  blue12: RadixColors.indigoDarkA.indigoA12,
+
+  purple1: RadixColors.violetDarkA.violetA1,
+  purple2: RadixColors.violetDarkA.violetA2,
+  purple3: RadixColors.violetDarkA.violetA3,
+  purple4: RadixColors.violetDarkA.violetA4,
+  purple5: RadixColors.violetDarkA.violetA5,
+  purple6: RadixColors.violetDarkA.violetA6,
+  purple7: RadixColors.violetDarkA.violetA7,
+  purple8: RadixColors.violetDarkA.violetA8,
+  purple9: RadixColors.violetDarkA.violetA9,
+  purple10: RadixColors.violetDarkA.violetA10,
+  purple11: RadixColors.violetDarkA.violetA11,
+  purple12: RadixColors.violetDarkA.violetA12,
+
+  pink1: RadixColors.pinkDarkA.pinkA1,
+  pink2: RadixColors.pinkDarkA.pinkA2,
+  pink3: RadixColors.pinkDarkA.pinkA3,
+  pink4: RadixColors.pinkDarkA.pinkA4,
+  pink5: RadixColors.pinkDarkA.pinkA5,
+  pink6: RadixColors.pinkDarkA.pinkA6,
+  pink7: RadixColors.pinkDarkA.pinkA7,
+  pink8: RadixColors.pinkDarkA.pinkA8,
+  pink9: RadixColors.pinkDarkA.pinkA9,
+  pink10: RadixColors.pinkDarkA.pinkA10,
+  pink11: RadixColors.pinkDarkA.pinkA11,
+  pink12: RadixColors.pinkDarkA.pinkA12,
+
+  red1: RadixColors.redDarkA.redA1,
+  red2: RadixColors.redDarkA.redA2,
+  red3: RadixColors.redDarkA.redA3,
+  red4: RadixColors.redDarkA.redA4,
+  red5: RadixColors.redDarkA.redA5,
+  red6: RadixColors.redDarkA.redA6,
+  red7: RadixColors.redDarkA.redA7,
+  red8: RadixColors.redDarkA.redA8,
+  red9: RadixColors.redDarkA.redA9,
+  red10: RadixColors.redDarkA.redA10,
+  red11: RadixColors.redDarkA.redA11,
+  red12: RadixColors.redDarkA.redA12,
+
+  orange1: RadixColors.orangeDarkA.orangeA1,
+  orange2: RadixColors.orangeDarkA.orangeA2,
+  orange3: RadixColors.orangeDarkA.orangeA3,
+  orange4: RadixColors.orangeDarkA.orangeA4,
+  orange5: RadixColors.orangeDarkA.orangeA5,
+  orange6: RadixColors.orangeDarkA.orangeA6,
+  orange7: RadixColors.orangeDarkA.orangeA7,
+  orange8: RadixColors.orangeDarkA.orangeA8,
+  orange9: RadixColors.orangeDarkA.orangeA9,
+  orange10: RadixColors.orangeDarkA.orangeA10,
+  orange11: RadixColors.orangeDarkA.orangeA11,
+  orange12: RadixColors.orangeDarkA.orangeA12,
+
+  yellow1: RadixColors.yellowDarkA.yellowA1,
+  yellow2: RadixColors.yellowDarkA.yellowA2,
+  yellow3: RadixColors.yellowDarkA.yellowA3,
+  yellow4: RadixColors.yellowDarkA.yellowA4,
+  yellow5: RadixColors.yellowDarkA.yellowA5,
+  yellow6: RadixColors.yellowDarkA.yellowA6,
+  yellow7: RadixColors.yellowDarkA.yellowA7,
+  yellow8: RadixColors.yellowDarkA.yellowA8,
+  yellow9: RadixColors.yellowDarkA.yellowA9,
+  yellow10: RadixColors.yellowDarkA.yellowA10,
+  yellow11: RadixColors.yellowDarkA.yellowA11,
+  yellow12: RadixColors.yellowDarkA.yellowA12,
+
+  gray1: GRAY_SCALE_DARK_ALPHA.gray1,
+  gray2: GRAY_SCALE_DARK_ALPHA.gray2,
+  gray3: GRAY_SCALE_DARK_ALPHA.gray3,
+  gray4: GRAY_SCALE_DARK_ALPHA.gray4,
+  gray5: GRAY_SCALE_DARK_ALPHA.gray5,
+  gray6: GRAY_SCALE_DARK_ALPHA.gray6,
+  gray7: GRAY_SCALE_DARK_ALPHA.gray7,
+  gray8: GRAY_SCALE_DARK_ALPHA.gray8,
+  gray9: GRAY_SCALE_DARK_ALPHA.gray9,
+  gray10: GRAY_SCALE_DARK_ALPHA.gray10,
+  gray11: GRAY_SCALE_DARK_ALPHA.gray11,
+  gray12: GRAY_SCALE_DARK_ALPHA.gray12,
+
+  mauve1: RadixColors.mauveDarkA.mauveA1,
+  mauve2: RadixColors.mauveDarkA.mauveA2,
+  mauve3: RadixColors.mauveDarkA.mauveA3,
+  mauve4: RadixColors.mauveDarkA.mauveA4,
+  mauve5: RadixColors.mauveDarkA.mauveA5,
+  mauve6: RadixColors.mauveDarkA.mauveA6,
+  mauve7: RadixColors.mauveDarkA.mauveA7,
+  mauve8: RadixColors.mauveDarkA.mauveA8,
+  mauve9: RadixColors.mauveDarkA.mauveA9,
+  mauve10: RadixColors.mauveDarkA.mauveA10,
+  mauve11: RadixColors.mauveDarkA.mauveA11,
+  mauve12: RadixColors.mauveDarkA.mauveA12,
+
+  slate1: RadixColors.slateDarkA.slateA1,
+  slate2: RadixColors.slateDarkA.slateA2,
+  slate3: RadixColors.slateDarkA.slateA3,
+  slate4: RadixColors.slateDarkA.slateA4,
+  slate5: RadixColors.slateDarkA.slateA5,
+  slate6: RadixColors.slateDarkA.slateA6,
+  slate7: RadixColors.slateDarkA.slateA7,
+  slate8: RadixColors.slateDarkA.slateA8,
+  slate9: RadixColors.slateDarkA.slateA9,
+  slate10: RadixColors.slateDarkA.slateA10,
+  slate11: RadixColors.slateDarkA.slateA11,
+  slate12: RadixColors.slateDarkA.slateA12,
+
+  sage1: RadixColors.sageDarkA.sageA1,
+  sage2: RadixColors.sageDarkA.sageA2,
+  sage3: RadixColors.sageDarkA.sageA3,
+  sage4: RadixColors.sageDarkA.sageA4,
+  sage5: RadixColors.sageDarkA.sageA5,
+  sage6: RadixColors.sageDarkA.sageA6,
+  sage7: RadixColors.sageDarkA.sageA7,
+  sage8: RadixColors.sageDarkA.sageA8,
+  sage9: RadixColors.sageDarkA.sageA9,
+  sage10: RadixColors.sageDarkA.sageA10,
+  sage11: RadixColors.sageDarkA.sageA11,
+  sage12: RadixColors.sageDarkA.sageA12,
+
+  olive1: RadixColors.oliveDarkA.oliveA1,
+  olive2: RadixColors.oliveDarkA.oliveA2,
+  olive3: RadixColors.oliveDarkA.oliveA3,
+  olive4: RadixColors.oliveDarkA.oliveA4,
+  olive5: RadixColors.oliveDarkA.oliveA5,
+  olive6: RadixColors.oliveDarkA.oliveA6,
+  olive7: RadixColors.oliveDarkA.oliveA7,
+  olive8: RadixColors.oliveDarkA.oliveA8,
+  olive9: RadixColors.oliveDarkA.oliveA9,
+  olive10: RadixColors.oliveDarkA.oliveA10,
+  olive11: RadixColors.oliveDarkA.oliveA11,
+  olive12: RadixColors.oliveDarkA.oliveA12,
+
+  sand1: RadixColors.sandDarkA.sandA1,
+  sand2: RadixColors.sandDarkA.sandA2,
+  sand3: RadixColors.sandDarkA.sandA3,
+  sand4: RadixColors.sandDarkA.sandA4,
+  sand5: RadixColors.sandDarkA.sandA5,
+  sand6: RadixColors.sandDarkA.sandA6,
+  sand7: RadixColors.sandDarkA.sandA7,
+  sand8: RadixColors.sandDarkA.sandA8,
+  sand9: RadixColors.sandDarkA.sandA9,
+  sand10: RadixColors.sandDarkA.sandA10,
+  sand11: RadixColors.sandDarkA.sandA11,
+  sand12: RadixColors.sandDarkA.sandA12,
+
+  tomato1: RadixColors.tomatoDarkA.tomatoA1,
+  tomato2: RadixColors.tomatoDarkA.tomatoA2,
+  tomato3: RadixColors.tomatoDarkA.tomatoA3,
+  tomato4: RadixColors.tomatoDarkA.tomatoA4,
+  tomato5: RadixColors.tomatoDarkA.tomatoA5,
+  tomato6: RadixColors.tomatoDarkA.tomatoA6,
+  tomato7: RadixColors.tomatoDarkA.tomatoA7,
+  tomato8: RadixColors.tomatoDarkA.tomatoA8,
+  tomato9: RadixColors.tomatoDarkA.tomatoA9,
+  tomato10: RadixColors.tomatoDarkA.tomatoA10,
+  tomato11: RadixColors.tomatoDarkA.tomatoA11,
+  tomato12: RadixColors.tomatoDarkA.tomatoA12,
+
+  ruby1: RadixColors.rubyDarkA.rubyA1,
+  ruby2: RadixColors.rubyDarkA.rubyA2,
+  ruby3: RadixColors.rubyDarkA.rubyA3,
+  ruby4: RadixColors.rubyDarkA.rubyA4,
+  ruby5: RadixColors.rubyDarkA.rubyA5,
+  ruby6: RadixColors.rubyDarkA.rubyA6,
+  ruby7: RadixColors.rubyDarkA.rubyA7,
+  ruby8: RadixColors.rubyDarkA.rubyA8,
+  ruby9: RadixColors.rubyDarkA.rubyA9,
+  ruby10: RadixColors.rubyDarkA.rubyA10,
+  ruby11: RadixColors.rubyDarkA.rubyA11,
+  ruby12: RadixColors.rubyDarkA.rubyA12,
+
+  crimson1: RadixColors.crimsonDarkA.crimsonA1,
+  crimson2: RadixColors.crimsonDarkA.crimsonA2,
+  crimson3: RadixColors.crimsonDarkA.crimsonA3,
+  crimson4: RadixColors.crimsonDarkA.crimsonA4,
+  crimson5: RadixColors.crimsonDarkA.crimsonA5,
+  crimson6: RadixColors.crimsonDarkA.crimsonA6,
+  crimson7: RadixColors.crimsonDarkA.crimsonA7,
+  crimson8: RadixColors.crimsonDarkA.crimsonA8,
+  crimson9: RadixColors.crimsonDarkA.crimsonA9,
+  crimson10: RadixColors.crimsonDarkA.crimsonA10,
+  crimson11: RadixColors.crimsonDarkA.crimsonA11,
+  crimson12: RadixColors.crimsonDarkA.crimsonA12,
+
+  plum1: RadixColors.plumDarkA.plumA1,
+  plum2: RadixColors.plumDarkA.plumA2,
+  plum3: RadixColors.plumDarkA.plumA3,
+  plum4: RadixColors.plumDarkA.plumA4,
+  plum5: RadixColors.plumDarkA.plumA5,
+  plum6: RadixColors.plumDarkA.plumA6,
+  plum7: RadixColors.plumDarkA.plumA7,
+  plum8: RadixColors.plumDarkA.plumA8,
+  plum9: RadixColors.plumDarkA.plumA9,
+  plum10: RadixColors.plumDarkA.plumA10,
+  plum11: RadixColors.plumDarkA.plumA11,
+  plum12: RadixColors.plumDarkA.plumA12,
+
+  violet1: RadixColors.violetDarkA.violetA1,
+  violet2: RadixColors.violetDarkA.violetA2,
+  violet3: RadixColors.violetDarkA.violetA3,
+  violet4: RadixColors.violetDarkA.violetA4,
+  violet5: RadixColors.violetDarkA.violetA5,
+  violet6: RadixColors.violetDarkA.violetA6,
+  violet7: RadixColors.violetDarkA.violetA7,
+  violet8: RadixColors.violetDarkA.violetA8,
+  violet9: RadixColors.violetDarkA.violetA9,
+  violet10: RadixColors.violetDarkA.violetA10,
+  violet11: RadixColors.violetDarkA.violetA11,
+  violet12: RadixColors.violetDarkA.violetA12,
+
+  iris1: RadixColors.irisDarkA.irisA1,
+  iris2: RadixColors.irisDarkA.irisA2,
+  iris3: RadixColors.irisDarkA.irisA3,
+  iris4: RadixColors.irisDarkA.irisA4,
+  iris5: RadixColors.irisDarkA.irisA5,
+  iris6: RadixColors.irisDarkA.irisA6,
+  iris7: RadixColors.irisDarkA.irisA7,
+  iris8: RadixColors.irisDarkA.irisA8,
+  iris9: RadixColors.irisDarkA.irisA9,
+  iris10: RadixColors.irisDarkA.irisA10,
+  iris11: RadixColors.irisDarkA.irisA11,
+  iris12: RadixColors.irisDarkA.irisA12,
+
+  cyan1: RadixColors.cyanDarkA.cyanA1,
+  cyan2: RadixColors.cyanDarkA.cyanA2,
+  cyan3: RadixColors.cyanDarkA.cyanA3,
+  cyan4: RadixColors.cyanDarkA.cyanA4,
+  cyan5: RadixColors.cyanDarkA.cyanA5,
+  cyan6: RadixColors.cyanDarkA.cyanA6,
+  cyan7: RadixColors.cyanDarkA.cyanA7,
+  cyan8: RadixColors.cyanDarkA.cyanA8,
+  cyan9: RadixColors.cyanDarkA.cyanA9,
+  cyan10: RadixColors.cyanDarkA.cyanA10,
+  cyan11: RadixColors.cyanDarkA.cyanA11,
+  cyan12: RadixColors.cyanDarkA.cyanA12,
+
+  jade1: RadixColors.jadeDarkA.jadeA1,
+  jade2: RadixColors.jadeDarkA.jadeA2,
+  jade3: RadixColors.jadeDarkA.jadeA3,
+  jade4: RadixColors.jadeDarkA.jadeA4,
+  jade5: RadixColors.jadeDarkA.jadeA5,
+  jade6: RadixColors.jadeDarkA.jadeA6,
+  jade7: RadixColors.jadeDarkA.jadeA7,
+  jade8: RadixColors.jadeDarkA.jadeA8,
+  jade9: RadixColors.jadeDarkA.jadeA9,
+  jade10: RadixColors.jadeDarkA.jadeA10,
+  jade11: RadixColors.jadeDarkA.jadeA11,
+  jade12: RadixColors.jadeDarkA.jadeA12,
+
+  grass1: RadixColors.grassDarkA.grassA1,
+  grass2: RadixColors.grassDarkA.grassA2,
+  grass3: RadixColors.grassDarkA.grassA3,
+  grass4: RadixColors.grassDarkA.grassA4,
+  grass5: RadixColors.grassDarkA.grassA5,
+  grass6: RadixColors.grassDarkA.grassA6,
+  grass7: RadixColors.grassDarkA.grassA7,
+  grass8: RadixColors.grassDarkA.grassA8,
+  grass9: RadixColors.grassDarkA.grassA9,
+  grass10: RadixColors.grassDarkA.grassA10,
+  grass11: RadixColors.grassDarkA.grassA11,
+  grass12: RadixColors.grassDarkA.grassA12,
+
+  mint1: RadixColors.mintDarkA.mintA1,
+  mint2: RadixColors.mintDarkA.mintA2,
+  mint3: RadixColors.mintDarkA.mintA3,
+  mint4: RadixColors.mintDarkA.mintA4,
+  mint5: RadixColors.mintDarkA.mintA5,
+  mint6: RadixColors.mintDarkA.mintA6,
+  mint7: RadixColors.mintDarkA.mintA7,
+  mint8: RadixColors.mintDarkA.mintA8,
+  mint9: RadixColors.mintDarkA.mintA9,
+  mint10: RadixColors.mintDarkA.mintA10,
+  mint11: RadixColors.mintDarkA.mintA11,
+  mint12: RadixColors.mintDarkA.mintA12,
+
+  lime1: RadixColors.limeDarkA.limeA1,
+  lime2: RadixColors.limeDarkA.limeA2,
+  lime3: RadixColors.limeDarkA.limeA3,
+  lime4: RadixColors.limeDarkA.limeA4,
+  lime5: RadixColors.limeDarkA.limeA5,
+  lime6: RadixColors.limeDarkA.limeA6,
+  lime7: RadixColors.limeDarkA.limeA7,
+  lime8: RadixColors.limeDarkA.limeA8,
+  lime9: RadixColors.limeDarkA.limeA9,
+  lime10: RadixColors.limeDarkA.limeA10,
+  lime11: RadixColors.limeDarkA.limeA11,
+  lime12: RadixColors.limeDarkA.limeA12,
+
+  bronze1: RadixColors.bronzeDarkA.bronzeA1,
+  bronze2: RadixColors.bronzeDarkA.bronzeA2,
+  bronze3: RadixColors.bronzeDarkA.bronzeA3,
+  bronze4: RadixColors.bronzeDarkA.bronzeA4,
+  bronze5: RadixColors.bronzeDarkA.bronzeA5,
+  bronze6: RadixColors.bronzeDarkA.bronzeA6,
+  bronze7: RadixColors.bronzeDarkA.bronzeA7,
+  bronze8: RadixColors.bronzeDarkA.bronzeA8,
+  bronze9: RadixColors.bronzeDarkA.bronzeA9,
+  bronze10: RadixColors.bronzeDarkA.bronzeA10,
+  bronze11: RadixColors.bronzeDarkA.bronzeA11,
+  bronze12: RadixColors.bronzeDarkA.bronzeA12,
+
+  gold1: RadixColors.goldDarkA.goldA1,
+  gold2: RadixColors.goldDarkA.goldA2,
+  gold3: RadixColors.goldDarkA.goldA3,
+  gold4: RadixColors.goldDarkA.goldA4,
+  gold5: RadixColors.goldDarkA.goldA5,
+  gold6: RadixColors.goldDarkA.goldA6,
+  gold7: RadixColors.goldDarkA.goldA7,
+  gold8: RadixColors.goldDarkA.goldA8,
+  gold9: RadixColors.goldDarkA.goldA9,
+  gold10: RadixColors.goldDarkA.goldA10,
+  gold11: RadixColors.goldDarkA.goldA11,
+  gold12: RadixColors.goldDarkA.goldA12,
+
+  brown1: RadixColors.brownDarkA.brownA1,
+  brown2: RadixColors.brownDarkA.brownA2,
+  brown3: RadixColors.brownDarkA.brownA3,
+  brown4: RadixColors.brownDarkA.brownA4,
+  brown5: RadixColors.brownDarkA.brownA5,
+  brown6: RadixColors.brownDarkA.brownA6,
+  brown7: RadixColors.brownDarkA.brownA7,
+  brown8: RadixColors.brownDarkA.brownA8,
+  brown9: RadixColors.brownDarkA.brownA9,
+  brown10: RadixColors.brownDarkA.brownA10,
+  brown11: RadixColors.brownDarkA.brownA11,
+  brown12: RadixColors.brownDarkA.brownA12,
+
+  amber1: RadixColors.amberDarkA.amberA1,
+  amber2: RadixColors.amberDarkA.amberA2,
+  amber3: RadixColors.amberDarkA.amberA3,
+  amber4: RadixColors.amberDarkA.amberA4,
+  amber5: RadixColors.amberDarkA.amberA5,
+  amber6: RadixColors.amberDarkA.amberA6,
+  amber7: RadixColors.amberDarkA.amberA7,
+  amber8: RadixColors.amberDarkA.amberA8,
+  amber9: RadixColors.amberDarkA.amberA9,
+  amber10: RadixColors.amberDarkA.amberA10,
+  amber11: RadixColors.amberDarkA.amberA11,
+  amber12: RadixColors.amberDarkA.amberA12,
+};
diff --git a/packages/twenty-ui/src/theme/constants/TransparentColorsLight.ts b/packages/twenty-ui/src/theme/constants/TransparentColorsLight.ts
new file mode 100644
index 00000000000..9137e615af5
--- /dev/null
+++ b/packages/twenty-ui/src/theme/constants/TransparentColorsLight.ts
@@ -0,0 +1,394 @@
+import * as RadixColors from '@radix-ui/colors';
+import { GRAY_SCALE_LIGHT_ALPHA } from '@ui/theme/constants/GrayScaleLightAlpha';
+
+export const TRANSPARENT_COLORS_LIGHT = {
+  green1: RadixColors.greenA.greenA1,
+  green2: RadixColors.greenA.greenA2,
+  green3: RadixColors.greenA.greenA3,
+  green4: RadixColors.greenA.greenA4,
+  green5: RadixColors.greenA.greenA5,
+  green6: RadixColors.greenA.greenA6,
+  green7: RadixColors.greenA.greenA7,
+  green8: RadixColors.greenA.greenA8,
+  green9: RadixColors.greenA.greenA9,
+  green10: RadixColors.greenA.greenA10,
+  green11: RadixColors.greenA.greenA11,
+  green12: RadixColors.greenA.greenA12,
+
+  turquoise1: RadixColors.tealA.tealA1,
+  turquoise2: RadixColors.tealA.tealA2,
+  turquoise3: RadixColors.tealA.tealA3,
+  turquoise4: RadixColors.tealA.tealA4,
+  turquoise5: RadixColors.tealA.tealA5,
+  turquoise6: RadixColors.tealA.tealA6,
+  turquoise7: RadixColors.tealA.tealA7,
+  turquoise8: RadixColors.tealA.tealA8,
+  turquoise9: RadixColors.tealA.tealA9,
+  turquoise10: RadixColors.tealA.tealA10,
+  turquoise11: RadixColors.tealA.tealA11,
+  turquoise12: RadixColors.tealA.tealA12,
+
+  sky1: RadixColors.skyA.skyA1,
+  sky2: RadixColors.skyA.skyA2,
+  sky3: RadixColors.skyA.skyA3,
+  sky4: RadixColors.skyA.skyA4,
+  sky5: RadixColors.skyA.skyA5,
+  sky6: RadixColors.skyA.skyA6,
+  sky7: RadixColors.skyA.skyA7,
+  sky8: RadixColors.skyA.skyA8,
+  sky9: RadixColors.skyA.skyA9,
+  sky10: RadixColors.skyA.skyA10,
+  sky11: RadixColors.skyA.skyA11,
+  sky12: RadixColors.skyA.skyA12,
+
+  blue1: RadixColors.indigoA.indigoA1,
+  blue2: RadixColors.indigoA.indigoA2,
+  blue3: RadixColors.indigoA.indigoA3,
+  blue4: RadixColors.indigoA.indigoA4,
+  blue5: RadixColors.indigoA.indigoA5,
+  blue6: RadixColors.indigoA.indigoA6,
+  blue7: RadixColors.indigoA.indigoA7,
+  blue8: RadixColors.indigoA.indigoA8,
+  blue9: RadixColors.indigoA.indigoA9,
+  blue10: RadixColors.indigoA.indigoA10,
+  blue11: RadixColors.indigoA.indigoA11,
+  blue12: RadixColors.indigoA.indigoA12,
+
+  purple1: RadixColors.violetA.violetA1,
+  purple2: RadixColors.violetA.violetA2,
+  purple3: RadixColors.violetA.violetA3,
+  purple4: RadixColors.violetA.violetA4,
+  purple5: RadixColors.violetA.violetA5,
+  purple6: RadixColors.violetA.violetA6,
+  purple7: RadixColors.violetA.violetA7,
+  purple8: RadixColors.violetA.violetA8,
+  purple9: RadixColors.violetA.violetA9,
+  purple10: RadixColors.violetA.violetA10,
+  purple11: RadixColors.violetA.violetA11,
+  purple12: RadixColors.violetA.violetA12,
+
+  pink1: RadixColors.pinkA.pinkA1,
+  pink2: RadixColors.pinkA.pinkA2,
+  pink3: RadixColors.pinkA.pinkA3,
+  pink4: RadixColors.pinkA.pinkA4,
+  pink5: RadixColors.pinkA.pinkA5,
+  pink6: RadixColors.pinkA.pinkA6,
+  pink7: RadixColors.pinkA.pinkA7,
+  pink8: RadixColors.pinkA.pinkA8,
+  pink9: RadixColors.pinkA.pinkA9,
+  pink10: RadixColors.pinkA.pinkA10,
+  pink11: RadixColors.pinkA.pinkA11,
+  pink12: RadixColors.pinkA.pinkA12,
+
+  red1: RadixColors.redA.redA1,
+  red2: RadixColors.redA.redA2,
+  red3: RadixColors.redA.redA3,
+  red4: RadixColors.redA.redA4,
+  red5: RadixColors.redA.redA5,
+  red6: RadixColors.redA.redA6,
+  red7: RadixColors.redA.redA7,
+  red8: RadixColors.redA.redA8,
+  red9: RadixColors.redA.redA9,
+  red10: RadixColors.redA.redA10,
+  red11: RadixColors.redA.redA11,
+  red12: RadixColors.redA.redA12,
+
+  orange1: RadixColors.orangeA.orangeA1,
+  orange2: RadixColors.orangeA.orangeA2,
+  orange3: RadixColors.orangeA.orangeA3,
+  orange4: RadixColors.orangeA.orangeA4,
+  orange5: RadixColors.orangeA.orangeA5,
+  orange6: RadixColors.orangeA.orangeA6,
+  orange7: RadixColors.orangeA.orangeA7,
+  orange8: RadixColors.orangeA.orangeA8,
+  orange9: RadixColors.orangeA.orangeA9,
+  orange10: RadixColors.orangeA.orangeA10,
+  orange11: RadixColors.orangeA.orangeA11,
+  orange12: RadixColors.orangeA.orangeA12,
+
+  yellow1: RadixColors.yellowA.yellowA1,
+  yellow2: RadixColors.yellowA.yellowA2,
+  yellow3: RadixColors.yellowA.yellowA3,
+  yellow4: RadixColors.yellowA.yellowA4,
+  yellow5: RadixColors.yellowA.yellowA5,
+  yellow6: RadixColors.yellowA.yellowA6,
+  yellow7: RadixColors.yellowA.yellowA7,
+  yellow8: RadixColors.yellowA.yellowA8,
+  yellow9: RadixColors.yellowA.yellowA9,
+  yellow10: RadixColors.yellowA.yellowA10,
+  yellow11: RadixColors.yellowA.yellowA11,
+  yellow12: RadixColors.yellowA.yellowA12,
+
+  gray1: GRAY_SCALE_LIGHT_ALPHA.gray1,
+  gray2: GRAY_SCALE_LIGHT_ALPHA.gray2,
+  gray3: GRAY_SCALE_LIGHT_ALPHA.gray3,
+  gray4: GRAY_SCALE_LIGHT_ALPHA.gray4,
+  gray5: GRAY_SCALE_LIGHT_ALPHA.gray5,
+  gray6: GRAY_SCALE_LIGHT_ALPHA.gray6,
+  gray7: GRAY_SCALE_LIGHT_ALPHA.gray7,
+  gray8: GRAY_SCALE_LIGHT_ALPHA.gray8,
+  gray9: GRAY_SCALE_LIGHT_ALPHA.gray9,
+  gray10: GRAY_SCALE_LIGHT_ALPHA.gray10,
+  gray11: GRAY_SCALE_LIGHT_ALPHA.gray11,
+  gray12: GRAY_SCALE_LIGHT_ALPHA.gray12,
+
+  mauve1: RadixColors.mauveA.mauveA1,
+  mauve2: RadixColors.mauveA.mauveA2,
+  mauve3: RadixColors.mauveA.mauveA3,
+  mauve4: RadixColors.mauveA.mauveA4,
+  mauve5: RadixColors.mauveA.mauveA5,
+  mauve6: RadixColors.mauveA.mauveA6,
+  mauve7: RadixColors.mauveA.mauveA7,
+  mauve8: RadixColors.mauveA.mauveA8,
+  mauve9: RadixColors.mauveA.mauveA9,
+  mauve10: RadixColors.mauveA.mauveA10,
+  mauve11: RadixColors.mauveA.mauveA11,
+  mauve12: RadixColors.mauveA.mauveA12,
+
+  slate1: RadixColors.slateA.slateA1,
+  slate2: RadixColors.slateA.slateA2,
+  slate3: RadixColors.slateA.slateA3,
+  slate4: RadixColors.slateA.slateA4,
+  slate5: RadixColors.slateA.slateA5,
+  slate6: RadixColors.slateA.slateA6,
+  slate7: RadixColors.slateA.slateA7,
+  slate8: RadixColors.slateA.slateA8,
+  slate9: RadixColors.slateA.slateA9,
+  slate10: RadixColors.slateA.slateA10,
+  slate11: RadixColors.slateA.slateA11,
+  slate12: RadixColors.slateA.slateA12,
+
+  sage1: RadixColors.sageA.sageA1,
+  sage2: RadixColors.sageA.sageA2,
+  sage3: RadixColors.sageA.sageA3,
+  sage4: RadixColors.sageA.sageA4,
+  sage5: RadixColors.sageA.sageA5,
+  sage6: RadixColors.sageA.sageA6,
+  sage7: RadixColors.sageA.sageA7,
+  sage8: RadixColors.sageA.sageA8,
+  sage9: RadixColors.sageA.sageA9,
+  sage10: RadixColors.sageA.sageA10,
+  sage11: RadixColors.sageA.sageA11,
+  sage12: RadixColors.sageA.sageA12,
+
+  olive1: RadixColors.oliveA.oliveA1,
+  olive2: RadixColors.oliveA.oliveA2,
+  olive3: RadixColors.oliveA.oliveA3,
+  olive4: RadixColors.oliveA.oliveA4,
+  olive5: RadixColors.oliveA.oliveA5,
+  olive6: RadixColors.oliveA.oliveA6,
+  olive7: RadixColors.oliveA.oliveA7,
+  olive8: RadixColors.oliveA.oliveA8,
+  olive9: RadixColors.oliveA.oliveA9,
+  olive10: RadixColors.oliveA.oliveA10,
+  olive11: RadixColors.oliveA.oliveA11,
+  olive12: RadixColors.oliveA.oliveA12,
+
+  sand1: RadixColors.sandA.sandA1,
+  sand2: RadixColors.sandA.sandA2,
+  sand3: RadixColors.sandA.sandA3,
+  sand4: RadixColors.sandA.sandA4,
+  sand5: RadixColors.sandA.sandA5,
+  sand6: RadixColors.sandA.sandA6,
+  sand7: RadixColors.sandA.sandA7,
+  sand8: RadixColors.sandA.sandA8,
+  sand9: RadixColors.sandA.sandA9,
+  sand10: RadixColors.sandA.sandA10,
+  sand11: RadixColors.sandA.sandA11,
+  sand12: RadixColors.sandA.sandA12,
+
+  tomato1: RadixColors.tomatoA.tomatoA1,
+  tomato2: RadixColors.tomatoA.tomatoA2,
+  tomato3: RadixColors.tomatoA.tomatoA3,
+  tomato4: RadixColors.tomatoA.tomatoA4,
+  tomato5: RadixColors.tomatoA.tomatoA5,
+  tomato6: RadixColors.tomatoA.tomatoA6,
+  tomato7: RadixColors.tomatoA.tomatoA7,
+  tomato8: RadixColors.tomatoA.tomatoA8,
+  tomato9: RadixColors.tomatoA.tomatoA9,
+  tomato10: RadixColors.tomatoA.tomatoA10,
+  tomato11: RadixColors.tomatoA.tomatoA11,
+  tomato12: RadixColors.tomatoA.tomatoA12,
+
+  ruby1: RadixColors.rubyA.rubyA1,
+  ruby2: RadixColors.rubyA.rubyA2,
+  ruby3: RadixColors.rubyA.rubyA3,
+  ruby4: RadixColors.rubyA.rubyA4,
+  ruby5: RadixColors.rubyA.rubyA5,
+  ruby6: RadixColors.rubyA.rubyA6,
+  ruby7: RadixColors.rubyA.rubyA7,
+  ruby8: RadixColors.rubyA.rubyA8,
+  ruby9: RadixColors.rubyA.rubyA9,
+  ruby10: RadixColors.rubyA.rubyA10,
+  ruby11: RadixColors.rubyA.rubyA11,
+  ruby12: RadixColors.rubyA.rubyA12,
+
+  crimson1: RadixColors.crimsonA.crimsonA1,
+  crimson2: RadixColors.crimsonA.crimsonA2,
+  crimson3: RadixColors.crimsonA.crimsonA3,
+  crimson4: RadixColors.crimsonA.crimsonA4,
+  crimson5: RadixColors.crimsonA.crimsonA5,
+  crimson6: RadixColors.crimsonA.crimsonA6,
+  crimson7: RadixColors.crimsonA.crimsonA7,
+  crimson8: RadixColors.crimsonA.crimsonA8,
+  crimson9: RadixColors.crimsonA.crimsonA9,
+  crimson10: RadixColors.crimsonA.crimsonA10,
+  crimson11: RadixColors.crimsonA.crimsonA11,
+  crimson12: RadixColors.crimsonA.crimsonA12,
+
+  plum1: RadixColors.plumA.plumA1,
+  plum2: RadixColors.plumA.plumA2,
+  plum3: RadixColors.plumA.plumA3,
+  plum4: RadixColors.plumA.plumA4,
+  plum5: RadixColors.plumA.plumA5,
+  plum6: RadixColors.plumA.plumA6,
+  plum7: RadixColors.plumA.plumA7,
+  plum8: RadixColors.plumA.plumA8,
+  plum9: RadixColors.plumA.plumA9,
+  plum10: RadixColors.plumA.plumA10,
+  plum11: RadixColors.plumA.plumA11,
+  plum12: RadixColors.plumA.plumA12,
+
+  violet1: RadixColors.violetA.violetA1,
+  violet2: RadixColors.violetA.violetA2,
+  violet3: RadixColors.violetA.violetA3,
+  violet4: RadixColors.violetA.violetA4,
+  violet5: RadixColors.violetA.violetA5,
+  violet6: RadixColors.violetA.violetA6,
+  violet7: RadixColors.violetA.violetA7,
+  violet8: RadixColors.violetA.violetA8,
+  violet9: RadixColors.violetA.violetA9,
+  violet10: RadixColors.violetA.violetA10,
+  violet11: RadixColors.violetA.violetA11,
+  violet12: RadixColors.violetA.violetA12,
+
+  iris1: RadixColors.irisA.irisA1,
+  iris2: RadixColors.irisA.irisA2,
+  iris3: RadixColors.irisA.irisA3,
+  iris4: RadixColors.irisA.irisA4,
+  iris5: RadixColors.irisA.irisA5,
+  iris6: RadixColors.irisA.irisA6,
+  iris7: RadixColors.irisA.irisA7,
+  iris8: RadixColors.irisA.irisA8,
+  iris9: RadixColors.irisA.irisA9,
+  iris10: RadixColors.irisA.irisA10,
+  iris11: RadixColors.irisA.irisA11,
+  iris12: RadixColors.irisA.irisA12,
+
+  cyan1: RadixColors.cyanA.cyanA1,
+  cyan2: RadixColors.cyanA.cyanA2,
+  cyan3: RadixColors.cyanA.cyanA3,
+  cyan4: RadixColors.cyanA.cyanA4,
+  cyan5: RadixColors.cyanA.cyanA5,
+  cyan6: RadixColors.cyanA.cyanA6,
+  cyan7: RadixColors.cyanA.cyanA7,
+  cyan8: RadixColors.cyanA.cyanA8,
+  cyan9: RadixColors.cyanA.cyanA9,
+  cyan10: RadixColors.cyanA.cyanA10,
+  cyan11: RadixColors.cyanA.cyanA11,
+  cyan12: RadixColors.cyanA.cyanA12,
+
+  jade1: RadixColors.jadeA.jadeA1,
+  jade2: RadixColors.jadeA.jadeA2,
+  jade3: RadixColors.jadeA.jadeA3,
+  jade4: RadixColors.jadeA.jadeA4,
+  jade5: RadixColors.jadeA.jadeA5,
+  jade6: RadixColors.jadeA.jadeA6,
+  jade7: RadixColors.jadeA.jadeA7,
+  jade8: RadixColors.jadeA.jadeA8,
+  jade9: RadixColors.jadeA.jadeA9,
+  jade10: RadixColors.jadeA.jadeA10,
+  jade11: RadixColors.jadeA.jadeA11,
+  jade12: RadixColors.jadeA.jadeA12,
+
+  grass1: RadixColors.grassA.grassA1,
+  grass2: RadixColors.grassA.grassA2,
+  grass3: RadixColors.grassA.grassA3,
+  grass4: RadixColors.grassA.grassA4,
+  grass5: RadixColors.grassA.grassA5,
+  grass6: RadixColors.grassA.grassA6,
+  grass7: RadixColors.grassA.grassA7,
+  grass8: RadixColors.grassA.grassA8,
+  grass9: RadixColors.grassA.grassA9,
+  grass10: RadixColors.grassA.grassA10,
+  grass11: RadixColors.grassA.grassA11,
+  grass12: RadixColors.grassA.grassA12,
+
+  mint1: RadixColors.mintA.mintA1,
+  mint2: RadixColors.mintA.mintA2,
+  mint3: RadixColors.mintA.mintA3,
+  mint4: RadixColors.mintA.mintA4,
+  mint5: RadixColors.mintA.mintA5,
+  mint6: RadixColors.mintA.mintA6,
+  mint7: RadixColors.mintA.mintA7,
+  mint8: RadixColors.mintA.mintA8,
+  mint9: RadixColors.mintA.mintA9,
+  mint10: RadixColors.mintA.mintA10,
+  mint11: RadixColors.mintA.mintA11,
+  mint12: RadixColors.mintA.mintA12,
+
+  lime1: RadixColors.limeA.limeA1,
+  lime2: RadixColors.limeA.limeA2,
+  lime3: RadixColors.limeA.limeA3,
+  lime4: RadixColors.limeA.limeA4,
+  lime5: RadixColors.limeA.limeA5,
+  lime6: RadixColors.limeA.limeA6,
+  lime7: RadixColors.limeA.limeA7,
+  lime8: RadixColors.limeA.limeA8,
+  lime9: RadixColors.limeA.limeA9,
+  lime10: RadixColors.limeA.limeA10,
+  lime11: RadixColors.limeA.limeA11,
+  lime12: RadixColors.limeA.limeA12,
+
+  bronze1: RadixColors.bronzeA.bronzeA1,
+  bronze2: RadixColors.bronzeA.bronzeA2,
+  bronze3: RadixColors.bronzeA.bronzeA3,
+  bronze4: RadixColors.bronzeA.bronzeA4,
+  bronze5: RadixColors.bronzeA.bronzeA5,
+  bronze6: RadixColors.bronzeA.bronzeA6,
+  bronze7: RadixColors.bronzeA.bronzeA7,
+  bronze8: RadixColors.bronzeA.bronzeA8,
+  bronze9: RadixColors.bronzeA.bronzeA9,
+  bronze10: RadixColors.bronzeA.bronzeA10,
+  bronze11: RadixColors.bronzeA.bronzeA11,
+  bronze12: RadixColors.bronzeA.bronzeA12,
+
+  gold1: RadixColors.goldA.goldA1,
+  gold2: RadixColors.goldA.goldA2,
+  gold3: RadixColors.goldA.goldA3,
+  gold4: RadixColors.goldA.goldA4,
+  gold5: RadixColors.goldA.goldA5,
+  gold6: RadixColors.goldA.goldA6,
+  gold7: RadixColors.goldA.goldA7,
+  gold8: RadixColors.goldA.goldA8,
+  gold9: RadixColors.goldA.goldA9,
+  gold10: RadixColors.goldA.goldA10,
+  gold11: RadixColors.goldA.goldA11,
+  gold12: RadixColors.goldA.goldA12,
+
+  brown1: RadixColors.brownA.brownA1,
+  brown2: RadixColors.brownA.brownA2,
+  brown3: RadixColors.brownA.brownA3,
+  brown4: RadixColors.brownA.brownA4,
+  brown5: RadixColors.brownA.brownA5,
+  brown6: RadixColors.brownA.brownA6,
+  brown7: RadixColors.brownA.brownA7,
+  brown8: RadixColors.brownA.brownA8,
+  brown9: RadixColors.brownA.brownA9,
+  brown10: RadixColors.brownA.brownA10,
+  brown11: RadixColors.brownA.brownA11,
+  brown12: RadixColors.brownA.brownA12,
+
+  amber1: RadixColors.amberA.amberA1,
+  amber2: RadixColors.amberA.amberA2,
+  amber3: RadixColors.amberA.amberA3,
+  amber4: RadixColors.amberA.amberA4,
+  amber5: RadixColors.amberA.amberA5,
+  amber6: RadixColors.amberA.amberA6,
+  amber7: RadixColors.amberA.amberA7,
+  amber8: RadixColors.amberA.amberA8,
+  amber9: RadixColors.amberA.amberA9,
+  amber10: RadixColors.amberA.amberA10,
+  amber11: RadixColors.amberA.amberA11,
+  amber12: RadixColors.amberA.amberA12,
+};
diff --git a/packages/twenty-ui/src/theme/index.ts b/packages/twenty-ui/src/theme/index.ts
index 56d2693e5b7..c015a5f343e 100644
--- a/packages/twenty-ui/src/theme/index.ts
+++ b/packages/twenty-ui/src/theme/index.ts
@@ -9,8 +9,6 @@
 
 export { ACCENT_DARK } from './constants/AccentDark';
 export { ACCENT_LIGHT } from './constants/AccentLight';
-export { ADAPTIVE_COLORS_DARK } from './constants/AdaptiveColorsDark';
-export { ADAPTIVE_COLORS_LIGHT } from './constants/AdaptiveColorsLight';
 export type { AnimationDuration } from './constants/Animation';
 export { ANIMATION } from './constants/Animation';
 export { BACKGROUND_DARK } from './constants/BackgroundDark';
@@ -24,23 +22,28 @@ export { BOX_SHADOW_DARK } from './constants/BoxShadowDark';
 export { BOX_SHADOW_LIGHT } from './constants/BoxShadowLight';
 export { CODE_DARK } from './constants/CodeDark';
 export { CODE_LIGHT } from './constants/CodeLight';
-export { COLOR } from './constants/Colors';
+export { COLOR_DARK } from './constants/ColorsDark';
+export { COLOR_LIGHT } from './constants/ColorsLight';
 export { FONT_COMMON } from './constants/FontCommon';
 export { FONT_DARK } from './constants/FontDark';
 export { FONT_LIGHT } from './constants/FontLight';
-export { GRAY_SCALE } from './constants/GrayScale';
+export { GRAY_SCALE_DARK } from './constants/GrayScaleDark';
+export { GRAY_SCALE_DARK_ALPHA } from './constants/GrayScaleDarkAlpha';
+export { GRAY_SCALE_LIGHT } from './constants/GrayScaleLight';
+export { GRAY_SCALE_LIGHT_ALPHA } from './constants/GrayScaleLightAlpha';
 export { HOVER_BACKGROUND } from './constants/HoverBackground';
 export { ICON } from './constants/Icon';
 export { ILLUSTRATION_ICON_DARK } from './constants/IllustrationIconDark';
 export { ILLUSTRATION_ICON_LIGHT } from './constants/IllustrationIconLight';
 export type { ThemeColor } from './constants/MainColorNames';
 export { MAIN_COLOR_NAMES } from './constants/MainColorNames';
-export { MAIN_COLORS } from './constants/MainColors';
+export { MAIN_COLORS_DARK } from './constants/MainColorsDark';
+export { MAIN_COLORS_LIGHT } from './constants/MainColorsLight';
 export { MOBILE_VIEWPORT } from './constants/MobileViewport';
 export { MODAL } from './constants/Modal';
 export { RGBA } from './constants/Rgba';
-export { SECONDARY_COLORS } from './constants/SecondaryColors';
-export { SNACK_BAR_COMMON } from './constants/SnackBarCommon';
+export { SECONDARY_COLORS_DARK } from './constants/SecondaryColorsDark';
+export { SECONDARY_COLORS_LIGHT } from './constants/SecondaryColorsLight';
 export { SNACK_BAR_DARK } from './constants/SnackBarDark';
 export { SNACK_BAR_LIGHT } from './constants/SnackBarLight';
 export { TAG_DARK } from './constants/TagDark';
@@ -50,6 +53,8 @@ export { TEXT_INPUT_STYLE } from './constants/TextInputStyle';
 export { THEME_COMMON } from './constants/ThemeCommon';
 export { THEME_DARK } from './constants/ThemeDark';
 export { THEME_LIGHT } from './constants/ThemeLight';
+export { TRANSPARENT_COLORS_DARK } from './constants/TransparentColorsDark';
+export { TRANSPARENT_COLORS_LIGHT } from './constants/TransparentColorsLight';
 export type { ThemeContextType } from './provider/ThemeContextProvider';
 export {
   ThemeContext,
diff --git a/packages/twenty-ui/src/utilities/color/utils/__tests__/stringToHslColor.test.ts b/packages/twenty-ui/src/utilities/color/utils/__tests__/stringToHslColor.test.ts
deleted file mode 100644
index 98afaad1e4b..00000000000
--- a/packages/twenty-ui/src/utilities/color/utils/__tests__/stringToHslColor.test.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { stringToHslColor } from '../stringToHslColor';
-
-describe('stringToHslColor', () => {
-  it('should return a color based on a string', () => {
-    expect(stringToHslColor('red', 70, 90)).toBe('hsl(105, 70%, 90%)');
-  });
-});
diff --git a/packages/twenty-ui/src/utilities/color/utils/__tests__/stringToThemeColorP3String.test.ts b/packages/twenty-ui/src/utilities/color/utils/__tests__/stringToThemeColorP3String.test.ts
new file mode 100644
index 00000000000..efddd316142
--- /dev/null
+++ b/packages/twenty-ui/src/utilities/color/utils/__tests__/stringToThemeColorP3String.test.ts
@@ -0,0 +1,32 @@
+import { THEME_LIGHT } from '@ui/theme';
+import { stringToThemeColor } from '@ui/utilities';
+import { stringToThemeColorP3String } from '@ui/utilities/color/utils/stringToThemeColorP3String';
+
+describe('stringToThemeColor', () => {
+  it('should return a theme color based on a string', () => {
+    const color = stringToThemeColor('test');
+    expect(typeof color).toBe('string');
+    expect(color).toMatch(
+      /^(gray|tomato|red|ruby|crimson|pink|plum|purple|violet|iris|cyan|turquoise|sky|blue|jade|green|grass|mint|lime|bronze|gold|brown|orange|amber|yellow)$/,
+    );
+  });
+
+  it('should return the same color for the same string', () => {
+    const color1 = stringToThemeColor('test');
+    const color2 = stringToThemeColor('test');
+    expect(color1).toBe(color2);
+  });
+});
+
+describe('stringToThemeColorP3String', () => {
+  it('should return a theme color based on a string', () => {
+    const color = stringToThemeColorP3String({
+      string: 'test',
+      theme: THEME_LIGHT,
+      variant: 9,
+    });
+
+    expect(typeof color).toBe('string');
+    expect(Object.values(THEME_LIGHT.color)).toContain(color);
+  });
+});
diff --git a/packages/twenty-ui/src/utilities/color/utils/stringToHslColor.ts b/packages/twenty-ui/src/utilities/color/utils/stringToHslColor.ts
deleted file mode 100644
index f03aeb00237..00000000000
--- a/packages/twenty-ui/src/utilities/color/utils/stringToHslColor.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-export const stringToHslColor = (
-  str: string,
-  saturation: number,
-  lightness: number,
-) => {
-  let hash = 0;
-  for (let i = 0; i < str.length; i++) {
-    hash = str.charCodeAt(i) + ((hash << 5) - hash);
-  }
-
-  const h = hash % 360;
-  return 'hsl(' + h + ', ' + saturation + '%, ' + lightness + '%)';
-};
diff --git a/packages/twenty-ui/src/utilities/color/utils/stringToThemeColorP3String.ts b/packages/twenty-ui/src/utilities/color/utils/stringToThemeColorP3String.ts
new file mode 100644
index 00000000000..ab83a86463e
--- /dev/null
+++ b/packages/twenty-ui/src/utilities/color/utils/stringToThemeColorP3String.ts
@@ -0,0 +1,31 @@
+import { MAIN_COLOR_NAMES, type ThemeColor, type ThemeType } from '@ui/theme';
+
+export const stringToThemeColor = (string: string): ThemeColor => {
+  let hash = 0;
+  for (let i = 0; i < string.length; i++) {
+    hash = string.charCodeAt(i) + ((hash << 5) - hash);
+  }
+
+  const colorIndex = Math.abs(hash) % MAIN_COLOR_NAMES.length;
+  return MAIN_COLOR_NAMES[colorIndex];
+};
+
+export const stringToThemeColorP3String = ({
+  string,
+  theme,
+  variant = 9,
+}: {
+  string: string;
+  theme: ThemeType;
+  variant: number;
+}): string => {
+  if (variant < 1 || variant > 12) {
+    throw new Error('Variant must be between 1 and 12');
+  }
+
+  const colorName = stringToThemeColor(string);
+  const colorNameWithVariant =
+    `${colorName}${variant}` as keyof typeof theme.color;
+
+  return theme.color[colorNameWithVariant] as string;
+};
diff --git a/packages/twenty-ui/src/utilities/index.ts b/packages/twenty-ui/src/utilities/index.ts
index 19f114593e3..83581fdc854 100644
--- a/packages/twenty-ui/src/utilities/index.ts
+++ b/packages/twenty-ui/src/utilities/index.ts
@@ -15,7 +15,10 @@ export { AnimatedFadeOut } from './animation/components/AnimatedFadeOut';
 export { AnimatedRotate } from './animation/components/AnimatedRotate';
 export { AnimatedTextWord } from './animation/components/AnimatedTextWord';
 export { AnimatedTranslation } from './animation/components/AnimatedTranslation';
-export { stringToHslColor } from './color/utils/stringToHslColor';
+export {
+  stringToThemeColor,
+  stringToThemeColorP3String,
+} from './color/utils/stringToThemeColorP3String';
 export { REACT_APP_SERVER_BASE_URL } from './config';
 export { getOsControlSymbol } from './device/getOsControlSymbol';
 export { getOsShortcutSeparator } from './device/getOsShortcutSeparator';
diff --git a/yarn.lock b/yarn.lock
index d6b32fdbfc1..435fd5a8972 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -14932,6 +14932,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@radix-ui/colors@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "@radix-ui/colors@npm:3.0.0"
+  checksum: 10c0/612c6bb4efe987f2d49aaca2f785687d08150da59a248328bc2b4e187ece4ef731c1dc5c6a9430fffcac4af9e65cf2f89ceb9806f8809940c9eb238b79d2cf2f
+  languageName: node
+  linkType: hard
+
 "@radix-ui/primitive@npm:1.1.0":
   version: 1.1.0
   resolution: "@radix-ui/primitive@npm:1.1.0"
@@ -53021,6 +53028,7 @@ __metadata:
     "@nx/vite": "npm:21.3.11"
     "@nx/web": "npm:21.3.11"
     "@playwright/test": "npm:^1.46.0"
+    "@radix-ui/colors": "npm:^3.0.0"
     "@sentry/profiling-node": "npm:^9.26.0"
     "@sentry/react": "npm:^9.26.0"
     "@sentry/types": "npm:^8"