diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/charts/about/about.md b/packages/documentation-site/patternfly-docs/content/design-guidelines/charts/about/about.md
index 62b3527ff2..b11dbac0e7 100644
--- a/packages/documentation-site/patternfly-docs/content/design-guidelines/charts/about/about.md
+++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/charts/about/about.md
@@ -1,6 +1,7 @@
---
id: About charts
section: charts
+sortValue: 1
---
_Charts are only available in React_
diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/styles/colors-for-charts/Color and pattern usage.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/styles/colors-for-charts/Color and pattern usage.png
deleted file mode 100644
index ac9cda1036..0000000000
Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/styles/colors-for-charts/Color and pattern usage.png and /dev/null differ
diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/styles/colors-for-charts/chartcolors.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/styles/colors-for-charts/chartcolors.png
deleted file mode 100644
index 5994d22445..0000000000
Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/styles/colors-for-charts/chartcolors.png and /dev/null differ
diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/styles/colors-for-charts/colors-for-charts.md b/packages/documentation-site/patternfly-docs/content/design-guidelines/styles/colors-for-charts/colors-for-charts.md
index 8ed8a5d68f..4a4b728d83 100644
--- a/packages/documentation-site/patternfly-docs/content/design-guidelines/styles/colors-for-charts/colors-for-charts.md
+++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/styles/colors-for-charts/colors-for-charts.md
@@ -2,102 +2,119 @@
id: Colors for charts
section: charts
hideSource: true
+sortValue: 2
---
-import theSystem from './thesystem.gif';
-import oneFamily from './onefamily.gif';
-import fewVariables from './fewvariables.png';
-import manyVariables from './manyvariables.png';
-import nestedVariables from './nestedvariables.png';
import { Alert, Grid, GridItem, Divider } from '@patternfly/react-core';
import ColorsGrid from './colors-grid.js';
import './colors-for-charts.css';
-## Chart colors
+import '../../components/components.css';
-PatternFly recommends colors to use with bar charts, donut charts and pie charts. There are six base colors (blue to orange) that the chart color system is built on. Each base color has its own monochromatic color family, which includes lighter and darker hues of the base color. Each family is ordered based on increasing color contrast. The variation of colors you use will depend on the type and amount of data you’re working with.
+**Note:** Our charts use separate design tokens from our standard library. To view a list of all chart tokens, apply the "chart" category filter to [the PatternFly design tokens table](/tokens/all-patternfly-tokens).
+## Color palettes
+
+To create well-designed charts, you typically need to use multiple colors to best communicate your data. Our chart color options are all pulled from [standard PatternFly color palettes](/design-foundations/charts), but the amount of hues within each color family are more limited to ensure that your chart colors are distinct enough from each other. Your data will determine the number of colors and the type of colors you will need.
+
-
-
-## The system
-
-
-
- ### How it works
- Although the system may seem complex, it is completely customizable. Once you choose the base colors you want to use and the total number of colors you will need, the system will still sort them correctly.
-
- For example, if you select four base colors (and therefore their four respective color families) the system will first use each base color in your chart. Once all base colors have been used, the system will select additional colors from the families you selected. The system alternates between choosing the lightest and darkest values of each family (shown in the animation). The color picking system will continue to alternate between the remaining lightest and darkest colors of each family. In variable-terms: #1a-d base colors, #2a-d [color]-100/[color]-500 alternating, #3a-d [color]-500/[color]-100 alternating, #4a-d [color]-200/[color]-400 alternating, and #5a-d [color]-400/[color]-200 alternating. No matter which base colors you select, this process will remain the same.
-
-
-
-
-
-
-
-
-## Color and pattern usage
-
-When selecting colors for your chart, there are a few important usage considerations to keep in mind. Within a color family, use the base color before the other, lighter or darker hues. Additionally, consider other basic guidelines:
-
-* **Green family:** Use to show success
-* **Red family:** Use to show failure
-* **Other color families:** Use for neutral purposes or categories
-* **Patterns:** Use to deemphasize a section of a chart. Do not use patterns for every section of a chart. Instead, patterns should be used for a single chart portion or for one type of portion (such as for all successes) to deemphasize that section and highlight the other section, which utilizes a solid color.
-
-
-**Note:** When showing success and failure together in a chart, the base color red and green do not pass accessibility requirements. When using both red and green base colors in a single chart, add a pattern to the section that you want to deemphasize to improve the chart’s accessibility.
-
-
-
-
-
-## Use cases
-
-
-
- ### Chart with few variables (1-7)
- When working with data that includes fewer than 7 variables, we recommend corresponding each with one of the available base colors. For example, if you collected data on how many sales were made per product at your organization during a period of time, a bar chart of your data may look similar to the following image.
-
-
-
-
-
-
-
-
- ### Chart with nested (grouped) variables
- If your dataset includes grouped variables, we recommend aligning each group to a color family. When you select more than one color family, your chart will arrange the order of colors as follows: blue, green, cyan, purple, gold, orange, red, and then gray. The colors would start over if there are more than 6 groups, returning back to the blue family.
-
- Shown in the following image is an example of this type of chart, which includes quarterly sales data broken down by geographical locations.
-
-
-
-
-
-
-
-
- ### Chart with many variables (>7)
- If the set of data includes more than 7 variables, we recommend applying a multichromatic order system, which includes all of the colors in the color system.
-
- Shown in the following image is an example of this type of chart, which displays the cost of living expenses during a period of time.
-
-
-
-
-
-
-
-
-## Using the system with one color family
-
-
-
- You can also use the color order system with one color family to create a monochromatic effect. We recommend using this approach for charts with nested variables. The order begins by going through each base color, then the lightest, darkest, second lightest, and second darkest colors in a family. In variable-terms, this order looks like: #1 [color]-300 (base color), #2 [color]-100, #3 [color]-500, #4 [color]-200, #5 [color]-400. Regardless of color family, hues will always follow this order.
-
-
-
-
-
+## Usage
+
+Our chart color system is completely customizable. Once you choose your base colors and the total number of colors you need, the system will sort them correctly.
+
+The system will first use each base color from the families you selected. Once all base colors have been used, the system alternates between choosing the lightest and darkest values of each family. The color picking system will continue to alternate between the remaining lightest and darkest colors of each family until it has reached the total number of colors you selected.
+
+No matter which base colors you select, this process will remain the same.
+
+### Example palette
+
+If you select 4 color families—blue, teal, green, and yellow color—your chart could look like this:
+
+
+
+
+
+1. Base colors: `--pf-t-chart-color-[colorname]-300`
+1. Lightest: `--pf-t-chart-color-[colorname]-100`
+1. Darkest: `--pf-t-chart-color-[colorname]-500`
+1. Second-lightest: `--pf-t-chart-color-[colorname]-200`
+1. Second-darkest: `--pf-t-chart-color-[colorname]-400`
+
+### Figma color scales
+
+To simplify the process of selecting hues for your design, we offer premade color scales in Figma for each color family. These color scales arrange a family's hues based off our recommendations, so you can use colors in the order that they appear within a color scale.
+
+
+
+
+
+### Best practices
+
+When selecting colors for your chart, adhere to these general rules:
+
+1. Within a color family, use the base color first. Then use the other lighter and darker hues.
+1. Some families have predetermined uses:
+ - **Blue:** Use to show success.
+ - **Red-orange:** Use to show failure. Do not use this family unless you're communicating failure.
+ - **Other colors:** Use for neutral purposes or categories.
+
+
+
+
+
+1. Use **patterns** to deemphasize a section of a chart.
+ - To best highlight chart sections that utilize solid colors, only use patterns for a single chart portion or type of portion. For example, you could use a pattern on your "success" portions to help "failure" portions stand out.
+ - Do not use patterns for every section of a chart.
+
+1. When using certain hues of red-orange and green together in a single chart, they might not always pass accessibility requirements. To improve your chart's accessibility in these cases, add a pattern to the section that you want to deemphasize.
+
+## Variations
+
+### Few chart variables
+When working with *7 or fewer variables*, align each variable to an available base color.
+
+For example, the following chart displays sales data per product over a period of time:
+
+
+
+
+
+### Many chart variables
+If the set of data includes *more than 7 variables*, apply a multichromatic order system that includes all of the colors in the color system.
+
+For example, the following chart displays the cost of living expenses over a period of time:
+
+
+
+
+
+### Nested or grouped chart variables
+If your dataset includes grouped variables, align each group to a color family. When you select multiple color families, your chart will automatically arrange the order of colors as follows: blue, green, teal, purple, yellow, orange, red orange, and then black. If there are more than 6 groups, this order would restart and continue to cycle.
+
+For example, the following chart includes quarterly sales data that is broken down by geographical locations:
+
+
+
+
+
+### Monochromatic charts
+
+To create a monochromatic effect in your chart, you can also apply a color order system within 1 color family. This effect is particularly helpful for charts with nested variables.
+
+
+
+
+
+Within a family, the color order follows the same pattern used when combining multiple families. The chart palette begins with the base hue, then uses the lightest, darkest, second lightest, and second darkest hues. Regardless of color family, hues will always follow this order.
+
+
+
+
-
-