diff --git a/src/styles/breakpoint.sass b/src/styles/breakpoint.sass
new file mode 100644
index 0000000..1cc2a53
--- /dev/null
+++ b/src/styles/breakpoint.sass
@@ -0,0 +1,3 @@
+$mobile: 375px
+$tablet: 768px
+$desktop: 1440px
diff --git a/src/styles/classes.sass b/src/styles/classes.sass
new file mode 100644
index 0000000..6ea8f84
--- /dev/null
+++ b/src/styles/classes.sass
@@ -0,0 +1,71 @@
+@use './breakpoint' as view
+
+.fullscreen
+  position: fixed
+  top: 0
+  left: 0
+  width: 100vw
+  height: 100vh
+  object-fit: cover
+  z-index: -1
+  opacity: 1
+
+.on-desktop-only
+  @media only screen and (max-width: view.$desktop)
+    display: block
+
+  @media only screen and (max-width: view.$tablet)
+    display: none
+
+  @media only screen and (max-width: view.$mobile)
+    display: none
+
+.on-tablet-only
+  @media only screen and (max-width: view.$desktop)
+    display: none
+
+  @media only screen and (max-width: view.$tablet)
+    display: block
+
+  @media only screen and (max-width: view.$mobile)
+    display: none
+
+.on-mobile-only
+  @media only screen and (max-width: view.$desktop)
+    display: none
+
+  @media only screen and (max-width: view.$tablet)
+    display: none
+
+  @media only screen and (max-width: view.$mobile)
+    display: block
+
+.on-desktop-tablet-only
+  @media only screen and (max-width: view.$desktop)
+    display: block
+
+  @media only screen and (max-width: view.$tablet)
+    display: block
+
+  @media only screen and (max-width: view.$mobile)
+    display: none
+
+.on-desktop-mobile-only
+  @media only screen and (max-width: view.$desktop)
+    display: block
+
+  @media only screen and (max-width: view.$tablet)
+    display: none
+
+  @media only screen and (max-width: view.$mobile)
+    display: block
+
+.on-tablet-mobile-only
+  @media only screen and (max-width: view.$desktop)
+    display: none
+
+  @media only screen and (max-width: view.$tablet)
+    display: block
+
+  @media only screen and (max-width: view.$mobile)
+    display: block
diff --git a/src/styles/fonts.sass b/src/styles/fonts.sass
new file mode 100644
index 0000000..4fa1b67
--- /dev/null
+++ b/src/styles/fonts.sass
@@ -0,0 +1,45 @@
+$Roboto: Roboto, sans-serif
+$Inter: Inter, sans-serif
+$Montserrat: Montserrat, sans-serif
+$OpenSans: 'Open Sans', sans-serif
+$PublicSans: 'Public Sans', sans-serif
+
+@font-face
+  font-family: 'Roboto'
+  font-style: normal
+  font-display: swap
+  font-weight: 100 900
+  src: url(https://cdn.jsdelivr.net/fontsource/fonts/roboto:vf@latest/latin-wght-normal.woff2) format('woff2-variations');
+  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
+
+@font-face
+  font-family: 'Inter'
+  font-style: normal
+  font-display: swap
+  font-weight: 100 900
+  src: url(https://cdn.jsdelivr.net/fontsource/fonts/inter:vf@latest/latin-wght-normal.woff2) format('woff2-variations');
+  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
+
+@font-face
+  font-family: 'Montserrat'
+  font-style: normal
+  font-display: swap
+  font-weight: 100 900
+  src: url(https://cdn.jsdelivr.net/fontsource/fonts/montserrat:vf@latest/latin-wght-normal.woff2) format('woff2-variations');
+  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
+
+@font-face
+  font-family: 'Open Sans'
+  font-style: normal
+  font-display: swap
+  font-weight: 300 800
+  src: url(https://cdn.jsdelivr.net/fontsource/fonts/open-sans:vf@latest/latin-wght-normal.woff2) format('woff2-variations');
+  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
+
+@font-face
+  font-family: 'Public Sans'
+  font-style: normal
+  font-display: swap
+  font-weight: 100 900
+  src: url(https://cdn.jsdelivr.net/fontsource/fonts/public-sans:vf@latest/latin-wght-normal.woff2) format('woff2-variations');
+  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
diff --git a/src/styles/variables.sass b/src/styles/variables.sass
new file mode 100644
index 0000000..7b35ed6
--- /dev/null
+++ b/src/styles/variables.sass
@@ -0,0 +1,9 @@
+@use 'sass:color'
+
+$fontFamily: 'Inter', sans-serif
+$background: #0f1a28
+$textColor: color.adjust($background, $lightness: 80%)
+$textColorTitle: color.adjust($background, $lightness: 75%)
+$borderRadius: 16px
+$componentBorder: 2px solid color.adjust($background, $lightness: 6%)
+$componentBackground: color.adjust($background, $lightness: 1%)