diff --git a/packages/colorwind/src/colors.ts b/packages/colorwind/src/colors.ts
index b159111..3a9a703 100644
--- a/packages/colorwind/src/colors.ts
+++ b/packages/colorwind/src/colors.ts
@@ -155,8 +155,8 @@ export const cssColors = {
 
 export default {
   pure: {
-    light: tailwindColors.white,
-    dark: tailwindColors.black,
+    light: tailwindColors.black,
+    dark: tailwindColors.white,
   },
   slate: tailwindColors.slate[500],
   'slate-4': {
diff --git a/website/src/content/docs/guides/index.mdx b/website/src/content/docs/guides/index.mdx
index 6af2fe9..e20002c 100644
--- a/website/src/content/docs/guides/index.mdx
+++ b/website/src/content/docs/guides/index.mdx
@@ -107,13 +107,13 @@ With **Colorwind**, you can easily define and apply color utilities that adjust
 <Tabs>
   <TabItem label="Code">
     ```html
-    <button class="bg-green-4 text-pure-reverse border-green-4">
+    <button class="bg-green-4 text-pure border-green-4">
       Primary Button
     </button>
     ```
   </TabItem>
   <TabItem label="Render">
-    <button class="bg-green-4 text-pure-reverse border-green-4">
+    <button class="bg-green-4 text-pure border-green-4">
       Primary Button
     </button>
   </TabItem>