diff --git a/packages/backend/src/priority/services/priority.service.ts b/packages/backend/src/priority/services/priority.service.ts
index 4ee6da66..87daac54 100644
--- a/packages/backend/src/priority/services/priority.service.ts
+++ b/packages/backend/src/priority/services/priority.service.ts
@@ -6,7 +6,6 @@ import {
 import { Priorities } from "@core/constants/core.constants";
 import { Status } from "@core/errors/status.codes";
 import { BaseError } from "@core/errors/errors.base";
-import { colorNameByPriority } from "@core/constants/colors";
 import { Collections } from "@backend/common/constants/collections";
 import mongoService from "@backend/common/services/mongo.service";
 
@@ -62,7 +61,6 @@ class PriorityService {
         _id: response.insertedId.toString(),
         user: userId,
         name: data.name,
-        color: data.color,
       };
 
       return priority;
@@ -72,22 +70,18 @@ class PriorityService {
   async createDefaultPriorities(userId: string) {
     return await this.create(userId, [
       {
-        color: colorNameByPriority.unassigned,
         name: Priorities.UNASSIGNED,
         user: userId,
       },
       {
-        color: colorNameByPriority.self,
         name: Priorities.SELF,
         user: userId,
       },
       {
-        color: colorNameByPriority.work,
         name: Priorities.WORK,
         user: userId,
       },
       {
-        color: colorNameByPriority.relationships,
         name: Priorities.RELATIONS,
         user: userId,
       },
diff --git a/packages/core/package.json b/packages/core/package.json
index 4061b553..e7a768ba 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -10,9 +10,11 @@
     "lint-fix": "exit"
   },
   "devDependencies": {
+    "@types/tinycolor2": "^1.4.6",
     "typescript": "^5.1.6"
   },
   "dependencies": {
+    "tinycolor2": "^1.6.0",
     "winston": "^3.8.1"
   }
 }
diff --git a/packages/core/src/constants/colors.ts b/packages/core/src/constants/colors.ts
deleted file mode 100644
index 4acc4396..00000000
--- a/packages/core/src/constants/colors.ts
+++ /dev/null
@@ -1,69 +0,0 @@
-import { Priorities } from "@core/constants/core.constants";
-import { Colors, ColorNames } from "@core/types/color.types";
-
-export type ColorHex = keyof typeof colors;
-
-export const BASE_COLORS = {
-  DEEP_BLUE: "#1C3142",
-  ONYX_GREY: "#1D2932",
-  SLATE_GREY: "#BDCFDC",
-  LIGHT_GREY: "#8293A1",
-};
-
-export const colors: Colors = {
-  [ColorNames.BLUE_1]: "#0E1821",
-  [ColorNames.BLUE_2]: BASE_COLORS.DEEP_BLUE,
-  [ColorNames.BLUE_3]: "#1E2A4B",
-  [ColorNames.BLUE_4]: "#3D5495",
-  [ColorNames.BLUE_5]: "#5A7ED9",
-  [ColorNames.BLUE_6]: "#7397B5",
-  [ColorNames.BLUE_7]: "#6796B8",
-  [ColorNames.BLUE_8]: "#94c5e9",
-
-  [ColorNames.GREY_1]: BASE_COLORS.ONYX_GREY,
-  [ColorNames.GREY_2]: "#395264",
-  [ColorNames.GREY_3]: "#516371",
-  [ColorNames.GREY_4]: "#A3B1BB",
-  [ColorNames.GREY_5]: "#BDCFDC",
-  [ColorNames.GREY_6]: "#7A858D",
-
-  [ColorNames.TEAL_1]: "#4b94a0",
-  [ColorNames.TEAL_2]: "#4c96b3",
-  [ColorNames.TEAL_3]: "#6cd7e9",
-  [ColorNames.TEAL_4]: "#86D2ED",
-  [ColorNames.TEAL_5]: "#ABE0F2",
-
-  [ColorNames.WHITE_1]: "#D9D9D9",
-  [ColorNames.WHITE_2]: "#D5D5D5",
-  [ColorNames.WHITE_3]: "#FFFFFF",
-  [ColorNames.WHITE_4]: "#F3F2ED",
-  [ColorNames.WHITE_5]: "#F5F5F5",
-
-  [ColorNames.YELLOW_1]: "#3F3C1F",
-  [ColorNames.YELLOW_2]: "#7D793E",
-  [ColorNames.YELLOW_3]: "#BCB55D",
-  [ColorNames.YELLOW_4]: "#FAF17C",
-  [ColorNames.YELLOW_5]: "#FCF8BD",
-};
-
-export const colorNameByPriority = {
-  [Priorities.UNASSIGNED]: ColorNames.GREY_4,
-  [Priorities.WORK]: ColorNames.BLUE_7,
-  [Priorities.SELF]: ColorNames.BLUE_5,
-  [Priorities.RELATIONS]: ColorNames.TEAL_2,
-};
-
-export const GRID_LINE_OPACITY_PERCENT = 48;
-
-export const invertedColors = {
-  // priority colors
-  [ColorNames.GREY_4]: BASE_COLORS.ONYX_GREY,
-  [ColorNames.BLUE_7]: BASE_COLORS.ONYX_GREY,
-  [ColorNames.BLUE_5]: BASE_COLORS.DEEP_BLUE,
-  [ColorNames.TEAL_2]: BASE_COLORS.DEEP_BLUE,
-  // other
-  [ColorNames.WHITE_1]: colors.white_3,
-  [ColorNames.YELLOW_2]: colors.yellow_3,
-};
-
-export const linearGradient = `linear-gradient(90deg, ${colors.teal_3}, #4764CA)`;
diff --git a/packages/core/src/types/color.types.ts b/packages/core/src/types/color.types.ts
deleted file mode 100644
index da6c73d5..00000000
--- a/packages/core/src/types/color.types.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-export type Colors = {
-  [key in ColorNames]: string;
-};
-
-export type ColorName = keyof typeof ColorNames;
-
-export enum ColorNames {
-  BLUE_1 = "blue_1",
-  BLUE_2 = "blue_2",
-  BLUE_3 = "blue_3",
-  BLUE_4 = "blue_4",
-  BLUE_5 = "blue_5",
-  BLUE_6 = "blue_6",
-  BLUE_7 = "blue_7",
-  BLUE_8 = "blue_8",
-
-  GREY_1 = "grey_1",
-  GREY_2 = "grey_2",
-  GREY_3 = "grey_3",
-  GREY_4 = "grey_4",
-  GREY_5 = "grey_5",
-  GREY_6 = "grey_6",
-
-  TEAL_1 = "teal_1",
-  TEAL_2 = "teal_2",
-  TEAL_3 = "teal_3",
-  TEAL_4 = "teal_4",
-  TEAL_5 = "teal_5",
-
-  WHITE_1 = "white_1",
-  WHITE_2 = "white_2",
-  WHITE_3 = "white_3",
-  WHITE_4 = "white_4",
-  WHITE_5 = "white_5",
-
-  YELLOW_1 = "yellow_1",
-  YELLOW_2 = "yellow_2",
-  YELLOW_3 = "yellow_3",
-  YELLOW_4 = "yellow_4",
-  YELLOW_5 = "yellow_5",
-}
-
-export enum InvertedColorNames {
-  BLUE_3 = "blue_3",
-  GREY_3 = "grey_3",
-  GREY_4 = "grey_4",
-  TEAL_2 = "teal_2",
-  WHITE_1 = "white_1",
-}
diff --git a/packages/core/src/types/priority.types.ts b/packages/core/src/types/priority.types.ts
index 730c7a95..b0052459 100644
--- a/packages/core/src/types/priority.types.ts
+++ b/packages/core/src/types/priority.types.ts
@@ -1,5 +1,4 @@
 export interface PriorityReq {
-  color: string;
   name: string;
 }
 
diff --git a/packages/core/src/util/color.utils.ts b/packages/core/src/util/color.utils.ts
index 25010c1c..2715b694 100644
--- a/packages/core/src/util/color.utils.ts
+++ b/packages/core/src/util/color.utils.ts
@@ -1,52 +1,9 @@
-import { Priorities } from "@core/constants/core.constants";
-import { ColorHex, colors, invertedColors } from "@core/constants/colors";
-import { ColorNames, InvertedColorNames } from "@core/types/color.types";
+import tinycolor from "tinycolor2";
 
-export const getAlphaColor = (colorName: ColorNames, opacity: number) => {
-  const _opacity = Math.round(Math.min(Math.max(opacity || 1, 0), 1) * 255);
-  return getColor(colorName) + _opacity.toString(16).toUpperCase();
+export const brighten = (color: string, amount?: number) => {
+  return tinycolor(color).brighten(amount).toString();
 };
 
-export const getBrighterColor = (colorName: ColorNames) => {
-  // assumes that the higher the numbers are, the brighter the colors
-  //@ts-ignore
-  return colors[getNeighbourKey(colorName, colors, 1)] as string;
-};
-
-export const getColor = (colorName: ColorNames) =>
-  colors[colorName] as ColorHex;
-
-export const getDarkerColor = (colorName: ColorNames) => {
-  return colors[getNeighbourKey(colorName, colors, -1) as ColorNames];
-};
-
-export const getInvertedColor = (colorName: InvertedColorNames) => {
-  //@ts-ignore
-  return invertedColors[colorName] as string;
-};
-
-export const getNeighbourKey = (key = "", obj = {}, diff = 1) => {
-  const splitKeys = key.split("_");
-  if (splitKeys === undefined || splitKeys.length < 1) {
-    throw new Error(
-      'You should provide object with keys "ANYTHING_KEY_NUMBER" where NUMBER is number'
-    );
-  }
-
-  const prev = splitKeys.length - 1;
-  //@ts-ignore
-  const index = +splitKeys[prev];
-  const propName = splitKeys.filter((value) => value !== `${index}`).join("_");
-
-  const neighbourIndex = index + diff;
-  const neighbourKey = `${propName}_${neighbourIndex}`;
-
-  return Object.keys(obj).find((_key) => _key === neighbourKey) || key;
-};
-
-export const hoverColorsByPriority = {
-  [Priorities.UNASSIGNED]: "#F0FFFF",
-  [Priorities.WORK]: "#80B8E1",
-  [Priorities.RELATIONS]: "#86D2ED",
-  [Priorities.SELF]: "#8EB1FF",
+export const darken = (color: string, amount?: number) => {
+  return tinycolor(color).darken(amount).toString();
 };
diff --git a/packages/web/src/App.tsx b/packages/web/src/App.tsx
index aca9e2ec..f370f64c 100644
--- a/packages/web/src/App.tsx
+++ b/packages/web/src/App.tsx
@@ -1,21 +1,22 @@
 import React from "react";
-import { SuperTokensWrapper } from "supertokens-auth-react";
+import { ToastContainer } from "react-toastify";
+import { ThemeProvider } from "styled-components";
+import SuperTokens, { SuperTokensWrapper } from "supertokens-auth-react";
+import Session from "supertokens-auth-react/recipe/session";
 import { Provider } from "react-redux";
 import { DndProvider } from "react-dnd";
 import { HTML5Backend } from "react-dnd-html5-backend";
 import { GoogleOAuthProvider } from "@react-oauth/google";
-import Session from "supertokens-auth-react/recipe/session";
-import SuperTokens from "supertokens-auth-react";
 import { APP_NAME, PORT_DEFAULT_WEB } from "@core/constants/core.constants";
 import { ROOT_ROUTES } from "@web/common/constants/routes";
 import { sagaMiddleware } from "@web/common/store/middlewares";
 import { sagas } from "@web/store/sagas";
 import { GlobalStyle } from "@web/components/GlobalStyle";
 import { ENV_WEB } from "@web/common/constants/env.constants";
-import { ToastContainer } from "react-toastify";
 
 import { RootRouter } from "./routers";
 import { store } from "./store";
+import { theme } from "./common/styles/theme";
 
 SuperTokens.init({
   appInfo: {
@@ -38,19 +39,21 @@ export const App = () => {
           <GoogleOAuthProvider clientId={ENV_WEB.CLIENT_ID}>
             <SuperTokensWrapper>
               <GlobalStyle />
-              <RootRouter />
-              <ToastContainer
-                position="bottom-left"
-                autoClose={5000}
-                hideProgressBar={false}
-                newestOnTop={false}
-                closeOnClick
-                rtl={false}
-                pauseOnFocusLoss
-                draggable
-                pauseOnHover
-                theme="dark"
-              />
+              <ThemeProvider theme={theme}>
+                <RootRouter />
+                <ToastContainer
+                  position="bottom-left"
+                  autoClose={5000}
+                  hideProgressBar={false}
+                  newestOnTop={false}
+                  closeOnClick
+                  rtl={false}
+                  pauseOnFocusLoss
+                  draggable
+                  pauseOnHover
+                  theme="dark"
+                />
+              </ThemeProvider>
             </SuperTokensWrapper>
           </GoogleOAuthProvider>
         </Provider>
diff --git a/packages/web/src/__tests__/__mocks__/mock.render.tsx b/packages/web/src/__tests__/__mocks__/mock.render.tsx
index 6d66be86..88f574d6 100644
--- a/packages/web/src/__tests__/__mocks__/mock.render.tsx
+++ b/packages/web/src/__tests__/__mocks__/mock.render.tsx
@@ -9,6 +9,8 @@ import { render, RenderOptions } from "@testing-library/react";
 import { sagas } from "@web/store/sagas";
 import { sagaMiddleware } from "@web/common/store/middlewares";
 import { reducers } from "@web/store/reducers";
+import { ThemeProvider } from "styled-components";
+import { theme } from "@web/common/styles/theme";
 
 const customRender = (
   ui: ReactElement,
@@ -30,9 +32,11 @@ const customRender = (
     return (
       <DndProvider backend={HTML5Backend}>
         <GoogleOAuthProvider clientId="anyClientId">
-          <BrowserRouter>
-            <Provider store={store}>{children}</Provider>
-          </BrowserRouter>
+          <ThemeProvider theme={theme}>
+            <BrowserRouter>
+              <Provider store={store}>{children}</Provider>
+            </BrowserRouter>
+          </ThemeProvider>
         </GoogleOAuthProvider>
       </DndProvider>
     );
diff --git a/packages/web/src/__tests__/utils/color.utils.test.ts b/packages/web/src/__tests__/utils/color.utils.test.ts
deleted file mode 100644
index 843af8d4..00000000
--- a/packages/web/src/__tests__/utils/color.utils.test.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { getNeighbourKey } from "@core/util/color.utils";
-import { colors } from "@core/constants/colors";
-
-describe("getNeighbourKey", () => {
-  it("increments when index is positive", () => {
-    expect(getNeighbourKey("teal_2", colors, 1)).toBe("teal_3");
-  });
-  it("decrements when index is negative", () => {
-    expect(getNeighbourKey("teal_2", colors, -1)).toBe("teal_1");
-  });
-});
diff --git a/packages/web/src/common/constants/web.constants.ts b/packages/web/src/common/constants/web.constants.ts
index 770e6ce6..317dfc4b 100644
--- a/packages/web/src/common/constants/web.constants.ts
+++ b/packages/web/src/common/constants/web.constants.ts
@@ -1,7 +1,5 @@
 import { Recurrence_Selection } from "../types/web.event.types";
 
-export const ANIMATION_TIME_3_MS = "0.3s";
-
 export const COLUMN_WEEK = "weekEvents";
 export const COLUMN_MONTH = "monthEvents";
 
diff --git a/packages/web/src/common/styles/components.ts b/packages/web/src/common/styles/components.ts
deleted file mode 100644
index 79fde27c..00000000
--- a/packages/web/src/common/styles/components.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { ColorNames } from "@core/types/color.types";
-import { getColor } from "@core/util/color.utils";
-
-export interface BackgroundProps {
-  bgColor?: string;
-}
-
-export interface ColorProps {
-  color?: string;
-  colorName?: ColorNames;
-}
-
-export type InputProps = ColorProps & BackgroundProps;
-
-export const inputBaseStyles = ({ bgColor, colorName }: InputProps) => `
-  background: ${bgColor};
-  
-  ::placeholder {
-    color: ${getColor(colorName)}
-  }
-  `;
diff --git a/packages/web/src/common/styles/default-theme.d.ts b/packages/web/src/common/styles/default-theme.d.ts
new file mode 100644
index 00000000..5d49f9cf
--- /dev/null
+++ b/packages/web/src/common/styles/default-theme.d.ts
@@ -0,0 +1,76 @@
+import "styled-components";
+
+declare module "styled-components" {
+  export interface DefaultTheme {
+    color: {
+      bg: {
+        primary: string;
+        secondary: string;
+      };
+      border: {
+        primary: string;
+        primaryDark: string;
+        secondary: string;
+      };
+      fg: {
+        primary: string;
+        primaryDark: string;
+      };
+      gridLine: {
+        primary: string;
+      };
+      panel: {
+        bg: string;
+        scrollbar: string;
+        scrollbarActive: string;
+        shadow: string;
+        text: string;
+      };
+      shadow: {
+        default: string;
+      };
+      status: {
+        success: string;
+        error: string;
+        warning: string;
+        info: string;
+      };
+      tag: {
+        one: string;
+        two: string;
+        three: string;
+      };
+      text: {
+        accent: string;
+        light: string;
+        lighter: string;
+        lightInactive: string;
+        dark: string;
+        darkPlaceholder: string;
+      };
+    };
+    text: {
+      size: {
+        xs: string;
+        s: string;
+        m: string;
+        l: string;
+        xl: string;
+        xxl: string;
+        xxxl: string;
+        "4xl": string;
+        "5xl": string;
+      };
+      weight: {
+        light: number;
+        regular: number;
+        medium: number;
+        bold: number;
+        extraBold: number;
+      };
+    };
+    transition: {
+      default: string;
+    };
+  }
+}
diff --git a/packages/web/src/common/styles/theme.ts b/packages/web/src/common/styles/theme.ts
new file mode 100644
index 00000000..74782de8
--- /dev/null
+++ b/packages/web/src/common/styles/theme.ts
@@ -0,0 +1,106 @@
+import { DefaultTheme } from "styled-components";
+
+export const c = {
+  black: "hsla(0 0 0 / 25%)",
+  blue300: "hsl(195 78 56)",
+  blue200: "hsl(196 60 59)",
+  blue100: "hsl(202 100 67)",
+  blueGray400: "hsl(207 14 57)",
+  blueGray300: "hsl(205 33 61)",
+  blueGray200: "hsl(205 36 62)",
+  blueGray100: "hsl(196 45 78)",
+  darkBlue500: "hsl(220 29 6)",
+  darkBlue400: "hsl(222 28 7)",
+  darkBlue300: "hsl(218 27 8)",
+  darkBlue200: "hsl(218 24 9)",
+  darkBlue100: "hsl(223 27 10)",
+  gray900: "hsl(0 0 0 / 50.2%)",
+  gray800: "hsl(219 18 34 / 20%)",
+  gray700: "hsl(219 18 34 25.1%)",
+  gray600: "hsl(219 8 46 / 20%)",
+  gray500: "hsl(219 8 46 / 20%)",
+  gray400: "hsl(221 9 37)",
+  gray300: "hsl(219 8 46 / 90.2%)",
+  gray200: "hsl(208 13 71 / 54.9%)",
+  gray100: "hsl(47 7 73)",
+  green: "hsl(105 61 62)",
+  orange: "hsl(25 100 63)",
+  purple: "hsl(270 100 83)",
+  red: "hsl(0 63 60)",
+  teal: "hsl(163 44 67)",
+  white200: "hsl(0 0 98)",
+  white100: "hsl(0 0 100)",
+};
+
+export const theme: DefaultTheme = {
+  color: {
+    bg: {
+      primary: c.darkBlue400,
+      secondary: c.darkBlue200,
+    },
+    border: {
+      primary: c.gray800,
+      primaryDark: c.gray900,
+      secondary: c.gray700,
+    },
+    fg: {
+      primary: c.gray100,
+      primaryDark: c.gray200,
+    },
+    gridLine: {
+      primary: c.gray800,
+    },
+    panel: {
+      bg: c.gray600,
+      scrollbar: c.gray500,
+      scrollbarActive: c.gray400,
+      shadow: c.gray400,
+      text: c.white200,
+    },
+    shadow: {
+      default: c.black,
+    },
+    status: {
+      success: c.green,
+      error: c.red,
+      warning: c.orange,
+      info: c.blue100,
+    },
+    tag: {
+      one: c.blue100,
+      two: c.green,
+      three: c.purple,
+    },
+    text: {
+      accent: c.blue100,
+      light: c.gray100,
+      lighter: c.white100,
+      lightInactive: c.gray200,
+      dark: c.darkBlue400,
+      darkPlaceholder: c.gray300,
+    },
+  },
+  text: {
+    size: {
+      xs: "0.563rem",
+      s: "0.688rem",
+      m: "0.8125rem",
+      l: "1rem",
+      xl: "1.125rem",
+      xxl: "1.3rem",
+      xxxl: "1.6rem",
+      "4xl": "1.7rem",
+      "5xl": "2rem",
+    },
+    weight: {
+      light: 300,
+      regular: 400,
+      medium: 500,
+      bold: 700,
+      extraBold: 900,
+    },
+  },
+  transition: {
+    default: "0.3s",
+  },
+};
diff --git a/packages/web/src/common/styles/theme.util.ts b/packages/web/src/common/styles/theme.util.ts
new file mode 100644
index 00000000..122aba61
--- /dev/null
+++ b/packages/web/src/common/styles/theme.util.ts
@@ -0,0 +1,61 @@
+import { Priorities } from "@core/constants/core.constants";
+import { brighten, darken } from "@core/util/color.utils";
+
+import { c } from "./theme";
+
+const UNASSIGNED = c.blueGray400;
+const WORK = c.blueGray100;
+const RELATIONS = c.teal;
+const SELF = c.blueGray200;
+
+export const colorByPriority = {
+  [Priorities.UNASSIGNED]: UNASSIGNED,
+  [Priorities.WORK]: WORK,
+  [Priorities.RELATIONS]: RELATIONS,
+  [Priorities.SELF]: SELF,
+};
+
+export const darkBlueGradient = {
+  level1: c.darkBlue400,
+  level2: c.darkBlue400,
+  level3: c.darkBlue200,
+  level4: c.darkBlue300,
+  level5: c.darkBlue400,
+};
+
+export const hoverColorByPriority = {
+  [Priorities.UNASSIGNED]: brighten(c.blueGray400),
+  [Priorities.WORK]: brighten(c.blueGray100),
+  [Priorities.RELATIONS]: brighten(c.teal),
+  [Priorities.SELF]: brighten(c.blueGray200),
+};
+
+export const gradientByPriority = {
+  [Priorities.UNASSIGNED]: `linear-gradient(90deg, ${darken(
+    UNASSIGNED,
+    15
+  )}, ${darken(UNASSIGNED, 30)})`,
+  [Priorities.WORK]: `linear-gradient(90deg, ${darken(WORK, 15)}, ${darken(
+    WORK,
+    30
+  )})`,
+  [Priorities.RELATIONS]: `linear-gradient(90deg, ${darken(
+    RELATIONS,
+    15
+  )}, ${darken(RELATIONS, 30)})`,
+  [Priorities.SELF]: `linear-gradient(90deg, ${darken(SELF, 15)}, ${darken(
+    SELF,
+    30
+  )})`,
+};
+
+export const blueGradient = `linear-gradient(${c.blue100}, ${c.blue300})`;
+const grayGradient = `linear-gradient(90deg, ${c.gray100}, ${c.gray200})`;
+
+export const getGradient = (color: string) => {
+  const priority = Object.keys(colorByPriority).find(
+    (key) => colorByPriority[key as Priorities] === color
+  ) as Priorities | undefined;
+
+  return priority ? gradientByPriority[priority] : grayGradient;
+};
diff --git a/packages/web/src/common/types/component.types.ts b/packages/web/src/common/types/component.types.ts
index b20d8f37..878e4718 100644
--- a/packages/web/src/common/types/component.types.ts
+++ b/packages/web/src/common/types/component.types.ts
@@ -3,6 +3,7 @@ export interface ClassNamedComponent {
 }
 
 export interface UnderlinedInput {
+  underlineColor?: string;
   withUnderline?: boolean;
 }
 
diff --git a/packages/web/src/common/types/web.event.types.ts b/packages/web/src/common/types/web.event.types.ts
index 1cdd2554..ab28ea8d 100644
--- a/packages/web/src/common/types/web.event.types.ts
+++ b/packages/web/src/common/types/web.event.types.ts
@@ -4,8 +4,6 @@ import { SelectOption } from "@web/common/types/component.types";
 export enum Recurrence_Selection {
   NONE = "none",
   WEEK = "week",
-  WEEKS_2 = "2 weeks",
-  WEEKS_3 = "3 weeks",
   MONTH = "month",
 }
 export interface Schema_GridEvent extends Schema_Event {
diff --git a/packages/web/src/common/utils/web.date.util.ts b/packages/web/src/common/utils/web.date.util.ts
index 3a83a03d..5da8f14a 100644
--- a/packages/web/src/common/utils/web.date.util.ts
+++ b/packages/web/src/common/utils/web.date.util.ts
@@ -6,8 +6,6 @@ import {
   YMDHAM_FORMAT,
   YEAR_MONTH_DAY_FORMAT,
 } from "@core/constants/date.constants";
-import { ColorNames } from "@core/types/color.types";
-import { getColor } from "@core/util/color.utils";
 import { RRULE } from "@core/constants/core.constants";
 import {
   Option_Time,
@@ -23,6 +21,7 @@ import {
   Recurrence_Selection,
   Schema_SelectedDates,
 } from "../types/web.event.types";
+import { theme } from "../styles/theme";
 
 export const dateIsValid = (date: string) => {
   const notNaN = !Number.isNaN(new Date(date).getTime());
@@ -38,8 +37,8 @@ export const getColorsByHour = (currentHour: number) => {
   [...(new Array(24) as number[])].map((_, index) => {
     const isCurrentHour = currentHour - 1 === index;
     const color = isCurrentHour
-      ? getColor(ColorNames.TEAL_3)
-      : `${getColor(ColorNames.WHITE_4)}80`;
+      ? theme.color.text.accent
+      : theme.color.text.light;
 
     colors.push(color);
 
@@ -148,12 +147,6 @@ export const getRecurrenceRule = (selection: Recurrence_Selection) => {
     case Recurrence_Selection.WEEK:
       return [RRULE.WEEK];
       break;
-    case Recurrence_Selection.WEEKS_2:
-      return [RRULE.WEEKS_2];
-      break;
-    case Recurrence_Selection.WEEKS_3:
-      return [RRULE.WEEKS_3];
-      break;
     case Recurrence_Selection.MONTH:
       return [RRULE.MONTH];
       break;
diff --git a/packages/web/src/components/Button/index.tsx b/packages/web/src/components/Button/index.tsx
deleted file mode 100644
index b78d7d99..00000000
--- a/packages/web/src/components/Button/index.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import {
-  PalletteBtn,
-  StyledSaveBtn,
-  StyledFeedbackBtnContainer,
-} from "./styled";
-
-export const Button = PalletteBtn;
-
-export const SaveBtn = StyledSaveBtn;
-
-export const FeedbackButtonContainer = StyledFeedbackBtnContainer;
diff --git a/packages/web/src/components/Button/styled.ts b/packages/web/src/components/Button/styled.ts
index d83b4c15..72ec674b 100644
--- a/packages/web/src/components/Button/styled.ts
+++ b/packages/web/src/components/Button/styled.ts
@@ -1,20 +1,9 @@
 import styled from "styled-components";
-import { ColorNames } from "@core/types/color.types";
-import {
-  getBrighterColor,
-  getColor,
-  getInvertedColor,
-} from "@core/util/color.utils";
-import { BASE_COLORS } from "@core/constants/colors";
-import { Flex } from "@web/components/Flex";
+import { brighten, darken } from "@core/util/color.utils";
+import { Priorities, Priority } from "@core/constants/core.constants";
+import { colorByPriority } from "@web/common/styles/theme.util";
 
-export const StyledFeedbackBtnContainer = styled(Flex)`
-  position: absolute;
-  top: 10%;
-  right: 8%;
-`;
-
-const Btn = styled.div`
+export const Btn = styled.div`
   align-items: center;
   border-radius: 2px;
   display: flex;
@@ -23,45 +12,44 @@ const Btn = styled.div`
 `;
 
 interface PalletteProps {
-  color?: ColorNames | string;
+  color?: string;
   bordered?: boolean;
   border?: string;
 }
 
-export const PalletteBtn = styled(Btn)<PalletteProps>`
-  background: ${({ color }) => getColor(color)};
-  color: ${({ color }) => getInvertedColor(color)};
+export const PriorityButton = styled(Btn)<PalletteProps>`
+  background: color;
+  color: ${({ theme }) => theme.color.text.dark};
   min-width: 158px;
   padding: 0 8px;
-  border: ${({ border, bordered }) =>
-    border || (bordered && `2px solid ${BASE_COLORS.DEEP_BLUE}`)};
-
-  &:focus {
-    border-width: ${({ bordered }) => (bordered ? 2 : 1)}px;
-  }
+  border: ${({ border, bordered, theme }) =>
+    border || (bordered && `2px solid ${theme.color.border.primaryDark}`)};
 
   &:hover {
-    background: ${({ color }) => getInvertedColor(color)};
-    color: ${({ color }) => getBrighterColor(color)};
+    background: ${({ theme }) => theme.color.bg.primary};
+    color: ${({ color }) => brighten(color)};
     transition: background-color 0.5s;
     transition: color 0.55s;
   }
 `;
 interface CustomProps {
-  background: string;
-  color?: string;
+  priority: Priority;
   minWidth: number;
 }
 
-export const StyledSaveBtn = styled(PalletteBtn)<CustomProps>`
-  background: ${({ background }) => background};
-  color: ${({ color }) => color};
+export const StyledSaveBtn = styled(PriorityButton)<CustomProps>`
+  background: ${({ priority }) => darken(colorByPriority[priority])};
+  color: ${({ theme }) => theme.color.text.dark}
+      
   min-width: ${({ minWidth }) => minWidth}px;
 
   &:focus {
-    border: 2px solid ${BASE_COLORS.DEEP_BLUE};
+    border: 2px solid ${({ theme }) => theme.color.border.primaryDark};
   }
   &:hover {
-    filter: brightness(120%);
+    color: ${({ priority, theme }) =>
+      priority === Priorities.UNASSIGNED
+        ? theme.color.text.light
+        : brighten(colorByPriority[priority])};
   }
 `;
diff --git a/packages/web/src/components/DatePicker/DatePicker.tsx b/packages/web/src/components/DatePicker/DatePicker.tsx
index 950013bc..99e8bff5 100644
--- a/packages/web/src/components/DatePicker/DatePicker.tsx
+++ b/packages/web/src/components/DatePicker/DatePicker.tsx
@@ -4,10 +4,10 @@ import "react-datepicker/dist/react-datepicker.css";
 import dayjs from "dayjs";
 import classNames from "classnames";
 import { Text } from "@web/components/Text";
-import { ColorNames } from "@core/types/color.types";
 import { AlignItems, JustifyContent } from "@web/components/Flex/styled";
 import { Flex } from "@web/components/Flex";
 import { Input } from "@web/components/Input";
+import { theme } from "@web/common/styles/theme";
 
 import {
   ChangeDayButtonsStyledFlex,
@@ -64,17 +64,11 @@ export const DatePicker: React.FC<Props> = ({
       calendarContainer={(containerProps) => (
         <StyledDatePicker
           {...containerProps}
-          monthsCount={(props.monthsShown || 0) + 1}
+          selectedColor={bgColor}
           view={view}
         />
       )}
-      customInput={
-        <Input
-          bgColor={bgColor}
-          colorName={ColorNames.TEAL_1}
-          onBlurCapture={onInputBlur}
-        />
-      }
+      customInput={<Input bgColor={bgColor} onBlurCapture={onInputBlur} />}
       dateFormat={"M-d-yyyy"}
       formatWeekDay={(day) => day[0]}
       open={isOpen}
@@ -102,8 +96,8 @@ export const DatePicker: React.FC<Props> = ({
         changeYear,
         customHeaderCount,
       }) => {
-        const formattedSelectedMonth = dayjs(monthDate).format("MMM YYYY");
-        const formattedCurrentMonth = dayjs().format("MMM YYYY");
+        const selectedMonth = dayjs(monthDate).format("MMM YYYY");
+        const currentMonth = dayjs().format("MMM YYYY");
 
         return (
           <StyledHeaderFlex
@@ -111,8 +105,8 @@ export const DatePicker: React.FC<Props> = ({
             justifyContent={JustifyContent.LEFT}
           >
             <MonthContainerStyled>
-              <Text colorName={ColorNames.WHITE_1} size={17}>
-                {formattedSelectedMonth}
+              <Text color={theme.color.text.light} size="xl">
+                {selectedMonth}
               </Text>
             </MonthContainerStyled>
 
@@ -122,34 +116,30 @@ export const DatePicker: React.FC<Props> = ({
                   <Text
                     cursor="pointer"
                     onClick={decreaseMonth}
-                    fontWeight={600}
-                    colorName={ColorNames.WHITE_1}
-                    size={20}
+                    color={theme.color.text.light}
+                    size="l"
                   >
                     {"<"}
                   </Text>
                   <Text
                     cursor="pointer"
                     onClick={increaseMonth}
-                    fontWeight={600}
-                    colorName={ColorNames.WHITE_1}
-                    size={20}
+                    color={theme.color.text.light}
+                    size="l"
                   >
                     {">"}
                   </Text>
                 </ChangeDayButtonsStyledFlex>
                 {withTodayButton && (
                   <TodayStyledText
-                    isCurrentDate={
-                      formattedCurrentMonth === formattedSelectedMonth
-                    }
+                    isCurrentDate={currentMonth === selectedMonth}
                     cursor="pointer"
                     onClick={() => {
                       changeMonth(dayjs().month());
                       changeYear(dayjs().year());
                     }}
-                    colorName={ColorNames.WHITE_1}
-                    size={16}
+                    color={theme.color.text.light}
+                    size="l"
                   >
                     Today
                   </TodayStyledText>
diff --git a/packages/web/src/components/DatePicker/styled.ts b/packages/web/src/components/DatePicker/styled.ts
index c1f28f4e..b379d720 100644
--- a/packages/web/src/components/DatePicker/styled.ts
+++ b/packages/web/src/components/DatePicker/styled.ts
@@ -1,12 +1,12 @@
 import styled from "styled-components";
-import { getColor } from "@core/util/color.utils";
-import { ColorNames } from "@core/types/color.types";
 import { Flex } from "@web/components/Flex";
 import { Text } from "@web/components/Text";
 import { SIDEBAR_MONTH_HEIGHT } from "@web/views/Calendar/layout.constants";
+import { theme } from "@web/common/styles/theme";
 
 const _hoverStyle = `
-  background-color: ${getColor(ColorNames.BLUE_5)};
+  background-color: ${theme.color.fg.primary}; 
+  color: ${theme.color.text.dark};
 `;
 
 export const ChangeDayButtonsStyledFlex = styled(Flex)`
@@ -29,13 +29,13 @@ export const MonthContainerStyled = styled(Flex)`
 `;
 
 export const StyledDatePicker = styled.div<{
-  monthsCount?: number;
   view: "widget" | "picker";
+  selectedColor: string;
 }>`
-  background-color: ${getColor(ColorNames.GREY_3)};
+  background-color: ${({ theme }) => theme.color.bg.primary};
   border: none;
   border-radius: 2px;
-  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+  box-shadow: 0px 4px 4px ${({ theme }) => theme.color.shadow.default};
   font-weight: 500;
   font-size: 12px;
   user-select: none;
@@ -66,7 +66,7 @@ export const StyledDatePicker = styled.div<{
       &:hover {
         ${({ view }) =>
           view === "widget" &&
-          `background-color: ${getColor(ColorNames.GREY_2)}`};
+          `background-color: ${theme.color.fg.primaryDark}`};
       }
     }
 
@@ -79,7 +79,7 @@ export const StyledDatePicker = styled.div<{
 
     &__day-name {
       opacity: 0.8;
-      color: ${getColor(ColorNames.WHITE_3)};
+      color: ${theme.color.text.light};
       font-size: 11px;
       margin: 0;
     }
@@ -87,7 +87,7 @@ export const StyledDatePicker = styled.div<{
     &__day {
       border: none !important;
       border-radius: 50% !important;
-      color: white;
+      color: ${theme.color.text.lighter};
       margin: 0;
 
       &:hover {
@@ -103,17 +103,20 @@ export const StyledDatePicker = styled.div<{
       }
 
       &--selected {
-        background-color: ${getColor(ColorNames.BLUE_5)};
+        color: ${theme.color.text.dark};
+        background-color: ${({ selectedColor }) => selectedColor};
       }
 
       &--today {
-        background-color: ${getColor(ColorNames.GREY_1)};
-        color: ${getColor(ColorNames.GREY_4)};
-        font-weight: normal;
+        color: ${({ selectedColor }) => selectedColor};
+      }
+
+      &--keyboard-selected {
+        background-color: ${theme.color.bg.primary};
       }
 
       &--outside-month {
-        color: ${getColor(ColorNames.WHITE_3)}99;
+        color: ${theme.color.text.darkPlaceholder};
       }
     }
   }
@@ -142,6 +145,7 @@ export const TodayStyledText = styled(Text)<{ isCurrentDate: boolean }>`
   opacity: ${({ isCurrentDate }) => (isCurrentDate ? 0 : 1)};
 
   &:hover {
-    ${_hoverStyle}
+    filter: brightness(160%);
+    transition: filter 0.35s ease-out;
   }
 `;
diff --git a/packages/web/src/components/Divider/Divider.tsx b/packages/web/src/components/Divider/Divider.tsx
index f536906d..16fcb7ac 100644
--- a/packages/web/src/components/Divider/Divider.tsx
+++ b/packages/web/src/components/Divider/Divider.tsx
@@ -1,6 +1,6 @@
 import React, { HTMLAttributes, useEffect, useState } from "react";
 
-import { Styled } from "./styled";
+import { StyledDivider } from "./styled";
 import { Props } from "./types";
 
 export const Divider: React.FC<Props & HTMLAttributes<HTMLDivElement>> = (
@@ -12,5 +12,5 @@ export const Divider: React.FC<Props & HTMLAttributes<HTMLDivElement>> = (
     toggle(true);
   }, []);
 
-  return <Styled toggled={toggled} {...props} />;
+  return <StyledDivider toggled={toggled} {...props} />;
 };
diff --git a/packages/web/src/components/Divider/styled.ts b/packages/web/src/components/Divider/styled.ts
index c7ab51c8..26bfecac 100644
--- a/packages/web/src/components/Divider/styled.ts
+++ b/packages/web/src/components/Divider/styled.ts
@@ -1,15 +1,11 @@
 import styled from "styled-components";
-import { linearGradient } from "@core/constants/colors";
-import { ANIMATION_TIME_3_MS } from "@web/common/constants/web.constants";
-import { getColor } from "@core/util/color.utils";
+import { getGradient } from "@web/common/styles/theme.util";
 
 import { Props } from "./types";
 
-export const Styled = styled.div<Props>`
-  background: ${({ colorName, color }) =>
-    color || (colorName ? getColor(colorName) : linearGradient)};
+export const StyledDivider = styled.div<Props>`
+  background: ${({ color }) => getGradient(color)};
   height: 2px;
   width: ${({ toggled, width }) => (toggled ? width || "100%" : 0)};
-  transition: ${({ withAnimation = true }) =>
-    withAnimation ? ANIMATION_TIME_3_MS : undefined};
+  transition: ${({ theme }) => theme.transition.default};
 `;
diff --git a/packages/web/src/components/Divider/types.ts b/packages/web/src/components/Divider/types.ts
index e89b92aa..e098d9a6 100644
--- a/packages/web/src/components/Divider/types.ts
+++ b/packages/web/src/components/Divider/types.ts
@@ -1,8 +1,5 @@
-import { ColorNames } from "@core/types/color.types";
-
 export interface Props {
   toggled?: boolean;
   width?: string;
-  colorName?: ColorNames;
   withAnimation?: boolean;
 }
diff --git a/packages/web/src/components/Flex/styled.ts b/packages/web/src/components/Flex/styled.ts
index 341418e5..d7775e4a 100644
--- a/packages/web/src/components/Flex/styled.ts
+++ b/packages/web/src/components/Flex/styled.ts
@@ -16,6 +16,7 @@ export enum JustifyContent {
 
 export enum AlignItems {
   CENTER = "center",
+  BASELINE = "baseline",
   FLEX_END = "flex-end",
   FLEX_START = "flex-start",
 }
diff --git a/packages/web/src/components/FocusableUnderlinedComponent/FocusableUnderlinedComponent.tsx b/packages/web/src/components/Focusable/Focusable.tsx
similarity index 74%
rename from packages/web/src/components/FocusableUnderlinedComponent/FocusableUnderlinedComponent.tsx
rename to packages/web/src/components/Focusable/Focusable.tsx
index a4739e7a..df3f5ef0 100644
--- a/packages/web/src/components/FocusableUnderlinedComponent/FocusableUnderlinedComponent.tsx
+++ b/packages/web/src/components/Focusable/Focusable.tsx
@@ -7,12 +7,19 @@ import {
 
 export type Props<T extends ClassNamedComponent> = T &
   UnderlinedInput & {
-    Component: React.ComponentType<T>;
     autoFocus?: boolean;
+    Component: React.ComponentType<T>;
+    underlineColor?: string;
   };
 
-export const Focusable = <T,>(
-  { Component, autoFocus = false, withUnderline, ...props }: Props<T>,
+const _Focusable = <T,>(
+  {
+    autoFocus = false,
+    Component,
+    underlineColor,
+    withUnderline,
+    ...props
+  }: Props<T>,
   ref: Ref<HTMLDivElement>
 ) => {
   const [isFocused, toggleFocused] = useState(autoFocus);
@@ -27,12 +34,12 @@ export const Focusable = <T,>(
         onBlur={() => toggleFocused(false)}
         autoFocus={autoFocus}
       />
-      {!!withUnderline && isFocused && <Divider />}
+      {!!withUnderline && isFocused && <Divider color={underlineColor} />}
     </>
   );
 };
 
-export const FocusableUnderlineLayout = forwardRef(Focusable) as <
+export const Focusable = forwardRef(_Focusable) as <
   T extends ClassNamedComponent
 >(
   p: Props<T> & { ref?: Ref<HTMLDivElement | HTMLTextAreaElement> }
diff --git a/packages/web/src/components/FocusableUnderlinedComponent/index.ts b/packages/web/src/components/FocusableUnderlinedComponent/index.ts
deleted file mode 100644
index 2c8bd7bf..00000000
--- a/packages/web/src/components/FocusableUnderlinedComponent/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import { FocusableUnderlineLayout } from "./FocusableUnderlinedComponent";
-
-export { FocusableUnderlineLayout };
diff --git a/packages/web/src/components/GlobalStyle/styled.ts b/packages/web/src/components/GlobalStyle/styled.ts
index b801d010..89acd512 100644
--- a/packages/web/src/components/GlobalStyle/styled.ts
+++ b/packages/web/src/components/GlobalStyle/styled.ts
@@ -1,16 +1,16 @@
 import { createGlobalStyle } from "styled-components";
 import { ZIndex } from "@web/common/constants/web.constants";
-import { BASE_COLORS } from "@core/constants/colors";
+import { theme } from "@web/common/styles/theme";
 
 export const GlobalStyle = createGlobalStyle`
   * {
-    font-family: 'Poppins';
+    font-family: 'Rubik', Arial, sans-serif;
     box-sizing: border-box;
   }
 
   body {
     margin: 0;
-    background-color:${BASE_COLORS.DEEP_BLUE};
+    background-color: ${theme.color.bg.primary};
     overflow-x: hidden;
   }
 
diff --git a/packages/web/src/components/Icons/ArrowLeftLine.tsx b/packages/web/src/components/Icons/ArrowLineLeft.tsx
similarity index 73%
rename from packages/web/src/components/Icons/ArrowLeftLine.tsx
rename to packages/web/src/components/Icons/ArrowLineLeft.tsx
index aa1acf6e..a59766c3 100644
--- a/packages/web/src/components/Icons/ArrowLeftLine.tsx
+++ b/packages/web/src/components/Icons/ArrowLineLeft.tsx
@@ -1,12 +1,10 @@
 import styled from "styled-components";
 import { ArrowLineLeft } from "@phosphor-icons/react";
-import { ColorNames } from "@core/types/color.types";
-import { getColor } from "@core/util/color.utils";
 import { ZIndex } from "@web/common/constants/web.constants";
 
 export const ArrowLineLeftIcon = styled(ArrowLineLeft)`
   cursor: pointer;
-  color: ${getColor(ColorNames.GREY_6)};
+  color: ${({ theme }) => theme.color.text.lightInactive};
   position: absolute;
   right: 7px;
   bottom: 8px;
diff --git a/packages/web/src/components/Icons/ArrowRightLine.tsx b/packages/web/src/components/Icons/ArrowLineRight.tsx
similarity index 73%
rename from packages/web/src/components/Icons/ArrowRightLine.tsx
rename to packages/web/src/components/Icons/ArrowLineRight.tsx
index 0a21c850..67ef75a5 100644
--- a/packages/web/src/components/Icons/ArrowRightLine.tsx
+++ b/packages/web/src/components/Icons/ArrowLineRight.tsx
@@ -1,12 +1,10 @@
 import styled from "styled-components";
 import { ArrowLineRight } from "@phosphor-icons/react";
-import { ColorNames } from "@core/types/color.types";
-import { getColor } from "@core/util/color.utils";
 import { ZIndex } from "@web/common/constants/web.constants";
 
 export const ArrowLineRightIcon = styled(ArrowLineRight)`
   cursor: pointer;
-  color: ${getColor(ColorNames.GREY_6)};
+  color: ${({ theme }) => theme.color.text.lightInactive};
   position: absolute;
   right: 7px;
   bottom: 8px;
diff --git a/packages/web/src/components/Icons/Command.tsx b/packages/web/src/components/Icons/Command.tsx
index 19383500..8cfd2daf 100644
--- a/packages/web/src/components/Icons/Command.tsx
+++ b/packages/web/src/components/Icons/Command.tsx
@@ -1,10 +1,8 @@
 import styled from "styled-components";
 import { Command } from "@phosphor-icons/react";
-import { ColorNames } from "@core/types/color.types";
-import { getColor } from "@core/util/color.utils";
 
 export const StyledCommandIcon = styled(Command)`
-  color: ${getColor(ColorNames.GREY_5)};
+  color: ${({ theme }) => theme.color.text.lighter};
   transition: filter 0.2s ease;
 
   &:hover {
diff --git a/packages/web/src/components/Icons/List.tsx b/packages/web/src/components/Icons/List.tsx
index 74b80a6e..f8d096d1 100644
--- a/packages/web/src/components/Icons/List.tsx
+++ b/packages/web/src/components/Icons/List.tsx
@@ -1,10 +1,8 @@
 import styled from "styled-components";
 import { List } from "@phosphor-icons/react";
-import { ColorNames } from "@core/types/color.types";
-import { getColor } from "@core/util/color.utils";
 
 export const StyledListIcon = styled(List)`
-  color: ${getColor(ColorNames.GREY_5)};
+  color: ${({ theme }) => theme.color.text.light};
   transition: filter 0.2s ease;
 
   &:hover {
diff --git a/packages/web/src/components/Icons/X.tsx b/packages/web/src/components/Icons/X.tsx
new file mode 100644
index 00000000..43dc7768
--- /dev/null
+++ b/packages/web/src/components/Icons/X.tsx
@@ -0,0 +1,10 @@
+import styled from "styled-components";
+import { X } from "@phosphor-icons/react";
+
+export const StyledXIcon = styled(X)`
+  transition: filter 0.2s ease;
+
+  &:hover {
+    filter: brightness(150%);
+  }
+`;
diff --git a/packages/web/src/components/Input/Input.tsx b/packages/web/src/components/Input/Input.tsx
index 6d32fc8e..2321e242 100644
--- a/packages/web/src/components/Input/Input.tsx
+++ b/packages/web/src/components/Input/Input.tsx
@@ -8,9 +8,9 @@ import {
   ClassNamedComponent,
   UnderlinedInput,
 } from "@web/common/types/component.types";
-import { FocusableUnderlineLayout } from "@web/components/FocusableUnderlinedComponent";
 
 import { StyledInput, Props as StyledProps } from "./styled";
+import { Focusable } from "../Focusable/Focusable";
 
 export interface Props
   extends ClassNamedComponent,
@@ -25,7 +25,7 @@ const InputComponent: ForwardRefRenderFunction<HTMLInputElement, Props> = (
   { withUnderline = true, ...props }: Props,
   ref: Ref<HTMLInputElement>
 ) => (
-  <FocusableUnderlineLayout
+  <Focusable
     Component={StyledInput}
     ref={ref}
     withUnderline={withUnderline}
diff --git a/packages/web/src/components/Input/styled.ts b/packages/web/src/components/Input/styled.ts
index 2c1e98cd..45ad94c8 100644
--- a/packages/web/src/components/Input/styled.ts
+++ b/packages/web/src/components/Input/styled.ts
@@ -1,38 +1,20 @@
 import styled from "styled-components";
-import { BASE_COLORS } from "@core/constants/colors";
-import { InputProps, inputBaseStyles } from "@web/common/styles/components";
 
-export enum Scale {
-  SMALL = "small",
-  MEDIUM = "medium",
-  LARGE = "large",
+export interface Props {
+  bgColor?: string;
 }
 
-export interface Props extends InputProps {
-  scale?: Scale;
-}
-
-const heightByScale = {
-  [Scale.LARGE]: 55,
-  [Scale.MEDIUM]: 34,
-  [Scale.SMALL]: 15,
-};
-
-const fontSizeByScale = {
-  [Scale.LARGE]: 50,
-  [Scale.MEDIUM]: 17,
-  [Scale.SMALL]: 10,
-};
-
 export const StyledInput = styled.input<Props>`
+  background-color: ${({ bgColor }) => bgColor};
   border: none;
-  color: ${BASE_COLORS.DEEP_BLUE};
-  height: ${({ scale = Scale.MEDIUM }) => heightByScale[scale]}px;
-  font-size: ${({ scale = Scale.MEDIUM }) => fontSizeByScale[scale]}px;
+  height: 34px;
+  font-size: ${({ theme }) => theme.text.size.l};
   outline: none;
   width: 100%;
 
-  ${inputBaseStyles}
+  ::placeholder {
+    color: ${({ theme }) => theme.color.text.darkPlaceholder};
+  }
 
   &:hover {
     filter: brightness(87%);
diff --git a/packages/web/src/components/Text/styled.ts b/packages/web/src/components/Text/styled.ts
index 90e5b3de..c9725ddc 100644
--- a/packages/web/src/components/Text/styled.ts
+++ b/packages/web/src/components/Text/styled.ts
@@ -1,33 +1,47 @@
 import styled from "styled-components";
-import { linearGradient } from "@core/constants/colors";
-import { BackgroundProps, ColorProps } from "@web/common/styles/components";
-import { getColor } from "@core/util/color.utils";
+import { getGradient, blueGradient } from "@web/common/styles/theme.util";
+import { theme } from "@web/common/styles/theme";
 
-export interface Props extends BackgroundProps, ColorProps {
+export interface Props {
+  bgColor?: string;
+  color?: string;
   cursor?: string;
   fontWeight?: number | "normal" | "bold" | "bolder" | "lighter";
   lineHeight?: number;
-  size?: number;
+  size?: FontSize;
+  withGradient?: boolean;
   withUnderline?: boolean;
   zIndex?: number;
 }
 
+type FontSize = "xs" | "s" | "m" | "l" | "xl" | "xxl" | "xxxl" | "4xl" | "5xl";
+
 export const StyledText = styled.span<Props>`
-  ${({ colorName }) => colorName && `color ${getColor(colorName)};`}
+  ${({ color }) => color && `color: ${color};`}
   ${({ cursor }) => cursor && `cursor: ${cursor};`}
-  font-weight: ${({ fontWeight = "normal" }) => fontWeight};
   ${({ lineHeight }) => lineHeight && `line-height: ${lineHeight}px;`}
+  ${({ size }) => size && `font-size: ${theme.text.size[size]};`} 
+  
+  font-weight: ${({ fontWeight = "normal" }) => fontWeight};
   position: relative;
-  ${({ size }) => size && `font-size: ${size}px;`}
 
-  ${({ withUnderline = false, cursor }) =>
+  ${({ withGradient }) =>
+    withGradient &&
+    `
+  color: transparent;
+  background: ${blueGradient};
+  background-clip: text;
+  -webkit-background-clip: text; 
+  `}
+
+  ${({ color, cursor, withUnderline = false }) =>
     withUnderline &&
     `
     cursor: ${cursor || "pointer"};
     &:hover {
       &::after {
         content: ' ';
-        background: ${linearGradient};
+        background: ${getGradient(color)};
         position: absolute;
         width: 100%;
         height: 2px;
diff --git a/packages/web/src/components/Textarea/Textarea.tsx b/packages/web/src/components/Textarea/Textarea.tsx
index 2b30dcbb..2750fd26 100644
--- a/packages/web/src/components/Textarea/Textarea.tsx
+++ b/packages/web/src/components/Textarea/Textarea.tsx
@@ -5,26 +5,30 @@ import React, {
   RefObject,
   useRef,
 } from "react";
-import { FocusableUnderlineLayout } from "@web/components/FocusableUnderlinedComponent";
+import { Focusable } from "@web/components/Focusable/Focusable";
 
-import { Styled } from "./styled";
-import { Props } from "./types";
+import { StyledTextarea } from "./styled";
+import { TextareaProps } from "./types";
 
-const Component: ForwardRefRenderFunction<HTMLTextAreaElement, Props> = (
-  { withUnderline = true, ...props }: Props,
+const _Textarea: ForwardRefRenderFunction<
+  HTMLTextAreaElement,
+  TextareaProps
+> = (
+  { withUnderline = true, underlineColor, ...props }: TextareaProps,
   parentRef: ForwardedRef<HTMLTextAreaElement>
 ) => {
   const newRef = useRef<HTMLTextAreaElement>(null);
   const ref = (parentRef || newRef) as RefObject<HTMLTextAreaElement>;
 
   return (
-    <FocusableUnderlineLayout
-      Component={Styled}
+    <Focusable
+      Component={StyledTextarea}
       ref={ref}
+      underlineColor={underlineColor}
       withUnderline={withUnderline}
       {...props}
     />
   );
 };
 
-export const Textarea = forwardRef(Component);
+export const Textarea = forwardRef(_Textarea);
diff --git a/packages/web/src/components/Textarea/styled.ts b/packages/web/src/components/Textarea/styled.ts
index ee9a2685..206152cf 100644
--- a/packages/web/src/components/Textarea/styled.ts
+++ b/packages/web/src/components/Textarea/styled.ts
@@ -1,14 +1,16 @@
 import styled from "styled-components";
 import TextareaAutoSize from "react-textarea-autosize";
-import { inputBaseStyles } from "@web/common/styles/components";
 
-import { Props } from "./types";
+import { TextareaProps } from "./types";
 
-export const Styled = styled(TextareaAutoSize)<Props>`
-  ${inputBaseStyles}
+export const StyledTextarea = styled(TextareaAutoSize)<TextareaProps>`
   border: none;
   outline: none;
   font-weight: 600;
   width: 100%;
   resize: none;
+
+  ::placeholder {
+    color: ${({ theme }) => theme.color.text.darkPlaceholder};
+  }
 `;
diff --git a/packages/web/src/components/Textarea/types.ts b/packages/web/src/components/Textarea/types.ts
index e2d0d9aa..eb5f66a9 100644
--- a/packages/web/src/components/Textarea/types.ts
+++ b/packages/web/src/components/Textarea/types.ts
@@ -1,14 +1,12 @@
 import { TextareaAutosizeProps } from "react-textarea-autosize";
-import { ColorNames } from "@core/types/color.types";
 import {
   ClassNamedComponent,
   UnderlinedInput,
 } from "@web/common/types/component.types";
 
-export interface Props
+export interface TextareaProps
   extends UnderlinedInput,
     ClassNamedComponent,
     TextareaAutosizeProps {
-  background?: ColorNames;
   heightFitsContent?: boolean;
 }
diff --git a/packages/web/src/components/TimePicker/styled.ts b/packages/web/src/components/TimePicker/styled.ts
index 52345959..f06df600 100644
--- a/packages/web/src/components/TimePicker/styled.ts
+++ b/packages/web/src/components/TimePicker/styled.ts
@@ -1,10 +1,6 @@
 import styled from "styled-components";
-import { BASE_COLORS } from "@core/constants/colors";
-import { getColor } from "@core/util/color.utils";
-import { ColorNames } from "@core/types/color.types";
-import { ANIMATION_TIME_3_MS } from "@web/common/constants/web.constants";
+import { darken } from "@core/util/color.utils";
 import { Divider } from "@web/components/Divider";
-import { FORM_TIME_SIZE } from "@web/views/Forms/EventForm/styled";
 
 export interface Props {
   bgColor?: string;
@@ -12,7 +8,7 @@ export interface Props {
 }
 
 export const StyledTimePicker = styled.div<Props>`
-  font-size: ${FORM_TIME_SIZE}px;
+  font-size: ${({ theme }) => theme.text.size.l};
   min-width: 90px;
   position: relative;
 
@@ -50,7 +46,7 @@ export const StyledTimePicker = styled.div<Props>`
     }
 
     &__single-value {
-      color: ${BASE_COLORS.DEEP_BLUE};
+      color: ${({ theme }) => theme.color.text.dark};
     }
 
     &__menu {
@@ -60,19 +56,19 @@ export const StyledTimePicker = styled.div<Props>`
       min-width: 150px;
 
       &-list {
-        font-size: ${FORM_TIME_SIZE - 3}px;
+        font-size: ${({ theme }) => theme.text.size.m};
         padding: 0;
         ${({ isOpen: open }) => !open && "max-height: 0;"}
-        transition: ${ANIMATION_TIME_3_MS};
+        transition: ${({ theme }) => theme.transition.default};
 
         ::-webkit-scrollbar {
           width: 8px;
         }
         ::-webkit-scrollbar-thumb {
-          background: ${getColor(ColorNames.GREY_3)};
+          background: ${({ bgColor }) => darken(bgColor, 40)};
           border-radius: 3px;
           &:hover {
-            background: ${getColor(ColorNames.GREY_2)};
+            background: ${({ bgColor }) => darken(bgColor, 80)};
             transition: background-color 0.2s;
           }
         }
diff --git a/packages/web/src/components/Tooltip/Description/TooltipDescription.tsx b/packages/web/src/components/Tooltip/Description/TooltipDescription.tsx
index a8b38b21..cfb6857e 100644
--- a/packages/web/src/components/Tooltip/Description/TooltipDescription.tsx
+++ b/packages/web/src/components/Tooltip/Description/TooltipDescription.tsx
@@ -7,7 +7,7 @@ interface Props {
 
 export const TooltipDescription: FC<Props> = ({ description }) => {
   return (
-    <Text size={11} style={{ paddingRight: 10 }}>
+    <Text size="m" style={{ paddingRight: 10 }}>
       {description}
     </Text>
   );
diff --git a/packages/web/src/components/Tooltip/TooltipWrapper.tsx b/packages/web/src/components/Tooltip/TooltipWrapper.tsx
index b360a32f..0dc18166 100644
--- a/packages/web/src/components/Tooltip/TooltipWrapper.tsx
+++ b/packages/web/src/components/Tooltip/TooltipWrapper.tsx
@@ -42,7 +42,7 @@ export const TooltipWrapper: React.FC<Props> = ({
           {description && <TooltipDescription description={description} />}
           {shortcut && (
             <StyledShortcutTip>
-              <Text size={12}>{shortcut}</Text>
+              <Text size="m">{shortcut}</Text>
             </StyledShortcutTip>
           )}
         </Flex>
diff --git a/packages/web/src/components/Tooltip/styled.ts b/packages/web/src/components/Tooltip/styled.ts
index 5832fd89..c12b4c65 100644
--- a/packages/web/src/components/Tooltip/styled.ts
+++ b/packages/web/src/components/Tooltip/styled.ts
@@ -1,12 +1,9 @@
 import styled from "styled-components";
-import { ColorNames } from "@core/types/color.types";
-import { getColor } from "@core/util/color.utils";
-import { BASE_COLORS } from "@core/constants/colors";
 import { Flex } from "@web/components/Flex";
 
 export const StyledShortcutTip = styled(Flex)`
-  background-color: ${BASE_COLORS.LIGHT_GREY};
-  border: 2px solid ${getColor(ColorNames.GREY_2)};
+  background-color: ${({ theme }) => theme.color.fg.primary};
+  border: 1px solid ${({ theme }) => theme.color.bg.primary};
   border-radius: 3px;
   padding: 5px 10px;
 `;
diff --git a/packages/web/src/index.html b/packages/web/src/index.html
index a8d1a9e0..c059cb0e 100644
--- a/packages/web/src/index.html
+++ b/packages/web/src/index.html
@@ -5,8 +5,10 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <title>Compass</title>
     <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
-      href="https://fonts.googleapis.com/css?family=Poppins"
+      href="https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap"
       rel="stylesheet"
     />
   </head>
diff --git a/packages/web/src/views/Calendar/components/Dedication/Dedication.tsx b/packages/web/src/views/Calendar/components/Dedication/Dedication.tsx
index 7464c2ab..cd943f07 100644
--- a/packages/web/src/views/Calendar/components/Dedication/Dedication.tsx
+++ b/packages/web/src/views/Calendar/components/Dedication/Dedication.tsx
@@ -1,13 +1,13 @@
 import React, { useState } from "react";
 import Modal from "react-modal";
 import { useHotkeys } from "react-hotkeys-hook";
-import { colorNameByPriority } from "@core/constants/colors";
-import { Button } from "@web/components/Button";
 import derekImg from "@web/assets/png/derek.png";
+import { Flex } from "@web/components/Flex";
+import { FlexDirections, JustifyContent } from "@web/components/Flex/styled";
+import { StyledXIcon } from "@web/components/Icons/X";
 
 import {
   StyledCaption,
-  StyledDedicationModal,
   StyledDedicationText,
   StyledDerekPic,
   StyledDerekQuote,
@@ -33,7 +33,7 @@ export const Dedication = () => {
   };
 
   return (
-    <StyledDedicationModal>
+    <>
       <Modal
         appElement={document.getElementById("root")}
         isOpen={isOpen}
@@ -43,7 +43,13 @@ export const Dedication = () => {
         shouldFocusAfterRender={true}
         style={modalStyles}
       >
-        <h2>For Derek</h2>
+        <Flex
+          direction={FlexDirections.ROW}
+          justifyContent={JustifyContent.SPACE_BETWEEN}
+        >
+          <h2>For Derek</h2>
+          <StyledXIcon size={20} onClick={close} />
+        </Flex>
         <StyledDedicationText>
           This app is dedicated to Derek John Benton (1993-2014).
         </StyledDedicationText>
@@ -57,11 +63,7 @@ export const Dedication = () => {
           <StyledDerekPic src={derekImg} alt="Headshot of Derek" />
         </StyledDerekQuoteContainer>
         <StyledCaption>-Derek's Facebook post from 12.24.2013</StyledCaption>
-
-        <Button color={colorNameByPriority.work} onClick={close}>
-          Close
-        </Button>
       </Modal>
-    </StyledDedicationModal>
+    </>
   );
 };
diff --git a/packages/web/src/views/Calendar/components/Dedication/styled.ts b/packages/web/src/views/Calendar/components/Dedication/styled.ts
index 2f1c0a63..b39337b1 100644
--- a/packages/web/src/views/Calendar/components/Dedication/styled.ts
+++ b/packages/web/src/views/Calendar/components/Dedication/styled.ts
@@ -1,12 +1,12 @@
 import styled from "styled-components";
-import { getColor } from "@core/util/color.utils";
-import { ColorNames } from "@core/types/color.types";
 import { Flex } from "@web/components/Flex";
+import { ZIndex } from "@web/common/constants/web.constants";
+import { theme } from "@web/common/styles/theme";
 
 export const modalStyles = {
   content: {
-    background: getColor(ColorNames.WHITE_1),
-    border: `1px solid ${getColor(ColorNames.GREY_3)}`,
+    background: theme.color.fg.primary,
+    boxShadow: `0 4px 8px ${theme.color.panel.shadow}`,
     top: "50%",
     left: "50%",
     right: "auto",
@@ -14,24 +14,18 @@ export const modalStyles = {
     marginRight: "-50%",
     transform: "translate(-50%, -50%)",
     width: "59%",
-    zIndex: 1000,
+    zIndex: ZIndex.MAX,
   },
 };
 
 export const StyledCaption = styled.div`
-  color: #545050;
+  color: transparent;
   font-size: 0.8rem;
   margin-left: 70px;
   padding-bottom: 30px;
 `;
 
-export const StyledDedicationModal = styled.div`
-  background-color: ${getColor(ColorNames.WHITE_1)};
-
-  &.ReactModal__Content--after-open {
-    background-color: pink;
-  }
-`;
+export const StyledDedicationModal = styled.div``;
 
 export const StyledDedicationText = styled.p`
   font-size: 1rem;
@@ -45,8 +39,7 @@ export const StyledDerekQuoteContainer = styled(Flex)`
 
 export const StyledDerekPic = styled.img`
   border-radius: 50%;
-  border: 4px solid #fff;
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 0 10px ${({ theme }) => theme.color.panel.shadow};
   max-width: 100%;
 `;
 
diff --git a/packages/web/src/views/Calendar/components/Event/Grid/GridEvent/GridEvent.tsx b/packages/web/src/views/Calendar/components/Event/Grid/GridEvent/GridEvent.tsx
index d0f5fab7..be5e9a53 100644
--- a/packages/web/src/views/Calendar/components/Event/Grid/GridEvent/GridEvent.tsx
+++ b/packages/web/src/views/Calendar/components/Event/Grid/GridEvent/GridEvent.tsx
@@ -98,14 +98,14 @@ const _GridEvent = (
         direction={FlexDirections.COLUMN}
         flexWrap={FlexWrap.WRAP}
       >
-        <StyledEventTitle size={10.3} role="textbox">
+        <StyledEventTitle size="m" role="textbox">
           {event.title}
         </StyledEventTitle>
         {!event.isAllDay && (
           <>
             <Times
               event={event}
-              isDrafting={isDragging || isResizing}
+              isDrafting={isDraft}
               isPlaceholder={isPlaceholder}
             />
             <>
@@ -130,5 +130,9 @@ const _GridEvent = (
 
 export const GridEvent = forwardRef(_GridEvent);
 export const GridEventMemo = memo(GridEvent, (prev, next) => {
-  return prev.event === next.event && prev.measurements === next.measurements;
+  return (
+    prev.event === next.event &&
+    prev.isPlaceholder === next.isPlaceholder &&
+    prev.measurements === next.measurements
+  );
 });
diff --git a/packages/web/src/views/Calendar/components/Event/Grid/GridEvent/Times/Times.tsx b/packages/web/src/views/Calendar/components/Event/Grid/GridEvent/Times/Times.tsx
index 6168eeb5..cd71b87c 100644
--- a/packages/web/src/views/Calendar/components/Event/Grid/GridEvent/Times/Times.tsx
+++ b/packages/web/src/views/Calendar/components/Event/Grid/GridEvent/Times/Times.tsx
@@ -24,8 +24,7 @@ export const Times: React.FC<Props> = ({
   const [isHovered, setIsHovered] = useState(false);
   const [isTimesShown, setIsTimesShown] = useState(event.isTimesShown);
 
-  const SIZE = 10;
-  const shouldRevealBox = isPlaceholder && !isTimesShown && !isDrafting;
+  const shouldRevealBox = !isPlaceholder && !isTimesShown && !isDrafting;
 
   const toggleTimes = (e: React.MouseEvent) => {
     e.stopPropagation();
@@ -52,9 +51,8 @@ export const Times: React.FC<Props> = ({
           onMouseDown={toggleTimes}
         >
           <Text
-            lineHeight={SIZE}
             role="textbox"
-            size={SIZE}
+            size="xs"
             title="Click to hide times"
             zIndex={ZIndex.LAYER_3}
           >
@@ -65,9 +63,8 @@ export const Times: React.FC<Props> = ({
         <StyledTimes revealBox={shouldRevealBox}>
           {isHovered && shouldRevealBox ? (
             <Text
-              lineHeight={SIZE}
               onMouseDown={toggleTimes}
-              size={SIZE}
+              size="xs"
               role="textbox"
               title="Click to show times"
             >
diff --git a/packages/web/src/views/Calendar/components/Event/Grid/GridEventPreview/GridEventPreview.tsx b/packages/web/src/views/Calendar/components/Event/Grid/GridEventPreview/GridEventPreview.tsx
index 66181211..c99da75e 100644
--- a/packages/web/src/views/Calendar/components/Event/Grid/GridEventPreview/GridEventPreview.tsx
+++ b/packages/web/src/views/Calendar/components/Event/Grid/GridEventPreview/GridEventPreview.tsx
@@ -85,14 +85,14 @@ export const GridEventPreview: FC<Props> = memo(function GridEventPreview({
           width={width}
         >
           <Flex alignItems={AlignItems.CENTER} flexWrap={FlexWrap.WRAP}>
-            <Text size={12} role="textbox">
+            <Text size="m" role="textbox">
               {event.title}
             </Text>
 
             {isOverMainGrid && (
               <>
                 <SpaceCharacter />
-                <Text size={10}>{getTimePreview()}</Text>
+                <Text size="s">{getTimePreview()}</Text>
               </>
             )}
           </Flex>
diff --git a/packages/web/src/views/Calendar/components/Event/Grid/GridEventPreview/styled.ts b/packages/web/src/views/Calendar/components/Event/Grid/GridEventPreview/styled.ts
index 9936f299..496bc4d3 100644
--- a/packages/web/src/views/Calendar/components/Event/Grid/GridEventPreview/styled.ts
+++ b/packages/web/src/views/Calendar/components/Event/Grid/GridEventPreview/styled.ts
@@ -2,13 +2,9 @@ import styled from "styled-components";
 import type { XYCoord } from "react-dnd";
 import type { CSSProperties } from "react";
 import { Priority } from "@core/constants/core.constants";
-import {
-  getInvertedColor,
-  hoverColorsByPriority,
-} from "@core/util/color.utils";
 import { ZIndex } from "@web/common/constants/web.constants";
-import { colorNameByPriority } from "@core/constants/colors";
-import { InvertedColorNames } from "@core/types/color.types";
+import { theme } from "@web/common/styles/theme";
+import { hoverColorByPriority } from "@web/common/styles/theme.util";
 
 import { snapToGrid } from "./snap.grid";
 
@@ -59,12 +55,10 @@ interface StyledEventProps {
 export const StyledGridEventPreview = styled.div.attrs<StyledEventProps>(
   (props) => {
     return {
-      backgroundColor: hoverColorsByPriority[props.priority],
-      color: getInvertedColor(
-        colorNameByPriority[props.priority] as unknown as InvertedColorNames
-      ),
+      backgroundColor: hoverColorByPriority[props.priority],
+      color: theme.color.text.dark,
       height: props.height,
-      hoverColor: hoverColorsByPriority[props.priority],
+      hoverColor: hoverColorByPriority[props.priority],
       width: props.width,
     };
   }
diff --git a/packages/web/src/views/Calendar/components/Event/styled.ts b/packages/web/src/views/Calendar/components/Event/styled.ts
index fd4be831..cd13042b 100644
--- a/packages/web/src/views/Calendar/components/Event/styled.ts
+++ b/packages/web/src/views/Calendar/components/Event/styled.ts
@@ -1,9 +1,12 @@
 import styled from "styled-components";
 import { Priority } from "@core/constants/core.constants";
-import { getColor, hoverColorsByPriority } from "@core/util/color.utils";
-import { colorNameByPriority } from "@core/constants/colors";
+import { brighten } from "@core/util/color.utils";
 import { Text } from "@web/components/Text";
 import { ZIndex } from "@web/common/constants/web.constants";
+import {
+  colorByPriority,
+  hoverColorByPriority,
+} from "@web/common/styles/theme.util";
 
 interface StyledEventProps {
   allDay: boolean;
@@ -22,15 +25,13 @@ interface StyledEventProps {
   width: number;
 }
 
-const DIM = 0.65;
-
 export const StyledEvent = styled.div.attrs<StyledEventProps>((props) => {
   const getBgColor = () => {
     if (props.isResizing || props.isDragging) {
-      return hoverColorsByPriority[props.priority];
+      return brighten(colorByPriority[props.priority]);
     }
 
-    const origColor = getColor(colorNameByPriority[props.priority]);
+    const origColor = colorByPriority[props.priority];
     return origColor;
   };
 
@@ -41,7 +42,7 @@ export const StyledEvent = styled.div.attrs<StyledEventProps>((props) => {
     isInPast: props.isInPast,
     hoverColor: props.isPlaceholder
       ? null
-      : hoverColorsByPriority[props.priority],
+      : hoverColorByPriority[props.priority],
     opacity: props.isPlaceholder ? 0.5 : null,
     ref: props.ref,
     top: props.top,
@@ -52,7 +53,7 @@ export const StyledEvent = styled.div.attrs<StyledEventProps>((props) => {
   border-radius: 2px;
   ${(props) => props.isDragging && `cursor: grabbing`}
   filter: brightness(
-    ${({ isInPast }) => (isInPast ? DIM : null)}
+    ${({ isInPast }) => (isInPast ? 0.7 : null)}
   );
   height: ${({ height }) => height}px;
   left: ${(props) => props.left}px;
@@ -70,13 +71,12 @@ export const StyledEvent = styled.div.attrs<StyledEventProps>((props) => {
   &:hover {
     transition: background-color 0.35s linear;
 
-    ${({ isPlaceholder, isResizing, hoverColor }) =>
+    ${({ isPlaceholder, isResizing, hoverColor, theme }) =>
       !isPlaceholder &&
       !isResizing &&
       `
       background-color: ${hoverColor};
-      drop-shadow(2px 4px 4px black);
-      filter: brigthness(0.65); 
+      drop-shadow(2px 4px 4px ${theme.color.shadow.default});
       `};
   }
 
diff --git a/packages/web/src/views/Calendar/components/Grid/AllDayRow/AllDayEvent.tsx b/packages/web/src/views/Calendar/components/Grid/AllDayRow/AllDayEvent.tsx
index d4f5231b..775b20ee 100644
--- a/packages/web/src/views/Calendar/components/Grid/AllDayRow/AllDayEvent.tsx
+++ b/packages/web/src/views/Calendar/components/Grid/AllDayRow/AllDayEvent.tsx
@@ -56,7 +56,7 @@ const AllDayEvent = ({
         alignItems={AlignItems.FLEX_START}
         direction={FlexDirections.COLUMN}
       >
-        <Text size={10.3} role="textbox">
+        <Text size="m" role="textbox">
           {event.title}
           <SpaceCharacter />
         </Text>
diff --git a/packages/web/src/views/Calendar/components/Grid/AllDayRow/styled.ts b/packages/web/src/views/Calendar/components/Grid/AllDayRow/styled.ts
index 373c0981..8bc5a97b 100644
--- a/packages/web/src/views/Calendar/components/Grid/AllDayRow/styled.ts
+++ b/packages/web/src/views/Calendar/components/Grid/AllDayRow/styled.ts
@@ -1,9 +1,6 @@
 import styled from "styled-components";
-import { ColorNames } from "@core/types/color.types";
-import { getColor } from "@core/util/color.utils";
 import { Flex } from "@web/components/Flex";
 import {
-  DIVIDER_ALLDAY,
   SCROLLBAR_WIDTH,
   GRID_MARGIN_LEFT,
   GRID_Y_START,
@@ -11,14 +8,6 @@ import {
 } from "@web/views/Calendar/layout.constants";
 import { GRID_TIME_STEP } from "@web/views/Calendar/layout.constants";
 
-export interface AllDayRowProps {
-  rowsCount: number;
-}
-
-const allDayRowDivider = `${DIVIDER_ALLDAY}px solid ${getColor(
-  ColorNames.GREY_4
-)}70`;
-
 const gridHeight = `100% - (${GRID_Y_START}px + ${GRID_PADDING_BOTTOM}px)`;
 const gridRowHeight = `(${gridHeight}) / 11`;
 const interval = 60 / GRID_TIME_STEP;
@@ -26,8 +15,8 @@ const allDayRowHeight = `${gridRowHeight} / ${interval}`;
 
 const gridWidth = `100% - ${SCROLLBAR_WIDTH}px`;
 
-export const StyledAllDayRow = styled(Flex)<AllDayRowProps>`
-  border-bottom: ${allDayRowDivider};
+export const StyledAllDayRow = styled(Flex)<{ rowsCount: number }>`
+  border-bottom: ${({ theme }) => `2px solid ${theme.color.gridLine.primary}`};
   height: ${({ rowsCount }) =>
     `calc(${allDayRowHeight} * 2 + ${
       rowsCount * 2 || 1
diff --git a/packages/web/src/views/Calendar/components/Grid/Columns/Columns.tsx b/packages/web/src/views/Calendar/components/Grid/Columns/Columns.tsx
index 8b48206d..be6e4bc9 100644
--- a/packages/web/src/views/Calendar/components/Grid/Columns/Columns.tsx
+++ b/packages/web/src/views/Calendar/components/Grid/Columns/Columns.tsx
@@ -2,8 +2,7 @@ import React, { FC } from "react";
 import { Dayjs } from "dayjs";
 import { YEAR_MONTH_DAY_FORMAT } from "@core/constants/date.constants";
 import { NowLine } from "@web/views/Calendar/components/NowLine";
-import { getColor } from "@core/util/color.utils";
-import { ColorNames } from "@core/types/color.types";
+import { theme } from "@web/common/styles/theme";
 
 import { StyledGridCols, StyledGridCol } from "./styled";
 import { TimesColumn } from "./TimesColumn";
@@ -22,7 +21,7 @@ export const Columns: FC<Props> = ({
   weekDays,
 }) => {
   const todayIndex = today.day();
-  const pastDayColor = `${getColor(ColorNames.GREY_3)}30`;
+  const pastDayColor = theme.color.bg.secondary;
 
   const _getColumnColor = (dayIndex: number) => {
     const isPastDay = todayIndex > dayIndex;
diff --git a/packages/web/src/views/Calendar/components/Grid/Columns/TimesColumn/TimesColumn.tsx b/packages/web/src/views/Calendar/components/Grid/Columns/TimesColumn/TimesColumn.tsx
index 93a41dad..b0fe1ef8 100644
--- a/packages/web/src/views/Calendar/components/Grid/Columns/TimesColumn/TimesColumn.tsx
+++ b/packages/web/src/views/Calendar/components/Grid/Columns/TimesColumn/TimesColumn.tsx
@@ -34,7 +34,7 @@ export const TimesColumn = () => {
     <StyledDayTimes>
       {hourLabels.map((label, index) => (
         <StyledTimesLabel color={colors[index]} key={`${label}-${index}`}>
-          <Text size={9}>{label}</Text>
+          <Text size="xs">{label}</Text>
         </StyledTimesLabel>
       ))}
     </StyledDayTimes>
diff --git a/packages/web/src/views/Calendar/components/Grid/Columns/TimesColumn/styled.ts b/packages/web/src/views/Calendar/components/Grid/Columns/TimesColumn/styled.ts
index 87bc13cf..4ce6896b 100644
--- a/packages/web/src/views/Calendar/components/Grid/Columns/TimesColumn/styled.ts
+++ b/packages/web/src/views/Calendar/components/Grid/Columns/TimesColumn/styled.ts
@@ -1,9 +1,8 @@
 import styled from "styled-components";
-import { Colors } from "@core/types/color.types";
 import { ZIndex } from "@web/common/constants/web.constants";
 
 interface Props {
-  color: Colors;
+  color: string;
 }
 
 export const StyledTimesLabel = styled.div<Props>`
diff --git a/packages/web/src/views/Calendar/components/Grid/Columns/styled.ts b/packages/web/src/views/Calendar/components/Grid/Columns/styled.ts
index 6922644c..cf2861f1 100644
--- a/packages/web/src/views/Calendar/components/Grid/Columns/styled.ts
+++ b/packages/web/src/views/Calendar/components/Grid/Columns/styled.ts
@@ -1,14 +1,10 @@
 import styled from "styled-components";
-import { ColorNames } from "@core/types/color.types";
-import { getColor } from "@core/util/color.utils";
-import { EVENT_WIDTH_MINIMUM } from "@web/views/Calendar/layout.constants";
+import {
+  DIVIDER_GRID,
+  EVENT_WIDTH_MINIMUM,
+} from "@web/views/Calendar/layout.constants";
 import { Flex } from "@web/components/Flex";
 import { GRID_MARGIN_LEFT } from "@web/views/Calendar/layout.constants";
-import { GRID_LINE_OPACITY_PERCENT } from "@core/constants/colors";
-
-const colBorder = `1px solid ${getColor(
-  ColorNames.GREY_4
-)}${GRID_LINE_OPACITY_PERCENT}`;
 
 export const Columns = styled(Flex)`
   position: absolute;
@@ -21,7 +17,8 @@ export const StyledAllDayColumns = styled(Columns)`
 `;
 
 export const StyledGridCol = styled.div<{ color: string }>`
-  border-left: ${colBorder};
+  border-left: ${({ theme }) =>
+    `${DIVIDER_GRID}px solid ${theme.color.gridLine.primary}`};
   background: ${({ color }) => color};
   flex-basis: 100%;
   height: 100%;
diff --git a/packages/web/src/views/Calendar/components/Grid/MainGrid/GridRows/styled.ts b/packages/web/src/views/Calendar/components/Grid/MainGrid/GridRows/styled.ts
index 21d012ff..f2d54a01 100644
--- a/packages/web/src/views/Calendar/components/Grid/MainGrid/GridRows/styled.ts
+++ b/packages/web/src/views/Calendar/components/Grid/MainGrid/GridRows/styled.ts
@@ -1,18 +1,12 @@
 import styled from "styled-components";
-import { getColor } from "@core/util/color.utils";
-import { ColorNames } from "@core/types/color.types";
 import { Flex } from "@web/components/Flex";
 import { GRID_MARGIN_LEFT } from "@web/views/Calendar/layout.constants";
 import { DIVIDER_GRID } from "@web/views/Calendar/layout.constants";
-import { GRID_LINE_OPACITY_PERCENT } from "@core/constants/colors";
-
-export const gridDividerBorder = `${DIVIDER_GRID}px solid ${getColor(
-  ColorNames.GREY_4
-)}${GRID_LINE_OPACITY_PERCENT}`;
 
 export const StyledGridRow = styled(Flex)`
   height: calc(100% / 11);
-  border-bottom: ${gridDividerBorder};
+  border-bottom: ${({ theme }) =>
+    `${DIVIDER_GRID}px solid ${theme.color.gridLine.primary}`};
   width: 100%;
   position: relative;
 
diff --git a/packages/web/src/views/Calendar/components/Grid/MainGrid/styled.ts b/packages/web/src/views/Calendar/components/Grid/MainGrid/styled.ts
index ed4142ea..71fcd56a 100644
--- a/packages/web/src/views/Calendar/components/Grid/MainGrid/styled.ts
+++ b/packages/web/src/views/Calendar/components/Grid/MainGrid/styled.ts
@@ -1,12 +1,9 @@
 import styled from "styled-components";
-import { ColorNames } from "@core/types/color.types";
-import { getColor } from "@core/util/color.utils";
-import { EVENT_WIDTH_MINIMUM } from "@web/views/Calendar/layout.constants";
+import { brighten } from "@core/util/color.utils";
 import {
   GRID_PADDING_BOTTOM,
   SCROLLBAR_WIDTH,
 } from "@web/views/Calendar/layout.constants";
-import { Flex } from "@web/components/Flex";
 
 export const StyledMainGrid = styled.div`
   flex: 1;
@@ -26,22 +23,13 @@ export const StyledMainGrid = styled.div`
   ::-webkit-scrollbar {
     width: ${SCROLLBAR_WIDTH}px;
   }
+
   ::-webkit-scrollbar-thumb {
     border-radius: 7px;
-    background: ${getColor(ColorNames.GREY_3)};
+    background: ${({ theme }) => brighten(theme.color.bg.primary, 10)};
     &:hover {
-      background: ${getColor(ColorNames.GREY_4)};
+      background: ${({ theme }) => brighten(theme.color.bg.primary, 20)};
       transition: background-color 0.2s;
     }
   }
 `;
-
-export const StyledPrevDaysOverflow = styled(Flex)`
-  background: ${getColor(ColorNames.WHITE_1)};
-  flex-basis: 100%;
-  height: 100%;
-  min-width: ${EVENT_WIDTH_MINIMUM}px;
-  opacity: 0.05;
-  position: absolute;
-  width: 100%;
-`;
diff --git a/packages/web/src/views/Calendar/components/Header/DayLabels.tsx b/packages/web/src/views/Calendar/components/Header/DayLabels.tsx
new file mode 100644
index 00000000..4cbd5038
--- /dev/null
+++ b/packages/web/src/views/Calendar/components/Header/DayLabels.tsx
@@ -0,0 +1,73 @@
+import React, { FC } from "react";
+import { Dayjs } from "dayjs";
+import { Text } from "@web/components/Text";
+import { theme } from "@web/common/styles/theme";
+import { getWeekDayLabel } from "@web/common/utils/event.util";
+import { JustifyContent, AlignItems } from "@web/components/Flex/styled";
+import { SpaceCharacter } from "@web/components/SpaceCharacter";
+
+import { RootProps } from "../../calendarView.types";
+import { StyledWeekDaysFlex, StyledWeekDayFlex } from "./styled";
+
+interface Props {
+  rootProps: RootProps;
+  today: Dayjs;
+  startOfView: Dayjs;
+  week: number;
+  weekDays: Dayjs[];
+}
+
+export const DayLabels: FC<Props> = ({
+  startOfView,
+  today,
+  week,
+  weekDays,
+}) => {
+  const getColor = (day: Dayjs) => {
+    const isCurrentWeek = today.week() === week;
+    const isToday = isCurrentWeek && today.format("DD") === day.format("DD");
+    const color = day.isBefore(today, "day")
+      ? theme.color.text.lightInactive
+      : isToday
+      ? theme.color.text.accent
+      : theme.color.text.light;
+
+    return { isToday, color };
+  };
+
+  const getDayNumber = (day: Dayjs) => {
+    let dayNumber = day.format("D");
+
+    dayNumber =
+      day.format("MM") !== startOfView.format("MM") && day.format("D") === "1"
+        ? day.format("MMM D")
+        : dayNumber;
+
+    return dayNumber;
+  };
+
+  return (
+    <StyledWeekDaysFlex>
+      {weekDays.map((day) => {
+        const dayNumber = getDayNumber(day);
+        const { isToday, color } = getColor(day);
+
+        return (
+          <StyledWeekDayFlex
+            justifyContent={JustifyContent.CENTER}
+            key={getWeekDayLabel(day)}
+            alignItems={AlignItems.FLEX_END}
+            title={getWeekDayLabel(day)}
+            color={color}
+          >
+            <Text size="xxl" withGradient={isToday}>
+              {dayNumber}
+            </Text>
+            <SpaceCharacter />
+            <Text size="l">{day.format("ddd")}</Text>
+          </StyledWeekDayFlex>
+        );
+      })}
+    </StyledWeekDaysFlex>
+  );
+};
diff --git a/packages/web/src/views/Calendar/components/Header/Header.tsx b/packages/web/src/views/Calendar/components/Header/Header.tsx
index 815f3f5b..120227f1 100644
--- a/packages/web/src/views/Calendar/components/Header/Header.tsx
+++ b/packages/web/src/views/Calendar/components/Header/Header.tsx
@@ -1,14 +1,10 @@
 import React, { FC } from "react";
 import { Dayjs } from "dayjs";
-import { ColorNames } from "@core/types/color.types";
-import { getAlphaColor, getColor } from "@core/util/color.utils";
 import { useAppDispatch, useAppSelector } from "@web/store/store.hooks";
-import { AlignItems, JustifyContent } from "@web/components/Flex/styled";
+import { AlignItems } from "@web/components/Flex/styled";
 import { SpaceCharacter } from "@web/components/SpaceCharacter";
 import { Text } from "@web/components/Text";
 import { TodayButton } from "@web/views/Calendar/components/TodayButton";
-import { getWeekDayLabel } from "@web/common/utils/event.util";
-import { WEEK_DAYS_HEIGHT } from "@web/views/Calendar/layout.constants";
 import { RootProps } from "@web/views/Calendar/calendarView.types";
 import { WeekProps } from "@web/views/Calendar/hooks/useWeek";
 import { draftSlice } from "@web/ducks/events/slices/draft.slice";
@@ -23,13 +19,12 @@ import {
   StyledHeaderRow,
   StyledNavigationButtons,
   ArrowNavigationButton,
-  StyledWeekDaysFlex,
-  StyledWeekDayFlex,
   StyledLeftGroup,
   StyledRightGroup,
   StyledHeaderLabel,
   StyledNavigationArrows,
 } from "./styled";
+import { DayLabels } from "./DayLabels";
 
 interface Props {
   rootProps: RootProps;
@@ -72,15 +67,11 @@ export const Header: FC<Props> = ({
       >
         <StyledLeftGroup>
           <StyledHeaderLabel aria-level={1} role="heading">
-            <Text colorName={ColorNames.WHITE_1} size={40}>
-              {startOfView.format("MMMM")}
-            </Text>
+            <Text size="4xl">{startOfView.format("MMMM")}</Text>
 
             <SpaceCharacter />
 
-            <Text colorName={ColorNames.GREY_4} size={38}>
-              {startOfView.format("YYYY")}
-            </Text>
+            <Text size="xxxl">{startOfView.format("YY")}</Text>
           </StyledHeaderLabel>
 
           <StyledNavigationButtons>
@@ -98,10 +89,9 @@ export const Header: FC<Props> = ({
                 shortcut="J"
               >
                 <ArrowNavigationButton
-                  colorName={ColorNames.GREY_4}
                   cursor="pointer"
                   role="navigation"
-                  size={35}
+                  size="xxl"
                   title="previous week"
                 >
                   {"<"}
@@ -113,10 +103,9 @@ export const Header: FC<Props> = ({
                 shortcut="K"
               >
                 <ArrowNavigationButton
-                  colorName={ColorNames.GREY_4}
                   cursor="pointer"
                   role="navigation"
-                  size={35}
+                  size="xxl"
                   title="next week"
                 >
                   {">"}
@@ -139,45 +128,13 @@ export const Header: FC<Props> = ({
         </StyledRightGroup>
       </StyledHeaderRow>
 
-      <StyledWeekDaysFlex>
-        {weekProps.component.weekDays.map((day) => {
-          const isDayInCurrentWeek = today.week() === weekProps.component.week;
-          const isToday =
-            isDayInCurrentWeek && today.format("DD") === day.format("DD");
-
-          let weekDayTextColor = isToday
-            ? getColor(ColorNames.TEAL_3)
-            : getAlphaColor(ColorNames.WHITE_1, 0.72);
-
-          let dayNumberToDisplay = day.format("D");
-
-          dayNumberToDisplay =
-            day.format("MM") !== startOfView.format("MM") &&
-            day.format("D") === "1"
-              ? day.format("MMM D")
-              : dayNumberToDisplay;
-
-          if (day.isBefore(rootProps.component.today, "day")) {
-            weekDayTextColor = getAlphaColor(ColorNames.WHITE_1, 0.55);
-          }
-
-          return (
-            <StyledWeekDayFlex
-              justifyContent={JustifyContent.CENTER}
-              key={getWeekDayLabel(day)}
-              alignItems={AlignItems.FLEX_END}
-              title={getWeekDayLabel(day)}
-              color={weekDayTextColor}
-            >
-              <Text lineHeight={WEEK_DAYS_HEIGHT} size={WEEK_DAYS_HEIGHT}>
-                {dayNumberToDisplay}
-              </Text>
-              <SpaceCharacter />
-              <Text size={12}>{day.format("ddd")}</Text>
-            </StyledWeekDayFlex>
-          );
-        })}
-      </StyledWeekDaysFlex>
+      <DayLabels
+        rootProps={rootProps}
+        startOfView={weekProps.component.startOfView}
+        today={today}
+        week={weekProps.component.week}
+        weekDays={weekProps.component.weekDays}
+      />
     </>
   );
 };
diff --git a/packages/web/src/views/Calendar/components/Header/styled.ts b/packages/web/src/views/Calendar/components/Header/styled.ts
index 59a86605..254d2b86 100644
--- a/packages/web/src/views/Calendar/components/Header/styled.ts
+++ b/packages/web/src/views/Calendar/components/Header/styled.ts
@@ -13,7 +13,6 @@ import {
 } from "@web/views/Calendar/layout.constants";
 
 export const ArrowNavigationButton = styled(Text)`
-  align-items: center;
   display: flex;
   justify-content: center;
   height: 30px;
@@ -36,11 +35,11 @@ export const StyledHeaderLabel = styled.div`
 `;
 
 export const StyledLeftGroup = styled(Flex)`
-  align-items: ${AlignItems.CENTER};
+  align-items: ${AlignItems.BASELINE};
 `;
 
 export const StyledHeaderRow = styled(Flex)`
-  align-items: ${AlignItems.CENTER};
+  color: ${({ theme }) => theme.color.text.light};
   font-size: 40px;
   justify-content: ${JustifyContent.SPACE_BETWEEN};
   margin-left: ${GRID_MARGIN_LEFT}px;
diff --git a/packages/web/src/views/Calendar/components/LeftSidebar/LeftSidebar.tsx b/packages/web/src/views/Calendar/components/LeftSidebar/LeftSidebar.tsx
index 2daa7121..e186a099 100644
--- a/packages/web/src/views/Calendar/components/LeftSidebar/LeftSidebar.tsx
+++ b/packages/web/src/views/Calendar/components/LeftSidebar/LeftSidebar.tsx
@@ -5,7 +5,11 @@ import { TooltipWrapper } from "@web/components/Tooltip/TooltipWrapper";
 import { DateCalcs } from "@web/views/Calendar/hooks/grid/useDateCalcs";
 import { Measurements_Grid } from "@web/views/Calendar/hooks/grid/useGridLayout";
 
-import { Styled, getSidebarToggleIcon, StyledSidebarOverflow } from "./styled";
+import {
+  StyledLeftSidebar,
+  getSidebarToggleIcon,
+  StyledSidebarOverflow,
+} from "./styled";
 import { SomedaySection } from "./SomedaySection";
 import { SidebarIconRow } from "./SidebarIconRow";
 
@@ -26,7 +30,7 @@ export const LeftSidebar: FC<Props & React.HTMLAttributes<HTMLDivElement>> = (
   const ToggleSidebarIcon = getSidebarToggleIcon(props.prefs.isLeftSidebarOpen);
 
   return (
-    <Styled
+    <StyledLeftSidebar
       id="sidebar"
       isToggled={prefs.isLeftSidebarOpen}
       role="complementary"
@@ -50,6 +54,6 @@ export const LeftSidebar: FC<Props & React.HTMLAttributes<HTMLDivElement>> = (
       />
 
       <SidebarIconRow />
-    </Styled>
+    </StyledLeftSidebar>
   );
 };
diff --git a/packages/web/src/views/Calendar/components/LeftSidebar/SidebarIconRow/SidebarIconRow.tsx b/packages/web/src/views/Calendar/components/LeftSidebar/SidebarIconRow/SidebarIconRow.tsx
index 105a4e96..461ac012 100644
--- a/packages/web/src/views/Calendar/components/LeftSidebar/SidebarIconRow/SidebarIconRow.tsx
+++ b/packages/web/src/views/Calendar/components/LeftSidebar/SidebarIconRow/SidebarIconRow.tsx
@@ -1,12 +1,12 @@
 import React from "react";
 import { MetaKeyIcon } from "@web/components/Icons/MetaKey";
 
-import { StyledBottomRow } from "../styled";
+import { StyledIconRow } from "../styled";
 
 export const SidebarIconRow = () => {
   return (
-    <StyledBottomRow>
+    <StyledIconRow>
       <MetaKeyIcon />
-    </StyledBottomRow>
+    </StyledIconRow>
   );
 };
diff --git a/packages/web/src/views/Calendar/components/LeftSidebar/SomedaySection/MonthSection/MonthSection.tsx b/packages/web/src/views/Calendar/components/LeftSidebar/SomedaySection/MonthSection/MonthSection.tsx
index 694666b7..bbc701bf 100644
--- a/packages/web/src/views/Calendar/components/LeftSidebar/SomedaySection/MonthSection/MonthSection.tsx
+++ b/packages/web/src/views/Calendar/components/LeftSidebar/SomedaySection/MonthSection/MonthSection.tsx
@@ -1,5 +1,4 @@
 import React, { FC } from "react";
-import { ColorNames } from "@core/types/color.types";
 import { Categories_Event } from "@core/types/event.types";
 import { SomedayEventsProps } from "@web/views/Calendar/hooks/draft/sidebar/useSidebar";
 import { DateCalcs } from "@web/views/Calendar/hooks/grid/useDateCalcs";
@@ -34,7 +33,7 @@ export const MonthSection: FC<Props> = ({
         alignItems={AlignItems.CENTER}
         justifyContent={JustifyContent.SPACE_BETWEEN}
       >
-        <Text colorName={ColorNames.WHITE_1} role="heading" size={22}>
+        <Text role="heading" size="xl">
           {monthLabel}
         </Text>
         <div onClick={(e) => e.stopPropagation()}>
@@ -46,7 +45,7 @@ export const MonthSection: FC<Props> = ({
             shortcut="M"
           >
             <div role="button">
-              <StyledAddEventButton size={25}>+</StyledAddEventButton>
+              <StyledAddEventButton size="xl">+</StyledAddEventButton>
             </div>
           </TooltipWrapper>
         </div>
diff --git a/packages/web/src/views/Calendar/components/LeftSidebar/SomedaySection/SomedayEvents/SomedayEvent.tsx b/packages/web/src/views/Calendar/components/LeftSidebar/SomedaySection/SomedayEvents/SomedayEvent.tsx
index 41fdc825..df28d801 100644
--- a/packages/web/src/views/Calendar/components/LeftSidebar/SomedaySection/SomedayEvents/SomedayEvent.tsx
+++ b/packages/web/src/views/Calendar/components/LeftSidebar/SomedaySection/SomedayEvents/SomedayEvent.tsx
@@ -10,7 +10,7 @@ import { StyledFloatContainer } from "@web/views/Forms/SomedayEventForm/styled";
 import { useEventForm } from "@web/views/Forms/hooks/useEventForm";
 import { Util_Sidebar } from "@web/views/Calendar/hooks/draft/sidebar/useSidebarUtil";
 
-import { NewStyledSomedayEvent } from "./styled";
+import { StyledNewSomedayEvent } from "./styled";
 import { SomedayEventRectangle } from "./SomedayEventRectangle";
 
 export interface Props {
@@ -75,7 +75,7 @@ export const SomedayEvent = ({
 
   return (
     <>
-      <NewStyledSomedayEvent
+      <StyledNewSomedayEvent
         {...provided.draggableProps}
         {...provided.dragHandleProps}
         isDragging={isDragging}
@@ -100,7 +100,7 @@ export const SomedayEvent = ({
             onMigrate={onMigrate}
           />
         </div>
-      </NewStyledSomedayEvent>
+      </StyledNewSomedayEvent>
 
       <FloatingPortal>
         {shouldOpenForm && (
diff --git a/packages/web/src/views/Calendar/components/LeftSidebar/SomedaySection/SomedayEvents/SomedayEventRectangle.tsx b/packages/web/src/views/Calendar/components/LeftSidebar/SomedaySection/SomedayEvents/SomedayEventRectangle.tsx
index bae5aa9e..83e0620b 100644
--- a/packages/web/src/views/Calendar/components/LeftSidebar/SomedaySection/SomedayEvents/SomedayEventRectangle.tsx
+++ b/packages/web/src/views/Calendar/components/LeftSidebar/SomedaySection/SomedayEvents/SomedayEventRectangle.tsx
@@ -30,7 +30,7 @@ export const SomedayEventRectangle = ({
         direction={FlexDirections.ROW}
         justifyContent={JustifyContent.SPACE_BETWEEN}
       >
-        <Text size={15}>{event.title}</Text>
+        <Text size="l">{event.title}</Text>
 
         {canMigrate ? (
           <Flex>
diff --git a/packages/web/src/views/Calendar/components/LeftSidebar/SomedaySection/SomedayEvents/styled.ts b/packages/web/src/views/Calendar/components/LeftSidebar/SomedaySection/SomedayEvents/styled.ts
index 992562a2..f0eb2e58 100644
--- a/packages/web/src/views/Calendar/components/LeftSidebar/SomedaySection/SomedayEvents/styled.ts
+++ b/packages/web/src/views/Calendar/components/LeftSidebar/SomedaySection/SomedayEvents/styled.ts
@@ -1,13 +1,11 @@
 import styled from "styled-components";
+import { DroppableProvided } from "@hello-pangea/dnd";
 import { Priorities } from "@core/constants/core.constants";
+import { brighten } from "@core/util/color.utils";
 import {
-  getColor,
-  getInvertedColor,
-  hoverColorsByPriority,
-} from "@core/util/color.utils";
-import { BASE_COLORS, colorNameByPriority } from "@core/constants/colors";
-import { InvertedColorNames } from "@core/types/color.types";
-import { DroppableProvided } from "@hello-pangea/dnd";
+  colorByPriority,
+  hoverColorByPriority,
+} from "@web/common/styles/theme.util";
 
 export interface Props extends DroppableProvided {
   priority: Priorities;
@@ -25,7 +23,7 @@ export const StyledMigrateArrow = styled.span`
 
   &:hover {
     border-radius: 50%;
-    background: ${BASE_COLORS.ONYX_GREY};
+    background: ${({ theme }) => theme.color.bg.primary};
     color: white;
     cursor: pointer;
     padding-right: 7px;
@@ -36,7 +34,7 @@ export const StyledMigrateArrow = styled.span`
 `;
 
 export const StyledRecurrenceText = styled.span`
-  border: 1px solid ${BASE_COLORS.ONYX_GREY};
+  border: 1px solid ${({ theme }) => theme.color.border.primary};
   border-radius: 2px;
   font-size: 10px;
   opacity: 0;
@@ -53,22 +51,19 @@ export const StyledMigrateArrowInForm = styled(StyledMigrateArrow)`
   font-size: 27px;
 `;
 
-export const NewStyledSomedayEvent = styled.div<Props>`
-  background: ${({ isDrafting, isDragging, isFocused, priority }) => {
+export const StyledNewSomedayEvent = styled.div<Props>`
+  background: ${({ isDrafting, isDragging, priority }) => {
     if (isDrafting) {
       if (isDragging) {
-        return "lightgreen";
+        return brighten(colorByPriority[priority]);
       }
-      return hoverColorsByPriority[priority];
+      return hoverColorByPriority[priority];
     }
 
-    return getColor(colorNameByPriority[priority]);
+    return colorByPriority[priority];
   }};
   border-radius: 2px;
-  color: ${({ priority }) =>
-    getInvertedColor(
-      colorNameByPriority[priority] as unknown as InvertedColorNames
-    )};
+  color: ${({ theme }) => theme.color.text.dark};
   height: ${SOMEDAY_EVENT_HEIGHT}px;
   filter: brightness(
     ${({ isDragging, isFocused }) =>
@@ -84,11 +79,7 @@ export const NewStyledSomedayEvent = styled.div<Props>`
   width: 298px;
 
   &:hover {
-    background: ${({ priority }) => hoverColorsByPriority[priority]};
-    color: ${({ priority }) =>
-      getInvertedColor(
-        colorNameByPriority[priority] as unknown as InvertedColorNames
-      )};
+    background: ${({ priority }) => hoverColorByPriority[priority]};
     cursor: pointer;
   }
 
diff --git a/packages/web/src/views/Calendar/components/LeftSidebar/SomedaySection/SomedaySection.tsx b/packages/web/src/views/Calendar/components/LeftSidebar/SomedaySection/SomedaySection.tsx
index e5278c36..3160d583 100644
--- a/packages/web/src/views/Calendar/components/LeftSidebar/SomedaySection/SomedaySection.tsx
+++ b/packages/web/src/views/Calendar/components/LeftSidebar/SomedaySection/SomedaySection.tsx
@@ -1,6 +1,4 @@
 import React, { FC, useMemo, useRef } from "react";
-import { getAlphaColor } from "@core/util/color.utils";
-import { ColorNames } from "@core/types/color.types";
 import { selectIsGetSomedayEventsProcessing } from "@web/ducks/events/selectors/someday.selectors";
 import { getWeekRangeLabel } from "@web/common/utils/web.date.util";
 import { AbsoluteOverflowLoader } from "@web/components/AbsoluteOverflowLoader";
@@ -10,6 +8,7 @@ import { DateCalcs } from "@web/views/Calendar/hooks/grid/useDateCalcs";
 import { Measurements_Grid } from "@web/views/Calendar/hooks/grid/useGridLayout";
 import { WeekProps } from "@web/views/Calendar/hooks/useWeek";
 import { useSidebar } from "@web/views/Calendar/hooks/draft/sidebar/useSidebar";
+import { theme } from "@web/common/styles/theme";
 
 import { WeekSection } from "./WeekSection/WeekSection";
 import { MonthSection } from "./MonthSection";
@@ -53,7 +52,7 @@ export const SomedaySection: FC<Props> = ({
       />
 
       <Divider
-        color={getAlphaColor(ColorNames.WHITE_4, 0.3)}
+        color={theme.color.border.primary}
         role="separator"
         title="sidebar divider"
         withAnimation={false}
diff --git a/packages/web/src/views/Calendar/components/LeftSidebar/SomedaySection/WeekSection/WeekSection.tsx b/packages/web/src/views/Calendar/components/LeftSidebar/SomedaySection/WeekSection/WeekSection.tsx
index bb637c1d..afe5c2aa 100644
--- a/packages/web/src/views/Calendar/components/LeftSidebar/SomedaySection/WeekSection/WeekSection.tsx
+++ b/packages/web/src/views/Calendar/components/LeftSidebar/SomedaySection/WeekSection/WeekSection.tsx
@@ -5,7 +5,6 @@ import { DateCalcs } from "@web/views/Calendar/hooks/grid/useDateCalcs";
 import { SomedayEventsProps } from "@web/views/Calendar/hooks/draft/sidebar/useSidebar";
 import { Measurements_Grid } from "@web/views/Calendar/hooks/grid/useGridLayout";
 import { WeekProps } from "@web/views/Calendar/hooks/useWeek";
-import { ColorNames } from "@core/types/color.types";
 import { AlignItems, JustifyContent } from "@web/components/Flex/styled";
 import { TooltipWrapper } from "@web/components/Tooltip/TooltipWrapper";
 
@@ -33,7 +32,7 @@ export const WeekSection: FC<Props> = ({
         alignItems={AlignItems.CENTER}
         justifyContent={JustifyContent.SPACE_BETWEEN}
       >
-        <Text colorName={ColorNames.WHITE_1} role="heading" size={22}>
+        <Text role="heading" size="xl">
           {weekLabel}
         </Text>
 
@@ -46,7 +45,7 @@ export const WeekSection: FC<Props> = ({
             shortcut="W"
           >
             <div role="button">
-              <StyledAddEventButton size={25}>+</StyledAddEventButton>
+              <StyledAddEventButton size="xl">+</StyledAddEventButton>
             </div>
           </TooltipWrapper>
         </div>
diff --git a/packages/web/src/views/Calendar/components/LeftSidebar/SomedaySection/styled.ts b/packages/web/src/views/Calendar/components/LeftSidebar/SomedaySection/styled.ts
index 26096a51..da96e14e 100644
--- a/packages/web/src/views/Calendar/components/LeftSidebar/SomedaySection/styled.ts
+++ b/packages/web/src/views/Calendar/components/LeftSidebar/SomedaySection/styled.ts
@@ -1,6 +1,4 @@
 import styled from "styled-components";
-import { getColor } from "@core/util/color.utils";
-import { ColorNames } from "@core/types/color.types";
 import { Flex } from "@web/components/Flex";
 import { Text } from "@web/components/Text";
 
@@ -9,7 +7,7 @@ export interface Props {
 }
 
 export const Styled = styled.div<Props>`
-  color: ${getColor(ColorNames.WHITE_1)};
+  color: ${({ theme }) => theme.color.panel.text};
   flex: ${({ flex }) => flex};
   margin-bottom: 5px;
   width: 100%;
@@ -40,23 +38,6 @@ export const StyledPaginationFlex = styled(Flex)`
   width: 40px;
 `;
 
-export interface ArrowButtonProps {
-  disabled?: boolean;
-}
-
-export const StyledArrowButton = styled(Flex)<ArrowButtonProps>`
-  cursor: ${({ disabled }) => (disabled ? "not-allowed" : "pointer")};
-  border-radius: 50%;
-  width: 18px;
-  height: 18px;
-
-  color: ${({ disabled }) => disabled && getColor(ColorNames.WHITE_4)};
-
-  &:hover {
-    background: ${getColor(ColorNames.GREY_2)};
-  }
-`;
-
 export const StyledEventsList = styled.div`
   padding: 20px;
   height: calc(100% - 67px);
diff --git a/packages/web/src/views/Calendar/components/LeftSidebar/ToggleableMonthWidget/ToggleableMonthWidget.tsx b/packages/web/src/views/Calendar/components/LeftSidebar/ToggleableMonthWidget/ToggleableMonthWidget.tsx
index f224d6c8..1a6f2a80 100644
--- a/packages/web/src/views/Calendar/components/LeftSidebar/ToggleableMonthWidget/ToggleableMonthWidget.tsx
+++ b/packages/web/src/views/Calendar/components/LeftSidebar/ToggleableMonthWidget/ToggleableMonthWidget.tsx
@@ -1,10 +1,9 @@
 import React, { useEffect, useState } from "react";
 import dayjs from "dayjs";
 import weekPlugin from "dayjs/plugin/weekOfYear";
-import { ColorNames } from "@core/types/color.types";
-import { getColor } from "@core/util/color.utils";
 import { DatePicker } from "@web/components/DatePicker";
 import { WeekProps } from "@web/views/Calendar/hooks/useWeek";
+import { theme } from "@web/common/styles/theme";
 
 import { Styled } from "./styled";
 
@@ -34,7 +33,7 @@ export const ToggleableMonthWidget: React.FC<Props> = ({
     <Styled role="dialog" data-testid="Month Widget">
       <DatePicker
         animationOnToggle={false}
-        bgColor={getColor(ColorNames.GREY_3)}
+        bgColor={theme.color.text.light}
         calendarClassName="sidebarDatePicker"
         inline
         isOpen={true}
diff --git a/packages/web/src/views/Calendar/components/LeftSidebar/styled.ts b/packages/web/src/views/Calendar/components/LeftSidebar/styled.ts
index 48a7ad88..77e36d08 100644
--- a/packages/web/src/views/Calendar/components/LeftSidebar/styled.ts
+++ b/packages/web/src/views/Calendar/components/LeftSidebar/styled.ts
@@ -1,7 +1,4 @@
 import styled from "styled-components";
-import { getColor } from "@core/util/color.utils";
-import { ColorNames } from "@core/types/color.types";
-import { CheckBox } from "@web/components/CheckBox";
 import { Flex } from "@web/components/Flex";
 import {
   SIDEBAR_CLOSED_WIDTH,
@@ -9,8 +6,8 @@ import {
 } from "@web/views/Calendar/layout.constants";
 import { ZIndex } from "@web/common/constants/web.constants";
 import { FlexDirections } from "@web/components/Flex/styled";
-import { ArrowLineLeftIcon } from "@web/components/Icons/ArrowLeftLine";
-import { ArrowLineRightIcon } from "@web/components/Icons/ArrowRightLine";
+import { ArrowLineLeftIcon } from "@web/components/Icons/ArrowLineLeft";
+import { ArrowLineRightIcon } from "@web/components/Icons/ArrowLineRight";
 
 import { SidebarProps, SectionProps } from "./sidebar.types";
 
@@ -32,17 +29,17 @@ export const StyledSidebarList = styled.div`
     width: 8px;
   }
   ::-webkit-scrollbar-thumb {
-    background: ${getColor(ColorNames.GREY_2)};
+    background-color: ${({ theme }) => theme.color.panel.scrollbar};
     border-radius: 3px;
+
     &:hover {
-      background: ${getColor(ColorNames.GREY_1)};
-      transition: background-color 0.2s;
+      background-color: ${({ theme }) => theme.color.panel.scrollbarActive};
     }
   }
 `;
 
-export const Styled = styled(Flex)<SidebarProps>`
-  background: ${getColor(ColorNames.GREY_3)};
+export const StyledLeftSidebar = styled(Flex)<SidebarProps>`
+  background: ${({ theme }) => theme.color.panel.bg};
   flex-direction: ${FlexDirections.COLUMN};
   height: 100%;
   overflow: hidden;
@@ -52,55 +49,19 @@ export const Styled = styled(Flex)<SidebarProps>`
     isToggled ? SIDEBAR_OPEN_WIDTH : SIDEBAR_CLOSED_WIDTH}px;
 `;
 
-export const StyledBottomRow = styled.div<SectionProps>`
+export const StyledIconRow = styled.div<SectionProps>`
   bottom: 0;
-  border-top: 1px solid ${getColor(ColorNames.GREY_6)};
+  border-top: 1px solid ${({ theme }) => theme.color.border.primary};
   height: 40px;
-  padding: 10px 20px;
+  padding: 9px 20px;
   position: absolute;
   width: 100%;
 `;
 
-export const StyledCheckBox = styled(CheckBox)`
-  margin-right: 5px;
-`;
-
-export const StyledDividerWrapper = styled.div`
-  cursor: row-resize;
-  padding: 5px 0 7px 0;
-`;
-
-export const StyledHeaderFlex = styled(Flex)`
-  padding-left: 17px;
-  width: calc(100% - 45px);
-`;
-
-export const StyledFiltersPopoverContent = styled.div`
-  background: ${getColor(ColorNames.WHITE_5)};
-  padding: 8px 8px 8px 5px;
-  border-radius: 4px;
-`;
-
-export const StyledPriorityFilterButton = styled.div`
-  color: ${getColor(ColorNames.WHITE_1)};
-  cursor: pointer;
-  transition: 0.3s;
-
-  &:hover {
-    color: ${getColor(ColorNames.WHITE_4)};
-  }
-`;
-
-export const StyledPriorityFilterItem = styled(Flex)`
-  &:not(:last-child) {
-    margin-bottom: 8px;
-  }
-`;
-
 export const StyledSidebarOverflow = styled.div<SidebarProps>`
   position: absolute;
-  background: ${({ isToggled }) =>
-    isToggled ? getColor(ColorNames.GREY_3) : getColor(ColorNames.BLUE_2)};
+  background: ${({ isToggled, theme }) =>
+    isToggled ? theme.color.panel.bg : theme.color.bg.primary};
   width: ${({ isToggled }) => (isToggled ? 0 : "100%")};
   height: 100%;
   right: 0;
diff --git a/packages/web/src/views/Calendar/components/NowLine/styled.ts b/packages/web/src/views/Calendar/components/NowLine/styled.ts
index 9b76d6b6..9282acac 100644
--- a/packages/web/src/views/Calendar/components/NowLine/styled.ts
+++ b/packages/web/src/views/Calendar/components/NowLine/styled.ts
@@ -1,6 +1,6 @@
 import styled from "styled-components";
 import { ZIndex } from "@web/common/constants/web.constants";
-import { linearGradient } from "@core/constants/colors";
+import { blueGradient } from "@web/common/styles/theme.util";
 
 interface StyledNowLineProps {
   width: number;
@@ -8,7 +8,7 @@ interface StyledNowLineProps {
 }
 
 export const StyledNowLine = styled.div<StyledNowLineProps>`
-  background: ${linearGradient};
+  background: ${blueGradient};
   height: 1px;
   position: absolute;
   top: ${({ top }) => top}%;
diff --git a/packages/web/src/views/Calendar/components/RightSidebar/RightSidebar.tsx b/packages/web/src/views/Calendar/components/RightSidebar/RightSidebar.tsx
index c33a95ef..ff144f40 100644
--- a/packages/web/src/views/Calendar/components/RightSidebar/RightSidebar.tsx
+++ b/packages/web/src/views/Calendar/components/RightSidebar/RightSidebar.tsx
@@ -3,8 +3,6 @@ import { useAppSelector } from "@web/store/store.hooks";
 import { WeekProps } from "@web/views/Calendar/hooks/useWeek";
 import { selectIsRightSidebarOpen } from "@web/ducks/settings/selectors/settings.selectors";
 import { Divider } from "@web/components/Divider";
-import { getAlphaColor } from "@core/util/color.utils";
-import { ColorNames } from "@core/types/color.types";
 
 import { StyledRightSidebar } from "./styled";
 import { ToggleableMonthWidget } from "../LeftSidebar/ToggleableMonthWidget";
@@ -32,7 +30,6 @@ export const RightSidebar: FC<Props> = (props) => {
       />
       <div>
         <Divider
-          color={getAlphaColor(ColorNames.WHITE_4, 0.5)}
           role="separator"
           title="right sidebar divider"
           withAnimation={false}
@@ -49,21 +46,6 @@ export const RightSidebar: FC<Props> = (props) => {
         </label>
 
         <Divider
-          color={getAlphaColor(ColorNames.WHITE_4, 0.5)}
-          role="separator"
-          title="right sidebar divider"
-          withAnimation={false}
-        />
-
-        <Divider
-          color={getAlphaColor(ColorNames.WHITE_4, 0.5)}
-          role="separator"
-          title="right sidebar divider"
-          withAnimation={false}
-        />
-
-        <Divider
-          color={getAlphaColor(ColorNames.WHITE_4, 0.5)}
           role="separator"
           title="right sidebar divider"
           withAnimation={false}
diff --git a/packages/web/src/views/Calendar/components/RightSidebar/styled.ts b/packages/web/src/views/Calendar/components/RightSidebar/styled.ts
index b851c92b..ad1b7424 100644
--- a/packages/web/src/views/Calendar/components/RightSidebar/styled.ts
+++ b/packages/web/src/views/Calendar/components/RightSidebar/styled.ts
@@ -1,14 +1,12 @@
 import styled from "styled-components";
-import { getColor } from "@core/util/color.utils";
-import { ColorNames } from "@core/types/color.types";
 import { Flex } from "@web/components/Flex";
 import { ZIndex } from "@web/common/constants/web.constants";
 
 export const StyledRightSidebar = styled(Flex)`
-  background: ${getColor(ColorNames.GREY_3)};
+  background: ${({ theme }) => theme.color.bg.primary};
   bottom: 0;
   box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
-  color: ${getColor(ColorNames.WHITE_1)};
+  color: ${({ theme }) => theme.color.text.light};
   display: flex;
   flex-direction: column;
   height: calc(100% - 82px);
diff --git a/packages/web/src/views/Calendar/components/TodayButton/styled.ts b/packages/web/src/views/Calendar/components/TodayButton/styled.ts
index 17384aa0..bccc8b54 100644
--- a/packages/web/src/views/Calendar/components/TodayButton/styled.ts
+++ b/packages/web/src/views/Calendar/components/TodayButton/styled.ts
@@ -1,16 +1,12 @@
 import styled from "styled-components";
-import { ColorNames } from "@core/types/color.types";
-import { getColor } from "@core/util/color.utils";
 import { Flex } from "@web/components/Flex";
 
 export const StyledTodayButton = styled(Flex)`
   align-items: center;
-  border: 1px solid ${getColor(ColorNames.GREY_4)};
-  border-radius: 2.5px;
-  color: ${getColor(ColorNames.GREY_4)};
+  color: ${({ theme }) => theme.color.text.light};
   cursor: pointer;
   display: flex;
-  font-size: 17px;
+  font-size: ${({ theme }) => theme.text.size.l};
   min-width: 80px;
   padding: 0 10px;
 
diff --git a/packages/web/src/views/Calendar/layout.constants.ts b/packages/web/src/views/Calendar/layout.constants.ts
index 3ffd3fad..d9b141b5 100644
--- a/packages/web/src/views/Calendar/layout.constants.ts
+++ b/packages/web/src/views/Calendar/layout.constants.ts
@@ -1,15 +1,12 @@
 export const AFTER_TMRW_MULTIPLE = 1.5;
 
-export const DIVIDER_ALLDAY = 2;
 export const DIVIDER_GRID = 1;
 
 export const DRAFT_DURATION_MIN = 15;
 export const DRAFT_PADDING_BOTTOM = 3;
-export const DRAFT_PADDING_RIGHT = 6;
 
 export const EVENT_ALLDAY_HEIGHT = 20;
 export const EVENT_PADDING_RIGHT = 10;
-export const EVENT_PADDING_WIDTH = 13;
 export const EVENT_WIDTH_MINIMUM = 80;
 
 export const FLEX_TODAY = 21.4;
diff --git a/packages/web/src/views/Calendar/styled.ts b/packages/web/src/views/Calendar/styled.ts
index 9777f88f..7e1592d0 100644
--- a/packages/web/src/views/Calendar/styled.ts
+++ b/packages/web/src/views/Calendar/styled.ts
@@ -1,5 +1,4 @@
 import styled from "styled-components";
-import { BASE_COLORS } from "@core/constants/colors";
 import { Flex } from "@web/components/Flex";
 
 import { PAGE_TOP_PADDING, PAGE_X_PADDING } from "./layout.constants";
@@ -11,7 +10,7 @@ export const Styled = styled(Flex)`
 `;
 
 export const StyledCalendar = styled(Flex)`
-  background: ${BASE_COLORS.DEEP_BLUE};
+  background: ${({ theme }) => theme.color.bg.primary};
   flex-grow: 1;
   height: 100%;
   padding: ${PAGE_TOP_PADDING}px ${PAGE_X_PADDING}px 0 ${PAGE_X_PADDING}px;
diff --git a/packages/web/src/views/CmdPalette/styled.ts b/packages/web/src/views/CmdPalette/styled.ts
deleted file mode 100644
index d0448f14..00000000
--- a/packages/web/src/views/CmdPalette/styled.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import styled from "styled-components";
-import { ColorNames } from "@core/types/color.types";
-import { getColor } from "@core/util/color.utils";
-import { Flex } from "@web/components/Flex";
-
-export const StyledKeyTip = styled(Flex)`
-  border: 2px solid ${getColor(ColorNames.GREY_2)};
-  border-radius: 3px;
-  font-size: 11px;
-  margin-left: 20px;
-  padding: 3px 8px;
-`;
diff --git a/packages/web/src/views/Forms/EventForm/DateTimeSection/styled.ts b/packages/web/src/views/Forms/EventForm/DateTimeSection/styled.ts
index cb71a4ae..3aef9b41 100644
--- a/packages/web/src/views/Forms/EventForm/DateTimeSection/styled.ts
+++ b/packages/web/src/views/Forms/EventForm/DateTimeSection/styled.ts
@@ -3,6 +3,7 @@ import { Flex } from "@web/components/Flex";
 
 export const StyledDateTimeFlex = styled(Flex)`
   margin-top: 15px;
+  margin-bottom: 10px;
 `;
 
 export const StyledDateFlex = styled(Flex)`
diff --git a/packages/web/src/views/Forms/EventForm/EventForm.tsx b/packages/web/src/views/Forms/EventForm/EventForm.tsx
index f22548d3..2456c479 100644
--- a/packages/web/src/views/Forms/EventForm/EventForm.tsx
+++ b/packages/web/src/views/Forms/EventForm/EventForm.tsx
@@ -1,4 +1,5 @@
 import dayjs from "dayjs";
+import FocusTrap from "focus-trap-react";
 import React, {
   KeyboardEvent,
   KeyboardEventHandler,
@@ -7,9 +8,7 @@ import React, {
   useState,
 } from "react";
 import { Key } from "ts-key-enum";
-import { getColor } from "@core/util/color.utils";
 import { Priorities } from "@core/constants/core.constants";
-import { colorNameByPriority } from "@core/constants/colors";
 import { Schema_Event } from "@core/types/event.types";
 import { DeleteIcon } from "@web/components/Icons/Delete";
 import { getCategory } from "@web/common/utils/event.util";
@@ -20,7 +19,10 @@ import {
 } from "@web/common/utils/web.date.util";
 import { StyledMigrateArrowInForm } from "@web/views/Calendar/components/LeftSidebar/SomedaySection/SomedayEvents/styled";
 import { ID_EVENT_FORM } from "@web/common/constants/web.constants";
-import FocusTrap from "focus-trap-react";
+import {
+  colorByPriority,
+  hoverColorByPriority,
+} from "@web/common/styles/theme.util";
 
 import { FormProps, SetEventFormField } from "./types";
 import { DateTimeSection } from "./DateTimeSection";
@@ -28,9 +30,9 @@ import { PrioritySection } from "./PrioritySection";
 import { SaveSection } from "./SaveSection";
 import {
   StyledEventForm,
-  StyledDescriptionField,
+  StyledDescription,
   StyledIconRow,
-  StyledTitleField,
+  StyledTitle,
 } from "./styled";
 
 export const EventForm: React.FC<FormProps> = ({
@@ -270,13 +272,14 @@ export const EventForm: React.FC<FormProps> = ({
           <DeleteIcon onDelete={onDeleteForm} title="Delete Event" />
         </StyledIconRow>
 
-        <StyledTitleField
+        <StyledTitle
           autoFocus
           onChange={onChangeEventTextField("title")}
           onKeyDown={ignoreDelete}
           placeholder="Title"
           role="textarea"
           name="Event Title"
+          underlineColor={colorByPriority[priority]}
           value={title}
         />
 
@@ -286,7 +289,7 @@ export const EventForm: React.FC<FormProps> = ({
         />
 
         <DateTimeSection
-          bgColor={getColor(colorNameByPriority[priority])}
+          bgColor={hoverColorByPriority[priority]}
           event={event}
           category={category}
           endTime={endTime}
@@ -304,7 +307,8 @@ export const EventForm: React.FC<FormProps> = ({
           setEvent={setEvent}
         />
 
-        <StyledDescriptionField
+        <StyledDescription
+          underlineColor={colorByPriority[priority]}
           onChange={onChangeEventTextField("description")}
           onKeyDown={ignoreDelete}
           placeholder="Description"
diff --git a/packages/web/src/views/Forms/EventForm/PrioritySection/PrioritySection.tsx b/packages/web/src/views/Forms/EventForm/PrioritySection/PrioritySection.tsx
index 8c1fa95f..55a828fc 100644
--- a/packages/web/src/views/Forms/EventForm/PrioritySection/PrioritySection.tsx
+++ b/packages/web/src/views/Forms/EventForm/PrioritySection/PrioritySection.tsx
@@ -1,8 +1,8 @@
 import React from "react";
 import { Priorities, Priority } from "@core/constants/core.constants";
-import { colorNameByPriority } from "@core/constants/colors";
 import { JustifyContent } from "@web/components/Flex/styled";
-import { Button } from "@web/components/Button";
+import { colorByPriority } from "@web/common/styles/theme.util";
+import { PriorityButton } from "@web/components/Button/styled";
 
 import { StyledPriorityFlex } from "./styled";
 import { SetEventFormField } from "../types";
@@ -18,9 +18,9 @@ export const PrioritySection: React.FC<Props> = ({
 }) => {
   return (
     <StyledPriorityFlex justifyContent={JustifyContent.SPACE_BETWEEN}>
-      <Button
+      <PriorityButton
         bordered={priority === Priorities.WORK}
-        color={colorNameByPriority.work}
+        color={colorByPriority.work}
         onClick={() => {
           onSetEventField("priority", Priorities.WORK);
         }}
@@ -30,11 +30,11 @@ export const PrioritySection: React.FC<Props> = ({
         title="Doing your best work"
       >
         Work
-      </Button>
+      </PriorityButton>
 
-      <Button
+      <PriorityButton
         bordered={priority === Priorities.SELF}
-        color={colorNameByPriority.self}
+        color={colorByPriority.self}
         onClick={() => onSetEventField("priority", Priorities.SELF)}
         onFocus={() => onSetEventField("priority", Priorities.SELF)}
         role="tab"
@@ -42,11 +42,11 @@ export const PrioritySection: React.FC<Props> = ({
         title="Nurturing your authentic self"
       >
         Self
-      </Button>
+      </PriorityButton>
 
-      <Button
+      <PriorityButton
         bordered={priority === Priorities.RELATIONS}
-        color={colorNameByPriority.relationships}
+        color={colorByPriority.relationships}
         onClick={() => {
           onSetEventField("priority", Priorities.RELATIONS);
         }}
@@ -56,7 +56,7 @@ export const PrioritySection: React.FC<Props> = ({
         title="Connecting with others"
       >
         Relationships
-      </Button>
+      </PriorityButton>
     </StyledPriorityFlex>
   );
 };
diff --git a/packages/web/src/views/Forms/EventForm/RepeatSection/RepeatDialog/RepeatDialog.tsx b/packages/web/src/views/Forms/EventForm/RepeatSection/RepeatDialog/RepeatDialog.tsx
index 1a54a272..74d86089 100644
--- a/packages/web/src/views/Forms/EventForm/RepeatSection/RepeatDialog/RepeatDialog.tsx
+++ b/packages/web/src/views/Forms/EventForm/RepeatSection/RepeatDialog/RepeatDialog.tsx
@@ -1,13 +1,14 @@
 import React, { FC } from "react";
-import Select from "react-select";
-import { ColorHex } from "@core/constants/colors";
+import Select, { StylesConfig } from "react-select";
 import { Schema_Event } from "@core/types/event.types";
+import { brighten, darken } from "@core/util/color.utils";
 import { Recurrence_Selection } from "@web/common/types/web.event.types";
 import {
   getRecurrenceOption,
   getRecurrenceRule,
 } from "@web/common/utils/web.date.util";
 import { RepeatIcon } from "@web/components/Icons/Repeat";
+import { theme } from "@web/common/styles/theme";
 
 import {
   StyledRepeatRow,
@@ -16,7 +17,7 @@ import {
 } from "../styled";
 
 interface Props {
-  bgColor: ColorHex;
+  bgColor: string;
   recurrence: Schema_Event["recurrence"];
   onChangeRecurrence: (rule: string[] | null) => void;
   setIsRepeat: React.Dispatch<React.SetStateAction<boolean>>;
@@ -30,8 +31,6 @@ export const RepeatDialog: FC<Props> = ({
 }) => {
   const options = [
     { value: Recurrence_Selection.WEEK, label: "week" },
-    { value: Recurrence_Selection.WEEKS_2, label: "2 weeks" },
-    { value: Recurrence_Selection.WEEKS_3, label: "3 weeks" },
     { value: Recurrence_Selection.MONTH, label: "month" },
   ];
 
@@ -40,13 +39,58 @@ export const RepeatDialog: FC<Props> = ({
       ? getRecurrenceOption(recurrence.rule[0])
       : options[0];
 
-  const fontSize = "13px";
-
   const onRepeatTextClick = () => {
     onChangeRecurrence(null);
     setIsRepeat(false);
   };
 
+  const fontSize = theme.text.size.m;
+  const bgBright = brighten(bgColor);
+  const bgDark = darken(bgColor);
+
+  const selectStyles: StylesConfig = {
+    control: (baseStyles) => ({
+      ...baseStyles,
+      backgroundColor: bgColor,
+      borderRadius: 4,
+      fontSize,
+      height: "27px",
+    }),
+    indicatorSeparator: () => ({
+      visibility: "hidden",
+    }),
+    menuList: (baseStyles) => ({
+      ...baseStyles,
+      fontSize,
+      backgroundColor: bgColor,
+    }),
+    option: (styles, { isDisabled, isFocused, isSelected }) => {
+      return {
+        ...styles,
+        backgroundColor: isDisabled
+          ? undefined
+          : isSelected
+          ? bgBright
+          : isFocused
+          ? bgDark
+          : undefined,
+        color: isDisabled
+          ? theme.color.text.lightInactive
+          : theme.color.text.dark,
+        cursor: isDisabled ? "not-allowed" : "default",
+
+        ":active": {
+          ...styles[":active"],
+          backgroundColor: !isDisabled
+            ? isSelected
+              ? bgColor
+              : bgBright
+            : undefined,
+        },
+      };
+    },
+  };
+
   return (
     <StyledRepeatRow>
       <StyledRepeatTextContainer onClick={onRepeatTextClick}>
@@ -57,38 +101,23 @@ export const RepeatDialog: FC<Props> = ({
       <div>
         <Select
           defaultValue={defaultValue}
-          isOptionDisabled={(opt) =>
+          isOptionDisabled={(selection: { value: string; label: string }) =>
             ![Recurrence_Selection.WEEK, Recurrence_Selection.MONTH].includes(
-              opt.value
+              selection.value as Recurrence_Selection
             )
           }
           options={options}
-          onChange={(selection) => {
-            const rrule = getRecurrenceRule(selection.value);
+          onChange={(selection: { value: string; label: string }) => {
+            const rrule = getRecurrenceRule(
+              selection.value as Recurrence_Selection
+            );
             onChangeRecurrence(rrule);
           }}
-          styles={{
-            control: (baseStyles, state) => ({
-              ...baseStyles,
-              backgroundColor: bgColor,
-              borderColor: state.isFocused ? "grey" : "lightgrey",
-              fontSize,
-              minHeight: "30px",
-              height: "30px",
-            }),
-            indicatorSeparator: () => ({
-              visibility: "hidden",
-            }),
-            menuList: (baseStyles) => ({
-              ...baseStyles,
-              backgroundColor: bgColor,
-              fontSize,
-            }),
-            option: (baseStyles, state) => ({
-              ...baseStyles,
-              color: state.isDisabled ? "#505050" : "black",
-            }),
-          }}
+          theme={(theme) => ({
+            ...theme,
+            borderRadius: 4,
+          })}
+          styles={selectStyles}
         />
       </div>
     </StyledRepeatRow>
diff --git a/packages/web/src/views/Forms/EventForm/RepeatSection/RepeatSection.tsx b/packages/web/src/views/Forms/EventForm/RepeatSection/RepeatSection.tsx
index 0b820eed..81dab01f 100644
--- a/packages/web/src/views/Forms/EventForm/RepeatSection/RepeatSection.tsx
+++ b/packages/web/src/views/Forms/EventForm/RepeatSection/RepeatSection.tsx
@@ -1,5 +1,4 @@
 import React, { FC, useState } from "react";
-import { ColorHex } from "@core/constants/colors";
 import { RRULE } from "@core/constants/core.constants";
 import { Schema_Event } from "@core/types/event.types";
 
@@ -8,7 +7,7 @@ import { RepeatDialog } from "./RepeatDialog";
 import { SetEventFormField } from "../types";
 
 interface Props {
-  bgColor: ColorHex;
+  bgColor: string;
   onSetEventField: SetEventFormField;
   recurrence: Schema_Event["recurrence"];
 }
@@ -22,7 +21,6 @@ export const RepeatSection: FC<Props> = ({
 
   const toggleRecurrence = () => {
     if (isRepeat) {
-      console.log("setting to null ...");
       onSetEventField("recurrence", null);
       setIsRepeat(false);
     } else {
diff --git a/packages/web/src/views/Forms/EventForm/RepeatSection/styled.ts b/packages/web/src/views/Forms/EventForm/RepeatSection/styled.ts
index 86914a2c..90c55cb5 100644
--- a/packages/web/src/views/Forms/EventForm/RepeatSection/styled.ts
+++ b/packages/web/src/views/Forms/EventForm/RepeatSection/styled.ts
@@ -2,6 +2,7 @@ import { Flex } from "@web/components/Flex";
 import styled from "styled-components";
 
 export const StyledRepeatContainer = styled.div`
+  margin-bottom: 10px;
   &:hover {
     cursor: pointer;
   }
@@ -17,20 +18,32 @@ interface Props {
 }
 
 export const StyledRepeatText = styled.span<Props>`
-  color: ${({ hasRepeat }) => !hasRepeat && "#586772"};
-  font-size: 13px;
-  padding-left: 2px;
-  padding-right: 15px;
+  border: 1px solid transparent;
+  border-radius: 3px;
+  font-size: ${({ theme }) => theme.text.size.m};
+  opacity: ${({ hasRepeat }) => !hasRepeat && 0.85};
+  padding: 2px 8px;
 
   &:focus,
   &:hover {
-    filter: brightness(80%);
-    font-weight: bold;
+    border: ${({ hasRepeat, theme }) =>
+      !hasRepeat && `1px solid ${theme.color.border.primaryDark}`};
   }
 `;
 
 export const StyledRepeatTextContainer = styled(Flex)`
   align-items: center;
-  justify-content: center;
+  border: 1px solid transparent;
+  border-radius: 3px;
   gap: 6px;
+  justify-content: center;
+  margin-right: 8px;
+  padding: 2px 8px;
+
+  &:focus,
+  &:hover {
+    border: 1px solid ${({ theme }) => theme.color.border.primaryDark};
+    filter: brightness(90%);
+    transition: border ${({ theme }) => theme.transition.default} ease;
+  }
 `;
diff --git a/packages/web/src/views/Forms/EventForm/SaveSection/SaveSection.tsx b/packages/web/src/views/Forms/EventForm/SaveSection/SaveSection.tsx
index 3a82cfe8..b8f84755 100644
--- a/packages/web/src/views/Forms/EventForm/SaveSection/SaveSection.tsx
+++ b/packages/web/src/views/Forms/EventForm/SaveSection/SaveSection.tsx
@@ -1,8 +1,6 @@
 import React from "react";
-import { colorNameByPriority } from "@core/constants/colors";
 import { Priority } from "@core/constants/core.constants";
-import { getBrighterColor } from "@core/util/color.utils";
-import { SaveBtn } from "@web/components/Button";
+import { StyledSaveBtn } from "@web/components/Button/styled";
 
 import { StyledSubmitRow } from "../styled";
 
@@ -15,21 +13,18 @@ export const SaveSection: React.FC<Props> = ({
   onSubmit: _onSubmit,
   priority,
 }) => {
-  const colorName = colorNameByPriority[priority];
-  const color = getBrighterColor(colorName);
-
   return (
     <StyledSubmitRow>
-      <SaveBtn
-        background={color}
+      <StyledSaveBtn
         minWidth={110}
-        onClick={_onSubmit}
+        priority={priority}
         role="tab"
         tabIndex={0}
         title="Save event"
+        onClick={_onSubmit}
       >
         Save
-      </SaveBtn>
+      </StyledSaveBtn>
     </StyledSubmitRow>
   );
 };
diff --git a/packages/web/src/views/Forms/EventForm/styled.ts b/packages/web/src/views/Forms/EventForm/styled.ts
index cab1f663..c8ae4dd0 100644
--- a/packages/web/src/views/Forms/EventForm/styled.ts
+++ b/packages/web/src/views/Forms/EventForm/styled.ts
@@ -1,50 +1,34 @@
 import styled from "styled-components";
-import { Priorities } from "@core/constants/core.constants";
-import { colorNameByPriority } from "@core/constants/colors";
-import { ColorNames, InvertedColorNames } from "@core/types/color.types";
-import { getColor, getInvertedColor } from "@core/util/color.utils";
 import { EVENT_WIDTH_MINIMUM } from "@web/views/Calendar/layout.constants";
-import {
-  ANIMATION_TIME_3_MS,
-  ZIndex,
-} from "@web/common/constants/web.constants";
+import { ZIndex } from "@web/common/constants/web.constants";
 import { Flex } from "@web/components/Flex";
 import { Textarea } from "@web/components/Textarea";
-import { Button } from "@web/components/Button";
+import { hoverColorByPriority } from "@web/common/styles/theme.util";
+import { PriorityButton } from "@web/components/Button/styled";
 
 import { StyledFormProps } from "./types";
 
-export const FORM_TIME_SIZE = 17;
-
 interface SomedayFormProps extends StyledFormProps {
   x?: number;
   y?: number;
 }
 
 export const StyledEventForm = styled.form<SomedayFormProps>`
-  background: ${({ priority }) =>
-    getColor(
-      colorNameByPriority[priority || Priorities.UNASSIGNED] as ColorNames
-    )};
+  background: ${({ priority }) => hoverColorByPriority[priority]};
   border-radius: 4px;
-  box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.25);
-  color: ${({ priority }) =>
-    getInvertedColor(
-      colorNameByPriority[
-        priority || Priorities.UNASSIGNED
-      ] as InvertedColorNames
-    )};
+  box-shadow: 0px 5px 5px ${({ theme }) => theme.color.shadow.default};
   font-size: 20px;
   padding: 18px 20px;
-  transition: ${ANIMATION_TIME_3_MS};
+  transition: ${({ theme }) => theme.transition.default};
   width: 585px;
   z-index: ${ZIndex.LAYER_1};
 `;
 
-export const StyledDescriptionField = styled(Textarea)`
+export const StyledDescription = styled(Textarea)`
   background: transparent;
   border: hidden;
-  font-size: 20px;
+  font-size: ${({ theme }) => theme.text.size.xxl};
+  font-weight: ${({ theme }) => theme.text.weight.regular};
   max-height: 180px;
   position: relative;
   width: calc(100% - 20px) !important;
@@ -60,7 +44,7 @@ export const StyledIconRow = styled(Flex)`
   justify-content: end;
 `;
 
-export const StyledSubmitButton = styled(Button)`
+export const StyledSubmitButton = styled(PriorityButton)`
   border: 2px solid;
   margin-top: 15px;
   min-width: ${EVENT_WIDTH_MINIMUM}px;
@@ -72,10 +56,9 @@ export const StyledSubmitRow = styled(Flex)`
   padding-top: 18px;
 `;
 
-export const StyledTitleField = styled(Textarea)`
+export const StyledTitle = styled(Textarea)`
   background: transparent;
-  height: 40px;
-  font-size: 35px;
+  font-size: ${({ theme }) => theme.text.size["5xl"]};
   &:hover {
     filter: brightness(90%);
   }
diff --git a/packages/web/src/views/Forms/EventForm/types.ts b/packages/web/src/views/Forms/EventForm/types.ts
index c84c1b93..10113e8f 100644
--- a/packages/web/src/views/Forms/EventForm/types.ts
+++ b/packages/web/src/views/Forms/EventForm/types.ts
@@ -22,6 +22,6 @@ export type SetEventFormField = <FieldName extends keyof Schema_Event>(
 
 export interface StyledFormProps {
   isOpen?: boolean;
-  priority?: string;
+  priority?: Priority;
   title?: string;
 }
diff --git a/packages/web/src/views/Forms/SomedayEventForm/SomedayEventForm.tsx b/packages/web/src/views/Forms/SomedayEventForm/SomedayEventForm.tsx
index 758dbe47..e32a8805 100644
--- a/packages/web/src/views/Forms/SomedayEventForm/SomedayEventForm.tsx
+++ b/packages/web/src/views/Forms/SomedayEventForm/SomedayEventForm.tsx
@@ -2,8 +2,6 @@ import React, { MouseEvent, useRef } from "react";
 import { toast } from "react-toastify";
 import "react-toastify/dist/ReactToastify.css";
 import { Key } from "ts-key-enum";
-import { colorNameByPriority } from "@core/constants/colors";
-import { getColor } from "@core/util/color.utils";
 import { useAppDispatch } from "@web/store/store.hooks";
 import { DeleteIcon } from "@web/components/Icons/Delete";
 import { getSomedayEventsSlice } from "@web/ducks/events/slices/someday.slice";
@@ -11,12 +9,13 @@ import { PrioritySection } from "@web/views/Forms/EventForm/PrioritySection";
 import { SaveSection } from "@web/views/Forms/EventForm/SaveSection";
 import { FormProps, SetEventFormField } from "@web/views/Forms/EventForm/types";
 import {
-  StyledDescriptionField,
+  StyledDescription,
   StyledEventForm,
   StyledIconRow,
-  StyledTitleField,
+  StyledTitle,
 } from "@web/views/Forms/EventForm/styled";
 import { ID_SOMEDAY_EVENT_FORM } from "@web/common/constants/web.constants";
+import { colorByPriority } from "@web/common/styles/theme.util";
 
 import { RepeatSection } from "../EventForm/RepeatSection";
 
@@ -31,7 +30,7 @@ export const SomedayEventForm: React.FC<FormProps> = ({
   const dispatch = useAppDispatch();
 
   const { priority, title } = event || {};
-  const bgColor = getColor(colorNameByPriority[priority]);
+  const bgColor = colorByPriority[priority];
 
   const origRecurrence = useRef(event?.recurrence).current;
 
@@ -120,12 +119,13 @@ export const SomedayEventForm: React.FC<FormProps> = ({
         <DeleteIcon onDelete={onDelete} title="Delete Someday Event" />
       </StyledIconRow>
 
-      <StyledTitleField
+      <StyledTitle
         autoFocus
         onChange={onChangeEventTextField("title")}
         placeholder="Title"
         role="input"
         title="title"
+        underlineColor={colorByPriority[priority]}
         value={title}
       />
 
@@ -137,9 +137,10 @@ export const SomedayEventForm: React.FC<FormProps> = ({
         recurrence={event.recurrence}
       />
 
-      <StyledDescriptionField
+      <StyledDescription
         onChange={onChangeEventTextField("description")}
         placeholder="Description"
+        underlineColor={colorByPriority[priority]}
         value={event.description || ""}
       />
 
diff --git a/packages/web/src/views/Login/Login.tsx b/packages/web/src/views/Login/Login.tsx
index 03d0013a..e154bcc2 100644
--- a/packages/web/src/views/Login/Login.tsx
+++ b/packages/web/src/views/Login/Login.tsx
@@ -13,10 +13,11 @@ import {
   SignInButtonWrapper,
   Card,
   CardHeader,
-  Description,
-  StyledLogin,
   Subtitle,
+  StyledLogin,
+  Description,
   Title,
+  StyledLoginContainer,
 } from "./styled";
 
 export const LoginView = () => {
@@ -87,30 +88,32 @@ export const LoginView = () => {
       {isAuthenticated ? (
         <Navigate to={ROOT_ROUTES.ROOT} />
       ) : (
-        <StyledLogin
-          alignItems={AlignItems.CENTER}
-          direction={FlexDirections.COLUMN}
-        >
-          {isAuthenticating && <AbsoluteOverflowLoader />}
+        <StyledLoginContainer>
+          <StyledLogin
+            alignItems={AlignItems.CENTER}
+            direction={FlexDirections.COLUMN}
+          >
+            {isAuthenticating && <AbsoluteOverflowLoader />}
 
-          <Card>
-            <CardHeader>
-              <Title>Welcome to Compass</Title>
-              <Description>The weekly planner for minimalists</Description>
-            </CardHeader>
-            <Subtitle>You're almost ready to start planning!</Subtitle>
-            <Subtitle>
-              Now let's import your events from Google Calendar
-            </Subtitle>
-            <SignInButtonWrapper>
-              <GoogleButton
-                aria-label="Sign in with Google"
-                type="light"
-                onClick={() => login()}
-              />
-            </SignInButtonWrapper>
-          </Card>
-        </StyledLogin>
+            <Card>
+              <CardHeader>
+                <Title>Welcome to Compass</Title>
+                <Subtitle>The weekly planner for minimalists</Subtitle>
+              </CardHeader>
+              <Description>You're almost ready to start planning!</Description>
+              <Description>
+                Now let's import your events from Google Calendar
+              </Description>
+              <SignInButtonWrapper>
+                <GoogleButton
+                  aria-label="Sign in with Google"
+                  type="light"
+                  onClick={() => login()}
+                />
+              </SignInButtonWrapper>
+            </Card>
+          </StyledLogin>
+        </StyledLoginContainer>
       )}
     </>
   );
diff --git a/packages/web/src/views/Login/styled.ts b/packages/web/src/views/Login/styled.ts
index 80d7897e..42e39597 100644
--- a/packages/web/src/views/Login/styled.ts
+++ b/packages/web/src/views/Login/styled.ts
@@ -1,10 +1,35 @@
-import styled from "styled-components";
+import styled, { keyframes } from "styled-components";
 import { Flex } from "@web/components/Flex";
-import { getColor } from "@core/util/color.utils";
-import { ColorNames } from "@core/types/color.types";
+
+import { darkBlueGradient } from "../../common/styles/theme.util";
+
+const bgAnimation = keyframes`
+  0% {
+    background-position-x: 0;
+  }
+  100% {
+    background-position-x: 10000px;
+  }
+`;
+
+export const StyledLoginContainer = styled.div`
+  background: linear-gradient(
+    to right,
+    ${darkBlueGradient.level1},
+    ${darkBlueGradient.level2},
+    ${darkBlueGradient.level3},
+    ${darkBlueGradient.level4},
+    ${darkBlueGradient.level5}
+  );
+  background-size: 10000px 100%;
+  animation: ${bgAnimation} 10s ease infinite;
+  min-height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
 
 export const StyledLogin = styled(Flex)`
-  background: ${getColor(ColorNames.BLUE_2)};
   bottom: 0;
   justify-content: center;
   left: 0;
@@ -16,33 +41,40 @@ export const StyledLogin = styled(Flex)`
 `;
 
 export const Card = styled.div`
-  background: #213c53;
-  border-radius: 8px;
+  box-shadow: 0 4px 8px ${({ theme }) => theme.color.panel.shadow};
+  background: ${({ theme }) => theme.color.bg.secondary};
+  border-radius: 35px;
   width: 100%;
-  max-width: 500px;
-  padding: 2rem;
+  max-width: 577px;
+  padding: 2.5rem;
+  transition: box-shadow 0.3s ease;
+
+  &:hover {
+    box-shadow: 0 8px 16px ${({ theme }) => theme.color.panel.shadow};
+  }
 `;
 
 export const CardHeader = styled.div`
   text-align: center;
-  margin-bottom: 1.5rem;
+  margin-bottom: 6.5rem;
 `;
 
 export const Title = styled.h2`
   font-size: 2.5rem;
   font-weight: bold;
-  color: ${getColor(ColorNames.WHITE_5)};
+  color: ${({ theme }) => theme.color.text.lighter};
   margin-bottom: 1rem;
 `;
 
-export const Description = styled.p`
-  color: ${getColor(ColorNames.WHITE_4)};
+export const Subtitle = styled.p`
+  color: ${({ theme }) => theme.color.text.lighter};
   font-size: 1.25rem;
+  font-style: italic;
   margin-bottom: 2.25rem;
 `;
 
-export const Subtitle = styled.p`
-  color: ${getColor(ColorNames.WHITE_5)};
+export const Description = styled.p`
+  color: ${({ theme }) => theme.color.text.lighter};
   font-size: 1rem;
   margin-bottom: 1rem;
   text-align: center;
@@ -50,7 +82,6 @@ export const Subtitle = styled.p`
 
 export const SignInButtonWrapper = styled.div`
   display: flex;
-  background: #213c53;
   align-items: center;
   justify-content: center;
   width: 100%;
diff --git a/packages/web/src/views/Logout/Logout.tsx b/packages/web/src/views/Logout/Logout.tsx
index cf9b18a3..7a628998 100644
--- a/packages/web/src/views/Logout/Logout.tsx
+++ b/packages/web/src/views/Logout/Logout.tsx
@@ -1,13 +1,13 @@
 import React, { useEffect, useState } from "react";
-import Session from "supertokens-auth-react/recipe/session";
+import { useNavigate } from "react-router-dom";
+import Session, { signOut } from "supertokens-auth-react/recipe/session";
 import { AbsoluteOverflowLoader } from "@web/components/AbsoluteOverflowLoader";
 import { ROOT_ROUTES } from "@web/common/constants/routes";
-import { signOut } from "supertokens-auth-react/recipe/session";
 import { SyncApi } from "@web/common/apis/sync.api";
 import { AlignItems, FlexDirections } from "@web/components/Flex/styled";
-import { useNavigate } from "react-router-dom";
 
 import { StyledLogin } from "../Login/styled";
+import { StyledLogoutBtn } from "./styled";
 
 export const LogoutView = () => {
   const navigate = useNavigate();
@@ -47,7 +47,9 @@ export const LogoutView = () => {
       direction={FlexDirections.COLUMN}
     >
       {isLoggingOut && <AbsoluteOverflowLoader />}
-      <button onClick={() => void logout()}>Signout</button>
+      <StyledLogoutBtn role="button" onClick={() => void logout()}>
+        Signout
+      </StyledLogoutBtn>
     </StyledLogin>
   );
 };
diff --git a/packages/web/src/views/Logout/styled.ts b/packages/web/src/views/Logout/styled.ts
new file mode 100644
index 00000000..2005c59b
--- /dev/null
+++ b/packages/web/src/views/Logout/styled.ts
@@ -0,0 +1,14 @@
+import { Btn } from "@web/components/Button/styled";
+import styled from "styled-components";
+
+export const StyledLogoutBtn = styled(Btn)`
+  background: ${({ theme }) => theme.color.status.info};
+  height: 35px;
+  min-width: 158px;
+  padding: 0 8px;
+
+  &:hover {
+    filter: brightness(120%);
+    transition: brightness 0.5s;
+  }
+`;
diff --git a/packages/web/src/views/NotFound/NotFound.tsx b/packages/web/src/views/NotFound/NotFound.tsx
index 5d6603fe..647bf54d 100644
--- a/packages/web/src/views/NotFound/NotFound.tsx
+++ b/packages/web/src/views/NotFound/NotFound.tsx
@@ -1,7 +1,5 @@
 import React from "react";
 import { useNavigate } from "react-router-dom";
-import { ColorNames } from "@core/types/color.types";
-import { colorNameByPriority } from "@core/constants/colors";
 import { ROOT_ROUTES } from "@web/common/constants/routes";
 import { Text } from "@web/components/Text";
 import notFoundImg from "@web/assets/png/notFound.png";
@@ -20,18 +18,14 @@ export const NotFoundView = () => {
   return (
     <StyledNotFoundContainer>
       <div>
-        <Text colorName={ColorNames.WHITE_5} size={38}>
-          Shiver me timbers!
-        </Text>
+        <Text size="4xl">🏴‍☠️ Shiver me timbers! </Text>
       </div>
 
       <div>
-        <Text colorName={ColorNames.WHITE_2} size={22}>
-          This isn't part of the app, matey
-        </Text>
+        <Text size="xxl">This isn't part of the app, matey</Text>
       </div>
 
-      <StyledBackButton color={colorNameByPriority.work} onClick={goHome}>
+      <StyledBackButton onClick={goHome}>
         Go back to your booty
       </StyledBackButton>
 
diff --git a/packages/web/src/views/NotFound/styled.ts b/packages/web/src/views/NotFound/styled.ts
index 020f8d2b..6d353250 100644
--- a/packages/web/src/views/NotFound/styled.ts
+++ b/packages/web/src/views/NotFound/styled.ts
@@ -1,15 +1,24 @@
 import styled from "styled-components";
-import { BASE_COLORS } from "@core/constants/colors";
+import { darkBlueGradient } from "@web/common/styles/theme.util";
+
 export const StyledNotFoundImg = styled.img`
   border-radius: 50%;
-  border: 4px solid #fff;
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+  border: ${({ theme }) => `4px solid ${theme.color.bg.primary}`};
+  box-shadow: ${({ theme }) => `0 0 10px ${theme.color.shadow.default}`};
   max-width: 100%;
 `;
 
 export const StyledNotFoundContainer = styled.div`
   align-items: center;
-  background: ${BASE_COLORS.DEEP_BLUE};
+  background: linear-gradient(
+    to right,
+    ${darkBlueGradient.level1},
+    ${darkBlueGradient.level2},
+    ${darkBlueGradient.level3},
+    ${darkBlueGradient.level4},
+    ${darkBlueGradient.level5}
+  );
+  color: ${({ theme }) => theme.color.text.lighter};
   display: flex;
   flex-direction: column;
   height: 100vh;
@@ -18,10 +27,10 @@ export const StyledNotFoundContainer = styled.div`
 `;
 
 export const StyledBackButton = styled.button`
-  background: ${BASE_COLORS.SLATE_GREY};
-  border: 2px solid ${BASE_COLORS.SLATE_GREY};
+  background: ${({ theme }) => theme.color.fg.primaryDark};
+  border: ${({ theme }) => `2px solid ${theme.color.border.primary}`};
   border-radius: 4px;
-  color: ${BASE_COLORS.ONYX_GREY};
+  color: ${({ theme }) => theme.color.text.lighter};
   cursor: pointer;
   font-size: 16px;
   font-weight: 600;
diff --git a/yarn.lock b/yarn.lock
index ad733440..46a36b9f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2681,6 +2681,11 @@
   dependencies:
     "@types/node" "*"
 
+"@types/tinycolor2@^1.4.6":
+  version "1.4.6"
+  resolved "https://registry.yarnpkg.com/@types/tinycolor2/-/tinycolor2-1.4.6.tgz#670cbc0caf4e58dd61d1e3a6f26386e473087f06"
+  integrity sha512-iEN8J0BoMnsWBqjVbWH/c0G0Hh7O21lpR2/+PrvAVgWdzL7eexIFm4JN/Wn10PTcmNdtS6U67r499mlWMXOxNw==
+
 "@types/tough-cookie@*":
   version "4.0.5"
   resolved "https://registry.yarnpkg.com/@types/tough-cookie/-/tough-cookie-4.0.5.tgz#cb6e2a691b70cb177c6e3ae9c1d2e8b2ea8cd304"
@@ -10263,6 +10268,11 @@ tiny-invariant@^1.0.6, tiny-invariant@^1.3.3:
   resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.3.3.tgz#46680b7a873a0d5d10005995eb90a70d74d60127"
   integrity sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==
 
+tinycolor2@^1.6.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.6.0.tgz#f98007460169b0263b97072c5ae92484ce02d09e"
+  integrity sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw==
+
 tmp@^0.0.33:
   version "0.0.33"
   resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9"