diff --git a/src/lib/Button.svelte b/src/lib/Button.svelte
index 07696e3..041f8bc 100644
--- a/src/lib/Button.svelte
+++ b/src/lib/Button.svelte
@@ -64,8 +64,8 @@
 <button
 	class={[
 		'button group relative flex gap-3 overflow-hidden rounded-sm px-5',
-		'text-background cursor-pointer py-3 font-medium transition-colors',
-		!loading ? ' bg-primary hover:bg-secondary' : 'bg-primary/50 cursor-not-allowed ',
+		'text-sui-background cursor-pointer py-3 font-medium transition-colors',
+		!loading ? ' bg-sui-primary hover:bg-sui-secondary' : 'bg-sui-primary/50 cursor-not-allowed ',
 		classValue
 	]}
 	onclick={handleButtonClick}
diff --git a/src/lib/Checkbox.svelte b/src/lib/Checkbox.svelte
index f51ce1b..f26b635 100644
--- a/src/lib/Checkbox.svelte
+++ b/src/lib/Checkbox.svelte
@@ -54,11 +54,11 @@
 	<button
 		{id}
 		class={[
-			'text-text flex size-7 appearance-none items-center',
+			'text-sui-text flex size-7 appearance-none items-center',
 			'justify-center rounded-lg shadow transition-all hover:opacity-75',
 			color === 'default' && 'bg-white',
 			color === 'contrast' && 'border-text/40 border bg-white',
-			!valid && 'border-accent-400 border'
+			!valid && 'border-sui-accent-400 border'
 		]}
 		onclick={() => {
 			if (value === false || value === 'indeterminate') {
@@ -79,14 +79,14 @@
 	{#if children}
 		<label
 			class={[
-				'text-text pl-4 font-medium transition-colors select-none',
-				!valid && 'text-accent-400'
+				'text-sui-text pl-4 font-medium transition-colors select-none',
+				!valid && 'text-sui-accent-400'
 			]}
 			for={id}
 		>
 			{@render children()}
 			{#if required}
-				<span class="text-accent-400">*</span>
+				<span class="text-sui-accent-400">*</span>
 			{/if}
 		</label>
 	{/if}
diff --git a/src/lib/Combobox.svelte b/src/lib/Combobox.svelte
index dfc12d2..b97f718 100644
--- a/src/lib/Combobox.svelte
+++ b/src/lib/Combobox.svelte
@@ -253,8 +253,8 @@
 			class={[
 				'picker absolute top-0 left-0 z-50 overflow-y-auto px-2 py-3',
 				'rounded-sm border shadow-lg shadow-black/25 outline-hidden',
-				'border-accent dark:border-accent/50 dark:bg-text-800 bg-white dark:sm:bg-slate-800',
-				'text-text dark:text-background',
+				'border-sui-accent dark:border-sui-accent/50 dark:bg-sui-text-800 bg-white dark:sm:bg-slate-800',
+				'text-sui-text dark:text-sui-background',
 				open && pickerPosition === 'top' && 'mb-[var(--outer-gap)]',
 				open && pickerPosition === 'bottom' && 'mt-[var(--outer-gap)]'
 			]}
@@ -279,8 +279,8 @@
 					class={[
 						'picker-item options-center mb-0.5 flex min-h-10 flex-wrap py-2.5 pr-1.5 pl-5',
 						'rounded-sm text-sm capitalize outline-hidden select-none',
-						'hover:bg-accent-500/30 dark:hover:bg-accent-700/30',
-						item.value === highlighted?.value && 'bg-accent-500/80 dark:bg-accent-700/80'
+						'hover:bg-sui-accent-500/30 dark:hover:bg-sui-accent-700/30',
+						item.value === highlighted?.value && 'bg-sui-accent-500/80 dark:bg-sui-accent-700/80'
 					]}
 					role="option"
 					onclick={() => {
@@ -305,7 +305,7 @@
 					</div>
 
 					{#if item?.infotext}
-						<div class="text-text/80 dark:text-background/80 ml-auto text-sm">
+						<div class="text-sui-text/80 dark:text-sui-background/80 ml-auto text-sm">
 							{item.infotext}
 						</div>
 					{/if}
@@ -441,7 +441,7 @@
 			<div
 				class={[
 					'pointer-events-none absolute top-1/2 -translate-y-1/2 transform text-sm select-none',
-					'text-text/80 dark:text-background/80',
+					'text-sui-text/80 dark:text-sui-background/80',
 					caret ? 'end-10' : 'end-[1.125rem]'
 				]}
 			>
diff --git a/src/lib/DateInput.svelte b/src/lib/DateInput.svelte
index 4e47fbd..8fb3985 100644
--- a/src/lib/DateInput.svelte
+++ b/src/lib/DateInput.svelte
@@ -210,9 +210,9 @@
 		bind:this={containerElement}
 		class={[
 			'inline-flex w-54 items-center justify-start gap-1',
-			'border-accent rounded-sm border bg-white px-[1.125rem] py-3.5 font-normal transition-colors',
-			'text-text dark:border-accent/50 dark:bg-text-800 dark:text-background dark:sm:bg-slate-800',
-			'ring-accent focus-within:ring-1',
+			'border-sui-accent rounded-sm border bg-white px-[1.125rem] py-3.5 font-normal transition-colors',
+			'text-sui-text dark:border-sui-accent/50 dark:bg-sui-text-800 dark:text-sui-background dark:sm:bg-slate-800',
+			'ring-sui-accent focus-within:ring-1',
 			!valid && 'border-red-500!'
 		]}
 	>
@@ -228,7 +228,7 @@
 			{@render snippet()}
 
 			{#if i < inputSnippets.length - 1}
-				<span class="text-text/60 dark:text-background/60">-</span>
+				<span class="text-sui-text/60 dark:text-sui-background/60">-</span>
 			{/if}
 		{/each}
 
@@ -314,7 +314,7 @@
 	@reference "./styles/theme.css";
 
 	.date-input {
-		@apply ring-accent dark:ring-accent/50 h-6 min-w-[1ch] outline-0 transition-all focus:ring-2;
+		@apply ring-sui-accent dark:ring-sui-accent/50 h-6 min-w-[1ch] outline-0 transition-all focus:ring-2;
 	}
 	.date-input.invalid {
 		@apply ring-red-500!;
diff --git a/src/lib/FramelessButton.svelte b/src/lib/FramelessButton.svelte
index f46cd4d..d67d235 100644
--- a/src/lib/FramelessButton.svelte
+++ b/src/lib/FramelessButton.svelte
@@ -27,7 +27,7 @@
 
 <button
 	class={[
-		'text-accent hover:text-primary inline-flex cursor-pointer items-center gap-1.5 transition-colors',
+		'text-sui-accent hover:text-sui-primary inline-flex cursor-pointer items-center gap-1.5 transition-colors',
 		disabled && 'pointer-events-none cursor-not-allowed opacity-50',
 		classValue
 	]}
diff --git a/src/lib/Label.svelte b/src/lib/Label.svelte
index c0e7bf9..fe7ea4c 100644
--- a/src/lib/Label.svelte
+++ b/src/lib/Label.svelte
@@ -19,7 +19,7 @@
 		'transition-fontColor block',
 		error && !bigError
 			? 'mt-1 text-sm font-normal text-red-500'
-			: 'text-text dark:text-background mb-2 text-base font-medium',
+			: 'text-sui-text dark:text-sui-background mb-2 text-base font-medium',
 		bigError && 'text-red-500!',
 		classValue
 	]}
diff --git a/src/lib/Link.svelte b/src/lib/Link.svelte
index 8101013..b3aa972 100644
--- a/src/lib/Link.svelte
+++ b/src/lib/Link.svelte
@@ -49,7 +49,7 @@
 
 <a
 	class={[
-		'text-accent hover:text-primary inline-flex items-center gap-1.5 transition-colors',
+		'text-sui-accent hover:text-sui-primary inline-flex items-center gap-1.5 transition-colors',
 		disabled && 'pointer-events-none cursor-not-allowed opacity-50',
 		classValue
 	]}
diff --git a/src/lib/PinInput.svelte b/src/lib/PinInput.svelte
index 6095b66..2ed9922 100644
--- a/src/lib/PinInput.svelte
+++ b/src/lib/PinInput.svelte
@@ -180,9 +180,9 @@
 					class={[
 						'px[1.125rem] w-[5ch] rounded-sm pt-4 pb-3.5 transition-colors',
 						'text-center align-middle font-mono font-normal placeholder:font-normal',
-						'border-accent dark:border-accent/50 border',
-						'text-text placeholder:text-text/30 dark:text-background dark:placeholder:text-background/30',
-						'dark:bg-text-800 bg-white dark:sm:bg-slate-800',
+						'border-sui-accent dark:border-sui-accent/50 border',
+						'text-sui-text placeholder:text-sui-text/30 dark:text-sui-background dark:placeholder:text-sui-background/30',
+						'dark:bg-sui-text-800 bg-white dark:sm:bg-slate-800',
 						!valid && i >= value.length && 'border-red-500!'
 					]}
 					value={value[i] || ''}
diff --git a/src/lib/RadioGroup.svelte b/src/lib/RadioGroup.svelte
index ba1133e..bfe3473 100644
--- a/src/lib/RadioGroup.svelte
+++ b/src/lib/RadioGroup.svelte
@@ -37,19 +37,19 @@
 		{#each options as opt}
 			{@const item = group.getItem(getValue(opt))}
 			<div
-				class="ring-accent-500 group -ml-1 flex items-center gap-3 rounded p-1 outline-hidden focus-visible:ring-3
+				class="ring-sui-accent-500 group -ml-1 flex items-center gap-3 rounded p-1 outline-hidden focus-visible:ring-3
 					data-disabled:cursor-not-allowed data-disabled:opacity-50"
 				{...item.attrs}
 			>
 				<div
-					class="group-aria-[checked]:border-accent-500 dark:hover:bg-text-800 relative size-6
+					class="group-aria-[checked]:border-sui-accent-500 dark:hover:bg-sui-text-800 relative size-6
 					rounded-full border-2 border-neutral-400 bg-neutral-100 shadow-sm
 					group-aria-[checke]:bg-transparent hover:bg-gray-100 data-[disabled=true]:bg-gray-400
 					dark:border-white dark:bg-transparent dark:sm:hover:bg-slate-800"
 				>
 					{#if item.checked}
 						<div
-							class="group-aria-[checked]:bg-accent-500 absolute top-1/2 left-1/2 size-3 -translate-x-1/2 -translate-y-1/2
+							class="group-aria-[checked]:bg-sui-accent-500 absolute top-1/2 left-1/2 size-3 -translate-x-1/2 -translate-y-1/2
 							rounded-full"
 							aria-hidden="true"
 							transition:scale={{ duration: 75 }}
diff --git a/src/lib/StateMachine.svelte b/src/lib/StateMachine.svelte
index 16dbdcd..897ea51 100644
--- a/src/lib/StateMachine.svelte
+++ b/src/lib/StateMachine.svelte
@@ -312,8 +312,8 @@
 		<div
 			class="relative flex h-6 w-7 items-center justify-center rounded-3xl bg-white
 					text-sm dark:bg-slate-600 {index === i
-				? 'bg-accent-500!  text-background dark:bg-accent-700!'
-				: ''} {i < index ? 'text-background bg-green-600!' : ''} {i > index
+				? 'bg-sui-accent-500!  text-sui-background dark:bg-sui-accent-700!'
+				: ''} {i < index ? 'text-sui-background bg-green-600!' : ''} {i > index
 				? 'scale-[0.85] opacity-80'
 				: ''}
 					transition-[transform,background-color,color]"
@@ -334,7 +334,7 @@
 	<!-- Back button -->
 	{#if backButtonVisible}
 		<button
-			class="text-text hover:text-text-700 dark:text-background dark:hover:text-background/80 flex cursor-pointer items-center
+			class="text-sui-text hover:text-sui-text-700 dark:text-sui-background dark:hover:text-sui-background/80 flex cursor-pointer items-center
 			gap-2.5 font-medium transition-colors"
 			onclick={() => (index -= 1)}
 			transition:fly={{ x: -200, duration: 200 }}
@@ -378,7 +378,7 @@
 		<div
 			class={[
 				'absolute inset-0 backdrop-blur-md transition-colors',
-				hero.colour === 'light' ? 'bg-accent/80' : 'bg-[#00283C]/80'
+				hero.colour === 'light' ? 'bg-sui-accent/80' : 'bg-[#00283C]/80'
 			]}
 		></div>
 
@@ -407,7 +407,7 @@
 			<!-- Form page -->
 			{#key index}
 				<div
-					class="text-text dark:text-background absolute top-0 right-0 left-0"
+					class="text-sui-text dark:text-sui-background absolute top-0 right-0 left-0"
 					in:flyIn
 					out:flyOut
 					bind:this={pageContainer}
@@ -448,7 +448,7 @@
 
 	.progress {
 		@apply flex cursor-default items-center justify-center gap-3 overflow-hidden rounded-3xl px-3 py-2;
-		@apply dark:bg-text-800 bg-gray-200/80 dark:lg:bg-slate-800;
-		@apply text-text/60 dark:text-background/60 font-semibold;
+		@apply dark:bg-sui-text-800 bg-gray-200/80 dark:lg:bg-slate-800;
+		@apply text-sui-text/60 dark:text-sui-background/60 font-semibold;
 	}
 </style>
diff --git a/src/lib/StyledRawInput.svelte b/src/lib/StyledRawInput.svelte
index 2737314..16e6206 100644
--- a/src/lib/StyledRawInput.svelte
+++ b/src/lib/StyledRawInput.svelte
@@ -44,9 +44,9 @@
 	{...others}
 	bind:value
 	class={[
-		'border-accent w-full rounded-sm border bg-white px-[1.125rem] py-3.5 font-normal transition-colors',
-		'text-text placeholder:text-text/60 dark:border-accent/50 dark:bg-text-800 placeholder:font-normal',
-		'dark:text-background dark:placeholder:text-background/60 dark:sm:bg-slate-800',
+		'border-sui-accent w-full rounded-sm border bg-white px-[1.125rem] py-3.5 font-normal transition-colors',
+		'text-sui-text placeholder:text-sui-text/60 dark:border-sui-accent/50 dark:bg-sui-text-800 placeholder:font-normal',
+		'dark:text-sui-background dark:placeholder:text-sui-background/60 dark:sm:bg-slate-800',
 		'placeholder-shown:text-ellipsis',
 		!valid && 'border-red-500!',
 		others.class
diff --git a/src/lib/TimeInput.svelte b/src/lib/TimeInput.svelte
index f744b97..6e0328d 100644
--- a/src/lib/TimeInput.svelte
+++ b/src/lib/TimeInput.svelte
@@ -380,10 +380,10 @@
 	}
 
 	.ampm {
-		@apply border-accent dark:border-accent/50 cursor-pointer px-3 py-1 font-medium;
+		@apply border-sui-accent dark:border-sui-accent/50 cursor-pointer px-3 py-1 font-medium;
 
 		&.selected {
-			@apply bg-accent text-background dark:bg-accent/30 dark:text-background/90 ring-text ring-1 dark:ring-blue-300;
+			@apply bg-sui-accent text-sui-background dark:bg-sui-accent/30 dark:text-sui-background/90 ring-sui-text ring-1 dark:ring-blue-300;
 		}
 	}
 </style>
diff --git a/src/lib/ToggleSelect.svelte b/src/lib/ToggleSelect.svelte
index bfbdd0c..36ada83 100644
--- a/src/lib/ToggleSelect.svelte
+++ b/src/lib/ToggleSelect.svelte
@@ -28,8 +28,8 @@
 	class={[
 		'rounded-3xl border px-6 py-2.5 font-medium transition-colors',
 		selected
-			? 'border-secondary bg-primary text-background hover:bg-primary-600'
-			: 'border-accent text-text dark:border-accent/50 dark:bg-text dark:text-background dark:hover:bg-text-900 bg-white hover:bg-slate-100',
+			? 'border-secondary bg-sui-primary text-sui-background hover:bg-sui-primary-600'
+			: 'border-sui-accent text-sui-text dark:border-sui-accent/50 dark:bg-sui-text dark:text-sui-background dark:hover:bg-sui-text-900 bg-white hover:bg-slate-100',
 		classValue
 	]}
 	onclick={handleToggleSelectClick}
diff --git a/src/lib/styles/theme.css b/src/lib/styles/theme.css
index 52abae5..4dcc85d 100644
--- a/src/lib/styles/theme.css
+++ b/src/lib/styles/theme.css
@@ -25,63 +25,63 @@
 	);
 
 	/* Primary Colors */
-	--color-primary-50: var(--ui-primary-50, #f0f8fe);
-	--color-primary-100: var(--ui-primary-100, #ddeefc);
-	--color-primary-200: var(--ui-primary-200, #c2e3fb);
-	--color-primary-300: var(--ui-primary-300, #98d2f8);
-	--color-primary-400: var(--ui-primary-400, #68b9f2);
-	--color-primary-500: var(--ui-primary-500, #459bec);
-	--color-primary-600: var(--ui-primary-600, #2f80e1);
-	--color-primary-700: var(--ui-primary-700, #2463c1);
-	--color-primary-800: var(--ui-primary-800, #2556a8);
-	--color-primary-900: var(--ui-primary-900, #234b85);
-	--color-primary-950: var(--ui-primary-950, #1a2f51);
-	--color-primary: var(--ui-primary, #2463c1);
+	--color-sui-primary-50: var(--ui-primary-50, #f0f8fe);
+	--color-sui-primary-100: var(--ui-primary-100, #ddeefc);
+	--color-sui-primary-200: var(--ui-primary-200, #c2e3fb);
+	--color-sui-primary-300: var(--ui-primary-300, #98d2f8);
+	--color-sui-primary-400: var(--ui-primary-400, #68b9f2);
+	--color-sui-primary-500: var(--ui-primary-500, #459bec);
+	--color-sui-primary-600: var(--ui-primary-600, #2f80e1);
+	--color-sui-primary-700: var(--ui-primary-700, #2463c1);
+	--color-sui-primary-800: var(--ui-primary-800, #2556a8);
+	--color-sui-primary-900: var(--ui-primary-900, #234b85);
+	--color-sui-primary-950: var(--ui-primary-950, #1a2f51);
+	--color-sui-primary: var(--ui-primary, #2463c1);
 
 	/* Secondary Colors */
-	--color-secondary-50: var(--ui-secondary-50, #f2f7fc);
-	--color-secondary-100: var(--ui-secondary-100, #e1edf8);
-	--color-secondary-200: var(--ui-secondary-200, #cbe0f2);
-	--color-secondary-300: var(--ui-secondary-300, #a7cce9);
-	--color-secondary-400: var(--ui-secondary-400, #7cb1de);
-	--color-secondary-500: var(--ui-secondary-500, #5d95d4);
-	--color-secondary-600: var(--ui-secondary-600, #487bc6);
-	--color-secondary-700: var(--ui-secondary-700, #3f69b6);
-	--color-secondary-800: var(--ui-secondary-800, #395694);
-	--color-secondary-900: var(--ui-secondary-900, #324a76);
-	--color-secondary-950: var(--ui-secondary-950, #222f49);
-	--color-secondary: var(--ui-secondary, #487bc6);
+	--color-sui-secondary-50: var(--ui-secondary-50, #f2f7fc);
+	--color-sui-secondary-100: var(--ui-secondary-100, #e1edf8);
+	--color-sui-secondary-200: var(--ui-secondary-200, #cbe0f2);
+	--color-sui-secondary-300: var(--ui-secondary-300, #a7cce9);
+	--color-sui-secondary-400: var(--ui-secondary-400, #7cb1de);
+	--color-sui-secondary-500: var(--ui-secondary-500, #5d95d4);
+	--color-sui-secondary-600: var(--ui-secondary-600, #487bc6);
+	--color-sui-secondary-700: var(--ui-secondary-700, #3f69b6);
+	--color-sui-secondary-800: var(--ui-secondary-800, #395694);
+	--color-sui-secondary-900: var(--ui-secondary-900, #324a76);
+	--color-sui-secondary-950: var(--ui-secondary-950, #222f49);
+	--color-sui-secondary: var(--ui-secondary, #487bc6);
 
 	/* Accent Colors */
-	--color-accent-50: var(--ui-accent-50, #f0f9ff);
-	--color-accent-100: var(--ui-accent-100, #e1f2fd);
-	--color-accent-200: var(--ui-accent-200, #bbe7fc);
-	--color-accent-300: var(--ui-accent-300, #7fd3fa);
-	--color-accent-400: var(--ui-accent-400, #3cbef4);
-	--color-accent-500: var(--ui-accent-500, #12a5e5);
-	--color-accent-600: var(--ui-accent-600, #068cce);
-	--color-accent-700: var(--ui-accent-700, #066a9e);
-	--color-accent-800: var(--ui-accent-800, #095983);
-	--color-accent-900: var(--ui-accent-900, #0e4b6c);
-	--color-accent-950: var(--ui-accent-950, #093048);
-	--color-accent: var(--ui-accent, #068cce);
+	--color-sui-accent-50: var(--ui-accent-50, #f0f9ff);
+	--color-sui-accent-100: var(--ui-accent-100, #e1f2fd);
+	--color-sui-accent-200: var(--ui-accent-200, #bbe7fc);
+	--color-sui-accent-300: var(--ui-accent-300, #7fd3fa);
+	--color-sui-accent-400: var(--ui-accent-400, #3cbef4);
+	--color-sui-accent-500: var(--ui-accent-500, #12a5e5);
+	--color-sui-accent-600: var(--ui-accent-600, #068cce);
+	--color-sui-accent-700: var(--ui-accent-700, #066a9e);
+	--color-sui-accent-800: var(--ui-accent-800, #095983);
+	--color-sui-accent-900: var(--ui-accent-900, #0e4b6c);
+	--color-sui-accent-950: var(--ui-accent-950, #093048);
+	--color-sui-accent: var(--ui-accent, #068cce);
 
 	/* Text Colors */
-	--color-text-50: var(--ui-text-50, #f6f6f6);
-	--color-text-100: var(--ui-text-100, #e7e7e7);
-	--color-text-200: var(--ui-text-200, #d1d1d1);
-	--color-text-300: var(--ui-text-300, #b0b0b0);
-	--color-text-400: var(--ui-text-400, #888888);
-	--color-text-500: var(--ui-text-500, #6d6d6d);
-	--color-text-600: var(--ui-text-600, #5d5d5d);
-	--color-text-700: var(--ui-text-700, #4f4f4f);
-	--color-text-800: var(--ui-text-800, #454545);
-	--color-text-900: var(--ui-text-900, #3d3d3d);
-	--color-text-950: var(--ui-text-950, #2a2a2a);
-	--color-text: var(--ui-text, #2a2a2a);
+	--color-sui-text-50: var(--ui-text-50, #f6f6f6);
+	--color-sui-text-100: var(--ui-text-100, #e7e7e7);
+	--color-sui-text-200: var(--ui-text-200, #d1d1d1);
+	--color-sui-text-300: var(--ui-text-300, #b0b0b0);
+	--color-sui-text-400: var(--ui-text-400, #888888);
+	--color-sui-text-500: var(--ui-text-500, #6d6d6d);
+	--color-sui-text-600: var(--ui-text-600, #5d5d5d);
+	--color-sui-text-700: var(--ui-text-700, #4f4f4f);
+	--color-sui-text-800: var(--ui-text-800, #454545);
+	--color-sui-text-900: var(--ui-text-900, #3d3d3d);
+	--color-sui-text-950: var(--ui-text-950, #2a2a2a);
+	--color-sui-text: var(--ui-text, #2a2a2a);
 
 	/* Background */
-	--color-background: var(--ui-background, #f2efec);
+	--color-sui-background: var(--ui-background, #f2efec);
 
 	/* Shadows */
 	--shadow-centre: var(--ui-shadow-centre, 0 0 80px -6px rgb(0 0 0 / 0.25));
@@ -100,6 +100,6 @@
 	::before,
 	::backdrop,
 	::file-selector-button {
-		border-color: var(--color-gray-200, currentcolor);
+		border-color: var(--color-sui-gray-200, currentcolor);
 	}
 }