diff --git a/packages/web/src/scss/components/UNSTABLE_PartnerLogo/_UNSTABLE_PartnerLogo.scss b/packages/web/src/scss/components/UNSTABLE_PartnerLogo/_UNSTABLE_PartnerLogo.scss
index 051e5406d5..a980c1d7a9 100644
--- a/packages/web/src/scss/components/UNSTABLE_PartnerLogo/_UNSTABLE_PartnerLogo.scss
+++ b/packages/web/src/scss/components/UNSTABLE_PartnerLogo/_UNSTABLE_PartnerLogo.scss
@@ -1,10 +1,12 @@
 @use 'theme' as theme;
-@use 'tools';
+@use '../../settings/globals';
+@use '../../tools/dictionaries';
 
 .UNSTABLE_PartnerLogo {
     display: inline-block;
     max-width: 100%;
     height: fit-content;
+    padding: var(--#{globals.$prefix}partner-logo-padding);
     border-radius: theme.$border-radius;
     background: theme.$background-color;
 }
@@ -12,10 +14,11 @@
 .UNSTABLE_PartnerLogo > img,
 .UNSTABLE_PartnerLogo > svg {
     width: fit-content;
+    height: var(--#{globals.$prefix}partner-logo-image-height);
 }
 
-@include tools.generate-logo-sizes('UNSTABLE_PartnerLogo', theme.$sizes);
+@include dictionaries.generate-sizes($class-name: 'UNSTABLE_PartnerLogo', $sizes: theme.$sizes);
 
 .UNSTABLE_PartnerLogo--hasSafeAreaDisabled {
-    padding: 0;
+    --#{globals.$prefix}partner-logo-padding: 0;
 }
diff --git a/packages/web/src/scss/components/UNSTABLE_PartnerLogo/_theme.scss b/packages/web/src/scss/components/UNSTABLE_PartnerLogo/_theme.scss
index d931f5819f..c74cd76d97 100644
--- a/packages/web/src/scss/components/UNSTABLE_PartnerLogo/_theme.scss
+++ b/packages/web/src/scss/components/UNSTABLE_PartnerLogo/_theme.scss
@@ -1,18 +1,19 @@
-@use '@tokens' as tokens;
+@use '@global' as global-tokens;
+@use '../../settings/globals';
 
-$background-color: tokens.$background-basic;
-$border-radius: tokens.$space-300;
+$background-color: var(--#{globals.$prefix}color-background-primary);
+$border-radius: global-tokens.$radius-200;
 $sizes: (
     small: (
-        height: tokens.$space-800,
-        padding: tokens.$space-400,
+        image-height: 32px,
+        padding: global-tokens.$space-500,
     ),
     medium: (
-        height: tokens.$space-1000,
-        padding: tokens.$space-400,
+        image-height: 48px,
+        padding: global-tokens.$space-500,
     ),
     large: (
-        height: 60px,
-        padding: tokens.$space-500,
+        image-height: 60px,
+        padding: global-tokens.$space-600,
     ),
 );
diff --git a/packages/web/src/scss/components/UNSTABLE_PartnerLogo/_tools.scss b/packages/web/src/scss/components/UNSTABLE_PartnerLogo/_tools.scss
deleted file mode 100644
index 54d4faf6e8..0000000000
--- a/packages/web/src/scss/components/UNSTABLE_PartnerLogo/_tools.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-@use 'sass:map';
-@use '@tokens' as tokens;
-
-@mixin generate-logo-sizes($class-name, $variables) {
-    @each $size, $variables in $variables {
-        .#{$class-name}--#{$size} {
-            @if map.has-key($variables, padding) {
-                padding: map.get($variables, padding);
-            }
-        }
-
-        .#{$class-name}--#{$size} > svg,
-        .#{$class-name}--#{$size} > img {
-            @if map.has-key($variables, height) {
-                height: map.get($variables, height);
-            }
-        }
-    }
-}
diff --git a/packages/web/src/scss/components/index.scss b/packages/web/src/scss/components/index.scss
index b22cc279fd..704879760b 100644
--- a/packages/web/src/scss/components/index.scss
+++ b/packages/web/src/scss/components/index.scss
@@ -35,8 +35,8 @@
 
 // @forward 'UNSTABLE_Avatar';
 @forward 'UNSTABLE_EmptyState';
+@forward 'UNSTABLE_PartnerLogo';
 
-// @forward 'UNSTABLE_PartnerLogo';
 // @forward 'UNSTABLE_ProductLogo';
 @forward 'UNSTABLE_Section';
 
diff --git a/packages/web/src/scss/tools/__tests__/_string.test.scss b/packages/web/src/scss/tools/__tests__/_string.test.scss
index f30bc2c9e9..1725b74663 100644
--- a/packages/web/src/scss/tools/__tests__/_string.test.scss
+++ b/packages/web/src/scss/tools/__tests__/_string.test.scss
@@ -36,3 +36,10 @@
         @include test.assert-equal(string.singularize('colors'), 'color');
     }
 }
