diff --git a/apps/token/src/components/locked-progress/locked-progress.tsx b/apps/token/src/components/locked-progress/locked-progress.tsx
index 16710c093..73c366ac0 100644
--- a/apps/token/src/components/locked-progress/locked-progress.tsx
+++ b/apps/token/src/components/locked-progress/locked-progress.tsx
@@ -72,8 +72,8 @@ export const LockedProgress = ({
   unlocked,
   leftLabel,
   rightLabel,
-  leftColor = Colors.vega.pink,
-  rightColor = Colors.vega.green,
+  leftColor = Colors.vega.pink.DEFAULT,
+  rightColor = Colors.vega.green.DEFAULT,
   decimals = 2,
 }: LockedProgressProps) => {
   const lockedPercentage = React.useMemo(() => {
diff --git a/apps/token/src/hooks/use-animate-value.ts b/apps/token/src/hooks/use-animate-value.ts
index e2a769081..f18a1d051 100644
--- a/apps/token/src/hooks/use-animate-value.ts
+++ b/apps/token/src/hooks/use-animate-value.ts
@@ -30,9 +30,12 @@ export function useAnimateValue(
   ) {
     elRef.current?.animate(
       [
-        { backgroundColor: customColors.vega.pink, color: colors.white },
         {
-          backgroundColor: customColors.vega.pink,
+          backgroundColor: customColors.vega.pink.DEFAULT,
+          color: colors.white,
+        },
+        {
+          backgroundColor: customColors.vega.pink.DEFAULT,
           color: colors.white,
           offset: 0.8,
         },
@@ -53,11 +56,11 @@ export function useAnimateValue(
     elRef.current?.animate(
       [
         {
-          backgroundColor: customColors.vega.green,
+          backgroundColor: customColors.vega.green.DEFAULT,
           color: colors.white,
         },
         {
-          backgroundColor: customColors.vega.green,
+          backgroundColor: customColors.vega.green.DEFAULT,
           color: colors.white,
           offset: 0.8,
         },
diff --git a/apps/token/src/routes/tranches/tranche-progress.tsx b/apps/token/src/routes/tranches/tranche-progress.tsx
index fb970e685..5b902bc8d 100644
--- a/apps/token/src/routes/tranches/tranche-progress.tsx
+++ b/apps/token/src/routes/tranches/tranche-progress.tsx
@@ -29,7 +29,7 @@ export const TrancheProgress = ({
         <span className="tranches__progress-title">{t('Locked')}</span>
         <ProgressBar
           width={220}
-          color={Colors.vega.pink}
+          color={Colors.vega.pink.DEFAULT}
           percentage={lockedPercentage}
         />
         <span className="tranches__progress-numbers">
@@ -40,7 +40,7 @@ export const TrancheProgress = ({
         <span className="tranches__progress-title">{t('Redeemed')}</span>
         <ProgressBar
           width={220}
-          color={Colors.vega.green}
+          color={Colors.vega.green.DEFAULT}
           percentage={removedPercentage}
         />
         <span className="tranches__progress-numbers">
diff --git a/apps/token/src/routes/tranches/vesting-chart.tsx b/apps/token/src/routes/tranches/vesting-chart.tsx
index c52e9172f..c23bb966d 100644
--- a/apps/token/src/routes/tranches/vesting-chart.tsx
+++ b/apps/token/src/routes/tranches/vesting-chart.tsx
@@ -34,10 +34,10 @@ export const VestingChart = () => {
         <AreaChart data={data}>
           <defs>
             {[
-              ['pink', Colors.vega.pink],
-              ['green', Colors.vega.green],
+              ['pink', Colors.vega.pink.DEFAULT],
+              ['green', Colors.vega.green.DEFAULT],
               ['orange', Colors.warning],
-              ['yellow', Colors.vega.yellow],
+              ['yellow', Colors.vega.yellow.DEFAULT],
             ].map(([key, color]) => (
               <linearGradient key={key} id={key} x1="0" y1="0" x2="0" y2="1">
                 <stop offset="0%" stopColor={color} stopOpacity={0.85} />
@@ -97,7 +97,7 @@ export const VestingChart = () => {
             dot={false}
             type="linear"
             dataKey="team"
-            stroke={Colors.vega.pink}
+            stroke={Colors.vega.pink.DEFAULT}
             fill="url(#pink)"
             yAxisId={0}
             strokeWidth={2}
@@ -109,7 +109,7 @@ export const VestingChart = () => {
             dot={false}
             type="monotone"
             dataKey="earlyInvestors"
-            stroke={Colors.vega.green}
+            stroke={Colors.vega.green.DEFAULT}
             fill="url(#green)"
             yAxisId={0}
             strokeWidth={2}
@@ -121,7 +121,7 @@ export const VestingChart = () => {
             dot={false}
             type="monotone"
             dataKey="publicSale"
-            stroke={Colors.vega.yellow}
+            stroke={Colors.vega.yellow.DEFAULT}
             fill="url(#yellow)"
             yAxisId={0}
             strokeWidth={2}
diff --git a/apps/trading/pages/styles.css b/apps/trading/pages/styles.css
index c6f716e2d..a67f00a4d 100644
--- a/apps/trading/pages/styles.css
+++ b/apps/trading/pages/styles.css
@@ -10,49 +10,49 @@ body,
 
 /* Styles for allotment */
 html {
-  --focus-border: theme('colors.vega.pink');
-  --separator-border: theme('colors.neutral.300');
-  --pennant-color-danger: theme('colors.vega.pink');
+  --focus-border: theme('colors.vega.pink.500');
+  --separator-border: theme('colors.vega.light.200');
+  --pennant-color-danger: theme('colors.vega.pink.500');
 }
 
 html.dark {
-  --focus-border: theme('colors.vega.yellow');
-  --separator-border: theme('colors.neutral.600');
+  --focus-border: theme('colors.vega.yellow.500');
+  --separator-border: theme('colors.vega.dark.200');
 }
 
 .border-default {
-  @apply border-neutral-300 dark:border-neutral-600;
+  @apply border-vega-light-200 dark:border-vega-dark-200;
 }
 
 /* Styles for charts */
 html [data-theme='dark'] {
-  --pennant-color-danger: theme('colors.vega.pink');
+  --pennant-color-danger: theme('colors.vega.pink.DEFAULT');
 
   /* candles */
-  --pennant-color-buy-fill: theme('colors.vega.green-data-dark');
-  --pennant-color-buy-stroke: theme('colors.vega.green');
+  --pennant-color-buy-fill: theme('colors.vega.green.650');
+  --pennant-color-buy-stroke: theme('colors.vega.green.500');
   /* sell candles only use stroke as the candle is solid (without border) */
-  --pennant-color-sell-stroke: theme('colors.vega.pink');
+  --pennant-color-sell-stroke: theme('colors.vega.pink.500');
 
   /* depth chart */
-  --pennant-color-depth-buy-fill: theme('colors.vega.green-data-dark');
-  --pennant-color-depth-buy-stroke: theme('colors.vega.green');
-  --pennant-color-depth-sell-fill: theme('colors.vega.pink-data-dark');
-  --pennant-color-depth-sell-stroke: theme('colors.vega.pink');
+  --pennant-color-depth-buy-fill: theme('colors.vega.green.650');
+  --pennant-color-depth-buy-stroke: theme('colors.vega.green.500');
+  --pennant-color-depth-sell-fill: theme('colors.vega.pink.650');
+  --pennant-color-depth-sell-stroke: theme('colors.vega.pink.500');
 }
 
 html [data-theme='light'] {
-  --pennant-color-danger: theme('colors.vega.pink');
+  --pennant-color-danger: theme('colors.vega.pink.500');
 
   /* candles */
-  --pennant-color-buy-fill: theme('colors.vega.green-data-light');
-  --pennant-color-buy-stroke: theme('colors.vega.green-dark');
+  --pennant-color-buy-fill: theme('colors.vega.green.400');
+  --pennant-color-buy-stroke: theme('colors.vega.green.550');
   /* sell candles only use stroke as the candle is solid (without border) */
-  --pennant-color-sell-stroke: theme('colors.vega.pink-data-light');
+  --pennant-color-sell-stroke: theme('colors.vega.pink.400');
 
   /* depth chart */
-  --pennant-color-depth-buy-fill: theme('colors.vega.green-data-light');
-  --pennant-color-depth-buy-stroke: theme('colors.vega.green-dark');
-  --pennant-color-depth-sell-fill: theme('colors.vega.pink-data-light');
-  --pennant-color-depth-sell-stroke: theme('colors.vega.pink-dark');
+  --pennant-color-depth-buy-fill: theme('colors.vega.green.400');
+  --pennant-color-depth-buy-stroke: theme('colors.vega.green.550');
+  --pennant-color-depth-sell-fill: theme('colors.vega.pink.400');
+  --pennant-color-depth-sell-stroke: theme('colors.vega.pink.550');
 }
diff --git a/libs/react-helpers/src/lib/grid/flash-cell.tsx b/libs/react-helpers/src/lib/grid/flash-cell.tsx
index ce7db8c6b..27b4ffd32 100644
--- a/libs/react-helpers/src/lib/grid/flash-cell.tsx
+++ b/libs/react-helpers/src/lib/grid/flash-cell.tsx
@@ -71,8 +71,8 @@ export const FlashCell = memo(({ children, value }: FlashCellProps) => {
     if (value < previousValue) {
       ref.current?.animate(
         [
-          { color: theme.colors.vega.pink },
-          { color: theme.colors.vega.pink, offset: 0.8 },
+          { color: theme.colors.vega.pink.DEFAULT },
+          { color: theme.colors.vega.pink.DEFAULT, offset: 0.8 },
           { color: 'inherit' },
         ],
         FLASH_DURATION
@@ -80,8 +80,8 @@ export const FlashCell = memo(({ children, value }: FlashCellProps) => {
     } else if (value > previousValue) {
       ref.current?.animate(
         [
-          { color: theme.colors.vega.green },
-          { color: theme.colors.vega.green, offset: 0.8 },
+          { color: theme.colors.vega.green.DEFAULT },
+          { color: theme.colors.vega.green.DEFAULT, offset: 0.8 },
           { color: 'inherit' },
         ],
         FLASH_DURATION
diff --git a/libs/react-helpers/src/lib/grid/size.tsx b/libs/react-helpers/src/lib/grid/size.tsx
index 9245faa4f..50d98654f 100644
--- a/libs/react-helpers/src/lib/grid/size.tsx
+++ b/libs/react-helpers/src/lib/grid/size.tsx
@@ -19,16 +19,16 @@ export const Size = ({
       data-testid="size"
       className={classNames('text-right', {
         // BUY
-        'text-vega-green-dark dark:text-vega-green':
+        'text-vega-green-550 dark:text-vega-green':
           side === Schema.Side.SIDE_BUY && !forceTheme,
-        'text-vega-green-dark':
+        'text-vega-green-550':
           side === Schema.Side.SIDE_BUY && forceTheme === 'light',
         'text-vega-green':
           side === Schema.Side.SIDE_BUY && forceTheme === 'dark',
         // SELL
-        'text-vega-pink-dark dark:text-vega-pink':
+        'text-vega-pink-550 dark:text-vega-pink':
           side === Schema.Side.SIDE_SELL && !forceTheme,
-        'text-vega-pink-dark':
+        'text-vega-pink-550':
           side === Schema.Side.SIDE_SELL && forceTheme === 'light',
         'text-vega-pink':
           side === Schema.Side.SIDE_SELL && forceTheme === 'dark',
diff --git a/libs/react-helpers/src/lib/grid/vol-cell.tsx b/libs/react-helpers/src/lib/grid/vol-cell.tsx
index 1d998f829..d524b5025 100644
--- a/libs/react-helpers/src/lib/grid/vol-cell.tsx
+++ b/libs/react-helpers/src/lib/grid/vol-cell.tsx
@@ -20,8 +20,8 @@ export interface IVolCellProps extends ICellRendererParams {
   valueFormatted: Omit<VolProps, 'value'>;
 }
 
-export const BID_COLOR = tailwind.theme.colors.vega['green'];
-export const ASK_COLOR = tailwind.theme.colors.vega['pink'];
+export const BID_COLOR = tailwind.theme.colors.vega.green.DEFAULT;
+export const ASK_COLOR = tailwind.theme.colors.vega.pink.DEFAULT;
 
 export const Vol = React.memo(
   ({ value, valueFormatted, relativeValue, type, testId }: VolProps) => {
diff --git a/libs/tailwindcss-config/src/theme.js b/libs/tailwindcss-config/src/theme.js
index 55fe092be..6937e8809 100644
--- a/libs/tailwindcss-config/src/theme.js
+++ b/libs/tailwindcss-config/src/theme.js
@@ -10,22 +10,113 @@ module.exports = {
   colors: {
     transparent: 'transparent',
     current: 'currentColor',
+    black: '#000000',
+    white: '#FFFFFF',
     vega: {
-      yellow: '#DFFF0B',
-      'yellow-dark': '#B6DC26',
-      pink: '#FF077F',
-      'pink-data-light': '#FF6AB2',
-      'pink-dark': '#CF0064',
-      'pink-data-dark': '#7A033D',
-      green: '#00F780',
-      'green-data-light': '#85FBC2',
-      'green-dark': '#00D46E',
-      'green-data-dark': '#006333',
-      orange: '#FF7A1A',
-      blue: '#1DA2FB',
+      // YELLOW
+      yellow: {
+        700: '#23290E',
+        650: '#515E1E',
+        600: '#7E932F',
+        550: '#ABC840',
+        DEFAULT: '#D7FB50',
+        500: '#D7FB50',
+        450: '#E0FC75',
+        400: '#E8FD9A',
+        350: '#F0FDBE',
+        300: '#F9FEE3',
+      },
+
+      // GREEN
+      green: {
+        700: '#012915',
+        650: '#015D30',
+        600: '#01914B',
+        550: '#01C566',
+        DEFAULT: '#00F780',
+        500: '#00F780',
+        450: '#37F99B',
+        400: '#6CFAB6',
+        350: '#A1FCD0',
+        300: '#D6FEEB',
+      },
+
+      // BLUE
+      blue: {
+        700: '#01142A',
+        650: '#012C60',
+        600: '#014595',
+        550: '#015ECB',
+        DEFAULT: '#0075FF',
+        500: '#0075FF',
+        450: '#3793FF',
+        400: '#6CAFFF',
+        350: '#A1CCFF',
+        300: '#D6E9FF',
+      },
+
+      // PURPLE
+      purple: {
+        700: '#15072A',
+        650: '#301060',
+        600: '#4B1895',
+        550: '#6620CB',
+        DEFAULT: '#8028FF',
+        500: '#8028FF',
+        450: '#9B56FF',
+        400: '#B683FF',
+        350: '#D0B0FF',
+        300: '#EBDDFF',
+      },
+
+      // PINK
+      pink: {
+        700: '#210215',
+        650: '#600330',
+        600: '#95054B',
+        550: '#CB0666',
+        DEFAULT: '#FF077F',
+        500: '#FF077F',
+        450: '#FF3C9A',
+        400: '#FF70B5',
+        350: '#FFA3D0',
+        300: '#FFD7EA',
+      },
+
+      // ORANGE
+      orange: {
+        700: '#2A1701',
+        650: '#603301',
+        600: '#954F01',
+        550: '#CB6C01',
+        DEFAULT: '#FF8700',
+        500: '#FF8700',
+        450: '#FFA137',
+        400: '#FFBA6C',
+        350: '#FFD3A1',
+        300: '#FFECD6',
+      },
+
+      // DARK
+      dark: {
+        400: '#161616',
+        300: '#262626',
+        200: '#404040',
+        150: '#8B8B8B',
+        100: '#C0C0C0',
+      },
+
+      // LIGHT
+      light: {
+        400: '#F0F0F0',
+        300: '#E9E9E9',
+        200: '#D2D2D2',
+        150: '#939393',
+        100: '#626262',
+      },
     },
     danger: '#FF077F',
-    warning: '#FF7A1A',
+    warning: '#FF8700',
     success: '#00F780',
   },
   fontFamily: {
diff --git a/libs/tailwindcss-config/src/vega-custom-classes.js b/libs/tailwindcss-config/src/vega-custom-classes.js
index 6fb0803ca..d27aaade3 100644
--- a/libs/tailwindcss-config/src/vega-custom-classes.js
+++ b/libs/tailwindcss-config/src/vega-custom-classes.js
@@ -22,17 +22,17 @@ const vegaCustomClasses = plugin(function ({ addUtilities }) {
     },
     '.dark .syntax-highlighter-wrapper .hljs': {
       background: colors.neutral[800],
-      color: theme.colors.vega.green,
+      color: theme.colors.vega.green.DEFAULT,
       border: 0,
     },
     '.syntax-highlighter-wrapper .hljs-literal': {
-      color: theme.colors.vega.pink,
+      color: theme.colors.vega.pink.DEFAULT,
     },
     '.syntax-highlighter-wrapper .hljs-number': {
-      color: theme.colors.vega.orange,
+      color: theme.colors.vega.orange.DEFAULT,
     },
     '.syntax-highlighter-wrapper .hljs-string': {
-      color: theme.colors.vega.blue,
+      color: theme.colors.vega.blue.DEFAULT,
     },
     '.clip-path-rounded': {
       clipPath: 'circle(50%)',
diff --git a/libs/ui-toolkit/src/components/button/button.tsx b/libs/ui-toolkit/src/components/button/button.tsx
index 01f9a0fc7..0f4490635 100644
--- a/libs/ui-toolkit/src/components/button/button.tsx
+++ b/libs/ui-toolkit/src/components/button/button.tsx
@@ -27,20 +27,20 @@ const primary = [
   'text-black',
   'border-vega-yellow',
   'bg-vega-yellow',
-  'enabled:hover:bg-vega-yellow-dark enabled:hover:border-vega-yellow-dark',
-  'enabled:active:bg-vega-yellow-dark enabled:active:border-vega-yellow-dark',
+  'enabled:hover:bg-vega-yellow-550 enabled:hover:border-vega-yellow-550',
+  'enabled:active:bg-vega-yellow-550 enabled:active:border-vega-yellow-550',
 ];
 const secondary = [
   'text-white dark:text-black',
   'border-vega-pink',
-  'dark:bg-vega-pink bg-vega-pink-dark',
+  'dark:bg-vega-pink bg-vega-pink-550',
   'enabled:hover:bg-vega-pink enabled:hover:border-vega-pink',
   'enabled:active:bg-vega-pink enabled:active:border-vega-pink',
 ];
 const ternary = [
   'text-white dark:text-black',
   'border-vega-green',
-  'dark:bg-vega-green bg-vega-green-dark',
+  'dark:bg-vega-green bg-vega-green-550',
   'enabled:hover:bg-vega-green enabled:hover:border-vega-green',
   'enabled:active:bg-vega-green enabled:active:border-vega-green',
 ];
diff --git a/libs/ui-toolkit/src/components/toggle/toggle.tsx b/libs/ui-toolkit/src/components/toggle/toggle.tsx
index c66f53acb..fc5b028c0 100644
--- a/libs/ui-toolkit/src/components/toggle/toggle.tsx
+++ b/libs/ui-toolkit/src/components/toggle/toggle.tsx
@@ -40,9 +40,9 @@ export const Toggle = ({
     {
       'peer-checked:bg-neutral-400 dark:peer-checked:bg-white dark:peer-checked:text-black':
         type === 'primary',
-      'dark:peer-checked:bg-vega-green peer-checked:bg-vega-green-dark':
+      'dark:peer-checked:bg-vega-green peer-checked:bg-vega-green-550':
         type === 'buy',
-      'dark:peer-checked:bg-vega-pink peer-checked:bg-vega-pink-dark':
+      'dark:peer-checked:bg-vega-pink peer-checked:bg-vega-pink-550':
         type === 'sell',
     },
     'peer-checked:text-white dark:peer-checked:text-black',
diff --git a/libs/ui-toolkit/src/primitives/colors.stories.mdx b/libs/ui-toolkit/src/primitives/colors.stories.mdx
index 0681247a6..21d345b82 100644
--- a/libs/ui-toolkit/src/primitives/colors.stories.mdx
+++ b/libs/ui-toolkit/src/primitives/colors.stories.mdx
@@ -14,32 +14,29 @@ import colors from 'tailwindcss/colors';
 
 This project uses Tailwindcss so a lot of colour props are passed in as CSS classes that
 Tailwind applies styling to i.e. `text-blue-500` to use the primary blue. You can find the
-full colour palette [here](https://tailwindcss.com/docs/customizing-colors/#default-color-palette).
+full tailiwnd's colour palette [here](https://tailwindcss.com/docs/customizing-colors/#default-color-palette).
+
+The Vega's colour palette can be found [here](https://www.figma.com/file/8lCQ6iNK3dbw42bIKwGCRk/Foundations?node-id=3750%3A77046)
 
 ## Colours
 
-### Shared
-
-<ColorPalette>
-  <ColorItem title="White" colors={colors.white} />
-  <ColorItem title="Black" colors={colors.black} />
-</ColorPalette>
-
-### Vega
-
 <ColorPalette>
   <ColorItem
-    title="theme.color.vega"
-    subtitle="Vega colors"
-    colors={theme.colors.vega}
+    title="dark"
+    colors={{ ...theme.colors.vega.dark, black: theme.colors.black }}
   />
-</ColorPalette>
-
-### Intent
-
-<ColorPalette>
   <ColorItem
-    title="theme.color[danger|warning|success]"
+    title="light"
+    colors={{ ...theme.colors.vega.light, white: theme.colors.white }}
+  />
+  <ColorItem title="yellow" colors={theme.colors.vega.yellow} />
+  <ColorItem title="green" colors={theme.colors.vega.green} />
+  <ColorItem title="blue" colors={theme.colors.vega.blue} />
+  <ColorItem title="purple" colors={theme.colors.vega.purple} />
+  <ColorItem title="pink" colors={theme.colors.vega.pink} />
+  <ColorItem title="orange" colors={theme.colors.vega.orange} />
+  <ColorItem
+    title="intent"
     colors={{
       danger: theme.colors.danger,
       warning: theme.colors.warning,
@@ -47,3 +44,33 @@ full colour palette [here](https://tailwindcss.com/docs/customizing-colors/#defa
     }}
   />
 </ColorPalette>
+
+# Replacement for legacy shades
+
+<ColorPalette>
+  <ColorItem
+    title="legacy shades"
+    colors={{
+      'vega-yellow-dark': '#B6DC26',      // vega-yellow-dark       -> vega-yellow-550
+      'vega-pink-data-light': '#FF6AB2',  // vega-pink-data-light   -> vega-pink-400
+      'vega-pink-dark': '#CF0064',        // vega-pink-dark         -> vega-pink-550
+      'vega-pink-data-dark': '#7A033D',   // vega-pink-data-dark    -> vega-pink-650
+      'vega-green-data-light': '#85FBC2', // vega-green-data-light  -> vega-green-400
+      'vega-green-dark': '#00D46E',       // vega-green-dark        -> vega-green-550
+      'vega-green-data-dark': '#006333',  // vega-green-data-dark   -> vega-green-650
+    }}
+  />
+
+  <ColorItem
+    title="replacement"
+    colors={{
+      'vega-yellow-550': theme.colors.vega.yellow[550],
+      'vega-pink-400': theme.colors.vega.pink[400],
+      'vega-pink-550': theme.colors.vega.pink[550],
+      'vega-pink-650': theme.colors.vega.pink[650],
+      'vega-green-400': theme.colors.vega.green[400],
+      'vega-green-550': theme.colors.vega.green[550],
+      'vega-green-650': theme.colors.vega.green[650],
+    }}
+  />
+</ColorPalette>