# Frontend Complete Refactoring & Standardization Plan

## ✅ STATUS: TAILWIND DEFAULT COLORS DISABLED

**As of 2026-01-01**: All Tailwind default color palettes (blue-500, red-600, green-400, etc.) have been **disabled** via `@theme` in `design-system.css`. Only our custom design system colors work now.

### What's Disabled (via `@theme { --color-*-*: initial; }`)
- `red-*`, `orange-*`, `amber-*`, `yellow-*`, `lime-*`
- `green-*`, `emerald-*`, `teal-*`, `cyan-*`, `sky-*`
- `blue-*`, `indigo-*`, `violet-*`, `fuchsia-*`, `pink-*`, `rose-*`
- `slate-*`, `zinc-*`, `neutral-*`, `stone-*`

### What WORKS (our design system)
- `brand-*` (25-950) - derived from `--color-primary`
- `success-*` (25-950) - derived from `--color-success`
- `warning-*` (25-950) - derived from `--color-warning`
- `error-*` (25-950) - derived from `--color-danger`
- `purple-*` (25-950) - derived from `--color-purple`
- `gray-*` (25-950) - derived from `--color-gray-base`
- `blue-light-*` - info/link colors (derived from primary)

---

## 🎯 Objective

**Completely remove Tailwind default styles** and refactor the entire frontend to use **ONLY** the custom design system defined in `/src/styles/design-system.css`.

### Why This Refactor?
- AI agents keep defaulting to Tailwind's standard colors instead of our custom tokens
- Mixed Tailwind + custom styles cause conflicts and inconsistencies
- No single source of truth - styles scattered across files
- Inline components duplicated across multiple pages

### End Goal
- **Single CSS file** (`design-system.css`) as the ONLY source for all design tokens
- **All colors** come from CSS variables defined in `:root`
- **All components** extracted to `/components/ui/` - NO inline component definitions
- **Zero Tailwind default colors** - only our custom palette (brand, success, error, warning, purple, gray)

---

## 📂 Single Source of Truth: `/src/styles/design-system.css`

This file contains:
- **Section 1**: Design Tokens (CSS Variables) - colors, radius, shadows, gradients
- **Section 2**: Dark Mode Overrides
- **Section 3**: Tailwind Configuration (DEFAULT COLORS DISABLED)
- **Section 4**: Base Styles
- **Section 5**: Component Utilities
- **Section 6**: Form Element Styles
- **Section 7**: Table Styles
- **Section 8**: Header Metrics
- **Section 9**: Badge Styles
- **Section 10-13**: Library overrides, utilities, animations

---

## 🎨 Color Architecture: 6 Primary Colors Only

### Why Only 6 Primary Hex Colors?

1. **Dynamic Theming**: Users can customize theme colors in the frontend
2. **Single Change = Entire System Updates**: Change one primary color → all shades/variants update automatically
3. **Consistency**: Whole app looks designed by ONE person, not scattered/mismatched
4. **Maintainability**: No hunting for hardcoded hex values scattered everywhere

### The 6 Primary Color Tokens (ONLY THESE USE HEX)

```css
:root {
  /* ===== THE ONLY 6 HEX VALUES IN THE ENTIRE SYSTEM ===== */
  --color-primary: #2C7AA1;      /* Brand Blue - main CTA, links, primary actions */
  --color-success: #2CA18E;      /* Success Green - confirmations, positive states */
  --color-warning: #D9A12C;      /* Warning Amber - alerts, cautions */
  --color-danger: #A12C40;       /* Danger Red - errors, destructive actions */
  --color-purple: #2C40A1;       /* Purple - premium features, special emphasis */
  --color-gray-base: #667085;    /* Gray Base - neutral text, borders, backgrounds */
}
```

### ALL Other Colors MUST Derive From These 6

```css
/* ✅ CORRECT - Derived from primary tokens */
--color-primary-dark: color-mix(in srgb, var(--color-primary) 80%, black);
--color-primary-light: color-mix(in srgb, var(--color-primary) 60%, white);
--color-primary-subtle: color-mix(in srgb, var(--color-primary) 8%, white);

--color-brand-500: var(--color-primary);
--color-brand-600: color-mix(in srgb, var(--color-primary) 85%, black);
--color-brand-400: color-mix(in srgb, var(--color-primary) 75%, white);
/* ... all shades computed from the primary */

/* ❌ WRONG - Hardcoded hex for variants */
--color-primary-dark: #005A8C;  /* NO! Must derive from --color-primary */
--color-brand-600: #0369a1;     /* NO! Must use color-mix() */
```

