diff --git a/lib/src/components/Button/button.styles.css.ts b/lib/src/components/Button/button.styles.css.ts
index 2c41b23..2a624cd 100644
--- a/lib/src/components/Button/button.styles.css.ts
+++ b/lib/src/components/Button/button.styles.css.ts
@@ -1,54 +1,124 @@
 import { recipe } from "@vanilla-extract/recipes";
 
+import { defaultVars, lightVars, ghostVars, hallowVars } from "src/themes";
+
 export const buttonStyles = recipe({
-  base: {
-    borderRadius: 4,
-    color: "white",
-    cursor: "pointer",
-  },
+	base: {
+		borderRadius: 4,
+		color: "white",
+		cursor: "pointer",
+	},
 
-  variants: {
-    variant: {
-      default: {
-        background: "#1AB5EB",
-        border: 0,
-      },
-      light: {
-        background: "#F9F9F9",
-        color: "#1AB5EB",
-        border: "1px solid #DDD",
-      },
-      ghost: {
-        background: "none",
-        border: 0,
-        color: "#1AB5EB",
-      },
-      hallow: {
-        background: "none",
-        border: "1px solid  #1AB5EB",
-        color: "#1AB5EB",
-      },
-    },
-    padding: {
-      default: { padding: 0 },
-      small: { padding: "8px 16px" },
-      medium: { padding: "8px 16px" },
-      large: { padding: 24 },
-    },
-    fontSize: {
-      small: { fontSize: 14 },
-      medium: { fontSize: 16 },
-      large: { fontSize: 24 },
-    },
-    margin: {
-      default: { margin: 0 },
-      small: { margin: 12 },
-      medium: { margin: 16 },
-      large: { margin: 24 },
-    },
-    isBlock: {
-      true: { width: "100%" },
-      false: { width: "auto" },
-    },
-  },
+	variants: {
+		variant: {
+			default: {
+				background: defaultVars.backgroundColor,
+				color: defaultVars.color,
+				borderColor: defaultVars.borderColor,
+				border: 0,
+				":hover": {
+					background: defaultVars.hoverBackgroundColor,
+					color: defaultVars.hoverColor,
+					borderColor: defaultVars.hoverBorderColor,
+				},
+				":focus": {
+					borderWidth: "2px",
+					background: defaultVars.focusBackgroundColor,
+					color: defaultVars.focusColor,
+					borderColor: defaultVars.focusBorderColor,
+				},
+				":disabled": {
+					background: defaultVars.disabledBackgroundColor,
+					color: defaultVars.disabledColor,
+					borderColor: defaultVars.disabledBorderColor,
+				},
+			},
+			light: {
+				background: lightVars.backgroundColor,
+				color: lightVars.color,
+				border: "1px solid",
+				borderColor: lightVars.borderColor,
+				":hover": {
+					background: lightVars.hoverBackgroundColor,
+					color: lightVars.hoverColor,
+					borderColor: lightVars.hoverBorderColor,
+				},
+				":focus": {
+					borderWidth: "2px",
+					background: lightVars.focusBackgroundColor,
+					color: lightVars.focusColor,
+					borderColor: lightVars.focusBorderColor,
+				},
+				":disabled": {
+					background: lightVars.disabledBackgroundColor,
+					color: lightVars.disabledColor,
+					borderColor: lightVars.disabledBorderColor,
+				},
+			},
+			ghost: {
+				background: ghostVars.backgroundColor,
+				border: 0,
+				color: ghostVars.color,
+				":hover": {
+					background: ghostVars.hoverBackgroundColor,
+					color: ghostVars.hoverColor,
+					borderColor: ghostVars.hoverBorderColor,
+				},
+				":focus": {
+					borderWidth: "2px",
+					background: ghostVars.focusBackgroundColor,
+					color: ghostVars.focusColor,
+					borderColor: ghostVars.focusBorderColor,
+				},
+				":disabled": {
+					background: ghostVars.disabledBackgroundColor,
+					color: ghostVars.disabledColor,
+					borderColor: ghostVars.disabledBorderColor,
+				},
+			},
+			hallow: {
+				background: hallowVars.backgroundColor,
+				border: "1px solid",
+				color: hallowVars.color,
+				borderColor: hallowVars.borderColor,
+				":hover": {
+					background: hallowVars.hoverBackgroundColor,
+					color: hallowVars.hoverColor,
+					borderColor: hallowVars.hoverBorderColor,
+				},
+				":focus": {
+					borderWidth: "2px",
+					background: hallowVars.focusBackgroundColor,
+					color: hallowVars.focusColor,
+					borderColor: hallowVars.focusBorderColor,
+				},
+				":disabled": {
+					background: hallowVars.disabledBackgroundColor,
+					color: hallowVars.disabledColor,
+					borderColor: hallowVars.disabledBorderColor,
+				},
+			},
+		},
+		padding: {
+			default: { padding: 0 },
+			small: { padding: "8px 16px" },
+			medium: { padding: "8px 16px" },
+			large: { padding: 24 },
+		},
+		fontSize: {
+			small: { fontSize: 14 },
+			medium: { fontSize: 16 },
+			large: { fontSize: 24 },
+		},
+		margin: {
+			default: { margin: 0 },
+			small: { margin: 12 },
+			medium: { margin: 16 },
+			large: { margin: 24 },
+		},
+		isBlock: {
+			true: { width: "100%" },
+			false: { width: "auto" },
+		},
+	},
 });
