diff --git a/frontend/src/lib/assets/tokens/tokens.json b/frontend/src/lib/assets/tokens/tokens.json
index 61ada10cac..de71a8beaf 100644
--- a/frontend/src/lib/assets/tokens/tokens.json
+++ b/frontend/src/lib/assets/tokens/tokens.json
@@ -12,7 +12,7 @@
 			"surface-selected": "#ffffff",
 			"surface-disabled": "#d8d8e433",
 			"surface-secondary": "#efeff4",
-			"surface-hover": "#eeeef4",
+			"surface-hover": "#cfcfe233",
 			"surface-primary": "#fbfbfd",
 			"border-light": "#e5e7eb",
 			"border-normal": "#9ca3af",
@@ -82,7 +82,7 @@
 			"surface-selected": "#434c5e",
 			"surface-disabled": "#212732",
 			"surface-secondary": "#272c35",
-			"surface-hover": "#454f64",
+			"surface-hover": "#7784a119",
 			"surface-primary": "#2e3441",
 			"border-light": "#374457",
 			"border-normal": "#a9b0ba",
@@ -100,7 +100,7 @@
 			"reserved-ai": "#f0c6fb",
 			"component-virtual-node": "#4c566a",
 			"text-accent": "#c7cefc",
-			"border-selected": "#758ff8",
+			"border-selected": "#6475b7",
 			"surface-sunken": "#242832",
 			"text-tertiary": "#a8aeb7",
 			"surface-input": "#292e38"
diff --git a/frontend/src/lib/components/ConnectionSection.svelte b/frontend/src/lib/components/ConnectionSection.svelte
index bdc43f354e..8f42e08f05 100644
--- a/frontend/src/lib/components/ConnectionSection.svelte
+++ b/frontend/src/lib/components/ConnectionSection.svelte
@@ -134,7 +134,7 @@
 	<div class="text-primary font-md font-semibold"> Script or flow to run on /windmill command </div>
 	<div class="relative">
 		{#if !teamName || (!$enterpriseLicense && platform === 'teams')}
-			<div class="absolute top-0 right-0 bottom-0 left-0 bg-surface-disabled/20 z-40"></div>
+			<div class="absolute top-0 right-0 bottom-0 left-0 bg-surface-disabled z-40"></div>
 		{/if}
 		<ScriptPicker
 			kinds={['script']}
diff --git a/frontend/src/lib/components/common/badge/Badge.svelte b/frontend/src/lib/components/common/badge/Badge.svelte
index 91429bd291..367563b66a 100644
--- a/frontend/src/lib/components/common/badge/Badge.svelte
+++ b/frontend/src/lib/components/common/badge/Badge.svelte
@@ -83,7 +83,7 @@
 		['dark-indigo']: 'bg-indigo-700 text-indigo-100 dark:bg-indigo-800 dark:text-indigo-200',
 		['dark-orange']: 'bg-orange-700 text-orange-100 dark:bg-orange-800 dark:text-orange-200',
 		['dark-violet']: 'bg-violet-700 text-violet-100 dark:bg-violet-800 dark:text-violet-200',
-		transparent: 'bg-surface-accent-selected/30 text-accent border-gray-400 dark:border-gray-500'
+		transparent: 'bg-surface-accent-selected text-accent border-gray-400 dark:border-gray-500'
 	}
 
 	const hovers: Partial<Record<BadgeColor, string>> = {
diff --git a/frontend/src/lib/components/common/button/Button.svelte b/frontend/src/lib/components/common/button/Button.svelte
index 45748724f5..4e5f0de70b 100644
--- a/frontend/src/lib/components/common/button/Button.svelte
+++ b/frontend/src/lib/components/common/button/Button.svelte
@@ -247,11 +247,11 @@
 			disabled
 				? ['default', 'subtle'].includes(variant)
 					? '!text-disabled'
-					: '!bg-surface-disabled/20 !text-disabled'
+					: '!bg-surface-disabled !text-disabled'
 				: '',
 			loading ? 'cursor-wait' : '',
 			selected && ['default', 'subtle'].includes(variant)
-				? '!bg-surface-accent-selected/30 !text-accent !border-border-selected'
+				? '!bg-surface-accent-selected !text-accent !border-border-selected'
 				: '',
 			btnClasses
 		)
