diff --git a/frontend/renderer/plugins/vuetify.ts b/frontend/renderer/plugins/vuetify.ts
index 7ee24bc10..18439f908 100644
--- a/frontend/renderer/plugins/vuetify.ts
+++ b/frontend/renderer/plugins/vuetify.ts
@@ -11,72 +11,29 @@ import tokens from '#assets/sass/tokens.module.scss'
 const ocelotStandardLightTheme: ThemeDefinition = {
   dark: false,
   colors: {
-    background: 'rgb(255, 255, 255)',
-    surface: 'rgb(255, 255, 255)',
-    // primary: rgbToHex(23, 181, 63, '#'),
+    background: tokens.backgroundColorBase,
+    surface: tokens.backgroundColorSoft,
     primary: tokens.primaryColor,
-    // 'primary-darken-1': rgbToHex(25, 122, 49, '#'),
-    'primary-darken-1': 'rgb(25, 122, 49)',
-    secondary: 'rgb(0, 142, 230)',
-    // 'secondary-darken-1': '#018786',
-    error: 'rgb(219, 57, 36)',
-    // info: '#2196F3',
-    success: 'rgb(23, 181, 63)',
-    warning: 'rgb(230, 121, 25)',
+    secondary: tokens.colorSecondary,
+    success: tokens.colorSuccess,
+    info: tokens.colorInfo,
+    warning: tokens.colorWarning,
+    error: tokens.colorError,
   },
   variables: {
     'border-color': '#000000',
-    'border-opacity': 0.12,
-    'high-emphasis-opacity': 0.87,
-    'medium-emphasis-opacity': 0.6,
-    'disabled-opacity': 0.38,
-    'idle-opacity': 0.04,
-    'hover-opacity': 0.04,
-    'focus-opacity': 0.12,
-    'selected-opacity': 0.08,
-    'activated-opacity': 0.12,
-    'pressed-opacity': 0.12,
-    'dragged-opacity': 0.08,
-    'theme-kbd': '#0000FF',
-    'theme-on-kbd': '#FFFFFF',
-    'theme-code': '#F5F5F5',
-    'theme-on-code': '#000000',
   },
 }
 
 const ocelotStandardDarkTheme: ThemeDefinition = {
   dark: true,
   colors: {
-    background: 'rgb(0, 0, 0)',
-    surface: 'rgb(14, 17, 23)',
-    // primary: rgbToHex(23, 181, 63, '#'),
-    primary: 'rgb(23, 181, 63)',
-    // 'primary-darken-1': rgbToHex(25, 122, 49, '#'),
-    'primary-darken-1': 'rgb(25, 122, 49)',
-    secondary: 'rgb(0, 142, 230)',
-    // 'secondary-darken-1': '#018786',
-    error: 'rgb(219, 57, 36)',
-    // info: '#2196F3',
-    success: 'rgb(23, 181, 63)',
-    warning: 'rgb(230, 121, 25)',
+    ...ocelotStandardLightTheme.colors,
+    background: tokens.backgroundColorInverse,
+    surface: tokens.backgroundColorInverseSoft,
   },
   variables: {
     'border-color': '#000000',
-    'border-opacity': 0.12,
-    'high-emphasis-opacity': 0.87,
-    'medium-emphasis-opacity': 0.6,
-    'disabled-opacity': 0.38,
-    'idle-opacity': 0.04,
-    'hover-opacity': 0.04,
-    'focus-opacity': 0.12,
-    'selected-opacity': 0.08,
-    'activated-opacity': 0.12,
-    'pressed-opacity': 0.12,
-    'dragged-opacity': 0.08,
-    'theme-kbd': '#0000FF',
-    'theme-on-kbd': '#FFFFFF',
-    'theme-code': '#F5F5F5',
-    'theme-on-code': '#000000',
   },
 }
 
diff --git a/frontend/src/assets/sass/tokens.module.scss b/frontend/src/assets/sass/tokens.module.scss
index e32b1ba65..3aff11f98 100644
--- a/frontend/src/assets/sass/tokens.module.scss
+++ b/frontend/src/assets/sass/tokens.module.scss
@@ -1,6 +1,469 @@
 /* stylelint-disable color-function-notation */
