diff --git a/examples/stories/src/tutorial/design/tokens/colors.mdx b/examples/stories/src/tutorial/design/tokens/colors.mdx
index e18fb9a73..002284515 100644
--- a/examples/stories/src/tutorial/design/tokens/colors.mdx
+++ b/examples/stories/src/tutorial/design/tokens/colors.mdx
@@ -45,6 +45,7 @@ import {
   SolidColorPalette,
   UniformColorPalette,
   VanillaColorPalette,
+  XColorPalette,
 } from '@component-controls/design-tokens';
 
 # Overview
@@ -1803,4 +1804,39 @@ import { VanillaColorPalette } from '@component-controls/design-tokens';
       sass: '$color-navigation-background',
     },
   }}
+/>
+
+
+## XColor
+
+The [XColor](/api/design-tokens-colors-xcolor--overview) component displays the color as a cirlce with the variable name, hev, rgb, cmyk and pantone values below.
+
+Design inspired from Biteable's Design System [X](https://x.biteable.com/brand/).
+
+```
+import { XColorPalette } from '@component-controls/design-tokens';
+
+<XColorPalette
+  palette={{
+    'Dame Tangerine': '#FF5000',
+    'Señor Purple': '#5F285A',
+    'Baron Von Teal': '#1DE9B6',
+    'Agent Cyan': '#18FFFF',
+    'Madam Yellow': '#FFF500',
+    'Pastor Pink': '#FF96B4',
+    'Brigadier Blue': '#000A47',
+  }}
+/>
+```
+
+ <XColorPalette
+  palette={{
+    'Dame Tangerine': '#FF5000',
+    'Señor Purple': '#5F285A',
+    'Baron Von Teal': '#1DE9B6',
+    'Agent Cyan': '#18FFFF',
+    'Madam Yellow': '#FFF500',
+    'Pastor Pink': '#FF96B4',
+    'Brigadier Blue': '#000A47',
+  }}
 />