diff --git a/frontend/src/lib/components/copilot/MetadataGen.svelte b/frontend/src/lib/components/copilot/MetadataGen.svelte
index b76bb0d7b3..666b50bf64 100644
--- a/frontend/src/lib/components/copilot/MetadataGen.svelte
+++ b/frontend/src/lib/components/copilot/MetadataGen.svelte
@@ -262,15 +262,15 @@ Generate a tool name for the script below:
 	}}
 >
 	<div
-		class="absolute left-[0.5rem] {elementType === 'textarea'
+		class="absolute left-3 {elementType === 'textarea'
 			? 'top-[1.3rem]'
 			: 'top-[0.3rem]'}  flex flex-row gap-2 items-start pointer-events-none"
 	>
 		{#if active}
 			<span
 				class={twMerge(
-					'rounded-md px-1 border',
-					flowAIBtnClasses(!loading && generatedContent.length > 0 ? 'green' : 'default')
+					'rounded-md px-1',
+					flowAIBtnClasses(!loading && generatedContent.length > 0 ? 'green' : 'selected')
 				)}
 			>
 				<span class="px-0.5 py-0.5 rounded-md text-2xs text-bold flex flex-row items-center gap-1">
@@ -291,7 +291,7 @@ Generate a tool name for the script below:
 			<div
 				bind:clientHeight={genHeight}
 				class={twMerge(
-					'text-sm leading-6 indent-[3.5rem] text-gray-500 dark:text-gray-400 pr-1',
+					'text-sm leading-6 indent-0 text-gray-500 dark:text-gray-400 pr-1',
 					elementType === 'input' ? 'text-ellipsis overflow-hidden whitespace-nowrap' : ''
 				)}
 				style={elementType === 'input' ? `max-width: calc(${width}px - 0.5rem)` : ''}
diff --git a/frontend/src/lib/components/flows/content/FlowModuleMock.svelte b/frontend/src/lib/components/flows/content/FlowModuleMock.svelte
index 65ec0ecf6a..e3d4cb3bea 100644
--- a/frontend/src/lib/components/flows/content/FlowModuleMock.svelte
+++ b/frontend/src/lib/components/flows/content/FlowModuleMock.svelte
@@ -92,7 +92,7 @@
 				<JsonEditor {code} on:changeValue={updateMockValue} />
 			{/key}
 		{:else}
-			<pre class="text-xs border rounded p-2 bg-surface-disabled/20"
+			<pre class="text-xs border rounded p-2 bg-surface-disabled"
 				>{flowModule.mock?.return_value
 					? JSON.stringify(flowModule.mock?.return_value, null, 2)
 					: ''}</pre
diff --git a/frontend/src/lib/components/graph/util.ts b/frontend/src/lib/components/graph/util.ts
index 8969f460c4..e32df15abd 100644
--- a/frontend/src/lib/components/graph/util.ts
+++ b/frontend/src/lib/components/graph/util.ts
@@ -22,7 +22,7 @@ export function getNodeColorClasses(state: FlowNodeState, selected: boolean): Fl
 
 	let defaultStyle = {
 		selected: {
-			bg: 'bg-surface-accent-selected/30',
+			bg: 'bg-surface-accent-selected',
 			outline: 'outline-border-selected' + outlined,
 			text: 'text-accent',
 			badge: 'bg-blue-100 outline-border-selected text-blue-800'
diff --git a/frontend/src/lib/components/runs/RunRow.svelte b/frontend/src/lib/components/runs/RunRow.svelte
index 3af5c33601..99dc5f6dec 100644
--- a/frontend/src/lib/components/runs/RunRow.svelte
+++ b/frontend/src/lib/components/runs/RunRow.svelte
@@ -107,7 +107,7 @@
 <div
 	class={twMerge(
 		'hover:bg-surface-hover cursor-pointer',
-		selected ? 'bg-surface-accent-selected/30' : '',
+		selected ? 'bg-surface-accent-selected' : '',
 		'grid items-center h-full'
 	)}
 	class:grid-runs-table={!containsLabel && !selectionMode && showTag}
diff --git a/frontend/src/lib/components/settings/ScopeSelector.svelte b/frontend/src/lib/components/settings/ScopeSelector.svelte
index 815e8627ef..da9d4949a6 100644
--- a/frontend/src/lib/components/settings/ScopeSelector.svelte
+++ b/frontend/src/lib/components/settings/ScopeSelector.svelte
@@ -621,7 +621,7 @@
 
 									<div
 										class="p-2 border rounded-lg w-full {isDisabled
-											? 'bg-surface-disabled/20 opacity-60'
+											? 'bg-surface-disabled opacity-60'
 											: 'bg-surface-tertiary'}"
 									>
 										<div class="flex justify-between items-center">
diff --git a/frontend/src/lib/components/text_input/TextInput.svelte b/frontend/src/lib/components/text_input/TextInput.svelte
index a4b4679873..76d8a4fe27 100644
--- a/frontend/src/lib/components/text_input/TextInput.svelte
+++ b/frontend/src/lib/components/text_input/TextInput.svelte
@@ -18,14 +18,23 @@
 	}
 
 	export const inputBaseClass =
-		'rounded-md focus:ring-0 no-default-style text-xs text-primary font-normal !bg-surface-input disabled:!bg-surface-disabled/20 disabled:!border-transparent disabled:!text-disabled disabled:cursor-not-allowed shadow-none !placeholder-hint'
+		'rounded-md focus:ring-0 no-default-style text-xs text-primary font-normal !bg-surface-input disabled:!bg-surface-disabled disabled:!border-transparent disabled:!text-disabled disabled:cursor-not-allowed shadow-none !placeholder-hint'
 
 	import { ButtonType } from '$lib/components/common/button/model'
 
 	export const inputSizeClasses = {
-		sm: `${ButtonType.UnifiedSizingClasses.sm} ${ButtonType.UnifiedMinHeightClasses.sm} !py-0.5`,
-		md: `${ButtonType.UnifiedSizingClasses.md} ${ButtonType.UnifiedMinHeightClasses.md}`,
-		lg: `${ButtonType.UnifiedSizingClasses.lg} ${ButtonType.UnifiedMinHeightClasses.lg}`
+		sm: twMerge(
+			`${ButtonType.UnifiedSizingClasses.sm} ${ButtonType.UnifiedMinHeightClasses.sm} !py-0.5`,
+			'px-2'
+		),
+		md: twMerge(
+			`${ButtonType.UnifiedSizingClasses.md} ${ButtonType.UnifiedMinHeightClasses.md}`,
+			'px-2'
+		),
+		lg: twMerge(
+			`${ButtonType.UnifiedSizingClasses.lg} ${ButtonType.UnifiedMinHeightClasses.lg}`,
+			'px-2'
+		)
 	}
 </script>
 
diff --git a/frontend/tailwind.config.cjs b/frontend/tailwind.config.cjs
index bb9d2ee3a3..1504b7f801 100644
--- a/frontend/tailwind.config.cjs
+++ b/frontend/tailwind.config.cjs
@@ -10,6 +10,19 @@ const { darkModeName, lightModeName } = require('./src/lib/assets/tokens/colorTo
 const tokens = { dark: figmaTokens.tokens[darkModeName], light: figmaTokens.tokens[lightModeName] }
 const primitives = figmaTokens.primitives.light
 
+// Helper function to create color definition based on whether the value contains alpha
+function createColorDefinition(colorName) {
+	// Check a sample value to see if it contains alpha (using light theme as reference)
+	const sampleValue = tokens.light[colorName]
+	if (sampleValue && sampleValue.includes('/')) {
+		// Alpha is already included, use as-is without allowing override
+		return `rgb(var(--color-${colorName}))`
+	} else {
+		// No alpha, allow Tailwind's alpha-value placeholder
+		return `rgb(var(--color-${colorName}) / <alpha-value>)`
+	}
+}
+
 /** @type {import('tailwindcss').Config} */
 const config = {
 	//to generatd tailwind full, only include ./src/lib/components/apps/editor/componentsPanel/tailwindUtils.ts and run:
@@ -41,60 +54,58 @@ const config = {
 			black: '#000000',
 
 			// Surface colors (semantic)
-			surface: 'rgb(var(--color-surface-primary) / <alpha-value>)',
-			'surface-secondary': 'rgb(var(--color-surface-secondary) / <alpha-value>)',
-			'surface-sunken': 'rgb(var(--color-surface-sunken) / <alpha-value>)',
-			'surface-tertiary': 'rgb(var(--color-surface-tertiary) / <alpha-value>)',
-			'surface-hover': 'rgb(var(--color-surface-hover) / <alpha-value>)',
-			'surface-disabled': 'rgb(var(--color-surface-disabled) / <alpha-value>)',
-			'surface-selected': 'rgb(var(--color-surface-selected) / <alpha-value>)',
-			'surface-accent-primary': 'rgb(var(--color-surface-accent-primary) / <alpha-value>)',
-			'surface-accent-hover': 'rgb(var(--color-surface-accent-hover) / <alpha-value>)',
-			'surface-accent-clicked': 'rgb(var(--color-surface-accent-clicked) / <alpha-value>)',
-			'surface-accent-secondary': 'rgb(var(--color-surface-accent-secondary) / <alpha-value>)',
-			'surface-accent-secondary-hover':
-				'rgb(var(--color-surface-accent-secondary-hover) / <alpha-value>)',
-			'surface-accent-secondary-clicked':
-				'rgb(var(--color-surface-accent-secondary-clicked) / <alpha-value>)',
-			'surface-accent-selected': 'rgb(var(--color-surface-accent-selected))',
-			'surface-input': 'rgb(var(--color-surface-input))',
+			surface: createColorDefinition('surface-primary'),
+			'surface-secondary': createColorDefinition('surface-secondary'),
+			'surface-sunken': createColorDefinition('surface-sunken'),
+			'surface-tertiary': createColorDefinition('surface-tertiary'),
+			'surface-hover': createColorDefinition('surface-hover'),
+			'surface-disabled': createColorDefinition('surface-disabled'),
+			'surface-selected': createColorDefinition('surface-selected'),
+			'surface-accent-primary': createColorDefinition('surface-accent-primary'),
+			'surface-accent-hover': createColorDefinition('surface-accent-hover'),
+			'surface-accent-clicked': createColorDefinition('surface-accent-clicked'),
+			'surface-accent-secondary': createColorDefinition('surface-accent-secondary'),
+			'surface-accent-secondary-hover': createColorDefinition('surface-accent-secondary-hover'),
+			'surface-accent-secondary-clicked': createColorDefinition('surface-accent-secondary-clicked'),
+			'surface-accent-selected': createColorDefinition('surface-accent-selected'),
+			'surface-input': createColorDefinition('surface-input'),
 
 			// Text colors (semantic)
-			primary: 'rgb(var(--color-text-primary) / <alpha-value>)',
-			secondary: 'rgb(var(--color-text-secondary) / <alpha-value>)',
-			tertiary: 'rgb(var(--color-text-tertiary) / <alpha-value>)',
-			hint: 'rgb(var(--color-text-hint) / <alpha-value>)',
-			disabled: 'rgb(var(--color-text-disabled) / <alpha-value>)',
-			emphasis: 'rgb(var(--color-text-emphasis) / <alpha-value>)',
-			accent: 'rgb(var(--color-text-accent) / <alpha-value>)',
+			primary: createColorDefinition('text-primary'),
+			secondary: createColorDefinition('text-secondary'),
+			tertiary: createColorDefinition('text-tertiary'),
+			hint: createColorDefinition('text-hint'),
+			disabled: createColorDefinition('text-disabled'),
+			emphasis: createColorDefinition('text-emphasis'),
+			accent: createColorDefinition('text-accent'),
 
 			// Inverse colors (computed from opposite theme)
-			'primary-inverse': 'rgb(var(--color-text-primary-inverse) / <alpha-value>)',
-			'secondary-inverse': 'rgb(var(--color-text-secondary-inverse) / <alpha-value>)',
-			'tertiary-inverse': 'rgb(var(--color-text-tertiary-inverse) / <alpha-value>)',
-			'emphasis-inverse': 'rgb(var(--color-text-emphasis-inverse) / <alpha-value>)',
-			'hint-inverse': 'rgb(var(--color-text-hint-inverse) / <alpha-value>)',
-			'disabled-inverse': 'rgb(var(--color-text-disabled-inverse) / <alpha-value>)',
+			'primary-inverse': createColorDefinition('text-primary-inverse'),
+			'secondary-inverse': createColorDefinition('text-secondary-inverse'),
+			'tertiary-inverse': createColorDefinition('text-tertiary-inverse'),
+			'emphasis-inverse': createColorDefinition('text-emphasis-inverse'),
+			'hint-inverse': createColorDefinition('text-hint-inverse'),
+			'disabled-inverse': createColorDefinition('text-disabled-inverse'),
 
 			// Border colors (semantic)
-			'border-light': 'rgb(var(--color-border-light) / <alpha-value>)',
-			'border-normal': 'rgb(var(--color-border-normal) / <alpha-value>)',
-			'border-accent': 'rgb(var(--color-border-accent) / <alpha-value>)',
-			'border-selected': 'rgb(var(--color-border-selected) / <alpha-value>)',
+			'border-light': createColorDefinition('border-light'),
+			'border-normal': createColorDefinition('border-normal'),
+			'border-accent': createColorDefinition('border-accent'),
+			'border-selected': createColorDefinition('border-selected'),
 
 			// Reserved colors (semantic)
-			ai: 'rgb(var(--color-reserved-ai) / <alpha-value>)',
-			'ai-inverse': 'rgb(var(--color-reserved-ai-inverse) / <alpha-value>)',
+			ai: createColorDefinition('reserved-ai'),
+			'ai-inverse': createColorDefinition('reserved-ai-inverse'),
 
 			// Surface inverse colors (computed from opposite theme)
-			'surface-inverse': 'rgb(var(--color-surface-primary-inverse) / <alpha-value>)',
-			'surface-secondary-inverse': 'rgb(var(--color-surface-secondary-inverse) / <alpha-value>)',
-			'surface-hover-inverse': 'rgb(var(--color-surface-hover-inverse) / <alpha-value>)',
-			'surface-disabled-inverse': 'rgb(var(--color-surface-disabled-inverse) / <alpha-value>)',
-			'surface-selected-inverse': 'rgb(var(--color-surface-selected-inverse) / <alpha-value>)',
+			'surface-inverse': createColorDefinition('surface-primary-inverse'),
+			'surface-secondary-inverse': createColorDefinition('surface-secondary-inverse'),
+			'surface-hover-inverse': createColorDefinition('surface-hover-inverse'),
+			'surface-disabled-inverse': createColorDefinition('surface-disabled-inverse'),
+			'surface-selected-inverse': createColorDefinition('surface-selected-inverse'),
 
 			// Component colors
-			'component-virtual-node': 'rgb(var(--color-component-virtual-node) / <alpha-value>)',
+			'component-virtual-node': createColorDefinition('component-virtual-node'),
 
 			// Design token colors
 			'light-blue': `rgb(${primitives['light-blue']})`,
@@ -919,6 +930,13 @@ function hexToRgb(hex) {
 	const g = parseInt(hex.substring(2, 4), 16)
 	const b = parseInt(hex.substring(4, 6), 16)
 
-	// Return the RGB string format
+	// Check if hex has alpha channel (8 characters)
+	if (hex.length === 8) {
+		const a = parseInt(hex.substring(6, 8), 16) / 255
+		// Return RGB with alpha as decimal value for CSS
+		return `${r} ${g} ${b} / ${a.toFixed(3)}`
+	}
+
+	// Return the RGB string format without alpha
 	return `${r} ${g} ${b}`
 }