diff --git a/packages/storybook/src/documentation/color.mdx b/packages/storybook/src/documentation/color.mdx
new file mode 100644
index 00000000..5ba565ad
--- /dev/null
+++ b/packages/storybook/src/documentation/color.mdx
@@ -0,0 +1,26 @@
+import { ColorItem, ColorPalette, Meta } from "@storybook/blocks";
+import tokens from "../../../../proprietary/design-tokens/figma/figma.tokens.json";
+export const baseColors = tokens.brand.frameless.color;
+
+# Colors
+
+## Color Palette
+
+<Meta title="Frameless/Color" />
+
+<ColorPalette>
+  <ColorItem title="White" colors={[baseColors.white.value]} />
+  <ColorItem title="Black" colors={[baseColors.black.value]} />
+  <ColorItem title="Gray" colors={Object.values(baseColors.gray).map(({ value }) => value)} />
+  <ColorItem title="Petrol" colors={Object.values(baseColors.petrol).map(({ value }) => value)} />
+  <ColorItem title="Sulkingroom" colors={[baseColors.sulkingroom["60"].value]} />
+  <ColorItem title="Rosewood" colors={Object.values(baseColors.rosewood).map(({ value }) => value)} />
+  <ColorItem title="Maroon" colors={Object.values(baseColors.maroon).map(({ value }) => value)} />
+  <ColorItem title="Highlighter" colors={[baseColors.highlighter.green.value]} />
+  <ColorItem title="Red" colors={Object.values(baseColors.red).map(({ value }) => value)} />
+  <ColorItem title="Orange" colors={Object.values(baseColors.orange).map(({ value }) => value)} />
+  <ColorItem title="Green" colors={Object.values(baseColors.green).map(({ value }) => value)} />
+
+</ColorPalette>
+
+[Figma: Brand Identity / Color](https://www.figma.com/design/0x30NahtGzQlvdAjiPhwFn/NLDS---Frameless---Bibliotheek?node-id=3-314&node-type=canvas&t=ruJU2nnEfLTYXggb-0)