diff --git a/examples/react-template/screens/Box.tsx b/examples/react-template/screens/Box.tsx
index 87fc7ce9..881eb1b6 100644
--- a/examples/react-template/screens/Box.tsx
+++ b/examples/react-template/screens/Box.tsx
@@ -212,7 +212,7 @@ export const BoxScreen = (): JSX.Element => {
           </ColumnsItem>
           <ColumnsItem size={6}>
             <Box leftBorder={TrilogyColor.WARNING} className='is-fullheight'>
-              <BoxContent background={"NEUTRAL_LIGHT"}>
+              <BoxContent background={"FADE_NEUTRAL"}>
                 <Title level={TitleLevels.FOUR}>Highlited box</Title>
                 <Text>
                   Eget tincidunt tincidunt id massa sollicitudin. Egestas felis
diff --git a/examples/react-template/screens/Pagination.tsx b/examples/react-template/screens/Pagination.tsx
index 3bb80669..cdc54e1d 100644
--- a/examples/react-template/screens/Pagination.tsx
+++ b/examples/react-template/screens/Pagination.tsx
@@ -13,6 +13,11 @@ export const PaginationScreen = (): JSX.Element => {
       <Section>
         <Title level={TitleLevels.THREE}>Pagination</Title>
         <Divider />
+        <Pagination
+          onClick={(e) => console.log("event", e)}
+          count={50}
+          href={(page) => `?page=${page}`}
+        />
       </Section>
       <Section>
         <Pagination
diff --git a/examples/react-template/screens/Progress.tsx b/examples/react-template/screens/Progress.tsx
index 1f9a5b6a..86fcbdee 100644
--- a/examples/react-template/screens/Progress.tsx
+++ b/examples/react-template/screens/Progress.tsx
@@ -4,7 +4,7 @@ import { StatusState, TypographyBold, Section, Title, TitleLevels, Divider, Prog
 export const ProgressScreen = (): JSX.Element => {
 
   return (
-    <Section backgroundSrc={'https://design.bouyguestelecom.fr/v1/card-sample.200bd9f7.png'}>
+    <Section>
       <Section>
         <Title level={TitleLevels.THREE}>Progress Bar</Title>
 
@@ -57,7 +57,7 @@ export const ProgressScreen = (): JSX.Element => {
 
         <Divider />
 
-        <ProgressRadial percent={30} secondPercent={30}>
+        <ProgressRadial percent={30} secondPercent={30} alert={AlertState.INFO} secondAlert={AlertState.WARNING}>
           <Title level={TitleLevels.THREE} marginless>60</Title>
           <Text level={TextLevels.ONE} marginless>/ 100 Go</Text>
         </ProgressRadial>
diff --git a/packages/react/components/box/Box.native.tsx b/packages/react/components/box/Box.native.tsx
index f0d181f6..1a655f79 100644
--- a/packages/react/components/box/Box.native.tsx
+++ b/packages/react/components/box/Box.native.tsx
@@ -75,7 +75,7 @@ const Box = ({
     skeleton: {
       width: "100%",
       minHeight: 50,
-      backgroundColor: getColorStyle(TrilogyColor.NEUTRAL_LIGHT, 0),
+      backgroundColor: getColorStyle(TrilogyColor.FADE_NEUTRAL),
       overflow: "hidden",
       borderRadius: boxRadius,
     },
diff --git a/packages/react/components/button/Button.stories.tsx b/packages/react/components/button/Button.stories.tsx
index cd4007a2..233cec05 100644
--- a/packages/react/components/button/Button.stories.tsx
+++ b/packages/react/components/button/Button.stories.tsx
@@ -16,7 +16,7 @@ const TemplateMultiple: ComponentStory<typeof Button> = (args) => (
   <ButtonList>
     <Button variant={ButtonVariant.PRIMARY} {...args} />
     <Button variant={ButtonVariant.SECONDARY} {...args} />
-    <Button variant={ButtonVariant.ACCENT} disabled {...args} />
+    <Button variant={ButtonVariant.CONVERSION} disabled {...args} />
     <Button variant={ButtonVariant.GHOST} loading {...args} />
   </ButtonList>
 );
@@ -41,7 +41,7 @@ Secondary.args = {
 export const Accent = Template.bind({});
 Accent.args = {
   children: "Button accent",
-  variant: ButtonVariant.ACCENT,
+  variant: ButtonVariant.CONVERSION,
 };
 
 export const Ghost = Template.bind({});
diff --git a/packages/react/components/card/Card.native.tsx b/packages/react/components/card/Card.native.tsx
index 6330c79e..2c206b99 100644
--- a/packages/react/components/card/Card.native.tsx
+++ b/packages/react/components/card/Card.native.tsx
@@ -81,7 +81,7 @@ const Card = ({
     skeleton: {
       width: "100%",
       minHeight: 50,
-      backgroundColor: getColorStyle(TrilogyColor.NEUTRAL_LIGHT),
+      backgroundColor: getColorStyle(TrilogyColor.FADE_NEUTRAL),
       overflow: "hidden",
       borderRadius: cardRadius,
     },
diff --git a/packages/react/components/chips/Chips.native.tsx b/packages/react/components/chips/Chips.native.tsx
index c22dc52e..17b07fed 100644
--- a/packages/react/components/chips/Chips.native.tsx
+++ b/packages/react/components/chips/Chips.native.tsx
@@ -34,7 +34,7 @@ const Chips = ({
   const styles = StyleSheet.create({
     chips: {
       backgroundColor:
-        (disabled && getColorStyle(TrilogyColor.NEUTRAL_LIGHT)) ||
+        (disabled && getColorStyle(TrilogyColor.FADE_NEUTRAL)) ||
         (activeItem && getColorStyle(TrilogyColor.MAIN)) ||
         getColorStyle(TrilogyColor.BACKGROUND),
       borderRadius: 30,
diff --git a/packages/react/components/hero/Hero.native.tsx b/packages/react/components/hero/Hero.native.tsx
index 4b1e86c0..2ae49dd4 100644
--- a/packages/react/components/hero/Hero.native.tsx
+++ b/packages/react/components/hero/Hero.native.tsx
@@ -111,7 +111,7 @@ const Hero = ({
             setOverlapHeight(height)
           }}
         >
-          <Box background={TrilogyColor.NEUTRAL_LIGHT}>
+          <Box background={TrilogyColor.FADE_NEUTRAL}>
             <View style={{ marginBottom: secondOverlapHeight / 2 }} />
             {overlap && typeof overlap !== "boolean" ? overlap[0] : null}
           </Box>
diff --git a/packages/react/components/icon/Icon.native.tsx b/packages/react/components/icon/Icon.native.tsx
index 04ff0328..8c564449 100644
--- a/packages/react/components/icon/Icon.native.tsx
+++ b/packages/react/components/icon/Icon.native.tsx
@@ -119,7 +119,7 @@ const Icon = ({
       width: circledWidth,
       height: circledWidth,
       borderRadius: iconSkeletonRadius,
-      backgroundColor: getColorStyle(TrilogyColor.NEUTRAL_LIGHT),
+      backgroundColor: getColorStyle(TrilogyColor.FADE_NEUTRAL),
       overflow: "hidden",
     },
   })
diff --git a/packages/react/components/input/gauge/hook/useGauge.tsx b/packages/react/components/input/gauge/hook/useGauge.tsx
index bd43140a..ad76c9bf 100644
--- a/packages/react/components/input/gauge/hook/useGauge.tsx
+++ b/packages/react/components/input/gauge/hook/useGauge.tsx
@@ -36,7 +36,7 @@ export const useGauge = ({ validationRules, inputValue }: IParams) => {
     if (calc <= 50 && calc > 0) return getColorStyle(TrilogyColor.ERROR)
     if (calc <= 99 && calc > 50) return getColorStyle(TrilogyColor.WARNING)
     if (calc === 100) return getColorStyle(TrilogyColor.SUCCESS)
-    return getColorStyle(TrilogyColor.NEUTRAL_LIGHT)
+    return getColorStyle(TrilogyColor.FADE_NEUTRAL)
   }, [points, nbAllVerifies])
 
   const LengthvalidationRulesText = useMemo(() => {
diff --git a/packages/react/components/list/item/ListItem.native.tsx b/packages/react/components/list/item/ListItem.native.tsx
index 40fa69ea..35869930 100644
--- a/packages/react/components/list/item/ListItem.native.tsx
+++ b/packages/react/components/list/item/ListItem.native.tsx
@@ -56,7 +56,7 @@ const ListItem = ({
       borderRadius: 30,
     },
     swipeInfo: {
-      backgroundColor: getColorStyle(TrilogyColor.NEUTRAL_LIGHT),
+      backgroundColor: getColorStyle(TrilogyColor.FADE_NEUTRAL),
       width: 2,
       height: 20,
       borderRadius: 6,
diff --git a/packages/react/components/progress/radial/ProgressRadial.native.tsx b/packages/react/components/progress/radial/ProgressRadial.native.tsx
index 7b2cc4dd..e08c39b4 100644
--- a/packages/react/components/progress/radial/ProgressRadial.native.tsx
+++ b/packages/react/components/progress/radial/ProgressRadial.native.tsx
@@ -66,13 +66,13 @@ const ProgressRadial = ({
       backgroundColor: color,
     },
     labelDisk: {
-      color: getColorStyle(TrilogyColor.BACKGROUND),
+      color: getColorStyle(TrilogyColor.FONT),
       textAlign: "center",
       fontSize: 20,
       fontWeight: "500",
     },
     descriptionDisk: {
-      color: getColorStyle(TrilogyColor.BACKGROUND),
+      color: getColorStyle(TrilogyColor.FONT),
       textAlign: "center",
       fontWeight: "400",
     },
diff --git a/packages/react/components/progress/radial/ProgressRadial.tsx b/packages/react/components/progress/radial/ProgressRadial.tsx
index f18a1fa2..84f5f7ff 100644
--- a/packages/react/components/progress/radial/ProgressRadial.tsx
+++ b/packages/react/components/progress/radial/ProgressRadial.tsx
@@ -6,6 +6,7 @@ import { hashClass } from '../../../helpers';
 import { useTrilogyContext } from '../../../context';
 import { Title, TitleLevels } from '../../title'
 import { Text, TextLevels } from '../../text'
+import {getColorStyle} from "@/objects/facets/Color";
 
 const ProgressRadial = ({
   children,
@@ -42,8 +43,7 @@ const ProgressRadial = ({
 
     let styleBackground;
     styleBackground = `radial-gradient(circle at center, white 58%, transparent 58.1%),`;
-    styleBackground += `conic-gradient(#0C7B91 0 ${firstProgressDegree}deg, #25465f ${secondProgressStartDegree}deg ${secondProgressStartDegree + secondProgressDegree}deg, gainsboro ${secondProgressStartDegree + secondProgressDegree}deg 360deg)`;
-
+    styleBackground += `conic-gradient(#0C7B91 0 ${firstProgressDegree}deg, #${getColorStyle('MAIN')} ${secondProgressStartDegree}deg ${secondProgressStartDegree + secondProgressDegree}deg, gainsboro ${secondProgressStartDegree + secondProgressDegree}deg 360deg)`;
     progressRadial.style.background = styleBackground;
   };
 
diff --git a/packages/react/components/range/Range.tsx b/packages/react/components/range/Range.tsx
index 09bda5df..23bd7d2c 100644
--- a/packages/react/components/range/Range.tsx
+++ b/packages/react/components/range/Range.tsx
@@ -53,13 +53,12 @@ const Range = ({
     if (refTrack.current) {
       const track = refTrack.current as HTMLElement
       track.style.background = `linear-gradient(to right, ${getColorStyle(
-        TrilogyColor.NEUTRAL_LIGHT,
-        1
+        TrilogyColor.FADE_NEUTRAL
       )} ${(cursorMin / max) * 100}% , ${getColorStyle(TrilogyColor.MAIN, 1)} ${
         (cursorMin / max) * 100
       }% , ${getColorStyle(TrilogyColor.MAIN, 1)} ${
         (cursorMax / max) * 100
-      }%, ${getColorStyle(TrilogyColor.NEUTRAL_LIGHT, 1)} ${
+      }%, ${getColorStyle(TrilogyColor.FADE_NEUTRAL)} ${
         (cursorMax / max) * 100
       }%) `
     }
diff --git a/packages/react/components/segment-control/SegmentControl.native.tsx b/packages/react/components/segment-control/SegmentControl.native.tsx
index 0c3acc55..e61c1696 100644
--- a/packages/react/components/segment-control/SegmentControl.native.tsx
+++ b/packages/react/components/segment-control/SegmentControl.native.tsx
@@ -54,7 +54,7 @@ const SegmentControl = ({
     segmentedControl: {
       flexDirection: "row",
       width: "100%",
-      backgroundColor: getColorStyle(TrilogyColor.NEUTRAL_DARK, 1),
+      backgroundColor: getColorStyle(TrilogyColor.NEUTRAL, 1),
       borderRadius: 4,
       padding: 4,
       paddingRight: -4,
diff --git a/packages/react/components/segment-control/item/SegmentControlItem.native.tsx b/packages/react/components/segment-control/item/SegmentControlItem.native.tsx
index 1230babe..8deb4d59 100644
--- a/packages/react/components/segment-control/item/SegmentControlItem.native.tsx
+++ b/packages/react/components/segment-control/item/SegmentControlItem.native.tsx
@@ -33,7 +33,7 @@ const SegmentControlItem = ({
         (activeItem && getColorStyle(TrilogyColor.MAIN)) ||
         (inverted && getColorStyle(TrilogyColor.BACKGROUND)) ||
         (disabled && getColorStyle(TrilogyColor.DISABLED, 1)) ||
-        getColorStyle(TrilogyColor.NEUTRAL_DARK, 1),
+        getColorStyle(TrilogyColor.NEUTRAL, 1),
     },
     text: {
       paddingHorizontal: 16,
diff --git a/packages/react/components/table/td/TableTd.native.tsx b/packages/react/components/table/td/TableTd.native.tsx
index 81148b25..2b830185 100644
--- a/packages/react/components/table/td/TableTd.native.tsx
+++ b/packages/react/components/table/td/TableTd.native.tsx
@@ -16,8 +16,8 @@ const TableTd = ({ children, ...others }: TableTdProps): JSX.Element => {
       padding: 10,
       borderBottomWidth: 0.2,
       borderRightWidth: 0.2,
-      borderBottomColor: getColorStyle(TrilogyColor.NEUTRAL_DARK, 1),
-      borderRightColor: getColorStyle(TrilogyColor.NEUTRAL_DARK, 1),
+      borderBottomColor: getColorStyle(TrilogyColor.NEUTRAL, 1),
+      borderRightColor: getColorStyle(TrilogyColor.NEUTRAL, 1),
     },
     text: {
       color: getColorStyle(TrilogyColor.MAIN),
diff --git a/packages/react/components/table/th/TableTh.native.tsx b/packages/react/components/table/th/TableTh.native.tsx
index 9d84bde6..769b16eb 100644
--- a/packages/react/components/table/th/TableTh.native.tsx
+++ b/packages/react/components/table/th/TableTh.native.tsx
@@ -15,9 +15,9 @@ const TableTh = ({ children, ...others }: TableThProps): JSX.Element => {
     tableTh: {
       flexDirection: "column",
       flex: 1,
-      backgroundColor: getColorStyle(TrilogyColor.NEUTRAL_DARK, 1),
+      backgroundColor: getColorStyle(TrilogyColor.NEUTRAL, 1),
       padding: 10,
-      borderRightColor: getColorStyle(TrilogyColor.NEUTRAL_DARK, 1),
+      borderRightColor: getColorStyle(TrilogyColor.NEUTRAL, 1),
       borderRightWidth: 0.2,
     },
     title: {
diff --git a/packages/react/components/table/tr/TableTr.native.tsx b/packages/react/components/table/tr/TableTr.native.tsx
index 67a09f75..7ebbffa0 100644
--- a/packages/react/components/table/tr/TableTr.native.tsx
+++ b/packages/react/components/table/tr/TableTr.native.tsx
@@ -27,7 +27,7 @@ const TableTr = ({
     },
     expendable: {
       width: "100%",
-      backgroundColor: getColorStyle(TrilogyColor.NEUTRAL_DARK, 1),
+      backgroundColor: getColorStyle(TrilogyColor.NEUTRAL, 1),
       padding: 10,
     },
   })
diff --git a/packages/react/components/tabs/item/TabsItem.native.tsx b/packages/react/components/tabs/item/TabsItem.native.tsx
index de3eecda..a3ecc44b 100644
--- a/packages/react/components/tabs/item/TabsItem.native.tsx
+++ b/packages/react/components/tabs/item/TabsItem.native.tsx
@@ -32,7 +32,7 @@ const TabsItem = ({
 
   const getIconColor = React.useMemo(() => {
     if (inverted) {
-      if (disabled) return TrilogyColor.NEUTRAL_LIGHT
+      if (disabled) return TrilogyColor.FADE_NEUTRAL
       return TrilogyColor.BACKGROUND
     }
     if (disabled) return TrilogyColor.DISABLED
diff --git a/packages/react/components/tag/Tag.native.tsx b/packages/react/components/tag/Tag.native.tsx
index edb344b4..31c1b6ec 100644
--- a/packages/react/components/tag/Tag.native.tsx
+++ b/packages/react/components/tag/Tag.native.tsx
@@ -51,7 +51,7 @@ const Tag = ({
       backgroundColor:
         (inverted && getColorStyle(TrilogyColor.BACKGROUND)) ||
         (variant && (backgroundColor as TrilogyColor)) ||
-        getColorStyle(TrilogyColor.NEUTRAL_DARK, 1),
+        getColorStyle(TrilogyColor.NEUTRAL, 1),
     },
     text: {
       alignSelf: "center",
diff --git a/packages/react/components/text/Text.native.tsx b/packages/react/components/text/Text.native.tsx
index 4525c80f..41e9ba34 100644
--- a/packages/react/components/text/Text.native.tsx
+++ b/packages/react/components/text/Text.native.tsx
@@ -80,7 +80,7 @@ const Text = ({
         (level && level == "THREE" && 5) ||
         3,
       borderWidth: 0.1,
-      borderColor: getColorStyle(TrilogyColor.NEUTRAL_LIGHT),
+      borderColor: getColorStyle(TrilogyColor.FADE_NEUTRAL),
       overflow: "hidden",
       height: textLevels(level as TextLevels | TextLevelValues),
     },
diff --git a/packages/react/components/textarea/Textarea.native.tsx b/packages/react/components/textarea/Textarea.native.tsx
index fb692e57..0f8f240c 100644
--- a/packages/react/components/textarea/Textarea.native.tsx
+++ b/packages/react/components/textarea/Textarea.native.tsx
@@ -136,7 +136,7 @@ const Textarea = (
       top: 2,
       left: iconName ? 40 : 8,
       fontSize: 12,
-      color: getColorStyle(TrilogyColor.NEUTRAL_DARK),
+      color: getColorStyle(TrilogyColor.NEUTRAL),
       backgroundColor: "transparent",
       padding: 8,
       paddingBottom: 4,
diff --git a/packages/react/components/timeline/marker/TimelineMarker.native.tsx b/packages/react/components/timeline/marker/TimelineMarker.native.tsx
index f6f1149d..1ab7c6c8 100644
--- a/packages/react/components/timeline/marker/TimelineMarker.native.tsx
+++ b/packages/react/components/timeline/marker/TimelineMarker.native.tsx
@@ -33,10 +33,10 @@ const TimelineMarker = ({
       marginRight: "auto",
       borderColor:
         (active && getColorStyle(TrilogyColor.MAIN)) ||
-        (undone && getColorStyle(TrilogyColor.NEUTRAL_LIGHT)) ||
-        (cancel && getColorStyle(TrilogyColor.NEUTRAL_DARK)) ||
+        (undone && getColorStyle(TrilogyColor.NEUTRAL, 1)) ||
+        (cancel && getColorStyle(TrilogyColor.NEUTRAL)) ||
         (done && getColorStyle(TrilogyColor.MAIN)) ||
-        getColorStyle(TrilogyColor.NEUTRAL_LIGHT),
+        getColorStyle(TrilogyColor.NEUTRAL, 1),
     },
     icon: {
       alignSelf: "center",
@@ -53,17 +53,17 @@ const TimelineMarker = ({
             !iconColor
               ? (active && TrilogyColor.BACKGROUND) ||
                 (undone && TrilogyColor.MAIN) ||
-                (cancel && TrilogyColor.BACKGROUND) ||
+                (cancel && TrilogyColor.FADE_NEUTRAL) ||
                 (done && TrilogyColor.BACKGROUND) ||
                 TrilogyColor.BACKGROUND
               : iconColor
           }
           backgroundColor={
             (active && TrilogyColor.MAIN) ||
-            (undone && TrilogyColor.NEUTRAL_LIGHT) ||
-            (cancel && TrilogyColor.NEUTRAL_DARK) ||
+            (undone && TrilogyColor.FADE_NEUTRAL) ||
+            (cancel && TrilogyColor.NEUTRAL) ||
             (done && TrilogyColor.MAIN) ||
-            TrilogyColor.NEUTRAL_LIGHT
+            TrilogyColor.FADE_NEUTRAL
           }
           size={IconSize.SMALL}
         />
diff --git a/packages/react/components/title/Title.native.tsx b/packages/react/components/title/Title.native.tsx
index 6b12ef85..557c0c0e 100644
--- a/packages/react/components/title/Title.native.tsx
+++ b/packages/react/components/title/Title.native.tsx
@@ -92,7 +92,7 @@ const Title = ({
       alignSelf: getAlignSelf(),
       borderRadius: 5,
       borderWidth: 0.1,
-      borderColor: getColorStyle(TrilogyColor.NEUTRAL_LIGHT, 0),
+      borderColor: getColorStyle(TrilogyColor.FADE_NEUTRAL),
       overflow: "hidden",
       height: titlesLevels(),
     },
diff --git a/packages/react/objects/Typography/TypographyColor.ts b/packages/react/objects/Typography/TypographyColor.ts
index 8d874930..dc8b8e97 100644
--- a/packages/react/objects/Typography/TypographyColor.ts
+++ b/packages/react/objects/Typography/TypographyColor.ts
@@ -11,7 +11,6 @@ export enum TypographyColor {
   TEXT_WARNING = "has-text-warning",
   TEXT_ERROR = "has-text-error",
   TEXT_NEUTRAL = "has-text-grey",
-  TEXT_NEUTRAL_DARK = "has-text-grey-dark",
   TEXT_WHITE = "has-text-white",
   TEXT_DISABLED = "has-text-disabled",
 }
@@ -55,10 +54,6 @@ export const setTypographyColor = (
       ? getColorStyle(TrilogyColor.ERROR, 0)
       : typo === TypographyColor.TEXT_ERROR &&
         getColorStyle(TrilogyColor.ERROR, 0)) ||
-    (Array.isArray(typo) && typo.includes(TypographyColor.TEXT_NEUTRAL_DARK)
-      ? getColorStyle(TrilogyColor.NEUTRAL_DARK, 0)
-      : typo === TypographyColor.TEXT_NEUTRAL_DARK &&
-        getColorStyle(TrilogyColor.NEUTRAL_DARK, 0)) ||
     (Array.isArray(typo) && typo.includes(TypographyColor.TEXT_NEUTRAL)
       ? getColorStyle(TrilogyColor.NEUTRAL, 0)
       : typo === TypographyColor.TEXT_NEUTRAL &&
diff --git a/packages/react/objects/atoms/Background.ts b/packages/react/objects/atoms/Background.ts
index 1f8333e4..14118830 100644
--- a/packages/react/objects/atoms/Background.ts
+++ b/packages/react/objects/atoms/Background.ts
@@ -20,6 +20,10 @@ export const getBackgroundClassName = (
   if (backgroundType && typeof backgroundType === 'object') {
     return `background-${getColorClassName(backgroundType.color)}${backgroundType.fade ? '-fade' : ''}`
   }
+  if( backgroundType.startsWith('FADE-') ) {
+    return `background-${getColorClassName( (backgroundType.replace('FADE-', '') as TrilogyColor))}-fade`
+  }
+
   return `background-${getColorClassName(backgroundType)}`
 }
 
diff --git a/packages/react/objects/atoms/Text.ts b/packages/react/objects/atoms/Text.ts
index 80add56e..0ab7f28c 100644
--- a/packages/react/objects/atoms/Text.ts
+++ b/packages/react/objects/atoms/Text.ts
@@ -30,9 +30,7 @@ export const getTextClassName = (textType?: string): string => {
     case "WHITE":
       return "text-white"
     case "NEUTRAL":
-      return "text-neutral-light"
-    case "NEUTRAL_DARK":
-      return "text-neutral-dark"
+      return "text-neutral"
     case "SUCCESS":
       return "text-success"
     case "WARNING":
diff --git a/packages/react/objects/facets/Color.tsx b/packages/react/objects/facets/Color.tsx
index 40da3efe..65e668ef 100644
--- a/packages/react/objects/facets/Color.tsx
+++ b/packages/react/objects/facets/Color.tsx
@@ -6,18 +6,25 @@ import { TrilogyThemeContext } from "@/context/providerTheme"
  */
 export enum TrilogyColor {
   BACKGROUND = "WHITE",
+  FADE_BACKGROUND = "FADE_WHITE",
   MAIN = "MAIN",
+  FADE_MAIN = "FADE_MAIN",
   ACCENT = "ACCENT",
+  FADE_ACCENT = "FADE_ACCENT",
   FONT = "FONT",
+  FADE_FONT = "FADE_FONT",
   SUCCESS = "SUCCESS",
+  FADE_SUCCESS = "FADE_SUCCESS",
   INFO = "INFO",
+  FADE_INFO = "FADE_INFO",
   WARNING = "WARNING",
+  FADE_WARNING = "FADE_WARNING",
   ERROR = "ERROR",
+  FADE_ERROR = "FADE_ERROR",
   DISABLED = "DISABLED",
-  HOVERED = "HOVERED",
+  FADE_DISABLED = "FADE_DISABLED",
   NEUTRAL = "NEUTRAL",
-  NEUTRAL_DARK = "NEUTRAL_DARK",
-  NEUTRAL_LIGHT = "NEUTRAL_LIGHT"
+  FADE_NEUTRAL = "FADE_NEUTRAL",
 }
 
 export type TrilogyColorValues = `${TrilogyColor}`;
@@ -46,12 +53,7 @@ export const colors: Record<TrilogyColor, string[]> = {
       ["#646464", "#D1D1D1", "disabled", "white"],
   [TrilogyColor.NEUTRAL]:
       ["#707070", "#F4F4F4", "grey", "white"],
-  [TrilogyColor.NEUTRAL_DARK]:
-      ["#646464", "#E9E9E9", "grey-dark", "white"],
-  [TrilogyColor.NEUTRAL_LIGHT]:
-      ["#E9E9E9", "#E9E9E9", "grey-light", "grey"],
-  [TrilogyColor.HOVERED]:
-      ["#F4F4F4", "#F4F4F4", "hovered", "white"],
+
 }
 
 /**
@@ -103,7 +105,7 @@ export const getButtonColorStyle = (buttonVariant?: string): string => {
     case "PRIMARY":
       return TrilogyColor.MAIN
     case "SECONDARY":
-      return TrilogyColor.HOVERED
+      return TrilogyColor.FADE_MAIN
     case "GHOST":
       return TrilogyColor.BACKGROUND
     default:
@@ -121,6 +123,12 @@ export const getColorStyle = (
   trilogyColor: TrilogyColor | TrilogyColorValues,
   index?: number
 ): string => {
+
+  if (trilogyColor.startsWith("FADE_")){
+    index=1
+    trilogyColor = trilogyColor.replace("FADE_", "") as TrilogyColor
+  }
+
   if (typeof navigator !== 'undefined' && navigator.userAgent === undefined) {
     const { theme } = useContext(TrilogyThemeContext)
     const colorsStyle = theme?.colors || colors
diff --git a/packages/react/objects/facets/Variant.ts b/packages/react/objects/facets/Variant.ts
index 62bb7eb0..de7f0082 100644
--- a/packages/react/objects/facets/Variant.ts
+++ b/packages/react/objects/facets/Variant.ts
@@ -59,7 +59,7 @@ export const getVariantStyle = (variantType?: string): string => {
     case "MAIN":
       return getColorStyle(TrilogyColor.MAIN)
     case "SECONDARY":
-      return getColorStyle(TrilogyColor.HOVERED)
+      return getColorStyle(TrilogyColor.FADE_MAIN)
     case "TERTIARY":
       return getColorStyle(TrilogyColor.MAIN)
     case "INFO":
diff --git a/packages/styles/framework/src/base/_color.scss b/packages/styles/framework/src/base/_color.scss
index c96dbfcb..414a6c98 100644
--- a/packages/styles/framework/src/base/_color.scss
+++ b/packages/styles/framework/src/base/_color.scss
@@ -1,36 +1,36 @@
 @use "sass:map";
 
 @function getColor( $name ) {
-  @if str-slice($name, 0, 3) == 'bg-' {
-    $submane: str-slice($name, 4);
-  @return getBGColor( $submane );
+  @if str-slice($name, 0, 5) == 'fade-' {
+    $submane: str-slice($name, 6);
+  @return getFadeColor( $submane );
   }
-  @return var(--color-#{nth(map-get($colors,$name),1)})
+  @return var(--color-#{nth(map-get($colors,$name),3)});
 }
 
 @function getColorValue( $name ) {
-  @return #{nth(map-get($colors,$name),2)}
+  @return #{nth(map-get($colors,$name),1)}
 }
 
-@function getBGColorValue( $name ) {
-  @return #{nth(map-get($colors,$name),4)}
+@function getFadeColorValue( $name ) {
+  @return #{nth(map-get($colors,$name),2)}
 }
 
 @function getColorBrandName( $name ) {
-  @return #{nth(map-get($colors,$name),1)}
+  @return #{nth(map-get($colors,$name),3)}
 }
 
-@function getBGColor( $name ) {
-  @return var(--color-bg-#{nth(map-get($colors,$name),1)})
+@function getFadeColor( $name ) {
+  @return var(--color-fade-#{nth(map-get($colors,$name),3)})
 }
 
 :root {
   @each $name, $color in $colors {
-    --color-#{nth($color,1)}: #{nth($color,2)};
-    --color-bg-#{nth($color,1)}: #{nth($color,4)};
+    --color-#{nth($color,3)}: #{nth($color,1)};
+    --color-fade-#{nth($color,3)}: #{nth($color,2)};
   }
 }
 
 @function invertColor ($colorName) {
-  @return var(--color-#{nth(map-get($colors,$colorName),3)})
+  @return var(--color-#{nth(map-get($colors,$colorName),4)})
 }
diff --git a/packages/styles/framework/src/base/_generic.scss b/packages/styles/framework/src/base/_generic.scss
index 43feb25e..7a20b93f 100644
--- a/packages/styles/framework/src/base/_generic.scss
+++ b/packages/styles/framework/src/base/_generic.scss
@@ -7,7 +7,7 @@ $body-line-height: 1.5 !default;
 .html-wrap {
     margin: 0;
     padding: 0;
-    background-color: getBGColor('neutral');
+    background-color: getColor('background');
     font-size: $body-size;
     -moz-osx-font-smoothing: grayscale;
     -webkit-font-smoothing: antialiased;
diff --git a/packages/styles/framework/src/base/_helpers.scss b/packages/styles/framework/src/base/_helpers.scss
index c6401b96..f823c502 100644
--- a/packages/styles/framework/src/base/_helpers.scss
+++ b/packages/styles/framework/src/base/_helpers.scss
@@ -197,8 +197,8 @@ $alignments: (
 
 @mixin typography-colors() {
   @each $name, $color in $colors {
-    $brandName: nth($color, 1);
-    $color: nth($color, 2);
+    $brandName: nth($color, 3);
+    $color: nth($color, 1);
     $color-invert: invertColor($name);
 
     .has-text-#{$brandName} {
@@ -211,7 +211,7 @@ $alignments: (
       background-color: getColor($name) !important;
     }
     .has-background-#{$brandName}-fade {
-      background-color: getBGColor($name) !important;
+      background-color: getFadeColor($name) !important;
     }
   }
 }
diff --git a/packages/styles/framework/src/components/_card.scss b/packages/styles/framework/src/components/_card.scss
index e79467f9..f4c64476 100644
--- a/packages/styles/framework/src/components/_card.scss
+++ b/packages/styles/framework/src/components/_card.scss
@@ -6,7 +6,7 @@
   flex-direction: column;
   position: relative;
   box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
-  background-color: getColor("background");
+  background-color: getColor('background');
 
   &:not(:last-child) {
     margin-bottom: 15px;
diff --git a/packages/styles/framework/src/components/_divider.scss b/packages/styles/framework/src/components/_divider.scss
index 8a0b0b20..8b85d47d 100644
--- a/packages/styles/framework/src/components/_divider.scss
+++ b/packages/styles/framework/src/components/_divider.scss
@@ -1,7 +1,7 @@
 .divider {
     position: relative;
     text-align: center;
-    background-color: getBGColor('hovered');
+    background-color: getFadeColor('neutral');
     height: 1px;
     width: 100%;
     margin: 16px 0;
diff --git a/packages/styles/framework/src/components/_fab.scss b/packages/styles/framework/src/components/_fab.scss
index 8d51eb9e..592eb24d 100644
--- a/packages/styles/framework/src/components/_fab.scss
+++ b/packages/styles/framework/src/components/_fab.scss
@@ -20,12 +20,20 @@
   white-space: nowrap;
 
   #{$hoverSelector}, &.is-extended, &:focus, &:focus-visible, &:focus-within {
-    background-color: getColor('hovered');
+    background: linear-gradient(
+        to top,
+        rgba(0, 0, 0, 0.25),
+        rgba(0, 0, 0, 0.25)
+    ) getColor('font');
     max-width: 300px;
   }
 
   &:active {
-    background-color: getColor('hovered');
+    background: linear-gradient(
+        to top,
+        rgba(0, 0, 0, 0.25),
+        rgba(0, 0, 0, 0.25)
+    ) getColor('font');
   }
 
   .icon {
diff --git a/packages/styles/framework/src/components/_modal.scss b/packages/styles/framework/src/components/_modal.scss
index b5303fab..0b17ab26 100644
--- a/packages/styles/framework/src/components/_modal.scss
+++ b/packages/styles/framework/src/components/_modal.scss
@@ -135,7 +135,7 @@ body:has(.modal.is-active) {
     z-index: zindex('medium');
 
     #{$hoverSelector} {
-      background-color: getBGColor('neutral');
+      background-color: getFadeColor('neutral');
     }
 
     &::after,
diff --git a/packages/styles/framework/src/components/_pagination.scss b/packages/styles/framework/src/components/_pagination.scss
index 95215f3c..7dc32911 100644
--- a/packages/styles/framework/src/components/_pagination.scss
+++ b/packages/styles/framework/src/components/_pagination.scss
@@ -48,7 +48,7 @@
 .pagination-previous,
 .pagination-next,
 .pagination-link {
-  color: getColor('neutral-dark');
+  color: getColor('neutral');
   min-width: 2.25em;
 
   @include hover();
@@ -66,9 +66,12 @@
   &[aria-current] {
     background-color: getColor('font');
     color: getColor('background');
-
     #{$hoverSelector}, &:focus, &:focus-within {
-      background-color: getColor('hovered');
+      background: linear-gradient(
+          to top,
+          rgba(0, 0, 0, 0.25),
+          rgba(0, 0, 0, 0.25)
+      ) getColor('font') !important;
     }
   }
 }
diff --git a/packages/styles/framework/src/components/_plus-symbol.scss b/packages/styles/framework/src/components/_plus-symbol.scss
index 2986bfb2..0917b17e 100644
--- a/packages/styles/framework/src/components/_plus-symbol.scss
+++ b/packages/styles/framework/src/components/_plus-symbol.scss
@@ -1,6 +1,6 @@
 $plus-symbol-size: 40px;
 
-@mixin plus-symbol($color: getBGColor('neutral-dark'), $text-color: getColor('neutral-dark')) {
+@mixin plus-symbol($color: getFadeColor('neutral'), $text-color: getColor('neutral')) {
     &::after {
         content: "+";
         display: inline-block;
diff --git a/packages/styles/framework/src/components/_price.scss b/packages/styles/framework/src/components/_price.scss
index 6059ee12..ed17df2d 100644
--- a/packages/styles/framework/src/components/_price.scss
+++ b/packages/styles/framework/src/components/_price.scss
@@ -170,7 +170,7 @@ $price-levels: (
 
   &.is-striked {
     position: relative;
-    color: getBGColor('font');
+    color: getFadeColor('font');
 
     &::before {
       position: absolute;
@@ -185,7 +185,7 @@ $price-levels: (
     }
 
     &.is-inverted {
-      color: getBGColor('font');
+      color: getFadeColor('font');
 
       &::before {
         border-color: getColor('background');
diff --git a/packages/styles/framework/src/components/_segmented-control.scss b/packages/styles/framework/src/components/_segmented-control.scss
index dce4871d..a5de534b 100644
--- a/packages/styles/framework/src/components/_segmented-control.scss
+++ b/packages/styles/framework/src/components/_segmented-control.scss
@@ -1,7 +1,7 @@
 .segmented-control {
   border-radius: 6px;
   padding: $spacing-1;
-  background-color: getBGColor('neutral');
+  background-color: getFadeColor('neutral');
   display: inline-block;
   margin: 16px 0;
 
@@ -19,7 +19,7 @@
     border: 2px solid transparent;
     height: 42px;
     color: getColor('font');
-    background-color: getBGColor('neutral');
+    background-color: getFadeColor('neutral');
 
     &:not(:last-child) {
       margin-right: 4px;
diff --git a/packages/styles/framework/src/components/_stepper.scss b/packages/styles/framework/src/components/_stepper.scss
index dbb6ba52..b5ca66e1 100644
--- a/packages/styles/framework/src/components/_stepper.scss
+++ b/packages/styles/framework/src/components/_stepper.scss
@@ -23,7 +23,7 @@
     height: 4px;
     border-radius: var(--radius-small);
     background-size: 200% !important;
-    background-color: getBGColor('neutral');
+    background-color: getFadeColor('neutral');
   }
 
   &.is-error {
@@ -204,7 +204,7 @@
 
 @keyframes progress {
   0%, 100% {
-    background-image: linear-gradient(to right, transparent 0, transparent 50%, getBGColor('neutral') 50%, getBGColor('neutral') 100%);
+    background-image: linear-gradient(to right, transparent 0, transparent 50%, getFadeColor('neutral') 50%, getFadeColor('neutral') 100%);
   }
   0% {
     background-position: 100% 0;
diff --git a/packages/styles/framework/src/components/_timeline.scss b/packages/styles/framework/src/components/_timeline.scss
index 22ecb419..cdf3ad21 100644
--- a/packages/styles/framework/src/components/_timeline.scss
+++ b/packages/styles/framework/src/components/_timeline.scss
@@ -1,9 +1,9 @@
 @use 'sass:math';
 @import "../utilities/spacing";
 
-$timeline-marker-color: getBGColor('neutral') !default;
+$timeline-marker-color: getFadeColor('neutral') !default;
 $timeline-marker-icon-size: 2.85em !default;
-$timeline-line-color: getBGColor('neutral') !default;
+$timeline-line-color: getFadeColor('neutral') !default;
 $timeline-marker-size: 0.8em !default;
 $timeline-marker-border-size: 0.1em !default;
 $timeline-marker-border: $timeline-marker-border-size solid $timeline-marker-color !default;
@@ -53,7 +53,7 @@ $timeline-image-dimensions: 16 24 32 48 64 96 128 !default;
     padding-bottom: $spacing-2;
 
     &::before {
-      background-color: getBGColor('neutral');
+      background-color: getFadeColor('neutral');
     }
 
     .timeline-marker.is-icon {
@@ -116,13 +116,13 @@ $timeline-image-dimensions: 16 24 32 48 64 96 128 !default;
 
     &.cancel {
       .timeline-marker.is-icon {
-        background-color: getColor('neutral-dark');
-        color: getBGColor('neutral');
+        background-color: getColor('neutral');
+        color: getFadeColor('neutral');
       }
 
       &::before {
         content: '';
-        background-color: getBGColor('neutral-dark');
+        background-color: getFadeColor('neutral');
         display: block;
         width: $timeline-line-width;
         position: absolute;
@@ -338,11 +338,8 @@ $timeline-image-dimensions: 16 24 32 48 64 96 128 !default;
           background-color: getColor('main');
         }
 
-        &.undone {
-
-          &::before {
-            background-color: getBGColor('neutral');
-          }
+        &.undone::before {
+          background-color: getFadeColor('neutral');
         }
 
         &.done::before {
@@ -350,7 +347,7 @@ $timeline-image-dimensions: 16 24 32 48 64 96 128 !default;
         }
 
         &.cancel::before {
-          background-color: getBGColor('neutral-dark');
+          background-color: getFadeColor('neutral');
         }
 
         .timeline-marker {
diff --git a/packages/styles/framework/src/elements/_alert.scss b/packages/styles/framework/src/elements/_alert.scss
index 617fa3bc..82318d59 100644
--- a/packages/styles/framework/src/elements/_alert.scss
+++ b/packages/styles/framework/src/elements/_alert.scss
@@ -49,7 +49,7 @@ a.alert {
 
   @each $name in $colors-feedback {
     &.is-#{$name} {
-      background-color: getBGColor($name);
+      background-color: getFadeColor($name);
       border: 1px solid getColor($name);
 
       .icon {
diff --git a/packages/styles/framework/src/elements/_autocomplete.scss b/packages/styles/framework/src/elements/_autocomplete.scss
index 16e06a8d..07c3d9af 100644
--- a/packages/styles/framework/src/elements/_autocomplete.scss
+++ b/packages/styles/framework/src/elements/_autocomplete.scss
@@ -23,10 +23,10 @@
                 @include hoverRules();
                 margin-left: calc(2px - $spacing-3 );
                 margin-right: calc(2px - $spacing-3 );
-                border-top: 1px solid var(--color-bg-hovered);
-                border-bottom: 1px solid var(--color-bg-hovered);
+                border-top: 1px solid getColor('fade-neutral');
+                border-bottom: 1px solid getColor('fade-neutral');
                 padding: calc($spacing-1 - 1.25px) calc($spacing-4 - 1px);
             }
         }
     }
-}
\ No newline at end of file
+}
diff --git a/packages/styles/framework/src/elements/_box.scss b/packages/styles/framework/src/elements/_box.scss
index dd2d3658..6f684a8c 100644
--- a/packages/styles/framework/src/elements/_box.scss
+++ b/packages/styles/framework/src/elements/_box.scss
@@ -158,7 +158,7 @@ a.box {
     margin-right: calc(var(--padding-box)*-1);
     margin-bottom: calc(var(--padding-box)*-1);
     padding: var(--padding-box);
-    border-top: 1px solid getBGColor('hovered');
+    border-top: 1px solid getFadeColor('neutral');
     border-bottom-left-radius: var(--radius);
     border-bottom-right-radius: var(--radius);
   }
diff --git a/packages/styles/framework/src/elements/_button.scss b/packages/styles/framework/src/elements/_button.scss
index 848b1f59..0fab054d 100644
--- a/packages/styles/framework/src/elements/_button.scss
+++ b/packages/styles/framework/src/elements/_button.scss
@@ -63,8 +63,8 @@ $button-border-width: 2px !default;
 
   &[disabled],
   &[aria-disabled=true] {
-    background-color: getBGColorValue('main') !important;
-    color: getBGColorValue('disabled') !important
+    background-color: getFadeColorValue('main') !important;
+    color: getFadeColorValue('disabled') !important
   }
 
   &.is-loading {
diff --git a/packages/styles/framework/src/elements/_chips.scss b/packages/styles/framework/src/elements/_chips.scss
index 289f0921..cd77243e 100644
--- a/packages/styles/framework/src/elements/_chips.scss
+++ b/packages/styles/framework/src/elements/_chips.scss
@@ -55,7 +55,7 @@
         }
       }
       #{$hoverSelector} {
-        background-color: var(--color-bg-hovered);
+        background-color: getFadeColor('neutral');
       }
     }
 
diff --git a/packages/styles/framework/src/elements/_form.scss b/packages/styles/framework/src/elements/_form.scss
index efc6f351..1970a36e 100644
--- a/packages/styles/framework/src/elements/_form.scss
+++ b/packages/styles/framework/src/elements/_form.scss
@@ -228,7 +228,7 @@ $label-weight: $weight-bold;
       @each $name, $pair in $colors-feedback {
         &.is-#{$name} {
           ~ .icon {
-            color: getBGColor($name);
+            color: getFadeColor($name);
           }
         }
       }
@@ -242,7 +242,7 @@ $label-weight: $weight-bold;
       @each $name, $pair in $colors-feedback {
         &.is-#{$name} {
           ~ .icon {
-            color: getBGColor($name)
+            color: getFadeColor($name)
           }
         }
       }
@@ -405,7 +405,7 @@ $label-weight: $weight-bold;
 
         &:hover,
         &:focus {
-          color: getColor('neutral-dark');
+          color: getColor('neutral');
         }
       }
     }
@@ -569,7 +569,7 @@ $label-weight: $weight-bold;
 }
 
 .label {
-  color: getColor('neutral-dark');
+  color: getColor('neutral');
   display: block;
   font-size: $size-normal;
   font-weight: $label-weight;
diff --git a/packages/styles/framework/src/elements/_progress.scss b/packages/styles/framework/src/elements/_progress.scss
index 3117f25d..cd75eeb6 100644
--- a/packages/styles/framework/src/elements/_progress.scss
+++ b/packages/styles/framework/src/elements/_progress.scss
@@ -18,10 +18,10 @@ $progressbar-small: 5px;
   -moz-appearance: none;
   -webkit-appearance: none;
 
-  background-color: getBGColor('hovered');
+  background-color: getFadeColor('neutral');
 
   &::-webkit-progress-bar {
-    background-color: getBGColor('font');
+    background-color: getFadeColor('font');
     border-radius: $progressbar-height;
   }
 
@@ -98,7 +98,7 @@ $progress-circle-slices: (
   secondary: getColor('info'),
   tertiary: getColor('font'),
   warning: getColor('warning'),
-  empty: getBGColor('neutral-dark')
+  empty: getFadeColor('neutral')
 );
 
 .progress-circle {
diff --git a/packages/styles/framework/src/elements/_switch.scss b/packages/styles/framework/src/elements/_switch.scss
index bd8c6ac0..229bc5d4 100644
--- a/packages/styles/framework/src/elements/_switch.scss
+++ b/packages/styles/framework/src/elements/_switch.scss
@@ -15,14 +15,14 @@
 
     &:disabled ~ label {
       &:after {
-        $colorSvg: encodecolor(getColorValue('neutral-dark'));
+        $colorSvg: encodecolor(getColorValue('neutral'));
         content: url('data:image/svg+xml; utf8, <svg viewBox="0 0 44 44" xmlns="http://www.w3.org/2000/svg" stroke="#{$colorSvg}" stroke-linecap="round" stroke-width="3.2" fill="none"><path d="M12.6 12.6L31.4 31.4M12.6 31.4L31.4 12.6"/></svg>');
       }
     }
 
     &:disabled:checked ~ label {
       &:after {
-        $colorSvg: encodecolor(getColorValue('neutral-dark'));
+        $colorSvg: encodecolor(getColorValue('neutral'));
         content: url('data:image/svg+xml; utf8, <svg viewBox="0 0 44 44" xmlns="http://www.w3.org/2000/svg" stroke="#{$colorSvg}" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" fill="none"><path d="M11.3 22.4L18.1 29.3L32.7 14.7"/></svg>');
       }
     }
@@ -45,12 +45,12 @@
       border-radius: 9999px;
       width: 44px;
       height: 22px;
-      background-color: getBGColor('font');
+      background-color: getFadeColor('font');
       margin-left: 16px;
     }
 
     &:after {
-      $colorSvg: encodecolor(getBGColorValue('font'));
+      $colorSvg: encodecolor(getFadeColorValue('font'));
       content: url('data:image/svg+xml; utf8, <svg viewBox="0 0 44 44" xmlns="http://www.w3.org/2000/svg" stroke="#{$colorSvg}" stroke-linecap="round" stroke-width="3.2" fill="none"><path d="M12.6 12.6L31.4 31.4M12.6 31.4L31.4 12.6"/></svg>');
       position: absolute;
       top: 50%;
diff --git a/packages/styles/framework/src/elements/_table.scss b/packages/styles/framework/src/elements/_table.scss
index f5024482..e61962ca 100644
--- a/packages/styles/framework/src/elements/_table.scss
+++ b/packages/styles/framework/src/elements/_table.scss
@@ -11,7 +11,7 @@
   @include block;
 
   background-color: transparent;
-  color: getColor('neutral-dark');
+  color: getColor('neutral');
 
   &:not(:last-child) {
     margin-bottom: 30px;
@@ -21,12 +21,12 @@
   * @deprecated "Use multiples <tr><th> instead"
   */
   tbody .is-body-header {
-    background-color: getBGColor('neutral-dark');
+    background-color: getFadeColor('neutral');
   }
 
   td,
   th {
-    border: 1px solid getBGColor('neutral-dark');
+    border: 1px solid getFadeColor('neutral');
     border-width: 0;
     padding: 20px;
     vertical-align: top;
@@ -56,7 +56,7 @@
   tr {
     @each $name in $colors-feedback {
       &.is-#{$name} {
-        background-color: getBGColor($name);
+        background-color: getFadeColor($name);
       }
     }
 
@@ -71,7 +71,7 @@
     }
 
     td {
-      border-bottom: 1px solid getBGColor('neutral-dark');
+      border-bottom: 1px solid getFadeColor('neutral');
 
       > p {
         margin: 0;
@@ -155,12 +155,12 @@
 
   &:not(.is-bordered).is-comparative {
     th {
-      border-right: 1px solid getBGColor('neutral');
+      border-right: 1px solid getFadeColor('neutral');
     }
 
     td {
       &:not(:last-child) {
-        border-right: 1px solid getBGColor('neutral-dark');
+        border-right: 1px solid getFadeColor('neutral');
       }
     }
   }
@@ -196,14 +196,14 @@
     tbody {
       tr:not(.is-selected) {
         &:nth-child(even) {
-          background-color: getBGColor('neutral');
+          background-color: getFadeColor('neutral');
         }
       }
     }
   }
 
   .subtable {
-    background-color: getBGColor('neutral');
+    background-color: getFadeColor('neutral');
     border-radius: var(--radius);
     padding: $box-padding * 2;
 
@@ -216,7 +216,7 @@
 
       tr:not(:first-child) {
         td {
-          border-top: 1px solid getColor('neutral-dark');
+          border-top: 1px solid getColor('neutral');
         }
       }
 
diff --git a/packages/styles/framework/src/elements/_tag.scss b/packages/styles/framework/src/elements/_tag.scss
index d625e24a..ef2a4205 100644
--- a/packages/styles/framework/src/elements/_tag.scss
+++ b/packages/styles/framework/src/elements/_tag.scss
@@ -85,7 +85,7 @@ $tag-delete-margin: 1px !default;
 
     &.is-inverted {
       .tag {
-        background-color: getColor(getColor('background'));
+        background-color: getColor('fade-background');
       }
     }
 
@@ -94,7 +94,7 @@ $tag-delete-margin: 1px !default;
 
 .tag {
   align-items: center;
-  background-color: getBGColor('neutral-dark');
+  background-color: getFadeColor('neutral');
   border-radius: 9999px;
   color: getColor('font');
   display: inline-flex;
@@ -120,7 +120,7 @@ $tag-delete-margin: 1px !default;
 
   @each $name in $colors-feedback {
     &.is-#{$name}:not(.is-inverted) {
-      background-color: getBGColor($name);
+      background-color: getFadeColor($name);
     }
     &.is-inverted.is-#{$name} {
       color: getColor($name);
diff --git a/packages/styles/framework/src/elements/_toaster.scss b/packages/styles/framework/src/elements/_toaster.scss
index f5b9e305..d834e4d9 100644
--- a/packages/styles/framework/src/elements/_toaster.scss
+++ b/packages/styles/framework/src/elements/_toaster.scss
@@ -13,7 +13,7 @@ a.toaster {
     @include apply-shadow-box();
 
 
-  background-color: getColor('bg-info');
+  background-color: getColor('fade-info');
   border-radius: var(--radius);
   margin-bottom: 16px;
   position: relative;
@@ -64,7 +64,7 @@ a.toaster {
 
   @each $name in $colors-feedback {
     &.is-#{$name} {
-      background-color: getBGColor($name);
+      background-color: getFadeColor($name);
       border: 2px solid getColor($name);
 
       .icon {
diff --git a/packages/styles/framework/src/grid/_columns.scss b/packages/styles/framework/src/grid/_columns.scss
index 6ebcee78..0cdf8446 100644
--- a/packages/styles/framework/src/grid/_columns.scss
+++ b/packages/styles/framework/src/grid/_columns.scss
@@ -781,7 +781,7 @@
     }
 
     &::-webkit-scrollbar-track {
-      background-color: getBGColor('font');
+      background-color: getFadeColor('font');
       border-radius: var(--radius);
       margin: 0 8px;
     }
diff --git a/packages/styles/framework/src/layout/_section.scss b/packages/styles/framework/src/layout/_section.scss
index 32d50137..03eb13f3 100644
--- a/packages/styles/framework/src/layout/_section.scss
+++ b/packages/styles/framework/src/layout/_section.scss
@@ -13,14 +13,6 @@
     }
   }
 
-  &:nth-child(even) {
-    background-color: getBGColor('neutral');
-  }
-
-  &:nth-child(odd) {
-    background-color: getColor('background');
-  }
-
   &.is-info {
     background-color: getColor('info');
     color: getColor('background');
@@ -46,13 +38,4 @@
   &.has-pattern-dark {
     @include pattern-dark(120%, 260px, -30%);
   }
-
-}
-
-.section:nth-child(2n).is-inverted {
-  background-color: getColor('background');
-}
-
-.section:nth-child(2n-1).is-inverted {
-  background-color: getBGColor('neutral');
 }
diff --git a/packages/styles/framework/src/theming/buttons_partial.scss b/packages/styles/framework/src/theming/buttons_partial.scss
index 6c4f8850..a06d71fb 100644
--- a/packages/styles/framework/src/theming/buttons_partial.scss
+++ b/packages/styles/framework/src/theming/buttons_partial.scss
@@ -9,7 +9,7 @@ Colors for buttons
 $button-colors: (
   'accent':['conversion', 'alternate', 'background'],
   'primary': ['primary', 'main', 'background'],
-  'secondary': ['secondary', 'bg-main', 'main'],
+  'secondary': ['secondary', 'fade-main', 'main'],
   'ghost': ['ghost', 'background', 'main'],
 ) !default;
 
diff --git a/packages/styles/framework/src/theming/common_partials.scss b/packages/styles/framework/src/theming/common_partials.scss
index 70261362..af2f9e1b 100644
--- a/packages/styles/framework/src/theming/common_partials.scss
+++ b/packages/styles/framework/src/theming/common_partials.scss
@@ -4,6 +4,6 @@
   --radius: 8px;
   --radius-small: 4px;
   --radius-large: 16px;
-  --border: 1px solid #{getBGColor('font')};
+  --border: 1px solid #{getFadeColor('font')};
   --border-active: 2px solid #{getColor('main')};
 }
diff --git a/packages/styles/framework/src/utilities/_all.scss b/packages/styles/framework/src/utilities/_all.scss
index d3858b68..c0c759ff 100644
--- a/packages/styles/framework/src/utilities/_all.scss
+++ b/packages/styles/framework/src/utilities/_all.scss
@@ -7,6 +7,6 @@
 @import '../theming/buttons_partial';
 @import "mixins";
 @import "controls";
-@import "background";
+//@import "background";
 @import "animations";
 @import "spacing";
diff --git a/packages/styles/framework/src/utilities/_background.scss b/packages/styles/framework/src/utilities/_background.scss
index c8b32098..eb366227 100644
--- a/packages/styles/framework/src/utilities/_background.scss
+++ b/packages/styles/framework/src/utilities/_background.scss
@@ -1,5 +1,5 @@
 .is-inverted {
-  color: getColor('background');
+  color: #{getColor('background')};
 }
 
 .is-inverted .is-base {
@@ -8,7 +8,7 @@
 
 .has-background {
   background-repeat: no-repeat;
-  
+
   .box-content {
     background-color: transparent;
   }
diff --git a/packages/styles/framework/src/utilities/_colors.scss b/packages/styles/framework/src/utilities/_colors.scss
new file mode 100644
index 00000000..6751377e
--- /dev/null
+++ b/packages/styles/framework/src/utilities/_colors.scss
@@ -0,0 +1,23 @@
+$suffix: '';
+
+/*
+ All color variables are defined here
+ @string slug name used in classname (You can use your brand name)
+ @color A valid css color value
+ @invert The slug name of the best inverted color
+ @hover A valid css color value (a variant color for the hover case)
+ @visited A valid css color value (a variant color for the pressed case) -- optional
+ @background A valid css color value (a variant color for background) -- optional
+ */
+$colors: (
+  'background': [#fff, #E9E9E9, 'white', 'main'],
+  'main':[ #3d5d7e, #eff2f8, 'main', 'white'],
+  'alternate':[ #da641b, #bb5118,'accent', 'white'],
+  'font':[ #3d5d7e, #BBC6CD, 'main', 'white'],
+  'success':[ #007B52, #cae8ca,'success', 'white'],
+  'info':[ #1A688A, #c8dbec, 'info','white'],
+  'warning':[ #FFBB33, #ecdbc6,'warning', 'white'],
+  'error':[ #D42D02,#eecccc,'error', 'white'],
+  'disabled':[ #646464, #D1D1D1,'disabled', 'white'],
+  'neutral':[ #707070, #F4F4F4,'grey', 'white' ],
+) !default;
diff --git a/packages/styles/framework/src/utilities/_initial-variables.scss b/packages/styles/framework/src/utilities/_initial-variables.scss
index de3b6e87..64f9416f 100644
--- a/packages/styles/framework/src/utilities/_initial-variables.scss
+++ b/packages/styles/framework/src/utilities/_initial-variables.scss
@@ -1,33 +1,5 @@
 @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
-
-$suffix: '';
-
-/*
- All color variables are defined here
- @string slug name used in classname (You can use your brand name)
- @color A valid css color value
- @invert The slug name of the best inverted color
- @hover A valid css color value (a variant color for the hover case)
- @visited A valid css color value (a variant color for the pressed case) -- optional
- @background A valid css color value (a variant color for background) -- optional
- */
-$colors: (
-  'background': ['white', #fff, 'main', #E9E9E9],
-  'main':['main', #3d5d7e, 'white', #eff2f8],
-  'alternate':['accent', #da641b, 'white',  #bb5118],
-  'font':['main', #3d5d7e, 'white', #BBC6CD],
-  'success':['success', #007B52, 'white', #cae8ca],
-  'info':['info', #1A688A, 'white', #c8dbec],
-  'warning':['warning', #FFBB33, 'white', #ecdbc6],
-  'error':['error', #D42D02, 'white',#eecccc],
-  /* Grey disabled // BG : bg-disabled */
-  'disabled':['disabled', #646464, 'white', #D1D1D1],
-  'hovered': ['hovered', #24374a, 'font',#e4eaed],
-  /* grey , BG : grey-lighter */
-  'neutral':['grey', #707070, 'white', #F4F4F4 ],
-  /* grey dark , BG : grey-light */
-  'neutral-dark':['grey-dark', #646464, 'white', #E9E9E9 ]
-) !default;
+@import "colors";
 
 $hoverSelector: "&:hover:not([disabled]):not([aria-disabled=true])";
 
diff --git a/packages/styles/framework/src/utilities/_mixins.scss b/packages/styles/framework/src/utilities/_mixins.scss
index 6138aec6..34dd68d3 100644
--- a/packages/styles/framework/src/utilities/_mixins.scss
+++ b/packages/styles/framework/src/utilities/_mixins.scss
@@ -147,7 +147,7 @@
 
 @mixin spinner {
   animation: spinAround 500ms infinite linear;
-  border: 2px solid getBGColor('neutral-dark');
+  border: 2px solid getFadeColor('neutral');
   border-radius: 290486px;
   border-right-color: transparent;
   border-top-color: transparent;
@@ -365,7 +365,7 @@
   @include control;
   height: 56px;
   background-color: getColor('background');
-  border-color: getBGColor('font');
+  border-color: getFadeColor('font');
   color: getColor('font');
 
   @include placeholder {
@@ -419,7 +419,7 @@
       &:disabled:checked {
         & ~ label.#{$type}-label {
           &:after {
-            background-color: getBGColor('disabled');
+            background-color: getFadeColor('disabled');
           }
         }
       }
@@ -606,7 +606,15 @@
 }
 
 @mixin hoverRules {
-  background-color: var(--color-bg-hovered);
+  background-color: getFadeColor('neutral');
+}
+
+@mixin hoverRulesOnOdd {
+  background: linear-gradient(
+      to top,
+      rgba(0, 0, 0, 0.25),
+      rgba(0, 0, 0, 0.25)
+  ) getFadeColor('neutral');
 }
 
 @mixin hover {
@@ -618,7 +626,6 @@
   }
 }
 
-
 @mixin disabledRulesWithoutBG {
   border-color: transparent !important;
   box-shadow: none !important;
@@ -628,6 +635,6 @@
 }
 
 @mixin disabledRules {
-  background-color: getBGColor('disabled') !important;
+  background-color: getFadeColor('disabled') !important;
   @include disabledRulesWithoutBG;
 }