diff --git a/canon-docs/public/css-classname-structure.png b/canon-docs/public/css-classname-structure.png
new file mode 100644
index 0000000000..df9894ff2b
Binary files /dev/null and b/canon-docs/public/css-classname-structure.png differ
diff --git a/canon-docs/src/app/(docs)/theme/theming/page.mdx b/canon-docs/src/app/(docs)/theme/theming/page.mdx
index e3fc42da44..665755c268 100644
--- a/canon-docs/src/app/(docs)/theme/theming/page.mdx
+++ b/canon-docs/src/app/(docs)/theme/theming/page.mdx
@@ -29,8 +29,100 @@ Here's an example of how your theme.css file should look like:
 
 <CodeBlock lang="css" code={customTheme} />
 
+## CSS class name structure
+
+All Canon components come with a set of CSS classes that you can use to style them. To make it
+easier to identify the class name you can use, we use a specific structure for the class names.
+
+<img
+  src="/css-classname-structure.png"
+  style={{ width: '100%', marginBottom: '32px', marginTop: '16px' }}
+/>
+
+Every component has a unique prefix `.canon-` followed by the component name. Component props
+are represented using the `data-` attribute. That way, class names are easily identifiable.
+
 ## Available CSS variables
 
+### Base colors
+
+These colors are used for special purposes like ring, scrollbar, ...
+
+<Table.Root>
+  <Table.Header>
+    <Table.HeaderRow>
+      <Table.HeaderCell>Prop</Table.HeaderCell>
+      <Table.HeaderCell>Description</Table.HeaderCell>
+    </Table.HeaderRow>
+  </Table.Header>
+  <Table.Body>
+    <Table.Row>
+      <Table.Cell>
+        <Chip head>--canon-black</Chip>
+      </Table.Cell>
+      <Table.Cell>
+        Pure black color. This one should be the same in light and dark themes.
+      </Table.Cell>
+    </Table.Row>
+    <Table.Row>
+      <Table.Cell>
+        <Chip head>--canon-white</Chip>
+      </Table.Cell>
+      <Table.Cell>
+        Pure white color. This one should be the same in light and dark themes.
+      </Table.Cell>
+    </Table.Row>
+    <Table.Row>
+      <Table.Cell>
+        <Chip head>--canon-gray-1</Chip>
+      </Table.Cell>
+      <Table.Cell>You can use these mostly for backgrounds colors.</Table.Cell>
+    </Table.Row>
+    <Table.Row>
+      <Table.Cell>
+        <Chip head>--canon-gray-2</Chip>
+      </Table.Cell>
+      <Table.Cell>You can use these mostly for backgrounds colors.</Table.Cell>
+    </Table.Row>
+    <Table.Row>
+      <Table.Cell>
+        <Chip head>--canon-gray-3</Chip>
+      </Table.Cell>
+      <Table.Cell>You can use these mostly for backgrounds colors.</Table.Cell>
+    </Table.Row>
+    <Table.Row>
+      <Table.Cell>
+        <Chip head>--canon-gray-4</Chip>
+      </Table.Cell>
+      <Table.Cell>You can use these mostly for backgrounds colors.</Table.Cell>
+    </Table.Row>
+    <Table.Row>
+      <Table.Cell>
+        <Chip head>--canon-gray-5</Chip>
+      </Table.Cell>
+      <Table.Cell>You can use these mostly for backgrounds colors.</Table.Cell>
+    </Table.Row>
+    <Table.Row>
+      <Table.Cell>
+        <Chip head>--canon-gray-6</Chip>
+      </Table.Cell>
+      <Table.Cell>You can use these mostly for backgrounds colors.</Table.Cell>
+    </Table.Row>
+    <Table.Row>
+      <Table.Cell>
+        <Chip head>--canon-gray-7</Chip>
+      </Table.Cell>
+      <Table.Cell>You can use these mostly for backgrounds colors.</Table.Cell>
+    </Table.Row>
+    <Table.Row>
+      <Table.Cell>
+        <Chip head>--canon-gray-8</Chip>
+      </Table.Cell>
+      <Table.Cell>You can use these mostly for backgrounds colors.</Table.Cell>
+    </Table.Row>
+  </Table.Body>
+</Table.Root>
+
 ### Core background colors
 
 These colors are used for the background of your application. We are mostly using for now a
@@ -57,98 +149,60 @@ color of your app.
       </Table.Cell>
       <Table.Cell>Use for any panels or elevated surfaces.</Table.Cell>
     </Table.Row>
