diff --git a/src/components/Footer.css.ts b/src/components/Footer.css.ts
new file mode 100644
index 0000000..cd357a5
--- /dev/null
+++ b/src/components/Footer.css.ts
@@ -0,0 +1,40 @@
+import { style } from '@vanilla-extract/css'
+import { radialGradient, transparentize } from 'polished'
+import {
+  breakpoints,
+  mediaAt,
+  menuBackground,
+  transparent,
+  vars,
+} from '../styles/vars.css'
+
+export const siteFooterStyle = style({
+  fontSize: '0.9em',
+  padding: '2em 0.8em 0',
+  color: vars.color.menuLink,
+
+  ...radialGradient({
+    colorStops: [
+      `${menuBackground}  56%`,
+      `${transparentize(0.4, menuBackground)} 100%`,
+    ],
+    extent: '160% 100% at 100% 100%',
+    fallback: transparent,
+  }),
+
+  '@media': {
+    [mediaAt(breakpoints.m)]: {
+      ...radialGradient({
+        colorStops: [
+          `${menuBackground} 48%`,
+          `${transparentize(1, menuBackground)} 100%`,
+        ],
+        extent: '140% 100% at 100% 100%',
+        fallback: transparent,
+      }),
+    },
+    [mediaAt(breakpoints.l)]: {
+      fontSize: '0.8em',
+    },
+  },
+})
diff --git a/src/components/Footer.svelte b/src/components/Footer.svelte
index 6a36827..df1166d 100644
--- a/src/components/Footer.svelte
+++ b/src/components/Footer.svelte
@@ -1,12 +1,13 @@
-<script>
+<script lang="ts">
   import { format } from 'date-fns'
   import type { PostContent } from 'src/routes/blog/_content'
   import SvgIcon from './SvgIcon.svelte'
+  import { siteFooterStyle } from './Footer.css'
 
   export let latestPosts: PostContent[]
 </script>
 
-<footer class="site-footer navigation-theme">
+<footer class="site-footer navigation-theme {siteFooterStyle}">
   <div class="lists">
     <section class="site-map">
       <ul>
@@ -112,10 +113,10 @@
   </footer>
 </footer>
 
-<style>
+<style lang="less">
   @import '../styles/variables.module.less';
 
-  .site-footer {
+  /* .site-footer {
     font-size: 0.9em;
     padding: 2em 0.8em 0em;
     color: @menu-link-color;
@@ -137,7 +138,7 @@
     @media (min-width: @media-l) {
       font-size: 0.8em;
     }
-  }
+  } */
 
   h3 {
     font: inherit;
@@ -211,7 +212,6 @@
 
   .twitch :global(svg),
   .twitch :global(svg rect) {
-    /* fill: rgb(169, 112, 255); */
     fill: @menu-link-color;
   }
 
diff --git a/src/styles/vanilla.css.ts b/src/styles/vanilla.css.ts
new file mode 100644
index 0000000..7bca846
--- /dev/null
+++ b/src/styles/vanilla.css.ts
@@ -0,0 +1,5 @@
+import { style } from '@vanilla-extract/css'
+
+export const mainStyle = style({
+  background: '#383',
+})
diff --git a/src/styles/vars.css.ts b/src/styles/vars.css.ts
new file mode 100644
index 0000000..1ec63ea
--- /dev/null
+++ b/src/styles/vars.css.ts
@@ -0,0 +1,51 @@
+import { createGlobalTheme } from '@vanilla-extract/css'
+import {
+  desaturate,
+  lighten,
+  mix,
+  saturate,
+  tint,
+  transparentize,
+} from 'polished'
+
+export const colors = {
+  tearkiss: '#42a6f0',
+  pinky: '#fea6eb',
+  lightCyan: '#d8f6ff',
+  midnightBlue: '#171664',
+  frenchViolet: '#7332c3',
+}
+
+export const menuBackground = transparentize(0.6, colors.tearkiss)
+export const transparent = transparentize(1, '#ffffff')
+
+export enum breakpoints {
+  s = 400,
+  m = 700,
+  image = 800,
+  l = 1000,
+  max = 1140,
+}
+
+export function mediaAt(breakpoint: breakpoints) {
+  return `screen and (min-width: ${breakpoint}px)`
+}
+
+export const vars = createGlobalTheme(':root', {
+  color: {
+    articleText: desaturate(0.16, colors.midnightBlue),
+    selection: tint(0.4, colors.pinky),
+    link: saturate(0.2, mix(0.66, colors.tearkiss, colors.midnightBlue)),
+    linkHover: colors.tearkiss,
+    linkVisited: colors.frenchViolet,
+    linkVisitedHover: lighten(0.1, colors.frenchViolet),
+
+    menu: colors.midnightBlue,
+    menuLink: colors.midnightBlue,
+    menuLinkHover: lighten(0.15, colors.midnightBlue),
+
+    header: lighten(0.1, colors.midnightBlue),
+    background: tint(0.7, colors.lightCyan),
+    menuBackground,
+  },
+})