### Color Derivation Rules

| Shade | Derivation Formula |
|-------|-------------------|
| `*-25` | `color-mix(in srgb, var(--color-*) 3%, white)` |
| `*-50` | `color-mix(in srgb, var(--color-*) 8%, white)` |
| `*-100` | `color-mix(in srgb, var(--color-*) 15%, white)` |
| `*-200` | `color-mix(in srgb, var(--color-*) 25%, white)` |
| `*-300` | `color-mix(in srgb, var(--color-*) 40%, white)` |
| `*-400` | `color-mix(in srgb, var(--color-*) 60%, white)` |
| `*-500` | `var(--color-*)` (the primary itself) |
| `*-600` | `color-mix(in srgb, var(--color-*) 85%, black)` |
| `*-700` | `color-mix(in srgb, var(--color-*) 70%, black)` |
| `*-800` | `color-mix(in srgb, var(--color-*) 55%, black)` |
| `*-900` | `color-mix(in srgb, var(--color-*) 40%, black)` |
| `*-950` | `color-mix(in srgb, var(--color-*) 25%, black)` |

### Future Theming Support

When user selects a theme, we only change these 6 values:
```javascript
// Theme switcher (future feature)
document.documentElement.style.setProperty('--color-primary', '#NEW_HEX');
document.documentElement.style.setProperty('--color-success', '#NEW_HEX');
// ... and the ENTIRE app updates automatically!
```

---

## Phase 1: Audit Detection Scripts

### 1.1 Run These Detection Commands

```bash
# Create audit results folder
mkdir -p /data/app/igny8/frontend/audit-results

# =====================================================
# STYLE VIOLATIONS - Must be 0 after refactor
# =====================================================

# 1. ALL inline styles (style={{)
grep -rn "style={{" src/pages/ src/components/ --include="*.tsx" > audit-results/01-inline-styles.txt
echo "Inline styles found: $(wc -l < audit-results/01-inline-styles.txt)"

# 2. ALL hardcoded hex colors in className (text-[#xxx], bg-[#xxx])
grep -rn "\[#[0-9a-fA-F]\{3,6\}\]" src/pages/ src/components/ --include="*.tsx" > audit-results/02-hardcoded-hex-class.txt
echo "Hardcoded hex in className: $(wc -l < audit-results/02-hardcoded-hex-class.txt)"

# 3. ALL hardcoded hex colors anywhere (outside CSS)
grep -rn "#[0-9a-fA-F]\{6\}" src/pages/ src/components/ --include="*.tsx" > audit-results/03-hardcoded-hex-all.txt
echo "Hardcoded hex anywhere: $(wc -l < audit-results/03-hardcoded-hex-all.txt)"

# 4. ALL rgb/rgba inline values
grep -rn "rgba\?(" src/pages/ src/components/ --include="*.tsx" > audit-results/04-rgb-values.txt
echo "RGB/RGBA values: $(wc -l < audit-results/04-rgb-values.txt)"

# 5. TAILWIND DEFAULT COLORS (should NOT exist - we disabled them)
grep -rn "bg-blue-\|text-blue-\|border-blue-\|bg-red-\|text-red-\|border-red-\|bg-green-\|text-green-\|border-green-\|bg-yellow-\|text-yellow-\|bg-emerald-\|text-emerald-\|bg-indigo-\|text-indigo-\|bg-pink-\|text-pink-\|bg-rose-\|text-rose-\|bg-amber-\|text-amber-\|bg-cyan-\|text-cyan-\|bg-teal-\|text-teal-\|bg-violet-\|text-violet-\|bg-fuchsia-\|text-fuchsia-\|bg-lime-\|text-lime-\|bg-orange-\|text-orange-\|bg-sky-\|text-sky-\|bg-slate-\|text-slate-\|bg-zinc-\|text-zinc-\|bg-neutral-\|text-neutral-\|bg-stone-\|text-stone-" src/pages/ src/components/ --include="*.tsx" > audit-results/05-tailwind-default-colors.txt
echo "Tailwind default colors: $(wc -l < audit-results/05-tailwind-default-colors.txt)"

# =====================================================
# COMPONENT VIOLATIONS
# =====================================================

# 6. External UI library imports (MUI, Chakra, Ant, etc.)
grep -rn "from '@mui\|from '@chakra\|from 'antd\|from '@headlessui\|from '@radix" src/pages/ src/components/ --include="*.tsx" > audit-results/06-external-ui-imports.txt
echo "External UI imports: $(wc -l < audit-results/06-external-ui-imports.txt)"

# 7. lucide-react imports (should use /icons/)
grep -rn "from 'lucide-react" src/pages/ src/components/ --include="*.tsx" > audit-results/07-lucide-imports.txt
echo "Lucide imports: $(wc -l < audit-results/07-lucide-imports.txt)"

# 8. Inline component definitions (const ComponentName = () => { inside pages)
grep -rn "const [A-Z][a-zA-Z]*\s*=\s*(" src/pages/ --include="*.tsx" > audit-results/08-inline-components.txt
echo "Inline component definitions: $(wc -l < audit-results/08-inline-components.txt)"

# 9. Raw HTML buttons (should use Button component)
grep -rn "<button " src/pages/ --include="*.tsx" > audit-results/09-raw-buttons.txt
echo "Raw HTML buttons: $(wc -l < audit-results/09-raw-buttons.txt)"

# 10. Raw HTML selects (should use standard Select)
grep -rn "<select " src/pages/ --include="*.tsx" > audit-results/10-raw-selects.txt
echo "Raw HTML selects: $(wc -l < audit-results/10-raw-selects.txt)"

# 11. Raw HTML inputs without standard classes
grep -rn "<input " src/pages/ --include="*.tsx" > audit-results/11-raw-inputs.txt
echo "Raw HTML inputs: $(wc -l < audit-results/11-raw-inputs.txt)"

# =====================================================
# SUMMARY
# =====================================================
echo ""
echo "====== AUDIT SUMMARY ======"
echo "Run these counts after refactoring - ALL should be 0:"
echo "  01-inline-styles.txt"
echo "  02-hardcoded-hex-class.txt"
echo "  05-tailwind-default-colors.txt"
echo "  06-external-ui-imports.txt"
echo "  07-lucide-imports.txt"
echo "  08-inline-components.txt (review - extract to /components/)"
```