+
+/**
+ * @tokens Color Brand
+ * @presenter Color
+ */
+
 $color-primary: rgb(23, 181, 63);
+$color-primary-light: rgb(96, 214, 98);
+$color-primary-dark: rgb(25, 122, 49);
+$color-primary-active: rgb(25, 194, 67);
+$color-primary-inverse: rgb(241, 253, 244);
+$color-secondary: rgb(0, 142, 230);
+$color-secondary-active: rgb(10, 161, 255);
+$color-secondary-inverse: rgb(240, 249, 255);
+$color-success: rgb(23, 181, 63);
+$color-success-active: rgb(26, 203, 71);
+$color-success-inverse: rgb(241, 253, 244);
+$color-danger: rgb(219, 57, 36);
+$color-danger-light: rgb(242, 97, 65);
+$color-danger-dark: rgb(158, 43, 28);
+$color-danger-active: rgb(224, 81, 62);
+$color-danger-inverse: rgb(253, 243, 242);
+$color-warning: rgb(230, 121, 25);
+$color-warning-active: rgb(233, 137, 53);
+$color-warning-inverse: rgb(253, 247, 241);
+$color-yellow: rgb(245, 196, 0);
+$color-yellow-active: rgb(255, 206, 10);
+$color-yellow-inverse: rgb(255, 252, 240);
+
+/**
+ * @tokens Color Neutral
+ * @presenter Color
+ */
+
+$color-neutral-0: rgb(25, 23, 28);
+$color-neutral-10: rgb(40, 37, 45);
+$color-neutral-20: rgb(75, 69, 84);
+$color-neutral-30: rgb(100, 92, 112);
+$color-neutral-40: rgb(112, 103, 126);
+$color-neutral-50: rgb(151, 143, 163);
+$color-neutral-60: rgb(177, 171, 186);
+$color-neutral-70: rgb(203, 199, 209);
+$color-neutral-80: rgb(229, 227, 232);
+$color-neutral-85: rgb(239, 238, 241);
+$color-neutral-90: rgb(245, 244, 246);
+$color-neutral-95: rgb(250, 249, 250);
+$color-neutral-100: rgb(255, 255, 255);
+
+/**
+ * @tokens Color Text
+ * @presenter Color
+ */
+
+$text-color-base: rgb(75, 69, 84);
+$text-color-soft: rgb(112, 103, 126);
+$text-color-softer: rgb(177, 171, 186);
+$text-color-disabled: rgb(177, 171, 186);
+$text-color-inverse: rgb(250, 249, 250);
+$text-color-link: rgb(23, 181, 63);
+$text-color-link-active: rgb(25, 194, 67);
+$text-color-primary: rgb(23, 181, 63);
+$text-color-primary-inverse: rgb(241, 253, 244);
+$text-color-secondary: rgb(0, 142, 230);
+$text-color-secondary-inverse: rgb(240, 249, 255);
+$text-color-success: rgb(23, 181, 63);
+$text-color-success-inverse: rgb(241, 253, 244);
+$text-color-warning: rgb(230, 121, 25);
+$text-color-warning-inverse: rgb(253, 247, 241);
+$text-color-danger: rgb(219, 57, 36);
+$text-color-danger-inverse: rgb(253, 243, 242);
+
+/**
+ * @tokens Color Background
+ * @presenter Color
+ */
+
+$background-color-base: rgb(255, 255, 255);
+$background-color-soft: rgb(250, 249, 250);
+$background-color-softer: rgb(245, 244, 246);
+$background-color-softer-active: rgb(250, 249, 250);
+$background-color-softest: rgb(239, 238, 241);
+$background-color-softest-active: rgb(245, 244, 246);
+$background-color-inverse: rgb(25, 23, 28);
+$background-color-inverse-soft: rgb(40, 37, 45);
+$background-color-inverse-softer: rgb(75, 69, 84);
+$background-color-inverse-softer-active: rgb(100, 92, 112);
+$background-color-disabled: rgb(245, 244, 246);
+$background-color-primary: rgb(23, 181, 63);
+$background-color-primary-active: rgb(25, 194, 67);
+$background-color-primary-inverse: rgb(241, 253, 244);
+$background-color-secondary: rgb(0, 142, 230);
+$background-color-secondary-active: rgb(10, 161, 255);
+$background-color-secondary-inverse: rgb(240, 249, 255);
+$background-color-third: rgb(126, 82, 204);
+$background-color-third-active: rgb(160, 103, 255);
+$background-color-third-inverse: rgb(239, 230, 255);
+$background-color-success: rgb(23, 181, 63);
+$background-color-success-active: rgb(26, 203, 71);
+$background-color-success-inverse: rgb(241, 253, 244);
+$background-color-warning: rgb(230, 121, 25);
+$background-color-warning-active: rgb(233, 137, 53);
+$background-color-warning-inverse: rgb(253, 247, 241);
+$background-color-danger: rgb(219, 57, 36);
+$background-color-danger-active: rgb(224, 81, 62);
+$background-color-danger-inverse: rgb(253, 243, 242);
+
+/**
+ * @tokens Color Border
+ * @presenter Color
+ */
+
+$border-color-base: rgb(177, 171, 186);
+$border-color-soft: rgb(203, 199, 209);
+$border-color-softer: rgb(229, 227, 232);
+$border-color-softest: rgb(245, 244, 246);
+$border-color-active: rgb(23, 181, 63);
+$border-color-primary: rgb(23, 181, 63);
+$border-color-success: rgb(23, 181, 63);
+$border-color-warning: rgb(230, 121, 25);
+$border-color-danger: rgb(219, 57, 36);
+
+/**
+ * @tokens Border Size
+ * @presenter Border
+ */
+
+$border-size-base: 1px;
+$border-size-large: 3px;
+$border-size-x-large: 6px;
+
+/**
+ * @tokens Border Radius
+ * @presenter BorderRadius
+ */
+
+$border-radius-x-large: 5px;
+$border-radius-large: 4px;
+$border-radius-base: 4px;
+$border-radius-small: 2px;
+$border-radius-rounded: 2em;
+$border-radius-circle: 50%;
+
+/**
+ * @tokens Font Size
+ * @presenter FontSize
+ */
+
+$font-size-xxxx-large: 3rem;
+$font-size-xxx-large: 2.5rem;
+$font-size-xx-large: 2rem;
+$font-size-x-large: 1.5rem;
+$font-size-large: 1.25rem;
+$font-size-base: 1rem;
+$font-size-body: 15px;
+$font-size-small: 0.8rem;
+$font-size-x-small: 0.7rem;
+$font-size-xx-small: 0.6rem;
+
+/**
+ * @tokens Font Space
+ * @presenter Spacing
+ */
+
+$font-space-xxxx-large: 2em;
+$font-space-xxx-large: 1.5em;
+$font-space-xx-large: 1.2em;
+$font-space-x-large: 1em;
+$font-space-large: 0.6em;
+$font-space-base: 0.5em;
+$font-space-small: 0.4em;
+$font-space-x-small: 0.3em;
+$font-space-xx-small: 0.2em;
+$font-space-xxx-small: 0.1em;
+
+/**
+ * @tokens Font Family
+ * @presenter FontFamily
+ */
+
+$font-family-heading: 'LatoWeb', sans-serif;
+$font-family-text: 'LatoWeb', sans-serif;
+$font-family-serif: 'Gentium Basic', serif;
+$font-family-code: inconsolata, monospace;
+
+/**
+ * @tokens Font Weight
+ * @presenter FontWeight
+ */
+
+$font-weight-regular: normal;
+$font-weight-bold: 600;
+
+/**
+ * @tokens Line Height
+ * @presenter LineHeight
+ */
+
+$line-height-large: 1.5rem;
+$line-height-base: 1.3rem;
+$line-height-small: 1.1rem;
+$line-height-smaller: 1.0rem;
+
+/**
+ * @tokens Letter Spacing
+ * @presenter Spacing
+ */
+
+$letter-spacing-x-large: 0.1em;
+$letter-spacing-large: 0.05em;
+$letter-spacing-base: 0;
+$letter-spacing-small: -0.01em;
+$letter-spacing-x-small: -0.015em;
+
+/**
+ * @tokens Opacity
+ * @presenter Opacity
+ */
+
+$opacity-base: 1;
+$opacity-soft: 0.7;
+$opacity-disabled: 0.5;
+
+/**
+ * @tokens Space
+ * @presenter Spacing
+ */
+
+$space-xxx-large: 128px;
+$space-xx-large: 64px;
+$space-x-large: 48px;
+$space-large: 32px;
+$space-base: 24px;
+$space-small: 16px;
+$space-x-small: 8px;
+$space-xx-small: 4px;
+$space-xxx-small: 2px;
+$space-none: 0;
+
+/**
+ * @tokens Size Height
+ * @presenter Spacing
+ */
+
+$size-height-base: 42px;
+$size-height-large: 50px;
+$size-height-xlarge: 60px;
+$size-height-footer: 64px;
+$size-height-connections: 315px;
+$size-tappable-square: 44px;
+$size-ribbon: 6px;
+
+/**
+ * @tokens Size Width
+ * @presenter Spacing
+ */
+
+$size-width-filter-sidebar: 85px;
+$size-width-paginate: 200px;
+$size-max-width-filter-menu: 1026px;
+
+/**
+ * @tokens Size Avatar
+ * @presenter Spacing
+ */
+
+$size-avatar-small: 34px;
+$size-avatar-base: 44px;
+$size-avatar-large: 114px;
+
+/**
+ * @tokens Size Buttons
+ * @presenter Spacing
+ */
+
+$size-button-large: 50px;
+$size-button-base: 36px;
+$size-button-small: 26px;
+
+/**
+ * @tokens Size Images
+ * @presenter Spacing
+ */
+
+$size-image-max-height: 2000px;
+$size-image-cropper-max-height: 600px;
+$size-image-cropper-min-height: 400px;
+$size-image-uploader-min-height: 250px;
+
+/**
+ * @tokens Size Icons
+ * @presenter Spacing
+ */
+
+$size-icon-base: 16px;
+$size-icon-large: 60px;
+
+/**
+ * @tokens Shadow
+ * @presenter Shadow
+ */
+
+$box-shadow-x-large: 0 15px 30px 0 rgba(0, 0, 0, .11), 0 5px 15px 0 rgba(0, 0, 0, .08);
+$box-shadow-large: 0 10px 20px 0 rgba(0, 0, 0, .11), 0 3px 10px 0 rgba(0, 0, 0, .08);
+$box-shadow-base: 0px 12px 26px -4px rgba(0, 0, 0, .1);
+$box-shadow-small: 0px 8px 18px -2px rgba(0, 0, 0, .1);
+$box-shadow-x-small: 0px 0px 3px 0px rgba(0, 0, 0, .1);
+$box-shadow-active: 0 0 6px 1px rgba(20, 100, 160, 0.5);
+$box-shadow-inset: inset 0 0 20px 1px rgba(0, 0, 0, .15);
+$box-shadow-small-inset: inset 0 0 0 1px rgba(0, 0, 0, .05);
+
+/**
+ * @tokens Effects
+ */
+
+$blur-radius: 22px;
+
+/**
+ * @tokens Animation Duration
+ */
+
+$duration-short: 0.08s;
+$duration-base: 0.5s;
+$duration-long: 0.75s;
+$duration-x-long: 1s;
+$duration-xx-long: 2s;
+
+/**
+ * @tokens Animation Ease
+ * @presenter Easing
+ */
+
+$ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
+$ease-out-sharp: cubic-bezier(0.165, 0.84, 0.44, 1);
+$ease-out-bounce: cubic-bezier(.87, -.41, .19, 1.44);
+$ease-in: cubic-bezier(0.55, 0.085, 0.68, 0.53);
+$ease-in-sharp: cubic-bezier(0.895, 0.03, 0.685, 0.22);
+
+/**
+ * @tokens Z-Index
+ */
+
+$z-index-modal: 9999;
+$z-index-overlay: 9000;
+$z-index-dropdown: 8888;
+$z-index-page-submenu: 2500;
+$z-index-page-header: 2000;
+$z-index-page-sidebar: 1500;
+$z-index-sticky-float: 150;
+$z-index-sticky: 100;
+$z-index-post-teaser-link: 5;
+$z-index-surface: 1;
+
+/**
+ * @tokens Media Query
+ */
+
+$media-query-x-small: (
+  min-width: 480px
+);
+$media-query-small: (
+  min-width: 600px
+);
+$media-query-medium: (
+  min-width: 768px
+);
+$media-query-large: (
+  min-width: 1024px
+);
+$media-query-x-large: (
+  min-width: 1200px
+);
+
+/** 
+ * @tokens Background Images
+ */
+
+/** 
+ * @tokens Header Color
+ */
+
+$color-header-background: $color-neutral-100;
+
+/** 
+ * @tokens Footer Color
+ */
+
+$color-footer-background: $color-neutral-100;
+$color-footer-link: $color-primary;
+
+/** 
+ * @tokens Locale Menu Color
+ */
+
+$color-locale-menu: $text-color-soft;
+
+/** 
+ * @tokens Donation Bar Color
+ */
+
+$color-donation-bar: $color-primary;
+$color-donation-bar-light: $color-primary-light;
+
+/** 
+ * @tokens Toast Color
+ */
+
+$color-toast-red: $color-danger;
+$color-toast-orange: $color-warning;
+$color-toast-yellow: $color-yellow;
+$color-toast-blue: $color-secondary;
+$color-toast-green: $color-success;
+
+/**
+ * @tokens Ribbon Color
+ */
+
+$color-ribbon-event: $background-color-third;
+$color-ribbon-event-active: $background-color-third-active;
+$color-ribbon-article: $background-color-secondary;
+$color-ribbon-article-active: $background-color-secondary-active;
+
+/**
+ * @tokens Chat Color
+ */
+
+$chat-message-bg-me: $color-primary-light;
+$chat-message-color: $text-color-base;
+$chat-message-bg-others: $color-neutral-80;
+$chat-sidemenu-bg: $color-secondary-active;
+$chat-new-message-color: $color-secondary-active;
+$chat-message-timestamp: $text-color-soft;
+$chat-message-checkmark-seen: $text-color-secondary;
+$chat-message-checkmark: $text-color-soft;
+$chat-room-color-counter-badge: $text-color-inverse;
+$chat-room-background-counter-badge: $color-secondary;
 
 :export {
-    primaryColor: $color-primary
+  primaryColor: $color-primary;
+  colorSecondary: $color-secondary;
+  colorPrimaryActive: $color-primary-active;
+  colorPrimaryLight: $color-primary-light;
+  colorSuccess: $color-success;
+  colorInfo: $color-secondary;
+  colorWarning: $color-warning;
+  colorError: $color-danger;
+  backgroundColorBase: $background-color-base;
+  backgroundColorSoft: $background-color-soft;
+  backgroundColorSoftest: $background-color-softest;
+  backgroundColorPrimary: $background-color-primary;
+  backgroundColorInverse: $background-color-inverse;
+  backgroundColorInverseSoft: $background-color-inverse-soft;
+  borderColorSoft: $border-color-soft;
+  borderRadiusBase: $border-radius-base;
+  textColorBase: $text-color-base;
+  textColorSoft: $text-color-soft;
+  textColorInverse: $text-color-inverse;
+  boxShadowBase: $box-shadow-base;
+  colorNeutral30: $color-neutral-30;
+  chatMessageColor: $chat-message-color;
+  chatMessageBgMe: $chat-message-bg-me;
+  chatMessageBgOthers: $chat-message-bg-others;
+  chatNewMessageColor: $chat-new-message-color;
+  chatMessageTimestamp: $chat-message-timestamp;
+  chatMessageCheckmarkSeen: $chat-message-checkmark-seen;
+  chatMessageCheckmark: $chat-message-checkmark;
+  chatRoomBackgroundCounterBadge: $chat-room-background-counter-badge;
+  chatRoomColorCounterBadge: $chat-room-color-counter-badge;
 }