diff --git a/webdev-prosjekt1/src/App.css b/webdev-prosjekt1/src/App.css
index bc61640..549c75c 100644
--- a/webdev-prosjekt1/src/App.css
+++ b/webdev-prosjekt1/src/App.css
@@ -1,16 +1,11 @@
-:root {
-	font-family: 'Trebuchet MS', sans-serif;
-	color: #d4af37;
-	background: #11100f;
-}
-
 * {
 	box-sizing: border-box;
 }
 
 body {
-	margin: 0;
+	margin: var(--margin);
 	min-width: 320px;
+	font-family: var(--font_family);
 }
 
 .app-shell {
@@ -30,7 +25,7 @@ body {
 }
 
 .app-title {
-	color: rgb(212, 175, 55);
+	color: var(--primary_color);
 	text-decoration: none;
 	display: inline-flex;
 	align-items: stretch;
@@ -49,7 +44,7 @@ body {
 	top: 0;
 
 	height: 100%;
-	margin: 0;
+	margin: var(--margin);
 }
 
 .app-logo {
@@ -64,7 +59,7 @@ body {
 .app-title-text {
 	font-size: 48px;
 	line-height: 0.95;
-	margin: 0;
+	margin: var(--margin);
 }
 
 .header-note {
@@ -105,7 +100,7 @@ body {
 .hero-art {
 	position: relative;
 
-	margin: 0;
+	margin: var(--margin);
 
 	width: 520px;
 	min-height: 460px;
diff --git a/webdev-prosjekt1/src/App.tsx b/webdev-prosjekt1/src/App.tsx
index f4455a2..8a99c73 100644
--- a/webdev-prosjekt1/src/App.tsx
+++ b/webdev-prosjekt1/src/App.tsx
@@ -1,4 +1,5 @@
 import './App.css';
+import './variables.css';
 import { Button } from './components/Button';
 import { Searchbar } from './components/Searchbar';
 import filterIcon from './assets/filter.png';
diff --git a/webdev-prosjekt1/src/components/Button.css b/webdev-prosjekt1/src/components/Button.css
index da742a0..22ba9db 100644
--- a/webdev-prosjekt1/src/components/Button.css
+++ b/webdev-prosjekt1/src/components/Button.css
@@ -5,11 +5,11 @@ button {
 
 	padding: 0 18px;
 
-	border: 1px solid #eab342;
-	border-radius: 4px;
+	border: 1px solid var(--primary_color);
+	border-radius: var(--box_border_radius);
 
-	color: #17130d;
-	background: #eab342;
+	color: var(--primary_background_color);
+	background: var(--primary_color);
 
 	font: inherit;
 	font-weight: 700;
diff --git a/webdev-prosjekt1/src/components/Searchbar.css b/webdev-prosjekt1/src/components/Searchbar.css
index 1a0228e..0aac8e5 100644
--- a/webdev-prosjekt1/src/components/Searchbar.css
+++ b/webdev-prosjekt1/src/components/Searchbar.css
@@ -9,7 +9,7 @@
 	padding: 0 16px;
 
 	border: 1px solid #716044;
-	border-radius: 4px;
+    border-radius: var(--box_border_radius);
 
 	background: rgba(20, 18, 15, 0.8);
 }
@@ -17,7 +17,7 @@
 .search-icon {
 	margin-right: 10px;
 
-	color: #eab342;
+	color: var(--primary_color);
 
 	font-size: 1.6rem;
 	line-height: 1;
@@ -42,5 +42,5 @@
 }
 
 .searchbar:focus-within {
-	border-color: #eab342;
+	border-color: var(--primary_color);
 }
diff --git a/webdev-prosjekt1/src/components/Searchbar.tsx b/webdev-prosjekt1/src/components/Searchbar.tsx
index 926d269..d07b068 100644
--- a/webdev-prosjekt1/src/components/Searchbar.tsx
+++ b/webdev-prosjekt1/src/components/Searchbar.tsx
@@ -1,4 +1,5 @@
 import './Searchbar.css';
+import '../variables.css';
 
 export const Searchbar = () => {
 	return (
diff --git a/webdev-prosjekt1/src/index.css b/webdev-prosjekt1/src/index.css
index 13cb8b9..fac3d9c 100644
--- a/webdev-prosjekt1/src/index.css
+++ b/webdev-prosjekt1/src/index.css
@@ -4,5 +4,5 @@ body {
 
 button,
 input {
-  font-family: inherit;
+  font-family: var(--font_family);
 }
\ No newline at end of file
diff --git a/webdev-prosjekt1/src/main.tsx b/webdev-prosjekt1/src/main.tsx
index bef5202..931804e 100644
--- a/webdev-prosjekt1/src/main.tsx
+++ b/webdev-prosjekt1/src/main.tsx
@@ -1,6 +1,7 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import './index.css'
+import './variables.css'
 import App from './App.tsx'
 
 createRoot(document.getElementById('root')!).render(
diff --git a/webdev-prosjekt1/src/variables.css b/webdev-prosjekt1/src/variables.css
new file mode 100644
index 0000000..1071547
--- /dev/null
+++ b/webdev-prosjekt1/src/variables.css
@@ -0,0 +1,7 @@
+:root {
+	--font_family: sans-serif;
+	--primary_color: #d4af37;
+	--primary_background_color: #11100f;
+	--box_border_radius: 4px;
+    --margin: 0;
+}
\ No newline at end of file