diff --git a/packages/react/src/docs/colors.mdx b/packages/react/src/docs/colors.mdx
index dc4ba15..8b336e4 100644
--- a/packages/react/src/docs/colors.mdx
+++ b/packages/react/src/docs/colors.mdx
@@ -32,7 +32,7 @@ You can find all existing classes below.
       {tints.map(tint => (
         <div key={color + tint} style={{display: 'flex', flexDirection: 'column', flexShrink: 0,flexBasis: '120px', alignItems: 'center', flexGrow: 1}}>
           <div style={{width: '72px', height: '48px'}} className={"bg-" + color + "-" + tint}></div>
-          <pre className="fs-s mt-st">bg-{color}-{tint}</pre>
+          <pre className="clr-greyscale-800 fs-s mt-st">bg-{color}-{tint}</pre>
         </div>
       ))}
     </div>
@@ -57,7 +57,7 @@ You can find all existing classes below.
 <Canvas sourceState="none">
   {colors.map(color => (
     <div key={color} style={{display: 'flex', gap: '10px'}}>
-      {['text', ...tints].map(tint => {
+      {tints.map(tint => {
         const classes = ['fs-s', 'mt-st', 'clr-' + color + '-' + tint];
         if (tint === 'text') {
           classes.push('bg-' + color + '-500');
@@ -82,7 +82,7 @@ render readable text on top of a -500 background of its own color variation. Ple
 
 <Canvas sourceState="none">
 <div className="bg-primary-500 clr-primary-text fw-medium p-t">I'm a text on top of a primary-500 background 👋</div>
-<div className="bg-secondary-500 clr-secondary-text fw-medium p-t">I'm a text on top of a secondary-500 background 👋</div>
+<div className="clr-secondary-900 bg-secondary-500 clr-secondary-text fw-medium p-t">I'm a text on top of a secondary-500 background 👋</div>
 <div className="bg-danger-500 clr-danger-text fw-medium p-t">I'm a text on top of a danger-500 background 👋</div>
 </Canvas>
 
@@ -97,12 +97,16 @@ You can customize the values of the color design tokens with the configuration f
   code={`
   // cunningham.ts|cjs
   export default {
-    theme: {
-      colors: {
-        'primary-500': 'purple', // You can customize the existing primary-500 color. ( bg-primary-500, clr-primary-500 classes ),
-        'primary-text': 'cream',
-        'amazing-500': 'pink', // You can add a new color. ( bg-amazing-500, clr-amazing-500 classes will be generated )
-    }
+    themes: {
+      default: {
+        theme: {
+          colors: {
+            'primary-500': 'purple', // You can customize the existing primary-500 color. ( bg-primary-500, clr-primary-500 classes ),
+            'primary-text': 'cream',
+            'amazing-500': 'pink', // You can add a new color. ( bg-amazing-500, clr-amazing-500 classes will be generated )
+        },
+      },
+    },
   }
   `}
-/>
\ No newline at end of file
+/>
diff --git a/packages/react/src/docs/customization.mdx b/packages/react/src/docs/customization.mdx
index 87cd8f0..a434cea 100644
--- a/packages/react/src/docs/customization.mdx
+++ b/packages/react/src/docs/customization.mdx
@@ -34,11 +34,15 @@ If you prefer using Typescript, create a file named `cunningham.ts` at the root
 import { DefaultTokens } from "@openfun/cunningham-react";
 
 const config: DefaultTokens = {
-  theme: {
-      colors: {
-        "primary-500": "purple",
+  themes: {
+    default: {
+      theme: {
+        colors: {
+          "primary-500": "purple",
+        },
       },
     },
+  },
 };
 
 export default config;
@@ -52,9 +56,13 @@ Or if you prefer Javascript, create a file named `cunningham.cjs` at the root of
 <Source dark={true} code={`
 // cunningham.cjs
 module.exports = {
-  theme: {
-    colors: {
-      "primary-500": "purple",
+  themes: {
+    default: {
+      theme: {
+        colors: {
+          "primary-500": "purple",
+        },
+      },
     },
   },
 };`}></Source>
@@ -93,12 +101,16 @@ For our example we focus on the `border-radius` design token. Now, incorporate t
 import { DefaultTokens } from "@openfun/cunningham-react";
 
 const config: DefaultTokens = {
-  theme: {
-    ...
-  },
-  components: {
-    button: {
-      "border-radius": "30px",
+  themes: {
+    default: {
+      theme: {
+        ...
+      },
+      components: {
+        button: {
+          "border-radius": "30px",
+        },
+      },
     },
   },
 };
@@ -129,12 +141,16 @@ let's say we want keep the same border radius when the `Button` component is act
 import { defaultTokens, DefaultTokens } from "@openfun/cunningham-react";
 
 const config: DefaultTokens = {
-  theme: {
-    ...
-  },
-  components: {
-    button: {
-      "border-radius--active": defaultTokens.components.button["border-radius"],
+  themes: {
+    default: {
+      theme: {
+        ...
+      },
+      components: {
+        button: {
+          "border-radius--active": defaultTokens.components.button["border-radius"],
+        },
+      },
     },
   },
 };
@@ -152,12 +168,16 @@ You can also use more global design tokens from `defaultTokens.theme`, like that
 import { defaultTokens, DefaultTokens } from "@openfun/cunningham-react";
 
 const config: DefaultTokens = {
-  theme: {
-    ...
-  },
-  components: {
-    button: {
-      "medium-font-size": defaultTokens.theme.font.sizes.s,
+  themes: {
+    default: {
+      theme: {
+        ...
+      },
+      components: {
+        button: {
+          "medium-font-size": defaultTokens.theme.font.sizes.s,
+        },
+      },
     },
   },
 };
diff --git a/packages/react/src/docs/spacings.mdx b/packages/react/src/docs/spacings.mdx
index 178bba9..4b22c80 100644
--- a/packages/react/src/docs/spacings.mdx
+++ b/packages/react/src/docs/spacings.mdx
@@ -11,10 +11,10 @@ Here are the existing spacings:
 
 <Canvas sourceState="none">
   <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
-    {Object.keys(tokens.theme.spacings).map(key => (
+    {Object.keys(tokens.themes.default.theme.spacings).map(key => (
       <div key={key} style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
         <div className="fw-bold clr-secondary-text" style={{ width: '30px' }}>-{key}</div>
-        <div className="fw-medium fs-m clr-secondary-text" style={{ width: '100px' }}>{tokens.theme.spacings[key]}</div>
+        <div className="fw-medium fs-m clr-secondary-text" style={{ width: '100px' }}>{tokens.themes.default.theme.spacings[key]}</div>
         <div className={"bg-danger-100 pl-" + key} style={{ height: '48px', width: 0 }}></div>
       </div>
     ))}
@@ -51,8 +51,8 @@ You can use the following classes to add paddings to your elements:
 ## Example
 
 <Canvas sourceState="shown">
-  <div className="bg-danger-100">
-    <div className="bg-primary-500 clr-primary-text fw-medium p-t mb-l">Tiny padding + Large margin bottom</div>
-    <div className="bg-secondary-500 clr-secondary-text fw-medium p-l ml-b">Large padding + Base margin left</div>
+  <div className="clr-greyscale-800 bg-danger-100">
+    <div className="clr-greyscale-800 bg-primary-500 clr-primary-text fw-medium p-t mb-l">Tiny padding + Large margin bottom</div>
+    <div className="clr-secondary-900 bg-secondary-500 clr-secondary-text fw-medium p-l ml-b">Large padding + Base margin left</div>
   </div>
 </Canvas>
diff --git a/packages/react/src/docs/typo.mdx b/packages/react/src/docs/typo.mdx
index 5eee95c..0d98ba6 100644
--- a/packages/react/src/docs/typo.mdx
+++ b/packages/react/src/docs/typo.mdx
@@ -22,8 +22,8 @@ You can use custom utility classes to set the font size of an element. These cla
 
 <Canvas sourceState="none">
   <div style={{display: "flex", flexDirection: "column", gap: "20px"}}>
-    {Object.keys(tokens.theme.font.sizes).map(key => (
-      <div key={key} className={"fs-" + key}>Using the <code>fs-{key}</code> class</div>
+    {Object.keys(tokens.themes.default.theme.font.sizes).map(key => (
+      <div key={key} className={"clr-greyscale-800 fs-" + key}>Using the <code>fs-{key}</code> class</div>
     ))}
   </div>
 </Canvas>
@@ -37,15 +37,19 @@ You can customize the values of the font size design tokens with the configurati
   code={`
   // cunningham.ts|cjs
   export default {
-    theme: {
-      typo: {
-        sizes: {
-          m: '0.5rem', // You can customize the size of the existing medium text ( 'fs-m' class )
-          xxl: '3rem' // You can also add custom sizes yourself ( 'fs-xxl' class will be generated )
-          ...
+    themes: {
+      default: {
+        theme: {
+          typo: {
+            sizes: {
+              m: '0.5rem', // You can customize the size of the existing medium text ( 'fs-m' class )
+              xxl: '3rem' // You can also add custom sizes yourself ( 'fs-xxl' class will be generated )
+              ...
+            },
+          },
         },
-      }
-    }
+      },
+    },
   }
   `}
 />
@@ -65,8 +69,8 @@ You can use custom utility classes to set the font weight of an element. These c
 
 <Canvas sourceState="none">
   <div style={{display: "flex", flexDirection: "column", gap: "20px"}}>
-    {Object.keys(tokens.theme.font.weights).map(key => (
-      <div key={key} className={"fs-l fw-" + key}>Using the <code>fw-{key}</code> class</div>
+    {Object.keys(tokens.themes.default.theme.font.weights).map(key => (
+      <div key={key} className={"clr-greyscale-800 fs-l fw-" + key}>Using the <code>fw-{key}</code> class</div>
     ))}
   </div>
 </Canvas>
@@ -80,14 +84,18 @@ You can customize the values of the font weight design tokens with the configura
   code={`
   // cunningham.ts|cjs
   export default {
-    theme: {
-      typo: {
-        weights: {
-          regular: 500, // You can customize the size of the existing regular text ( 'fw-regular' class )
-          chunky: 900 // You can also add custom weights yourself ( 'fw-chunky' class will be generated )
-          ...
+    themes: {
+      default: {
+        theme: {
+          typo: {
+            weights: {
+              regular: 500, // You can customize the size of the existing regular text ( 'fw-regular' class )
+              chunky: 900 // You can also add custom weights yourself ( 'fw-chunky' class will be generated )
+              ...
+            },
+          },
         },
-      }
+      },
     }
   }
   `}
@@ -106,14 +114,14 @@ class on every dom element.
   dark
   format={false}
   code={`
-  <div className="f-accent">Accent text</div>
+  <div className="clr-greyscale-800 f-accent">Accent text</div>
   `}
 />
 
 <Canvas sourceState="none">
   <div style={{display: "flex", flexDirection: "column", gap: "20px"}}>
-    {Object.keys(tokens.theme.font.families).map(key => (
-    <div key={key} className={"f-" + key}>Using the <code>f-{key}</code> class</div>
+    {Object.keys(tokens.themes.default.theme.font.families).map(key => (
+    <div key={key} className={"clr-greyscale-800 f-" + key}>Using the <code>f-{key}</code> class</div>
     ))}
   </div>
 </Canvas>
@@ -127,15 +135,19 @@ You can customize the values of the font family design tokens with the configura
   code={`
   // cunningham.ts|cjs
   export default {
-    theme: {
-      typo: {
-        families: {
-          base: 'Inter', // You can customize the font family of the existing base variation ( 'f-base' class )
-          legend: 'Arial' // You can also add custom font families yourself ( 'f-legend' class will be generated )
-          ...
+    themes: {
+      default: {
+        theme: {
+          typo: {
+            families: {
+              base: 'Inter', // You can customize the font family of the existing base variation ( 'f-base' class )
+              legend: 'Arial' // You can also add custom font families yourself ( 'f-legend' class will be generated )
+              ...
+            },
+          },
         },
-      }
-    }
+      },
+    },
   }
   `}
-/>
\ No newline at end of file
+/>