diff --git a/site/app/[locale]/(root)/docs/colors/components/Default.tsx b/site/app/[locale]/(root)/docs/colors/components/Default.tsx
index cf0ee76f9..b07948634 100644
--- a/site/app/[locale]/(root)/docs/colors/components/Default.tsx
+++ b/site/app/[locale]/(root)/docs/colors/components/Default.tsx
@@ -11,7 +11,7 @@ import copy from 'copy-to-clipboard'
 export default () => <div className="grid-cols:6 grid-cols:13@sm my:40 gap:25|10">
     {Object.keys(variables)
         // @ts-ignore todo fix this
-        .filter((colorName) => variables[colorName].type === 'color' && !['black', 'white', 'current', 'transparent'].includes(colorName))
+        .filter((variableName) => ['slate', 'gray', 'brown', 'orange', 'gold', 'yellow', 'grass', 'green', 'beryl', 'teal', 'cyan', 'sky', 'blue', 'indigo', 'violet', 'purple', 'fuchsia', 'pink', 'crimson', 'red'].includes(variableName))
         .map((colorName: string) => {
             const eachColors = (variables as any)[colorName]
             return (
diff --git a/site/app/[locale]/(root)/docs/colors/content.mdx b/site/app/[locale]/(root)/docs/colors/content.mdx
index 7b5ffcfab..fa9cb5281 100644
--- a/site/app/[locale]/(root)/docs/colors/content.mdx
+++ b/site/app/[locale]/(root)/docs/colors/content.mdx
@@ -28,7 +28,7 @@ Create an alias for a color to link its value to an existing color. This allows
 ```js name=master.css.js
 export default {
     variables: {
-+        primary: 'blue-60'
++        primary: '$(blue-60)'
     }
 }
 ```
@@ -86,8 +86,8 @@ Create color variables for backgrounds in apps, panels, cards, and more.
 ```js name=master.css.js
 export default {
     variables: {
-+       neutral: 'white',
-+       fade: 'slate-5'
++       neutral: '$(white)',
++       fade: '$(slate-5)'
     }
 }
 ```
@@ -106,9 +106,9 @@ Create accessible color variables for titles, descriptions, icons, and other bod
 export default {
     variables: {
 +        text: {
-+            netural: 'slate-70',
-+            strong: 'slate-95',
-+            dim: 'slate-30'
++            netural: '$(slate-70)',
++            strong: '$(slate-95)',
++            dim: '$(slate-30)'
 +        }
     }
 }