+
+@include test.describe('remove prefix function') {
+    @include test.it('should remove prefix from a string') {
+        @include test.assert-equal(string.remove-prefix('UNSTABLE_Component', 'UNSTABLE_'), 'Component');
+        @include test.assert-equal(string.remove-prefix('Component', 'UNSTABLE_'), 'Component');
+    }
+}
diff --git a/packages/web/src/scss/tools/_dictionaries.scss b/packages/web/src/scss/tools/_dictionaries.scss
index 4291e1fa16..615dfa595a 100644
--- a/packages/web/src/scss/tools/_dictionaries.scss
+++ b/packages/web/src/scss/tools/_dictionaries.scss
@@ -1,80 +1,84 @@
 @use 'sass:list';
-@use 'sass:map';
-@use 'sass:meta';
+
+// @use 'sass:map';
+// @use 'sass:meta';
 @use 'sass:string';
-@use '@tokens' as tokens;
+
+// @use '@global' as global-tokens;
+@use '../settings/globals';
 @use './alignment';
 @use './links';
 @use './list' as spirit-list;
 @use './placement';
 @use './reset';
 @use './string' as spirit-string;
-@use './typography';
-
-// Function to get the tokens map from the dictionary value name
-// Example: -get-color-dictionary-tokens('primary') will return tokens.$action-colors
-@function -get-color-dictionary-tokens($variant) {
-    @if map.has-key(tokens.$action-colors, #{$variant}-default) {
-        @return tokens.$action-colors;
-    }
-
-    @if map.has-key(tokens.$emotion-colors, #{$variant}-default) {
-        @return tokens.$emotion-colors;
-    }
-
-    @if map.has-key(tokens.$text-colors, #{$variant}-default) {
-        @return tokens.$text-colors;
-    }
-
-    @error 'Invalid color dictionary value as there is no #{$variant}-default token either in action-colors, emotion-colors, or text-colors tokens';
-
-    @return null;
-}
 
