diff --git a/packages/gatsby-theme-patternfly-org/index.js b/packages/gatsby-theme-patternfly-org/index.js
index baa178a5ca..01b09333c7 100644
--- a/packages/gatsby-theme-patternfly-org/index.js
+++ b/packages/gatsby-theme-patternfly-org/index.js
@@ -16,6 +16,7 @@ exports.mdxTypeDefs = `
     coreComponentName: String
     showTitle: Boolean
     releaseNoteTOC: Boolean
+    hideSource: Boolean
   }
   type MdxFields @dontInfer {
     slug: String!
diff --git a/packages/gatsby-theme-patternfly-org/templates/mdx.js b/packages/gatsby-theme-patternfly-org/templates/mdx.js
index 31469a9242..6348bc6dba 100644
--- a/packages/gatsby-theme-patternfly-org/templates/mdx.js
+++ b/packages/gatsby-theme-patternfly-org/templates/mdx.js
@@ -40,7 +40,7 @@ const MDXTemplate = ({ data, location, pageContext }) => {
         katacodaId={location.state.katacodaId} />
     );
   }
-  const { cssPrefix, hideTOC, beta, optIn, hideDarkMode, showTitle, releaseNoteTOC } = data.doc.frontmatter;
+  const { cssPrefix, hideTOC, beta, optIn, hideDarkMode, showTitle, releaseNoteTOC, hideSource } = data.doc.frontmatter;
   const { componentName, navSection } = data.doc.fields;
   const { title, source, tableOfContents, htmlExamples, propComponents = [''], showBanner, showGdprBanner, sourceLink } = pageContext;
   const props = data.props && data.props.nodes && propComponents
@@ -88,9 +88,11 @@ const MDXTemplate = ({ data, location, pageContext }) => {
       )}
       {!hideTOC && (
         <React.Fragment>
-          <label id="source-label" className="ws-framework-title pf-c-title" aria-hidden>
-            {getSourceTitle(source)}
-          </label>
+          {!hideSource && (
+            <label id="source-label" className="ws-framework-title pf-c-title" aria-hidden>
+              {getSourceTitle(source)}
+            </label>
+          )}
           <Title headingLevel="h1" id="component-title" size="4xl" className="ws-page-title" aria-labelledby="source-label component-title">{title}</Title>
           {optIn && (
             <Alert
@@ -275,6 +277,7 @@ export const pageQuery = graphql`
         hideDarkMode
         showTitle
         releaseNoteTOC