\ No newline at end of file
diff --git a/ui/design-tokens/src/Colors/XColor/XColor.stories.tsx b/ui/design-tokens/src/Colors/XColor/XColor.stories.tsx
new file mode 100644
index 000000000..1a02428fe
--- /dev/null
+++ b/ui/design-tokens/src/Colors/XColor/XColor.stories.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import { ControlTypes } from '@component-controls/core';
+import { XColor, XColorPalette } from './XColor';
+import { ColorProps } from '../../types';
+
+export default {
+  title: 'Design Tokens/Colors/XColor',
+  component: XColor,
+};
+
+export const overview = ({ name, color }: ColorProps) => (
+  <XColor name={name} color={color} />
+);
+
+overview.controls = {
+  name: 'Lady Black',
+  color: { type: ControlTypes.COLOR, value: '#3C3C3B' },
+};
+
+export const palette = () => (
+  <XColorPalette
+    palette={{
+      'Dame Tangerine': '#FF5000',
+      'Señor Purple': '#5F285A',
+      'Baron Von Teal': '#1DE9B6',
+      'Agent Cyan': '#18FFFF',
+      'Madam Yellow': '#FFF500',
+      'Pastor Pink': '#FF96B4',
+      'Brigadier Blue': '#000A47',
+    }}
+  />
+);
diff --git a/ui/design-tokens/src/Colors/XColor/XColor.tsx b/ui/design-tokens/src/Colors/XColor/XColor.tsx
new file mode 100644
index 000000000..ceae5b840
--- /dev/null
+++ b/ui/design-tokens/src/Colors/XColor/XColor.tsx
@@ -0,0 +1,122 @@
+/** @jsx jsx */
+import { FC } from 'react';
+import { jsx, Theme } from 'theme-ui';
+import { CopyContainer } from '@component-controls/components';
+import simpleColorConverter from 'simple-color-converter';
+import { colorToStr } from '../utils';
+import { ColorBlockProps, ColorValue } from '../../types';
+import { GridContainerProps, GridContainer } from '../../components';
+
+/**
+ * Color item displaying the color as a cirlce with the variable name, hev, rgb, cmyk and pantone values below.
+ * Design inspired from Biteable's Design System [X](https://x.biteable.com/brand/).
+ */
+export const XColor: FC<ColorBlockProps> = ({ name, color }) => {
+  const colorObj: ColorValue =
+    typeof color === 'string' ? { value: color } : color;
+  const { value: colorValue, name: colorName = name } = colorObj;
+
+  const { hex, rgba } = colorToStr(colorValue);
+  const { color: cmyk } = new simpleColorConverter({
+    rgba,
+    to: 'cmyk',
+  });
+  const { color: pantone } = new simpleColorConverter({
+    rgba,
+    to: 'pantone',
+  });
+  return (
+    <div
+      sx={{
+        px: 2,
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        minWidth: 120,
+        maxWidth: 320,
+        fontSize: 2,
+      }}
+    >
+      <CopyContainer value={hex} name={name} sx={{ px: 2, pt: 2 }}>
+        <div
+          sx={{
+            border: (t: Theme) => `1px solid ${t.colors?.shadow}`,
+            width: 80,
+            height: 80,
+            bg: colorValue,
+            borderRadius: '50%',
+          }}
+        />
+      </CopyContainer>
+      <div sx={{ textAlign: 'center', mt: 1, mb: 2, fontWeight: 'heading' }}>
+        {colorName}
+      </div>
+      <div
+        sx={{
+          width: '100%',
+          display: 'flex',
+          flexDirection: 'row',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+        }}
+      >
+        <div>HEX</div>
+        <div>{hex.split('#')[1].toUpperCase()}</div>
+      </div>
+      <div
+        sx={{
+          width: '100%',
+          display: 'flex',
+          flexDirection: 'row',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+        }}
+      >
+        <div>RGB</div>
+        <div>
+          {`${rgba.r},${rgba.g},${rgba.b}${rgba.a !== 1 ? `,${rgba.a}` : ''}`}
+        </div>
+      </div>
+      <div
+        sx={{
+          width: '100%',
+          display: 'flex',
+          flexDirection: 'row',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+        }}
+      >
+        <div>CMYK</div>
+        <div>{`${cmyk.c},${cmyk.m},${cmyk.y},${cmyk.k}`}</div>
+      </div>
+      <div
+        sx={{
+          width: '100%',
+          display: 'flex',
+          flexDirection: 'row',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+        }}
+      >
+        <div>Pantone</div>
+        <div>{pantone}</div>
+      </div>
+    </div>
+  );
+};
+
+/**
+ *
+ * palette displayed with XColor items
+ * using a css grid for the dsplay
+ */
+export const XColorPalette: FC<Omit<
+  GridContainerProps,
+  'children'
+>> = props => (
+  <GridContainer width={180} gap={2} {...props}>
+    {({ name, value }) => (
+      <XColor key={`color_item_${name}}`} name={name} color={value} />
+    )}
+  </GridContainer>
+);
diff --git a/ui/design-tokens/src/Colors/XColor/index.ts b/ui/design-tokens/src/Colors/XColor/index.ts
new file mode 100644
index 000000000..f8af6e635
--- /dev/null
+++ b/ui/design-tokens/src/Colors/XColor/index.ts
@@ -0,0 +1 @@
+export * from './XColor';
diff --git a/ui/design-tokens/src/Colors/index.ts b/ui/design-tokens/src/Colors/index.ts
index a46165a10..7520c6ba5 100644
--- a/ui/design-tokens/src/Colors/index.ts
+++ b/ui/design-tokens/src/Colors/index.ts
@@ -32,3 +32,4 @@ export * from './SkylineColor';
 export * from './SolidColor';
 export * from './UniformColor';
 export * from './VanillaColor';
+export * from './XColor';