diff --git a/packages/shared/components/badge/badge.stories.tsx b/packages/shared/components/badge/badge.stories.tsx
index 1511dae0c5..28203bafac 100644
--- a/packages/shared/components/badge/badge.stories.tsx
+++ b/packages/shared/components/badge/badge.stories.tsx
@@ -27,6 +27,7 @@
 import { Meta, StoryObj } from "@storybook/react";
 
 import { Badge } from "./Badge";
+import { globalColors } from "../../themes";
 
 const meta = {
   title: "Components/Badge",
@@ -83,7 +84,7 @@ export const HighBadge: Story = {
   args: {
     type: "high",
     label: "High",
-    backgroundColor: "#f2675a",
+    backgroundColor: globalColors.mainRed,
   },
   argTypes: {
     type: { control: "radio" },
diff --git a/packages/shared/components/campaigns-banner/campaign/CreateDocSpace.ts b/packages/shared/components/campaigns-banner/campaign/CreateDocSpace.ts
index 50dd27f89c..9466a048bf 100644
--- a/packages/shared/components/campaigns-banner/campaign/CreateDocSpace.ts
+++ b/packages/shared/components/campaigns-banner/campaign/CreateDocSpace.ts
@@ -24,6 +24,8 @@
 // content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0
 // International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
 
+import { globalColors } from "../../../themes";
+
 export const translates = {
   Header: "ONLYOFFICE for developers",
   SubHeader:
@@ -33,21 +35,21 @@ export const translates = {
 };
 
 export const config = {
-  borderColor: "#388BDE",
+  borderColor: globalColors.lightBlueMain,
   title: {
-    color: "#4781D1",
+    color: globalColors.lightBlueMain,
     fontSize: "12px",
     fontWeight: "600",
   },
   body: {
     fontSize: "13px",
     fontWeight: "600",
-    color: "#333",
+    color: globalColors.black,
   },
   action: {
     isButton: true,
-    color: "#fff",
-    backgroundColor: "#388BDE",
+    color: globalColors.white,
+    backgroundColor: globalColors.lightBlueMain,
     fontSize: "12px",
     fontWeight: "700",
     type: "open-url",
diff --git a/packages/shared/components/color-input/ColorInput.stories.tsx b/packages/shared/components/color-input/ColorInput.stories.tsx
index 48d85700f9..9d65e63bdf 100644
--- a/packages/shared/components/color-input/ColorInput.stories.tsx
+++ b/packages/shared/components/color-input/ColorInput.stories.tsx
@@ -32,6 +32,7 @@ import { Meta, StoryObj } from "@storybook/react";
 import { ColorInput } from "./ColorInput";
 import { ColorInputProps } from "./ColorInput.types";
 import { InputSize } from "../text-input/TextInput.enums";
+import { globalColors } from "../../themes";
 
 const ColorInputContainer = styled.div`
   height: 300px;
@@ -78,7 +79,7 @@ const Template = ({ ...args }: ColorInputProps) => {
 export const Default: Story = {
   render: (args) => <Template {...args} />,
   args: {
-    defaultColor: "#4781D1",
+    defaultColor: globalColors.lightBlueMain,
     handleChange: (color) => {
       console.log(color);
     },
diff --git a/packages/shared/components/color-picker/ColorPicker.stories.tsx b/packages/shared/components/color-picker/ColorPicker.stories.tsx
index 9c93a2d49e..563f4c632d 100644
--- a/packages/shared/components/color-picker/ColorPicker.stories.tsx
+++ b/packages/shared/components/color-picker/ColorPicker.stories.tsx
@@ -31,6 +31,7 @@ import { Meta, StoryObj } from "@storybook/react";
 
 import { ColorPicker } from "./ColorPicker";
 import { ColorPickerProps } from "./ColorPicker.types";
+import { globalColors } from "../../themes";
 
 const meta = {
   title: "Components/ColorPicker",
@@ -57,7 +58,7 @@ export const Default: Story = {
   render: (args) => <Template {...args} />,
   args: {
     isPickerOnly: false,
-    appliedColor: "#4781D1",
+    appliedColor: globalColors.lightBlueMain,
     onClose: () => console.log("close"),
     applyButtonLabel: "Apply",
     cancelButtonLabel: "Cancel",
diff --git a/packages/shared/components/combobox/combobox.stories.tsx b/packages/shared/components/combobox/combobox.stories.tsx
index aeaacef45c..7978897bbc 100644
--- a/packages/shared/components/combobox/combobox.stories.tsx
+++ b/packages/shared/components/combobox/combobox.stories.tsx
@@ -27,130 +27,22 @@
 import React from "react";
 import { Meta, StoryObj } from "@storybook/react";
 
-// import NavLogoIcon from "PUBLIC_DIR/images/nav.logo.opened.react.svg";
-// import CatalogEmployeeReactSvgUrl from "PUBLIC_DIR/images/catalog.employee.react.svg?url";
-// import CatalogGuestReactSvgUrl from "PUBLIC_DIR/images/catalog.guest.react.svg?url";
-// import CopyReactSvgUrl from "PUBLIC_DIR/images/copy.react.svg?url";
-
-// import { IconSizeType } from "../../utils";
-// import { DropDownItem } from "../drop-down-item";
 import { ComboBox } from "./ComboBox";
-// import RadioButton from "../radio-button";
-
-// import ComboBoxDocs from "./Combobox.docs.mdx";
 import { ComboboxProps } from "./Combobox.types";
+import { globalColors } from "../../themes";
 
 const meta = {
   title: "Components/ComboBox",
   component: ComboBox,
-  // tags: ["autodocs"],
-  parameters: {
-    docs: {
-      // page: ComboBoxDocs,
-    },
-  },
 } satisfies Meta<typeof ComboBox>;
 type Story = StoryObj<typeof ComboBox>;
 
 export default meta;
 
-// const comboOptions = [
-//   {
-//     key: 1,
-//     icon: CatalogEmployeeReactSvgUrl,
-//     label: "Option 1",
-//   },
-//   {
-//     key: 2,
-//     icon: CatalogGuestReactSvgUrl,
-//     label: "Option 2",
-//   },
-//   {
-//     key: 3,
-//     disabled: true,
-//     label: "Option 3",
-//   },
-//   {
-//     key: 4,
-//     label: "Option 4",
-//   },
-//   {
-//     key: 5,
-//     icon: CopyReactSvgUrl,
-//     label: "Option 5",
-//   },
-//   {
-//     key: 6,
-//     label: "Option 6",
-//   },
-//   {
-//     key: 7,
-//     label: "Option 7",
-//   },
-// ];
-
-// const childrenArr = [];
-
-// const advancedOptions = (
-//   <>
-//     <DropDownItem key="1" noHover>
-//       {/* <RadioButton value="asc" name="first" label="A-Z" isChecked /> */}
-//     </DropDownItem>
-//     <DropDownItem key="2" noHover>
-//       {/* <RadioButton value="desc" name="first" label="Z-A" /> */}
-//     </DropDownItem>
-//     <DropDownItem key="3" isSeparator />
-//     <DropDownItem key="4" noHover>
-//       {/* <RadioButton value="first" name="second" label="First name" /> */}
-//     </DropDownItem>
-//     <DropDownItem key="5" noHover>
-//       {/* <RadioButton
-//         value="last"
-//         name="second"
-//         label="Last name"
-//         isChecked
-//       /> */}
-//     </DropDownItem>
-//   </>
-// );
-
 const Wrapper = ({ children }: { children: React.ReactNode }) => {
   return <div style={{ height: "220px" }}>{children}</div>;
 };
 
-// const childrenItems = childrenArr.length > 0 ? childrenArr : null;
-
-// const BadgeTypeTemplate = (args: ComboboxProps) => (
-//   <Wrapper>
-//     <ComboBox
-//       {...args}
-//       fixedDirection
-//       isDefaultMode={false}
-//       options={[
-//         { key: 1, label: "Open", backgroundColor: "#4781D1", color: "#FFFFFF" },
-//         { key: 2, label: "Done", backgroundColor: "#444", color: "#FFFFFF" },
-//         {
-//           key: 3,
-//           label: "2nd turn",
-//           backgroundColor: "#FFFFFF",
-//           color: "#555F65",
-//           border: "#4781D1",
-//         },
-//         {
-//           key: 4,
-//           label: "3rd turn",
-//           backgroundColor: "#FFFFFF",
-//           color: "#555F65",
-//           border: "#4781D1",
-//         },
-//       ]}
-//       selectedOption={{
-//         key: 0,
-//         label: "Select",
-//       }}
-//     />
-//   </Wrapper>
-// );
 const Template = (args: ComboboxProps) => (
   <Wrapper>
     <ComboBox
@@ -170,70 +62,36 @@ const Template = (args: ComboboxProps) => (
   </Wrapper>
 );
 
-// const BaseOptionsTemplate = (args: ComboboxProps) => (
-//   <Wrapper>
-//     <ComboBox
-//       {...args}
-//       isDefaultMode={false}
-//       directionY="both"
-//       fixedDirection
-//       options={comboOptions}
-//       onSelect={(option: any) => args.onSelect(option)}
-//       selectedOption={{
-//         key: 0,
-//         label: "Select",
-//         default: true,
-//       }}
-//     >
-//       {childrenItems}
-//     </ComboBox>
-//   </Wrapper>
-// );
-
-// const AdvancedOptionsTemplate = (args: ComboboxProps) => {
-//   const { onSelect } = args;
-//   return (
-//     <Wrapper>
-//       <ComboBox
-//         {...args}
-//         isDefaultMode={false}
-//         fixedDirection
-//         directionY="both"
-//         options={[]}
-//         advancedOptions={advancedOptions}
-//         onSelect={(option?: TOption) => onSelect(option)}
-//         selectedOption={{
-//           key: 0,
-//           label: "Select",
-//           default: true,
-//         }}
-//       >
-//         <NavLogoIcon size={IconSizeType.medium} key="comboIcon" />
-//       </ComboBox>
-//     </Wrapper>
-//   );
-// };
-
 export const Default: Story = {
   render: (args) => <Template {...args} />,
   args: {
     scaled: false,
     options: [
-      { key: 1, label: "Open", backgroundColor: "#4781D1", color: "#FFFFFF" },
-      { key: 2, label: "Done", backgroundColor: "#444", color: "#FFFFFF" },
+      {
+        key: 1,
+        label: "Open",
+        backgroundColor: globalColors.lightBlueMain,
+        color: globalColors.white,
+      },
+      {
+        key: 2,
+        label: "Done",
+        backgroundColor: globalColors.black,
+        color: globalColors.white,
+      },
       {
         key: 3,
         label: "2nd turn",
-        backgroundColor: "#FFFFFF",
-        color: "#555F65",
-        border: "#4781D1",
+        backgroundColor: globalColors.white,
+        color: globalColors.grayText,
+        border: globalColors.lightBlueMain,
       },
       {
         key: 4,
         label: "3rd turn",
-        backgroundColor: "#FFFFFF",
-        color: "#555F65",
-        border: "#4781D1",
+        backgroundColor: globalColors.white,
+        color: globalColors.grayText,
+        border: globalColors.lightBlueMain,
       },
     ],
     selectedOption: {
@@ -243,54 +101,3 @@ export const Default: Story = {
     dropDownMaxHeight: 1500,
   },
 };
-
-// export const BaseOption: Story = {
-//   render: (args) => <BaseOptionsTemplate {...args} />,
-//   args: {
-//     options: [
-//       { key: 1, label: "Open", backgroundColor: "#4781D1", color: "#FFFFFF" },
-//       { key: 2, label: "Done", backgroundColor: "#444", color: "#FFFFFF" },
-//       {
-//         key: 3,
-//         label: "2nd turn",
-//         backgroundColor: "#FFFFFF",
-//         color: "#555F65",
-//         border: "#4781D1",
-//       },
-//       {
-//         key: 4,
-//         label: "3rd turn",
-//         backgroundColor: "#FFFFFF",
-//         color: "#555F65",
-//         border: "#4781D1",
-//       },
-//     ],
-//     selectedOption: {
-//       key: 0,
-//       label: "Select",
-//     },
-//     scaledOptions: false,
-//     scaled: false,
-//     noBorder: false,
-//     isDisabled: false,
-//   },
-// };
-
-// export const advancedOption = AdvancedOptionsTemplate.bind({});
-
-// advancedOption.args = {
-//   isDisabled: false,
-//   scaled: false,
-//   size: "content",
-//   directionX: "right",
-//   directionY: "bottom",
-// };
-
-// export const badgeType = BadgeTypeTemplate.bind({});
-
-// badgeType.args = {
-//   scaled: false,
-//   type: "badge",
-//   size: "content",
-//   scaledOptions: true,
-// };
diff --git a/packages/shared/components/drop-down-item/DropDownItem.tsx b/packages/shared/components/drop-down-item/DropDownItem.tsx
index 838af92eb9..956a532852 100644
--- a/packages/shared/components/drop-down-item/DropDownItem.tsx
+++ b/packages/shared/components/drop-down-item/DropDownItem.tsx
@@ -42,6 +42,7 @@ import {
   ElementWrapper,
 } from "./DropDownItem.styled";
 import { DropDownItemProps } from "./DropDownItem.types";
+import { globalColors } from "../../themes";
 
 const DropDownItem = (props: DropDownItemProps) => {
   const {
@@ -168,7 +169,7 @@ const DropDownItem = (props: DropDownItemProps) => {
             fontSize="9px"
             isHovered={false}
             borderRadius="50px"
-            backgroundColor="#533ED1"
+            backgroundColor={globalColors.mainPurple}
             label={t("Common:BetaLabel")}
           />
         </WrapperBadge>
diff --git a/packages/shared/components/grid/grid.stories.tsx b/packages/shared/components/grid/grid.stories.tsx
index 0c50dfff19..da72497ca3 100644
--- a/packages/shared/components/grid/grid.stories.tsx
+++ b/packages/shared/components/grid/grid.stories.tsx
@@ -32,6 +32,7 @@ import { Text } from "../text";
 
 import { Grid } from "./grid";
 import { GridProps } from "./Grid.types";
+import { globalColors } from "../../themes";
 
 const meta = {
   title: "Components/Grid",
@@ -65,162 +66,22 @@ const boxProps = {
 const Template = (args: GridProps) => {
   return (
     <Grid {...args} {...gridProps}>
-      <Box {...boxProps} backgroundProp="#F4991A">
-        <Text color="#000">200px</Text>
+      <Box {...boxProps} backgroundProp={globalColors.secondOrange}>
+        <Text color={globalColors.darkBlack}>200px</Text>
       </Box>
-      <Box {...boxProps} backgroundProp="#F2EAD3">
-        <Text color="#000">minmax(100px,1fr)</Text>
+      <Box {...boxProps} backgroundProp={globalColors.lightToastAlert}>
+        <Text color={globalColors.darkBlack}>minmax(100px,1fr)</Text>
       </Box>
-      <Box {...boxProps} backgroundProp="#F9F5F0">
-        <Text color="#000">auto</Text>
+      <Box {...boxProps} backgroundProp={globalColors.grayLight}>
+        <Text color={globalColors.darkBlack}>auto</Text>
       </Box>
     </Grid>
   );
 };
 
-// const TemplateColumns = (args: GridProps) => {
-//   return (
-//     <>
-//       <Grid
-//         {...args}
-//         {...gridProps}
-//         columnsProp={["200px", "100px", "1fr", "auto"]}
-//       >
-//         <Box {...boxProps} backgroundProp="#F4991A">
-//           <Text color="#000">200px</Text>
-//         </Box>
-//         <Box {...boxProps} backgroundProp="#F2EAD3">
-//           <Text color="#000">minmax(100px,1fr)</Text>
-//         </Box>
-//         <Box {...boxProps} backgroundProp="#F9F5F0">
-//           <Text color="#000">auto</Text>
-//         </Box>
-//       </Grid>
-
-//       <Grid {...args} {...gridProps} columnsProp="25%">
-//         <Box {...boxProps} backgroundProp="#F4991A">
-//           <Text color="#000">25%</Text>
-//         </Box>
-//         <Box {...boxProps} backgroundProp="#F2EAD3">
-//           <Text color="#000">25%</Text>
-//         </Box>
-//         <Box {...boxProps} backgroundProp="#F9F5F0">
-//           <Text color="#000">25%</Text>
-//         </Box>
-//       </Grid>
-
-//       <Grid
-//         {...args}
-//         {...gridProps}
-//         columnsProp={[{ count: 3, size: "100px" }]}
-//       >
-//         <Box {...boxProps} backgroundProp="#F4991A">
-//           <Text color="#000">100px</Text>
-//         </Box>
-//         <Box {...boxProps} backgroundProp="#F2EAD3">
-//           <Text color="#000">100px</Text>
-//         </Box>
-//         <Box {...boxProps} backgroundProp="#F9F5F0">
-//           <Text color="#000">100px</Text>
-//         </Box>
-//       </Grid>
-
-//       <Grid
-//         {...args}
-//         {...gridProps}
-//         columnsProp={{ count: 3, size: ["100px", "1fr"] }}
-//       >
-//         <Box {...boxProps} backgroundProp="#F4991A">
-//           <Text color="#000">minmax(100px,1fr)</Text>
-//         </Box>
-//         <Box {...boxProps} backgroundProp="#F2EAD3">
-//           <Text color="#000">minmax(100px,1fr)</Text>
-//         </Box>
-//         <Box {...boxProps} backgroundProp="#F9F5F0">
-//           <Text color="#000">minmax(100px,1fr)</Text>
-//         </Box>
-//       </Grid>
-//     </>
-//   );
-// };
-
-// const TemplateRows = (args: any) => {
-//   return (
-//     <>
-//       <Grid
-//         {...args}
-//         {...gridProps}
-//         rowsProp={["100px", ["100px", "1fr"], "auto"]}
-//       >
-//         <Box {...boxProps} backgroundProp="#F4991A">
-//           <Text color="#000">100px</Text>
-//         </Box>
-//         <Box {...boxProps} backgroundProp="#F2EAD3">
-//           <Text color="#000">minmax(100px,1fr)</Text>
-//         </Box>
-//         <Box {...boxProps} backgroundProp="#F9F5F0">
-//           <Text color="#000">auto</Text>
-//         </Box>
-//       </Grid>
-
-//       <Grid {...args} {...gridProps} rowsProp="50px">
-//         <Box {...boxProps} backgroundProp="#F4991A">
-//           <Text color="#000">50px</Text>
-//         </Box>
-//         <Box {...boxProps} backgroundProp="#F2EAD3">
-//           <Text color="#000">50px</Text>
-//         </Box>
-//         <Box {...boxProps} backgroundProp="#F9F5F0">
-//           <Text color="#000">50px</Text>
-//         </Box>
-//       </Grid>
-//     </>
-//   );
-// };
-
-// const TemplateLayout = (args: any) => {
-//   return (
-//     <Grid
-//       {...args}
-//       widthProp="100vw"
-//       heightProp="100vh"
-//       gridGap="10px"
-//       rowsProp={["auto", "1fr", "auto"]}
-//       columnsProp={[["100px", "1fr"], "3fr", ["100px", "1fr"]]}
-//       areasProp={[
-//         { name: "header", start: [0, 0], end: [2, 0] },
-//         { name: "navbar", start: [0, 1], end: [0, 1] },
-//         { name: "main", start: [1, 1], end: [1, 1] },
-//         { name: "sidebar", start: [2, 1], end: [2, 1] },
-//         { name: "footer", start: [0, 2], end: [2, 2] },
-//       ]}
-//     >
-//       <Box {...boxProps} gridArea="header" backgroundProp="#F4991A">
-//         <Text color="#000">header</Text>
-//       </Box>
-//       <Box {...boxProps} gridArea="navbar" backgroundProp="#F2EAD3">
-//         <Text color="#000">navbar</Text>
-//       </Box>
-//       <Box {...boxProps} gridArea="main" backgroundProp="#F9F5F0">
-//         <Text color="#000">main</Text>
-//       </Box>
-//       <Box {...boxProps} gridArea="sidebar" backgroundProp="#F2EAD3">
-//         <Text color="#000">sidebar</Text>
-//       </Box>
-//       <Box {...boxProps} gridArea="footer" backgroundProp="#F4991A">
-//         <Text color="#000">footer</Text>
-//       </Box>
-//     </Grid>
-//   );
-// };
-
 export const Default: Story = {
   render: (args) => <Template {...args} />,
   args: {
     columnsProp: ["200px", "100px", "1fr", "auto"],
   },
 };
-
-// export const Columns = TemplateColumns.bind({});
-// export const Rows = TemplateRows.bind({});
-// export const Layout = TemplateLayout.bind({});
diff --git a/packages/shared/components/info-badge/InfoBadge.tsx b/packages/shared/components/info-badge/InfoBadge.tsx
index 5cc9650135..0b9ad57bd0 100644
--- a/packages/shared/components/info-badge/InfoBadge.tsx
+++ b/packages/shared/components/info-badge/InfoBadge.tsx
@@ -40,6 +40,7 @@ import {
   StyledToolTip,
 } from "./InfoBadge.styled";
 import type InfoBadgeProps from "./InfoBadge.types";
+import { globalColors } from "../../themes";
 
 export const InfoBadge: FC<InfoBadgeProps> = ({
   label,
@@ -65,7 +66,7 @@ export const InfoBadge: FC<InfoBadgeProps> = ({
         borderRadius="50px"
         label={label}
         data-tooltip-id={id}
-        backgroundColor="#533ED1"
+        backgroundColor={globalColors.mainPurple}
       />
 
       <StyledToolTip
diff --git a/packages/shared/components/label/Label.tsx b/packages/shared/components/label/Label.tsx
index 11406523c9..fff2028229 100644
--- a/packages/shared/components/label/Label.tsx
+++ b/packages/shared/components/label/Label.tsx
@@ -29,6 +29,7 @@ import React from "react";
 import { Text } from "../text";
 
 import { LabelProps } from "./Label.types";
+import { globalColors } from "../../themes";
 
 const Label = (props: LabelProps) => {
   const {
@@ -45,7 +46,7 @@ const Label = (props: LabelProps) => {
     style,
     children,
   } = props;
-  const errorProp = error ? { color: "#c30" } : {};
+  const errorProp = error ? { color: globalColors.lightErrorStatus } : {};
 
   return (
     <Text
@@ -62,7 +63,10 @@ const Label = (props: LabelProps) => {
       className={className}
       data-testid="label"
     >
-      {text} {isRequired && <span style={{ color: "#c30" }}> *</span>}{" "}
+      {text}{" "}
+      {isRequired && (
+        <span style={{ color: globalColors.lightErrorStatus }}> *</span>
+      )}{" "}
       {children}
     </Text>
   );