diff --git a/lib/src/components/Button/button.types.ts b/lib/src/components/Button/button.types.ts
index a744496..6a3d941 100644
--- a/lib/src/components/Button/button.types.ts
+++ b/lib/src/components/Button/button.types.ts
@@ -2,4 +2,4 @@ import { RecipeVariants } from "@vanilla-extract/recipes";
 import { buttonStyles } from "./button.styles.css";
 
 export type ButtonProps = RecipeVariants<typeof buttonStyles> &
-  JSX.IntrinsicElements["button"];
+	JSX.IntrinsicElements["button"];
diff --git a/lib/src/styles/colors.ts b/lib/src/styles/colors.ts
new file mode 100644
index 0000000..34f11cd
--- /dev/null
+++ b/lib/src/styles/colors.ts
@@ -0,0 +1,15 @@
+export const Colors = {
+	white: "#FFFFFF",
+	defaultBackground: "#1AB5EB",
+	defaultHover: "#008FCB",
+	defaultFocus: "#1AB5EB40",
+	defaultFocusBorder: "#C6EDFB",
+	defaultDisabledBlue: "#8CDAF5",
+	lightBackground: "#F9F9F9",
+	lightBorder: "#DDDDDD",
+	lightHover: "#F0F0F0",
+	hallowHover: "#AAAAAA",
+	hallowDisabled: "#878787",
+	hallowDisabledBorder: "#EEEEEE",
+	hallowFocus: "#101010",
+};
diff --git a/lib/src/themes/index.ts b/lib/src/themes/index.ts
new file mode 100644
index 0000000..0753a01
--- /dev/null
+++ b/lib/src/themes/index.ts
@@ -0,0 +1,80 @@
+import { Colors } from "src/styles/colors";
+import { createTheme } from "@vanilla-extract/css";
+
+export type Theme = [
+	string,
+	{
+		color: string;
+		backgroundColor: string;
+		borderColor: string;
+		hoverColor: string;
+		hoverBackgroundColor: string;
+		hoverBorderColor: string;
+		focusColor: string;
+		focusBackgroundColor: string;
+		focusBorderColor: string;
+		disabledColor: string;
+		disabledBackgroundColor: string;
+		disabledBorderColor: string;
+	}
+];
+
+export const [defaultTheme, defaultVars]: Theme = createTheme({
+	color: Colors.white,
+	backgroundColor: Colors.defaultBackground,
+	borderColor: "none",
+	hoverBackgroundColor: Colors.defaultHover,
+	hoverColor: Colors.white,
+	hoverBorderColor: "none",
+	focusBackgroundColor: Colors.defaultFocus,
+	focusColor: Colors.white,
+	focusBorderColor: Colors.defaultFocusBorder,
+	disabledBackgroundColor: Colors.defaultDisabledBlue,
+	disabledColor: Colors.white,
+	disabledBorderColor: "none",
+});
+
+export const [lightTheme, lightVars]: Theme = createTheme({
+	color: Colors.defaultBackground,
+	backgroundColor: Colors.lightBackground,
+	borderColor: Colors.lightBorder,
+	hoverBackgroundColor: Colors.lightHover,
+	hoverColor: Colors.defaultHover,
+	hoverBorderColor: "none",
+	focusBackgroundColor: Colors.lightBackground,
+	focusColor: Colors.defaultBackground,
+	focusBorderColor: Colors.defaultFocusBorder,
+	disabledBackgroundColor: Colors.lightBackground,
+	disabledColor: Colors.defaultBackground,
+	disabledBorderColor: Colors.lightBorder,
+});
+
+export const [ghostTheme, ghostVars]: Theme = createTheme({
+	color: Colors.defaultBackground,
+	backgroundColor: "none",
+	borderColor: "none",
+	hoverBackgroundColor: "#0000000D",
+	hoverColor: Colors.defaultHover,
+	hoverBorderColor: "none",
+	focusBackgroundColor: "none",
+	focusColor: Colors.defaultBackground,
+	focusBorderColor: Colors.defaultFocusBorder,
+	disabledBackgroundColor: "none",
+	disabledColor: Colors.defaultBackground,
+	disabledBorderColor: "",
+});
+
+export const [hallowTheme, hallowVars]: Theme = createTheme({
+	color: Colors.defaultBackground,
+	backgroundColor: "none",
+	borderColor: Colors.defaultBackground,
+	hoverBackgroundColor: "none",
+	hoverColor: Colors.defaultBackground,
+	hoverBorderColor: Colors.hallowHover,
+	focusBackgroundColor: "none",
+	focusColor: Colors.hallowFocus,
+	focusBorderColor: Colors.defaultFocusBorder,
+	disabledBackgroundColor: "none",
+	disabledColor: Colors.hallowDisabled,
+	disabledBorderColor: Colors.hallowDisabledBorder,
+});