-// Function to get the property value
-// Parameters are:
-// * $dictionary-value: the dictionary value to get the property value from, for example 'primary'
-// * $property-name: the property name to get the value from, for example 'color'
-// * $property-value: the property value, for example 'default' or directly the token, for example tokens.$text-primary-default
-// * $overrides: the overrides map, for example $overrides: (
-//     primary: (
-//         color: tokens.$text-primary-default, <-- this will override the default value of color for dictionary value 'primary'
-//         states: ( <-- this will override the default value of color for dictionary value 'primary' when the button is hovered or focused
-//             '&:hover, &:focus': (
-//                 color: tokens.$text-primary-default,
-//             ),
-//         ),
-//     ),
-// )
-// * $state-name: the state name, for example '&:hover, &:focus'
-// Example: -get-property-value('primary', 'color', 'default') will return tokens.$text-primary-default
-// Example: -get-property-value('primary', 'color', 'default', ( primary: ( color: tokens.$text-primary-inverted-default ) ) ) will return tokens.$text-primary-inverted-default
-@function -get-property-value($dictionary-value, $property-name, $property-value, $overrides: null, $state-name: null) {
-    @if $overrides and map.has-key($overrides, $dictionary-value) {
-        @if $state-name and map.has-key($overrides, $dictionary-value, states) {
-            @if map.has-key($overrides, $dictionary-value, states, $state-name) and
-                map.has-key($overrides, $dictionary-value, states, $state-name, $property-name)
-            {
-                @return map.get($overrides, $dictionary-value, states, $state-name, $property-name);
-            }
-        }
-
-        @if map.has-key($overrides, $dictionary-value, $property-name) {
-            @return map.get($overrides, $dictionary-value, $property-name);
-        }
-    }
-
-    @if meta.type-of($property-value) == 'string' {
-        $tokens: -get-color-dictionary-tokens($dictionary-value);
-
-        @if meta.type-of($tokens) == 'map' {
-            @return map.get($tokens, #{$dictionary-value}-#{$property-value});
-        }
-    } @else {
-        @return $property-value;
-    }
-}
+// @use './typography';
 
+// // Function to get the tokens map from the dictionary value name
+// // Example: -get-color-dictionary-tokens('primary') will return tokens.$action-colors
+// @function -get-color-dictionary-tokens($variant) {
+//     @if map.has-key(tokens.$action-colors, #{$variant}-default) {
+//         @return tokens.$action-colors;
+//     }
+//
+//     @if map.has-key(tokens.$emotion-colors, #{$variant}-default) {
+//         @return tokens.$emotion-colors;
+//     }
+//
+//     @if map.has-key(tokens.$text-colors, #{$variant}-default) {
+//         @return tokens.$text-colors;
+//     }
+//
+//     @error 'Invalid color dictionary value as there is no #{$variant}-default token either in action-colors, emotion-colors, or text-colors tokens';
+//
+//     @return null;
+// }
+//
+// // Function to get the property value
+// // Parameters are:
+// // * $dictionary-value: the dictionary value to get the property value from, for example 'primary'
+// // * $property-name: the property name to get the value from, for example 'color'
+// // * $property-value: the property value, for example 'default' or directly the token, for example tokens.$text-primary-default
+// // * $overrides: the overrides map, for example $overrides: (
+// //     primary: (
+// //         color: tokens.$text-primary-default, <-- this will override the default value of color for dictionary value 'primary'
+// //         states: ( <-- this will override the default value of color for dictionary value 'primary' when the button is hovered or focused
+// //             '&:hover, &:focus': (
+// //                 color: tokens.$text-primary-default,
+// //             ),
+// //         ),
+// //     ),
+// // )
+// // * $state-name: the state name, for example '&:hover, &:focus'
+// // Example: -get-property-value('primary', 'color', 'default') will return tokens.$text-primary-default
+// // Example: -get-property-value('primary', 'color', 'default', ( primary: ( color: tokens.$text-primary-inverted-default ) ) ) will return tokens.$text-primary-inverted-default
+// @function -get-property-value($dictionary-value, $property-name, $property-value, $overrides: null, $state-name: null) {
+//     @if $overrides and map.has-key($overrides, $dictionary-value) {
+//         @if $state-name and map.has-key($overrides, $dictionary-value, states) {
+//             @if map.has-key($overrides, $dictionary-value, states, $state-name) and
+//                 map.has-key($overrides, $dictionary-value, states, $state-name, $property-name)
+//             {
+//                 @return map.get($overrides, $dictionary-value, states, $state-name, $property-name);
+//             }
+//         }
+//
+//         @if map.has-key($overrides, $dictionary-value, $property-name) {
+//             @return map.get($overrides, $dictionary-value, $property-name);
+//         }
+//     }
+//
+//     @if meta.type-of($property-value) == 'string' {
+//         $tokens: -get-color-dictionary-tokens($dictionary-value);
+//
+//         @if meta.type-of($tokens) == 'map' {
+//             @return map.get($tokens, #{$dictionary-value}-#{$property-value});
+//         }
+//     } @else {
+//         @return $property-value;
+//     }
+// }
+//
 // Mixin to generate alignment classes based on a dictionary
 // Parameters are:
 // * $class-name: the name of the component class to generate
@@ -95,72 +99,73 @@
     }
 }
 