-  </Table.Body>
-</Table.Root>
-
-### Component background colors
-
-These colors are meants for interactive components like buttons, callout avatar, chips, ...
-We have two main level of background you can customise. The accent one is mostly used as a primary option
-for interactive components. The tint one is used for secondary components like callouts, avatars, ...
-
-<Table.Root>
-  <Table.Header>
-    <Table.HeaderRow>
-      <Table.HeaderCell>Prop</Table.HeaderCell>
-      <Table.HeaderCell>Description</Table.HeaderCell>
-    </Table.HeaderRow>
-  </Table.Header>
-  <Table.Body>
     <Table.Row>
       <Table.Cell>
-        <Chip head>--canon-bg-accent</Chip>
+        <Chip head>--canon-bg-surface-2</Chip>
       </Table.Cell>
-      <Table.Cell>Used mostly for primary interactive components.</Table.Cell>
+      <Table.Cell>Use for any panels or elevated surfaces.</Table.Cell>
     </Table.Row>
     <Table.Row>
       <Table.Cell>
-        <Chip head>--canon-bg-accent-hover</Chip>
-      </Table.Cell>
-      <Table.Cell>
-        Used for interactive components when they are hovered.
+        <Chip head>--canon-bg-solid</Chip>
       </Table.Cell>
+      <Table.Cell>Used for solid background colors.</Table.Cell>
     </Table.Row>
     <Table.Row>
       <Table.Cell>
-        <Chip head>--canon-bg-accent-focus</Chip>
-      </Table.Cell>
-      <Table.Cell>
-        Used for interactive components when they are in focus.
+        <Chip head>--canon-bg-solid-hover</Chip>
       </Table.Cell>
+      <Table.Cell>Used for solid background colors when hovered.</Table.Cell>
     </Table.Row>
     <Table.Row>
       <Table.Cell>
-        <Chip head>--canon-bg-accent-disabled</Chip>
+        <Chip head>--canon-bg-solid-pressed</Chip>
       </Table.Cell>
+      <Table.Cell>Used for solid background colors when pressed.</Table.Cell>
+    </Table.Row>
+    <Table.Row>
       <Table.Cell>
-        Used for interactive components when they are disabled.
+        <Chip head>--canon-bg-solid-disabled</Chip>
       </Table.Cell>
+      <Table.Cell>Used for solid background colors when disabled.</Table.Cell>
     </Table.Row>
     <Table.Row>
       <Table.Cell>
         <Chip head>--canon-bg-tint</Chip>
       </Table.Cell>
-      <Table.Cell>Used for secondary interactive components.</Table.Cell>
+      <Table.Cell>Used for tint background colors.</Table.Cell>
     </Table.Row>
     <Table.Row>
       <Table.Cell>
         <Chip head>--canon-bg-tint-hover</Chip>
       </Table.Cell>
-      <Table.Cell>
-        Used for interactive components when they are hovered.
-      </Table.Cell>
+      <Table.Cell>Used for tint background colors when hovered.</Table.Cell>
     </Table.Row>
     <Table.Row>
       <Table.Cell>
         <Chip head>--canon-bg-tint-focus</Chip>
       </Table.Cell>
-      <Table.Cell>
-        Used for interactive components when they are active.
-      </Table.Cell>
+      <Table.Cell>Used for tint background colors when active.</Table.Cell>
     </Table.Row>
     <Table.Row>
       <Table.Cell>
         <Chip head>--canon-bg-tint-disabled</Chip>
       </Table.Cell>
-      <Table.Cell>
-        Used for interactive components when they are disabled.
-      </Table.Cell>
+      <Table.Cell>Used for tint background colors when disabled.</Table.Cell>
     </Table.Row>
-  </Table.Body>
-</Table.Root>
-
-### Status background colors
-
-These backgrounds are intended for non-interactive elements to visually convey a specific state.
-
-<Table.Root>
-  <Table.Header>
-    <Table.HeaderRow>
-      <Table.HeaderCell>Prop</Table.HeaderCell>
-      <Table.HeaderCell>Description</Table.HeaderCell>
-    </Table.HeaderRow>
-  </Table.Header>
-  <Table.Body>
     <Table.Row>
       <Table.Cell>
         <Chip head>--canon-bg-danger</Chip>
@@ -189,7 +243,7 @@ are prefixed with `fg` to make it easier to identify.
         <Chip head>--canon-fg-primary</Chip>
       </Table.Cell>
       <Table.Cell>
-        It should be used on top of `--canon-bg-app` or `--canon-bg-surface-1`.
+        It should be used on top of main background surfaces.
       </Table.Cell>
     </Table.Row>
     <Table.Row>
@@ -197,7 +251,7 @@ are prefixed with `fg` to make it easier to identify.
         <Chip head>--canon-fg-secondary</Chip>
       </Table.Cell>
       <Table.Cell>