---

## Phase 2: Color System Standardization

### 2.1 The 6 Primary Color Tokens (ONLY HEX ALLOWED)

| Token | Hex Value | Purpose |
|-------|-----------|---------|
| `--color-primary` | `#2C7AA1` | Brand/Primary actions, links, CTA |
| `--color-success` | `#2CA18E` | Success states, confirmations |
| `--color-warning` | `#D9A12C` | Warning states, alerts, cautions |
| `--color-danger` | `#A12C40` | Error/Danger states, destructive |
| `--color-purple` | `#2C40A1` | Premium/Special features |
| `--color-gray-base` | `#667085` | Neutral base for grays |

### 2.2 Allowed Color Classes (ALL derived from 6 primaries)

| Color Category | Tailwind Classes | CSS Variable Base |
|----------------|------------------|-------------------|
| **Primary/Brand** | `brand-25` to `brand-950` | `--color-primary` |
| **Gray/Neutral** | `gray-25` to `gray-950` | `--color-gray-base` |
| **Success** | `success-25` to `success-950` | `--color-success` |
| **Error** | `error-25` to `error-950` | `--color-danger` |
| **Warning** | `warning-25` to `warning-950` | `--color-warning` |
| **Purple** | `purple-25` to `purple-950` | `--color-purple` |

### 2.3 BANNED - Hardcoded Hex Values

**ZERO hardcoded hex values allowed in:**
- TSX/JSX files
- Component files
- Page files
- Inline styles

**ONLY place hex values exist:** The 6 primary tokens in `design-system.css`

### 2.4 BANNED - Tailwind Default Colors (DISABLED)

These are explicitly disabled and should NEVER appear:

```
❌ blue-*, red-*, green-*, emerald-*, teal-*, cyan-*, sky-*
❌ indigo-*, violet-*, fuchsia-*, pink-*, rose-*
❌ amber-*, yellow-*, lime-*, orange-*
❌ slate-*, zinc-*, neutral-*, stone-*
```

### 2.5 Color Replacement Map