-// Mixin to generate color classes based on a dictionary
-// Parameters are:
-// * $class-name: the name of the component class to generate
-// * $dictionary-values: list of the dictionary values to generate
-// * $config: map of the properties to generate, their value could be either directly token variable or a string,
-//   in that case the token variable will be generated based on the dictionary value
-// * $states: map of the states to generate, first level key is the selector and then the structure is the same
-//   as in `config` parameter
-// * $overrides: this map is used to cover exceptions in color schemes, first level is the dictionary value,
-//   second level is the property name, second level can also have key `states` and then the structure is the
-//   same as in `states` parameter
-// * $custom-variable-name: custom CSS variable name – useful when $class-name is complex
-// * $child-selector: additional child selector
-// * $generate-data-attribute: whether to generate data attribute selectors (for JS usage)
-// See Button component for real usage
-@mixin generate-colors(
-    $class-name,
-    $dictionary-values,
-    $config,
-    $states: null,
-    $overrides: null,
-    $custom-variable-name: null,
-    $child-selector: null,
-    $generate-data-attribute: false
-) {
-    @each $dictionary-value in $dictionary-values {
-        $data-attribute-selector: if(
-            $generate-data-attribute,
-            '.#{$class-name}[data-spirit-color="#{$dictionary-value}"]#{$child-selector}',
-            null
-        );
-
-        .#{$class-name}--#{$dictionary-value}#{$child-selector},
-        #{$data-attribute-selector} {
-            @each $property-name, $property-value in $config {
-                $value: -get-property-value($dictionary-value, $property-name, $property-value, $overrides);
-                $prefix: if(
-                    $custom-variable-name,
-                    $custom-variable-name,
-                    spirit-string.convert-pascal-case-to-kebab-case($class-name)
-                );
-
-                --#{$prefix}-#{$property-name}: #{$value};
-
-                #{$property-name}: var(--#{$prefix}-#{$property-name});
-            }
-
-            @if $states {
-                @each $state-name, $state-properties in $states {
-                    #{$state-name} {
-                        @each $property-name, $property-value in $state-properties {
-                            #{$property-name}: -get-property-value(
-                                $dictionary-value,
-                                $property-name,
-                                $property-value,
-                                $overrides,
-                                $state-name
-                            );
-                        }
-                    }
-                }
-            }
-        }
-    }
-}
-
+//
+// // Mixin to generate color classes based on a dictionary
+// // Parameters are:
+// // * $class-name: the name of the component class to generate
+// // * $dictionary-values: list of the dictionary values to generate
+// // * $config: map of the properties to generate, their value could be either directly token variable or a string,
+// //   in that case the token variable will be generated based on the dictionary value
+// // * $states: map of the states to generate, first level key is the selector and then the structure is the same
+// //   as in `config` parameter
+// // * $overrides: this map is used to cover exceptions in color schemes, first level is the dictionary value,
+// //   second level is the property name, second level can also have key `states` and then the structure is the
+// //   same as in `states` parameter
+// // * $custom-variable-name: custom CSS variable name – useful when $class-name is complex
+// // * $child-selector: additional child selector
+// // * $generate-data-attribute: whether to generate data attribute selectors (for JS usage)
+// // See Button component for real usage
+// @mixin generate-colors(
+//     $class-name,
+//     $dictionary-values,
+//     $config,
+//     $states: null,
+//     $overrides: null,
+//     $custom-variable-name: null,
+//     $child-selector: null,
+//     $generate-data-attribute: false
+// ) {
+//     @each $dictionary-value in $dictionary-values {
+//         $data-attribute-selector: if(
+//             $generate-data-attribute,
+//             '.#{$class-name}[data-spirit-color="#{$dictionary-value}"]#{$child-selector}',
+//             null
+//         );
+//
+//         .#{$class-name}--#{$dictionary-value}#{$child-selector},
+//         #{$data-attribute-selector} {
+//             @each $property-name, $property-value in $config {
+//                 $value: -get-property-value($dictionary-value, $property-name, $property-value, $overrides);
+//                 $prefix: if(
+//                     $custom-variable-name,
+//                     $custom-variable-name,
+//                     spirit-string.convert-pascal-case-to-kebab-case($class-name)
+//                 );
+//
+//                 --#{$prefix}-#{$property-name}: #{$value};
+//
+//                 #{$property-name}: var(--#{$prefix}-#{$property-name});
+//             }
+//
+//             @if $states {
+//                 @each $state-name, $state-properties in $states {
+//                     #{$state-name} {
+//                         @each $property-name, $property-value in $state-properties {
+//                             #{$property-name}: -get-property-value(
+//                                 $dictionary-value,
+//                                 $property-name,
+//                                 $property-value,
+//                                 $overrides,
+//                                 $state-name
+//                             );
+//                         }
+//                     }
+//                 }
+//             }
+//         }
+//     }
+// }
+//
 // Mixin to reset button styling for individual link variants.
 // Parameters are:
 // * $dictionary-values: list of the dictionary values to generate
