diff --git a/src/components/index.ts b/src/components/index.ts
new file mode 100644
index 0000000..04bca77
--- /dev/null
+++ b/src/components/index.ts
@@ -0,0 +1 @@
+export * from './utils';
diff --git a/src/components/utils/Variant.ts b/src/components/utils/Variant.ts
new file mode 100644
index 0000000..f4a6f3c
--- /dev/null
+++ b/src/components/utils/Variant.ts
@@ -0,0 +1,2 @@
+export enum Variant {
+}
diff --git a/src/components/utils/index.ts b/src/components/utils/index.ts
new file mode 100644
index 0000000..145fbbe
--- /dev/null
+++ b/src/components/utils/index.ts
@@ -0,0 +1 @@
+export { Variant } from './Variant';
diff --git a/src/style/base/_base.scss b/src/style/base/_base.scss
new file mode 100644
index 0000000..942fb8a
--- /dev/null
+++ b/src/style/base/_base.scss
@@ -0,0 +1,3 @@
+html {
+    font-size: 14px;
+}
diff --git a/src/style/base/_colors.scss b/src/style/base/_colors.scss
new file mode 100644
index 0000000..5e1ea0c
--- /dev/null
+++ b/src/style/base/_colors.scss
@@ -0,0 +1,247 @@
+$colors: (
+    'red': (
+        50: hsl(351, 100%, 96%),
+        75: hsl(354, 100%, 94%),
+        100: hsl(354, 100%, 90%),
+        200: hsl(0, 73%, 77%),
+        300: hsl(0, 69%, 67%),
+        400: hsl(1, 83%, 63%),
+        500: hsl(4, 90%, 58%),
+        600: hsl(1, 77%, 55%),
+        700: hsl(0, 65%, 51%),
+        800: hsl(0, 66%, 47%),
+        900: hsl(0, 73%, 41%)
+    ),
+    'pink': (
+        50: hsl(340, 80%, 94%),
+        75: hsl(340, 80%, 90%),
+        100: hsl(339, 81%, 85%),
+        200: hsl(340, 82%, 76%),
+        300: hsl(340, 83%, 66%),
+        400: hsl(340, 82%, 59%),
+        500: hsl(340, 82%, 52%),
+        600: hsl(338, 78%, 48%),
+        700: hsl(336, 78%, 43%),
+        800: hsl(334, 79%, 38%),
+        900: hsl(328, 81%, 29%)
+    ),
+    'purple': (
+        50: hsl(292, 44%, 93%),
+        100: hsl(292, 44%, 87%),
+        200: hsl(291, 47%, 71%),
+        300: hsl(291, 47%, 60%),
+        400: hsl(291, 47%, 51%),
+        500: hsl(291, 64%, 42%),
+        600: hsl(287, 65%, 40%),
+        700: hsl(282, 68%, 38%),
+        800: hsl(277, 70%, 35%),
+        900: hsl(267, 75%, 31%)
+    ),
+    'deepPurple': (
+        50: hsl(264, 45%, 94%),
+        75: hsl(264, 45%, 90%),
+        100: hsl(261, 46%, 84%),
+        200: hsl(261, 46%, 74%),
+        300: hsl(262, 47%, 63%),
+        400: hsl(262, 47%, 55%),
+        500: hsl(262, 52%, 47%),
+        600: hsl(260, 54%, 45%),
+        700: hsl(258, 58%, 42%),
+        800: hsl(255, 61%, 39%),
+        900: hsl(251, 69%, 34%)
+    ),
+    'indigo': (
+        50: hsl(231, 44%, 94%),
+        75: hsl(231, 44%, 90%),
+        100: hsl(232, 45%, 84%),
+        200: hsl(231, 44%, 74%),
+        300: hsl(230, 44%, 64%),
+        400: hsl(231, 44%, 56%),
+        500: hsl(231, 48%, 48%),
+        600: hsl(232, 50%, 45%),
+        700: hsl(232, 54%, 41%),
+        800: hsl(233, 57%, 37%),
+        900: hsl(235, 66%, 30%)
+    ),
+    'blue': (
+        50: hsl(205, 87%, 94%),
+        100: hsl(205, 88%, 90%),
+        200: hsl(207, 90%, 77%),
+        300: hsl(207, 89%, 68%),
+        400: hsl(207, 90%, 61%),
+        500: hsl(207, 90%, 54%),
+        600: hsl(208, 79%, 51%),
+        700: hsl(210, 79%, 46%),
+        800: hsl(212, 80%, 42%),
+        900: hsl(216, 85%, 34%)
+    ),
+    'lightBlue': (
+        50: hsl(199, 94%, 94%),
+        75: hsl(199, 92%, 90%),
+        100: hsl(199, 92%, 85%),
+        200: hsl(199, 92%, 74%),
+        300: hsl(199, 91%, 64%),
+        400: hsl(199, 92%, 56%),
+        500: hsl(199, 98%, 48%),
+        600: hsl(200, 97%, 45%),
+        700: hsl(201, 98%, 41%),
+        800: hsl(202, 98%, 37%),
+        900: hsl(206, 99%, 31%)
+    ),
+    'cyan': (
+        50: hsl(187, 72%, 93%),
+        75: hsl(187, 72%, 90%),
+        100: hsl(187, 71%, 82%),
+        200: hsl(187, 72%, 71%),
+        300: hsl(187, 71%, 59%),
+        400: hsl(187, 71%, 50%),
+        500: hsl(187, 100%, 42%),
+        600: hsl(187, 100%, 38%),
+        700: hsl(186, 100%, 33%),
+        800: hsl(185, 100%, 28%),
+        900: hsl(182, 100%, 20%)
+    ),
+    'teal': (
+        50: hsl(177, 72%, 93%),
+        75: hsl(175, 72%, 90%),
+        100: hsl(174, 71%, 82%),
+        200: hsl(174, 72%, 71%),
+        300: hsl(174, 71%, 59%),
+        400: hsl(174, 71%, 50%),
+        500: hsl(187, 100%, 42%),
+        600: hsl(187, 100%, 38%),
+        700: hsl(186, 100%, 33%),
+        800: hsl(185, 100%, 28%),
+        900: hsl(182, 100%, 20%)
+    ),
+    'green': (
+        50: hsl(125, 39%, 94%),
+        75: hsl(122, 37%, 90%),
+        100: hsl(122, 37%, 84%),
+        200: hsl(122, 37%, 74%),
+        300: hsl(123, 38%, 64%),
+        400: hsl(123, 38%, 57%),
+        500: hsl(122, 39%, 49%),
+        600: hsl(123, 41%, 45%),
+        700: hsl(123, 43%, 39%),
+        800: hsl(123, 46%, 34%),
+        900: hsl(124, 55%, 24%)
+    ),
+    'lightGreen': (
+        50: hsl(88, 52%, 94%),
+        75: hsl(88, 51%, 89%),
+        100: hsl(88, 51%, 86%),
+        200: hsl(88, 50%, 76%),
+        300: hsl(88, 50%, 67%),
+        400: hsl(88, 50%, 60%),
+        500: hsl(88, 50%, 53%),
+        600: hsl(89, 46%, 48%),
+        700: hsl(92, 48%, 42%),
+        800: hsl(95, 49%, 36%),
+        900: hsl(103, 56%, 26%)
+    ),
+    'lime': (
+        50: hsl(66, 71%, 95%),
+        75: hsl(66, 70%, 90%),
+        100: hsl(65, 69%, 86%),
+        200: hsl(66, 71%, 77%),
+        300: hsl(66, 70%, 68%),
+        400: hsl(66, 70%, 61%),
+        500: hsl(66, 70%, 54%),
+        600: hsl(64, 60%, 50%),
+        700: hsl(62, 61%, 44%),
+        800: hsl(60, 63%, 38%),
+        900: hsl(54, 70%, 30%)
+    ),
+    'yellow': (
+        50: hsl(55, 100%, 95%),
+        75: hsl(54, 100%, 91%),
+        100: hsl(54, 100%, 88%),
+        200: hsl(54, 100%, 81%),
+        300: hsl(54, 100%, 73%),
+        400: hsl(54, 100%, 67%),
+        500: hsl(54, 100%, 62%),
+        600: hsl(49, 98%, 60%),
+        700: hsl(43, 96%, 58%),
+        800: hsl(37, 95%, 56%),
+        900: hsl(28, 92%, 53%)
+    ),
+    'amber': (
+        50: hsl(46, 100%, 94%),
+        75: hsl(45, 100%, 90%),
+        100: hsl(45, 100%, 85%),
+        200: hsl(45, 100%, 75%),
+        300: hsl(46, 100%, 65%),
+        400: hsl(45, 100%, 58%),
+        500: hsl(45, 100%, 51%),
+        600: hsl(42, 100%, 50%),
+        700: hsl(38, 100%, 50%),
+        800: hsl(34, 100%, 50%),
+        900: hsl(26, 100%, 50%)
+    ),
+    'orange': (
+        50: hsl(37, 100%, 94%),
+        75: hsl(37, 100%, 90%),
+        100: hsl(36, 100%, 85%),
+        200: hsl(36, 100%, 75%),
+        300: hsl(36, 100%, 65%),
+        400: hsl(36, 100%, 57%),
+        500: hsl(36, 100%, 50%),
+        600: hsl(33, 100%, 49%),
+        700: hsl(30, 100%, 48%),
+        800: hsl(27, 100%, 47%),
+        900: hsl(21, 100%, 45%)
+    ),
+    'deepOrange': (
+        50: hsl(6, 71%, 95%),
+        75: hsl(6, 71%, 91%),
+        100: hsl(14, 100%, 87%),
+        200: hsl(14, 100%, 78%),
+        300: hsl(14, 100%, 70%),
+        400: hsl(14, 100%, 63%),
+        500: hsl(14, 100%, 57%),
+        600: hsl(14, 91%, 54%),
+        700: hsl(14, 80%, 50%),
+        800: hsl(14, 82%, 46%),
+        900: hsl(14, 88%, 40%)
+    ),
+    'brown': (
+        50: hsl(20, 16%, 93%),
+        75: hsl(20, 16%, 87%),
+        100: hsl(16, 16%, 81%),
+        200: hsl(115, 15%, 69%),
+        300: hsl(16, 15%, 56%),
+        400: hsl(16, 18%, 47%),
+        500: hsl(16, 25%, 38%),
+        600: hsl(15, 25%, 34%),
+        700: hsl(14, 26%, 29%),
+        800: hsl(11, 26%, 24%),
+        900: hsl(9, 28%, 19%)
+    ),
+    'gray': (
+        50: hsl(0, 0%, 98%),
+        75: hsl(0, 0%, 97%),
+        100: hsl(0, 0%, 96%),
+        200: hsl(0, 0%, 93%),
+        300: hsl(0, 0%, 88%),
+        400: hsl(0, 0%, 74%),
+        500: hsl(0, 0%, 62%),
+        600: hsl(0, 0%, 46%),
+        700: hsl(0, 0%, 38%),
+        800: hsl(0, 0%, 26%),
+        900: hsl(0, 0%, 13%)
+    ),
+    'blueGray': (
+        50: hsl(204, 15%, 94%),
+        75: hsl(204, 15%, 88%),
+        100: hsl(198, 16%, 84%),
+        200: hsl(200, 15%, 73%),
+        300: hsl(200, 16%, 62%),
+        400: hsl(200, 15%, 54%),
+        500: hsl(200, 18%, 46%),
+        600: hsl(199, 18%, 40%),
+        700: hsl(199, 18%, 33%),
+        800: hsl(200, 18%, 26%),
+        900: hsl(200, 19%, 18%)
+    )
+);
diff --git a/src/style/base/_mixins.scss b/src/style/base/_mixins.scss
new file mode 100644
index 0000000..84ee216
--- /dev/null
+++ b/src/style/base/_mixins.scss
@@ -0,0 +1,5 @@
+@use "colors";
+
+@function color($color, $variant: 500) {
+    @return map-get(map-get(colors.$colors, $color), $variant);
+}
diff --git a/src/style/base/_variables.scss b/src/style/base/_variables.scss
new file mode 100644
index 0000000..e20a257
--- /dev/null
+++ b/src/style/base/_variables.scss
@@ -0,0 +1,4 @@
+@use "mixins";
+@use "colors";
+
+$primary-radius: 4px;
diff --git a/src/style/components/.gitkeep b/src/style/components/.gitkeep
new file mode 100644
index 0000000..e69de29
diff --git a/src/style/index.scss b/src/style/index.scss
new file mode 100644
index 0000000..21354e4
--- /dev/null
+++ b/src/style/index.scss
@@ -0,0 +1,11 @@
+/**
+ * 1. Base style setup
+ */
+@use "base/colors";
+@use "base/mixins";
+@use "base/variables";
+@use "base/base";
+
+/**
+ * 2. Components
+ */