| ❌ Wrong | ✅ Correct |
|----------|-----------|
| `bg-blue-500`, `text-blue-500` | `bg-brand-500`, `text-brand-500` |
| `bg-red-500`, `text-red-500` | `bg-error-500`, `text-error-500` |
| `bg-green-500`, `text-green-500` | `bg-success-500`, `text-success-500` |
| `bg-yellow-500`, `text-yellow-500` | `bg-warning-500`, `text-warning-500` |
| `bg-indigo-500`, `text-indigo-500` | `bg-purple-500`, `text-purple-500` |
| `#0693e3` (hardcoded) | `var(--color-primary)` or `text-brand-500` |
| `#10B981` (hardcoded) | `var(--color-success)` or `text-success-500` |
| `#EF4444` (hardcoded) | `var(--color-danger)` or `text-error-500` |
| `style={{ color: '#xxx' }}` | Use CSS class from design system |
| `bg-[#XXXXXX]` | Use design token class |

---

## Phase 3: Component Extraction & Standardization

### 3.1 Rules for Components

1. **NO inline component definitions** in page files
2. **Any component used in 2+ places** → Extract to `/components/`
3. **All components** use ONLY CSS classes from `design-system.css`
4. **No component-level inline styles**

### 3.2 Standard Component Location

| Component Type | Location | Notes |
|----------------|----------|-------|
| Buttons | `/components/ui/button/` | All button variants |
| Modals/Dialogs | `/components/ui/modal/` | All popup overlays |
| Alerts/Notifications | `/components/ui/alert/` | All status messages |
| Badges/Tags | `/components/ui/badge/` | All labels/chips |
| Dropdowns | `/components/ui/dropdown/` | All select menus |
| Forms | `/components/ui/form/` | Inputs, selects, checkboxes |
| Cards | `/components/ui/card/` | Card containers |
| Tables | `/components/ui/table/` | Data tables |
| Tabs | `/components/ui/tabs/` | Tab interfaces |
| Spinners/Loading | `/components/ui/spinner/` | Loading states |
| Tooltips | `/components/ui/tooltip/` | Hover info |
| Progress | `/components/ui/progress/` | Progress bars |

### 3.3 Inline Components to Extract

Search pattern: `const [A-Z][a-zA-Z]* = (` in `/pages/`

For each found:
1. Check if similar exists in `/components/ui/`
2. If used in multiple pages → Extract to appropriate folder
3. If page-specific → Keep but move to bottom of file or separate file in same folder

---

## Phase 4: Styling Classes Standardization

### 4.1 Standard CSS Classes (from design-system.css)

**Menu Items:**
```css
.menu-item           /* Base menu item */
.menu-item-active    /* Active state */
.menu-item-inactive  /* Inactive state */
.menu-item-icon-size /* Icon sizing */
```

**Form Elements:**
```css
.igny8-select-styled  /* Styled select dropdown */
.tableCheckbox        /* Table checkbox */
```

**Tables:**
```css
.igny8-table-compact      /* Compact table */
.igny8-table-container    /* Table wrapper with min-height */
.igny8-table-wrapper      /* Scrollable table wrapper */
.igny8-table-smooth       /* Smooth transitions */
.igny8-data-row           /* Animated data row */
```

**Header Metrics:**
```css
.igny8-header-metrics     /* Metrics bar container */
.igny8-header-metric      /* Single metric */
.igny8-header-metric-label
.igny8-header-metric-value
.igny8-header-metric-accent
```

### 4.2 Shadow Classes

Use these instead of Tailwind defaults:
```
shadow-theme-xs, shadow-theme-sm, shadow-theme-md, shadow-theme-lg, shadow-theme-xl
```

### 4.3 Typography Classes

```
text-title-2xl, text-title-xl, text-title-lg, text-title-md, text-title-sm
text-theme-xl, text-theme-sm, text-theme-xs
```

---

## Phase 5: Page-by-Page Audit Checklist

### 5.1 Audit Order (by priority)

| # | Module | Folder | Est. Files |
|---|--------|--------|------------|
| 1 | Account Settings | `pages/account/` | ~6 |
| 2 | Site Settings | `pages/Settings/` | ~10 |
| 3 | Sites Management | `pages/Sites/` | ~8 |
| 4 | Writer | `pages/Writer/` | ~5 |
| 5 | Planner | `pages/Planner/` | ~3 |
| 6 | Automation | `pages/Automation/` | ~2 |
| 7 | Optimizer | `pages/Optimizer/` | ~3 |
| 8 | Billing | `pages/Billing/` | ~4 |
| 9 | Dashboard | `pages/Dashboard/` | ~2 |
| 10 | Other Pages | Remaining | ~10+ |