@@ -179,34 +184,35 @@
     }
 }
 
-// Mixin to generate link color classes based on a dictionary
-// Parameters are:
-// * $selector: the selector to generate
-// * $dictionary-values: list of the dictionary values to generate
-// * $tokens: map of the tokens to generate
-// * $print-values: list of the print values to generate
-@mixin generate-link-colors(
-    $selector,
-    $dictionary-values,
-    $tokens,
-    $print-values: (default, hover, active, disabled, visited)
-) {
-    @each $dictionary-value in $dictionary-values {
-        @each $print-value in $print-values {
-            $variant-class: '#{$dictionary-value}';
-
-            @if $print-value == 'disabled' {
-                $variant-class: '#{$dictionary-value}.link-#{$print-value}';
-            } @else if $print-value != 'default' {
-                $variant-class: '#{$dictionary-value}:#{$print-value}';
-            }
-            #{$selector}-#{unquote($variant-class)} {
-                color: map.get($tokens, link-#{$dictionary-value}-#{$print-value});
-            }
-        }
-    }
-}
-
+//
+// // Mixin to generate link color classes based on a dictionary
+// // Parameters are:
+// // * $selector: the selector to generate
+// // * $dictionary-values: list of the dictionary values to generate
+// // * $tokens: map of the tokens to generate
+// // * $print-values: list of the print values to generate
+// @mixin generate-link-colors(
+//     $selector,
+//     $dictionary-values,
+//     $tokens,
+//     $print-values: (default, hover, active, disabled, visited)
+// ) {
+//     @each $dictionary-value in $dictionary-values {
+//         @each $print-value in $print-values {
+//             $variant-class: '#{$dictionary-value}';
+//
+//             @if $print-value == 'disabled' {
+//                 $variant-class: '#{$dictionary-value}.link-#{$print-value}';
+//             } @else if $print-value != 'default' {
+//                 $variant-class: '#{$dictionary-value}:#{$print-value}';
+//             }
+//             #{$selector}-#{unquote($variant-class)} {
+//                 color: map.get($tokens, link-#{$dictionary-value}-#{$print-value});
+//             }
+//         }
+//     }
+// }
+//
 // Mixin to generate placement classes based on a dictionary
 // Parameters are:
 // * $class-name: the name of the component class to generate
