diff --git a/src/app/cart/page.tsx b/src/app/cart/page.tsx
index 2ddf740b3..624c91fea 100644
--- a/src/app/cart/page.tsx
+++ b/src/app/cart/page.tsx
@@ -23,7 +23,7 @@ export default async function Page() {
 					<ul role="list" className="divide-y divide-gray-200 border-b border-t border-gray-200">
 						{lines.map((item) => (
 							<li key={item.id} className="flex py-4">
-								<div className="flex-shrink-0 rounded-md border bg-slate-50">
+								<div className="flex-shrink-0 rounded-md border bg-gray-50">
 									{item.variant?.product?.thumbnail?.url && (
 										<Image
 											src={item.variant.product.thumbnail.url}
@@ -59,7 +59,7 @@ export default async function Page() {
 				</div>
 
 				<div className="mt-12">
-					<div className="rounded border bg-slate-50 px-4 py-2">
+					<div className="rounded border bg-gray-50 px-4 py-2">
 						<div className="flex items-center justify-between py-2">
 							<div>
 								<p className="font-semibold text-gray-900">Your Total</p>
diff --git a/src/app/categories/[slug]/page.tsx b/src/app/categories/[slug]/page.tsx
index fc6b2bd84..be41a8f67 100644
--- a/src/app/categories/[slug]/page.tsx
+++ b/src/app/categories/[slug]/page.tsx
@@ -28,7 +28,7 @@ export default async function Page({ params }: { params: { slug: string } }) {
 
 	return (
 		<div>
-			<div className="border-b bg-slate-100/50">
+			<div className="border-b bg-gray-100/50">
 				<div className="mx-auto max-w-7xl p-8">
 					<h1 className="text-xl font-semibold">{name}</h1>
 				</div>
diff --git a/src/app/error.tsx b/src/app/error.tsx
index 4cd9679d2..b0866aa9b 100644
--- a/src/app/error.tsx
+++ b/src/app/error.tsx
@@ -10,8 +10,8 @@ export default function Error({ error, reset }: { error: Error; reset: () => voi
 	return (
 		<div className="bg-white">
 			<div className="mx-auto max-w-7xl px-6 py-12">
-				<h1 className="text-2xl font-bold leading-10 tracking-tight text-slate-800">Something went wrong</h1>
-				<p className="mt-6 max-w-2xl text-base leading-7 text-slate-600">
+				<h1 className="text-2xl font-bold leading-10 tracking-tight text-gray-800">Something went wrong</h1>
+				<p className="mt-6 max-w-2xl text-base leading-7 text-gray-600">
 					<code>{error.message}</code>
 				</p>
 				<button
diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx
index 15ad745b3..36989d5f1 100644
--- a/src/app/login/page.tsx
+++ b/src/app/login/page.tsx
@@ -24,7 +24,7 @@ export default function LoginPage() {
 					<UserCard email={data.me.email} avatarURL={data.me.avatar?.url || ""} />
 					<button
 						onClick={() => signOut()}
-						className="rounded bg-slate-800 px-4 py-2 text-slate-200 hover:bg-slate-700"
+						className="rounded bg-gray-800 px-4 py-2 text-gray-200 hover:bg-gray-700"
 						type="button"
 					>
 						Log Out
diff --git a/src/app/products/[slug]/page.tsx b/src/app/products/[slug]/page.tsx
index b37c89e65..f16941a41 100644
--- a/src/app/products/[slug]/page.tsx
+++ b/src/app/products/[slug]/page.tsx
@@ -120,7 +120,7 @@ export default async function Page(props: { params: { slug: string }; searchPara
 				)}
 				<div className="flex flex-col pt-6 sm:px-6 sm:pt-0">
 					<div>
-						<h1 className="mb-4 flex-auto text-3xl font-bold tracking-tight text-slate-900">
+						<h1 className="mb-4 flex-auto text-3xl font-bold tracking-tight text-gray-900">
 							{product?.name}
 						</h1>
 						<p className="mb-8 text-sm font-medium text-gray-900">
@@ -140,7 +140,7 @@ export default async function Page(props: { params: { slug: string }; searchPara
 						)}
 						<div className="mt-6 flex items-center">
 							<CheckIcon className="h-5 w-5 flex-shrink-0 text-blue-500" aria-hidden="true" />
-							<p className="ml-1 text-sm font-semibold text-slate-500">In stock</p>
+							<p className="ml-1 text-sm font-semibold text-gray-500">In stock</p>
 						</div>
 					</div>
 
diff --git a/src/app/products/page.tsx b/src/app/products/page.tsx
index 79e8958e4..c3113bd59 100644
--- a/src/app/products/page.tsx
+++ b/src/app/products/page.tsx
@@ -31,7 +31,7 @@ export default async function Page({ searchParams }: Props) {
 
 	return (
 		<div>
-			<div className="border-b bg-slate-100/50">
+			<div className="border-b bg-gray-100/50">
 				<div className="mx-auto max-w-7xl p-8">
 					<h1 className="text-xl font-semibold">All products</h1>
 				</div>
diff --git a/src/checkout/components/AddressSkeleton.tsx b/src/checkout/components/AddressSkeleton.tsx
index 597dd2eb8..22190796e 100644
--- a/src/checkout/components/AddressSkeleton.tsx
+++ b/src/checkout/components/AddressSkeleton.tsx
@@ -3,7 +3,7 @@ import { Skeleton } from "@/checkout/components";
 
 export const AddressSkeleton = () => {
 	return (
-		<div className="mb-2 rounded border border-slate-200 px-6 pb-4 pt-6" data-testid="addressSkeleton">
+		<div className="mb-2 rounded border border-gray-200 px-6 pb-4 pt-6" data-testid="addressSkeleton">
 			<Skeleton className="w-1/3" />
 			<Skeleton className="w-2/3" />
 			<Skeleton className="w-1/2" />
diff --git a/src/checkout/components/Button.tsx b/src/checkout/components/Button.tsx
index 96b3ae401..d185a2697 100644
--- a/src/checkout/components/Button.tsx
+++ b/src/checkout/components/Button.tsx
@@ -22,9 +22,9 @@ export const Button: FC<ButtonProps> = ({
 	const classes = clsx(
 		"inline-flex h-10 items-center justify-center whitespace-nowrap rounded border active:outline-none",
 		{
-			"bg-slate-400 hover:bg-slate-300 hover:border-slate-600 active:bg-slate-300 disabled:border-none disabled:bg-slate-200 aria-disabled:border-none aria-disabled:bg-slate-200":
+			"bg-gray-400 hover:bg-gray-300 hover:border-gray-600 active:bg-gray-300 disabled:border-none disabled:bg-gray-200 aria-disabled:border-none aria-disabled:bg-gray-200":
 				variant === "primary",
-			"border-slate-600 hover:border-slate-700 hover:bg-slate-300 active:bg-slate-300 disabled:border-slate-300 aria-disabled:border-slate-300 bg-transparent disabled:bg-transparent aria-disabled:bg-transparent":
+			"border-gray-600 hover:border-gray-700 hover:bg-gray-300 active:bg-gray-300 disabled:border-gray-300 aria-disabled:border-gray-300 bg-transparent disabled:bg-transparent aria-disabled:bg-transparent":
 				variant === "secondary",
 			"h-auto border-none bg-transparent p-0": variant === "tertiary",
 		},
diff --git a/src/checkout/components/Divider/Divider.tsx b/src/checkout/components/Divider/Divider.tsx
index 2f3c588f8..cb17c949d 100644
--- a/src/checkout/components/Divider/Divider.tsx
+++ b/src/checkout/components/Divider/Divider.tsx
@@ -3,7 +3,7 @@ import React from "react";
 import { type Classes } from "@/checkout/lib/globalTypes";
 
 export const Divider: React.FC<Classes> = ({ className }) => {
-	const classes = clsx("border-slate-200 h-px w-full border-t", className);
+	const classes = clsx("border-gray-200 h-px w-full border-t", className);
 
 	return <div className={classes} />;
 };
diff --git a/src/checkout/components/SelectBox/SelectBox.tsx b/src/checkout/components/SelectBox/SelectBox.tsx
index 1546820b7..2d6002efe 100644
--- a/src/checkout/components/SelectBox/SelectBox.tsx
+++ b/src/checkout/components/SelectBox/SelectBox.tsx
@@ -27,9 +27,9 @@ export const SelectBox = <TFieldName extends string>({
 	return (
 		<label
 			className={clsx(
-				"relative mb-2 flex cursor-pointer flex-row items-center justify-start rounded border border-slate-400 px-3 py-2",
-				"hover:border hover:border-slate-500",
-				{ "border border-slate-500": selected, "pointer-events-none hover:border-slate-400": disabled },
+				"relative mb-2 flex cursor-pointer flex-row items-center justify-start rounded border border-gray-400 px-3 py-2",
+				"hover:border hover:border-gray-500",
+				{ "border border-gray-500": selected, "pointer-events-none hover:border-gray-400": disabled },
 				className,
 			)}
 		>
diff --git a/src/checkout/components/TextInput.tsx b/src/checkout/components/TextInput.tsx
index 7b0a63287..d5467cf72 100644
--- a/src/checkout/components/TextInput.tsx
+++ b/src/checkout/components/TextInput.tsx
@@ -23,7 +23,7 @@ export const TextInputComponent = <TName extends string>({
 	return (
 		<div>
 			<label className="block">
-				<span className="text-xs text-slate-700">
+				<span className="text-xs text-gray-700">
 					{label}
 					{required && "*"}
 				</span>
@@ -33,7 +33,7 @@ export const TextInputComponent = <TName extends string>({
 					{...field}
 					{...props}
 					className={clsx(
-						"mt-0.5 block w-full appearance-none rounded-md border-slate-300 shadow-sm transition-colors focus:border-indigo-300 focus:outline-none focus:ring focus:ring-indigo-200 focus:ring-opacity-50 active:border-indigo-200 active:outline-none",
+						"mt-0.5 block w-full appearance-none rounded-md border-gray-300 shadow-sm transition-colors focus:border-indigo-300 focus:outline-none focus:ring focus:ring-indigo-200 focus:ring-opacity-50 active:border-indigo-200 active:outline-none",
 						{ "border-red-300": error },
 						props.className,
 					)}
diff --git a/src/checkout/sections/DeliveryMethods/DeliveryMethodsSkeleton.tsx b/src/checkout/sections/DeliveryMethods/DeliveryMethodsSkeleton.tsx
index 9edf5ce46..de3e70470 100644
--- a/src/checkout/sections/DeliveryMethods/DeliveryMethodsSkeleton.tsx
+++ b/src/checkout/sections/DeliveryMethods/DeliveryMethodsSkeleton.tsx
@@ -5,7 +5,7 @@ export const DeliveryMethodsSkeleton = () => {
 	return (
 		<div className="py-6">
 			<Skeleton variant="title" className="w-1/3" />
-			<div className="rounded border border-slate-200 px-6 pb-4 pt-6">
+			<div className="rounded border border-gray-200 px-6 pb-4 pt-6">
 				<Skeleton className="w-2/3" />
 				<Skeleton className="w-1/3" />
 			</div>
diff --git a/src/checkout/sections/PageHeader/LanguageSelect.tsx b/src/checkout/sections/PageHeader/LanguageSelect.tsx
index 2a640ee0f..8a94258a8 100644
--- a/src/checkout/sections/PageHeader/LanguageSelect.tsx
+++ b/src/checkout/sections/PageHeader/LanguageSelect.tsx
@@ -22,7 +22,7 @@ export const LanguageSelect = () => {
 			<select
 				value={locale}
 				onChange={(event) => handleLanguageChange(event.currentTarget.value as Locale)}
-				className="h-10 w-full cursor-pointer appearance-none rounded border border-slate-600 px-3 py-2 pr-12 text-base"
+				className="h-10 w-full cursor-pointer appearance-none rounded border border-gray-600 px-3 py-2 pr-12 text-base"
 			>
 				{locales.map((locale) => (
 					<option value={locale} key={locale}>
diff --git a/src/checkout/sections/PaymentSection/PaymentSectionSkeleton.tsx b/src/checkout/sections/PaymentSection/PaymentSectionSkeleton.tsx
index 0d79173c8..5dc5337de 100644
--- a/src/checkout/sections/PaymentSection/PaymentSectionSkeleton.tsx
+++ b/src/checkout/sections/PaymentSection/PaymentSectionSkeleton.tsx
@@ -7,7 +7,7 @@ export const PaymentSectionSkeleton: React.FC<PaymentSectionSkeletonProps> = ({}
 	return (
 		<div className="py-6">
 			<Skeleton variant="title" />
-			<div className="mt-4 flex flex-row items-center rounded border border-slate-200 px-6 pb-4 pt-6">
+			<div className="mt-4 flex flex-row items-center rounded border border-gray-200 px-6 pb-4 pt-6">
 				<Skeleton className="mr-4 w-1/5" />
 				<Skeleton className="mr-4 w-1/5" />
 				<Skeleton className="w-1/5" />
diff --git a/src/checkout/views/EmptyCartPage/EmptyCartPage.tsx b/src/checkout/views/EmptyCartPage/EmptyCartPage.tsx
index 07f670193..5f3ee26c0 100644
--- a/src/checkout/views/EmptyCartPage/EmptyCartPage.tsx
+++ b/src/checkout/views/EmptyCartPage/EmptyCartPage.tsx
@@ -11,7 +11,7 @@ export const EmptyCartPage = () => {
 
 	return (
 		<div className="flex w-full flex-row justify-center lg:mt-10">
-			<div className="flex flex-col justify-start rounded-lg border border-slate-400 py-6">
+			<div className="flex flex-col justify-start rounded-lg border border-gray-400 py-6">
 				<Title>{formatMessage(emptyCartMessages.emptyCart)}</Title>
 				<p>{formatMessage(emptyCartMessages.addToCardToContinue)}</p>
 				<Button
diff --git a/src/checkout/views/OrderConfirmation/OrderConfirmationSkeleton.tsx b/src/checkout/views/OrderConfirmation/OrderConfirmationSkeleton.tsx
index 2acbe8d53..6bfc18674 100644
--- a/src/checkout/views/OrderConfirmation/OrderConfirmationSkeleton.tsx
+++ b/src/checkout/views/OrderConfirmation/OrderConfirmationSkeleton.tsx
@@ -12,7 +12,7 @@ export const OrderConfirmationSkeleton = () => {
 				<Skeleton className="w-2/3" />
 			</header>
 			<main className="mt-8 flex w-full flex-col overflow-hidden lg:flex-row lg:items-start">
-				<div className="w-1/2 rounded border border-slate-200 px-6 pb-4 pt-6">
+				<div className="w-1/2 rounded border border-gray-200 px-6 pb-4 pt-6">
 					<div className="mb-10">
 						<Skeleton variant="title" />
 						<Skeleton />
diff --git a/src/ui/atoms/Loader.tsx b/src/ui/atoms/Loader.tsx
index dbf805188..77281e1f9 100644
--- a/src/ui/atoms/Loader.tsx
+++ b/src/ui/atoms/Loader.tsx
@@ -4,7 +4,7 @@ export function Loader() {
 			<div role="status">
 				<svg
 					aria-hidden="true"
-					className="mr-2 inline h-12 w-12 animate-spin fill-slate-600 text-gray-200 dark:text-gray-600"
+					className="mr-2 inline h-12 w-12 animate-spin fill-gray-600 text-gray-200 dark:text-gray-600"
 					viewBox="0 0 100 101"
 					fill="none"
 					xmlns="http://www.w3.org/2000/svg"
diff --git a/src/ui/components/ActiveLink.tsx b/src/ui/components/ActiveLink.tsx
index 05efc43ab..e1c4e7fcd 100644
--- a/src/ui/components/ActiveLink.tsx
+++ b/src/ui/components/ActiveLink.tsx
@@ -22,7 +22,7 @@ export function ActiveLink({
 			key={key}
 			href={href}
 			className={clsx(
-				isActive ? "border-slate-500" : "border-transparent",
+				isActive ? "border-gray-500" : "border-transparent",
 				"inline-flex items-center border-b-2 px-1 pt-1 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700",
 			)}
 		>
diff --git a/src/ui/components/Footer.tsx b/src/ui/components/Footer.tsx
index db4ee8f29..d052269d5 100644
--- a/src/ui/components/Footer.tsx
+++ b/src/ui/components/Footer.tsx
@@ -12,7 +12,7 @@ const footer = {
 };
 export function Footer() {
 	return (
-		<footer className="border-t border-slate-300 bg-slate-50">
+		<footer className="border-t border-gray-300 bg-gray-50">
 			<div className="mx-auto max-w-7xl px-4 lg:px-8">
 				<div className="grid grid-cols-3 gap-8 py-16">
 					<h2 className="sr-only">Quick links</h2>
diff --git a/src/ui/components/LoginForm.tsx b/src/ui/components/LoginForm.tsx
index 0c844bbcb..603eb5eff 100644
--- a/src/ui/components/LoginForm.tsx
+++ b/src/ui/components/LoginForm.tsx
@@ -65,7 +65,7 @@ export function LoginForm() {
 					/>
 				</div>
 
-				<button className="rounded bg-slate-800 px-4 py-2 text-slate-200 hover:bg-slate-700" type="submit">
+				<button className="rounded bg-gray-800 px-4 py-2 text-gray-200 hover:bg-gray-700" type="submit">
 					Log In
 				</button>
 			</form>
diff --git a/src/ui/components/Nav.tsx b/src/ui/components/Nav.tsx
index fc645fe8c..35adf89e9 100644
--- a/src/ui/components/Nav.tsx
+++ b/src/ui/components/Nav.tsx
@@ -19,7 +19,7 @@ export async function Nav() {
 	const lines = checkout ? checkout.lines : [];
 
 	return (
-		<div className="sticky top-0 z-20 border-b bg-slate-100/75 backdrop-blur-md">
+		<div className="sticky top-0 z-20 border-b bg-gray-100/75 backdrop-blur-md">
 			<div className="mx-auto max-w-7xl px-2 lg:px-8">
 				<div className="flex h-16 justify-between gap-8">
 					<div className="flex overflow-x-auto whitespace-nowrap px-2 lg:px-0">
diff --git a/src/ui/components/Pagination.tsx b/src/ui/components/Pagination.tsx
index 3764b8053..96b4a7f4f 100644
--- a/src/ui/components/Pagination.tsx
+++ b/src/ui/components/Pagination.tsx
@@ -10,7 +10,7 @@ export async function Pagination({
 	};
 }) {
 	return (
-		<nav className="flex items-center justify-center gap-x-4 border-slate-200 px-4">
+		<nav className="flex items-center justify-center gap-x-4 border-gray-200 px-4">
 			<Link
 				href={pageInfo.hasNextPage ? `/products?cursor=${pageInfo.endCursor}` : "#"}
 				className={clsx("px-4 py-2 text-sm font-medium ", {
diff --git a/src/ui/components/Topbar.tsx b/src/ui/components/Topbar.tsx
index c1d3b64e5..b237acfdb 100644
--- a/src/ui/components/Topbar.tsx
+++ b/src/ui/components/Topbar.tsx
@@ -10,10 +10,10 @@ export function Topbar() {
 	const { data } = useQuery<CurrentUserQuery>(gql(CurrentUserDocument.toString()));
 
 	return (
-		<div className="border-b border-slate-100 bg-slate-800">
+		<div className="border-b border-gray-100 bg-gray-800">
 			<div className="mx-auto flex h-10 max-w-7xl items-center justify-between px-4 sm:px-6 lg:px-8">
 				<div></div>
-				<div className="flex items-center text-center text-sm font-medium text-slate-50 hover:text-slate-300">
+				<div className="flex items-center text-center text-sm font-medium text-gray-50 hover:text-gray-300">
 					<StarIcon className="mr-2 h-4 text-yellow-300" />
 					<Link href="https://github.com/saleor/storefront" target="_blank">
 						Star our Storefront Example on GitHub
@@ -22,11 +22,11 @@ export function Topbar() {
 
 				<div className="flex flex-1 items-center justify-end">
 					{data?.me ? (
-						<button onClick={() => signOut()} className="text-sm font-medium text-white hover:text-slate-300">
+						<button onClick={() => signOut()} className="text-sm font-medium text-white hover:text-gray-300">
 							Logout
 						</button>
 					) : (
-						<Link href="/login" className="text-sm font-medium text-white hover:text-slate-300">
+						<Link href="/login" className="text-sm font-medium text-white hover:text-gray-300">
 							Login
 						</Link>
 					)}
diff --git a/src/ui/components/UserCard.tsx b/src/ui/components/UserCard.tsx
index 548cbdfea..916a080f8 100644
--- a/src/ui/components/UserCard.tsx
+++ b/src/ui/components/UserCard.tsx
@@ -8,7 +8,7 @@ type UserCardProps = {
 export const UserCard = (user: UserCardProps) => {
 	const { email, avatarURL } = user;
 	return (
-		<div className="rounded-xl bg-white p-4 dark:bg-slate-800 md:flex">
+		<div className="rounded-xl bg-white p-4 dark:bg-gray-800 md:flex">
 			<Image
 				className="h-24 w-24 rounded-full md:rounded-none "
 				src={avatarURL}