### 5.2 Per-File Audit Checklist

For EACH `.tsx` file:

#### A. IMPORTS ✓
- [ ] NO `@mui/*` imports
- [ ] NO `lucide-react` imports (use `/icons/`)
- [ ] NO `@chakra-ui`, `antd`, `@headlessui`, `@radix-ui`
- [ ] All icons from `/icons/` folder
- [ ] All UI components from `/components/ui/`

#### B. COLORS ✓
- [ ] NO Tailwind default colors (blue-*, red-*, green-*, etc.)
- [ ] NO hardcoded hex (`#XXXXXX`)
- [ ] NO hardcoded rgb/rgba
- [ ] NO inline color styles (`style={{ color: '...' }}`)
- [ ] ONLY uses: brand-*, gray-*, success-*, error-*, warning-*, purple-*

#### C. STYLES ✓
- [ ] NO `style={{` patterns
- [ ] NO `sx={{` patterns
- [ ] All styles via CSS classes from design-system.css
- [ ] Dark mode handled via CSS variables (automatic)

#### D. COMPONENTS ✓
- [ ] NO inline component definitions (extract to /components/)
- [ ] NO raw `<button>` elements (use Button component)
- [ ] NO custom modal implementations (use Modal)
- [ ] NO custom alert/toast (use Alert)
- [ ] NO custom dropdown (use Dropdown)

#### E. FORMS ✓
- [ ] Inputs use standard pattern
- [ ] Selects use `.igny8-select-styled` or standard Select component
- [ ] Checkboxes use standard pattern
- [ ] Form labels consistent

---

## Phase 6: Execution Tracker

### 6.1 Page Audit Progress

| File | Audited | Issues | Fixed | Verified |
|------|---------|--------|-------|----------|
| **Account Module** |||||
| `pages/account/Profile.tsx` | ☐ | - | ☐ | ☐ |
| `pages/account/Team.tsx` | ☐ | - | ☐ | ☐ |
| `pages/account/Security.tsx` | ☐ | - | ☐ | ☐ |
| `pages/account/Preferences.tsx` | ☐ | - | ☐ | ☐ |
| `pages/account/Notifications.tsx` | ☐ | - | ☐ | ☐ |
| `pages/account/ApiKeys.tsx` | ☐ | - | ☐ | ☐ |
| **Settings Module** |||||
| `pages/Settings/General.tsx` | ☐ | - | ☐ | ☐ |
| `pages/Settings/Integrations.tsx` | ☐ | - | ☐ | ☐ |
| `pages/Settings/Publishing.tsx` | ☐ | - | ☐ | ☐ |
| `pages/Settings/ContentDefaults.tsx` | ☐ | - | ☐ | ☐ |
| `pages/Settings/AIModels.tsx` | ☐ | - | ☐ | ☐ |
| `pages/Settings/ImageGeneration.tsx` | ☐ | - | ☐ | ☐ |
| `pages/Settings/SEO.tsx` | ☐ | - | ☐ | ☐ |
| `pages/Settings/Categories.tsx` | ☐ | - | ☐ | ☐ |
| `pages/Settings/Tags.tsx` | ☐ | - | ☐ | ☐ |
| **Sites Module** |||||
| `pages/Sites/SitesList.tsx` | ☐ | - | ☐ | ☐ |
| `pages/Sites/SiteDetail.tsx` | ☐ | - | ☐ | ☐ |
| `pages/Sites/SiteSettings.tsx` | ☐ | - | ☐ | ☐ |
| `pages/Sites/SiteDashboard.tsx` | ☐ | - | ☐ | ☐ |
| `pages/Sites/CreateSite.tsx` | ☐ | - | ☐ | ☐ |
| **Other Modules** |||||
| `pages/Writer/*.tsx` | ☐ | - | ☐ | ☐ |
| `pages/Planner/*.tsx` | ☐ | - | ☐ | ☐ |
| `pages/Automation/*.tsx` | ☐ | - | ☐ | ☐ |
| `pages/Optimizer/*.tsx` | ☐ | - | ☐ | ☐ |
| `pages/Billing/*.tsx` | ☐ | - | ☐ | ☐ |

### 6.2 Component Folder Audit

