diff --git a/core/store/src/serialization/transform-controls.ts b/core/store/src/serialization/transform-controls.ts
index 786a8fb4f..68337274b 100644
--- a/core/store/src/serialization/transform-controls.ts
+++ b/core/store/src/serialization/transform-controls.ts
@@ -17,6 +17,8 @@ const controlShortcuts = (
 ): ComponentControl => {
   const valueType = typeof control;
   switch (valueType) {
+    case 'boolean':
+      return { type: ControlTypes.BOOLEAN, value: control };
     case 'string':
       return { type: ControlTypes.TEXT, value: control };
     case 'number':
diff --git a/examples/stories/src/tutorial/design/tokens/colors.mdx b/examples/stories/src/tutorial/design/tokens/colors.mdx
index 4b86d9197..7cee76ff6 100644
--- a/examples/stories/src/tutorial/design/tokens/colors.mdx
+++ b/examples/stories/src/tutorial/design/tokens/colors.mdx
@@ -39,6 +39,7 @@ import {
   PatternFlyColorPalette,
   PhotonColorPalette,
   PrimerColorPalette,
+  SeedsColorPalette,
 } from '@component-controls/design-tokens';
 
 # Overview
@@ -339,7 +340,6 @@ import { BeelineColorPalette } from '@component-controls/design-tokens';
     'Blue 4': { value: '#FBFDFF' },
   }}
 />
-
 ```
 
 <BeelineColorPalette
@@ -1169,7 +1169,6 @@ import { LiquidColorPalette } from '@component-controls/design-tokens';
     'Rich Green': '#149B5F',
   }}
 />
-
 ```
 
 <LiquidColorPalette
@@ -1218,7 +1217,6 @@ import { MorningstarColorPalette } from '@component-controls/design-tokens';
     },
   }}
 />
-
 ```
 
 <MorningstarColorPalette
@@ -1335,7 +1333,6 @@ import { PajamasColorPalette } from '@component-controls/design-tokens';
     '$orange-950': '#421f00',
   }}
 />
-
 ```
 
 <PajamasColorPalette
@@ -1401,7 +1398,6 @@ import { PatternFlyColorPalette } from '@component-controls/design-tokens';
     },
   }}
 />
-
 ```
 
 <PatternFlyColorPalette
@@ -1461,8 +1457,6 @@ import { PhotonColorPalette } from '@component-controls/design-tokens';
     'Teal 90': '#002d3e',
   }}
 />
-
-
 ```
 
 <PhotonColorPalette
@@ -1505,3 +1499,78 @@ import { PrimerColorPalette } from '@component-controls/design-tokens';
   }}
 />
 