-        It should be used on top of `--canon-bg-app` or `--canon-bg-surface-1`.
+        It should be used on top of main background surfaces.
       </Table.Cell>
     </Table.Row>
     <Table.Row>
@@ -205,7 +259,7 @@ are prefixed with `fg` to make it easier to identify.
         <Chip head>--canon-fg-link</Chip>
       </Table.Cell>
       <Table.Cell>
-        It should be used on top of `--canon-bg-app` or `--canon-bg-surface-1`.
+        It should be used on top of main background surfaces.
       </Table.Cell>
     </Table.Row>
     <Table.Row>
@@ -213,38 +267,64 @@ are prefixed with `fg` to make it easier to identify.
         <Chip head>--canon-fg-link-hover</Chip>
       </Table.Cell>
       <Table.Cell>
-        It should be used on top of `--canon-bg-app` or `--canon-bg-surface-1`.
+        It should be used on top of main background surfaces.
       </Table.Cell>
     </Table.Row>
     <Table.Row>
       <Table.Cell>
-        <Chip head>--canon-fg-accent</Chip>
+        <Chip head>--canon-fg-disabled</Chip>
+      </Table.Cell>
+      <Table.Cell>
+        It should be used on top of main background surfaces.
+      </Table.Cell>
+    </Table.Row>
+    <Table.Row>
+      <Table.Cell>
+        <Chip head>--canon-fg-solid</Chip>
+      </Table.Cell>
+      <Table.Cell>
+        It should be used on top of solid background colors.
       </Table.Cell>
-      <Table.Cell>It should be used on top of `--canon-bg-accent`.</Table.Cell>
     </Table.Row>
     <Table.Row>
       <Table.Cell>
         <Chip head>--canon-fg-tint</Chip>
       </Table.Cell>
-      <Table.Cell>It should be used on top of `--canon-bg-tint`.</Table.Cell>
+      <Table.Cell>
+        It should be used on top of tint background colors.
+      </Table.Cell>
+    </Table.Row>
+    <Table.Row>
+      <Table.Cell>
+        <Chip head>--canon-fg-tint-disabled</Chip>
+      </Table.Cell>
+      <Table.Cell>
+        It should be used on top of tint background colors when disabled.
+      </Table.Cell>
     </Table.Row>
     <Table.Row>
       <Table.Cell>
         <Chip head>--canon-fg-danger</Chip>
       </Table.Cell>
-      <Table.Cell>It should be used on top of `--canon-bg-danger`.</Table.Cell>
+      <Table.Cell>
+        It should be used on top of danger background colors.
+      </Table.Cell>
     </Table.Row>
     <Table.Row>
       <Table.Cell>
         <Chip head>--canon-fg-warning</Chip>
       </Table.Cell>
-      <Table.Cell>It should be used on top of `--canon-bg-warning`.</Table.Cell>
+      <Table.Cell>
+        It should be used on top of warning background colors.
+      </Table.Cell>
     </Table.Row>
     <Table.Row>
       <Table.Cell>
         <Chip head>--canon-fg-success</Chip>
       </Table.Cell>
-      <Table.Cell>It should be used on top of `--canon-bg-success`.</Table.Cell>
+      <Table.Cell>
+        It should be used on top of success background colors.
+      </Table.Cell>
     </Table.Row>
   </Table.Body>
 </Table.Root>
@@ -288,21 +368,9 @@ low contrast to help as a separator with the different background colors.
     </Table.Row>
     <Table.Row>
       <Table.Cell>
-        <Chip head>--canon-border-tint</Chip>
+        <Chip head>--canon-border-disabled</Chip>
       </Table.Cell>
-      <Table.Cell>It should be used on top of `--canon-bg-tint`.</Table.Cell>
-    </Table.Row>
-    <Table.Row>
-      <Table.Cell>
-        <Chip head>--canon-border-tint-hover</Chip>
-      </Table.Cell>
-      <Table.Cell>Used when the component is hovered.</Table.Cell>
-    </Table.Row>
-    <Table.Row>
-      <Table.Cell>
-        <Chip head>--canon-border-tint-focus</Chip>
-      </Table.Cell>
-      <Table.Cell>Used when the component is in focus.</Table.Cell>
+      <Table.Cell>Used when the component is disabled.</Table.Cell>
     </Table.Row>
     <Table.Row>
       <Table.Cell>
@@ -325,7 +393,40 @@ low contrast to help as a separator with the different background colors.
   </Table.Body>
 </Table.Root>
 
