diff --git a/apps/website/screens/foundations/tokens/TokensPage.tsx b/apps/website/screens/foundations/tokens/TokensPage.tsx
index 3728879d0..8da050af9 100644
--- a/apps/website/screens/foundations/tokens/TokensPage.tsx
+++ b/apps/website/screens/foundations/tokens/TokensPage.tsx
@@ -6,6 +6,21 @@ import DxcQuickNavContainer from "@/common/QuickNavContainer";
import { DxcAlert, DxcBulletedList, DxcFlex, DxcHeading, DxcLink, DxcParagraph } from "@dxc-technology/halstack-react";
import Link from "next/link";
import componentTokens from "./images/component_tokens.gif";
+import {
+ AbsoluteTokens,
+ AlphaTokens,
+ NeutralTokens,
+ PrimaryTokens,
+ SecondaryTokens,
+ Semantic01Tokens,
+ Semantic02Tokens,
+ Semantic03Tokens,
+ Semantic04Tokens,
+ TertiaryTokens,
+} from "./tables/CoreColorTokens";
+import DimensionsTokens from "./tables/CoreDimensionsTokens";
+import { FontFamilyTokens, FontSizesTokens, FontStylesTokens, FontWeightTokens } from "./tables/CoreFontTokens";
+import BorderTokens from "./tables/CoreBorderTokens";
const sections = [
{
@@ -288,7 +303,67 @@ const sections = [
title: "Tokens in Development",
content: (
<>
- Work in Progress.
+
+ We have overhauled our token system to improve consistency in naming and usability. To achieve this, we
+ chose an implementation with CSS variables over our previous JavaScript-based implementation. There are
+ other advantages to using CSS variables, including less re-rendering, better performance and the ability
+ to update them at runtime.
+
+
+ As explained in the previous section, the token structure has been updated from a two-layer system to a
+ three-layer system. This new structure will allow developers to customize both the first and third layers.
+
+
+ The first layer (composed of core tokens) can be customized when using the opinionated theming approach.
+ Below is the list of available core tokens:
+
+ <>
+ {/* Color Tokens */}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <>
+ {/* Dimensions Tokens */}
+
+
+
+ <>
+ {/* Font Tokens */}
+
+
+
+
+
+
+
+
+
+
+ <>
+ {/* Border Tokens */}
+
+
+
+ The component layer is still under development.
),
},
diff --git a/apps/website/screens/foundations/tokens/tables/CoreBorderTokens.tsx b/apps/website/screens/foundations/tokens/tables/CoreBorderTokens.tsx
new file mode 100644
index 000000000..74e21cafa
--- /dev/null
+++ b/apps/website/screens/foundations/tokens/tables/CoreBorderTokens.tsx
@@ -0,0 +1,29 @@
+import { TableCode } from "@/common/Code";
+import { DxcTable } from "@dxc-technology/halstack-react";
+
+const BorderTokens = () => (
+
+
+