+## SeedsColor
+
+The [SeedsColor](/api/design-tokens-colors-seedscolor--overview) component displays the color as a block wuth rgb and cmyk colors. Below the block are displayed the color name and description.
+
+Design inspired from SproutSocial's [Seed](https://seeds.sproutsocial.com/visual/color/).
+
+```
+import { SeedsColorPalette } from '@component-controls/design-tokens';
+
+<SeedsColorPalette
+  palette={{
+    'Purple.700': {
+      value: '#6f5ed3',
+      variants: ['purple.700'],
+      description:
+        'Use Purple 700 to highlight or draw attention to important information that has no interaction. When using our primary purple with our primary green, green should always be the dominant color of the two.',
+    },
+    'Aqua.1100': {
+      value: '#002838',
+      variants: ['aqua.1100'],
+      description:
+        'Use Aqua 1100 for dark backgrounds and solid drop shadows. Aqua 1100 should not be used on text.',
+    },
+    'Aqua.600': {
+      value: '#0797ae',
+      variants: ['aqua.600'],
+      description:
+        'Use Aqua 600 for in-app text links and to highlight or draw attention to important information that has no interaction. Aqua is also the primary spot illustration color and is used for color blocking.',
+    },
+    Primary: {
+      value: '#2079c3',
+      name: 'Primary CTA',
+      variants: ['cta.primary', 'blue.700'],
+    },
+    Secondary: {
+      value: '#364141',
+      name: 'Secondary CTA',
+      variants: ['cta.scondary', 'neutral.800'],
+    },
+  }}
+/>
+```
+
+<SeedsColorPalette
+  palette={{
+    'Purple.700': {
+      value: '#6f5ed3',
+      variants: ['purple.700'],
+      description:
+        'Use Purple 700 to highlight or draw attention to important information that has no interaction. When using our primary purple with our primary green, green should always be the dominant color of the two.',
+    },
+    'Aqua.1100': {
+      value: '#002838',
+      variants: ['aqua.1100'],
+      description:
+        'Use Aqua 1100 for dark backgrounds and solid drop shadows. Aqua 1100 should not be used on text.',
+    },
+    'Aqua.600': {
+      value: '#0797ae',
+      variants: ['aqua.600'],
+      description:
+        'Use Aqua 600 for in-app text links and to highlight or draw attention to important information that has no interaction. Aqua is also the primary spot illustration color and is used for color blocking.',
+    },
+    Primary: {
+      value: '#2079c3',
+      name: 'Primary CTA',
+      variants: ['cta.primary', 'blue.700'],
+    },
+    Secondary: {
+      value: '#364141',
+      name: 'Secondary CTA',
+      variants: ['cta.scondary', 'neutral.800'],
+    },
+  }}
+/>
\ No newline at end of file
diff --git a/ui/components/src/Source/Source.stories.tsx b/ui/components/src/Source/Source.stories.tsx
index 8b80a3ea3..0da14afc3 100644
--- a/ui/components/src/Source/Source.stories.tsx
+++ b/ui/components/src/Source/Source.stories.tsx
@@ -102,7 +102,7 @@ const themes: {
 export const themeSelector = () => {
   const [theme, setTheme] = React.useState('dracula');
   const themeAction: ActionItem = {
-    title: theme,
+    node: theme,
     onClick: () => {
       const themeNames = Object.keys(themes);
       const selected = themeNames.indexOf(theme);
diff --git a/ui/design-tokens/src/Colors/Alta/AltaColor.stories.tsx b/ui/design-tokens/src/Colors/Alta/AltaColor.stories.tsx
index 5c02c0069..397704448 100644
--- a/ui/design-tokens/src/Colors/Alta/AltaColor.stories.tsx
+++ b/ui/design-tokens/src/Colors/Alta/AltaColor.stories.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { ControlTypes } from '@component-controls/core';
 import { AltaColor, AltaColorPalette } from './AltaColor';
 import { ColorProps } from '../../types';
 
@@ -12,8 +13,8 @@ export const overview = ({ name, color }: ColorProps) => (
 );
 
 overview.controls = {
-  name: { type: 'text' },
-  color: { type: 'color', value: '#fbce4a' },
+  name: { type: ControlTypes.TEXT },
+  color: { type: ControlTypes.COLOR, value: '#fbce4a' },
 };
 
 export const name = () => <AltaColor name="brand" color="#e95b54" />;
diff --git a/ui/design-tokens/src/Colors/AntdHorzColor/AntdHorzColor.stories.tsx b/ui/design-tokens/src/Colors/AntdHorzColor/AntdHorzColor.stories.tsx
index eefd40e1d..df1fa825a 100644
--- a/ui/design-tokens/src/Colors/AntdHorzColor/AntdHorzColor.stories.tsx
+++ b/ui/design-tokens/src/Colors/AntdHorzColor/AntdHorzColor.stories.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { ControlTypes } from '@component-controls/core';
 import { AntdHorzColor, AntdHorzColorPalette } from './AntdHorzColor';
 import { ColorProps } from '../../types';
 
@@ -12,8 +13,8 @@ export const overview = ({ name, color }: ColorProps) => (
 );
 
 overview.controls = {
-  name: { type: 'text' },
-  color: { type: 'color', value: '#cf1322' },
+  name: { type: ControlTypes.TEXT },
+  color: { type: ControlTypes.COLOR, value: '#cf1322' },
 };
 
 export const name = () => <AntdHorzColor name="brand" color="#e95b54" />;
diff --git a/ui/design-tokens/src/Colors/AntdVertColor/AntdVertColor.stories.tsx b/ui/design-tokens/src/Colors/AntdVertColor/AntdVertColor.stories.tsx
index b61e0addd..878d0e418 100644
--- a/ui/design-tokens/src/Colors/AntdVertColor/AntdVertColor.stories.tsx
+++ b/ui/design-tokens/src/Colors/AntdVertColor/AntdVertColor.stories.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { ControlTypes } from '@component-controls/core';
 import { AntdVertColor, AntdVertColorPalette } from './AntdVertColor';
 import { ColorProps } from '../../types';
 
@@ -12,8 +13,8 @@ export const overview = ({ name, color }: ColorProps) => (
 );
 
 overview.controls = {
-  name: { type: 'text' },
-  color: { type: 'color', value: '#cf1322' },
+  name: { type: ControlTypes.TEXT },
+  color: { type: ControlTypes.COLOR, value: '#cf1322' },
 };
 
 export const name = () => <AntdVertColor name="brand" color="#e95b54" />;
diff --git a/ui/design-tokens/src/Colors/AnvilColor/AnvilColor.stories.tsx b/ui/design-tokens/src/Colors/AnvilColor/AnvilColor.stories.tsx
index afe9aa9a1..979550c2d 100644
--- a/ui/design-tokens/src/Colors/AnvilColor/AnvilColor.stories.tsx
+++ b/ui/design-tokens/src/Colors/AnvilColor/AnvilColor.stories.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { ControlTypes } from '@component-controls/core';
 import { AnvilColor, AnvilColorPalette } from './AnvilColor';
 import { ColorProps } from '../../types';
 
@@ -12,12 +13,12 @@ export const overview = ({ name, color }: ColorProps) => (
 );
 
 overview.controls = {
-  name: { type: 'text', value: 'Brand' },
+  name: 'Brand',
   color: {
-    type: 'object',
+    type: ControlTypes.OBJECT,
     value: {
-      value: { type: 'color', value: '#2270ee' },
-      name: { type: 'text', value: 'Blue400' },
+      value: { type: ControlTypes.COLOR, value: '#2270ee' },
+      name: 'Blue400',
     },
   },
 };
diff --git a/ui/design-tokens/src/Colors/AtlassianColor/AtlassianColor.stories.tsx b/ui/design-tokens/src/Colors/AtlassianColor/AtlassianColor.stories.tsx
index f20ee4583..2394fddec 100644
--- a/ui/design-tokens/src/Colors/AtlassianColor/AtlassianColor.stories.tsx
+++ b/ui/design-tokens/src/Colors/AtlassianColor/AtlassianColor.stories.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { ControlTypes } from '@component-controls/core';
 import { AtlassianColor, AtlassianColorPalette } from './AtlassianColor';
 import { ColorProps } from '../../types';
 
@@ -12,12 +13,12 @@ export const overview = ({ name, color }: ColorProps) => (
 );
 
 overview.controls = {
-  name: { type: 'text', value: 'Brand' },
+  name: 'Brand',
   color: {
-    type: 'object',
+    type: ControlTypes.OBJECT,
     value: {
-      value: { type: 'color', value: '#2270ee' },
-      name: { type: 'text', value: 'Blue400' },
+      value: { type: ControlTypes.COLOR, value: '#2270ee' },
+      name: 'Blue400',
     },
   },
 };
diff --git a/ui/design-tokens/src/Colors/AudiDSColor/AudiDSColor.stories.tsx b/ui/design-tokens/src/Colors/AudiDSColor/AudiDSColor.stories.tsx
index 9beeb0a51..c19bba4e6 100644
--- a/ui/design-tokens/src/Colors/AudiDSColor/AudiDSColor.stories.tsx
+++ b/ui/design-tokens/src/Colors/AudiDSColor/AudiDSColor.stories.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { ControlTypes } from '@component-controls/core';
 import { AudiDSColor, AudiDSColorPalette } from './AudiDSColor';
 import { ColorProps } from '../../types';
 
@@ -12,12 +13,12 @@ export const overview = ({ name, color }: ColorProps) => (
 );
 
 overview.controls = {
-  name: { type: 'text', value: 'Brand' },
+  name: 'Brand',
   color: {
-    type: 'object',
+    type: ControlTypes.OBJECT,
     value: {
-      value: { type: 'color', value: '#2270ee' },
-      name: { type: 'text', value: 'Blue400' },
+      value: { type: ControlTypes.COLOR, value: '#2270ee' },
+      name: 'Blue400',
     },
   },
 };
diff --git a/ui/design-tokens/src/Colors/BackpackColor/BackpackColor.stories.tsx b/ui/design-tokens/src/Colors/BackpackColor/BackpackColor.stories.tsx
index 527a085a4..384658a04 100644
--- a/ui/design-tokens/src/Colors/BackpackColor/BackpackColor.stories.tsx
+++ b/ui/design-tokens/src/Colors/BackpackColor/BackpackColor.stories.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { ControlTypes } from '@component-controls/core';
 import { BackpackColor, BackpackColorPalette } from './BackpackColor';
 import { ColorProps } from '../../types';
 
@@ -12,19 +13,19 @@ export const overview = ({ name, color }: ColorProps) => (
 );
 
 overview.controls = {
-  name: { type: 'text', value: 'Brand' },
+  name: 'Brand',
   color: {
-    type: 'object',
+    type: ControlTypes.OBJECT,
     value: {
-      value: { type: 'color', value: '#084eb2' },
+      value: { type: ControlTypes.COLOR, value: '#084eb2' },
       dark: {
-        type: 'object',
+        type: ControlTypes.OBJECT,
         value: {
-          value: { type: 'color', value: '#cddff8' },
-          name: { type: 'text', value: 'Blue800' },
+          value: { type: ControlTypes.COLOR, value: '#cddff8' },
+          name: 'Blue800',
         },
       },
-      name: { type: 'text', value: 'Blue400' },
+      name: 'Blue400',
     },
   },
 };
diff --git a/ui/design-tokens/src/Colors/BaseWebColor/BaseWebColor.stories.tsx b/ui/design-tokens/src/Colors/BaseWebColor/BaseWebColor.stories.tsx
index 475dc02f1..de2a9bffd 100644
--- a/ui/design-tokens/src/Colors/BaseWebColor/BaseWebColor.stories.tsx
+++ b/ui/design-tokens/src/Colors/BaseWebColor/BaseWebColor.stories.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { ControlTypes } from '@component-controls/core';
 import { BaseWebColor, BaseWebColorPalette } from './BaseWebColor';
 import { ColorProps } from '../../types';
 
@@ -12,8 +13,8 @@ export const overview = ({ name, color }: ColorProps) => (
 );
 
 overview.controls = {
-  name: { type: 'text', value: 'cobalt400' },
-  color: { type: 'color', value: '#0E1FC1' },
+  name: 'cobalt400',
+  color: { type: ControlTypes.COLOR, value: '#0E1FC1' },
 };
 
 export const palette = () => (
diff --git a/ui/design-tokens/src/Colors/BeelineColor/BeelineColor.stories.tsx b/ui/design-tokens/src/Colors/BeelineColor/BeelineColor.stories.tsx
index 4094d11ce..a13974668 100644
--- a/ui/design-tokens/src/Colors/BeelineColor/BeelineColor.stories.tsx
+++ b/ui/design-tokens/src/Colors/BeelineColor/BeelineColor.stories.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { ControlTypes } from '@component-controls/core';
 import { BeelineColor, BeelineColorPalette } from './BeelineColor';
 import { ColorProps } from '../../types';
 
@@ -12,8 +13,8 @@ export const overview = ({ name, color }: ColorProps) => (
 );
 
 overview.controls = {
-  name: { type: 'text', value: 'Brand' },
-  color: { type: 'color', value: '#2270ee' },
+  name: 'Brand',
+  color: { type: ControlTypes.COLOR, value: '#2270ee' },
 };
 
 export const name = () => <BeelineColor name="Critical" color="#f94d32" />;
diff --git a/ui/design-tokens/src/Colors/BoltColor/BoltColor.stories.tsx b/ui/design-tokens/src/Colors/BoltColor/BoltColor.stories.tsx
index f77179cf9..765adb0f2 100644
--- a/ui/design-tokens/src/Colors/BoltColor/BoltColor.stories.tsx
+++ b/ui/design-tokens/src/Colors/BoltColor/BoltColor.stories.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { ControlTypes } from '@component-controls/core';
 import { BoltColor, BoltColorPalette } from './BoltColor';
 import { ColorProps } from '../../types';
 
@@ -12,12 +13,12 @@ export const overview = ({ name, color }: ColorProps) => (
 );
 
 overview.controls = {
-  name: { type: 'text', value: 'Brand' },
+  name: 'Brand',
   color: {
-    type: 'object',
+    type: ControlTypes.OBJECT,
     value: {
-      value: { type: 'color', value: '#2270ee' },
-      varName: { type: 'text', value: 'var(--bolt-color-navy)' },
+      value: { type: ControlTypes.COLOR, value: '#2270ee' },
+      varName: 'var(--bolt-color-navy)',
     },
   },
 };
diff --git a/ui/design-tokens/src/Colors/CanvasColor/CanvasColor.stories.tsx b/ui/design-tokens/src/Colors/CanvasColor/CanvasColor.stories.tsx
index 15f11c92a..df0c449e2 100644
--- a/ui/design-tokens/src/Colors/CanvasColor/CanvasColor.stories.tsx
+++ b/ui/design-tokens/src/Colors/CanvasColor/CanvasColor.stories.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { ControlTypes } from '@component-controls/core';
 import { CanvasColor, CanvasColorPalette } from './CanvasColor';
 import { ColorProps } from '../../types';
 
@@ -12,13 +13,13 @@ export const overview = ({ name, color }: ColorProps) => (
 );
 
 overview.controls = {
-  name: { type: 'text', value: 'Primary' },
+  name: 'Primary',
   color: {
-    type: 'object',
+    type: ControlTypes.OBJECT,
     value: {
-      name: { type: 'text', value: 'LORAX' },
-      sass: { type: 'text', value: '$color-lorax' },
-      value: { type: 'color', value: '#ff7a59' },
+      name: 'LORAX',
+      sass: '$color-lorax',
+      value: { type: ControlTypes.COLOR, value: '#ff7a59' },
     },
   },
 };
diff --git a/ui/design-tokens/src/Colors/CedarColor/CedarColor.stories.tsx b/ui/design-tokens/src/Colors/CedarColor/CedarColor.stories.tsx
index 7f493e9d6..2c83e41d7 100644
--- a/ui/design-tokens/src/Colors/CedarColor/CedarColor.stories.tsx
+++ b/ui/design-tokens/src/Colors/CedarColor/CedarColor.stories.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { ControlTypes } from '@component-controls/core';
 import { CedarColor, CedarColorPalette } from './CedarColor';
 import { ColorProps } from '../../types';
 
@@ -12,16 +13,13 @@ export const overview = ({ name, color }: ColorProps) => (
 );
 
 overview.controls = {
-  name: { type: 'text', value: 'cobalt400' },
+  name: 'cobalt400',
   color: {
-    type: 'object',
+    type: ControlTypes.OBJECT,
     value: {
-      value: { type: 'color', value: '#225c4e' },
-      name: { type: 'text', value: 'cdr-color-text-button-primary-hover' },
-      description: {
-        type: 'text',
-        value: 'Text color for the hover state of primary buttons',
-      },
+      value: { type: ControlTypes.COLOR, value: '#225c4e' },
+      name: 'cdr-color-text-button-primary-hover',
+      description: 'Text color for the hover state of primary buttons',
     },
   },
 };
diff --git a/ui/design-tokens/src/Colors/CometColor/CometColor.stories.tsx b/ui/design-tokens/src/Colors/CometColor/CometColor.stories.tsx
index 3afea366d..435e1ea0f 100644
--- a/ui/design-tokens/src/Colors/CometColor/CometColor.stories.tsx
+++ b/ui/design-tokens/src/Colors/CometColor/CometColor.stories.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { ControlTypes } from '@component-controls/core';
 import { CometColor, CometColorPalette } from './CometColor';
 import { ColorProps } from '../../types';
 
@@ -12,13 +13,13 @@ export const overview = ({ name, color }: ColorProps) => (
 );
 
 overview.controls = {
-  name: { type: 'text', value: 'emerald-40' },
+  name: 'emerald-40',
   color: {
-    type: 'object',
+    type: ControlTypes.OBJECT,
     value: {
-      name: { type: 'text', value: '40' },
-      sass: { type: 'text', value: '$comet-color-emerald-40' },
-      value: { type: 'color', value: '#2F9D89' },
+      name: '40',
+      sass: '$comet-color-emerald-40',
+      value: { type: ControlTypes.COLOR, value: '#2F9D89' },
     },
   },
 };
diff --git a/ui/design-tokens/src/Colors/DuetColor/DuetColor.stories.tsx b/ui/design-tokens/src/Colors/DuetColor/DuetColor.stories.tsx
index 622bea9f5..861c0d0cb 100644
--- a/ui/design-tokens/src/Colors/DuetColor/DuetColor.stories.tsx
+++ b/ui/design-tokens/src/Colors/DuetColor/DuetColor.stories.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { ControlTypes } from '@component-controls/core';
 import { DuetColor, DuetColorPalette } from './DuetColor';
 import { ColorProps } from '../../types';
 
@@ -12,20 +13,17 @@ export const overview = ({ name, color }: ColorProps) => (
 );
 
 overview.controls = {
-  name: { type: 'text', value: 'Primary Blue Dark' },
+  name: 'Primary Blue Dark',
   color: {
-    type: 'object',
+    type: ControlTypes.OBJECT,
     value: {
-      value: { type: 'color', value: '#004d80' },
-      description: {
-        type: 'text',
-        value:
-          'Dark version of primary blue that is accessible with white. Most commonly used to indicate hover and active states of an item with primary blue background.',
-      },
-      sass: { type: 'text', value: '$color-primary-dark' },
-      varName: { type: 'text', value: 'var(--color-primary-dark)' },
+      value: { type: ControlTypes.COLOR, value: '#004d80' },
+      description:
+        'Dark version of primary blue that is accessible with white. Most commonly used to indicate hover and active states of an item with primary blue background.',
+      sass: '$color-primary-dark',
+      varName: 'var(--color-primary-dark)',
       status: {
-        type: 'options',
+        type: ControlTypes.OPTIONS,
         options: ['ok', 'warning', 'error'],
         value: 'ok',
       },
diff --git a/ui/design-tokens/src/Colors/ETradeColor/ETradeColor.stories.tsx b/ui/design-tokens/src/Colors/ETradeColor/ETradeColor.stories.tsx
index 2642c54ab..293be614d 100644
--- a/ui/design-tokens/src/Colors/ETradeColor/ETradeColor.stories.tsx
+++ b/ui/design-tokens/src/Colors/ETradeColor/ETradeColor.stories.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { ControlTypes } from '@component-controls/core';
 import { ETradeColor, ETradeColorPalette } from './ETradeColor';
 import { ColorProps } from '../../types';
 
@@ -12,11 +13,11 @@ export const overview = ({ name, color }: ColorProps) => (
 );
 
 overview.controls = {
-  name: { type: 'text', value: 'Negative red' },
+  name: 'Negative red',
   color: {
-    type: 'object',
+    type: ControlTypes.OBJECT,
     value: {
-      value: { type: 'color', value: '#cc0000' },
+      value: { type: ControlTypes.COLOR, value: '#cc0000' },
       name: 'Error state',
       description: 'Data trending down',
       sass: '$negative',
diff --git a/ui/design-tokens/src/Colors/FinastraColor/FinastraColor.stories.tsx b/ui/design-tokens/src/Colors/FinastraColor/FinastraColor.stories.tsx
index 3cb98b651..233b1ea09 100644
--- a/ui/design-tokens/src/Colors/FinastraColor/FinastraColor.stories.tsx
+++ b/ui/design-tokens/src/Colors/FinastraColor/FinastraColor.stories.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { ControlTypes } from '@component-controls/core';
 import { FinastraColor, FinastraColorPalette } from './FinastraColor';
 import { ColorProps } from '../../types';
 
@@ -14,11 +15,11 @@ export const overview = ({ name, color }: ColorProps) => (
 overview.controls = {
   name: 'V 100',
   color: {
-    type: 'object',
+    type: ControlTypes.OBJECT,
     value: {
       name: 'V',
-      value: { type: 'color', value: '#cf1322' },
-      primary: { type: 'boolean', value: true },
+      value: { type: ControlTypes.COLOR, value: '#cf1322' },
+      primary: { type: ControlTypes.BOOLEAN, value: true },
     },
   },
 };
diff --git a/ui/design-tokens/src/Colors/FishTankColor/FishTankColor.stories.tsx b/ui/design-tokens/src/Colors/FishTankColor/FishTankColor.stories.tsx
index 71eb7480c..98144e6fb 100644
--- a/ui/design-tokens/src/Colors/FishTankColor/FishTankColor.stories.tsx
+++ b/ui/design-tokens/src/Colors/FishTankColor/FishTankColor.stories.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { ControlTypes } from '@component-controls/core';
 import { FishTankColor, FishTankColorPalette } from './FishTankColor';
 import { ColorProps } from '../../types';
 
@@ -13,10 +14,10 @@ export const overview = ({ name, color }: ColorProps) => (
 
 overview.controls = {
   color: {
-    type: 'object',
+    type: ControlTypes.OBJECT,
     value: {
-      value: { type: 'color', value: '#0A7DAF' },
-      sass: { type: 'color', value: '$color-selected-darkest' },
+      value: { type: ControlTypes.COLOR, value: '#0A7DAF' },
+      sass: { type: ControlTypes.COLOR, value: '$color-selected-darkest' },
     },
   },
 };
diff --git a/ui/design-tokens/src/Colors/GovUKColor/GovUKColor.stories.tsx b/ui/design-tokens/src/Colors/GovUKColor/GovUKColor.stories.tsx
index 06bb752db..a9e86d9e0 100644
--- a/ui/design-tokens/src/Colors/GovUKColor/GovUKColor.stories.tsx
+++ b/ui/design-tokens/src/Colors/GovUKColor/GovUKColor.stories.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { ControlTypes } from '@component-controls/core';
 import { GovUKColor, GovUKColorPalette } from './GovUKColor';
 import { ColorProps } from '../../types';
 
@@ -13,9 +14,9 @@ export const overview = ({ name, color }: ColorProps) => (
 
 overview.controls = {
   color: {
-    type: 'object',
+    type: ControlTypes.OBJECT,
     value: {
-      value: { type: 'color', value: '#1d70b8' },
+      value: { type: ControlTypes.COLOR, value: '#1d70b8' },
       sass: '$govuk-brand-colour',
     },
   },
diff --git a/ui/design-tokens/src/Colors/HelpScoutColor/HelpScoutColor.stories.tsx b/ui/design-tokens/src/Colors/HelpScoutColor/HelpScoutColor.stories.tsx
index 39b8eaa3e..417a3a672 100644
--- a/ui/design-tokens/src/Colors/HelpScoutColor/HelpScoutColor.stories.tsx
+++ b/ui/design-tokens/src/Colors/HelpScoutColor/HelpScoutColor.stories.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { ControlTypes } from '@component-controls/core';
 import { HelpScoutColor, HelpScoutColorPalette } from './HelpScoutColor';
 import { ColorProps } from '../../types';
 
@@ -14,11 +15,11 @@ export const overview = ({ name, color }: ColorProps) => (
 overview.controls = {
   name: 'Lavender',
   color: {
-    type: 'object',
+    type: ControlTypes.OBJECT,
     value: {
-      value: { type: 'color', value: '#9FA6FF' },
+      value: { type: ControlTypes.COLOR, value: '#9FA6FF' },
       name: '500',
-      primary: { type: 'boolean', value: true },
+      primary: { type: ControlTypes.BOOLEAN, value: true },
     },
   },
 };
diff --git a/ui/design-tokens/src/Colors/IBMDLColor/IBMDLColor.stories.tsx b/ui/design-tokens/src/Colors/IBMDLColor/IBMDLColor.stories.tsx
index 172a5ac9c..07fb0e173 100644
--- a/ui/design-tokens/src/Colors/IBMDLColor/IBMDLColor.stories.tsx
+++ b/ui/design-tokens/src/Colors/IBMDLColor/IBMDLColor.stories.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { ControlTypes } from '@component-controls/core';
 import {
   IBMDLColor,
   IBMDLColorPalette,
@@ -17,8 +18,8 @@ export const overview = ({ name, color, display }: IBMDLColorProps) => (
 
 overview.controls = {
   name: 'Green 10',
-  color: { type: 'color', value: '#defbe6' },
-  display: { type: 'options', options: ['hex', 'rgb', 'pms', 'cmyk'] },
+  color: { type: ControlTypes.COLOR, value: '#defbe6' },
+  display: ['hex', 'rgb', 'pms', 'cmyk'],
 };
 
 export const palette = () => {
diff --git a/ui/design-tokens/src/Colors/LightningColor/LightningColor.stories.tsx b/ui/design-tokens/src/Colors/LightningColor/LightningColor.stories.tsx
index 4125c6f97..54db85a7d 100644
--- a/ui/design-tokens/src/Colors/LightningColor/LightningColor.stories.tsx
+++ b/ui/design-tokens/src/Colors/LightningColor/LightningColor.stories.tsx
@@ -1,23 +1,66 @@
 /* eslint-disable react/display-name */
 import React from 'react';
+import { ControlTypes } from '@component-controls/core';
 import { LightningColor, LightningColorPalette } from './LightningColor';
+import { TableColumn } from '../../components';
 import { ColorProps } from '../../types';
 
+const lightningColumns: TableColumn[] = [
+  {
+    title: 'Released',
+    name: 'released',
+    render: value => <div style={{ textAlign: 'right' }}>{value}</div>,
+  },
+  {
+    title: 'Themeable',
+    name: 'themeable',
+    render: value => (
+      <div style={{ textAlign: 'center' }}>{value ? 'Yes' : 'No'}</div>
+    ),
+  },
+  {
+    title: 'Support',
+    name: 'support',
+    render: value => (
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+        }}
+      >
+        <div
+          style={{
+            textAlign: 'center',
+            width: '1.5rem',
+            height: '1.5rem',
+            lineHeight: '1.5rem',
+            fontSize: '.625rem',
+            color: '#fff',
+            backgroundColor: value === 'GA' ? '#54c473' : '#6488e3',
+          }}
+        >
+          {value}
+        </div>
+      </div>
+    ),
+  },
+];
 export default {
   title: 'Design Tokens/Colors/LightningColor',
   component: LightningColor,
 };
 
 export const overview = ({ name, color }: ColorProps) => (
-  <LightningColor name={name} color={color} />
+  <LightningColor columns={lightningColumns} name={name} color={color} />
 );
 
 overview.controls = {
   name: 'BRAND_ACCESSIBLE',
   color: {
-    type: 'object',
+    type: ControlTypes.OBJECT,
     value: {
-      value: { type: 'color', value: '#004d80' },
+      value: { type: ControlTypes.COLOR, value: '#004d80' },
       description: 'Dark variant of BRAND that is accessible with white',
       sass: '$brand-accessible',
       released: '2.6.0',
@@ -29,47 +72,7 @@ overview.controls = {
 
 export const palette = () => (
   <LightningColorPalette
-    columns={[
-      {
-        title: 'Released',
-        name: 'released',
-        render: value => <div style={{ textAlign: 'right' }}>{value}</div>,
-      },
-      {
-        title: 'Themeable',
-        name: 'themeable',
-        render: value => (
-          <div style={{ textAlign: 'center' }}>{value ? 'Yes' : 'No'}</div>
-        ),
-      },
-      {
-        title: 'Support',
-        name: 'support',
-        render: value => (
-          <div
-            style={{
-              display: 'flex',
-              flexDirection: 'column',
-              alignItems: 'center',
-            }}
-          >
-            <div
-              style={{
-                textAlign: 'center',
-                width: '1.5rem',
-                height: '1.5rem',
-                lineHeight: '1.5rem',
-                fontSize: '.625rem',
-                color: '#fff',
-                backgroundColor: value === 'GA' ? '#54c473' : '#6488e3',
-              }}
-            >
-              {value}
-            </div>
-          </div>
-        ),
-      },
-    ]}
+    columns={lightningColumns}
     palette={{
       BRAND_DISABLED: {
         value: '#c9c7c5',
diff --git a/ui/design-tokens/src/Colors/LiquidColor/LiquidColor.stories.tsx b/ui/design-tokens/src/Colors/LiquidColor/LiquidColor.stories.tsx
index 5120eb129..d93e705fd 100644
--- a/ui/design-tokens/src/Colors/LiquidColor/LiquidColor.stories.tsx
+++ b/ui/design-tokens/src/Colors/LiquidColor/LiquidColor.stories.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { ControlTypes } from '@component-controls/core';
 import { LiquidColor, LiquidColorPalette } from './LiquidColor';
 import { ColorProps } from '../../types';
 
@@ -12,8 +13,8 @@ export const overview = ({ name, color }: ColorProps) => (
 );
 
 overview.controls = {
-  name: { type: 'text', value: 'Rich Purple' },
-  color: { type: 'color', value: '#503291' },
+  name: 'Rich Purple',
+  color: { type: ControlTypes.COLOR, value: '#503291' },
 };
 
 export const palette = () => (
diff --git a/ui/design-tokens/src/Colors/MorningstarColor/MorningstarColor.stories.tsx b/ui/design-tokens/src/Colors/MorningstarColor/MorningstarColor.stories.tsx
index c37bc1d91..90257b0bf 100644
--- a/ui/design-tokens/src/Colors/MorningstarColor/MorningstarColor.stories.tsx
+++ b/ui/design-tokens/src/Colors/MorningstarColor/MorningstarColor.stories.tsx
@@ -1,5 +1,6 @@
 /* eslint-disable react/display-name */
 import React from 'react';
+import { ControlTypes } from '@component-controls/core';
 import { MorningstarColor, MorningstarColorPalette } from './MorningstarColor';
 import { ColorProps } from '../../types';
 
@@ -15,9 +16,9 @@ export const overview = ({ name, color }: ColorProps) => (
 overview.controls = {
   name: 'Informational',
   color: {
-    type: 'object',
+    type: ControlTypes.OBJECT,
     value: {
-      value: { type: 'color', value: '#f2f2f2' },
+      value: { type: ControlTypes.COLOR, value: '#f2f2f2' },
       sass: '$mds-feedback-color-info',
     },
   },
diff --git a/ui/design-tokens/src/Colors/OPatternColor/OPatternColor.stories.tsx b/ui/design-tokens/src/Colors/OPatternColor/OPatternColor.stories.tsx
index 297cc56bb..7e56e997f 100644
--- a/ui/design-tokens/src/Colors/OPatternColor/OPatternColor.stories.tsx
+++ b/ui/design-tokens/src/Colors/OPatternColor/OPatternColor.stories.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { ControlTypes } from '@component-controls/core';
 import { OPatternColor, OPatternColorPalette } from './OPatternColor';
 import { ColorProps } from '../../types';
 
@@ -12,12 +13,12 @@ export const overview = ({ name, color }: ColorProps) => (
 );
 
 overview.controls = {
-  name: { type: 'text', value: 'Weather' },
+  name: 'Weather',
   color: {
-    type: 'object',
+    type: ControlTypes.OBJECT,
     value: {
-      value: { type: 'color', value: '#990099' },
-      sass: { type: 'text', value: '$weather-color' },
+      value: { type: ControlTypes.COLOR, value: '#990099' },
+      sass: '$weather-color',
     },
   },
 };
diff --git a/ui/design-tokens/src/Colors/PatternFlyColor/PatternFlyColor.stories.tsx b/ui/design-tokens/src/Colors/PatternFlyColor/PatternFlyColor.stories.tsx
index 499ac83d1..1a57b4fe8 100644
--- a/ui/design-tokens/src/Colors/PatternFlyColor/PatternFlyColor.stories.tsx
+++ b/ui/design-tokens/src/Colors/PatternFlyColor/PatternFlyColor.stories.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { ControlTypes } from '@component-controls/core';
 import { PatternFlyColor, PatternFlyColorPalette } from './PatternFlyColor';
 import { ColorProps } from '../../types';
 
@@ -13,9 +14,9 @@ export const overview = ({ name, color }: ColorProps) => (
 
 overview.controls = {
   color: {
-    type: 'object',
+    type: ControlTypes.OBJECT,
     value: {
-      value: { type: 'color', value: '#1d70b8' },
+      value: { type: ControlTypes.COLOR, value: '#1d70b8' },
       css: '--pf-global--link--Color',
       description:
         'This color is used as a standard text and icon color as well as a hover state color for icon buttons. It is most commonly used as a text color for many components and application screens.',
diff --git a/ui/design-tokens/src/Colors/PhotonColor/PhotonColor.stories.tsx b/ui/design-tokens/src/Colors/PhotonColor/PhotonColor.stories.tsx
index 1b3f34c3e..a15a12759 100644
--- a/ui/design-tokens/src/Colors/PhotonColor/PhotonColor.stories.tsx
+++ b/ui/design-tokens/src/Colors/PhotonColor/PhotonColor.stories.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { ControlTypes } from '@component-controls/core';
 import { PhotonColor, PhotonColorPalette } from './PhotonColor';
 import { ColorProps } from '../../types';
 
@@ -13,7 +14,7 @@ export const overview = ({ name, color }: ColorProps) => (
 
 overview.controls = {
   name: 'Orange 50',
-  color: { type: 'color', value: '#ff9400' },
+  color: { type: ControlTypes.COLOR, value: '#ff9400' },
 };
 
 export const palette = () => (
diff --git a/ui/design-tokens/src/Colors/PrimerColor/PrimerColor.stories.tsx b/ui/design-tokens/src/Colors/PrimerColor/PrimerColor.stories.tsx
index 3df086287..efef1103c 100644
--- a/ui/design-tokens/src/Colors/PrimerColor/PrimerColor.stories.tsx
+++ b/ui/design-tokens/src/Colors/PrimerColor/PrimerColor.stories.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { ControlTypes } from '@component-controls/core';
 import { PrimerColor, PrimerColorPalette } from './PrimerColor';
 import { ColorProps } from '../../types';
 
@@ -14,11 +15,11 @@ export const overview = ({ name, color }: ColorProps) => (
 overview.controls = {
   name: 'Yellow',
   color: {
-    type: 'object',
+    type: ControlTypes.OBJECT,
     value: {
-      value: { type: 'color', value: '#ffd33d' },
+      value: { type: ControlTypes.COLOR, value: '#ffd33d' },
       sass: '$yellow-500',
-      primary: { type: 'boolean', value: true },
+      primary: { type: ControlTypes.BOOLEAN, value: true },
     },
   },
 };
diff --git a/ui/design-tokens/src/Colors/SeedsColor/SeedsColor.stories.tsx b/ui/design-tokens/src/Colors/SeedsColor/SeedsColor.stories.tsx
new file mode 100644
index 000000000..bcde654f8
--- /dev/null
+++ b/ui/design-tokens/src/Colors/SeedsColor/SeedsColor.stories.tsx
@@ -0,0 +1,68 @@
+import React from 'react';
+import { ControlTypes } from '@component-controls/core';
+import { SeedsColor, SeedsColorPalette } from './SeedsColor';
+import { ColorProps } from '../../types';
+
+export default {
+  title: 'Design Tokens/Colors/SeedsColor',
+  component: SeedsColor,
+};
+
+export const overview = ({ name, color }: ColorProps) => (
+  <SeedsColor name={name} color={color} />
+);
+
+overview.controls = {
+  name: 'green.700',
+  color: {
+    type: ControlTypes.OBJECT,
+
+    value: {
+      variants: {
+        type: ControlTypes.OPTIONS,
+        display: 'inline-check',
+        options: ['green.700', 'green.800'],
+        value: ['green.700', 'green.800'],
+      },
+      value: { type: ControlTypes.COLOR, value: '#0ca750' },
+      description:
+        'Green 700 is the core of our brand identity. Use Green 700 for primary actions and buttons, links, for indicating progress and representing authentication.',
+    },
+  },
+};
+
+export const palette = () => (
+  <SeedsColorPalette
+    palette={{
+      'Purple.700': {
+        value: '#6f5ed3',
+        variants: ['purple.700'],
+        description:
+          'Use Purple 700 to highlight or draw attention to important information that has no interaction. When using our primary purple with our primary green, green should always be the dominant color of the two.',
+      },
+
+      'Aqua.1100': {
+        value: '#002838',
+        variants: ['aqua.1100'],
+        description:
+          'Use Aqua 1100 for dark backgrounds and solid drop shadows. Aqua 1100 should not be used on text.',
+      },
+      'Aqua.600': {
+        value: '#0797ae',
+        variants: ['aqua.600'],
+        description:
+          'Use Aqua 600 for in-app text links and to highlight or draw attention to important information that has no interaction. Aqua is also the primary spot illustration color and is used for color blocking.',
+      },
+      Primary: {
+        value: '#2079c3',
+        name: 'Primary CTA',
+        variants: ['cta.primary', 'blue.700'],
+      },
+      Secondary: {
+        value: '#364141',
+        name: 'Secondary CTA',
+        variants: ['cta.scondary', 'neutral.800'],
+      },
+    }}
+  />
+);
diff --git a/ui/design-tokens/src/Colors/SeedsColor/SeedsColor.tsx b/ui/design-tokens/src/Colors/SeedsColor/SeedsColor.tsx
new file mode 100644
index 000000000..0b446eed2
--- /dev/null
+++ b/ui/design-tokens/src/Colors/SeedsColor/SeedsColor.tsx
@@ -0,0 +1,155 @@
+/** @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, mostReadable } from '../utils';
+import { ColorBlockProps, ColorValue } from '../../types';
+import { GridContainerProps, GridContainer } from '../../components';
+
+/**
+ * Color item displaying the color as a block wuth rgb and cmyk colors. Below the block are displayed the color name and description.
+ * Design inspired from SproutSocial's [Seed](https://seeds.sproutsocial.com/visual/color/).
+ */
+export const SeedsColor: FC<ColorBlockProps> = ({ name, color }) => {
+  const colorObj: ColorValue =
+    typeof color === 'string' ? { value: color } : color;
+  const {
+    value: colorValue,
+    name: colorName,
+    description,
+    variants,
+  } = colorObj;
+  const { hex, rgba } = colorToStr(colorValue);
+  const { color: cmyk } = new simpleColorConverter({
+    rgba,
+    to: 'cmyk',
+  });
+  const textColor = mostReadable(hex);
+  return (
+    <div
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        minWidth: 180,
+        maxWidth: 450,
+        fontSize: 0,
+      }}
+    >
+      <CopyContainer value={hex} name={name}>
+        <div
+          sx={{
+            position: 'relative',
+            color: textColor,
+            fontSize: '11px',
+            bg: colorValue,
+            ':after': {
+              content: '""',
+              display: 'block',
+              paddingBottom: '50%',
+            },
+          }}
+        >
+          <div
+            sx={{
+              position: 'absolute',
+              left: 2,
+              right: 2,
+              bottom: 2,
+              display: 'flex',
+              flexDirection: 'row',
+            }}
+          >
+            <div sx={{ mr: 2 }}>
+              {`RGB: ${rgba.r},${rgba.g},${rgba.b}${
+                rgba.a !== 1 ? `,${rgba.a}` : ''
+              }`}
+            </div>
+            <div>{`CMYK: ${cmyk.c},${cmyk.m},${cmyk.y},${cmyk.k}`}</div>
+          </div>
+        </div>
+      </CopyContainer>
+      <div
+        sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          lineHeight: '16px',
+          bg: 'background',
+          py: 3,
+        }}
+      >
+        <div
+          sx={{
+            display: 'flex',
+            flexDirection: 'column',
+          }}
+        >
+          {colorName && (
+            <div sx={{ fontSize: 2, fontWeight: 'bold', mb: 2 }}>
+              {colorName}
+            </div>
+          )}
+          {variants && (
+            <div
+              sx={{
+                display: 'flex',
+                flexDirection: 'row',
+                mb: 2,
+                flexWrap: 'wrap',
+              }}
+            >
+              {variants.map(variant => (
+                <CopyContainer
+                  key={`seeds_color_${variant}`}
+                  value={hex}
+                  name={variant}
+                >
+                  <div
+                    sx={{
+                      display: 'flex',
+                      flexDirection: 'row',
+                      alignItems: 'center',
+                      p: 2,
+                      mr: 2,
+                      borderRadius: 8,
+                      border: (t: Theme) => `1px solid  ${t.colors?.shadow}`,
+                    }}
+                  >
+                    <div
+                      sx={{
+                        borderRadius: '50%',
+                        height: '12px',
+                        width: '12px',
+                        bg: colorValue,
+                        mr: 2,
+                      }}
+                    />
+                    <div>{variant}</div>
+                  </div>
+                </CopyContainer>
+              ))}
+            </div>
+          )}
+
+          <p sx={{ my: 0 }}>{description}</p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+/**
+ *
+ * palette displayed with SeedsColor items
+ * using a css grid for the dsplay
+ */
+export const SeedsColorPalette: FC<Omit<
+  GridContainerProps,
+  'children'
+>> = props => (
+  <GridContainer {...props}>
+    {({ name, value }) => (
+      <SeedsColor key={`color_item_${name}}`} name={name} color={value} />
+    )}
+  </GridContainer>
+);
diff --git a/ui/design-tokens/src/Colors/SeedsColor/index.ts b/ui/design-tokens/src/Colors/SeedsColor/index.ts
new file mode 100644
index 000000000..538a616dc
--- /dev/null
+++ b/ui/design-tokens/src/Colors/SeedsColor/index.ts
@@ -0,0 +1 @@
+export * from './SeedsColor';
diff --git a/ui/design-tokens/src/Colors/index.ts b/ui/design-tokens/src/Colors/index.ts
index f222df440..da9be0c40 100644
--- a/ui/design-tokens/src/Colors/index.ts
+++ b/ui/design-tokens/src/Colors/index.ts
@@ -26,3 +26,4 @@ export * from './PajamasColor';
 export * from './PatternFlyColor';
 export * from './PhotonColor';
 export * from './PrimerColor';
+export * from './SeedsColor';
diff --git a/ui/design-tokens/src/types.ts b/ui/design-tokens/src/types.ts
index 4b7e31d4b..c050e44ac 100644
--- a/ui/design-tokens/src/types.ts
+++ b/ui/design-tokens/src/types.ts
@@ -40,7 +40,10 @@ export type ColorValue =
        * for color palettes were each color palette has a primary color
        */
       primary?: boolean;
-
+      /**
+       * array of color name variations
+       */
+      variants?: string[];
       /**
        * custom fields
        */