| Folder | Audited | Issues | Fixed |
|--------|---------|--------|-------|
| `components/ui/button/` | ☐ | - | ☐ |
| `components/ui/modal/` | ☐ | - | ☐ |
| `components/ui/alert/` | ☐ | - | ☐ |
| `components/ui/badge/` | ☐ | - | ☐ |
| `components/ui/dropdown/` | ☐ | - | ☐ |
| `components/ui/card/` | ☐ | - | ☐ |
| `components/ui/table/` | ☐ | - | ☐ |
| `components/ui/tabs/` | ☐ | - | ☐ |
| `components/ui/form/` | ☐ | - | ☐ |
| `components/common/` | ☐ | - | ☐ |
| `components/layout/` | ☐ | - | ☐ |

---

## Phase 7: Verification

### 7.1 Zero-Tolerance Verification

After refactoring, these commands should return **0 results**:

```bash
# 1. No Tailwind default colors
grep -rn "bg-blue-\|text-blue-\|bg-red-\|text-red-\|bg-green-\|text-green-\|bg-yellow-\|text-yellow-\|bg-indigo-\|bg-emerald-\|bg-pink-\|bg-rose-" src/pages/ src/components/ --include="*.tsx" | wc -l

# 2. No inline styles
grep -rn "style={{" src/pages/ src/components/ --include="*.tsx" | wc -l

# 3. No hardcoded hex in className
grep -rn "\[#[0-9a-fA-F]\{3,6\}\]" src/pages/ src/components/ --include="*.tsx" | wc -l

# 4. No external UI libraries
grep -rn "from '@mui\|from '@chakra\|from 'antd" src/pages/ src/components/ --include="*.tsx" | wc -l

# 5. No lucide-react direct imports
grep -rn "from 'lucide-react" src/pages/ --include="*.tsx" | wc -l
```

### 7.2 Visual Verification

- [ ] All pages render correctly (no broken styles)
- [ ] Light mode works properly
- [ ] Dark mode works properly (via `.dark` class)
- [ ] All buttons consistent
- [ ] All forms consistent
- [ ] All tables consistent
- [ ] All modals consistent
- [ ] Brand colors appear correctly

---

## 📋 Quick Reference: Correct Usage Patterns

### Colors (ALL derived from 6 primaries)
```tsx
// ✅ CORRECT - use design token classes (derived from 6 primaries)
className="text-brand-500 bg-brand-50 border-brand-200"
className="text-success-500 bg-success-50"
className="text-error-500 bg-error-50"
className="text-warning-500 bg-warning-50"
className="text-purple-500 bg-purple-50"
className="text-gray-700 bg-gray-100"

// ✅ CORRECT - use CSS variables when needed
className="bg-[var(--color-primary)]"
style={{ '--custom-color': 'var(--color-primary)' }} // Only for CSS custom properties

// ❌ WRONG - Tailwind defaults (DISABLED)
className="text-blue-500 bg-blue-50"
className="text-red-500 bg-green-500"

// ❌ WRONG - Hardcoded hex (NEVER in TSX)
style={{ color: '#0693e3' }}
className="bg-[#0077B6]"
className="text-[#DC2626]"
```

### Components
```tsx
// ✅ CORRECT
import { Button } from '@/components/ui/button/Button';
import { Modal } from '@/components/ui/modal';
import { CheckIcon } from '@/icons';

<Button variant="primary" tone="brand">Save</Button>

// ❌ WRONG
import { Button } from '@mui/material';
import { Check } from 'lucide-react';
<button className="...">Save</button>
```

### Where Hex Values ARE Allowed

```css
/* ✅ ONLY in design-system.css - the 6 primary tokens */
:root {
  --color-primary: #2C7AA1;
  --color-success: #2CA18E;
  --color-warning: #D9A12C;
  --color-danger: #A12C40;
  --color-purple: #2C40A1;
  --color-gray-base: #667085;
}

/* ✅ All other colors derived using color-mix() */
--color-primary-dark: color-mix(in srgb, var(--color-primary) 75%, black);
--color-brand-600: color-mix(in srgb, var(--color-primary) 85%, black);
--color-gray-700: color-mix(in srgb, var(--color-gray-base) 70%, black);
```

---

## 🚨 CRITICAL RULES

