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: