diff --git a/libs/tailwindcss-config/src/theme.js b/libs/tailwindcss-config/src/theme.js
index 260b78a8e..b4a5f89f3 100644
--- a/libs/tailwindcss-config/src/theme.js
+++ b/libs/tailwindcss-config/src/theme.js
@@ -16,6 +16,7 @@ module.exports = {
       pink: '#FF2D5E',
       green: '#00F780',
     },
+    'vega-yellow-dark': '#474B0A', // yellow 0.3 opacity on black
     intent: {
       danger: '#FF261A',
       warning: '#FF7A1A',
@@ -60,6 +61,31 @@ module.exports = {
     32: '2rem',
     44: '2.75rem',
   },
+  opacity: {
+    0: '0',
+    2: '0.02',
+    5: '0.05',
+    10: '0.1',
+    15: '0.15',
+    20: '0.2',
+    25: '0.25',
+    30: '0.3',
+    35: '0.35',
+    40: '0.4',
+    45: '0.45',
+    50: '0.5',
+    55: '0.55',
+    60: '0.6',
+    65: '0.65',
+    70: '0.7',
+    75: '0.75',
+    80: '0.8',
+    85: '0.85',
+    90: '0.9',
+    95: '0.95',
+    99: '0.98',
+    100: '1',
+  },
   /*
   backgroundColor: ({ theme }) => ({
     transparent: 'transparent',
@@ -131,3 +157,31 @@ module.exports = {
     },
   },
 };
+
+/*
+trueGray: {
+  50: '#fafafa', 0.02, 0.98
+  100: '#f5f5f5', 0.04, 0.96
+  200: '#e5e5e5', 0.10, 0.9
+  300: '#d4d4d4', 0.17, 0.83
+  400: '#a3a3a3', 0.36, 0.64
+  500: '#737373', 0.55, 0.45
+  600: '#525252', 0.68, 0.32
+  700: '#404040', 0.75, 0.25
+  800: '#262626', 0.85, 0.15
+  900: '#171717', 0.9, 0.1
+}
+
+/*
+contrasts on #FFF
+rgba(0,0,0,0.768) or #595959 7:1
+rgba(0,0,0,0.7019) or #767676  4.5:1
+rgba(0,0,0,0.63) or #949494 3:1
+*/
+
+/*
+
+contrasts on #F2F2F2 (which is rgba(0,0,0,0.5))
+rgba(0,0,0,0.8636) or #595959 7:1
+
+*/
diff --git a/libs/ui-toolkit/.storybook/preview.js b/libs/ui-toolkit/.storybook/preview.js
index a1851a064..6258bc80b 100644
--- a/libs/ui-toolkit/.storybook/preview.js
+++ b/libs/ui-toolkit/.storybook/preview.js
@@ -11,14 +11,19 @@ export const parameters = {
 };
 
 export const decorators = [
-  (Story) => (
-    <div className="text-body">
-      <div className="dark bg-black p-16">
+  (Story, context) =>
+    context.parameters.themes === false ? (
+      <div className="text-body">
         <Story />
       </div>
-      <div className="p-16">
-        <Story />
+    ) : (
+      <div className="text-body">
+        <div className="dark bg-black p-16">
+          <Story />
+        </div>
+        <div className="p-16">
+          <Story />
+        </div>
       </div>
-    </div>
-  ),
+    ),
 ];
diff --git a/libs/ui-toolkit/src/components/button/Button.tsx b/libs/ui-toolkit/src/components/button/Button.tsx
index d21426271..118681adb 100644
--- a/libs/ui-toolkit/src/components/button/Button.tsx
+++ b/libs/ui-toolkit/src/components/button/Button.tsx
@@ -28,7 +28,7 @@ export function Button({
       'inline-flex',
       'items-center',
       'justify-center',
-      'bg-clip-padding',
+      // 'bg-clip-padding',
       'box-border',
       'h-28',
       'border',
@@ -71,18 +71,20 @@ export function Button({
       'bg-vega-yellow dark:bg-vega-yellow': variant === 'accent',
       'border-transparent dark:border-transparent':
         variant === 'accent' || variant === 'inline',
-      'hover:bg-vega-yellow/30 dark:hover:bg-vega-yellow/30':
+      'hover:bg-vega-yellow-dark dark:hover:bg-vega-yellow/30':
         variant === 'accent',
+      'hover:text-white dark:hover:text-white': variant === 'accent',
 
       'pl-4': variant === 'inline',
       'pr-4': variant === 'inline',
       'border-0': variant === 'inline',
       underline: variant === 'inline',
       'hover:no-underline': variant === 'inline',
-      'hover:border-transparent': variant === 'inline',
-      'active:border-transparent': variant === 'inline',
-      'active:text-vega-yellow dark:active:text-vega-yellow':
+      'hover:border-transparent dark:hover:border-transparent':
         variant === 'inline',
+      'active:border-transparent dark:active:border-transparent':
+        variant === 'inline',
+      'active:text-black dark:active:text-vega-yellow': variant === 'inline',
       'text-black/95 dark:text-white/95': variant === 'inline',
       'hover:text-black hover:dark:text-white': variant === 'inline',
 
diff --git a/libs/ui-toolkit/src/components/input/input.tsx b/libs/ui-toolkit/src/components/input/input.tsx
index 69b25aac8..8f92038f2 100644
--- a/libs/ui-toolkit/src/components/input/input.tsx
+++ b/libs/ui-toolkit/src/components/input/input.tsx
@@ -37,7 +37,7 @@ export const inputClassNames = ({
     {
       'pl-8': !className?.match(/(^| )p(l|x)-\d+( |$)/),
       'pr-8': !className?.match(/(^| )p(r|x)-\d+( |$)/),
-      'border-vega-pink': hasError,
+      'border-vega-pink dark:border-vega-pink': hasError,
     },
     className
   );
diff --git a/libs/ui-toolkit/src/primitives/colors.stories.mdx b/libs/ui-toolkit/src/primitives/colors.stories.mdx
index 3654d2b5c..56031e003 100644
--- a/libs/ui-toolkit/src/primitives/colors.stories.mdx
+++ b/libs/ui-toolkit/src/primitives/colors.stories.mdx
@@ -23,27 +23,18 @@ full colour palette [here](https://tailwindcss.com/docs/customizing-colors/#defa
   <ColorItem
     title="theme.color.white"
     subtitle="White"
-    colors={[theme.colors.white.DEFAULT]}
+    colors={[theme.colors.white]}
   />
   <ColorItem
     title="theme.color.black"
     subtitle="Black"
-    colors={[theme.colors.black.DEFAULT]}
+    colors={[theme.colors.black]}
   />
   <ColorItem
     title="theme.color.coral"
     subtitle="Coral"
     colors={[theme.colors.coral]}
   />
-  <ColorItem
-    title="theme.color.neutral"
-    subtitle="Neutral"
-    colors={{
-      593: theme.colors.neutral[593],
-      753: theme.colors.neutral[753],
-      800: theme.colors.neutral[800],
-    }}
-  />
 </ColorPalette>
 
 ### Vega
@@ -78,7 +69,6 @@ full colour palette [here](https://tailwindcss.com/docs/customizing-colors/#defa
     title="theme.color.backgroundColor"
     subtitle="Intent backgroundColor"
     colors={{
-      dark: theme.colors.neutral[753],
       black: theme.colors.black.DEFAULT,
       white: theme.colors.white.DEFAULT,
       danger: theme.colors['intent-background'].danger,
diff --git a/libs/ui-toolkit/src/utils/contrast.stories.tsx b/libs/ui-toolkit/src/utils/contrast.stories.tsx
new file mode 100644
index 000000000..4be7d682f
--- /dev/null
+++ b/libs/ui-toolkit/src/utils/contrast.stories.tsx
@@ -0,0 +1,265 @@
+import { Story, Meta } from '@storybook/react';
+
+interface ContrastCheckerProps {
+  backgrounds: string[];
+  foregrounds: string[];
+  backgroundColor: string;
+}
+
+const ContrastChecker = ({
+  backgrounds,
+  foregrounds,
+  backgroundColor,
+}: ContrastCheckerProps) => (
+  <div style={{ backgroundColor }}>
+    {backgrounds.map((backgroundColor) => (
+      <div key={backgroundColor} style={{ backgroundColor, margin: '16px' }}>
+        {foregrounds.map((color) => (
+          <div
+            id={`${backgroundColor}-${color}`}
+            style={{ color, padding: '8px' }}
+            key={color}
+          >
+            {color} on {backgroundColor}
+          </div>
+        ))}
+      </div>
+    ))}
+  </div>
+);
+
+export default {
+  component: ContrastChecker,
+  title: 'Primitives/Contrast',
+  parameters: { themes: false },
+} as Meta;
+
+const Template: Story = (args) => (
+  <ContrastChecker {...(args as ContrastCheckerProps)} />
+);
+
+export const GrayAlpha = Template.bind({});
+GrayAlpha.args = {
+  backgroundColor: 'white',
+  backgrounds: [
+    'white',
+    ' rgba(0,0,0,0.02)',
+    ' rgba(0,0,0,0.05)',
+    ' rgba(0,0,0,0.10)',
+    ' rgba(0,0,0,0.15)',
+    ' rgba(0,0,0,0.20)',
+    ' rgba(0,0,0,0.25)',
+    ' rgba(0,0,0,0.30)',
+  ],
+  foregrounds: [
+    'black',
+    ' rgba(0,0,0,0.98)',
+    ' rgba(0,0,0,0.95)',
+    ' rgba(0,0,0,0.90)',
+    ' rgba(0,0,0,0.85)',
+    ' rgba(0,0,0,0.80)',
+    ' rgba(0,0,0,0.75)',
+    ' rgba(0,0,0,0.70)',
+    ' rgba(0,0,0,0.65)',
+    ' rgba(0,0,0,0.60)',
+    ' rgba(0,0,0,0.55)',
+    ' rgba(0,0,0,0.50)',
+  ],
+};
+
+export const GrayAlphaDark = Template.bind({});
+GrayAlphaDark.args = {
+  backgroundColor: 'black',
+  backgrounds: [
+    'black',
+    ' rgba(255,255,255,0.02)',
+    ' rgba(255,255,255,0.05)',
+    ' rgba(255,255,255,0.10)',
+    ' rgba(255,255,255,0.15)',
+    ' rgba(255,255,255,0.20)',
+    ' rgba(255,255,255,0.25)',
+    ' rgba(255,255,255,0.30)',
+  ],
+  foregrounds: [
+    'white',
+    ' rgba(255,255,255,0.98)',
+    ' rgba(255,255,255,0.95)',
+    ' rgba(255,255,255,0.90)',
+    ' rgba(255,255,255,0.85)',
+    ' rgba(255,255,255,0.80)',
+    ' rgba(255,255,255,0.75)',
+    ' rgba(255,255,255,0.70)',
+    ' rgba(255,255,255,0.65)',
+    ' rgba(255,255,255,0.60)',
+    ' rgba(255,255,255,0.55)',
+    ' rgba(255,255,255,0.50)',
+  ],
+};
+
+export const VegaYellowBackground = Template.bind({});
+VegaYellowBackground.args = {
+  backgroundColor: 'white',
+  backgrounds: [
+    'rgba(237, 255, 34)',
+    'rgba(237, 255, 34, 0.98)',
+    'rgba(237, 255, 34, 0.95)',
+    'rgba(237, 255, 34, 0.90)',
+    'rgba(237, 255, 34, 0.85)',
+    'rgba(237, 255, 34, 0.80)',
+    'rgba(237, 255, 34, 0.75)',
+    'rgba(237, 255, 34, 0.70)',
+    'rgba(237, 255, 34, 0.65)',
+    'rgba(237, 255, 34, 0.60)',
+  ],
+  foregrounds: [
+    'black',
+    ' rgba(0,0,0,0.98)',
+    ' rgba(0,0,0,0.95)',
+    ' rgba(0,0,0,0.90)',
+    ' rgba(0,0,0,0.85)',
+    ' rgba(0,0,0,0.80)',
+    ' rgba(0,0,0,0.75)',
+    ' rgba(0,0,0,0.70)',
+    ' rgba(0,0,0,0.65)',
+    ' rgba(0,0,0,0.60)',
+    ' rgba(0,0,0,0.55)',
+    ' rgba(0,0,0,0.50)',
+  ],
+};
+
+export const VegaYellowBackgroundDark = Template.bind({});
+VegaYellowBackgroundDark.args = {
+  backgroundColor: 'black',
+  backgrounds: [
+    'rgba(237, 255, 34)',
+    'rgba(237, 255, 34, 0.98)',
+    'rgba(237, 255, 34, 0.95)',
+    'rgba(237, 255, 34, 0.90)',
+    'rgba(237, 255, 34, 0.85)',
+    'rgba(237, 255, 34, 0.80)',
+    'rgba(237, 255, 34, 0.75)',
+    'rgba(237, 255, 34, 0.70)',
+    'rgba(237, 255, 34, 0.65)',
+    'rgba(237, 255, 34, 0.60)',
+    'rgba(237, 255, 34, 0.55)',
+    'rgba(237, 255, 34, 0.50)',
+    'rgba(237, 255, 34, 0.45)',
+    'rgba(237, 255, 34, 0.40)',
+    'rgba(237, 255, 34, 0.35)',
+    'rgba(237, 255, 34, 0.30)',
+    'rgba(237, 255, 34, 0.25)',
+  ],
+  foregrounds: [
+    'black',
+    ' rgba(0,0,0,0.98)',
+    ' rgba(0,0,0,0.95)',
+    ' rgba(0,0,0,0.90)',
+    ' rgba(0,0,0,0.85)',
+    ' rgba(0,0,0,0.80)',
+    ' rgba(0,0,0,0.75)',
+    ' rgba(0,0,0,0.70)',
+    ' rgba(0,0,0,0.65)',
+    ' rgba(0,0,0,0.60)',
+    ' rgba(0,0,0,0.55)',
+    ' rgba(0,0,0,0.50)',
+  ],
+};
+
+export const VegaYellowBackgroundDarkWhiteText = Template.bind({});
+VegaYellowBackgroundDarkWhiteText.args = {
+  backgroundColor: 'black',
+  backgrounds: [
+    'rgba(237, 255, 34)',
+    'rgba(237, 255, 34, 0.98)',
+    'rgba(237, 255, 34, 0.95)',
+    'rgba(237, 255, 34, 0.90)',
+    'rgba(237, 255, 34, 0.85)',
+    'rgba(237, 255, 34, 0.80)',
+    'rgba(237, 255, 34, 0.75)',
+    'rgba(237, 255, 34, 0.70)',
+    'rgba(237, 255, 34, 0.65)',
+    'rgba(237, 255, 34, 0.60)',
+    'rgba(237, 255, 34, 0.55)',
+    'rgba(237, 255, 34, 0.50)',
+    'rgba(237, 255, 34, 0.45)',
+    'rgba(237, 255, 34, 0.40)',
+    'rgba(237, 255, 34, 0.35)',
+    'rgba(237, 255, 34, 0.30)',
+    'rgba(237, 255, 34, 0.25)',
+  ],
+  foregrounds: [
+    'white',
+    ' rgba(255, 255, 255, 0.98)',
+    ' rgba(255, 255, 255, 0.95)',
+    ' rgba(255, 255, 255, 0.90)',
+    ' rgba(255, 255, 255, 0.85)',
+    ' rgba(255, 255, 255, 0.80)',
+    ' rgba(255, 255, 255, 0.75)',
+    ' rgba(255, 255, 255, 0.70)',
+    ' rgba(255, 255, 255, 0.65)',
+    ' rgba(255, 255, 255, 0.60)',
+    ' rgba(255, 255, 255, 0.55)',
+    ' rgba(255, 255, 255, 0.50)',
+  ],
+};
+
+export const VegaYellowColor = Template.bind({});
+VegaYellowColor.args = {
+  backgroundColor: 'black',
+  backgrounds: [
+    'white',
+    'rgba(255,255,255,0.98)',
+    ' rgba(255,255,255,0.95)',
+    ' rgba(255,255,255.90)',
+    ' rgba(255,255,255,0.85)',
+    ' rgba(255,255,255,0.80)',
+    ' rgba(255,255,255,0.75)',
+    ' rgba(255,255,255,0.70)',
+    ' rgba(255,255,255,0.65)',
+    ' rgba(255,255,255,0.60)',
+    ' rgba(255,255,255,0.55)',
+    ' rgba(255,255,255,0.50)',
+    ' rgba(255,255,255,0.45)',
+    ' rgba(255,255,255,0.40)',
+    ' rgba(255,255,255,0.35)',
+  ],
+  foregrounds: [
+    '#edff22',
+    '#ecff1c',
+    '#ebff13',
+    '#eaff05',
+    '#e1f500',
+    '#d4e700',
+    '#c7d800',
+    '#b9ca00',
+    '#acbb00',
+    '#9fad00',
+    '#929e00',
+    '#849000',
+    '#778200',
+    '#6f7900',
+    '#6a7300',
+    '#5c6500',
+    '#4f5600',
+  ],
+};
+
+export const VegaYellowColorDark = Template.bind({});
+VegaYellowColorDark.args = {
+  backgroundColor: 'white',
+  backgrounds: [
+    'black',
+    ' rgba(0,0,0,0.98)',
+    ' rgba(0,0,0,0.95)',
+    ' rgba(0,0,0,0.90)',
+    ' rgba(0,0,0,0.85)',
+    ' rgba(0,0,0,0.80)',
+    ' rgba(0,0,0,0.75)',
+    ' rgba(0,0,0,0.70)',
+    ' rgba(0,0,0,0.65)',
+    ' rgba(0,0,0,0.60)',
+    ' rgba(0,0,0,0.55)',
+    ' rgba(0,0,0,0.50)',
+  ],
+  foregrounds: ['#edff22'],
+};