1. **6 PRIMARY HEX ONLY**: Only `--color-primary`, `--color-success`, `--color-warning`, `--color-danger`, `--color-purple`, `--color-gray-base` use hex values (plus `#ffffff` for white)
2. **ALL SHADES DERIVED**: Every shade (25-950) is computed from primary using `color-mix()`
3. **NO TAILWIND DEFAULTS**: blue-*, red-*, green-*, etc. are DISABLED
4. **NO INLINE STYLES**: Never use `style={{}}` for colors/spacing
5. **NO HARDCODED HEX IN TSX**: All hex lives in design-system.css only
6. **EXTRACT COMPONENTS**: Any UI used 2+ times → `/components/ui/`
7. **USE STANDARD COMPONENTS**: Button, Modal, Alert, Badge from `/components/ui/`

---

## 🎯 Design Consistency Goals

### The "One Designer" Principle

The entire application must look like it was designed and built by **ONE person**:

| Aspect | Requirement |
|--------|-------------|
| **Colors** | Exact same 6 color palettes everywhere |
| **Spacing** | Consistent padding/margins (use Tailwind spacing scale) |
| **Typography** | Same font sizes, weights, line heights |
| **Borders** | Same border radius, colors, widths |
| **Shadows** | Same shadow tokens everywhere |
| **Buttons** | All use `<Button>` component, same variants |
| **Forms** | All inputs, selects, checkboxes styled identically |
| **Cards** | Same card patterns, padding, borders |
| **Tables** | Same table styles, row heights, headers |
| **Modals** | Same modal structure, animations |

### Visual Consistency Checklist

- [ ] All primary buttons use `bg-brand-500`
- [ ] All success messages use `success-*` palette
- [ ] All error states use `error-*` palette
- [ ] All warning states use `warning-*` palette
- [ ] All premium/special features use `purple-*` palette
- [ ] All neutral backgrounds use `gray-*` palette
- [ ] Border radius consistent (use `--radius-*` tokens)
- [ ] Shadows consistent (use `--shadow-*` tokens)
- [ ] Typography consistent (use `text-theme-*` classes)

---

---

## 🚨 CRITICAL ISSUES - Fix First

### Issue 1: Missing Components After Changes

**Problem**: Many pages have missing components after lucide-react → local icons migration

**Affected Files** (from git diff):
- `ImportExport.tsx` - Uses `Database`, `CheckCircle` etc. from lucide-react
- `WordPressIntegrationDebug.tsx` - Uses `CheckCircle`, `XCircle`, `AlertTriangle`, etc.
- `PostEditor.tsx` - Uses `SaveIcon`, `XIcon`, `FileTextIcon`, etc.
- `NotificationsPage.tsx` - Uses `Bell`, `CheckCircle`, `AlertTriangle`, etc.
- `AccountSettingsPage.tsx` - Uses `Save`, `Loader2`, `Settings`, etc.
- `PlansAndBillingPage.tsx` - Uses `CreditCard`, `Package`, etc.
- `ContentSettingsPage.tsx` - Uses `Save`, `Loader2`, `Image`, etc.
- `UsageAnalyticsPage.tsx` - Uses `TrendingUp`, `Activity`, etc.
- `PurchaseCreditsPage.tsx` - Uses `AlertCircle`, `Check`, etc.
- Multiple components in `/components/sites/`, `/components/billing/`, `/components/auth/`

**Fix**: Replace lucide-react imports with local `/icons/` imports. Add missing aliases to `/icons/index.ts`

### Issue 2: Table Row Height Too Big (Planner & Writer)

**Problem**: Planner and Writer table font sizes too big for some columns, increasing overall row height - tables not compact anymore

**Root Cause**: Font size changes in CSS or component updates affecting table cell sizing

**Fix Locations**:
- `/src/styles/design-system.css` - `.igny8-table-compact td` rules
- Planner and Writer table components - check for increased text sizes

**Required Changes**:
```css
/* Ensure compact table styling */
.igny8-table-compact td {
  padding: 6px 10px !important;  /* Reduced from 8px 12px */
  font-size: 13px !important;     /* Reduced from 14px */
  line-height: 1.3 !important;    /* Tighter line height */
}

.igny8-table-compact th {
  padding: 8px 12px !important;   /* Reduced from 12px 16px */
  font-size: 12px !important;     /* Reduced from 14px */
}
```

---

## Notes

- Gray scale (`gray-25` to `gray-950`) is ALLOWED - derived from `--color-gray-base`
- Dark mode is handled automatically via CSS variables in `.dark` class
- When in doubt, check `design-system.css` for available classes
- New utility classes should be added to `design-system.css`, not inline
- **Future theming**: Changing 6 primary hex values updates entire app automatically