diff --git a/src/settings/styles/global/_config.scss b/src/settings/styles/global/_config.scss
index e69de29..307b882 100644
--- a/src/settings/styles/global/_config.scss
+++ b/src/settings/styles/global/_config.scss
@@ -0,0 +1,40 @@
+@use '../utils/resources/colors' as var;
+@use '../utils/resources/fonts' as fonts;
+
+:root {
+	@each $name, $value in var.$clr-common {
+		--clr-common-#{$name}: #{$value};
+	}
+
+	--clr-primary-purple-500: #{map-get(var.$clr-primary-purple, '500')};
+
+	@each $name, $value in var.$clr-gray {
+		--clr-gray-#{$name}: #{$value};
+	}
+
+	--font-family-100: #{fonts.$font-family-100};
+}
+
+body {
+	font-family: var(--font-family-100);
+}
+
+body {
+	--txt-xxs: 10px;
+	--txt-xs: 12px;
+	--txt-small: 13px;
+	--txt-normal: 14px;
+	--txt-medium: 16px;
+	--txt-large: 18px;
+	--txt-xl: 24px;
+
+	@media screen and (min-width: 2500px) {
+		--txt-xxs: 20px;
+		--txt-xs: 24px;
+		--txt-small: 26px;
+		--txt-normal: 28px;
+		--txt-medium: 32px;
+		--txt-large: 36px;
+		--txt-xl: 48px;
+	}
+}
diff --git a/src/settings/styles/global/_reset.scss b/src/settings/styles/global/_reset.scss
index e69de29..d87d2c7 100644
--- a/src/settings/styles/global/_reset.scss
+++ b/src/settings/styles/global/_reset.scss
@@ -0,0 +1,22 @@
+* {
+	margin: 0;
+	padding: 0;
+	box-sizing: border-box;
+}
+
+a {
+	text-decoration: none;
+}
+
+li,
+ol,
+ul {
+	list-style: none;
+}
+
+img {
+	display: block;
+
+	max-width: 100%;
+	height: auto;
+}
diff --git a/src/settings/styles/index.scss b/src/settings/styles/index.scss
index e69de29..8862798 100644
--- a/src/settings/styles/index.scss
+++ b/src/settings/styles/index.scss
@@ -0,0 +1,2 @@
+@import './global/exports.scss';
+@import './utils/exports.scss';
diff --git a/src/settings/styles/utils/exports.scss b/src/settings/styles/utils/exports.scss
index 0fb0027..026d749 100644
--- a/src/settings/styles/utils/exports.scss
+++ b/src/settings/styles/utils/exports.scss
@@ -1,4 +1,4 @@
-@import './resources/colors.scss';
-@import './resources/fonts.scss';
+@import './resources/colors';
+@import './resources/fonts';
 @import './helpers/mixin';
 @import './helpers/functions';
diff --git a/src/settings/styles/utils/resources/_colors.scss b/src/settings/styles/utils/resources/_colors.scss
new file mode 100644
index 0000000..f4a7497
--- /dev/null
+++ b/src/settings/styles/utils/resources/_colors.scss
@@ -0,0 +1,24 @@
+$clr-common: (
+	'black': #000,
+	'white': #fff,
+	'red': #ff0000,
+	'green': hsl(120, 100%, 25%),
+);
+
+$clr-primary-purple: (
+	'500': #5200ff,
+);
+
+$clr-gray: (
+	'100': hsl(0, 0%, 98%),
+	'200': hsl(0, 0%, 95%),
+	'300': hsl(0, 0%, 78%),
+	'400': hsl(0, 0%, 77%),
+	'450': hsl(0, 1%, 72%),
+	'500': hsl(0, 0%, 57%),
+	'600': hsl(0, 0%, 49%),
+	'700': hsl(0, 0%, 37%),
+	'800': hsl(0, 0%, 19%),
+	'900': hsl(0, 0%, 16%),
+	'1000': hsl(340, 10%, 6%),
+);
diff --git a/src/settings/styles/utils/resources/_fonts.scss b/src/settings/styles/utils/resources/_fonts.scss
new file mode 100644
index 0000000..b8774db
--- /dev/null
+++ b/src/settings/styles/utils/resources/_fonts.scss
@@ -0,0 +1 @@
+$font-family-100: 'Roboto', Arial, Helvetica, sans-serif;
diff --git a/src/settings/styles/utils/resources/colors.scss b/src/settings/styles/utils/resources/colors.scss
deleted file mode 100644
index e69de29..0000000
diff --git a/src/settings/styles/utils/resources/fonts.scss b/src/settings/styles/utils/resources/fonts.scss
deleted file mode 100644
index e69de29..0000000