-## Font families
+### Special colors
+
+These colors are used for special purposes like ring, scrollbar, ...
+
+<Table.Root>
+  <Table.Header>
+    <Table.HeaderRow>
+      <Table.HeaderCell>Prop</Table.HeaderCell>
+      <Table.HeaderCell>Description</Table.HeaderCell>
+    </Table.HeaderRow>
+  </Table.Header>
+  <Table.Body>
+    <Table.Row>
+      <Table.Cell>
+        <Chip head>--canon-ring</Chip>
+      </Table.Cell>
+      <Table.Cell>The color of the ring.</Table.Cell>
+    </Table.Row>
+    <Table.Row>
+      <Table.Cell>
+        <Chip head>--canon-scrollbar</Chip>
+      </Table.Cell>
+      <Table.Cell>The color of the scrollbar.</Table.Cell>
+    </Table.Row>
+    <Table.Row>
+      <Table.Cell>
+        <Chip head>--canon-scrollbar-thumb</Chip>
+      </Table.Cell>
+      <Table.Cell>The color of the scrollbar thumb.</Table.Cell>
+    </Table.Row>
+  </Table.Body>
+</Table.Root>
+
+### Font families
 
 We have two fonts that we use across Canon. The first one is the sans-serif
 font that we use for the body of the application. The second one is the
@@ -354,9 +455,9 @@ monospace font that we use for code blocks and tables.
   </Table.Body>
 </Table.Root>
 
-## Font weights
+### Font weights
 
-We have two font weights that we use across Canon. Regular or Bold
+We have two font weights that we use across Canon. Regular or Bold.
 
 <Table.Root>
   <Table.Header>
@@ -381,7 +482,7 @@ We have two font weights that we use across Canon. Regular or Bold
   </Table.Body>
 </Table.Root>
 
-## Spacing
+### Spacing
 
 We built a spacing system based on a single value `--canon-space`. This value is
 used to calculate the spacing for all the components. By default if you would like to
@@ -520,18 +621,9 @@ tokens for pretty much each spacing properties like padding, margin, gaps, ...
   </Table.Body>
 </Table.Root>
 
-### Radius (Work in progress)
+### Radius
 
-Our radius system is a little bit different from spacing as we use a factor to calculate the radius values.
-Under the hood different components uses different radius values. For example, button can be set to have full radius  
-while a checkbox will have to remain a square.
-
-Here are the different radius factor we recommend to use
-
-- None: `0`
-- Small: `0.75`
-- Medium: `1`
-- Large: `1.5`
+We use a radius system to make sure that the components have a consistent look and feel.
 
 <Table.Root>
   <Table.Header>
@@ -543,9 +635,59 @@ Here are the different radius factor we recommend to use
   <Table.Body>
     <Table.Row>
       <Table.Cell>
-        <Chip head>--canon-radius-factor</Chip>
+        <Chip head>--canon-radius-1</Chip>
+      </Table.Cell>
+      <Table.Cell>
+        The radius of the component. Default value is `0.125rem`.
+      </Table.Cell>
+    </Table.Row>
+    <Table.Row>
+      <Table.Cell>
+        <Chip head>--canon-radius-2</Chip>
+      </Table.Cell>
+      <Table.Cell>
+        The radius of the component. Default value is `0.25rem`.
+      </Table.Cell>
+    </Table.Row>
+    <Table.Row>
+      <Table.Cell>
+        <Chip head>--canon-radius-3</Chip>
+      </Table.Cell>
+      <Table.Cell>
+        The radius of the component. Default value is `0.5rem`.
+      </Table.Cell>
+    </Table.Row>
+    <Table.Row>
+      <Table.Cell>
+        <Chip head>--canon-radius-4</Chip>
+      </Table.Cell>
+      <Table.Cell>
+        The radius of the component. Default value is `0.75rem`.
+      </Table.Cell>
+    </Table.Row>
+    <Table.Row>
+      <Table.Cell>
+        <Chip head>--canon-radius-5</Chip>
+      </Table.Cell>
+      <Table.Cell>
+        The radius of the component. Default value is `1rem`.
+      </Table.Cell>
+    </Table.Row>
+    <Table.Row>
+      <Table.Cell>
+        <Chip head>--canon-radius-6</Chip>
+      </Table.Cell>
+      <Table.Cell>
+        The radius of the component. Default value is `1.25rem`.
+      </Table.Cell>
+    </Table.Row>
+    <Table.Row>
+      <Table.Cell>
+        <Chip head>--canon-radius-full</Chip>
+      </Table.Cell>
+      <Table.Cell>
+        The radius of the component. Default value is `9999px`.
       </Table.Cell>
-      <Table.Cell>By default the value is set to medium `1`.</Table.Cell>
     </Table.Row>
   </Table.Body>
 </Table.Root>