diff --git a/examples/stories/src/tutorial/design/tokens/colors.mdx b/examples/stories/src/tutorial/design/tokens/colors.mdx
index b867632f1..c8974fee1 100644
--- a/examples/stories/src/tutorial/design/tokens/colors.mdx
+++ b/examples/stories/src/tutorial/design/tokens/colors.mdx
@@ -53,13 +53,13 @@ import {
 
 Colors are one of the main [design tokens](/tutorial/design-tokens/intro) elements, and `component-controls` provides multiple components to document your colors and color palettes.
 
-The color can be a hex, rgb, or hsl string value.
+The color can be a HEX, RGB, or HSL string value.
 
 ## AltaColor
 
 The [AltaColor](/api/design-tokens-colors-altacolor--overview) component displays the color name and value in a compact block.
 
-Design inspired from Oracle's [Alta UI](https://www.oracle.com/webfolder/ux/middleware/alta_web_icon_guide/Alta-Colors/UI-Palette.html).
+Design inspired by Oracle's [Alta UI](https://www.oracle.com/webfolder/ux/middleware/alta_web_icon_guide/Alta-Colors/UI-Palette.html).
 
 ```
 import { AltaColorPalette } from '@component-controls/design-tokens';
@@ -91,7 +91,7 @@ import { AltaColorPalette } from '@component-controls/design-tokens';
 
 The [AntdHorzColor](/api/design-tokens-colors-antdhorzcolorpalette--overview) component displays a horizontal color block, with the color value visible on hover.
 
-Design inspired from [Antd](https://ant.design/docs/spec/colors).
+Design inspired by [Antd](https://ant.design/docs/spec/colors).
 
 ```
 import { AntdHorzColorPalette } from '@component-controls/design-tokens';
@@ -127,7 +127,7 @@ import { AntdHorzColorPalette } from '@component-controls/design-tokens';
 
 The [AntdVertColor](/api/design-tokens-colors-antdvertcolor--overview) component displays a horizontal color block, with the color value visible on hover.
 
-Design inspired from [Antd](https://ant.design/docs/spec/colors).
+Design inspired by [Antd](https://ant.design/docs/spec/colors).
 
 ```
 import { AntdVertColorPalette } from '@component-controls/design-tokens';
@@ -166,9 +166,9 @@ import { AntdVertColorPalette } from '@component-controls/design-tokens';
 
 ## AnvilColor
 
-The [AnvilColor](/api/design-tokens-colors-anvilcolor--overview) component displays a color block with a dot suggesting the best text color and a block of text with the color title, name and value.
+The [AnvilColor](/api/design-tokens-colors-anvilcolor--overview) component displays a color block with a dot suggesting the best text color and a block of text with the color title, name, and value.
 
-Design inspired from [Anvil](https://anvil.servicetitan.com/foundations/color/).
+Design inspired by [Anvil](https://anvil.servicetitan.com/foundations/color/).
 
 ```
 import { AnvilColorPalette } from '@component-controls/design-tokens';
@@ -199,7 +199,7 @@ import { AnvilColorPalette } from '@component-controls/design-tokens';
 
 The [AtlassianColor](/api/design-tokens-colors-atlassiancolor--overview) component displays a color block with [AA](https://www.w3.org/TR/WCAG/) color contrast tests.
 
-Design inspired from [Atlassian Design System](https://atlassian.design/foundations/color).
+Design inspired by [Atlassian Design System](https://atlassian.design/foundations/color).
 
 ```
 import { AtlassianColorPalette } from '@component-controls/design-tokens';
@@ -229,9 +229,9 @@ import { AtlassianColorPalette } from '@component-controls/design-tokens';
 
 ## AudiDSColor
 
-The [AudiDSColor](/api/design-tokens-colors-audidscolor--overview) component displays a color block and color aliases for various standard is Pantone, CMYK.
+The [AudiDSColor](/api/design-tokens-colors-audidscolor--overview) component displays a color block and the values for RGB, RML, CMYK and Pantone.
 
-Design inspired from [Audi Design System](https://www.audi.com/ci/en/intro/basics/colours.html).
+Design inspired by [Audi Design System](https://www.audi.com/ci/en/intro/basics/colours.html).
 
 ```
 import { AudiDSColorPalette } from '@component-controls/design-tokens';
@@ -261,9 +261,9 @@ import { AudiDSColorPalette } from '@component-controls/design-tokens';
 
 ## BackpackColor
 
-The [BackpackColor](/api/design-tokens-colors-backpackcolor--overview) component displays a color block and color aliases for various standard is Pantone, CMYK. If specified, will display the dark color as a bottom-right side triangle.
+The [BackpackColor](/api/design-tokens-colors-backpackcolor--overview) component displays a color block and the values for RGB, CMYK and Pantone. If specified, will display the dark color as a bottom-right side triangle.
 
-Design inspired from [Backpack](https://backpack.github.io/guidelines/colors).
+Design inspired by [Backpack](https://backpack.github.io/guidelines/colors).
 
 ```
 import { BackpackColorPalette } from '@component-controls/design-tokens';
@@ -295,7 +295,7 @@ import { BackpackColorPalette } from '@component-controls/design-tokens';
 
 The [BaseWebColor](/api/design-tokens-colors-basewebcolor--overview) component displays a color block as a row, with color, name and hex value.
 
-Design inspired from [BaseWeb](https://baseweb.design/components/tokens/).
+Design inspired by [BaseWeb](https://baseweb.design/components/tokens/).
 
 ```
 import { BaseWebColorPalette } from '@component-controls/design-tokens';
@@ -331,7 +331,7 @@ import { BaseWebColorPalette } from '@component-controls/design-tokens';
 
 The [BeelineColor](/api/design-tokens-colors-beelinecolor--overview) component displays a color block with values for rgb and Pantone colors.
 
-Design inspired from [Beeline Design System](http://beelinedesignsystem.com/color-palette/).
+Design inspired by [Beeline Design System](http://beelinedesignsystem.com/color-palette/).
 
 ```
 import { BeelineColorPalette } from '@component-controls/design-tokens';
@@ -365,7 +365,7 @@ import { BeelineColorPalette } from '@component-controls/design-tokens';
 
 The [BoltColor](/api/design-tokens-colors-boltcolor--overview) component displays the color as a block with [AA](https://www.w3.org/TR/WCAG/) color contrast tests.
 
-Design inspired from [Bolt](https://boltdesignsystem.com/pattern-lab/?p=visual-styles-color-system).
+Design inspired by [Bolt](https://boltdesignsystem.com/pattern-lab/?p=visual-styles-color-system).
 
 ```
 import { BoltColorPalette } from '@component-controls/design-tokens';
@@ -407,7 +407,7 @@ import { BoltColorPalette } from '@component-controls/design-tokens';
 
 The [CanvasColor](/api/design-tokens-colors-canvascolor--overview) component displays the color  as a row, with color, name, sass variable name and hex value.
 
-Design inspired from [Canvas Design System](https://canvas.hubspot.com/styles/colors).
+Design inspired by [Canvas Design System](https://canvas.hubspot.com/styles/colors).
 
 ```
 import { CanvasColorPalette } from '@component-controls/design-tokens';
@@ -459,7 +459,7 @@ import { CanvasColorPalette } from '@component-controls/design-tokens';
 
 The [CedarColor](/api/design-tokens-colors-cedarcolor--overview) component displays the color as a row, with color, name, description and hex value.
 
-Design inspired from REI's [Cedar](https://rei.github.io/rei-cedar-docs/foundation/color/).
+Design inspired by REI's [Cedar](https://rei.github.io/rei-cedar-docs/foundation/color/).
 
 ```
 import { CedarColorPalette } from '@component-controls/design-tokens';
@@ -530,7 +530,7 @@ import { CedarColorPalette } from '@component-controls/design-tokens';
 
 The [CometColor](/api/design-tokens-colors-cometcolor--overview) component displays the color as a row, with color, name sass variable name and AA/AAA tests.
 
-Design inspired from [Comet](https://comet.discoveryeducation.com/visual-language/color.html).
+Design inspired by [Comet](https://comet.discoveryeducation.com/visual-language/color.html).
 
 ```
 import { CometColorPalette } from '@component-controls/design-tokens';
@@ -588,9 +588,9 @@ import { CometColorPalette } from '@component-controls/design-tokens';
 
 ## DuetColor
 
-The [DuetColor](/api/design-tokens-colors-duetcolor--overview) component displays the color as a row, with color, name, description, var and sas variables and contrast ratio.
+The [DuetColor](/api/design-tokens-colors-duetcolor--overview) component displays the color as a row, with color, name, description, var, and sass variables as well as the contrast ratio ad status.
 
-Design inspired from [Duet](https://www.duetds.com/tokens/#color).
+Design inspired by [Duet](https://www.duetds.com/tokens/#color).
 
 ```
 import { DuetColorPalette } from '@component-controls/design-tokens';
@@ -673,9 +673,9 @@ import { DuetColorPalette } from '@component-controls/design-tokens';
 
 ## ETradeColor
 
-The [ETradeColor](/api/design-tokens-colors-etradecolor--overview) component displays the color as a block with values for hex, class and sass can be copied to clipboard on hover.
+The [ETradeColor](/api/design-tokens-colors-etradecolor--overview) component displays the color as a block with values for hex, class, and sass can be copied to clipboard on hover.
 
-Design inspired from [E-Trade Design System](https://docs.etrade.design/colors).
+Design inspired by [E-Trade Design System](https://docs.etrade.design/colors).
 
 ```
 import { ETradeColorPalette } from '@component-controls/design-tokens';
@@ -744,7 +744,7 @@ import { ETradeColorPalette } from '@component-controls/design-tokens';
 FinastraColor
 The [FinastraColor](/api/design-tokens-colors-finastracolor--overview) component displays the color as a small block, with name and hex color on the side. If the color is a primary color, will display as a circle.
 
-Design inspired from [Finsstra](https://design.fusionfabric.cloud/foundations/colors).
+Design inspired by [Finsstra](https://design.fusionfabric.cloud/foundations/colors).
 
 ```
 import { FinastraColorPalette } from '@component-controls/design-tokens';
@@ -798,7 +798,7 @@ import { FinastraColorPalette } from '@component-controls/design-tokens';
 
 The [FishTankColor](/api/design-tokens-colors-fishtankcolor--overview) component displays the color as a row with the sass var name and hex color.
 
-Design inspired from Blooomberg BNA's [FishTank](https://fishtank.bna.com/colors).
+Design inspired by Blooomberg BNA's [FishTank](https://fishtank.bna.com/colors).
 
 ```
 import { FishTankColorPalette } from '@component-controls/design-tokens';
@@ -842,7 +842,7 @@ import { FishTankColorPalette } from '@component-controls/design-tokens';
 
 The [GovUKColor](/api/design-tokens-colors-govukcolor--overview) component displays the color as a row with a color circle and the sass var name and hex color.
 
-Design inspired from [GOV.UK Design System](https://design-system.service.gov.uk/styles/colour/).
+Design inspired by [GOV.UK Design System](https://design-system.service.gov.uk/styles/colour/).
 
 ```
 import { GovUKColorPalette } from '@component-controls/design-tokens';
@@ -892,9 +892,9 @@ import { GovUKColorPalette } from '@component-controls/design-tokens';
 
 ## HelpScoutColor
 
-The [HelpScoutColor](/api/design-tokens-colors-helpscoutcolor--overview) component displays the color as a row, expanding on hover. Separate visualization (header) for primary color.
+The [HelpScoutColor](/api/design-tokens-colors-helpscoutcolor--overview) component displays the color as a row, expanding on hover. Separate visualization (header) for the primary color.
 
-Design inspired from [HelpScout](https://style.helpscout.com/visual-elements/#color).
+Design inspired by [HelpScout](https://style.helpscout.com/visual-elements/#color).
 
 ```
 import { HelpScoutColorPalette } from '@component-controls/design-tokens';
@@ -927,9 +927,9 @@ import { HelpScoutColorPalette } from '@component-controls/design-tokens';
 
 ## IBMDLColor
 
-The [IBMDLColor](/api/design-tokens-colors-ibmdlcolor--overview) component displays the color as a row with the color name and display option of hex, rgb, pms or cmyk color display.
+The [IBMDLColor](/api/design-tokens-colors-ibmdlcolor--overview) component displays the color as a row with the color name and display option of HEX, RGB, PMS, or CMYK color values.
 
-Design inspired from IBM's [Design Language](https://www.ibm.com/design/language/color).
+Design inspired by IBM's [Design Language](https://www.ibm.com/design/language/color).
 
 ```
 import { ColorTabs, IBMDLColorPalette } from '@component-controls/design-tokens';
@@ -969,9 +969,9 @@ import { ColorTabs, IBMDLColorPalette } from '@component-controls/design-tokens'
 
 ## LightningColor
 
-The [LightningColor](/api/design-tokens-colors-lightningcolor--overview) component displays the color as a row, with color, name, description, var and sas variables and contrast ratio. allows for custom columns.
+The [LightningColor](/api/design-tokens-colors-lightningcolor--overview) component displays the color as a table row, with color, name, description, and allows for custom columns.
 
-Design inspired from Oracle's [Lightning Design System](https://www.lightningdesignsystem.com/design-tokens/#category-color).
+Design inspired by Oracle's [Lightning Design System](https://www.lightningdesignsystem.com/design-tokens/#category-color).
 
 ```
 import { LightningColorPalette } from '@component-controls/design-tokens';
@@ -1158,9 +1158,9 @@ import { LightningColorPalette } from '@component-controls/design-tokens';
 
 ## LiquidColor
 
-The [LiquidColor](/api/design-tokens-colors-liquidcolor--overview) component displays the color as a block with values for rgb and a palette of lighter and darker colors.
+The [LiquidColor](/api/design-tokens-colors-liquidcolor--overview) component displays the color as a block with the RGB value and a palette of lighter and darker colors.
 
-Design inspired from [Liquid Design System](https://liquid.emd.design/fundamentals/color/).
+Design inspired by [Liquid Design System](https://liquid.emd.design/fundamentals/color/).
 
 ```
 import { LiquidColorPalette } from '@component-controls/design-tokens';
@@ -1195,7 +1195,7 @@ import { LiquidColorPalette } from '@component-controls/design-tokens';
 
 The [MorningstarColor](/api/design-tokens-colors-corningstarcolor--overview) component displays the color as a table row, with color, name, sass variable name and hex value.
 
-Design inspired from [Morningstar Design System](https://designsystem.morningstar.com/visual-language/color/?version=3.0.4&tab=backgrounds).
+Design inspired by [Morningstar Design System](https://designsystem.morningstar.com/visual-language/color/?version=3.0.4&tab=backgrounds).
 
 ```
 import { MorningstarColorPalette } from '@component-controls/design-tokens';
@@ -1254,9 +1254,9 @@ import { MorningstarColorPalette } from '@component-controls/design-tokens';
 
 ## OPatternColor
 
-The [OPatternColor](/api/design-tokens-colors-opatterncolor--overview) component displays the color as a table row, with color block, sass name, andhex, rgb and cmyk color values.
+The [OPatternColor](/api/design-tokens-colors-opatterncolor--overview) component displays the color as a table row, with color block, sass name, and hex, RGB, and CMYK color values.
 
-Design inspired from [OPattern](https://ux.opower.com/opattern/color.html).
+Design inspired by [OPattern](https://ux.opower.com/opattern/color.html).
 
 ```
 import { OPatternColorPalette } from '@component-controls/design-tokens';
@@ -1318,9 +1318,9 @@ import { OPatternColorPalette } from '@component-controls/design-tokens';
 
 ## PajamasColor
 
-The [PajamasColor](/api/design-tokens-colors-pajamascolor--overview) component displays the color as a table row, expanding on hover with display of contrast and passing level.
+The [PajamasColor](/api/design-tokens-colors-pajamascolor--overview) component displays the color as a table row, expanding on hover to display the contrast and passing level.
 
-Design inspired from GitLab's [Pajamas](https://design.gitlab.com/product-foundations/colors/).
+Design inspired by GitLab's [Pajamas](https://design.gitlab.com/product-foundations/colors/).
 
 ```
 import { PajamasColorPalette } from '@component-controls/design-tokens';
@@ -1360,9 +1360,9 @@ import { PajamasColorPalette } from '@component-controls/design-tokens';
 
 ## PatternFlyColor
 
-The [PatternFlyColor](/api/design-tokens-colors-patternflycolor--overview) component displays the color as a row with a color circle with css var name and on click popup.
+The [PatternFlyColor](/api/design-tokens-colors-patternflycolor--overview) component displays the color as a row with a color circle with CSS var name and on click popup.
 
-Design inspired from [PatternFly](https://www.patternfly.org/v4/guidelines/colors/).
+Design inspired by [PatternFly](https://www.patternfly.org/v4/guidelines/colors/).
 
 ```
 import { PatternFlyColorPalette } from '@component-controls/design-tokens';
@@ -1450,7 +1450,7 @@ import { PatternFlyColorPalette } from '@component-controls/design-tokens';
 
 The [PhotonColor](/api/design-tokens-colors-photoncolor--overview) component displays the color as a row, with a color block, name, hex value and AA/AAA tests for text and backgorund.
 
-Design inspired from Firefox's [Photon Design System](https://design.firefox.com/photon/visuals/color.html).
+Design inspired by Firefox's [Photon Design System](https://design.firefox.com/photon/visuals/color.html).
 
 ```
 import { PhotonColorPalette } from '@component-controls/design-tokens';
@@ -1480,7 +1480,7 @@ import { PhotonColorPalette } from '@component-controls/design-tokens';
 
 The [PrimerColor](/api/design-tokens-colors-primercolor--overview) component displays the color as a row, with sass variable name. Separate visualization (header) for primary color.
 
-Design inspired from GitHub's [Primer](https://styleguide.github.com/primer/support/color-system/).
+Design inspired by GitHub's [Primer](https://styleguide.github.com/primer/support/color-system/).
 
 ```
 import { PrimerColorPalette } from '@component-controls/design-tokens';
@@ -1508,9 +1508,9 @@ import { PrimerColorPalette } from '@component-controls/design-tokens';
 
 ## SeedsColor
 
-The [SeedsColor](/api/design-tokens-colors-seedscolor--overview) component displays the color as a block with rgb and cmyk colors. Below the block are displayed the color name and description.
+The [SeedsColor](/api/design-tokens-colors-seedscolor--overview) component displays the color as a block with RGB and CMYK colors. The color name and description are displayed below the block.
 
-Design inspired from SproutSocial's [Seed](https://seeds.sproutsocial.com/visual/color/).
+Design inspired by SproutSocial's [Seed](https://seeds.sproutsocial.com/visual/color/).
 
 ```
 import { SeedsColorPalette } from '@component-controls/design-tokens';
@@ -1584,9 +1584,9 @@ import { SeedsColorPalette } from '@component-controls/design-tokens';
 
 ## SeekColor
 
-The [SeekColor](/api/design-tokens-colors-seekcolor--overview) component displays the color as a cirlce with the hev value and variable name below.
+The [SeekColor](/api/design-tokens-colors-seekcolor--overview) component displays the color as a circle with the HEX value and variable name below.
 
-Design inspired from [Seek OSS](https://seek-oss.github.io/seek-style-guide/palette).
+Design inspired by [Seek OSS](https://seek-oss.github.io/seek-style-guide/palette).
 
 ```
 import { SeekColorPalette } from '@component-controls/design-tokens';
@@ -1621,7 +1621,7 @@ import { SeekColorPalette } from '@component-controls/design-tokens';
 
 The [SkylineColor](/api/design-tokens-colors-skylinecolor--overview) component displays the color as a row, with color name, custom columns for contrast checks scss variable name and color block.
 
-Design inspired from [Skyline](https://skyline.benevity.org/design-language/color/#hues).
+Design inspired by [Skyline](https://skyline.benevity.org/design-language/color/#hues).
 
 ```
 import { SkylineColorPalette } from '@component-controls/design-tokens';
@@ -1672,9 +1672,9 @@ import { SkylineColorPalette } from '@component-controls/design-tokens';
 
 ## SolidColor
 
-The [SolidColor](/api/design-tokens-colors-solidcolor--overview) component displays the color as a block. The css class, hex value and sass name are placed above the color block.
+The [SolidColor](/api/design-tokens-colors-solidcolor--overview) component displays the color as a block. The CSS class, HEX value, and SASS name are placed above the color block.
 
-Design inspired from [Solid](https://solid.buzzfeed.com/colors.html).
+Design inspired by [Solid](https://solid.buzzfeed.com/colors.html).
 
 ```
 import { SolidColorPalette } from '@component-controls/design-tokens';
@@ -1740,7 +1740,7 @@ import { SolidColorPalette } from '@component-controls/design-tokens';
 
 The [UniformColor](/api/design-tokens-colors-uniformcolor--overview) component displays the color as a table row, with color block, color name and rgb value.
 
-Design inspired from [Uniform](http://uniform.hudl.com/guidelines/colors/brand/design).
+Design inspired by [Uniform](http://uniform.hudl.com/guidelines/colors/brand/design).
 
 ```
 import { UniformColorPalette } from '@component-controls/design-tokens';
@@ -1771,7 +1771,7 @@ import { UniformColorPalette } from '@component-controls/design-tokens';
 
 The [VanillaColor](/api/design-tokens-colors-vanillacolor--overview) component displays the color as a color block with sass variable name and hex color value.
 
-Design inspired from [Vanilla](https://vanillaframework.io/docs/settings/color-settings).
+Design inspired by [Vanilla](https://vanillaframework.io/docs/settings/color-settings).
 
 ```
 import { VanillaColorPalette } from '@component-controls/design-tokens';
@@ -1810,9 +1810,9 @@ import { VanillaColorPalette } from '@component-controls/design-tokens';
 
 ## XColor
 
-The [XColor](/api/design-tokens-colors-xcolor--overview) component displays the color as a cirlce with the variable name, hev, rgb, cmyk and pantone values below.
+The [XColor](/api/design-tokens-colors-xcolor--overview) component displays the color as a circle with the variable name, HEX, RGB, CMYK, and PANTONE values below.
 
-Design inspired from Biteable's Design System [X](https://x.biteable.com/brand/).
+Design inspired by Biteable's Design System [X](https://x.biteable.com/brand/).
 
 ```
 import { XColorPalette } from '@component-controls/design-tokens';
@@ -1847,7 +1847,7 @@ import { XColorPalette } from '@component-controls/design-tokens';
 
 The [ZendeskColor](/api/design-tokens-colors-zendeskcolor--overview) component displays the color as a small block with the color name and hex value.
 
-Design inspired from [Zendesk Garden](https://zendeskgarden.github.io/react-components/theming/#!/PALETTE).
+Design inspired by [Zendesk Garden](https://zendeskgarden.github.io/react-components/theming/#!/PALETTE).
 
 ```
 import { ZendeskColorPalette } from '@component-controls/design-tokens';
diff --git a/plugins/viewport-plugin/README.md b/plugins/viewport-plugin/README.md
index 4bd02f0d5..f96f13082 100644
--- a/plugins/viewport-plugin/README.md
+++ b/plugins/viewport-plugin/README.md
@@ -19,7 +19,7 @@
 
 # Overview
 
-Inspired from the [playroom](https://github.com/seek-oss/playroom) project, this addon contains a `ViewportBlock` that you can integrate into any page, as well as a standalone `ViewportPage`
+inspired by the [playroom](https://github.com/seek-oss/playroom) project, this addon contains a `ViewportBlock` that you can integrate into any page, as well as a standalone `ViewportPage`
 
 # Getting Started
 
diff --git a/ui/design-tokens/src/Colors/Alta/AltaColor.tsx b/ui/design-tokens/src/Colors/Alta/AltaColor.tsx
index f2a54f6c6..792b691dc 100644
--- a/ui/design-tokens/src/Colors/Alta/AltaColor.tsx
+++ b/ui/design-tokens/src/Colors/Alta/AltaColor.tsx
@@ -8,7 +8,7 @@ import { GridContainerProps, GridContainer } from '../../components';
 
 /**
  * Color item displaying the color as a block, as well as hex(string) and rgb values.
- * Inspired from [Alta UI](https://www.oracle.com/webfolder/ux/middleware/alta_web_icon_guide/Alta-Colors/UI-Palette.html).
+ * inspired by [Alta UI](https://www.oracle.com/webfolder/ux/middleware/alta_web_icon_guide/Alta-Colors/UI-Palette.html).
  */
 export const AltaColor: FC<ColorBlockProps> = ({ name, color }) => {
   const colorValue = typeof color === 'string' ? color : color.value;
diff --git a/ui/design-tokens/src/Colors/AntdHorzColor/AntdHorzColor.tsx b/ui/design-tokens/src/Colors/AntdHorzColor/AntdHorzColor.tsx
index 8adca0b00..1899c973d 100644
--- a/ui/design-tokens/src/Colors/AntdHorzColor/AntdHorzColor.tsx
+++ b/ui/design-tokens/src/Colors/AntdHorzColor/AntdHorzColor.tsx
@@ -8,7 +8,7 @@ import { FlexContainerProps, FlexContainer } from '../../components';
 
 /**
  * Color item displaying the color as a small block, expanding on hover.
- * Design inspired from [Antd](https://ant.design/docs/spec/colors).
+ * Design inspired by [Antd](https://ant.design/docs/spec/colors).
  */
 
 export const AntdHorzColor: FC<ColorBlockProps> = ({ name, color, hover }) => {
diff --git a/ui/design-tokens/src/Colors/AntdVertColor/AntdVertColor.tsx b/ui/design-tokens/src/Colors/AntdVertColor/AntdVertColor.tsx
index 7c528cab1..e61a99ef2 100644
--- a/ui/design-tokens/src/Colors/AntdVertColor/AntdVertColor.tsx
+++ b/ui/design-tokens/src/Colors/AntdVertColor/AntdVertColor.tsx
@@ -8,7 +8,7 @@ import { FlexContainerProps, FlexContainer } from '../../components';
 
 /**
  * Color item displaying the color as a small block, expanding on hover.
- * Design inspired from [Antd](https://ant.design/docs/spec/colors).
+ * Design inspired by [Antd](https://ant.design/docs/spec/colors).
  */
 
 export const AntdVertColor: FC<ColorBlockProps> = ({ name, color, hover }) => {
diff --git a/ui/design-tokens/src/Colors/AnvilColor/AnvilColor.tsx b/ui/design-tokens/src/Colors/AnvilColor/AnvilColor.tsx
index 427984c95..c151ec533 100644
--- a/ui/design-tokens/src/Colors/AnvilColor/AnvilColor.tsx
+++ b/ui/design-tokens/src/Colors/AnvilColor/AnvilColor.tsx
@@ -7,8 +7,8 @@ import { ColorBlockProps } from '../../types';
 import { GridContainerProps, GridContainer } from '../../components';
 
 /**
- * Color item displaying the color as a block with a title, as well as hex(string) and rgb values.
- * Design inspired from [Anvil](https://anvil.servicetitan.com/foundations/color/).
+ * Color item displaying the color as a color block with a dot suggesting the best text color and a block of text with the color title, name, and value.
+ * Design inspired by [Anvil](https://anvil.servicetitan.com/foundations/color/).
  */
 export const AnvilColor: FC<ColorBlockProps> = ({ name, color }) => {
   const colorValue = typeof color === 'string' ? color : color.value;
diff --git a/ui/design-tokens/src/Colors/AtlassianColor/AtlassianColor.tsx b/ui/design-tokens/src/Colors/AtlassianColor/AtlassianColor.tsx
index 9da26e9bd..d1b9f0dbb 100644
--- a/ui/design-tokens/src/Colors/AtlassianColor/AtlassianColor.tsx
+++ b/ui/design-tokens/src/Colors/AtlassianColor/AtlassianColor.tsx
@@ -44,7 +44,7 @@ const ContrastTest: FC<{
 };
 /**
  * Color item displaying the color as a block with [AA](https://www.w3.org/TR/WCAG/) color contrast tests.
- * Design inspired from [Atlassian Design System](https://atlassian.design/foundations/color).
+ * Design inspired by [Atlassian Design System](https://atlassian.design/foundations/color).
  */
 export const AtlassianColor: FC<ColorBlockProps> = ({ name, color }) => {
   const colorValue = typeof color === 'string' ? color : color.value;
diff --git a/ui/design-tokens/src/Colors/AudiDSColor/AudiDSColor.tsx b/ui/design-tokens/src/Colors/AudiDSColor/AudiDSColor.tsx
index 08637b4bc..da2430296 100644
--- a/ui/design-tokens/src/Colors/AudiDSColor/AudiDSColor.tsx
+++ b/ui/design-tokens/src/Colors/AudiDSColor/AudiDSColor.tsx
@@ -8,8 +8,8 @@ import { ColorBlockProps } from '../../types';
 import { GridContainerProps, GridContainer } from '../../components';
 
 /**
- * Color item displaying the color as a block and color aliases for various standard is Pantone, CMYK.
- * Design inspired from [Audi Design System](https://www.audi.com/ci/en/intro/basics/colours.html).
+ * Color item displaying the color as a color block and the values for RGB, RML, CMYK and Pantone.
+ * Design inspired by [Audi Design System](https://www.audi.com/ci/en/intro/basics/colours.html).
  */
 export const AudiDSColor: FC<ColorBlockProps> = ({ name, color }) => {
   const colorValue = typeof color === 'string' ? color : color.value;
diff --git a/ui/design-tokens/src/Colors/BackpackColor/BackpackColor.tsx b/ui/design-tokens/src/Colors/BackpackColor/BackpackColor.tsx
index 9aa410d09..7699fcb6e 100644
--- a/ui/design-tokens/src/Colors/BackpackColor/BackpackColor.tsx
+++ b/ui/design-tokens/src/Colors/BackpackColor/BackpackColor.tsx
@@ -8,9 +8,9 @@ import { ColorBlockProps, ColorValue } from '../../types';
 import { GridContainerProps, GridContainer } from '../../components';
 
 /**
- * Color item displaying the color as a block and color aliases for various standard is Pantone, CMYK.
+ * Color item displaying the color as a color block and the values for RGB, CMYK and Pantone.
  * If specified, will display the dark color as a bottom-right side triangle.
- * Design inspired from [Backpack](https://backpack.github.io/guidelines/colors).
+ * Design inspired by [Backpack](https://backpack.github.io/guidelines/colors).
  */
 export const BackpackColor: FC<ColorBlockProps> = ({ name, color }) => {
   const colorObj: ColorValue =
diff --git a/ui/design-tokens/src/Colors/BaseWebColor/BaseWebColor.tsx b/ui/design-tokens/src/Colors/BaseWebColor/BaseWebColor.tsx
index 6696cdd16..f6756922a 100644
--- a/ui/design-tokens/src/Colors/BaseWebColor/BaseWebColor.tsx
+++ b/ui/design-tokens/src/Colors/BaseWebColor/BaseWebColor.tsx
@@ -8,7 +8,7 @@ import { FlexContainerProps, FlexContainer } from '../../components';
 
 /**
  * Color item displaying as a row, with color, name and hex value
- * Design inspired from [BaseWeb](https://baseweb.design/components/tokens/).
+ * Design inspired by [BaseWeb](https://baseweb.design/components/tokens/).
  */
 
 export const BaseWebColor: FC<ColorBlockProps> = ({ name, color }) => {
diff --git a/ui/design-tokens/src/Colors/BeelineColor/BeelineColor.tsx b/ui/design-tokens/src/Colors/BeelineColor/BeelineColor.tsx
index 259764061..dded441cb 100644
--- a/ui/design-tokens/src/Colors/BeelineColor/BeelineColor.tsx
+++ b/ui/design-tokens/src/Colors/BeelineColor/BeelineColor.tsx
@@ -9,7 +9,7 @@ import { GridContainerProps, GridContainer } from '../../components';
 
 /**
  * Color item displaying the color as a block with values for rgb and Pantone colors.
- * Design inspired from [Beeline Design System](http://beelinedesignsystem.com/color-palette/).
+ * Design inspired by [Beeline Design System](http://beelinedesignsystem.com/color-palette/).
  */
 export const BeelineColor: FC<ColorBlockProps> = ({ name, color }) => {
   const colorValue = typeof color === 'string' ? color : color.value;
diff --git a/ui/design-tokens/src/Colors/BoltColor/BoltColor.tsx b/ui/design-tokens/src/Colors/BoltColor/BoltColor.tsx
index 7218a1d73..959dfbe41 100644
--- a/ui/design-tokens/src/Colors/BoltColor/BoltColor.tsx
+++ b/ui/design-tokens/src/Colors/BoltColor/BoltColor.tsx
@@ -50,7 +50,7 @@ const ContrastTest: FC<{
 };
 /**
  * Color item displaying the color as a block with [AA](https://www.w3.org/TR/WCAG/) color contrast tests.
- * Design inspired from [Bolt](https://boltdesignsystem.com/pattern-lab/?p=visual-styles-color-system).
+ * Design inspired by [Bolt](https://boltdesignsystem.com/pattern-lab/?p=visual-styles-color-system).
  */
 export const BoltColor: FC<ColorBlockProps> = ({ name, color }) => {
   const colorObj: ColorValue =
diff --git a/ui/design-tokens/src/Colors/CanvasColor/CanvasColor.tsx b/ui/design-tokens/src/Colors/CanvasColor/CanvasColor.tsx
index 37bafea3f..8fe7f76a4 100644
--- a/ui/design-tokens/src/Colors/CanvasColor/CanvasColor.tsx
+++ b/ui/design-tokens/src/Colors/CanvasColor/CanvasColor.tsx
@@ -8,7 +8,7 @@ import { FlexContainerProps, FlexContainer } from '../../components';
 
 /**
  * Color item displaying as a row, with color, name, sass variable name and hex value
- * Design inspired from [Canvas Design System](https://canvas.hubspot.com/styles/colors).
+ * Design inspired by [Canvas Design System](https://canvas.hubspot.com/styles/colors).
  */
 
 export const CanvasColor: FC<ColorBlockProps> = ({ name, color }) => {
diff --git a/ui/design-tokens/src/Colors/CedarColor/CedarColor.tsx b/ui/design-tokens/src/Colors/CedarColor/CedarColor.tsx
index 6f241a97a..4f94d93dd 100644
--- a/ui/design-tokens/src/Colors/CedarColor/CedarColor.tsx
+++ b/ui/design-tokens/src/Colors/CedarColor/CedarColor.tsx
@@ -8,7 +8,7 @@ import { FlexContainerProps, FlexContainer } from '../../components';
 
 /**
  * Color item displaying as a row, with color, name, description and hex value
- * Design inspired from REI's [Cedar](https://rei.github.io/rei-cedar-docs/foundation/color/).
+ * Design inspired by REI's [Cedar](https://rei.github.io/rei-cedar-docs/foundation/color/).
  */
 
 export const CedarColor: FC<ColorBlockProps & { index?: number }> = ({
diff --git a/ui/design-tokens/src/Colors/CometColor/CometColor.tsx b/ui/design-tokens/src/Colors/CometColor/CometColor.tsx
index e35125099..a6da380ec 100644
--- a/ui/design-tokens/src/Colors/CometColor/CometColor.tsx
+++ b/ui/design-tokens/src/Colors/CometColor/CometColor.tsx
@@ -9,7 +9,7 @@ import { FlexContainerProps, FlexContainer } from '../../components';
 
 /**
  * Color item displaying as a row, with color, name sass variable name and AA/AAA tests
- * Design inspired from [Comet](https://comet.discoveryeducation.com/visual-language/color.html).
+ * Design inspired by [Comet](https://comet.discoveryeducation.com/visual-language/color.html).
  */
 
 export const CometColor: FC<ColorBlockProps> = ({ name, color }) => {
diff --git a/ui/design-tokens/src/Colors/DuetColor/DuetColor.tsx b/ui/design-tokens/src/Colors/DuetColor/DuetColor.tsx
index 9891a8b68..8058e9f24 100644
--- a/ui/design-tokens/src/Colors/DuetColor/DuetColor.tsx
+++ b/ui/design-tokens/src/Colors/DuetColor/DuetColor.tsx
@@ -20,8 +20,8 @@ import {
 import { TableContainerProps, TableContainer } from '../../components';
 
 /**
- * Color item displaying as a row, with color, name, description, var and sas variables and contrast ratio.
- * Design inspired from [Duet](https://www.duetds.com/tokens/#color).
+ * Color item displaying as a row, with color, name, description, var, and sass variables as well as the contrast ratio ad status.
+ * Design inspired by [Duet](https://www.duetds.com/tokens/#color).
  */
 
 export const DuetColor: FC<ColorBlockProps> = props => (
diff --git a/ui/design-tokens/src/Colors/ETradeColor/ETradeColor.tsx b/ui/design-tokens/src/Colors/ETradeColor/ETradeColor.tsx
index ede3004cb..a66294de1 100644
--- a/ui/design-tokens/src/Colors/ETradeColor/ETradeColor.tsx
+++ b/ui/design-tokens/src/Colors/ETradeColor/ETradeColor.tsx
@@ -39,8 +39,8 @@ const CopyItem: FC<{ name: string; value?: string }> = ({ name, value }) => {
   ) : null;
 };
 /**
- * Color item displaying the color as a block with values for hex, class and sass can be copied to clipboard on hover.
- * Design inspired from [E-Trade Design System](https://docs.etrade.design/colors).
+ * Color item displaying the color as a block with values for hex, class, and sass can be copied to clipboard on hover.
+ * Design inspired by [E-Trade Design System](https://docs.etrade.design/colors).
  */
 export const ETradeColor: FC<ColorBlockProps> = ({ name, color }) => {
   const [hover, setHover] = useState(false);
diff --git a/ui/design-tokens/src/Colors/FinastraColor/FinastraColor.tsx b/ui/design-tokens/src/Colors/FinastraColor/FinastraColor.tsx
index 70a735157..57d04679a 100644
--- a/ui/design-tokens/src/Colors/FinastraColor/FinastraColor.tsx
+++ b/ui/design-tokens/src/Colors/FinastraColor/FinastraColor.tsx
@@ -9,7 +9,7 @@ import { FlexContainerProps, FlexContainer } from '../../components';
 
 /**
  * Color item displaying the color as a small block, with name and hex color on the side. If the color is a primary color, will display as a circle.
- * Design inspired from [Finastra](https://design.fusionfabric.cloud/foundations/colors).
+ * Design inspired by [Finastra](https://design.fusionfabric.cloud/foundations/colors).
  */
 
 export const FinastraColor: FC<ColorBlockProps> = ({ name, color }) => {
diff --git a/ui/design-tokens/src/Colors/FishTankColor/FishTankColor.tsx b/ui/design-tokens/src/Colors/FishTankColor/FishTankColor.tsx
index 583fc5972..40762f1b1 100644
--- a/ui/design-tokens/src/Colors/FishTankColor/FishTankColor.tsx
+++ b/ui/design-tokens/src/Colors/FishTankColor/FishTankColor.tsx
@@ -8,7 +8,7 @@ import { FlexContainerProps, FlexContainer } from '../../components';
 
 /**
  * Color item displaying the color as a row with the sass var name and hex color.
- * Design inspired from Blooomberg BNA's [FishTank](https://fishtank.bna.com/colors).
+ * Design inspired by Blooomberg BNA's [FishTank](https://fishtank.bna.com/colors).
  */
 
 export const FishTankColor: FC<ColorBlockProps> = ({ name, color }) => {
diff --git a/ui/design-tokens/src/Colors/GovUKColor/GovUKColor.tsx b/ui/design-tokens/src/Colors/GovUKColor/GovUKColor.tsx
index b2d0e0881..51c9d51b0 100644
--- a/ui/design-tokens/src/Colors/GovUKColor/GovUKColor.tsx
+++ b/ui/design-tokens/src/Colors/GovUKColor/GovUKColor.tsx
@@ -8,7 +8,7 @@ import { FlexContainerProps, FlexContainer } from '../../components';
 
 /**
  * Color item displaying the color as a row with a color circle and the sass var name and hex color.
- * Design inspired from [GOV.UK Design System](https://design-system.service.gov.uk/styles/colour/).
+ * Design inspired by [GOV.UK Design System](https://design-system.service.gov.uk/styles/colour/).
  */
 
 export const GovUKColor: FC<ColorBlockProps> = ({ name, color }) => {
diff --git a/ui/design-tokens/src/Colors/HelpScoutColor/HelpScoutColor.tsx b/ui/design-tokens/src/Colors/HelpScoutColor/HelpScoutColor.tsx
index b58af8827..9ab44a0c3 100644
--- a/ui/design-tokens/src/Colors/HelpScoutColor/HelpScoutColor.tsx
+++ b/ui/design-tokens/src/Colors/HelpScoutColor/HelpScoutColor.tsx
@@ -7,8 +7,8 @@ import { ColorBlockProps, ColorValue } from '../../types';
 import { FlexContainerProps, FlexContainer } from '../../components';
 
 /**
- * Color item displaying the color as a row, expanding on hover. Separate visualization (header) for primary color.
- * Design inspired from [HelpScout](https://style.helpscout.com/visual-elements/#color).
+ * Color item displaying the color as a row, expanding on hover. Separate visualization (header) for the primary color.
+ * Design inspired by [HelpScout](https://style.helpscout.com/visual-elements/#color).
  */
 
 export const HelpScoutColor: FC<ColorBlockProps> = ({ name, color }) => {
diff --git a/ui/design-tokens/src/Colors/IBMDLColor/IBMDLColor.tsx b/ui/design-tokens/src/Colors/IBMDLColor/IBMDLColor.tsx
index c9bdbeefb..b38117386 100644
--- a/ui/design-tokens/src/Colors/IBMDLColor/IBMDLColor.tsx
+++ b/ui/design-tokens/src/Colors/IBMDLColor/IBMDLColor.tsx
@@ -20,8 +20,8 @@ export type ColorDisplay = ColorDisplayTuple[number];
 
 export type IBMDLColorProps = ColorBlockProps & { display: ColorDisplay };
 /**
- * Color item displaying the color as a row with the color name and display option of hex, rgb, pms or cmyk color display.
- * Design inspired from IBM's [Design Language](https://www.ibm.com/design/language/color).
+ * Color item displaying the color as a row with the color name and display option of HEX, RGB, PMS, or CMYK color values.
+ * Design inspired by IBM's [Design Language](https://www.ibm.com/design/language/color).
  */
 
 export const IBMDLColor: FC<IBMDLColorProps> = ({
diff --git a/ui/design-tokens/src/Colors/LightningColor/LightningColor.tsx b/ui/design-tokens/src/Colors/LightningColor/LightningColor.tsx
index 235b69d99..4c6a76533 100644
--- a/ui/design-tokens/src/Colors/LightningColor/LightningColor.tsx
+++ b/ui/design-tokens/src/Colors/LightningColor/LightningColor.tsx
@@ -14,8 +14,8 @@ export type LightningColorProps = {
   columns?: TableColumn[];
 } & ColorBlockProps;
 /**
- * Color item displaying as a row, with color, name, description, var and sas variables and contrast ratio. allows for custom columns.
- * Design inspired from Oracle's [Lightning Design System](https://www.lightningdesignsystem.com/design-tokens/#category-color).
+ * Color item displaying as a table row, with color, name, description, and allows for custom columns.
+ * Design inspired by Oracle's [Lightning Design System](https://www.lightningdesignsystem.com/design-tokens/#category-color).
  */
 
 export const LightningColor: FC<LightningColorProps> = props => (
diff --git a/ui/design-tokens/src/Colors/LiquidColor/LiquidColor.tsx b/ui/design-tokens/src/Colors/LiquidColor/LiquidColor.tsx
index cdf56cecd..5305ea001 100644
--- a/ui/design-tokens/src/Colors/LiquidColor/LiquidColor.tsx
+++ b/ui/design-tokens/src/Colors/LiquidColor/LiquidColor.tsx
@@ -8,8 +8,8 @@ import { ColorBlockProps } from '../../types';
 import { GridContainerProps, GridContainer } from '../../components';
 
 /**
- * Color item displaying the color as a block with values for rgb and a palette of lighter and darker colors.
- * Design inspired from [Liquid Design System](https://liquid.emd.design/fundamentals/color/).
+ * Color item displaying the color as a block with the RGB value and a palette of lighter and darker colors.
+ * Design inspired by [Liquid Design System](https://liquid.emd.design/fundamentals/color/).
  */
 export const LiquidColor: FC<ColorBlockProps> = ({ name, color }) => {
   const colorValue = typeof color === 'string' ? color : color.value;
diff --git a/ui/design-tokens/src/Colors/MorningstarColor/MorningstarColor.tsx b/ui/design-tokens/src/Colors/MorningstarColor/MorningstarColor.tsx
index 510378d8c..ba4f0d3d9 100644
--- a/ui/design-tokens/src/Colors/MorningstarColor/MorningstarColor.tsx
+++ b/ui/design-tokens/src/Colors/MorningstarColor/MorningstarColor.tsx
@@ -8,7 +8,7 @@ import { TableContainerProps, TableContainer } from '../../components';
 
 /**
  * Color item displaying as a table row, with color, name, sass variable name and hex value.
- * Design inspired from [Morningstar Design System](https://designsystem.morningstar.com/visual-language/color/?version=3.0.4&tab=backgrounds).
+ * Design inspired by [Morningstar Design System](https://designsystem.morningstar.com/visual-language/color/?version=3.0.4&tab=backgrounds).
  */
 
 export const MorningstarColor: FC<ColorBlockProps> = props => (
diff --git a/ui/design-tokens/src/Colors/OPatternColor/OPatternColor.tsx b/ui/design-tokens/src/Colors/OPatternColor/OPatternColor.tsx
index 661fa6a34..048aacb28 100644
--- a/ui/design-tokens/src/Colors/OPatternColor/OPatternColor.tsx
+++ b/ui/design-tokens/src/Colors/OPatternColor/OPatternColor.tsx
@@ -8,8 +8,8 @@ import { ColorBlockProps, ColorValue } from '../../types';
 import { TableContainerProps, TableContainer } from '../../components';
 
 /**
- * Color item displaying as a table row, with color block, sass name, andhex, rgb and cmyk color values.
- * Design inspired from [OPattern](https://ux.opower.com/opattern/color.html).
+ * Color item displaying as a table row, with color block, sass name, and hex, RGB, and CMYK color values.
+ * Design inspired by [OPattern](https://ux.opower.com/opattern/color.html).
  */
 
 export const OPatternColor: FC<ColorBlockProps> = props => (
diff --git a/ui/design-tokens/src/Colors/PajamasColor/PajamasColor.tsx b/ui/design-tokens/src/Colors/PajamasColor/PajamasColor.tsx
index 13cab2457..612ac59f1 100644
--- a/ui/design-tokens/src/Colors/PajamasColor/PajamasColor.tsx
+++ b/ui/design-tokens/src/Colors/PajamasColor/PajamasColor.tsx
@@ -8,8 +8,8 @@ import { ColorBlockProps } from '../../types';
 import { FlexContainerProps, FlexContainer } from '../../components';
 
 /**
- * Color item displaying the color as a table row, expanding on hover with display of contrast and passing level.
- * Design inspired from GitLab's [Pajamas](https://design.gitlab.com/product-foundations/colors/).
+ * Color item displaying the color as a table row, expanding on hover to display the contrast and passing level.
+ * Design inspired by GitLab's [Pajamas](https://design.gitlab.com/product-foundations/colors/).
  */
 
 export const PajamasColor: FC<ColorBlockProps> = ({ name, color, hover }) => {
diff --git a/ui/design-tokens/src/Colors/PatternFlyColor/PatternFlyColor.tsx b/ui/design-tokens/src/Colors/PatternFlyColor/PatternFlyColor.tsx
index c56f4defd..de3465e54 100644
--- a/ui/design-tokens/src/Colors/PatternFlyColor/PatternFlyColor.tsx
+++ b/ui/design-tokens/src/Colors/PatternFlyColor/PatternFlyColor.tsx
@@ -7,8 +7,8 @@ import { ColorBlockProps, ColorValue } from '../../types';
 import { FlexContainerProps, FlexContainer } from '../../components';
 
 /**
- * Color item displaying the color as a row with a color circle with css var name and on click popup.
- * Design inspired from [PatternFly](https://www.patternfly.org/v4/guidelines/colors/).
+ * Color item displaying the color as a row with a color circle with CSS var name and on click popup.
+ * Design inspired by [PatternFly](https://www.patternfly.org/v4/guidelines/colors/).
  */
 
 export const PatternFlyColor: FC<ColorBlockProps> = ({ name, color }) => {
diff --git a/ui/design-tokens/src/Colors/PhotonColor/PhotonColor.tsx b/ui/design-tokens/src/Colors/PhotonColor/PhotonColor.tsx
index 5eb4e62d3..b7f305b2a 100644
--- a/ui/design-tokens/src/Colors/PhotonColor/PhotonColor.tsx
+++ b/ui/design-tokens/src/Colors/PhotonColor/PhotonColor.tsx
@@ -9,7 +9,7 @@ import { FlexContainerProps, FlexContainer } from '../../components';
 
 /**
  * Color item displaying as a row, with a color block, name, hex value and AA/AAA tests for text and backgorund.
- * Design inspired from Firefox's [Photon Design System](https://design.firefox.com/photon/visuals/color.html).
+ * Design inspired by Firefox's [Photon Design System](https://design.firefox.com/photon/visuals/color.html).
  */
 
 export const PhotonColor: FC<ColorBlockProps> = ({ name, color }) => {
diff --git a/ui/design-tokens/src/Colors/PrimerColor/PrimerColor.tsx b/ui/design-tokens/src/Colors/PrimerColor/PrimerColor.tsx
index 695fa82f3..f1a602b52 100644
--- a/ui/design-tokens/src/Colors/PrimerColor/PrimerColor.tsx
+++ b/ui/design-tokens/src/Colors/PrimerColor/PrimerColor.tsx
@@ -8,7 +8,7 @@ import { FlexContainerProps, FlexContainer } from '../../components';
 
 /**
  * Color item displaying the color as a row, with sass variable name. Separate visualization (header) for primary color.
- * Design inspired from GitHub's [Primer](https://styleguide.github.com/primer/support/color-system/).
+ * Design inspired by GitHub's [Primer](https://styleguide.github.com/primer/support/color-system/).
  */
 
 export const PrimerColor: FC<ColorBlockProps> = ({ name, color }) => {
diff --git a/ui/design-tokens/src/Colors/SeedsColor/SeedsColor.tsx b/ui/design-tokens/src/Colors/SeedsColor/SeedsColor.tsx
index 9289c4ac7..4967f8d4e 100644
--- a/ui/design-tokens/src/Colors/SeedsColor/SeedsColor.tsx
+++ b/ui/design-tokens/src/Colors/SeedsColor/SeedsColor.tsx
@@ -8,8 +8,8 @@ import { ColorBlockProps, ColorValue } from '../../types';
 import { GridContainerProps, GridContainer } from '../../components';
 
 /**
- * Color item displaying the color as a block with rgb and cmyk colors. Below the block are displayed the color name and description.
- * Design inspired from SproutSocial's [Seed](https://seeds.sproutsocial.com/visual/color/).
+ * Color item displaying the color as a block with RGB and CMYK colors. The color name and description are displayed below the block.
+ * Design inspired by SproutSocial's [Seed](https://seeds.sproutsocial.com/visual/color/).
  */
 export const SeedsColor: FC<ColorBlockProps> = ({ name, color }) => {
   const colorObj: ColorValue =
diff --git a/ui/design-tokens/src/Colors/SeekColor/SeekColor.tsx b/ui/design-tokens/src/Colors/SeekColor/SeekColor.tsx
index 2160b2599..19cd391c5 100644
--- a/ui/design-tokens/src/Colors/SeekColor/SeekColor.tsx
+++ b/ui/design-tokens/src/Colors/SeekColor/SeekColor.tsx
@@ -7,8 +7,8 @@ import { ColorBlockProps, ColorValue } from '../../types';
 import { GridContainerProps, GridContainer } from '../../components';
 
 /**
- * Color item displaying the color as a cirlce with the hev value and variable name below.
- * Design inspired from [Seek OSS](https://seek-oss.github.io/seek-style-guide/palette).
+ * Color item displaying the color as a circle with the HEX value and variable name below.
+ * Design inspired by [Seek OSS](https://seek-oss.github.io/seek-style-guide/palette).
  */
 export const SeekColor: FC<ColorBlockProps> = ({ name, color }) => {
   const colorObj: ColorValue =
diff --git a/ui/design-tokens/src/Colors/SkylineColor/SkylineColor.tsx b/ui/design-tokens/src/Colors/SkylineColor/SkylineColor.tsx
index 17127f500..e618b2130 100644
--- a/ui/design-tokens/src/Colors/SkylineColor/SkylineColor.tsx
+++ b/ui/design-tokens/src/Colors/SkylineColor/SkylineColor.tsx
@@ -11,7 +11,7 @@ import { TableContainerProps, TableContainer } from '../../components';
 
 /**
  * Color item displaying as a row, with color name, custom columns for contrast checks scss variable name and color block.
- * Design inspired from [Skyline](https://skyline.benevity.org/design-language/color/#hues).
+ * Design inspired by [Skyline](https://skyline.benevity.org/design-language/color/#hues).
  */
 
 export const SkylineColor: FC<ColorBlockProps> = props => (
diff --git a/ui/design-tokens/src/Colors/SolidColor/SolidColor.tsx b/ui/design-tokens/src/Colors/SolidColor/SolidColor.tsx
index c9ab2c8cb..2cbcb750c 100644
--- a/ui/design-tokens/src/Colors/SolidColor/SolidColor.tsx
+++ b/ui/design-tokens/src/Colors/SolidColor/SolidColor.tsx
@@ -7,8 +7,8 @@ import { ColorBlockProps, ColorValue } from '../../types';
 import { GridContainerProps, GridContainer } from '../../components';
 
 /**
- * Color item displaying the color as a block. The css class, hex value and sass name are placed above the color block.
- * Design inspired from [Solid](https://solid.buzzfeed.com/colors.html).
+ * Color item displaying the color as a block. The CSS class, HEX value, and SASS name are placed above the color block.
+ * Design inspired by [Solid](https://solid.buzzfeed.com/colors.html).
  */
 export const SolidColor: FC<ColorBlockProps> = ({ name, color }) => {
   const colorObj: ColorValue =
diff --git a/ui/design-tokens/src/Colors/UniformColor/UniformColor.tsx b/ui/design-tokens/src/Colors/UniformColor/UniformColor.tsx
index 8fc3a9ed6..3a452c6bf 100644
--- a/ui/design-tokens/src/Colors/UniformColor/UniformColor.tsx
+++ b/ui/design-tokens/src/Colors/UniformColor/UniformColor.tsx
@@ -8,7 +8,7 @@ import { TableContainerProps, TableContainer } from '../../components';
 
 /**
  * Color item displaying as a table row, with color block, color name and rgb value.
- * Design inspired from [Uniform](http://uniform.hudl.com/guidelines/colors/brand/design).
+ * Design inspired by [Uniform](http://uniform.hudl.com/guidelines/colors/brand/design).
  */
 
 export const UniformColor: FC<ColorBlockProps> = props => (
diff --git a/ui/design-tokens/src/Colors/VanillaColor/VanillaColor.tsx b/ui/design-tokens/src/Colors/VanillaColor/VanillaColor.tsx
index 8c07ab4be..ed8cc4644 100644
--- a/ui/design-tokens/src/Colors/VanillaColor/VanillaColor.tsx
+++ b/ui/design-tokens/src/Colors/VanillaColor/VanillaColor.tsx
@@ -7,7 +7,7 @@ import { GridContainerProps, GridContainer } from '../../components';
 
 /**
  * Color item displaying the color as a color block with sass variable name and hex color value.
- * Design inspired from [Vanilla](https://vanillaframework.io/docs/settings/color-settings).
+ * Design inspired by [Vanilla](https://vanillaframework.io/docs/settings/color-settings).
  */
 export const VanillaColor: FC<ColorBlockProps> = ({ name, color }) => {
   const colorObj: ColorValue =
diff --git a/ui/design-tokens/src/Colors/XColor/XColor.tsx b/ui/design-tokens/src/Colors/XColor/XColor.tsx
index ceae5b840..e24932c13 100644
--- a/ui/design-tokens/src/Colors/XColor/XColor.tsx
+++ b/ui/design-tokens/src/Colors/XColor/XColor.tsx
@@ -8,8 +8,8 @@ import { ColorBlockProps, ColorValue } from '../../types';
 import { GridContainerProps, GridContainer } from '../../components';
 
 /**
- * Color item displaying the color as a cirlce with the variable name, hev, rgb, cmyk and pantone values below.
- * Design inspired from Biteable's Design System [X](https://x.biteable.com/brand/).
+ * Color item displaying the color as a circle with the variable name, HEX, RGB, CMYK, and PANTONE values below.
+ * Design inspired by Biteable's Design System [X](https://x.biteable.com/brand/).
  */
 export const XColor: FC<ColorBlockProps> = ({ name, color }) => {
   const colorObj: ColorValue =
diff --git a/ui/design-tokens/src/Colors/ZendeskColor/ZendeskColor.tsx b/ui/design-tokens/src/Colors/ZendeskColor/ZendeskColor.tsx
index 251cda71b..2c816d1c2 100644
--- a/ui/design-tokens/src/Colors/ZendeskColor/ZendeskColor.tsx
+++ b/ui/design-tokens/src/Colors/ZendeskColor/ZendeskColor.tsx
@@ -8,7 +8,7 @@ import { GridContainerProps, GridContainer } from '../../components';
 
 /**
  * Color item displaying the color as a small block with the color name and hex value.
- * Design inspired from [Zendesk Garden](https://zendeskgarden.github.io/react-components/theming/#!/PALETTE).
+ * Design inspired by [Zendesk Garden](https://zendeskgarden.github.io/react-components/theming/#!/PALETTE).
  */
 export const ZendeskColor: FC<ColorBlockProps> = ({ name, color }) => {
   const colorValue = typeof color === 'string' ? color : color.value;