diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7bd68e5e0b..d38491402d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -17,6 +17,9 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ## [Unreleased]
 
+### BREAKING CHANGES
+- `type` prop is replaced with `color` in `Divider` component @layershifter ([#558](https://github.com/stardust-ui/react/pull/558))
+
 ### Fixes
 - Fix `Provider` is not executing staticStyles with the merged siteVariables @mnajdova ([#559](https://github.com/stardust-ui/react/pull/559))
 
diff --git a/docs/src/examples/components/Chat/Types/ChatExample.shorthand.tsx b/docs/src/examples/components/Chat/Types/ChatExample.shorthand.tsx
index e7e9e64430..7204a22562 100644
--- a/docs/src/examples/components/Chat/Types/ChatExample.shorthand.tsx
+++ b/docs/src/examples/components/Chat/Types/ChatExample.shorthand.tsx
@@ -47,7 +47,7 @@ const items = [
     key: 'message-id-4',
   },
   {
-    content: <Divider content="Today" type="primary" important />,
+    content: <Divider content="Today" color="primary" important />,
     key: 'message-id-5',
   },
   {
diff --git a/docs/src/examples/components/Chat/Types/ChatExample.tsx b/docs/src/examples/components/Chat/Types/ChatExample.tsx
index 2ffaf98d08..2e1d220815 100644
--- a/docs/src/examples/components/Chat/Types/ChatExample.tsx
+++ b/docs/src/examples/components/Chat/Types/ChatExample.tsx
@@ -36,7 +36,7 @@ const ChatExample = () => (
       />
     </Chat.Item>
     <Chat.Item>
-      <Divider content="Today" type="primary" important />
+      <Divider content="Today" color="primary" important />
     </Chat.Item>
     <Chat.Item>
       <Chat.Message
diff --git a/docs/src/examples/components/Divider/Types/DividerExamplePrimary.shorthand.tsx b/docs/src/examples/components/Divider/Types/DividerExamplePrimary.shorthand.tsx
deleted file mode 100644
index 494f36a503..0000000000
--- a/docs/src/examples/components/Divider/Types/DividerExamplePrimary.shorthand.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import React from 'react'
-import { Divider } from '@stardust-ui/react'
-
-const DividerExamplePrimary = () => <Divider type="primary" content="Primary Divider" />
-
-export default DividerExamplePrimary
diff --git a/docs/src/examples/components/Divider/Types/DividerExamplePrimary.tsx b/docs/src/examples/components/Divider/Types/DividerExamplePrimary.tsx
deleted file mode 100644
index 66121b6ad2..0000000000
--- a/docs/src/examples/components/Divider/Types/DividerExamplePrimary.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import React from 'react'
-import { Divider } from '@stardust-ui/react'
-
-const DividerExamplePrimary = () => <Divider type="primary">Primary Divider</Divider>
-
-export default DividerExamplePrimary
diff --git a/docs/src/examples/components/Divider/Types/DividerExampleSecondary.shorthand.tsx b/docs/src/examples/components/Divider/Types/DividerExampleSecondary.shorthand.tsx
deleted file mode 100644
index 19c7d53821..0000000000
--- a/docs/src/examples/components/Divider/Types/DividerExampleSecondary.shorthand.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import React from 'react'
-import { Divider } from '@stardust-ui/react'
-
-const DividerExampleSecondary = () => <Divider type="secondary" content="Secondary Divider" />
-
-export default DividerExampleSecondary
diff --git a/docs/src/examples/components/Divider/Types/DividerExampleSecondary.tsx b/docs/src/examples/components/Divider/Types/DividerExampleSecondary.tsx
deleted file mode 100644
index 98e37702ce..0000000000
--- a/docs/src/examples/components/Divider/Types/DividerExampleSecondary.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import React from 'react'
-import { Divider } from '@stardust-ui/react'
-
-const DividerExampleSecondary = () => <Divider type="secondary">Secondary Divider</Divider>
-
-export default DividerExampleSecondary
diff --git a/docs/src/examples/components/Divider/Types/index.tsx b/docs/src/examples/components/Divider/Types/index.tsx
index cb3a22f454..9118a8ba02 100644
--- a/docs/src/examples/components/Divider/Types/index.tsx
+++ b/docs/src/examples/components/Divider/Types/index.tsx
@@ -14,16 +14,6 @@ const Types = () => (
       description="A Divider can contain text or other content displayed alongside with the line."
       examplePath="components/Divider/Types/DividerExampleContent"
     />
-    <ComponentExample
-      title="Primary divider"
-      description="A primary Divider catches the user's attention."
-      examplePath="components/Divider/Types/DividerExamplePrimary"
-    />
-    <ComponentExample
-      title="Secondary divider"
-      description="A secondary Divider is more subtle and less noticeable."
-      examplePath="components/Divider/Types/DividerExampleSecondary"
-    />
   </ExampleSection>
 )
 
diff --git a/docs/src/prototypes/chatPane/services/messageFactoryMock.tsx b/docs/src/prototypes/chatPane/services/messageFactoryMock.tsx
index e9b0c5cf19..20a7b5b244 100644
--- a/docs/src/prototypes/chatPane/services/messageFactoryMock.tsx
+++ b/docs/src/prototypes/chatPane/services/messageFactoryMock.tsx
@@ -122,8 +122,8 @@ function createMessageContentWithAttachments(content: string, messageId: string)
 }
 
 function generateDividerProps(props: DividerProps): Divider {
-  const { content, important, type = 'secondary' } = props
-  const dividerProps: Divider = { itemType: ChatItemTypes.divider, content, important, type }
+  const { content, important, color = 'secondary' } = props
+  const dividerProps: Divider = { itemType: ChatItemTypes.divider, content, important, color }
 
   return dividerProps
 }
@@ -158,7 +158,7 @@ export function generateChatProps(chat: ChatData): ChatItemContentProps[] {
     chatProps.splice(
       myLastMsgIndex + 1,
       0,
-      generateDividerProps({ content: 'Last read', type: 'primary', important: true }),
+      generateDividerProps({ content: 'Last read', color: 'primary', important: true }),
     )
   }
 
diff --git a/docs/src/views/Theming.tsx b/docs/src/views/Theming.tsx
index f98fb042f6..e120debb4a 100644
--- a/docs/src/views/Theming.tsx
+++ b/docs/src/views/Theming.tsx
@@ -39,10 +39,7 @@ export default () => (
     <ExampleSnippet
       render={() => (
         <Provider theme={{ siteVariables: { brand: 'hotpink' } }}>
-          <div>
-            <Button primary>Branding</Button>
-            <Divider type="primary">Branding</Divider>
-          </div>
+          <Button primary>Branding</Button>
         </Provider>
       )}
     />
diff --git a/docs/src/views/ThemingExamples.tsx b/docs/src/views/ThemingExamples.tsx
index 000427b1ee..cb10eaac31 100644
--- a/docs/src/views/ThemingExamples.tsx
+++ b/docs/src/views/ThemingExamples.tsx
@@ -44,7 +44,7 @@ export default () => (
     <ExampleSnippet
       value={`
         import React from 'react'
-        import { Button, Divider, Icon, Label, Provider } from '@stardust-ui/react'
+        import { Button, Icon, Label, Provider } from '@stardust-ui/react'
 
         export default () =>
          <Provider>
@@ -54,9 +54,6 @@ export default () => (
             <Button icon="at" content="Send email" secondary />
             <Icon name="chess rook" size="big" />
             <Label content="Label with icon" icon="close" />
-            <br/><br/>
-            <Divider content="Primary Divider" type="primary" />
-            <Divider content="Secondary Divider" type="secondary" />
           </>
          </Provider>
       `}
@@ -67,10 +64,6 @@ export default () => (
           <Button icon="at" content="Send email" secondary />
           <Icon name="chess rook" size="big" />
           <Label content="Label with icon" icon="close" />
-          <br />
-          <br />
-          <Divider content="Primary Divider" type="primary" />
-          <Divider content="Secondary Divider" type="secondary" />
         </>
       )}
     />
@@ -90,20 +83,21 @@ export default () => (
         import { Button } from '@stardust-ui/react'
 
         const styles = {
-                color: "coral",
-                backgroundColor: "coral",
-                fontSize: "14px",
-                padding: "0 10px",
-              }
+          color: "coral",
+          backgroundColor: "coral",
+          fontSize: "14px",
+          padding: "0 10px",
+        }
         const btnExample = () =>
-            <Button
-              content="Send email"
-              icon={{
-                name: "at",
-                styles: { color: "brown" },
-              }}
-              secondary
-              styles={styles} />
+          <Button
+            content="Send email"
+            icon={{
+              name: "at",
+              styles: { color: "brown" },
+            }}
+            secondary
+            styles={styles}
+          />
 
         export default btnExample
       `}
@@ -187,7 +181,7 @@ export default () => (
     <ExampleSnippet
       value={`
         import React from 'react'
-        import { Button, Divider, Icon, Label, Provider } from '@stardust-ui/react'
+        import { Button, Icon, Label, Provider } from '@stardust-ui/react'
 
         const theme = {
           siteVariables: {
@@ -226,9 +220,6 @@ export default () => (
               <Button icon="at" content="Send email" secondary />
               <Icon name="chess rook" size="big" />
               <Label content="Label with icon" icon="close" />
-              <br /><br />
-              <Divider type="primary">Branding primary</Divider>
-              <Divider type="secondary">Branding secondary</Divider>
             </div>
           </Provider>
         )
@@ -273,10 +264,6 @@ export default () => (
               <Button icon="at" content="Send email" secondary />
               <Icon name="chess rook" size="big" />
               <Label content="Label with icon" icon="close" />
-              <br />
-              <br />
-              <Divider content="Primary Divider" type="primary" />
-              <Divider content="Secondary Divider" type="secondary" />
             </div>
           </Provider>
         </div>
@@ -294,7 +281,6 @@ export default () => (
           /* Default theming */
           <Header as="h3" content="Default" />
           <Button primary>Branding</Button>
-          <Divider type="primary">Branding</Divider>
 
           /* First nested theming */
           <Provider
@@ -310,9 +296,6 @@ export default () => (
               <Button icon="at" content="Send email" secondary />
               <Icon name="chess rook" size="big" />
               <Label content="Label with icon" icon="close" />
-              <br/><br/>
-              <Divider content="Primary Divider" type="primary" />
-              <Divider content="Secondary Divider" type="secondary" />
 
               /* Second nested theming */
               <Provider
@@ -332,9 +315,6 @@ export default () => (
                   <Button icon="at" content="Send email" secondary />
                   <Icon name="chess rook" size="big" />
                   <Label content="Label with icon" icon="close" />
-                  <br/><br/>
-                  <Divider content="Primary Divider" type="primary" />
-                  <Divider content="Secondary Divider" type="secondary" />
                 </div>
               </Provider>
             </div>
@@ -349,10 +329,6 @@ export default () => (
           <Button icon="at" content="Send email" secondary />
           <Icon name="chess rook" size="big" />
           <Label content="Label with icon" icon="close" />
-          <br />
-          <br />
-          <Divider content="Primary Divider" type="primary" />
-          <Divider content="Secondary Divider" type="secondary" />
 
           <Provider
             theme={{
@@ -367,10 +343,6 @@ export default () => (
               <Button icon="at" content="Send email" secondary />
               <Icon name="chess rook" size="big" />
               <Label content="Label with icon" icon="close" />
-              <br />
-              <br />
-              <Divider content="Primary Divider" type="primary" />
-              <Divider content="Secondary Divider" type="secondary" />
 
               <Provider
                 theme={{
@@ -389,10 +361,6 @@ export default () => (
                   <Button icon="at" content="Send email" secondary />
                   <Icon name="chess rook" size="big" />
                   <Label content="Label with icon" icon="close" />
-                  <br />
-                  <br />
-                  <Divider content="Primary Divider" type="primary" />
-                  <Divider content="Secondary Divider" type="secondary" />
                 </>
               </Provider>
             </>
diff --git a/src/components/Divider/Divider.tsx b/src/components/Divider/Divider.tsx
index a08eb5c961..d730f46f23 100644
--- a/src/components/Divider/Divider.tsx
+++ b/src/components/Divider/Divider.tsx
@@ -24,9 +24,6 @@ export interface DividerProps
   /** Size multiplier (default 0) * */
   size?: number
 
-  /** A Divider can be formatted to show different levels of emphasis. */
-  type?: 'primary' | 'secondary'
-
   /** A divider can appear more important and draw the user's attention. */
   important?: boolean
 }
@@ -45,7 +42,6 @@ class Divider extends UIComponent<Extendable<DividerProps>, any> {
     ...commonPropTypes.createCommon({ color: true }),
     fitted: PropTypes.bool,
     size: PropTypes.number,
-    type: PropTypes.oneOf(['primary', 'secondary']),
     important: PropTypes.bool,
   }
 
diff --git a/src/themes/teams-dark/components/Divider/dividerVariables.ts b/src/themes/teams-dark/components/Divider/dividerVariables.ts
index 6178d5f597..12e49bb143 100644
--- a/src/themes/teams-dark/components/Divider/dividerVariables.ts
+++ b/src/themes/teams-dark/components/Divider/dividerVariables.ts
@@ -2,6 +2,8 @@ import { DividerVariables } from '../../../teams/components/Divider/dividerVaria
 import { Partial } from 'types/utils'
 
 export default (siteVars: any): Partial<DividerVariables> => ({
-  primaryColor: siteVars.brand06,
+  colors: {
+    primary: siteVars.brand06,
+  },
   textColor: siteVars.gray02,
 })
diff --git a/src/themes/teams-high-contrast/components/Divider/dividerVariables.ts b/src/themes/teams-high-contrast/components/Divider/dividerVariables.ts
index 193a92452d..7d3217de75 100644
--- a/src/themes/teams-high-contrast/components/Divider/dividerVariables.ts
+++ b/src/themes/teams-high-contrast/components/Divider/dividerVariables.ts
@@ -2,7 +2,9 @@ import { DividerVariables } from '../../../teams/components/Divider/dividerVaria
 import { Partial } from 'types/utils'
 
 export default (siteVars: any): Partial<DividerVariables> => ({
+  colors: {
+    primary: siteVars.white,
+  },
   dividerColor: siteVars.white,
   textColor: siteVars.white,
-  primaryColor: siteVars.white,
 })
diff --git a/src/themes/teams/components/Divider/dividerStyles.ts b/src/themes/teams/components/Divider/dividerStyles.ts
index 53e266927e..f6689f2ae2 100644
--- a/src/themes/teams/components/Divider/dividerStyles.ts
+++ b/src/themes/teams/components/Divider/dividerStyles.ts
@@ -14,10 +14,7 @@ const beforeAndAfter = (color, size, type, variables): ICSSPseudoElementStyle =>
   flex: 1,
   ...dividerBorderStyle(size, variables.dividerColor),
   ...(color && {
-    ...dividerBorderStyle(size, _.get(variables.colors, [color, 500])),
-  }),
-  ...(type === 'primary' && {
-    ...dividerBorderStyle(size, variables.primaryColor),
+    ...dividerBorderStyle(size, _.get(variables.colors, color)),
   }),
 })
 
@@ -33,10 +30,7 @@ const dividerStyles: ComponentSlotStylesInput<DividerPropsWithDefaults, any> = {
         paddingBottom: variables.dividerPadding,
       }),
       ...(color && {
-        color: _.get(variables.colors, [color, 500]),
-      }),
-      ...(type === 'primary' && {
-        color: variables.primaryColor,
+        color: _.get(variables.colors, color),
       }),
       ...(important && {
         fontWeight: variables.importantFontWeight,
diff --git a/src/themes/teams/components/Divider/dividerVariables.ts b/src/themes/teams/components/Divider/dividerVariables.ts
index e6831123d0..8815f779ed 100644
--- a/src/themes/teams/components/Divider/dividerVariables.ts
+++ b/src/themes/teams/components/Divider/dividerVariables.ts
@@ -1,25 +1,27 @@
+import * as _ from 'lodash'
+
 import { EmphasisColors, NaturalColors } from '../../../types'
 import { pxToRem } from '../../../../lib'
 
 export interface DividerVariables {
-  colors: EmphasisColors & NaturalColors
+  colors: Record<keyof (EmphasisColors & NaturalColors), string>
   dividerColor: string
   textColor: string
   textFontSize: string
   textLineHeight: string
-  primaryColor: string
   importantFontWeight: string
   dividerPadding: string
 }
 
 export default (siteVars: any): DividerVariables => {
+  const colorVariant = '500'
+
   return {
-    colors: { ...siteVars.emphasisColors, ...siteVars.naturalColors },
+    colors: _.mapValues({ ...siteVars.emphasisColors, ...siteVars.naturalColors }, colorVariant),
     dividerColor: siteVars.gray09,
     textColor: siteVars.gray03,
     textFontSize: siteVars.fontSizeSmall,
     textLineHeight: siteVars.lineHeightSmall,
-    primaryColor: siteVars.brand,
     importantFontWeight: siteVars.fontWeightBold,
     dividerPadding: pxToRem(4),
   }