From 12f27bc4fda322284cd532f3097736e032459cdb Mon Sep 17 00:00:00 2001
From: Dorian <dorian@Dorians-MacBook-Air.local>
Date: Tue, 3 Feb 2026 00:40:09 +0000
Subject: [PATCH] Add color system rules to design standards

Established core color constants:
- Pure black: #0a0a0a (never #000000)
- White text: #FAFAFA (never #FFFFFF)
- Reverse in light mode (bg: #FAFAFA, text: #0a0a0a)

Updated:
- visual-design-system.mdc: Added core color constants section
- visual-design-system.mdc: Updated dark mode CSS variables
- code-quality.mdc: Added color consistency checklist

These rules ensure consistent color usage across the entire application.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .cursor/rules/code-quality.mdc         |  6 ++++
 .cursor/rules/visual-design-system.mdc | 41 ++++++++++++++++++++++----
 2 files changed, 42 insertions(+), 5 deletions(-)

diff --git a/.cursor/rules/code-quality.mdc b/.cursor/rules/code-quality.mdc
index dd518f4..3cac15c 100644
--- a/.cursor/rules/code-quality.mdc
+++ b/.cursor/rules/code-quality.mdc
@@ -162,6 +162,12 @@ import './styles.css'
 
 ## Code Review Checklist
 
+### Color Consistency
+- ✅ Pure black is `#0a0a0a` (not `#000000`)
+- ✅ White text is `#FAFAFA` (not `#FFFFFF`)
+- ✅ Colors use CSS variables or design tokens
+- ✅ Light/dark mode properly implemented
+
 ### Before Submitting PR
 - ✅ Code runs without errors
 - ✅ Tests pass
diff --git a/.cursor/rules/visual-design-system.mdc b/.cursor/rules/visual-design-system.mdc
index 290b7cb..d8746e0 100644
--- a/.cursor/rules/visual-design-system.mdc
+++ b/.cursor/rules/visual-design-system.mdc
@@ -63,6 +63,22 @@ Create depth through semi-transparent layers with backdrop blur.
 
 ## Color System Architecture
 
+**Core Color Constants** - Always use these exact values:
+
+```javascript
+const coreColors = {
+  // Pure Black - Use for backgrounds in dark mode
+  black: '#0a0a0a',
+  
+  // Pure White Text - Use for text on dark backgrounds
+  white: '#FAFAFA',
+  
+  // Note: In light mode, reverse these:
+  // - Background: #FAFAFA
+  // - Text: #0a0a0a
+};
+```
+
 **Semantic Color Tokens** - Define colors by purpose, not appearance:
 
 ```javascript
@@ -73,7 +89,7 @@ const colors = {
   },
   neutral: {
     50: '#FAFAFA',
-    900: '#171717',
+    900: '#0a0a0a',
   },
   semantic: {
     success: '#22C55E',
@@ -82,6 +98,13 @@ const colors = {
 };
 ```
 
+**Color Usage Rules:**
+- ✅ DO use `#0a0a0a` for pure black backgrounds
+- ✅ DO use `#FAFAFA` for white text on dark backgrounds
+- ✅ DO reverse in light mode (bg: `#FAFAFA`, text: `#0a0a0a`)
+- ❌ DON'T use `#000000` or `#FFFFFF`
+- ❌ DON'T hardcode colors without using design tokens
+
 ## Shadow & Glow Systems
 
 Use shadows sparingly for depth perception:
@@ -140,16 +163,24 @@ Design with both modes from the start:
 
 ```css
 :root {
-  --bg-primary: #ffffff;
-  --text-primary: #171717;
+  /* Light Mode */
+  --bg-primary: #FAFAFA;
+  --text-primary: #0a0a0a;
 }
 
 [data-theme="dark"] {
-  --bg-primary: #171717;
-  --text-primary: #fafafa;
+  /* Dark Mode */
+  --bg-primary: #0a0a0a;
+  --text-primary: #FAFAFA;
 }
 ```
 
+**CRITICAL COLOR RULES:**
+- Pure black is ALWAYS `#0a0a0a` (not `#000000`)
+- White text is ALWAYS `#FAFAFA` (not `#FFFFFF`)
+- These colors reverse in light vs dark mode
+- Never use pure `#000` or `#FFF`
+
 ## Hover State Patterns
 
 All interactive elements provide immediate feedback: