diff --git a/packages/documentation-framework/components/cssVariables/cssVariables.css b/packages/documentation-framework/components/cssVariables/cssVariables.css
index 0d082efbe3..67ea3872dd 100644
--- a/packages/documentation-framework/components/cssVariables/cssVariables.css
+++ b/packages/documentation-framework/components/cssVariables/cssVariables.css
@@ -1,15 +1,13 @@
-.ws-color-box {
-  display: inline-block;
-  height: 18px;
-  width: 18px;
-/*   border: var(--pf-v6-global--BorderWidth--sm) solid var(--pf-v6-global--BorderColor--200); */
-/*   border-radius: var(--pf-v6-global--BorderRadius--lg); */
-}
 
-.ws-td-text {
-/*   font-size: var(--pf-v6-global--FontSize--sm) !important; */
+.circle {
+    height: 1em;
+    display: inline-block;
+    aspect-ratio: 1 / 1;
+    border-radius: 50%;
+    border: var(--pf-t--global--border--width--regular) solid var(--pf-t--global--background--color--inverse--default);
+    box-shadow: var(--pf-t--global--box-shadow--sm);
 }
 
-.ws-css-property {
-  padding: var(--pf-t--global--spacer--xs) var(--pf-t--global--spacer--md);
+.rotate-90-deg {
+    transform: rotate(90deg);
 }
diff --git a/packages/documentation-framework/components/cssVariables/cssVariables.js b/packages/documentation-framework/components/cssVariables/cssVariables.js
index 143ee6c0b1..85af8b7d77 100644
--- a/packages/documentation-framework/components/cssVariables/cssVariables.js
+++ b/packages/documentation-framework/components/cssVariables/cssVariables.js
@@ -1,5 +1,5 @@
 import React from "react";
-import { debounce } from "@patternfly/react-core";
+import { List, ListItem, debounce } from "@patternfly/react-core";
 import {
   Table,
   Thead,
@@ -10,33 +10,22 @@ import {
 } from "@patternfly/react-table";
 import { AutoLinkHeader } from "../autoLinkHeader/autoLinkHeader";
 import * as tokensModule from "@patternfly/react-tokens/dist/esm/componentIndex";
-import global_spacer_md from "@patternfly/react-tokens/dist/esm/global_spacer_md";
 import LevelUpAltIcon from "@patternfly/react-icons/dist/esm/icons/level-up-alt-icon";
 import { CSSSearch } from './cssSearch';
 
 const isColorRegex = /^(#|rgb)/;
 
 const mappingAsList = (property, values) => (
-  <div>
-    <div className="ws-css-property">
-      <span>
-        {property}
-      </span>
-    </div>
-    {values.map((entry, index) => (
-      <div
-        key={index}
-        style={{
-          padding: `4px 0 4px calc(${global_spacer_md.value} * ${index + 3})`
-        }}
+  <List isPlain>
+    <ListItem>{property}</ListItem>
+    {values.map((entry) => (
+      <ListItem
+        icon={<LevelUpAltIcon className="rotate-90-deg" />}
       >
-        <LevelUpAltIcon style={{ transform: 'rotate(90deg)' }} />
-        <span style={{ paddingLeft: '16px' }}>
-          {entry}
-        </span>
-      </div>
+        {entry}
+      </ListItem>
     ))}
-  </div>
+  </List>
 );
 
 const flattenList = files => {
@@ -97,6 +86,7 @@ export class CSSVariables extends React.Component {
         (values && searchRE.test(JSON.stringify(values)));
       if (passes) {
         const rowKey = `${selector}_${property}`;
+        const isColor = isColorRegex.test(value);
         const cells = [
           ...this.props.hideSelectorColumn ? [] : [selector],
           property,
@@ -105,22 +95,19 @@ export class CSSVariables extends React.Component {
               key={`${rowKey}_1`}
               className="pf-v6-l-flex pf-m-space-items-sm"
             >
-              {isColorRegex.test(value) && (
+              {isColor && (
                 <div
                   key={`${rowKey}_2`}
                   className="pf-v6-l-flex pf-m-column pf-m-align-self-center"
                 >
-                  <span
-                    className="ws-color-box"
-                    style={{ backgroundColor: value }}
-                  />
+                  <span className="circle" style={{ backgroundColor: `var(${property})`}}/>
                 </div>
               )}
               <div
                 key={`${rowKey}_3`}
                 className="pf-v6-l-flex pf-m-column pf-m-align-self-center ws-td-text"
               >
-                {value}
+                {isColor && '(In light theme)'} {value}
               </div>
             </div>
           </div>
diff --git a/packages/documentation-site/package.json b/packages/documentation-site/package.json
index 06ae87ed3f..05a456dd61 100644
--- a/packages/documentation-site/package.json
+++ b/packages/documentation-site/package.json
@@ -17,7 +17,7 @@
     "screenshots": "pf-docs-framework screenshots"
   },
   "dependencies": {
-    "@patternfly/documentation-framework": "6.0.0-alpha.55",
+    "@patternfly/documentation-framework": "6.0.0-alpha.57",
     "@patternfly/react-catalog-view-extension": "6.0.0-alpha.4",
     "@patternfly/react-console": "6.0.0-alpha.3",
     "@patternfly/react-docs": "7.0.0-alpha.84",