@@ -233,28 +239,47 @@
     }
 }
 
+//
+// // Mixin to generate size classes based on a config
+// // Parameters are:
+// // * $class-name: the name of the component class to generate
+// // * $variables: map of the size variables to generate
+// // Size variables have to be padding-y and padding-x. Typography is optional.
+// @mixin generate-sizes($class-name, $variables) {
+//     @each $size, $variables in $variables {
+//         .#{$class-name}--#{$size} {
+//             @if map.has-key($variables, width) {
+//                 width: map.get($variables, width);
+//             }
+//
+//             @if map.has-key($variables, height) {
+//                 height: map.get($variables, height);
+//             }
+//
+//             @if map.has-key($variables, padding-y) and map.has-key($variables, padding-x) {
+//                 padding: map.get($variables, padding-y) map.get($variables, padding-x);
+//             }
+//
+//             @if map.has-key($variables, typography) {
+//                 @include typography.generate(map.get($variables, typography));
+//             }
+//         }
+//     }
+// }
+
 // Mixin to generate size classes based on a config
 // Parameters are:
 // * $class-name: the name of the component class to generate
-// * $variables: map of the size variables to generate
-// Size variables have to be padding-y and padding-x. Typography is optional.
-@mixin generate-sizes($class-name, $variables) {
-    @each $size, $variables in $variables {
+// * $sizes: map of the size variables to generate
+@mixin generate-sizes($class-name, $sizes) {
+    @each $size, $variables in $sizes {
         .#{$class-name}--#{$size} {
-            @if map.has-key($variables, width) {
-                width: map.get($variables, width);
-            }
-
-            @if map.has-key($variables, height) {
-                height: map.get($variables, height);
-            }
-
-            @if map.has-key($variables, padding-y) and map.has-key($variables, padding-x) {
-                padding: map.get($variables, padding-y) map.get($variables, padding-x);
-            }
+            $component-infix: spirit-string.convert-pascal-case-to-kebab-case(
+                spirit-string.remove-prefix($class-name, 'UNSTABLE_')
+            );
 
-            @if map.has-key($variables, typography) {
-                @include typography.generate(map.get($variables, typography));
+            @each $variable-key, $variable-value in $variables {
+                --#{globals.$prefix}#{$component-infix}-#{$variable-key}: #{$variable-value};
             }
         }
     }
diff --git a/packages/web/src/scss/tools/_string.scss b/packages/web/src/scss/tools/_string.scss
index cea6cd6da1..e938a7d362 100644
--- a/packages/web/src/scss/tools/_string.scss
+++ b/packages/web/src/scss/tools/_string.scss
@@ -60,3 +60,13 @@
 @function singularize($string) {
     @return string.slice($string, 1, string.length($string) - 1);
 }
+
+// Remove prefix from a string
+// Example: remove-prefix('UNSTABLE_Component', 'UNSTABLE_') will return 'Component'
+@function remove-prefix($string, $prefix) {
+    @if string.index($string, $prefix) == 1 {
+        @return string.slice($string, string.length($prefix) + 1);
+    }
+
+    @return $string;
+}
diff --git a/tests/e2e/demo-components-compare.spec.ts b/tests/e2e/demo-components-compare.spec.ts
index ccdfee32aa..97c6008211 100644
--- a/tests/e2e/demo-components-compare.spec.ts
+++ b/tests/e2e/demo-components-compare.spec.ts
@@ -38,7 +38,6 @@ const IGNORED_TESTS: string[] = [
   'UNSTABLE_ActionLayout',
   'UNSTABLE_Avatar',
   'UNSTABLE_EmptyState',
-  'UNSTABLE_PartnerLogo',
   'UNSTABLE_ProductLogo',
   'UNSTABLE_Section',
   'UNSTABLE_Slider',