diff --git a/src/ui/src/builder/BuilderApp.vue b/src/ui/src/builder/BuilderApp.vue
index 421a08bac..739e924ec 100644
--- a/src/ui/src/builder/BuilderApp.vue
+++ b/src/ui/src/builder/BuilderApp.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="BuilderApp" tabindex="-1">
+	<div class="BuilderApp" tabindex="-1" :style="WDS_CSS_PROPERTIES">
 		<div
 			class="mainGrid"
 			:class="{ openPanels: ssbm.openPanels.value.size > 0 }"
@@ -81,6 +81,7 @@ import BuilderHeader from "./BuilderHeader.vue";
 import BuilderTooltip from "./BuilderTooltip.vue";
 import BuilderAsyncLoader from "./BuilderAsyncLoader.vue";
 import BuilderPanelSwitcher from "./panels/BuilderPanelSwitcher.vue";
+import { WDS_CSS_PROPERTIES } from "@/wds/tokens";
 
 const BuilderSettings = defineAsyncComponent({
 	loader: () => import("./settings/BuilderSettings.vue"),
@@ -270,34 +271,33 @@ onMounted(() => {
 @import "./sharedStyles.css";
 
 .BuilderApp {
-	--builderBackgroundColor: #ffffff;
-	--builderAccentColor: #5551ff;
-	--builderSuccessColor: #3be19b;
-	--builderErrorColor: #ff3d00;
-	--builderHeaderBackgroundColor: #333333;
-	--builderHeaderBackgroundHoleColor: #000000;
+	--builderBackgroundColor: var(--wdsColorWhite);
+	--builderAccentColor: var(--wdsColorBlue5);
+	--builderSuccessColor: var(--wdsColorGreen5);
+	--builderErrorColor: var(--wdsColorOrange5);
+	--builderHeaderBackgroundColor: var(--wdsColorGray6);
+	--builderHeaderBackgroundHoleColor: var(--wdsColorBlack);
 	--builderPrimaryTextColor: rgba(0, 0, 0, 0.9);
 	--builderSecondaryTextColor: rgba(0, 0, 0, 0.6);
 	--builderAreaSeparatorColor: rgba(0, 0, 0, 0.2);
-	--builderSeparatorColor: #e4e7ed;
-	--builderSubtleSeparatorColor: #f5f5f9;
-	--builderIntenseSeparatorColor: #d2d4d7;
-	--builderSelectedColor: #e4e9ff;
-	--builderMatchingColor: #f8dccc;
-	--builderIntenseSelectedColor: #0094d1;
+	--builderSeparatorColor: var(--wdsColorGray2);
+	--builderSubtleSeparatorColor: var(--wdsColorGray1);
+	--builderIntenseSeparatorColor: var(--wdsColorGray3);
+	--builderSelectedColor: var(--wdsColorBlue2);
+	--builderMatchingColor: var(--wdsColorOrange2);
+	--builderIntenseSelectedColor: var(--wdsColorBlue4);
 	--builderSubtleHighlightColor: rgba(0, 0, 0, 0.05);
-	--builderSubtleHighlightColorSolid: #f2f2f2;
-	--builderDisabledColor: rgb(180, 180, 180);
+	--builderSubtleHighlightColorSolid: var(--wdsColorGray1);
 	--builderSidebarWidth: 265px;
 	--builderSettingsWidth: 450px;
-	--builderActionOngoingColor: #333333;
+	--builderActionOngoingColor: var(--wdsColorGray6);
 	--builderTopBarHeight: 48px;
 	--builderWarningTextColor: white;
-	--builderWarningColor: #ff3d00;
+	--builderWarningColor: var(--wdsColorOrange5);
 	--builderPanelSwitcherHeight: 48px;
 	--builderPanelSwitcherExpandedHeight: calc(50% - 24px);
 
-	--buttonColor: #5551ff;
+	--buttonColor: var(--wdsColorBlue5);
 	--buttonTextColor: white;
 	--accentColor: var(--builderAccentColor);
 	--primaryTextColor: var(--builderPrimaryTextColor);
diff --git a/src/ui/src/builder/BuilderHeader.vue b/src/ui/src/builder/BuilderHeader.vue
index f64f7c06b..957b747c5 100644
--- a/src/ui/src/builder/BuilderHeader.vue
+++ b/src/ui/src/builder/BuilderHeader.vue
@@ -140,7 +140,7 @@ const customHandlerModalCloseAction: ModalAction = {
 .panelToggler:hover {
 	font-size: 12px;
 	--buttonColor: black;
-	--builderSeparatorColor: #303030;
+	--builderSeparatorColor: var(--wdsColorGray6);
 	--buttonTextColor: white;
 }
 
diff --git a/src/ui/src/builder/BuilderSelect.vue b/src/ui/src/builder/BuilderSelect.vue
index 1c273b263..df6de1d11 100644
--- a/src/ui/src/builder/BuilderSelect.vue
+++ b/src/ui/src/builder/BuilderSelect.vue
@@ -144,7 +144,6 @@ function onSelect(value: string) {
 	align-items: center;
 	justify-content: space-between;
 	font-weight: 300;
-	color: #000000e6;
 	cursor: pointer;
 }
 </style>
diff --git a/src/ui/src/builder/panels/BuilderCodePanel.vue b/src/ui/src/builder/panels/BuilderCodePanel.vue
index 0f331cc39..129acd83c 100644
--- a/src/ui/src/builder/panels/BuilderCodePanel.vue
+++ b/src/ui/src/builder/panels/BuilderCodePanel.vue
@@ -117,7 +117,7 @@ async function save() {
 }
 
 .status.error {
-	border: 1px solid #ffcfc2;
-	background: #fff4f1;
+	border: 1px solid var(--wdsColorOrange2);
+	background: var(--wdsColorOrange1);
 }
 </style>
diff --git a/src/ui/src/builder/panels/BuilderLogIndicator.vue b/src/ui/src/builder/panels/BuilderLogIndicator.vue
index 503b729d1..ddaf1e9fb 100644
--- a/src/ui/src/builder/panels/BuilderLogIndicator.vue
+++ b/src/ui/src/builder/panels/BuilderLogIndicator.vue
@@ -64,10 +64,10 @@ const entryCountByType = computed(() => {
 }
 
 .number.error .icon {
-	background: #ff643c;
+	background: var(--wdsColorOrange5);
 }
 
 .number.info .icon {
-	background: #6985ff;
+	background: var(--wdsColorBlue4);
 }
 </style>
diff --git a/src/ui/src/builder/panels/BuilderLogPanel.vue b/src/ui/src/builder/panels/BuilderLogPanel.vue
index 58d2f058a..8a9749c7c 100644
--- a/src/ui/src/builder/panels/BuilderLogPanel.vue
+++ b/src/ui/src/builder/panels/BuilderLogPanel.vue
@@ -113,8 +113,8 @@ const logEntries = computed(() => {
 }
 
 .entry.error {
-	border: 1px solid #ffcfc2;
-	background: #fff4f1;
+	border: 1px solid var(--wdsColorOrange2);
+	background: var(--wdsColorOrange1);
 }
 
 .entry .icon {
diff --git a/src/ui/src/builder/panels/BuilderLogWorkflowExecution.vue b/src/ui/src/builder/panels/BuilderLogWorkflowExecution.vue
index 805fda66c..69837003e 100644
--- a/src/ui/src/builder/panels/BuilderLogWorkflowExecution.vue
+++ b/src/ui/src/builder/panels/BuilderLogWorkflowExecution.vue
@@ -267,15 +267,15 @@ function formatExecutionTime(timeInSeconds: number): string {
 }
 
 .item .outcome .ball.success {
-	background: #3bdcab;
+	background: var(--wdsColorGreen5);
 }
 
 .item .outcome .ball.error {
-	background: #ff643c;
+	background: var(--wdsColorOrange5);
 }
 
 .item .outcome .ball.dynamic {
-	background: #a95ef8;
+	background: var(--wdsColorPurple4);
 }
 
 .item .result {
diff --git a/src/ui/src/builder/settings/BuilderSettings.vue b/src/ui/src/builder/settings/BuilderSettings.vue
index 06edb8b10..9a1750112 100644
--- a/src/ui/src/builder/settings/BuilderSettings.vue
+++ b/src/ui/src/builder/settings/BuilderSettings.vue
@@ -114,7 +114,7 @@ const toggleMiniDocs = () => {
 	overflow: hidden;
 	border-width: 1px solid var(--builderAreaSeparatorColor);
 	background: var(--builderBackgroundColor);
-	box-shadow: 0px 3px 40px 0px rgba(172, 185, 220, 0.4);
+	box-shadow: var(--wdsShadowLarge);
 	border-radius: 12px;
 	top: v-bind("ssbm.getMode() == `workflows` ? `72px` : `20px`");
 }
diff --git a/src/ui/src/builder/sharedStyles.css b/src/ui/src/builder/sharedStyles.css
index 0c8d33133..5c76f9df6 100644
--- a/src/ui/src/builder/sharedStyles.css
+++ b/src/ui/src/builder/sharedStyles.css
@@ -1,26 +1,3 @@
-.BuilderApp {
-	--builderBackgroundColor: #ffffff;
-	--builderAccentColor: #5551ff;
-	--builderSuccessColor: #29cf00;
-	--builderErrorColor: #ff3d00;
-	--builderHeaderBackgroundColor: #353535;
-	--builderHeaderBackgroundHoleColor: #202020;
-	--builderPrimaryTextColor: rgba(0, 0, 0, 0.9);
-	--builderSecondaryTextColor: rgba(0, 0, 0, 0.6);
-	--builderAreaSeparatorColor: rgba(0, 0, 0, 0.2);
-	--builderSeparatorColor: rgba(0, 0, 0, 0.1);
-	--builderSubtleSeparatorColor: rgba(0, 0, 0, 0.05);
-	--builderIntenseSeparatorColor: rgba(0, 0, 0, 0.2);
-	--builderSelectedColor: rgba(210, 234, 244, 0.8);
-	--builderIntenseSelectedColor: #6985ff;
-	--builderSubtleHighlightColor: rgba(0, 0, 0, 0.05);
-	--builderSubtleHighlightColorSolid: #f2f2f2;
-	--builderDisabledColor: rgb(180, 180, 180);
-	--builderSidebarWidth: max(265px, 27vh);
-	--builderSettingsWidth: max(265px, 27vh);
-	--builderActionOngoingColor: rgba(0, 0, 0, 0.7);
-}
-
 h1,
 h2,
 h3 {
diff --git a/src/ui/src/components/core/base/BaseEmptiness.vue b/src/ui/src/components/core/base/BaseEmptiness.vue
index a833f0855..17dc8f5ba 100644
--- a/src/ui/src/components/core/base/BaseEmptiness.vue
+++ b/src/ui/src/components/core/base/BaseEmptiness.vue
@@ -31,8 +31,8 @@ const definition = computed(() =>
 @import "@/renderer/sharedStyles.css";
 
 .BaseEmptiness {
-	background: #e4e7ed;
-	color: #4f4f4f;
+	background: var(--wdsColorGray2);
+	color: var(--wdsColorGray5);
 	padding: 16px;
 	display: flex;
 	align-items: center;
@@ -46,7 +46,7 @@ const definition = computed(() =>
 }
 
 .title > h3 {
-	color: #4f4f4f;
+	color: var(--wdsColorGray5);
 }
 
 .message {
diff --git a/src/ui/src/components/core/content/CoreAnnotatedText.vue b/src/ui/src/components/core/content/CoreAnnotatedText.vue
index aefb891cb..b89a9bb03 100644
--- a/src/ui/src/components/core/content/CoreAnnotatedText.vue
+++ b/src/ui/src/components/core/content/CoreAnnotatedText.vue
@@ -33,6 +33,7 @@ import {
 	primaryTextColor,
 } from "@/renderer/sharedStyleFields";
 import SharedControlBar from "@/components/shared/SharedControlBar.vue";
+import { WdsColor } from "@/wds/tokens";
 export default {
 	writer: {
 		name: "Annotated text",
@@ -49,7 +50,7 @@ export default {
 				name: "Reference",
 				desc: "The colour to be used as reference for chroma and luminance, and as the starting point for hue rotation.",
 				type: FieldType.Color,
-				default: "#5551FF",
+				default: WdsColor.Blue5,
 				category: FieldCategory.Style,
 			},
 			seed: {
diff --git a/src/ui/src/components/core/content/CoreChatbot.vue b/src/ui/src/components/core/content/CoreChatbot.vue
index 70064df84..521bfa16c 100644
--- a/src/ui/src/components/core/content/CoreChatbot.vue
+++ b/src/ui/src/components/core/content/CoreChatbot.vue
@@ -110,6 +110,7 @@ import {
 import prettyBytes from "pretty-bytes";
 import WdsTextareaInput from "@/wds/WdsTextareaInput.vue";
 import WdsControl from "@/wds/WdsControl.vue";
+import { WdsColor } from "@/wds/tokens";
 
 const MAX_FILE_SIZE = 200 * 1024 * 1024;
 
@@ -241,21 +242,21 @@ export default {
 			},
 			userRoleColor: {
 				name: "User role",
-				default: "#F5F5F9",
+				default: WdsColor.Gray1,
 				type: FieldType.Color,
 				category: FieldCategory.Style,
 				applyStyleVariable: true,
 			},
 			avatarBackgroundColor: {
 				name: "Avatar",
-				default: "#2C2D30",
+				default: WdsColor.Gray6,
 				type: FieldType.Color,
 				category: FieldCategory.Style,
 				applyStyleVariable: true,
 			},
 			avatarTextColor: {
 				name: "Avatar text",
-				default: "#FFFFFF",
+				default: WdsColor.White,
 				type: FieldType.Color,
 				category: FieldCategory.Style,
 				applyStyleVariable: true,
@@ -267,11 +268,11 @@ export default {
 			separatorColor,
 			buttonColor: {
 				...buttonColor,
-				default: "#000000",
+				default: WdsColor.Black,
 			},
 			buttonTextColor: {
 				...buttonTextColor,
-				default: "#ffffff",
+				default: WdsColor.White,
 			},
 			cssClasses,
 		},
diff --git a/src/ui/src/components/core/content/CoreDataframe.vue b/src/ui/src/components/core/content/CoreDataframe.vue
index fa9470da4..50a76f8d3 100644
--- a/src/ui/src/components/core/content/CoreDataframe.vue
+++ b/src/ui/src/components/core/content/CoreDataframe.vue
@@ -134,6 +134,7 @@ import {
 	UNNAMED_INDEX_COLUMN_PATTERN,
 } from "./CoreDataframe/constants";
 import WdsButton from "@/wds/WdsButton.vue";
+import { WdsColor } from "@/wds/tokens";
 
 const description = "A component to display Pandas DataFrames.";
 
@@ -272,7 +273,7 @@ export default {
 				name: "Background",
 				type: FieldType.Color,
 				category: FieldCategory.Style,
-				default: "#ffffff",
+				default: WdsColor.White,
 				applyStyleVariable: true,
 			},
 			fontStyle: {
diff --git a/src/ui/src/components/core/content/CoreDataframeLegacy.vue b/src/ui/src/components/core/content/CoreDataframeLegacy.vue
index cddbe3073..f3f9d44e1 100644
--- a/src/ui/src/components/core/content/CoreDataframeLegacy.vue
+++ b/src/ui/src/components/core/content/CoreDataframeLegacy.vue
@@ -125,6 +125,7 @@ import { onUnmounted } from "vue";
 import WdsTextInput from "@/wds/WdsTextInput.vue";
 import WdsControl from "@/wds/WdsControl.vue";
 import BaseMarkdown from "../base/BaseMarkdown.vue";
+import { WdsColor } from "@/wds/tokens";
 
 const description = "A component to display Pandas DataFrames.";
 const defaultDataframe = `data:application/vnd.apache.arrow.file;base64,QVJST1cxAAD/////iAMAABAAAAAAAAoADgAGAAUACAAKAAAAAAEEABAAAAAAAAoADAAAAAQACAAKAAAAlAIAAAQAAAABAAAADAAAAAgADAAEAAgACAAAAGwCAAAEAAAAXwIAAHsiaW5kZXhfY29sdW1ucyI6IFsiX19pbmRleF9sZXZlbF8wX18iXSwgImNvbHVtbl9pbmRleGVzIjogW3sibmFtZSI6IG51bGwsICJmaWVsZF9uYW1lIjogbnVsbCwgInBhbmRhc190eXBlIjogInVuaWNvZGUiLCAibnVtcHlfdHlwZSI6ICJvYmplY3QiLCAibWV0YWRhdGEiOiB7ImVuY29kaW5nIjogIlVURi04In19XSwgImNvbHVtbnMiOiBbeyJuYW1lIjogImNvbF9hIiwgImZpZWxkX25hbWUiOiAiY29sX2EiLCAicGFuZGFzX3R5cGUiOiAiaW50NjQiLCAibnVtcHlfdHlwZSI6ICJpbnQ2NCIsICJtZXRhZGF0YSI6IG51bGx9LCB7Im5hbWUiOiAiY29sX2IiLCAiZmllbGRfbmFtZSI6ICJjb2xfYiIsICJwYW5kYXNfdHlwZSI6ICJpbnQ2NCIsICJudW1weV90eXBlIjogImludDY0IiwgIm1ldGFkYXRhIjogbnVsbH0sIHsibmFtZSI6IG51bGwsICJmaWVsZF9uYW1lIjogIl9faW5kZXhfbGV2ZWxfMF9fIiwgInBhbmRhc190eXBlIjogImludDY0IiwgIm51bXB5X3R5cGUiOiAiaW50NjQiLCAibWV0YWRhdGEiOiBudWxsfV0sICJjcmVhdG9yIjogeyJsaWJyYXJ5IjogInB5YXJyb3ciLCAidmVyc2lvbiI6ICIxMi4wLjAifSwgInBhbmRhc192ZXJzaW9uIjogIjEuNS4zIn0ABgAAAHBhbmRhcwAAAwAAAIgAAABEAAAABAAAAJT///8AAAECEAAAACQAAAAEAAAAAAAAABEAAABfX2luZGV4X2xldmVsXzBfXwAAAJD///8AAAABQAAAAND///8AAAECEAAAABgAAAAEAAAAAAAAAAUAAABjb2xfYgAAAMD///8AAAABQAAAABAAFAAIAAYABwAMAAAAEAAQAAAAAAABAhAAAAAgAAAABAAAAAAAAAAFAAAAY29sX2EAAAAIAAwACAAHAAgAAAAAAAABQAAAAAAAAAD/////6AAAABQAAAAAAAAADAAWAAYABQAIAAwADAAAAAADBAAYAAAAMAAAAAAAAAAAAAoAGAAMAAQACAAKAAAAfAAAABAAAAACAAAAAAAAAAAAAAAGAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAQAAAAAAAAACAAAAAAAAAAAAAAAAAAAAAgAAAAAAAAABAAAAAAAAAAAAAAAAMAAAACAAAAAAAAAAAAAAAAAAAAAgAAAAAAAAAAAAAAAAAAAAIAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAIAAAAAAAAAAwAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAQAAAAAAAAD/////AAAAABAAAAAMABQABgAIAAwAEAAMAAAAAAAEADwAAAAoAAAABAAAAAEAAACYAwAAAAAAAPAAAAAAAAAAMAAAAAAAAAAAAAAAAAAAAAAACgAMAAAABAAIAAoAAACUAgAABAAAAAEAAAAMAAAACAAMAAQACAAIAAAAbAIAAAQAAABfAgAAeyJpbmRleF9jb2x1bW5zIjogWyJfX2luZGV4X2xldmVsXzBfXyJdLCAiY29sdW1uX2luZGV4ZXMiOiBbeyJuYW1lIjogbnVsbCwgImZpZWxkX25hbWUiOiBudWxsLCAicGFuZGFzX3R5cGUiOiAidW5pY29kZSIsICJudW1weV90eXBlIjogIm9iamVjdCIsICJtZXRhZGF0YSI6IHsiZW5jb2RpbmciOiAiVVRGLTgifX1dLCAiY29sdW1ucyI6IFt7Im5hbWUiOiAiY29sX2EiLCAiZmllbGRfbmFtZSI6ICJjb2xfYSIsICJwYW5kYXNfdHlwZSI6ICJpbnQ2NCIsICJudW1weV90eXBlIjogImludDY0IiwgIm1ldGFkYXRhIjogbnVsbH0sIHsibmFtZSI6ICJjb2xfYiIsICJmaWVsZF9uYW1lIjogImNvbF9iIiwgInBhbmRhc190eXBlIjogImludDY0IiwgIm51bXB5X3R5cGUiOiAiaW50NjQiLCAibWV0YWRhdGEiOiBudWxsfSwgeyJuYW1lIjogbnVsbCwgImZpZWxkX25hbWUiOiAiX19pbmRleF9sZXZlbF8wX18iLCAicGFuZGFzX3R5cGUiOiAiaW50NjQiLCAibnVtcHlfdHlwZSI6ICJpbnQ2NCIsICJtZXRhZGF0YSI6IG51bGx9XSwgImNyZWF0b3IiOiB7ImxpYnJhcnkiOiAicHlhcnJvdyIsICJ2ZXJzaW9uIjogIjEyLjAuMCJ9LCAicGFuZGFzX3ZlcnNpb24iOiAiMS41LjMifQAGAAAAcGFuZGFzAAADAAAAiAAAAEQAAAAEAAAAlP///wAAAQIQAAAAJAAAAAQAAAAAAAAAEQAAAF9faW5kZXhfbGV2ZWxfMF9fAAAAkP///wAAAAFAAAAA0P///wAAAQIQAAAAGAAAAAQAAAAAAAAABQAAAGNvbF9iAAAAwP///wAAAAFAAAAAEAAUAAgABgAHAAwAAAAQABAAAAAAAAECEAAAACAAAAAEAAAAAAAAAAUAAABjb2xfYQAAAAgADAAIAAcACAAAAAAAAAFAAAAAsAMAAEFSUk9XMQ==`;
@@ -205,7 +206,7 @@ export default {
 				name: "Background",
 				type: FieldType.Color,
 				category: FieldCategory.Style,
-				default: "#ffffff",
+				default: WdsColor.White,
 				applyStyleVariable: true,
 			},
 			fontStyle: {
diff --git a/src/ui/src/components/core/content/CoreMessage.vue b/src/ui/src/components/core/content/CoreMessage.vue
index 640a9e3eb..8a2e600cf 100644
--- a/src/ui/src/components/core/content/CoreMessage.vue
+++ b/src/ui/src/components/core/content/CoreMessage.vue
@@ -31,6 +31,7 @@ else:
 <script lang="ts">
 import { cssClasses, primaryTextColor } from "@/renderer/sharedStyleFields";
 import { FieldCategory, FieldType } from "@/writerTypes";
+import { WdsColor } from "@/wds/tokens";
 
 const description =
 	"A component that displays a message in various styles, including success, error, warning, and informational.";
@@ -48,13 +49,13 @@ export default {
 			},
 			successColor: {
 				name: "Success",
-				default: "#A9F9E1",
+				default: WdsColor.Green3,
 				type: FieldType.Color,
 				category: FieldCategory.Style,
 			},
 			errorColor: {
 				name: "Error",
-				default: "#FFCFC2",
+				default: WdsColor.Orange2,
 				type: FieldType.Color,
 				category: FieldCategory.Style,
 			},
@@ -66,13 +67,13 @@ export default {
 			},
 			infoColor: {
 				name: "Info",
-				default: "#E4E9FF",
+				default: WdsColor.Blue2,
 				type: FieldType.Color,
 				category: FieldCategory.Style,
 			},
 			loadingColor: {
 				name: "Loading",
-				default: "#E4E9FF",
+				default: WdsColor.Blue2,
 				type: FieldType.Color,
 				category: FieldCategory.Style,
 			},
diff --git a/src/ui/src/components/core/content/CoreMetric.vue b/src/ui/src/components/core/content/CoreMetric.vue
index 3913dd2fa..61e34cb6a 100644
--- a/src/ui/src/components/core/content/CoreMetric.vue
+++ b/src/ui/src/components/core/content/CoreMetric.vue
@@ -16,6 +16,7 @@ import {
 	primaryTextColor,
 	secondaryTextColor,
 } from "@/renderer/sharedStyleFields";
+import { WdsColor } from "@/wds/tokens";
 
 const description =
 	"A component that prominently displays a metric value and associated information.";
@@ -51,7 +52,7 @@ export default {
 			secondaryTextColor,
 			positiveColor: {
 				name: "Positive",
-				default: "#a9f9e1",
+				default: WdsColor.Green3,
 				type: FieldType.Color,
 				category: FieldCategory.Style,
 			},
@@ -63,7 +64,7 @@ export default {
 			},
 			negativeColor: {
 				name: "Negative",
-				default: "#ffcfc2",
+				default: WdsColor.Orange2,
 				type: FieldType.Color,
 				category: FieldCategory.Style,
 			},
diff --git a/src/ui/src/components/core/content/CorePlotlyGraph.vue b/src/ui/src/components/core/content/CorePlotlyGraph.vue
index b6d8d0089..31557f73e 100644
--- a/src/ui/src/components/core/content/CorePlotlyGraph.vue
+++ b/src/ui/src/components/core/content/CorePlotlyGraph.vue
@@ -12,6 +12,7 @@ For example, implement cross-filtering.
 <script lang="ts">
 import { FieldType } from "@/writerTypes";
 import { cssClasses } from "@/renderer/sharedStyleFields";
+import { WdsColor } from "@/wds/tokens";
 
 const description = "A component that displays Plotly graphs.";
 
@@ -64,17 +65,22 @@ const fields = inject(injectionKeys.evaluatedFields);
 const spec = computed(() => fields.spec.value);
 
 const defaultLayout = {
-	paper_bgcolor: "#ffffff",
-	plot_bgcolor: "#f5f5f9",
-	colorway: ["#6985FF", "#A95EF8", "#F86", "#3BDCAB"],
+	paper_bgcolor: WdsColor.White,
+	plot_bgcolor: WdsColor.Gray1,
+	colorway: [
+		WdsColor.Blue4,
+		WdsColor.Blue4,
+		WdsColor.Orange4,
+		WdsColor.Green5,
+	],
 	font: {
 		family: "Poppins, sans-serif",
 		size: 12,
-		color: "#000000",
+		color: WdsColor.Black,
 	},
 	hoverlabel: {
-		color: "#ffffff",
-		bgcolor: "#000000",
+		color: WdsColor.White,
+		bgcolor: WdsColor.Black,
 	},
 };
 
diff --git a/src/ui/src/components/core/content/CoreTags.vue b/src/ui/src/components/core/content/CoreTags.vue
index b09502ac2..938b57080 100644
--- a/src/ui/src/components/core/content/CoreTags.vue
+++ b/src/ui/src/components/core/content/CoreTags.vue
@@ -26,6 +26,7 @@
 <script lang="ts">
 import { FieldCategory, FieldType } from "@/writerTypes";
 import { cssClasses, primaryTextColor } from "@/renderer/sharedStyleFields";
+import { WdsColor } from "@/wds/tokens";
 
 const clickHandlerStub = `
 def handle_tag_click(state, payload):
@@ -49,7 +50,7 @@ export default {
 				name: "Reference",
 				desc: "The colour to be used as reference for chroma and luminance, and as the starting point for hue rotation.",
 				type: FieldType.Color,
-				default: "#5551FF",
+				default: WdsColor.Blue5,
 				category: FieldCategory.Style,
 			},
 			seed: {
diff --git a/src/ui/src/components/core/input/CoreColorInput.vue b/src/ui/src/components/core/input/CoreColorInput.vue
index 1b5785591..5bfe82af4 100644
--- a/src/ui/src/components/core/input/CoreColorInput.vue
+++ b/src/ui/src/components/core/input/CoreColorInput.vue
@@ -19,6 +19,7 @@ import { cssClasses } from "@/renderer/sharedStyleFields";
 import { FieldType, WriterComponentDefinition } from "@/writerTypes";
 import BaseInputColor from "../base/BaseInputColor.vue";
 import BaseInputWrapper from "../base/BaseInputWrapper.vue";
+import { WdsColor } from "@/wds/tokens";
 
 const description =
 	"A user input component that allows users to select a color using a color picker interface.";
@@ -45,11 +46,11 @@ const definition = {
 			desc: "List of predefined colors",
 			type: FieldType.Object,
 			init: JSON.stringify([
-				"#5551ff",
-				"#3be19b",
-				"#ff3d00",
-				"#333333",
-				"#0094d1",
+				WdsColor.Blue5,
+				WdsColor.Green5,
+				WdsColor.Orange5,
+				WdsColor.Gray6,
+				WdsColor.Blue4,
 			]),
 		},
 		cssClasses,
diff --git a/src/ui/src/components/core/input/CoreMultiselectInput.vue b/src/ui/src/components/core/input/CoreMultiselectInput.vue
index c5195b181..d8826d452 100644
--- a/src/ui/src/components/core/input/CoreMultiselectInput.vue
+++ b/src/ui/src/components/core/input/CoreMultiselectInput.vue
@@ -30,6 +30,7 @@ import {
 } from "@/renderer/sharedStyleFields";
 import BaseInputWrapper from "../base/BaseInputWrapper.vue";
 import { ComponentPublicInstance } from "vue";
+import { WdsColor } from "@/wds/tokens";
 
 const description =
 	"A user input component that allows users to select multiple values from a searchable list of options.";
@@ -76,7 +77,7 @@ export default {
 			chipTextColor: {
 				name: "Chip text",
 				type: FieldType.Color,
-				default: "#ffffff",
+				default: WdsColor.White,
 				desc: "The colour of the text in the chips.",
 				category: FieldCategory.Style,
 				applyStyleVariable: true,
diff --git a/src/ui/src/components/core/input/CoreSelectInput.vue b/src/ui/src/components/core/input/CoreSelectInput.vue
index a19d78759..81c3410fd 100644
--- a/src/ui/src/components/core/input/CoreSelectInput.vue
+++ b/src/ui/src/components/core/input/CoreSelectInput.vue
@@ -30,6 +30,7 @@ import {
 } from "@/renderer/sharedStyleFields";
 import BaseInputWrapper from "../base/BaseInputWrapper.vue";
 import { ComponentPublicInstance } from "vue";
+import { WdsColor } from "@/wds/tokens";
 
 const description =
 	"A user input component that allows users to select a single value from a searchable list of options.";
@@ -73,7 +74,7 @@ export default {
 			chipTextColor: {
 				name: "Chip text",
 				type: FieldType.Color,
-				default: "#ffffff",
+				default: WdsColor.White,
 				desc: "The color of the text in the chips.",
 				category: FieldCategory.Style,
 				applyStyleVariable: true,
diff --git a/src/ui/src/components/custom/BubbleMessage.vue b/src/ui/src/components/custom/BubbleMessage.vue
index 363f7e1f3..12dd6cec2 100644
--- a/src/ui/src/components/custom/BubbleMessage.vue
+++ b/src/ui/src/components/custom/BubbleMessage.vue
@@ -56,12 +56,12 @@ const fields = inject(injectionKeys.evaluatedFields);
 .triangle {
 	flex: 0 0 auto;
 	border-left: 12px solid white;
-	border-top: 12px solid #f0f0f0;
+	border-top: 12px solid var(--wdsColorGray1);
 }
 
 .message {
 	flex: 1 0 auto;
-	background: #f0f0f0;
+	background: var(--wdsColorGray1);
 	border-radius: 0 12px 12px 12px;
 	padding: 16px;
 }
diff --git a/src/ui/src/components/workflows/abstract/WorkflowsNode.vue b/src/ui/src/components/workflows/abstract/WorkflowsNode.vue
index d8258abf8..d2e6f1163 100644
--- a/src/ui/src/components/workflows/abstract/WorkflowsNode.vue
+++ b/src/ui/src/components/workflows/abstract/WorkflowsNode.vue
@@ -188,12 +188,12 @@ watch(isEngaged, () => {
 	border-radius: 8px;
 	width: 240px;
 	position: absolute;
-	box-shadow: 0px 2px 0px 0px #f3f3f3;
+	box-shadow: var(--wdsShadowBox);
 	user-select: none;
 }
 
 .WorkflowsNode:hover {
-	border: 2px solid #e4e9ff;
+	border: 2px solid var(--wdsColorBlue2);
 }
 
 .title {
@@ -242,7 +242,7 @@ watch(isEngaged, () => {
 	font-weight: 400;
 	/* letter-spacing: 1.3px; */
 	/* text-transform: uppercase; */
-	color: #4f4f4f;
+	color: var(--wdsColorGray5);
 	font-feature-settings:
 		"liga" off,
 		"clig" off;
@@ -258,19 +258,19 @@ watch(isEngaged, () => {
 }
 
 .output .ball.success {
-	background: #3bdcab;
+	background: var(--wdsColorGreen5);
 }
 
 .output .ball.error {
-	background: #ff643c;
+	background: var(--wdsColorOrange5);
 }
 
 .output .ball.dynamic {
-	background: #a95ef8;
+	background: var(--wdsColorPurple4);
 }
 
 .WorkflowsNode.selected.component {
-	border: 2px solid #6985ff;
+	border: 2px solid var(--wdsColorBlue4);
 	background: var(--builderBackgroundColor);
 }
 </style>
diff --git a/src/ui/src/components/workflows/base/WorkflowMiniMap.vue b/src/ui/src/components/workflows/base/WorkflowMiniMap.vue
index bfc76612b..2da33001c 100644
--- a/src/ui/src/components/workflows/base/WorkflowMiniMap.vue
+++ b/src/ui/src/components/workflows/base/WorkflowMiniMap.vue
@@ -232,7 +232,7 @@ onUnmounted(() => {
 }
 
 .node.selected {
-	background: #6985ff;
+	background: var(--wdsColorBlue4);
 }
 
 .selectedArea {
@@ -248,7 +248,7 @@ onUnmounted(() => {
 	position: absolute;
 	top: 0px;
 	left: 0px;
-	border: 1px solid #6985ff;
+	border: 1px solid var(--wdsColorBlue4);
 	border-radius: 4px;
 	pointer-events: none;
 	display: v-bind("selector.isDisplayed ? '' : 'none'");
diff --git a/src/ui/src/renderer/ComponentRenderer.vue b/src/ui/src/renderer/ComponentRenderer.vue
index 7bc2b0e8a..0feb6cd02 100644
--- a/src/ui/src/renderer/ComponentRenderer.vue
+++ b/src/ui/src/renderer/ComponentRenderer.vue
@@ -41,6 +41,7 @@ import {
 	changeRouteVarsInHash,
 	serializeParsedHash,
 } from "@/core/navigation";
+import { WDS_CSS_PROPERTIES } from "@/wds/tokens";
 
 const wf = inject(injectionKeys.core);
 const wfbm = inject(injectionKeys.builderManager);
@@ -59,6 +60,7 @@ const coreRootFields = templateEvaluator.getEvaluatedFields([
 
 const rootStyle = computed(() => {
 	return {
+		...WDS_CSS_PROPERTIES,
 		"--accentColor": coreRootFields.accentColor?.value,
 		"--emptinessColor": coreRootFields.emptinessColor?.value,
 		"--containerBackgroundColor":
@@ -239,14 +241,14 @@ onMounted(() => {
 @import "./sharedStyles.css";
 
 .ComponentRenderer {
-	--accentColor: #5551ff;
-	--buttonColor: #5551ff;
-	--emptinessColor: #ffffff;
-	--separatorColor: #e4e7ed;
-	--primaryTextColor: #000000;
-	--buttonTextColor: #ffffff;
-	--secondaryTextColor: #828282;
-	--containerBackgroundColor: #ffffff;
+	--accentColor: var(--wdsColorBlue5);
+	--buttonColor: var(--wdsColorBlue5);
+	--emptinessColor: var(--wdsColorWhite);
+	--separatorColor: var(--wdsColorGray2);
+	--primaryTextColor: var(--wdsColorBlack);
+	--buttonTextColor: var(--wdsColorWhite);
+	--secondaryTextColor: var(--wdsColorGray4);
+	--containerBackgroundColor: var(--wdsColorWhite);
 	--containerShadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.05);
 	width: 100%;
 	outline: none;
diff --git a/src/ui/src/renderer/RendererNotifications.vue b/src/ui/src/renderer/RendererNotifications.vue
index 084d104bd..82fe2d1a1 100644
--- a/src/ui/src/renderer/RendererNotifications.vue
+++ b/src/ui/src/renderer/RendererNotifications.vue
@@ -103,7 +103,7 @@ const clearAll = () => {
 	max-width: 70ch;
 	width: 40vw;
 	z-index: 3;
-	--buttonColor: #5551ff;
+	--buttonColor: var(--wdsColorBlue5);
 }
 
 .balloonFlash {
diff --git a/src/ui/src/wds/WdsButton.vue b/src/ui/src/wds/WdsButton.vue
index c665c24d7..c75d20aea 100644
--- a/src/ui/src/wds/WdsButton.vue
+++ b/src/ui/src/wds/WdsButton.vue
@@ -66,62 +66,62 @@ const className = computed(() => [
 	background: var(--intensifiedButtonColor);
 }
 .WdsButton--primary:disabled {
-	border-color: #4a46da;
-	background-color: #4a46da;
+	border-color: var(--wdsColorBlue6);
+	background-color: var(--wdsColorBlue6);
 }
 
 /* VARIANTS -- secondary */
 
 .WdsButton--secondary {
 	color: var(--buttonTextColor);
-	background: #000000;
-	border-color: #000000;
+	background: var(--wdsColorBlack);
+	border-color: var(--wdsColorBlack);
 }
 
 .WdsButton--secondary:hover,
 .WdsButton--secondary:focus {
-	border-color: #333333;
-	background: #333333;
+	border-color: var(--wdsColorGray6);
+	background: var(--wdsColorGray6);
 }
 .WdsButton--secondary:disabled {
-	border-color: #333333;
-	background: #333333;
+	border-color: var(--wdsColorGray6);
+	background: var(--wdsColorGray6);
 	opacity: 40%;
 }
 
 /* VARIANTS -- tertiary */
 
 .WdsButton--tertiary {
-	color: #000000;
-	background: #ffffff;
-	border-color: #e4e7ed;
+	color: var(--wdsColorBlack);
+	background: var(--wdsColorWhite);
+	border-color: var(--wdsColorGray2);
 }
 
 .WdsButton--tertiary:hover,
 .WdsButton--tertiary:focus {
-	color: #828282;
+	color: var(--wdsColorGray4);
 }
 .WdsButton--tertiary:disabled {
-	color: #828282;
+	color: var(--wdsColorGray4);
 	opacity: 50%;
 }
 
 /* VARIANTS -- special */
 
 .WdsButton--special {
-	color: #5551ff;
-	background: #e4e9ff;
-	border-color: #e4e9ff;
+	color: var(--wdsColorBlue5);
+	background: var(--wdsColorBlue2);
+	border-color: var(--wdsColorBlue2);
 }
 
 .WdsButton--special:hover,
 .WdsButton--special:focus {
-	border-color: #bfcbff;
-	background: #bfcbff;
+	border-color: var(--wdsColorBlue3);
+	background: var(--wdsColorBlue3);
 }
 .WdsButton--special:disabled {
-	border-color: #e4e9ff;
-	background-color: #e4e9ff;
+	border-color: var(--wdsColorBlue2);
+	background-color: var(--wdsColorBlue2);
 	opacity: 0.4;
 }
 
diff --git a/src/ui/src/wds/WdsDropdownMenu.vue b/src/ui/src/wds/WdsDropdownMenu.vue
index 04d893e70..899305b98 100644
--- a/src/ui/src/wds/WdsDropdownMenu.vue
+++ b/src/ui/src/wds/WdsDropdownMenu.vue
@@ -86,7 +86,7 @@ watch(searchTerm, () => emits("search", searchTerm.value));
 <style scoped>
 .WdsDropdownMenu {
 	position: absolute;
-	border: 1px solid #394a6d;
+	border: 1px solid var(--wdsColorGray2);
 	border: none;
 	background: #fff;
 	z-index: 2;
@@ -97,7 +97,7 @@ watch(searchTerm, () => emits("search", searchTerm.value));
 
 	padding: 8px 10px;
 
-	box-shadow: 0px 1px 8px 0px #bfcbff40;
+	box-shadow: var(--wdsShadowMenu);
 	box-sizing: border-box;
 }
 .WdsDropdownMenu:has(.WdsDropdownMenu__search) {
@@ -120,7 +120,7 @@ watch(searchTerm, () => emits("search", searchTerm.value));
 	padding: 8px;
 	font-weight: 400;
 	font-size: 0.75rem;
-	color: #000000e6;
+	color: var(--wdsColorGray6);
 	cursor: pointer;
 	transition: all 0.2s;
 	pointer-events: all;
@@ -128,11 +128,11 @@ watch(searchTerm, () => emits("search", searchTerm.value));
 
 .WdsDropdownMenu__item:hover {
 	cursor: pointer;
-	background-color: #f3f5ff;
+	background-color: var(--wdsColorBlue1);
 }
 
 .WdsDropdownMenu__item--selected {
-	background-color: #e4e9ff;
+	background-color: var(--wdsColorBlue2);
 }
 .WdsDropdownMenu__item__label {
 	text-overflow: ellipsis;
@@ -141,7 +141,7 @@ watch(searchTerm, () => emits("search", searchTerm.value));
 }
 
 .WdsDropdownMenu__search {
-	background-color: #fafafa;
+	background-color: var(--wdsColorGray1);
 	border-radius: 4px;
 	height: 36px;
 	width: 100%;
@@ -160,11 +160,11 @@ watch(searchTerm, () => emits("search", searchTerm.value));
 	color: currentcolor;
 }
 .WdsDropdownMenu__search:hover {
-	border-color: #bfcbff;
+	border-color: var(--wdsColorBlue1);
 }
 .WdsDropdownMenu__search:focus-within {
 	background-color: white;
-	outline: 4px solid #f3f5ff;
+	outline: 4px solid var(--wdsColorBlue1);
 }
 
 .WdsDropdownMenu__search__input {
diff --git a/src/ui/src/wds/WdsTab.vue b/src/ui/src/wds/WdsTab.vue
index 2dfd619f4..0f6f0a49c 100644
--- a/src/ui/src/wds/WdsTab.vue
+++ b/src/ui/src/wds/WdsTab.vue
@@ -32,17 +32,15 @@ defineEmits({
 	border-radius: 8px;
 }
 
-/* TODO: use color tokens */
-
 .WdsTab:hover {
-	background-color: #f3f5ff;
+	background-color: var(--wdsColorBlue1);
 }
 
 .WdsTab--disabled {
-	color: #828282;
+	color: var(--wdsColorGray4);
 }
 
 .WdsTab--selected {
-	background-color: #e4e9ff;
+	background-color: var(--wdsColorBlue2);
 }
 </style>
diff --git a/src/ui/src/wds/WdsTextInput.vue b/src/ui/src/wds/WdsTextInput.vue
index 29a3edacf..858df72f1 100644
--- a/src/ui/src/wds/WdsTextInput.vue
+++ b/src/ui/src/wds/WdsTextInput.vue
@@ -87,7 +87,7 @@ function focus() {
 }
 
 .WdsTextInput--leftIcon i {
-	color: #4f4f4f;
+	color: var(--wdsColorGray5);
 }
 
 .WdsTextInput--leftIcon input {
diff --git a/src/ui/src/wds/tokens.ts b/src/ui/src/wds/tokens.ts
new file mode 100644
index 000000000..a0ee9b303
--- /dev/null
+++ b/src/ui/src/wds/tokens.ts
@@ -0,0 +1,63 @@
+import type { CSSProperties } from "vue";
+
+/**
+ * Colors from [Writer's design system](https://www.figma.com/design/jgLDtwVwg3hReC1t4Vw20D/.WDS-Writer-Design-System?node-id=1-2)
+ */
+export enum WdsColor {
+	White = "#ffffff",
+	Black = "#000000",
+
+	Blue1 = "#f3f5ff",
+	Blue2 = "#e4e9ff",
+	Blue3 = "#bfcbff",
+	Blue4 = "#6985ff",
+	Blue5 = "#5551ff",
+	Blue6 = "#4a46da",
+
+	Gray0 = "#fbfbfd",
+	Gray1 = "#f5f5f9",
+	Gray2 = "#e4e7ed",
+	Gray3 = "#d2d4d7",
+	Gray4 = "#828282",
+	Gray5 = "#4f4f4f",
+	Gray6 = "#333333",
+
+	Purple1 = "#f6effd",
+	Purple2 = "#ede2ff",
+	Purple3 = "#d4b2f7",
+	Purple4 = "#a95ef8",
+	Purple5 = "#721cc9",
+
+	Orange1 = "#fff4f1",
+	Orange2 = "#ffcfc2",
+	Orange4 = "#ff8866",
+	Orange5 = "#ff643c",
+
+	Green1 = "#f2fffb",
+	Green2 = "#d4fff2",
+	Green3 = "#a9f9e1",
+	Green5 = "#3bdcab",
+	Green6 = "#078660",
+}
+
+/**
+ * Shadows from [Writer's design system](https://www.figma.com/design/jgLDtwVwg3hReC1t4Vw20D/.WDS-Writer-Design-System?node-id=1-14)
+ */
+export enum WdsShadow {
+	Box = "0px 2px 0px 0px #f3f3f3",
+	Menu = "0px 1px 8px 0px #bfcbff40",
+	Large = "0px 3px 40px 0px #acb9dc66",
+}
+
+export const WDS_CSS_PROPERTIES = Object.freeze<CSSProperties>(
+	Object.fromEntries([
+		...Object.entries(WdsColor).map(([key, value]) => [
+			`--wdsColor${key}`,
+			value,
+		]),
+		...Object.entries(WdsShadow).map(([key, value]) => [
+			`--wdsShadow${key}`,
+			value,
+		]),
+	]),
+);