+        hideSource
       }
       fields {
         navSection
diff --git a/packages/v4/src/content/design-guidelines/styles/colors/ColorFamily.css b/packages/v4/src/content/design-guidelines/styles/colors/ColorFamily.css
new file mode 100644
index 0000000000..3f67b86a3d
--- /dev/null
+++ b/packages/v4/src/content/design-guidelines/styles/colors/ColorFamily.css
@@ -0,0 +1,37 @@
+/* Specificity YAY */
+.pf-c-accordion__toggle-icon.ws-color-family-toggle-icon {
+  font-size: var(--pf-global--FontSize--xs);
+  margin-right: var(--pf-c-accordion__toggle--PaddingLeft)
+}
+
+/* Specificity YAY */
+.pf-c-accordion__toggle.ws-color-family-content {
+  font-size: var(--pf-global--FontSize--xs);
+  display: inline-block;
+  padding-bottom: var(--pf-global--spacer--lg);
+}
+
+/* Specificity YAY */
+.pf-c-accordion__toggle.ws-color-family-content:hover,
+.pf-c-accordion__toggle.ws-color-family-accordion-toggle:hover {
+  background-color: unset;
+}
+
+.ws-color-family-accordion-toggle {
+  cursor: pointer;
+}
+
+.pf-c-accordion__toggle > .ws-color-family-label {
+  display: inline-block;
+  font-size: var(--pf-global--FontSize--sm);
+  font-weight: bold;
+  margin-top: var(--pf-global--spacer--md);
+  margin-bottom: var(--pf-global--spacer--sm);
+}
+
+/* Specificity YAY */
+.ws-color-family-toggle.pf-c-accordion__toggle::before,
+.ws-color-family-accordion-toggle.pf-c-accordion__toggle::before {
+  content: none;
+  width: 0;
+}
\ No newline at end of file
diff --git a/packages/v4/src/content/design-guidelines/styles/colors/ColorFamily.js b/packages/v4/src/content/design-guidelines/styles/colors/ColorFamily.js
new file mode 100644
index 0000000000..d518cbd121
--- /dev/null
+++ b/packages/v4/src/content/design-guidelines/styles/colors/ColorFamily.js
@@ -0,0 +1,123 @@
+import React from 'react';
+import tokens from '@patternfly/react-tokens/dist/variables/esm/patternfly_variables';
+import AngleRightIcon from '@patternfly/react-icons/dist/js/icons/angle-right-icon';
+import { css } from '@patternfly/react-styles';
+import { normalizeColor, getContrastRatio } from './helpers';
+import './ColorFamily.css';
+
+const palettePrefix = '--pf-global--palette--';
+
+export function ColorFamily({
+  title,
+  family
+}) {
+  const [expanded, setExpanded] = React.useState([]);
+
+  const familyTokens = family === 'shadows'
+    ? tokens[':root'].filter(token => /--pf-global--BoxShadow--(sm|md|lg)$/.test(token.property))
+    : tokens[':root'].filter(token => token.property.includes(`${palettePrefix}${family}`));
+  if (family === 'black') {
+    const whiteToken = tokens[':root'].find(token => token.property === '--pf-global--palette--white');
+    familyTokens.unshift(whiteToken);
+  }
+
+  const expandAll = () => {
+    if (expanded.length > 0) {
+      setExpanded([]);
+    } else {
+      setExpanded(familyTokens.map(token => token.property));
+    }
+  };
+
+  const expand = name => {
+    if (expanded.includes(name)) {
+      setExpanded(expanded.filter(token => token !== name));
+    } else {
+      setExpanded(expanded.concat(name));
+    }
+  };
+
+  return (
+    <React.Fragment>
+      <dl className="pf-c-accordion pf-u-p-0">
+        <dt
+          className={css(
+            'pf-c-accordion__toggle',
+            'ws-color-family-accordion-toggle',
+            expanded.length === familyTokens.length && 'pf-m-expanded'
+          )}
+          onClick={expandAll}
+        >
+          <h3 className="pf-c-title pf-m-xl">
+            <AngleRightIcon className="pf-c-accordion__toggle-icon ws-color-family-toggle-icon" />
+            {title}
+          </h3>
+        </dt>
+        {familyTokens.map(token => {
+          const isExpanded = expanded.includes(token.property);
+          const isShadows = family === 'shadows';
+          const tokenClass = css(
+            'pf-c-accordion__toggle',
+            'ws-color-family-toggle',
+            isExpanded && 'pf-m-expanded'
+          );
+          const itemStyle = { background: `var(${token.property})`, fontSize: 'var(--pf-global--FontSize--sm)' };
+          if (isShadows) {
+            itemStyle.marginBottom = '1rem';
+            itemStyle.boxShadow = `var(${token.property})`;
+          }
+          else if (getContrastRatio(token.value, '#151515') <= 4.5) {
+            itemStyle.color = '#fafafa';
+          }
+          const expandedStyle = {};
+          if (isExpanded && !isShadows) {
+            const borderLeftWidth = 'var(--pf-c-accordion__toggle--m-expanded--BorderWidth)';
+            const borderColor = `var(${token.property})`;
+            const borderStyle = 'solid';
+            itemStyle.borderLeftWidth = borderLeftWidth;
+            itemStyle.borderColor = borderColor;
+            itemStyle.borderStyle = borderStyle;
+            expandedStyle.borderLeftWidth = borderLeftWidth;
+            expandedStyle.borderColor = borderColor;
+            expandedStyle.borderStyle = borderStyle;
+          }
+
+          return (
+            <React.Fragment key={token.property}>
+              <dt
+                className={`${tokenClass} ws-color-family-accordion-toggle`}
+                style={itemStyle}
+                onClick={() => expand(token.property)}
+                id={!isShadows ? token.value.replace('#', 'color-') : token.property.replace('--pf-global--BoxShadow--', '')}
+              >
+                <div>
+                  <AngleRightIcon className="pf-c-accordion__toggle-icon ws-color-family-toggle-icon" />
+                  {token.property
+                    .replace(palettePrefix, '')
+                    .replace('--pf-global--BoxShadow--', 'box shadow ')}
+                </div>
+                {!isShadows && (
+                  <div className="ws-color-family-color">
+                    #{normalizeColor(token.value.toUpperCase())}
+                  </div>
+                )}
+              </dt>
+              {isExpanded && (
+                <dd className={`${tokenClass} ws-color-family-content`} style={expandedStyle}>
+                  <label className="ws-color-family-label">CSS variables</label>
+                  {tokens[':root']
+                    .filter(t => t.value === token.value)
+                    .map(t => t.property)
+                    .sort()
+                    .map(tokenName => 
+                      <div key={tokenName}>{tokenName}</div>
+                    )}
+                </dd>
+              )}
+            </React.Fragment>
+          );
+        })}
+      </dl>
+    </React.Fragment>
+  );
+}
\ No newline at end of file
diff --git a/packages/v4/src/content/design-guidelines/styles/colors/ColorSwatch.css b/packages/v4/src/content/design-guidelines/styles/colors/ColorSwatch.css
new file mode 100644
index 0000000000..c2e98aab86
--- /dev/null
+++ b/packages/v4/src/content/design-guidelines/styles/colors/ColorSwatch.css
@@ -0,0 +1,52 @@
+.ws-color-swatch {
+  display: flex;
+  margin-top: var(--pf-global--spacer--md);
+}
+
+.ws-color-swatch > svg {
+  flex: 0 0 44px;
+  margin-right: var(--pf-global--spacer--md);
+  border-radius: 50%;
+}
+
+.ws-color-swatch > svg:hover {
+  cursor: pointer;
+  box-shadow: var(--pf-global--BoxShadow--lg);
+  /* box-shadow: 0 0 0 0.0625rem rgba(3, 3, 3, 0.05), 0 0.25rem 0.5rem 0.25rem rgba(3, 3, 3, 0.06); */
+}
+
+.ws-color-swatch-description {
+  display: flex;
+  flex-direction: column;
+  align-content: space-between;
+}
+
+.ws-color-swatch-description-label {
+  font-size: var(--pf-global--FontSize--xs);
+  font-weight: bold;
+}
+
+.ws-color-swatch-description-code {
+  display: inline-block;
+  font-size: var(--pf-global--FontSize--xs);
+  padding-left: var(--pf-global--spacer--sm);
+  padding-right: var(--pf-global--spacer--sm);
+  border: 2px solid #d1d1d1;
+  background: var(--pf-global--palette--black-150);
+}
+
+.ws-color-swatch-popover {
+  font-size: var(--pf-global--FontSize--sm);
+}
+
+.ws-color-swatch-popover-label {
+  display: inline-block;
+  padding-top: var(--pf-global--spacer--md);
+  padding-bottom: var(--pf-global--spacer--xs);
+  font-weight: bold;
+}
+
+.ws-color-swatch-popover-code {
+  white-space: nowrap;
+  margin-bottom: var(--pf-global--spacer--md);
+}
\ No newline at end of file
diff --git a/packages/v4/src/content/design-guidelines/styles/colors/ColorSwatch.js b/packages/v4/src/content/design-guidelines/styles/colors/ColorSwatch.js
new file mode 100644
index 0000000000..77fa30dc51
--- /dev/null
+++ b/packages/v4/src/content/design-guidelines/styles/colors/ColorSwatch.js
@@ -0,0 +1,84 @@
+import React from 'react';
+import tokens from '@patternfly/react-tokens/dist/variables/esm/patternfly_variables';
+import { Popover } from '@patternfly/react-core';
+import { normalizeColor } from './helpers';
+import './ColorSwatch.css';
+
+const handSVG = (
+  <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd" transform="translate(22, 22)">
+      <g transform="translate(-108.000000, -493.000000)">
+          <g transform="translate(80.000000, 465.000000)">
+              <g transform="translate(28.000000, 28.000000)">
+                <path d="M3.3,12.4 C3,12 2.7,11.3 2.1,10.4 C1.8,9.9 0.9,8.9 0.6,8.5 C0.4,8.1 0.4,7.9 0.5,7.5 C0.6,6.9 1.2,6.4 1.9,6.4 C2.4,6.4 2.9,6.8 3.3,7.1 C3.5,7.3 3.8,7.7 4,7.9 C4.2,8.1 4.2,8.2 4.4,8.4 C4.6,8.7 4.7,8.9 4.6,8.5 C4.5,8 4.4,7.2 4.2,6.4 C4.1,5.8 4,5.7 3.9,5.3 C3.8,4.8 3.7,4.5 3.6,4 C3.5,3.7 3.4,2.9 3.3,2.5 C3.2,2 3.2,1.1 3.6,0.7 C3.9,0.4 4.5,0.3 4.9,0.5 C5.4,0.8 5.7,1.5 5.8,1.8 C6,2.3 6.2,3 6.3,3.8 C6.5,4.8 6.8,6.3 6.8,6.6 C6.8,6.2 6.7,5.5 6.8,5.1 C6.9,4.8 7.1,4.4 7.5,4.3 C7.8,4.2 8.1,4.2 8.4,4.2 C8.7,4.3 9,4.5 9.2,4.7 C9.6,5.3 9.6,6.6 9.6,6.5 C9.7,6.1 9.7,5.3 9.9,4.9 C10,4.7 10.4,4.5 10.6,4.4 C10.9,4.3 11.3,4.3 11.6,4.4 C11.8,4.4 12.2,4.7 12.3,4.9 C12.5,5.2 12.6,6.2 12.7,6.6 C12.7,6.7 12.8,6.2 13,5.9 C13.4,5.3 14.8,5.1 14.9,6.5 C14.9,7.2 14.9,7.1 14.9,7.6 C14.9,8.1 14.9,8.4 14.9,8.8 C14.9,9.2 14.8,10.1 14.7,10.5 C14.6,10.8 14.3,11.5 14,11.9 C14,11.9 12.9,13.1 12.8,13.7 C12.7,14.3 12.7,14.3 12.7,14.7 C12.7,15.1 12.8,15.6 12.8,15.6 C12.8,15.6 12,15.7 11.6,15.6 C11.2,15.5 10.7,14.8 10.6,14.5 C10.4,14.2 10.1,14.2 9.9,14.5 C9.7,14.9 9.2,15.6 8.8,15.6 C8.1,15.7 6.7,15.6 5.7,15.6 C5.7,15.6 5.9,14.6 5.5,14.2 C5.2,13.9 4.7,13.4 4.4,13.1 L3.3,12.4 Z" fill="#FFFFFF" fillRule="nonzero"></path>
+                <path d="M3.3,12.4 C3,12 2.7,11.3 2.1,10.4 C1.8,9.9 0.9,8.9 0.6,8.5 C0.4,8.1 0.4,7.9 0.5,7.5 C0.6,6.9 1.2,6.4 1.9,6.4 C2.4,6.4 2.9,6.8 3.3,7.1 C3.5,7.3 3.8,7.7 4,7.9 C4.2,8.1 4.2,8.2 4.4,8.4 C4.6,8.7 4.7,8.9 4.6,8.5 C4.5,8 4.4,7.2 4.2,6.4 C4.1,5.8 4,5.7 3.9,5.3 C3.8,4.8 3.7,4.5 3.6,4 C3.5,3.7 3.4,2.9 3.3,2.5 C3.2,2 3.2,1.1 3.6,0.7 C3.9,0.4 4.5,0.3 4.9,0.5 C5.4,0.8 5.7,1.5 5.8,1.8 C6,2.3 6.2,3 6.3,3.8 C6.5,4.8 6.8,6.3 6.8,6.6 C6.8,6.2 6.7,5.5 6.8,5.1 C6.9,4.8 7.1,4.4 7.5,4.3 C7.8,4.2 8.1,4.2 8.4,4.2 C8.7,4.3 9,4.5 9.2,4.7 C9.6,5.3 9.6,6.6 9.6,6.5 C9.7,6.1 9.7,5.3 9.9,4.9 C10,4.7 10.4,4.5 10.6,4.4 C10.9,4.3 11.3,4.3 11.6,4.4 C11.8,4.4 12.2,4.7 12.3,4.9 C12.5,5.2 12.6,6.2 12.7,6.6 C12.7,6.7 12.8,6.2 13,5.9 C13.4,5.3 14.8,5.1 14.9,6.5 C14.9,7.2 14.9,7.1 14.9,7.6 C14.9,8.1 14.9,8.4 14.9,8.8 C14.9,9.2 14.8,10.1 14.7,10.5 C14.6,10.8 14.3,11.5 14,11.9 C14,11.9 12.9,13.1 12.8,13.7 C12.7,14.3 12.7,14.3 12.7,14.7 C12.7,15.1 12.8,15.6 12.8,15.6 C12.8,15.6 12,15.7 11.6,15.6 C11.2,15.5 10.7,14.8 10.6,14.5 C10.4,14.2 10.1,14.2 9.9,14.5 C9.7,14.9 9.2,15.6 8.8,15.6 C8.1,15.7 6.7,15.6 5.7,15.6 C5.7,15.6 5.9,14.6 5.5,14.2 C5.2,13.9 4.7,13.4 4.4,13.1 L3.3,12.4 Z" stroke="#000000" strokeWidth="0.75" strokeLinecap="round" strokeLinejoin="round"></path>
+                <line x1="11.6" y1="12.7" x2="11.6" y2="9.3" id="Path" stroke="#000000" strokeWidth="0.75" strokeLinecap="round"></line>
+                <line x1="9.6" y1="12.7" x2="9.5" y2="9.3" id="Path" stroke="#000000" strokeWidth="0.75" strokeLinecap="round"></line>
+                <line x1="7.6" y1="9.3" x2="7.6" y2="12.7" id="Path" stroke="#000000" strokeWidth="0.75" strokeLinecap="round"></line>
+              </g>
+          </g>
+      </g>
+  </g>
+);
+
+export function ColorSwatch({
+  label,
+  color,
+  caption,
+  children
+}) {
+  const isBoxShadow = color.includes('BoxShadow');
+  const token = tokens[":root"].find(token => token.property === color);
+  const popoverContent = (
+    <div className="ws-color-swatch-popover">
+      <label className="ws-color-swatch-popover-label">Global CSS variable</label>
+      <code className="ws-color-swatch-description-code ws-color-swatch-popover-code">
+        {color}
+      </code>
+      <p>
+        <a href={token.value.replace('#', '#color-')}>
+          See all global CSS color variables
+        </a>
+      </p>
+      {token && (
+        <React.Fragment>
+          <label className="ws-color-swatch-popover-label">
+            {isBoxShadow ? 'Value' : 'Hex value'}
+          </label>
+          <p>
+            {isBoxShadow ? token.value : `#${normalizeColor(token.value)}`}
+          </p>
+        </React.Fragment>
+      )}
+      <label className="ws-color-swatch-popover-label">Usage</label>
+      <p>{children}</p>
+    </div>
+  );
+
+  return (
+    <div className="ws-color-swatch">
+      <Popover
+        position="right"
+        aria-label="Global CSS variable"
+        bodyContent={popoverContent}
+      >
+        <svg
+          width="44px"
+          height="44px"
+          viewBox="0 0 44 44"
+          style={isBoxShadow ? { boxShadow: `var(${color})` } : {}}
+        >
+          <circle cx="22" cy="22" r="22" style={{ fill: isBoxShadow ? 'white' : `var(${color})`, stroke: 'var(--pf-global--palette--black-300)' }} />
+          {label === 'Hover' && handSVG}
+        </svg>
+      </Popover>
+      <div className="ws-color-swatch-description">
+        <label className="ws-color-swatch-description-label">
+          {label || token && `#${normalizeColor(token.value)}`} {caption && `(${caption})`}
+        </label>
+        <code className="ws-color-swatch-description-code">
+          {color}
+        </code>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/packages/v4/src/content/design-guidelines/styles/colors/colors.css b/packages/v4/src/content/design-guidelines/styles/colors/colors.css
index 580e5073fe..ec757f123d 100644
--- a/packages/v4/src/content/design-guidelines/styles/colors/colors.css
+++ b/packages/v4/src/content/design-guidelines/styles/colors/colors.css
@@ -1,948 +1,8 @@
-.colors-in-context {
-  padding: 16px 32px;
-  background-color: #fff;
+.ws-colors-gridtext {
+  max-width: 680px;
 }
 
-.colors-theme--light h3, .colors-theme--light p {
-  margin-bottom: var(--pf-global--spacer--sm);
-}
-.colors-theme--light .pf-c-alert__title {
-  margin: 0 !important;
-  font-size: var(--pf-c-alert__title--FontSize) !important;
-}
-
-.colors-theme--color-primary-100 {
-  height: 65px;
-  width: 65px;
-  background-color: var(--pf-global--primary-color--100);
-}
-@media screen and (min-width: 768px) {
-  .colors-theme--color-primary-100 {
-    height: 85px;
-    width: 85px;
-  }
-}
-@media screen and (min-width: 1200px) {
-  .colors-theme--color-primary-100 {
-    height: 100px;
-    width: 100px;
-  }
-}
-.colors-theme--color-primary-200 {
-  height: 65px;
-  width: 65px;
-  background-color: var(--pf-global--primary-color--200);
-}
-@media screen and (min-width: 768px) {
-  .colors-theme--color-primary-200 {
-    height: 85px;
-    width: 85px;
-  }
-}
-@media screen and (min-width: 1200px) {
-  .colors-theme--color-primary-200 {
-    height: 100px;
-    width: 100px;
-  }
-}
-
-.colors-theme--color-secondary-100 {
-  height: 65px;
-  width: 65px;
-  background-color: var(--pf-global--secondary-color--100);
-}
-@media screen and (min-width: 768px) {
-  .colors-theme--color-secondary-100 {
-    height: 85px;
-    width: 85px;
-  }
-}
-@media screen and (min-width: 1200px) {
-  .colors-theme--color-secondary-100 {
-    height: 100px;
-    width: 100px;
-  }
-}
-
-.colors-theme--color-text-100 {
-  height: 65px;
-  width: 65px;
-  background-color: var(--pf-global--Color--100);
-}
-@media screen and (min-width: 768px) {
-  .colors-theme--color-text-100 {
-    height: 85px;
-    width: 85px;
-  }
-}
-@media screen and (min-width: 1200px) {
-  .colors-theme--color-text-100 {
-    height: 100px;
-    width: 100px;
-  }
-}
-.colors-theme--color-text-200 {
-  height: 65px;
-  width: 65px;
-  background-color: var(--pf-global--Color--200);
-}
-@media screen and (min-width: 768px) {
-  .colors-theme--color-text-200 {
-    height: 85px;
-    width: 85px;
-  }
-}
-@media screen and (min-width: 1200px) {
-  .colors-theme--color-text-200 {
-    height: 100px;
-    width: 100px;
-  }
-}
-.colors-theme--color-text-300 {
-  height: 65px;
-  width: 65px;
-  background-color: var(--pf-global--Color--300);
-}
-@media screen and (min-width: 768px) {
-  .colors-theme--color-text-300 {
-    height: 85px;
-    width: 85px;
-  }
-}
-@media screen and (min-width: 1200px) {
-  .colors-theme--color-text-300 {
-    height: 100px;
-    width: 100px;
-  }
-}
-.colors-theme--color-link-text {
-  height: 65px;
-  width: 65px;
-  background-color: var(--pf-global--primary-color--100);
-}
-@media screen and (min-width: 768px) {
-  .colors-theme--color-link-text {
-    height: 85px;
-    width: 85px;
-  }
-}
-@media screen and (min-width: 1200px) {
-  .colors-theme--color-link-text {
-    height: 100px;
-    width: 100px;
-  }
-}
-.colors-theme--color-link-hover {
-  height: 65px;
-  width: 65px;
-  background-color: var(--pf-global--primary-color--200);
-}
-@media screen and (min-width: 768px) {
-  .colors-theme--color-link-hover {
-    height: 85px;
-    width: 85px;
-  }
-}
-@media screen and (min-width: 1200px) {
-  .colors-theme--color-link-hover {
-    height: 100px;
-    width: 100px;
-  }
-}
-.colors-theme--color-icons {
-  height: 65px;
-  width: 65px;
-  background-color: var(--pf-global--icon--Color--light);
-}
-@media screen and (min-width: 768px) {
-  .colors-theme--color-icons {
-    height: 85px;
-    width: 85px;
-  }
-}
-@media screen and (min-width: 1200px) {
-  .colors-theme--color-icons {
-    height: 100px;
-    width: 100px;
-  }
-}
-.colors-theme--color-alerts--success {
-  height: 65px;
-  width: 65px;
-  background-color: var(--pf-global--success-color--100);
-}
-@media screen and (min-width: 768px) {
-  .colors-theme--color-alerts--success {
-    height: 85px;
-    width: 85px;
-  }
-}
-@media screen and (min-width: 1200px) {
-  .colors-theme--color-alerts--success {
-    height: 100px;
-    width: 100px;
-  }
-}
-.colors-theme--color-alerts--success-icon {
-  height: 65px;
-  width: 65px;
-  background-color: var(--pf-global--success-color--200);
-}
-@media screen and (min-width: 768px) {
-  .colors-theme--color-alerts--success-icon {
-    height: 85px;
-    width: 85px;
-  }
-}
-@media screen and (min-width: 1200px) {
-  .colors-theme--color-alerts--success-icon {
-    height: 100px;
-    width: 100px;
-  }
-}
-.colors-theme--color-alerts--info {
-  height: 65px;
-  width: 65px;
-  background-color: var(--pf-global--info-color--100);
-}
-@media screen and (min-width: 768px) {
-  .colors-theme--color-alerts--info {
-    height: 85px;
-    width: 85px;
-  }
-}
-@media screen and (min-width: 1200px) {
-  .colors-theme--color-alerts--info {
-    height: 100px;
-    width: 100px;
-  }
-}
-.colors-theme--color-alerts--info-icon {
-  height: 65px;
-  width: 65px;
-  background-color: var(--pf-global--info-color--200);
-}
-@media screen and (min-width: 768px) {
-  .colors-theme--color-alerts--info-icon {
-    height: 85px;
-    width: 85px;
-  }
-}
-@media screen and (min-width: 1200px) {
-  .colors-theme--color-alerts--info-icon {
-    height: 100px;
-    width: 100px;
-  }
-}
-.colors-theme--color-alerts--warning {
-  height: 65px;
-  width: 65px;
-  background-color: var(--pf-global--warning-color--100);
-}
-@media screen and (min-width: 768px) {
-  .colors-theme--color-alerts--warning {
-    height: 85px;
-    width: 85px;
-  }
-}
-@media screen and (min-width: 1200px) {
-  .colors-theme--color-alerts--warning {
-    height: 100px;
-    width: 100px;
-  }
-}
-.colors-theme--color-alerts--warning-icon {
-  height: 65px;
-  width: 65px;
-  background-color: var(--pf-global--warning-color--200);
-}
-@media screen and (min-width: 768px) {
-  .colors-theme--color-alerts--warning-icon {
-    height: 85px;
-    width: 85px;
-  }
-}
-@media screen and (min-width: 1200px) {
-  .colors-theme--color-alerts--warning-icon {
-    height: 100px;
-    width: 100px;
-  }
-}
-.colors-theme--color-alerts--danger {
-  height: 65px;
-  width: 65px;
-  background-color: var(--pf-global--danger-color--100);
-}
-@media screen and (min-width: 768px) {
-  .colors-theme--color-alerts--danger {
-    height: 85px;
-    width: 85px;
-  }
-}
-@media screen and (min-width: 1200px) {
-  .colors-theme--color-alerts--danger {
-    height: 100px;
-    width: 100px;
-  }
-}
-.colors-theme--color-alerts--danger-icon {
-  height: 65px;
-  width: 65px;
-  background-color: var(--pf-global--danger-color--300);
-}
-@media screen and (min-width: 768px) {
-  .colors-theme--color-alerts--danger-icon {
-    height: 85px;
-    width: 85px;
-  }
-}
-@media screen and (min-width: 1200px) {
-  .colors-theme--color-alerts--danger-icon {
-    height: 100px;
-    width: 100px;
-  }
-}
-
-/*
-** Gallery styles
-*/
-.chart-colors-gallery--blue-1 {
-  height: 65px;
-  width: 65px;
-  background-color: #8BC1F7;
-}
-@media screen and (min-width: 768px) {
-  .chart-colors-gallery--blue-1 {
-    height: 85px;
-    width: 85px;
-  }
-}
-@media screen and (min-width: 1200px) {
-  .chart-colors-gallery--blue-1 {
-    height: 100px;
-    width: 100px;
-  }
-}
-.chart-colors-gallery--blue-2 {
-  height: 65px;
-  width: 65px;
-  background-color: #519DE9;
-}
-@media screen and (min-width: 768px) {
-  .chart-colors-gallery--blue-2 {
-    height: 85px;
-    width: 85px;
-  }
-}
-@media screen and (min-width: 1200px) {
-  .chart-colors-gallery--blue-2 {
-    height: 100px;
-    width: 100px;
-  }
-}
-.chart-colors-gallery--blue-3 {
-  height: 65px;
-  width: 65px;
-  background-color: #0066cc;
-}
-@media screen and (min-width: 768px) {
-  .chart-colors-gallery--blue-3 {
-    height: 85px;
-    width: 85px;
-  }
-}
-@media screen and (min-width: 1200px) {
-  .chart-colors-gallery--blue-3 {
-    height: 100px;
-    width: 100px;
-  }
-}
-.chart-colors-gallery--blue-4 {
-  height: 65px;
-  width: 65px;
-  background-color: #004B95;
-}
-@media screen and (min-width: 768px) {
-  .chart-colors-gallery--blue-4 {
-    height: 85px;
-    width: 85px;
-  }
-}
-@media screen and (min-width: 1200px) {
-  .chart-colors-gallery--blue-4 {
-    height: 100px;
-    width: 100px;
-  }
-}
-.chart-colors-gallery--blue-5 {
-  height: 65px;
-  width: 65px;
-  background-color: #002F5D;
-}
-@media screen and (min-width: 768px) {
-  .chart-colors-gallery--blue-5 {
-    height: 85px;
-    width: 85px;
-  }
-}
-@media screen and (min-width: 1200px) {
-  .chart-colors-gallery--blue-5 {
-    height: 100px;
-    width: 100px;
-  }
-}
-.chart-colors-gallery--green-1 {
-  height: 65px;
-  width: 65px;
-  background-color: #BDE2B9;
-}
-@media screen and (min-width: 768px) {
-  .chart-colors-gallery--green-1 {
-    height: 85px;
-    width: 85px;
-  }
-}
-@media screen and (min-width: 1200px) {
-  .chart-colors-gallery--green-1 {
-    height: 100px;
-    width: 100px;
-  }
-}
-.chart-colors-gallery--green-2 {
-  height: 65px;
-  width: 65px;
-  background-color: #7CC674;
-}
-@media screen and (min-width: 768px) {
-  .chart-colors-gallery--green-2 {
-    height: 85px;
-    width: 85px;
-  }
-}
-@media screen and (min-width: 1200px) {
-  .chart-colors-gallery--green-2 {
-    height: 100px;
-    width: 100px;
-  }
-}
-.chart-colors-gallery--green-3 {
-  height: 65px;
-  width: 65px;
-  background-color: #4CB140;
-}
-@media screen and (min-width: 768px) {
-  .chart-colors-gallery--green-3 {
-    height: 85px;
-    width: 85px;
-  }
-}
-@media screen and (min-width: 1200px) {
-  .chart-colors-gallery--green-3 {
-    height: 100px;
-    width: 100px;
-  }
-}
-.chart-colors-gallery--green-4 {
-  height: 65px;
-  width: 65px;
-  background-color: #38812f;
-}
-@media screen and (min-width: 768px) {
-  .chart-colors-gallery--green-4 {
-    height: 85px;
-    width: 85px;
-  }
-}
-@media screen and (min-width: 1200px) {
-  .chart-colors-gallery--green-4 {
-    height: 100px;
-    width: 100px;
-  }
-}
-.chart-colors-gallery--green-5 {
-  height: 65px;
-  width: 65px;
-  background-color: #23511e;
-}
-@media screen and (min-width: 768px) {
-  .chart-colors-gallery--green-5 {
-    height: 85px;
-    width: 85px;
-  }
-}
-@media screen and (min-width: 1200px) {
-  .chart-colors-gallery--green-5 {
-    height: 100px;
-    width: 100px;
-  }
-}
-.chart-colors-gallery--cyan-1 {
-  height: 65px;
-  width: 65px;
-  background-color: #A2D9D9;
-}
-@media screen and (min-width: 768px) {
-  .chart-colors-gallery--cyan-1 {
-    height: 85px;
-    width: 85px;
-  }
-}
-@media screen and (min-width: 1200px) {
-  .chart-colors-gallery--cyan-1 {
-    height: 100px;
-    width: 100px;
-  }
-}
-.chart-colors-gallery--cyan-2 {
-  height: 65px;
-  width: 65px;
-  background-color: #73C5C5;
-}
-@media screen and (min-width: 768px) {
-  .chart-colors-gallery--cyan-2 {
-    height: 85px;
-    width: 85px;
-  }
-}
-@media screen and (min-width: 1200px) {
-  .chart-colors-gallery--cyan-2 {
-    height: 100px;
-    width: 100px;
-  }
-}
-.chart-colors-gallery--cyan-3 {
-  height: 65px;
-  width: 65px;
-  background-color: #009596;
-}
-@media screen and (min-width: 768px) {
-  .chart-colors-gallery--cyan-3 {
-    height: 85px;
-    width: 85px;
-  }
-}
-@media screen and (min-width: 1200px) {
-  .chart-colors-gallery--cyan-3 {
-    height: 100px;
-    width: 100px;
-  }
-}
-.chart-colors-gallery--cyan-4 {
-  height: 65px;
-  width: 65px;
-  background-color: #005f60;
-}
-@media screen and (min-width: 768px) {
-  .chart-colors-gallery--cyan-4 {
-    height: 85px;
-    width: 85px;
-  }
-}
-@media screen and (min-width: 1200px) {
-  .chart-colors-gallery--cyan-4 {
-    height: 100px;
-    width: 100px;
-  }
-}
-.chart-colors-gallery--cyan-5 {
-  height: 65px;
-  width: 65px;
-  background-color: #003737;
-}
-@media screen and (min-width: 768px) {
-  .chart-colors-gallery--cyan-5 {
-    height: 85px;
-    width: 85px;
-  }
-}
-@media screen and (min-width: 1200px) {
-  .chart-colors-gallery--cyan-5 {
-    height: 100px;
-    width: 100px;
-  }
-}
-.chart-colors-gallery--purple-1 {
-  height: 65px;
-  width: 65px;
-  background-color: #B2B0EA;
-}
-@media screen and (min-width: 768px) {
-  .chart-colors-gallery--purple-1 {
-    height: 85px;
-    width: 85px;
-  }
-}
-@media screen and (min-width: 1200px) {
-  .chart-colors-gallery--purple-1 {
-    height: 100px;
-    width: 100px;
-  }
-}
-.chart-colors-gallery--purple-2 {
-  height: 65px;
-  width: 65px;
-  background-color: #8481DD;
-}
-@media screen and (min-width: 768px) {
-  .chart-colors-gallery--purple-2 {
-    height: 85px;
-    width: 85px;
-  }
-}
-@media screen and (min-width: 1200px) {
-  .chart-colors-gallery--purple-2 {
-    height: 100px;
-    width: 100px;
-  }
-}
-.chart-colors-gallery--purple-3 {
-  height: 65px;
-  width: 65px;
-  background-color: #5752D1;
-}
-@media screen and (min-width: 768px) {
-  .chart-colors-gallery--purple-3 {
-    height: 85px;
-    width: 85px;
-  }
-}
-@media screen and (min-width: 1200px) {
-  .chart-colors-gallery--purple-3 {
-    height: 100px;
-    width: 100px;
-  }
-}
-.chart-colors-gallery--purple-4 {
-  height: 65px;
-  width: 65px;
-  background-color: #3C3D99;
-}
-@media screen and (min-width: 768px) {
-  .chart-colors-gallery--purple-4 {
-    height: 85px;
-    width: 85px;
-  }
-}
-@media screen and (min-width: 1200px) {
-  .chart-colors-gallery--purple-4 {
-    height: 100px;
-    width: 100px;
-  }
-}
-.chart-colors-gallery--purple-5 {
-  height: 65px;
-  width: 65px;
-  background-color: #2A265F;
-}
-@media screen and (min-width: 768px) {
-  .chart-colors-gallery--purple-5 {
-    height: 85px;
-    width: 85px;
-  }
-}
-@media screen and (min-width: 1200px) {
-  .chart-colors-gallery--purple-5 {
-    height: 100px;
-    width: 100px;
-  }
-}
-.chart-colors-gallery--gold-1 {
-  height: 65px;
-  width: 65px;
-  background-color: #F9E0A2;
-}
-@media screen and (min-width: 768px) {
-  .chart-colors-gallery--gold-1 {
-    height: 85px;
-    width: 85px;
-  }
-}
-@media screen and (min-width: 1200px) {
-  .chart-colors-gallery--gold-1 {
-    height: 100px;
-    width: 100px;
-  }
-}
-.chart-colors-gallery--gold-2 {
-  height: 65px;
-  width: 65px;
-  background-color: #F6D173;
-}
-@media screen and (min-width: 768px) {
-  .chart-colors-gallery--gold-2 {
-    height: 85px;
-    width: 85px;
-  }
-}
-@media screen and (min-width: 1200px) {
-  .chart-colors-gallery--gold-2 {
-    height: 100px;
-    width: 100px;
-  }
-}
-.chart-colors-gallery--gold-3 {
-  height: 65px;
-  width: 65px;
-  background-color: #F4C145;
-}
-@media screen and (min-width: 768px) {
-  .chart-colors-gallery--gold-3 {
-    height: 85px;
-    width: 85px;
-  }
-}
-@media screen and (min-width: 1200px) {
-  .chart-colors-gallery--gold-3 {
-    height: 100px;
-    width: 100px;
-  }
-}
-.chart-colors-gallery--gold-4 {
-  height: 65px;
-  width: 65px;
-  background-color: #F0AB00;
-}
-@media screen and (min-width: 768px) {
-  .chart-colors-gallery--gold-4 {
-    height: 85px;
-    width: 85px;
-  }
-}
-@media screen and (min-width: 1200px) {
-  .chart-colors-gallery--gold-4 {
-    height: 100px;
-    width: 100px;
-  }
-}
-.chart-colors-gallery--gold-5 {
-  height: 65px;
-  width: 65px;
-  background-color: #C58C00;
-}
-@media screen and (min-width: 768px) {
-  .chart-colors-gallery--gold-5 {
-    height: 85px;
-    width: 85px;
-  }
-}
-@media screen and (min-width: 1200px) {
-  .chart-colors-gallery--gold-5 {
-    height: 100px;
-    width: 100px;
-  }
-}
-.chart-colors-gallery--orange-1 {
-  height: 65px;
-  width: 65px;
-  background-color: #F4B678;
-}
-@media screen and (min-width: 768px) {
-  .chart-colors-gallery--orange-1 {
-    height: 85px;
-    width: 85px;
-  }
-}
-@media screen and (min-width: 1200px) {
-  .chart-colors-gallery--orange-1 {
-    height: 100px;
-    width: 100px;
-  }
-}
-.chart-colors-gallery--orange-2 {
-  height: 65px;
-  width: 65px;
-  background-color: #EF9234;
-}
-@media screen and (min-width: 768px) {
-  .chart-colors-gallery--orange-2 {
-    height: 85px;
-    width: 85px;
-  }
-}
-@media screen and (min-width: 1200px) {
-  .chart-colors-gallery--orange-2 {
-    height: 100px;
-    width: 100px;
-  }
-}
-.chart-colors-gallery--orange-3 {
-  height: 65px;
-  width: 65px;
-  background-color: #EC7A08;
-}
-@media screen and (min-width: 768px) {
-  .chart-colors-gallery--orange-3 {
-    height: 85px;
-    width: 85px;
-  }
-}
-@media screen and (min-width: 1200px) {
-  .chart-colors-gallery--orange-3 {
-    height: 100px;
-    width: 100px;
-  }
-}
-.chart-colors-gallery--orange-4 {
-  height: 65px;
-  width: 65px;
-  background-color: #C46100;
-}
-@media screen and (min-width: 768px) {
-  .chart-colors-gallery--orange-4 {
-    height: 85px;
-    width: 85px;
-  }
-}
-@media screen and (min-width: 1200px) {
-  .chart-colors-gallery--orange-4 {
-    height: 100px;
-    width: 100px;
-  }
-}
-.chart-colors-gallery--orange-5 {
-  height: 65px;
-  width: 65px;
-  background-color: #8F4700;
-}
-@media screen and (min-width: 768px) {
-  .chart-colors-gallery--orange-5 {
-    height: 85px;
-    width: 85px;
-  }
-}
-@media screen and (min-width: 1200px) {
-  .chart-colors-gallery--orange-5 {
-    height: 100px;
-    width: 100px;
-  }
-}
-.chart-colors-gallery--black-1 {
-  height: 65px;
-  width: 65px;
-  background-color: #D2D2D2;
-}
-@media screen and (min-width: 768px) {
-  .chart-colors-gallery--black-1 {
-    height: 85px;
-    width: 85px;
-  }
-}
-@media screen and (min-width: 1200px) {
-  .chart-colors-gallery--black-1 {
-    height: 100px;
-    width: 100px;
-  }
-}
-.chart-colors-gallery--black-2 {
-  height: 65px;
-  width: 65px;
-  background-color: #BBB;
-}
-@media screen and (min-width: 768px) {
-  .chart-colors-gallery--black-2 {
-    height: 85px;
-    width: 85px;
-  }
-}
-@media screen and (min-width: 1200px) {
-  .chart-colors-gallery--black-2 {
-    height: 100px;
-    width: 100px;
-  }
-}
-.chart-colors-gallery--black-3 {
-  height: 65px;
-  width: 65px;
-  background-color: #8B8D8F;
-}
-@media screen and (min-width: 768px) {
-  .chart-colors-gallery--black-3 {
-    height: 85px;
-    width: 85px;
-  }
-}
-@media screen and (min-width: 1200px) {
-  .chart-colors-gallery--black-3 {
-    height: 100px;
-    width: 100px;
-  }
-}
-.chart-colors-gallery--black-4 {
-  height: 65px;
-  width: 65px;
-  background-color: #72767B;
-}
-@media screen and (min-width: 768px) {
-  .chart-colors-gallery--black-4 {
-    height: 85px;
-    width: 85px;
-  }
-}
-@media screen and (min-width: 1200px) {
-  .chart-colors-gallery--black-4 {
-    height: 100px;
-    width: 100px;
-  }
-}
-.chart-colors-gallery--black-5 {
-  height: 65px;
-  width: 65px;
-  background-color: #4D5258;
-}
-@media screen and (min-width: 768px) {
-  .chart-colors-gallery--black-5 {
-    height: 85px;
-    width: 85px;
-  }
-}
-@media screen and (min-width: 1200px) {
-  .chart-colors-gallery--black-5 {
-    height: 100px;
-    width: 100px;
-  }
-}
-
-@media screen and (min-width: 997px) {
-  .grid-modifier .grid-modifier-first {
-    order: 1;
-    margin-top: 31px;
-  }
-  .grid-modifier .grid-modifier-second {
-    order: 3;
-    margin-top: 31px;
-  }
-  .grid-modifier .grid-modifier-third {
-    order: 2;
-    margin-top: 31px;
-  }
-  .grid-modifier .grid-modifier-four {
-    order: 1;
-    margin-top: 31px;
-  }
-  .grid-modifier .grid-modifier-five {
-    order: 5;
-    margin-top: 31px;
-  }
-}
-
-.css-var-text {
-  display: none;
-  visibility: hidden;
-}
-@media screen and (min-width: 768px) {
-  .css-var-text {
-    display: block;
-    visibility: visible;
-  }
-}
-
-.chart-colors-gallery--information {
-  margin-top: 8px;
-  margin-bottom: 16px;
-}
-.chart-colors-gallery--information > * {
-  font-size: 12px;
-}
-.chart-colors-gallery--information > * > code {
-  font-size: 10px !important;
+/* Specifity YEAH */
+.pf-c-divider.ws-colors-divider {
+  margin-top: var(--pf-c-content--h2--MarginTop);
 }
diff --git a/packages/v4/src/content/design-guidelines/styles/colors/colors.md b/packages/v4/src/content/design-guidelines/styles/colors/colors.md
index 4bb53e2741..feede2797c 100644
--- a/packages/v4/src/content/design-guidelines/styles/colors/colors.md
+++ b/packages/v4/src/content/design-guidelines/styles/colors/colors.md
@@ -1,432 +1,229 @@
 ---
 title: Colors
 section: styles
-hideTOC: true
-showTitle: true
+hideSource: true
 ---
-import { Alert, Gallery, GalleryItem, Grid, GridItem, AlertActionCloseButton } from '@patternfly/react-core';
+import { Alert, Grid, GridItem, Divider } from '@patternfly/react-core';
 import { Link } from 'gatsby';
+import { ColorSwatch } from './ColorSwatch';
+import { ColorFamily } from './ColorFamily';
 import './colors.css';
 
+<Divider />
 
-## Theme colors
-
-<Grid className="colors-theme--light grid-modifier" gutter="md">
-  <GridItem xs={12}>
-    <h3>Primary default</h3>
-  </GridItem>
-  <GridItem span={12} lg={7} className="grid-modifier-first">
-    <Grid>
-      <GridItem span={4} xl={3}>
-        <div className="colors-theme--color-primary-100"></div>
-      </GridItem>
-      <GridItem span={8}>
-        <h3>#0066CC</h3>
-        <p>Global CSS variable</p>
-        <code>--pf-global--primary-color--100</code>
-      </GridItem>
-    </Grid>
+## Primary colors
+<Grid gutter="md">
+  <GridItem xl={6} lg={12} className="ws-colors-gridtext">
+    <h3>PatternFly blue</h3>
+    Primary colors are the colors displayed most frequently across your application screens and components. Our primary colors are used within a variety of components and are typically applied to default or active states and hover states.
+    <ColorSwatch label="Default" color="--pf-global--primary-color--100">
+      This color is most commonly used as as default or active state for many components including badges and spinners.
+    </ColorSwatch>
+    <ColorSwatch label="Hover" color="--pf-global--primary-color--200">
+      This color is most commonly used as the hover or focus state for components that use the default primary color, such as buttons and dropdowns.
+    </ColorSwatch>
   </GridItem>
-  <GridItem span={12} lg={7} className="grid-modifier-third">
-    <Grid>
-      <GridItem span={4} xl={3}>
-        <div className="colors-theme--color-primary-200"></div>
-      </GridItem>
-      <GridItem span={8}>
-        <h3>#004080</h3>
-        <p>Global CSS variable</p>
-        <code>--pf-global--primary-color--200</code>
-      </GridItem>
-    </Grid>
-  </GridItem>
-  <GridItem span={12} lg={5} rowSpan={2} className="grid-modifier-four">
-    <Grid className="colors-in-context" style={{
-      padding: "16px 32px",
-      backgroundColor: "#fff"
-    }}>
-      <GridItem span={12}>
-        <h3>Colors in context</h3>
-        <button class="pf-c-button pf-m-primary pf-u-mt-sm pf-u-mb-md">See what's possible</button>
-        <p>This call-to-action uses default PatternFly 4 colors. The active state button takes --pf-global--primary-color--100. On a hover, the color adjusts to --pf-global--primary-color--200.</p>
-      </GridItem>
-    </Grid>
+  <GridItem xl={6} lg={12}>
+    <img width="480px" src="patternfly-blue.png" alt="PatternFly blue colors" />
   </GridItem>
 </Grid>
 
-<Grid className="colors-theme--light grid-modifier" gutter="md" style={{marginTop: '32px'}}>
-  <GridItem xs={12}>
-    <h3>Secondary default</h3>
-  </GridItem>
-  <GridItem span={12} lg={7} className="grid-modifier-first">
-    <Grid>
-      <GridItem span={4} xl={3}>
-        <div className="colors-theme--color-secondary-100"></div>
-      </GridItem>
-      <GridItem span={8}>
-        <h3>#72767B</h3>
-        <p>Global CSS variable</p>
-        <code>--pf-global--secondary-color--100</code>
-      </GridItem>
-    </Grid>
-  </GridItem>
-  <GridItem span={12} lg={5} rowSpan={2} className="grid-modifier-four">
-    <Grid className="colors-in-context" style={{
-      padding: "16px 32px",
-      backgroundColor: "#fff"
-    }}>
-      <GridItem span={12}>
-        <h3>Colors in context</h3>
-        <div class="pf-c-chip pf-u-mr-xs pf-u-mb-xs">
-          <span class="pf-c-chip__text" id="chip_one">
-            Chip
-          </span>
-          <button class="pf-c-button pf-m-plain" aria-labelledby="remove_chip_one chip_one" aria-label="Remove" id="remove_chip_one">
-            <i class="fas fa-times-circle" aria-hidden="true"></i>
-          </button>
-        </div>
-        <div class="pf-c-chip">
-          <span class="pf-c-chip__text" id="chip_two">
-            Really long Chip that goes on and on
-          </span>
-          <button class="pf-c-button pf-m-plain" aria-labelledby="remove_chip_two chip_two" aria-label="Remove" id="remove_chip_two">
-            <i class="fas fa-times-circle" aria-hidden="true"></i>
-          </button>
-        </div>
-        <p>This Chip uses default PatternFly 4 colors. The border uses --pf-global--secondary-color--100.</p>
-      </GridItem>
-    </Grid>
+<Divider className="ws-colors-divider" />
+
+## Typography and iconography colors
+<Grid gutter="md">
+  <GridItem xl={6} lg={12} className="ws-colors-gridtext">
+    <h3>Text and icons</h3>
+    Typography and iconography colors are extremely similar because they can both be used in the same context, such as a link button. We have multiple shades of text colors on light and dark backgrounds so that you can emphasize hierarchy.
+    <ColorSwatch color="--pf-global--Color--100">
+      This color is used as a standard text and icon color as well as a hover state color for icon buttons. It is most commonly used as a text color for many components and application screens.
+    </ColorSwatch>
+    <ColorSwatch color="--pf-global--Color--200">
+      This color is used as a secondary text color as well as a default color for icon buttons. It is most commonly used for many components, such as the app launcher and empty states.
+    </ColorSwatch>
+    <ColorSwatch color="--pf-global--link--Color">
+      This color is most commonly used as a link text and icon color for many components, such as navigation and accordions. Blue icons use the same primary color variable as the blue text.
+    </ColorSwatch>
+  </GridItem>
+  <GridItem xl={6} lg={12}>
+    <img width="480px" src="patternfly-typography.png" alt="PatternFly typography colors" />
   </GridItem>
 </Grid>
 
-<h2>Typography colors</h2>
-
-<Grid className="colors-theme--light grid-modifier" gutter="md">
-  <GridItem xs={12}>
-    <h3>Text</h3>
-  </GridItem>
-  <GridItem span={12} lg={7} className="grid-modifier-first">
-    <Grid>
-      <GridItem span={4} xl={3}>
-        <div className="colors-theme--color-text-100"></div>
-      </GridItem>
-      <GridItem span={8}>
-        <h3>#151515</h3>
-        <p>Global CSS variable</p>
-        <code>--pf-global--Color--100</code>
-      </GridItem>
-    </Grid>
-  </GridItem>
-
-  <GridItem span={12} lg={7} className="grid-modifier-third">
-    <Grid>
-      <GridItem span={4} xl={3}>
-        <div className="colors-theme--color-text-200"></div>
-      </GridItem>
-      <GridItem span={8}>
-        <h3>#72767B</h3>
-        <p>Global CSS variable</p>
-        <code>--pf-global--Color--200</code>
-      </GridItem>
-    </Grid>
-  </GridItem>
-  <GridItem span={12} lg={7} className="grid-modifier-second">
-    <Grid>
-      <GridItem span={4} xl={3}>
-        <div className="colors-theme--color-text-300"></div>
-      </GridItem>
-      <GridItem span={8}>
-        <h3>#393F44</h3>
-        <p>Global CSS variable</p>
-        <code>--pf-global--Color--300</code>
-      </GridItem>
-    </Grid>
-  </GridItem>
-    <GridItem xs={12} lg={5} rowSpan={2} className="grid-modifier-four">
-    <Grid className="colors-in-context" style={{
-      padding: "16px 32px",
-      backgroundColor: "#fff"
-    }}>
-      <GridItem span={12}>
-        <h3>Colors in context</h3>
-        <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2>
-        <p>Body text should be Overpass Regular at 16px. It should have leading of 24px because of it’s relative line-height of 1.5.</p>
-      </GridItem>
-    </Grid>
-  </GridItem>
-  <GridItem span={12} className="grid-modifier-five">
-    Learn more about <Link to="/design-guidelines/styles/typography">typography styles</Link>.
+<Divider className="ws-colors-divider" />
+
+## Background colors
+<Grid gutter="md">
+  <GridItem xl={6} lg={12} className="ws-colors-gridtext">
+    Background colors are used throughout components and can be used for certain screens depending on the use case. The light colors can be interchangeable for full-screen backgrounds. The dark background colors are strictly used within components.
+    <ColorSwatch color="--pf-global--BackgroundColor--200">
+      This color is most commonly used as a secondary background color for full application screens and hover backgrounds.
+    </ColorSwatch>
+    <ColorSwatch color="--pf-global--BackgroundColor--100">
+      This color is most commonly used as a primary background color for full application screens and many components, such as cards and tables/data lists.
+    </ColorSwatch>
+    <ColorSwatch color="--pf-global--BackgroundColor--dark-100">
+      This color is most commonly used as a background color for many components, such as tooltips and wizards.
+    </ColorSwatch>
+    <ColorSwatch color="--pf-global--BackgroundColor--dark-200">
+      This color is used as a background color for navigation.
+    </ColorSwatch>
+    <ColorSwatch color="--pf-global--BackgroundColor--dark-300">
+      This color is most commonly used as a background color for many components, such as navigation.
+    </ColorSwatch>
+    <ColorSwatch color="--pf-global--BackgroundColor--dark-400">
+      This color is used as a background color for navigation.
+    </ColorSwatch>
+  </GridItem>
+  <GridItem xl={6} lg={12}>
+    <img width="480px" src="patternfly-background.png" alt="PatternFly background colors" />
   </GridItem>
 </Grid>
 
-<Grid className="colors-theme--light grid-modifier" gutter="md" style={{marginTop: '32px'}}>
-  <GridItem xs={12}>
-    <h3>Links</h3>
-  </GridItem>
-  <GridItem span={12} lg={7} className="grid-modifier-first">
-    <Grid>
-      <GridItem span={4} xl={3}>
-        <div className="colors-theme--color-link-text"></div>
-      </GridItem>
-      <GridItem span={8}>
-        <h3>#0066CC</h3>
-        <p>Global CSS variable</p>
-        <code>--pf-global--link--Color</code>
-      </GridItem>
-    </Grid>
+<Divider className="ws-colors-divider" />
+
+## Status and state colors
+<Grid gutter="md">
+  <GridItem xl={6} lg={12} className="ws-colors-gridtext">
+    Status and state colors are important when communicating data and action aspects through the UI with the user. Our status colors cover a variety of statuses including default, danger, success, information, and warning.
   </GridItem>
-  <GridItem span={12} lg={7} className="grid-modifier-third">
-    <Grid>
-      <GridItem span={4} xl={3}>
-        <div className="colors-theme--color-link-hover"></div>
-      </GridItem>
-      <GridItem span={8}>
-        <h3>#004080</h3>
-        <p>Global CSS variable</p>
-        <code>--pf-global--link--Color--hover</code>
-      </GridItem>
-    </Grid>
+  <GridItem xl={6} lg={12} rowSpan={6}>
+    <img width="480px" src="patternfly-status.png" alt="PatternFly status colors" />
   </GridItem>
-    <GridItem span={12} lg={5} rowSpan={2} className="grid-modifier-four">
-    <Grid className="colors-in-context" style={{
-      padding: "16px 32px",
-      backgroundColor: "#fff"
-    }}>
-      <GridItem span={12}>
-        <h3>Colors in context</h3>
-        <p>Body text should be Overpass Regular at 16px. <a href="#" className="pf-m-link">This is a link in-content</a>. It should have leading of 24px because of its relative line-height of 1.5.
-        </p>
-      </GridItem>
-    </Grid>
+  <GridItem xl={6} lg={12}>
+    <h3>Danger</h3>
+    <ColorSwatch color="--pf-global--danger-color--300" caption="alert icon">
+      This color is used as the icon color for the danger alert component.
+    </ColorSwatch>
+    <ColorSwatch color="--pf-global--danger-color--200" caption="alert title">
+      This color is used as the title color for the danger alert as well as the background color for the danger button.
+    </ColorSwatch>
+    <ColorSwatch color="--pf-global--danger-color--100" caption="alert icon background">
+      This color is most commonly used as an indication of danger or error for components, such as alerts and form inputs.
+    </ColorSwatch>
+  </GridItem>
+  <GridItem xl={6} lg={12}>
+    <h3>Default</h3>
+    <ColorSwatch color="--pf-global--default-color--300" caption="alert title and icon">
+      This color is used as the icon and title color for the default alert component.
+    </ColorSwatch>
+    <ColorSwatch color="--pf-global--default-color--200">
+      This color is used as the background and icon color for the default inline alert component.
+    </ColorSwatch>
+    <ColorSwatch color="--pf-global--default-color--100" caption="alert icon background">
+      This color is used as the icon background color for the default alert component.
+    </ColorSwatch>
+  </GridItem>
+  <GridItem xl={6} lg={12}>
+    <h3>Info</h3>
+    <ColorSwatch color="--pf-global--info-color--200" caption="alert title and icon">
+      This color is used as the icon and title color for the info alert component.
+    </ColorSwatch>
+    <ColorSwatch color="--pf-global--info-color--100" caption="alert icon background">
+      This color is used as the icon background color for the info alert component as well as the background and icon color for the info inline alert component.
+    </ColorSwatch>
+  </GridItem>
+  <GridItem xl={6} lg={12}>
+    <h3>Success</h3>
+    <ColorSwatch color="--pf-global--success-color--200" caption="alert title and icon">
+      This color is used as an indication of success for components, such as alerts and forms. It is used as the icon and title color for the success alert component.
+    </ColorSwatch>
+    <ColorSwatch color="--pf-global--success-color--100" caption="alert icon background">
+      This color is most commonly used as an indication of success for components, such as alerts and forms. It is used as the background color for the success alert component as well as the background and icon color for the success inline alert component.
+    </ColorSwatch>
+  </GridItem>
+  <GridItem xl={6} lg={12}>
+    <h3>Warning</h3>
+    <ColorSwatch color="--pf-global--warning-color--200" caption="alert title and icon">
+      This color is used as the icon and title color for the warning alert component.
+    </ColorSwatch>
+    <ColorSwatch color="--pf-global--warning-color--100" caption="alert icon background">
+      This color is used as the icon background color for the warning alert component as well as the background and icon color for the warning inline alert component.
+    </ColorSwatch>
+  </GridItem>
+  <GridItem xl={6} lg={12}>
+    <h3>Disabled</h3>
+    <ColorSwatch color="--pf-global--disabled-color--100">
+      This color is used as the disabled text color when text is indicated as disabled.
+    </ColorSwatch>
+    <ColorSwatch color="--pf-global--disabled-color--200">
+      This color is most commonly used as a disabled background color for many components, such as buttons and the app launcher.
+    </ColorSwatch>
+    <ColorSwatch color="--pf-global--disabled-color--300">
+      This color is most commonly used as an alternate disabled background color for many components, such as dropdowns and options menus.
+    </ColorSwatch>
   </GridItem>
 </Grid>
 
-<Grid className="colors-theme--light grid-modifier" gutter="md" style={{marginTop: '32px'}}>
-  <GridItem xs={12}>
-    <h3>Icons</h3>
-  </GridItem>
-  <GridItem span={12} lg={7} className="grid-modifier-first">
-    <Grid>
-      <GridItem span={4} xl={3}>
-        <div className="colors-theme--color-icons"></div>
-      </GridItem>
-      <GridItem span={8}>
-        <h3>#72767B</h3>
-        <p>Global CSS variable</p>
-        <code>--pf-global--icon--Color--light</code>
-      </GridItem>
-    </Grid>
-  </GridItem>
-  <GridItem span={12} lg={5} className="grid-modifier-four">
-    <Grid className="colors-in-context" style={{
-      padding: "16px 32px",
-      backgroundColor: "#fff"
-    }}>
-      <GridItem span={12}>
-        <h3>Colors in context</h3>
-        <p>Icon color is #72767B unless used in an alert.</p>
-      </GridItem>
-    </Grid>
-  </GridItem>
-  <GridItem span={12} className="grid-modifier-third">
-    Learn more about <Link to="/design-guidelines/styles/icons" className="pf-m-link">icons</Link>.
+<Divider className="ws-colors-divider" />
+
+## Shadows
+<Grid gutter="md">
+  <GridItem xl={6} lg={12} className="ws-colors-gridtext">
+    Shadows provide specifics about depth, direction of movement, and surface edges. Depending on the surface’s elevation and relationships to other surfaces, the type of shadow will change.
+    <ColorSwatch label="Large" color="--pf-global--BoxShadow--lg">
+      This variable is used to indicate a large shadow for many components, such as alerts and modals.
+    </ColorSwatch>
+    <ColorSwatch label="Medium" color="--pf-global--BoxShadow--md">
+      This variable is used to indicate a medium shadow for many components, such as accordion and dropdowns.
+    </ColorSwatch>
+    <ColorSwatch label="Small" color="--pf-global--BoxShadow--sm">
+      This variable is used to indicate a small shadow for the card component.
+    </ColorSwatch>
+  </GridItem>
+  <GridItem xl={6} lg={12}>
+    <img width="480px" src="patternfly-shadows.png" alt="PatternFly shadows" />
   </GridItem>
 </Grid>
 
-<h2>Alert statuses</h2>
+<Divider className="ws-colors-divider" />
 
-<Grid className="colors-theme--light grid-modifier" gutter="md" style={{marginTop: '24px'}}>
-  <GridItem xs={12}>
-    <h3>Success</h3>
-  </GridItem>
-  <GridItem span={12} lg={7} className="grid-modifier-first">
-    <Grid>
-      <GridItem span={4} xl={3}>
-        <div className="colors-theme--color-alerts--success"></div>
-      </GridItem>
-      <GridItem span={8}>
-        <h3>#92D400</h3>
-        <p>Global CSS variable</p>
-        <code>--pf-global--success-color--100</code>
-      </GridItem>
-    </Grid>
-  </GridItem>
-  <GridItem span={12} lg={7} className="grid-modifier-third">
-    <Grid>
-      <GridItem span={4} xl={3}>
-        <div className="colors-theme--color-alerts--success-icon"></div>
-      </GridItem>
-      <GridItem span={8}>
-        <h3>#486B00</h3>
-        <p>Global CSS variable</p>
-        <code>--pf-global--success-color--200</code>
-      </GridItem>
-    </Grid>
-  </GridItem>
-  <GridItem span={12} lg={5} rowSpan={2} className="grid-modifier-four">
-    <Grid className="colors-in-context" style={{
-      padding: "16px 32px",
-      backgroundColor: "#fff"
-    }}>
-      <GridItem span={12}>
-        <h3>Colors in context</h3>
-        <Alert
-          variant="success"
-          title="Success -- ipsum dolor sit ame"
-          action={<AlertActionCloseButton onClose={this.hideAlertTwo} />}
-        />
-        <p className="pf-u-mt-lg">Success alert color: --pf-global--success-color--100</p>
-        <p>Success alert icon color: --pf-global--success-color--200</p>
-      </GridItem>
-    </Grid>
-  </GridItem>
-</Grid>
+## Contrast ratios
+<p>
+  <a href="https://www.w3.org/WAI/standards-guidelines/wcag/new-in-21/" target="_blank" className="pf-m-link">Level AA in the Web Content Accessibility Guidelines 2.1</a> requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text, and a contrast ratio of at least 3:1 for graphics and user interface components (such as form input borders).
+</p>
+
+Check color contrast between background color and text color using a <a href="https://color.a11y.com/?wc3" target="_blank" className="pf-m-link">WCAG AA-compliance tool.</a>
+
+Make sure that, on hover, link texts provides ample contrast from both background color and from the default state of link text.
 
-<Grid className="colors-theme--light grid-modifier" gutter="md" style={{marginTop: '24px'}}>
-  <GridItem xs={12}>
-    <h3>Information</h3>
+<Divider className="ws-colors-divider" />
+
+## Color palette
+Our palettes are created as a system designed to reinforce application content and workflows. Bright colors are reserved for specific interactions such as reinforcing status and are used sparingly. Our palettes are simple and consolidated to allow them to be easily deployed and versatile for any situation.
+
+<Grid gutter="md">
+  <GridItem xl2RowSpan={1} xl2={4} xl={6} xlRowSpan={2} sm={12}>
+    <ColorFamily title="Grey family" family="black" />
   </GridItem>
-  <GridItem span={12} lg={7} className="grid-modifier-first">
-    <Grid>
-      <GridItem span={4} xl={3}>
-        <div className="colors-theme--color-alerts--info"></div>
-      </GridItem>
-      <GridItem span={8}>
-        <h3>#73BCF7</h3>
-        <p>Global CSS variable</p>
-        <code>--pf-global--info-color--100</code>
-      </GridItem>
-    </Grid>
+  <GridItem xl2={4} xl={6} sm={12}>
+    <ColorFamily title="Blue family" family="blue" />
   </GridItem>
-  <GridItem span={12} lg={7} className="grid-modifier-third">
-    <Grid>
-      <GridItem span={4} xl={3}>
-        <div className="colors-theme--color-alerts--info-icon"></div>
-      </GridItem>
-      <GridItem span={8}>
-        <h3>#004368</h3>
-        <p>Global CSS variable</p>
-        <code>--pf-global--info-color--200</code>
-      </GridItem>
-    </Grid>
+  <GridItem xl2={4} xl={6} sm={12}>
+    <ColorFamily title="Shadows" family="shadows" />
   </GridItem>
-  <GridItem span={12} lg={5} rowSpan={2} className="grid-modifier-four">
-    <Grid className="colors-in-context" style={{
-      padding: "16px 32px",
-      backgroundColor: "#fff"
-    }}>
-      <GridItem span={12}>
-        <h3>Colors in context</h3>
-        <Alert
-          variant="info"
-          title="Info -- ipsum dolor sit ame"
-          action={<AlertActionCloseButton onClose={this.hideAlertTwo} />}
-        />
-        <p className="pf-u-mt-lg">Info alert color: --pf-global--info-color--100</p>
-        <p>Info alert icon color: --pf-global--info-color--200</p>
-      </GridItem>
-    </Grid>
+  <GridItem xl2={4} xl={6} sm={12}>
+    <ColorFamily title="Green family" family="green" />
   </GridItem>
-</Grid>
-
-<Grid className="colors-theme--light grid-modifier" gutter="md" style={{marginTop: '24px'}}>
-  <GridItem xs={12}>
-    <h3>Warning</h3>
+  <GridItem xl2={4} xl={6} sm={12}>
+    <ColorFamily title="Cyan family" family="cyan" />
   </GridItem>
-  <GridItem span={12} lg={7} className="grid-modifier-first">
-    <Grid>
-      <GridItem span={4} xl={3}>
-        <div className="colors-theme--color-alerts--warning"></div>
-      </GridItem>
-      <GridItem span={8}>
-        <h3>#f0AB00</h3>
-        <p>Global CSS variable</p>
-        <code>--pf-global--warning-color--100</code>
-      </GridItem>
-    </Grid>
+  <GridItem xl2={4} xl={6} sm={12}>
+    <ColorFamily title="Purple family" family="purple" />
   </GridItem>
-  <GridItem span={12} lg={7} className="grid-modifier-third">
-    <Grid>
-      <GridItem span={4} xl={3}>
-        <div className="colors-theme--color-alerts--warning-icon"></div>
-      </GridItem>
-      <GridItem span={8}>
-        <h3>#795600</h3>
-        <p>Global CSS variable</p>
-        <code>--pf-global--warning-color--200</code>
-      </GridItem>
-    </Grid>
+  <GridItem xl2={4} xl={6} sm={12}>
+    <ColorFamily title="Light blue family" family="light-blue" />
   </GridItem>
-  <GridItem span={12} lg={5} rowSpan={2} className="grid-modifier-four">
-    <Grid className="colors-in-context" style={{
-      padding: "16px 32px",
-      backgroundColor: "#fff"
-    }}>
-      <GridItem span={12}>
-        <h3>Colors in context</h3>
-        <Alert
-          variant="warning"
-          title="Warning -- ipsum dolor sit ame"
-          action={<AlertActionCloseButton onClose={this.hideAlertTwo} />}
-        />
-        <p className="pf-u-mt-lg">Warning alert color: --pf-global--warning-color--100</p>
-        <p>Warning alert icon color: --pf-global--warning-color--200</p>
-      </GridItem>
-    </Grid>
+  <GridItem xl2={4} xl={6} sm={12}>
+    <ColorFamily title="Gold family" family="gold" />
   </GridItem>
-</Grid>
-
-<Grid className="colors-theme--light grid-modifier" gutter="md" style={{marginTop: '24px'}}>
-  <GridItem xs={12}>
-    <h3>Danger</h3>
-  </GridItem>
-  <GridItem span={12} lg={7} className="grid-modifier-first">
-    <Grid>
-      <GridItem span={4} xl={3}>
-        <div className="colors-theme--color-alerts--danger"></div>
-      </GridItem>
-      <GridItem span={8}>
-        <h3>#C9190B</h3>
-        <p>Global CSS variable</p>
-        <code>--pf-global--danger-color--100</code>
-      </GridItem>
-    </Grid>
+  <GridItem xl2={4} xl={6} sm={12}>
+    <ColorFamily title="Light green family" family="light-green" />
   </GridItem>
-  <GridItem span={12} lg={7} className="grid-modifier-third">
-    <Grid>
-      <GridItem span={4} xl={3}>
-        <div className="colors-theme--color-alerts--danger-icon"></div>
-      </GridItem>
-      <GridItem span={8}>
-        <h3>#470000</h3>
-        <p>Global CSS variable</p>
-        <code>--pf-global--danger-color--300</code>
-      </GridItem>
-    </Grid>
+  <GridItem xl2={4} xl={6} sm={12}>
+    <ColorFamily title="Orange family" family="orange" />
   </GridItem>
-  <GridItem span={12} lg={5} rowSpan={2} className="grid-modifier-four">
-    <Grid className="colors-in-context" style={{
-      padding: "16px 32px",
-      backgroundColor: "#fff"
-    }}>
-      <GridItem span={12}>
-        <h3>Colors in context</h3>
-        <Alert
-          variant="danger"
-          title="Danger -- ipsum dolor sit ame"
-          action={<AlertActionCloseButton onClose={this.hideAlertTwo} />}
-        />
-        <p className="pf-u-mt-lg">Danger/critical alert color: --pf-global--danger-color--100</p>
-        <p>Danger/critical alert icon color: --pf-global--danger-color--300</p>
-      </GridItem>
-    </Grid>
+  <GridItem xl2={4} xl={6} sm={12}>
+    <ColorFamily title="Red family" family="red" />
   </GridItem>
-</Grid>
-
-## Contrast ratios
-<p>
-  <a href="https://www.w3.org/WAI/standards-guidelines/wcag/new-in-21/" target="_blank" className="pf-m-link">Level AA in the Web Content Accessibility Guildelines 2.1</a> requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text, and a contrast ratio of at least 3:1 for graphics and user interface components (such as form input borders).
-</p>
-
-Check color contrast between background color and text color using a <a href="https://color.a11y.com/?wc3" target="_blank" className="pf-m-link">WCAG AA-compliance tool.</a>
-
-Make sure that, on hover, link texts provides ample contrast from both background color and from the default state of link text.
+</Grid>
\ No newline at end of file
diff --git a/packages/v4/src/content/design-guidelines/styles/colors/helpers.js b/packages/v4/src/content/design-guidelines/styles/colors/helpers.js
new file mode 100644
index 0000000000..9b8a927c50
--- /dev/null
+++ b/packages/v4/src/content/design-guidelines/styles/colors/helpers.js
@@ -0,0 +1,32 @@
+export function normalizeColor(color) {
+  color = color.toUpperCase();
+  if (color.startsWith('#')) {
+    const hex = color.substr(1);
+    return hex.length === 3 ? hex.split('').map(char => char.repeat(2)).join('') : hex;
+  }
+}
+
+function normalizeLuminance(val) {
+  val = parseInt(val, 16) / 255;
+  return val <= 0.03928 ? val / 12.92 : Math.pow((val + 0.055) / 1.055, 2.4);
+}
+
+function getRelativeLuminance(color) {
+  // https://www.w3.org/TR/WCAG21/relative-luminance.xml
+  const r = normalizeLuminance(color.substr(0, 2));
+  const g = normalizeLuminance(color.substr(2, 2));
+  const b = normalizeLuminance(color.substr(4, 2));
+  return (0.2126 * r) + (0.7152 * g) + (0.0722 * b);
+}
+
+export function getContrastRatio(c1, c2) {
+  // https://www.w3.org/TR/WCAG21/#dfn-contrast-ratio
+  c1 = normalizeColor(c1);
+  c2 = normalizeColor(c2);
+
+  const l1 = getRelativeLuminance(c1);
+  const l2 = getRelativeLuminance(c2);
+
+  return (l1 + 0.05) / (l2 + 0.05);
+}
+
diff --git a/packages/v4/src/content/design-guidelines/styles/colors/patternfly-background.png b/packages/v4/src/content/design-guidelines/styles/colors/patternfly-background.png
new file mode 100644
index 0000000000..febb54a110
Binary files /dev/null and b/packages/v4/src/content/design-guidelines/styles/colors/patternfly-background.png differ
diff --git a/packages/v4/src/content/design-guidelines/styles/colors/patternfly-blue.png b/packages/v4/src/content/design-guidelines/styles/colors/patternfly-blue.png
new file mode 100644
index 0000000000..121e65cddc
Binary files /dev/null and b/packages/v4/src/content/design-guidelines/styles/colors/patternfly-blue.png differ
diff --git a/packages/v4/src/content/design-guidelines/styles/colors/patternfly-shadows.png b/packages/v4/src/content/design-guidelines/styles/colors/patternfly-shadows.png
new file mode 100644
index 0000000000..16795a4fe3
Binary files /dev/null and b/packages/v4/src/content/design-guidelines/styles/colors/patternfly-shadows.png differ
diff --git a/packages/v4/src/content/design-guidelines/styles/colors/patternfly-status.png b/packages/v4/src/content/design-guidelines/styles/colors/patternfly-status.png
new file mode 100644
index 0000000000..e48471ef6a
Binary files /dev/null and b/packages/v4/src/content/design-guidelines/styles/colors/patternfly-status.png differ
diff --git a/packages/v4/src/content/design-guidelines/styles/colors/patternfly-typography.png b/packages/v4/src/content/design-guidelines/styles/colors/patternfly-typography.png
new file mode 100644
index 0000000000..dd6340f78c
Binary files /dev/null and b/packages/v4/src/content/design-guidelines/styles/colors/patternfly-typography.png differ