diff --git a/.rules b/.rules
index bf77bd6c..ce1baad2 100644
--- a/.rules
+++ b/.rules
@@ -1,6 +1,6 @@
 # IGNY8 AI Agent Rules
 
-**Version:** 1.1.3 | **Updated:** December 27, 2025
+**Version:** 1.2.0 | **Updated:** January 2, 2026
 
 ---
 
@@ -8,8 +8,10 @@
 
 **BEFORE any change, read these docs in order:**
 1. [docs/INDEX.md](docs/INDEX.md) - Quick navigation to any module/feature
-2. Module doc for the feature you're modifying (see INDEX.md for paths)
-3. [CHANGELOG.md](CHANGELOG.md) - Recent changes and version history
+2. [docs/30-FRONTEND/COMPONENT-SYSTEM.md](docs/30-FRONTEND/COMPONENT-SYSTEM.md) - **REQUIRED** for any frontend work
+3. [docs/30-FRONTEND/DESIGN-TOKENS.md](docs/30-FRONTEND/DESIGN-TOKENS.md) - Color tokens and styling rules
+4. Module doc for the feature you're modifying (see INDEX.md for paths)
+5. [CHANGELOG.md](CHANGELOG.md) - Recent changes and version history
 
 ---
 
@@ -21,6 +23,10 @@
 | Frontend | `frontend/src/` | React + TypeScript SPA |
 | Docs | `docs/` | Technical documentation |
 | AI Engine | `backend/igny8_core/ai/` | AI functions (use this, NOT `utils/ai_processor.py`) |
+| Design Tokens | `frontend/src/styles/design-system.css` | **Single source** for colors, shadows, typography |
+| UI Components | `frontend/src/components/ui/` | Button, Badge, Card, Modal, etc. |
+| Form Components | `frontend/src/components/form/` | InputField, Select, Checkbox, Switch |
+| Icons | `frontend/src/icons/` | All SVG icons (import from `../../icons`) |
 
 **Module → File Quick Reference:** See [docs/INDEX.md](docs/INDEX.md#module--file-quick-reference)
 
@@ -45,6 +51,104 @@
 
 ---
 
+## 🎨 DESIGN SYSTEM RULES (CRITICAL!)
+
+> **🔒 STYLE LOCKED** - All UI must use the design system. ESLint enforces these rules.
+
+### Color System (Only 6 Base Colors!)
+
+All colors in the system derive from 6 primary hex values in `design-system.css`:
+- `--color-primary` (#0077B6) - Brand Blue
+- `--color-success` (#2CA18E) - Success Green  
+- `--color-warning` (#D9A12C) - Warning Amber
+- `--color-danger` (#A12C40) - Danger Red
+- `--color-purple` (#2C40A1) - Purple accent
+- `--color-gray-base` (#667085) - Neutral gray
+
+### Tailwind Color Classes
+
+**✅ USE ONLY THESE** (Tailwind defaults are DISABLED):
+```
+brand-*    (50-950) - Primary blue scale
+gray-*     (25-950) - Neutral scale
+success-*  (25-950) - Green scale  
+error-*    (25-950) - Red scale
+warning-*  (25-950) - Amber scale
+purple-*   (25-950) - Purple scale
+```
+
+**❌ BANNED** (These will NOT work):
+```
+blue-*, red-*, green-*, emerald-*, amber-*, indigo-*, 
+pink-*, rose-*, sky-*, teal-*, cyan-*, etc.
+```
+
+### Styling Rules
+
+| ✅ DO | ❌ DON'T |
+|-------|---------|
+| `className="bg-brand-500"` | `className="bg-blue-500"` |
+| `className="text-gray-700"` | `className="text-[#333]"` |
+| `<Button variant="primary">` | `<button className="...">` |
+| Import from `../../icons` | Import from `@heroicons/*` |
+| Use CSS variables `var(--color-primary)` | Hardcode hex values |
+
+---
+
+## 🧩 COMPONENT RULES (ESLint Enforced!)
+
+> **Never use raw HTML elements** - Use design system components.
+
+### Required Component Mappings
+
+| HTML Element | Required Component | Import Path |
+|--------------|-------------------|-------------|
+| `<button>` | `Button` or `IconButton` | `components/ui/button/Button` |
+| `<input type="text/email/password">` | `InputField` | `components/form/input/InputField` |
+| `<input type="checkbox">` | `Checkbox` | `components/form/input/Checkbox` |
+| `<input type="radio">` | `Radio` | `components/form/input/Radio` |
+| `<select>` | `Select` or `SelectDropdown` | `components/form/Select` |
+| `<textarea>` | `TextArea` | `components/form/input/TextArea` |
+
+### Component Quick Reference
+
+```tsx
+// Buttons
+<Button variant="primary" tone="brand">Save</Button>
+<Button variant="outline" tone="danger">Delete</Button>
+<IconButton icon={<CloseIcon />} variant="ghost" title="Close" />
+
+// Form Inputs
+<InputField type="text" label="Name" value={val} onChange={setVal} />
+<Select options={opts} onChange={setVal} />
+<Checkbox label="Accept" checked={val} onChange={setVal} />
+<Switch label="Enable" checked={val} onChange={setVal} />
+
+// Display
+<Badge tone="success" variant="soft">Active</Badge>
+<Alert variant="error" title="Error" message="Failed" />
+<Spinner size="md" />
+```
+
+### Icon Rules
+
+**Always import from central location:**
+```tsx
+// ✅ CORRECT
+import { PlusIcon, CloseIcon, CheckCircleIcon } from '../../icons';
+
+// ❌ BANNED - External icon libraries
+import { XIcon } from '@heroicons/react/24/outline';
+import { Trash } from 'lucide-react';
+```
+
+**Icon sizing:**
+- `className="w-4 h-4"` - In buttons, badges
+- `className="w-5 h-5"` - Standalone
+- `className="w-6 h-6"` - Headers, features
+
+---
+
 ## 🐳 Docker Commands (IMPORTANT!)
 
 **Container Names:**
@@ -65,6 +169,7 @@ docker exec -it igny8_backend python manage.py shell
 # ✅ CORRECT - Run npm commands
 docker exec -it igny8_frontend npm install
 docker exec -it igny8_frontend npm run build
+docker exec -it igny8_frontend npm run lint  # Check design system violations
 
 # ✅ CORRECT - View logs
 docker logs igny8_backend -f
@@ -97,23 +202,31 @@ docker logs igny8_celery_worker -f
 
 ### Before Coding
 1. **Read docs first** - Always read the relevant module doc from `docs/10-MODULES/` before changing code
-2. **Check existing patterns** - Search codebase for similar implementations before creating new ones
-3. **Use existing components** - Never duplicate; reuse components from `frontend/src/components/`
-4. **Check data scope** - Know if your model is Global, Account, or Site/Sector scoped (see table above)
+2. **Read COMPONENT-SYSTEM.md** - **REQUIRED** before any frontend changes
+3. **Check existing patterns** - Search codebase for similar implementations before creating new ones
+4. **Use existing components** - Never duplicate; reuse components from `frontend/src/components/`
+5. **Check data scope** - Know if your model is Global, Account, or Site/Sector scoped (see table above)
 
-### During Coding
-5. **Use correct base class** - Global: `models.Model`, Account: `AccountBaseModel`, Site: `SiteSectorBaseModel`
-6. **Use AI framework** - Use `backend/igny8_core/ai/` for AI operations, NOT legacy `utils/ai_processor.py`
-7. **Follow service pattern** - Business logic in `backend/igny8_core/business/*/services/`
-8. **Check permissions** - Use `IsAuthenticatedAndActive`, `HasTenantAccess` in views
-9. **Use TypeScript types** - All frontend code must be typed
-10. **Use TailwindCSS** - No inline styles; follow `frontend/DESIGN_SYSTEM.md`
+### During Coding - Backend
+6. **Use correct base class** - Global: `models.Model`, Account: `AccountBaseModel`, Site: `SiteSectorBaseModel`
+7. **Use AI framework** - Use `backend/igny8_core/ai/` for AI operations, NOT legacy `utils/ai_processor.py`
+8. **Follow service pattern** - Business logic in `backend/igny8_core/business/*/services/`
+9. **Check permissions** - Use `IsAuthenticatedAndActive`, `HasTenantAccess` in views
+
+### During Coding - Frontend (DESIGN SYSTEM)
+10. **Use design system components** - Button, InputField, Select, Badge, Card - never raw HTML
+11. **Use only design system colors** - `brand-*`, `gray-*`, `success-*`, `error-*`, `warning-*`, `purple-*`
+12. **Import icons from central location** - `import { Icon } from '../../icons'` - never external libraries
+13. **No inline styles** - Use Tailwind utilities or CSS variables only
+14. **No hardcoded colors** - No hex values, no `blue-500`, `red-500` (Tailwind defaults disabled)
+15. **Use TypeScript types** - All frontend code must be typed
 
 ### After Coding
-11. **Update CHANGELOG.md** - Every commit needs a changelog entry with git reference
-12. **Increment version** - PATCH for fixes, MINOR for features, MAJOR for breaking changes
-13. **Update docs** - If you changed APIs or architecture, update relevant docs in `docs/`
-14. **Run migrations** - After model changes: `docker exec -it igny8_backend python manage.py makemigrations`
+16. **Run ESLint** - `docker exec -it igny8_frontend npm run lint` to check design system violations
+17. **Update CHANGELOG.md** - Every commit needs a changelog entry with git reference
+18. **Increment version** - PATCH for fixes, MINOR for features, MAJOR for breaking changes
+19. **Update docs** - If you changed APIs or architecture, update relevant docs in `docs/`
+20. **Run migrations** - After model changes: `docker exec -it igny8_backend python manage.py makemigrations`
 
 ---
 
@@ -139,17 +252,22 @@ docker logs igny8_celery_worker -f
 | I want to... | Go to |
 |--------------|-------|
 | Find any module | [docs/INDEX.md](docs/INDEX.md) |
+| **Use UI components** | [docs/30-FRONTEND/COMPONENT-SYSTEM.md](docs/30-FRONTEND/COMPONENT-SYSTEM.md) |
+| **Check design tokens** | [docs/30-FRONTEND/DESIGN-TOKENS.md](docs/30-FRONTEND/DESIGN-TOKENS.md) |
+| **Design guide** | [docs/30-FRONTEND/DESIGN-GUIDE.md](docs/30-FRONTEND/DESIGN-GUIDE.md) |
 | Understand architecture | [docs/00-SYSTEM/ARCHITECTURE.md](docs/00-SYSTEM/ARCHITECTURE.md) |
 | Find an API endpoint | [docs/20-API/ENDPOINTS.md](docs/20-API/ENDPOINTS.md) |
 | See all models | [docs/90-REFERENCE/MODELS.md](docs/90-REFERENCE/MODELS.md) |
 | Understand AI functions | [docs/90-REFERENCE/AI-FUNCTIONS.md](docs/90-REFERENCE/AI-FUNCTIONS.md) |
 | See frontend pages | [docs/30-FRONTEND/PAGES.md](docs/30-FRONTEND/PAGES.md) |
 | See recent changes | [CHANGELOG.md](CHANGELOG.md) |
+| View component demos | App route: `/ui-elements` |
 
 ---
 
 ## 🚫 Don't Do
 
+### General
 - ❌ Skip reading docs before coding
 - ❌ Create duplicate components
 - ❌ Use `docker-compose` for exec commands (use `docker exec`)
@@ -157,11 +275,21 @@ docker logs igny8_celery_worker -f
 - ❌ Add account filtering to Global models (they're platform-wide!)
 - ❌ Forget site/sector filtering on content models
 - ❌ Forget to update CHANGELOG
-- ❌ Use inline styles (use TailwindCSS)
 - ❌ Hardcode values (use settings/constants)
 - ❌ Work on Linker/Optimizer (inactive modules - Phase 2)
 - ❌ Use any SiteBuilder code (deprecated - mark for removal)
 
+### Frontend - DESIGN SYSTEM VIOLATIONS
+- ❌ Use raw `<button>` - use `Button` or `IconButton`
+- ❌ Use raw `<input>` - use `InputField`, `Checkbox`, `Radio`
+- ❌ Use raw `<select>` - use `Select` or `SelectDropdown`
+- ❌ Use raw `<textarea>` - use `TextArea`
+- ❌ Use inline `style={}` attributes
+- ❌ Hardcode hex colors (`#0693e3`, `#ff0000`)
+- ❌ Use Tailwind default colors (`blue-500`, `red-500`, `green-500`)
+- ❌ Import from `@heroicons/*`, `lucide-react`, `@mui/icons-material`
+- ❌ Create new CSS files (use `design-system.css` only)
+
 ---
 
 ## 📊 API Base URLs
@@ -183,22 +311,22 @@ docker logs igny8_celery_worker -f
 
 ## 📄 Documentation Rules
 
-**Root folder MD files allowed:**
+**Root folder MD files allowed (ONLY these):**
+- `.rules` - AI agent rules (this file)
 - `CHANGELOG.md` - Version history
-- `README.md` - Project quickstart  
-- `IGNY8-APP.md` - Executive summary
-- `TODOS.md` - Cleanup tracking
+- `README.md` - Project quickstart
 
 **All other docs go in `/docs/` folder:**
 ```
 docs/
 ├── INDEX.md              # Master navigation
-├── 00-SYSTEM/            # Architecture, auth, tenancy
+├── 00-SYSTEM/            # Architecture, auth, tenancy, IGNY8-APP.md
 ├── 10-MODULES/           # One file per module
 ├── 20-API/               # API endpoints
-├── 30-FRONTEND/          # Pages, stores
+├── 30-FRONTEND/          # Pages, stores, DESIGN-GUIDE, DESIGN-TOKENS, COMPONENT-SYSTEM
 ├── 40-WORKFLOWS/         # Cross-module flows
-└── 90-REFERENCE/         # Models, AI functions
+├── 90-REFERENCE/         # Models, AI functions, FIXES-KB
+└── plans/                # FINAL-PRELAUNCH, implementation plans
 ```
 
 **When updating docs:**
@@ -215,10 +343,20 @@ docs/
 
 ## 🎯 Quick Checklist Before Commit
 
+### Backend Changes
 - [ ] Read relevant module docs
-- [ ] Used existing components/patterns
 - [ ] Correct data scope (Global/Account/Site)
-- [ ] Updated CHANGELOG.md with git reference
-- [ ] Updated version number
 - [ ] Ran migrations if model changed
+
+### Frontend Changes
+- [ ] Read COMPONENT-SYSTEM.md
+- [ ] Used design system components (not raw HTML)
+- [ ] Used design system colors (brand-*, gray-*, success-*, error-*, warning-*, purple-*)
+- [ ] Icons imported from `../../icons`
+- [ ] No inline styles or hardcoded hex colors
+- [ ] Ran `npm run lint` - no design system violations
+
+### All Changes
+- [ ] Updated CHANGELOG.md with git reference
+- [ ] Incremented version number
 - [ ] Tested locally
diff --git a/CHANGELOG.md b/CHANGELOG.md
index e3888ca2..e1135457 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,7 +1,7 @@
 # IGNY8 Change Log
 
-**Current Version:** 1.3.0  
-**Last Updated:** January 1, 2026
+**Current Version:** 1.3.1  
+**Last Updated:** January 2, 2026
 
 ---
 
@@ -9,6 +9,7 @@
 
 | Version | Date | Summary |
 |---------|------|---------|
+| 1.3.1 | Jan 2, 2026 | **Design System Consolidation** - Updated .rules with comprehensive design system & component rules, ESLint enforcement |
 | 1.3.0 | Jan 1, 2026 | **Major** - Automation overhaul, AI provider integrations (Anthropic/Bria), Model Registry, Global Progress tracking, CSS globalization |
 | 1.2.2 | Dec 28, 2025 | **NEW** - Full notifications page with filtering and bulk actions |
 | 1.2.1 | Dec 28, 2025 | **Critical Fix** - AI task notifications now working |
@@ -32,6 +33,37 @@
 
 ---
 
+## v1.3.1 - January 2, 2026
+
+### Design System Consolidation (Pre-Launch Section 1)
+
+**Updated `.rules` file with comprehensive design system rules:**
+- Added required doc reading: `COMPONENT-SYSTEM.md` mandatory for frontend work
+- Added new Project Structure entries: Design Tokens, UI Components, Form Components, Icons paths
+- Added complete Design System Rules section with color system (6 base colors only)
+- Added Tailwind color classes allowed/banned list
+- Added Component Rules section with required component mappings
+- Added component quick reference with Button, InputField, Badge examples
+- Added icon rules with import path and sizing guidelines
+- Expanded coding rules from 14 to 20 rules (split backend/frontend)
+- Added ESLint check step: `npm run lint` for design system violations
+- Added comprehensive Don't Do section for frontend violations
+- Updated Quick Checklist with separate Backend/Frontend sections
+
+**Updated `DESIGN-GUIDE.md`:**
+- Added Color System section with 6 base color tokens table
+- Added Tailwind color utilities documentation (available vs disabled)
+- Added color usage examples (correct vs wrong)
+- Updated ESLint rules table with `no-icon-children` rule
+- Added docker exec command for lint checking
+- Updated last updated date
+
+**Updated `frontend/DESIGN_SYSTEM.md`:**
+- Updated status to "🔒 LOCKED"
+- Updated last updated date
+
+---
+
 ## v1.3.0 - January 1, 2026
 
 ### Major Release: Automation Overhaul & AI Provider Integrations
diff --git a/README.md b/README.md
index a6ded95a..d7f545f0 100644
--- a/README.md
+++ b/README.md
@@ -10,10 +10,10 @@
 
 | Document | Description |
 |----------|-------------|
-| [IGNY8-APP.md](IGNY8-APP.md) | Executive summary (non-technical) |
+| [docs/00-SYSTEM/IGNY8-APP.md](docs/00-SYSTEM/IGNY8-APP.md) | Executive summary (non-technical) |
 | [docs/INDEX.md](docs/INDEX.md) | Full documentation index |
 | [CHANGELOG.md](CHANGELOG.md) | Version history |
-| [RULES.md](RULES.md) | Documentation maintenance rules |
+| [.rules](.rules) | AI agent rules |
 
 ---
 
@@ -40,19 +40,19 @@ IGNY8 is a full-stack SaaS platform that combines AI-powered content generation
 igny8/
 ├── README.md             # This file
 ├── CHANGELOG.md          # Version history
-├── IGNY8-APP.md          # Executive summary
-├── RULES.md              # Documentation rules
+├── .rules                # AI agent rules
 ├── backend/              # Django REST API + Celery
 ├── frontend/             # React + Vite SPA
 ├── docs/                 # Full documentation
 │   ├── INDEX.md          # Documentation navigation
-│   ├── 00-SYSTEM/        # Architecture & auth
+│   ├── 00-SYSTEM/        # Architecture, auth, IGNY8-APP
 │   ├── 10-MODULES/       # Module documentation
 │   ├── 20-API/           # API endpoints
-│   ├── 30-FRONTEND/      # Frontend pages & stores
+│   ├── 30-FRONTEND/      # Frontend pages, stores, design system
 │   ├── 40-WORKFLOWS/     # Cross-module workflows
 │   ├── 50-DEPLOYMENT/    # Deployment guides
-│   └── 90-REFERENCE/     # Models & AI functions
+│   ├── 90-REFERENCE/     # Models, AI functions, fixes
+│   └── plans/            # Implementation plans
 └── docker-compose.app.yml
 ```
 
diff --git a/IGNY8-APP.md b/docs/00-SYSTEM/IGNY8-APP.md
similarity index 100%
rename from IGNY8-APP.md
rename to docs/00-SYSTEM/IGNY8-APP.md
diff --git a/DESIGN-GUIDE.md b/docs/30-FRONTEND/DESIGN-GUIDE.md
similarity index 63%
rename from DESIGN-GUIDE.md
rename to docs/30-FRONTEND/DESIGN-GUIDE.md
index d9cb472c..a682ed45 100644
--- a/DESIGN-GUIDE.md
+++ b/docs/30-FRONTEND/DESIGN-GUIDE.md
@@ -2,7 +2,9 @@
 
 > **Single Source of Truth for UI Components**
 > 
-> This guide ensures consistent, maintainable frontend code across the entire application.
+> 🔒 **STYLE LOCKED** - This design system is enforced by ESLint. All frontend code must comply.
+
+**Last Updated:** January 2, 2026
 
 ---
 
@@ -10,11 +12,62 @@
 
 | Resource | Path | Description |
 |----------|------|-------------|
-| **Component System** | [docs/30-FRONTEND/COMPONENT-SYSTEM.md](docs/30-FRONTEND/COMPONENT-SYSTEM.md) | Full component reference with props, examples, and usage |
-| **ESLint Plugin** | [frontend/eslint/](frontend/eslint/) | Custom rules enforcing design system |
+| **Component System** | [COMPONENT-SYSTEM.md](COMPONENT-SYSTEM.md) | Full component reference with props, examples, and usage |
+| **Design Tokens Doc** | [DESIGN-TOKENS.md](DESIGN-TOKENS.md) | Detailed token documentation |
+| **ESLint Plugin** | `frontend/eslint/` | Custom rules enforcing design system |
 | **Live Demo** | `/ui-elements` route | Interactive component showcase |
-| **Design Tokens** | [frontend/src/styles/design-system.css](frontend/src/styles/design-system.css) | CSS variables and tokens |
-| **Icons** | [frontend/src/icons/](frontend/src/icons/) | All SVG icons |
+| **CSS Tokens** | `frontend/src/styles/design-system.css` | CSS variables source file |
+| **Icons** | `frontend/src/icons/` | All SVG icons |
+
+---
+
+## 🎨 Color System (CRITICAL!)
+
+### Only 6 Base Colors in Entire System
+
+All colors derive from 6 primary hex values defined in `design-system.css`:
+
+| Token | Hex | Purpose |
+|-------|-----|---------|
+| `--color-primary` | #0077B6 | Brand Blue - main CTA, links |
+| `--color-success` | #2CA18E | Success Green - confirmations |
+| `--color-warning` | #D9A12C | Warning Amber - alerts |
+| `--color-danger` | #A12C40 | Danger Red - errors, destructive |
+| `--color-purple` | #2C40A1 | Purple - premium features |
+| `--color-gray-base` | #667085 | Neutral gray - text, borders |
+
+### Tailwind Color Utilities
+
+**⚠️ Tailwind default colors are DISABLED!** Only use:
+
+```css
+/* ✅ AVAILABLE */
+brand-50 through brand-950    /* Primary blue scale */
+gray-25 through gray-950      /* Neutral scale */
+success-25 through success-950 /* Green scale */
+error-25 through error-950     /* Red scale */
+warning-25 through warning-950 /* Amber scale */
+purple-25 through purple-950   /* Purple scale */
+
+/* ❌ DISABLED - These will NOT work */
+blue-*, red-*, green-*, emerald-*, amber-*, indigo-*, 
+pink-*, rose-*, sky-*, teal-*, cyan-*, etc.
+```
+
+### Usage Examples
+
+```tsx
+// ✅ CORRECT
+<div className="bg-brand-500 text-white">Primary Button</div>
+<div className="text-gray-700 bg-gray-50">Card content</div>
+<Badge tone="success">Active</Badge>
+<Alert variant="error" message="Failed" />
+
+// ❌ WRONG
+<div className="bg-blue-500">...</div>     // Default blue disabled
+<div className="bg-[#0693e3]">...</div>   // Hardcoded hex
+<div style={{ color: '#ff0000' }}>...</div> // Inline style
+```
 
 ---
 
@@ -90,15 +143,20 @@ import { CloseIcon, TrashBinIcon } from '../../icons';
 
 | Rule | Level | Action |
 |------|-------|--------|
-| `no-raw-button` | warn → error | Use `Button` or `IconButton` |
-| `no-raw-input` | warn → error | Use `InputField`, `Checkbox`, `Radio` |
-| `no-raw-select` | warn → error | Use `Select` or `SelectDropdown` |
-| `no-raw-textarea` | warn → error | Use `TextArea` |
-| `no-restricted-imports` | error | Block external icon libraries |
+| `no-raw-button` | warn | Use `Button` or `IconButton` |
+| `no-raw-input` | warn | Use `InputField`, `Checkbox`, `Radio` |
+| `no-raw-select` | warn | Use `Select` or `SelectDropdown` |
+| `no-raw-textarea` | warn | Use `TextArea` |
+| `no-icon-children` | warn | Use `startIcon`/`endIcon` props instead of icon children |
+| `no-restricted-imports` | error | Block `@heroicons/*`, `lucide-react`, `@mui/icons-material` |
 
 ### Check Violations
 
 ```bash
+# Inside container
+docker exec -it igny8_frontend npm run lint
+
+# Or directly
 cd frontend
 npm run lint
 ```
diff --git a/frontend/DESIGN_SYSTEM.md b/docs/30-FRONTEND/DESIGN-TOKENS.md
similarity index 99%
rename from frontend/DESIGN_SYSTEM.md
rename to docs/30-FRONTEND/DESIGN-TOKENS.md
index f67373e6..ba0486d0 100644
--- a/frontend/DESIGN_SYSTEM.md
+++ b/docs/30-FRONTEND/DESIGN-TOKENS.md
@@ -211,8 +211,8 @@ import { MODULE_COLORS } from '@/config/colors.config';
 
 ---
 
-**Last Updated**: January 1, 2026
-**Status**: Active Design System Rules
+**Last Updated**: January 2, 2026
+**Status**: Active Design System Rules - 🔒 LOCKED
 
 ---
 
diff --git a/fixes-kb.md b/docs/90-REFERENCE/FIXES-KB.md
similarity index 100%
rename from fixes-kb.md
rename to docs/90-REFERENCE/FIXES-KB.md
diff --git a/docs/INDEX.md b/docs/INDEX.md
index a30a8fa5..bda2df4a 100644
--- a/docs/INDEX.md
+++ b/docs/INDEX.md
@@ -1,7 +1,7 @@
 # IGNY8 Technical Documentation
 
-**Version:** 1.2.0  
-**Last Updated:** December 27, 2025  
+**Version:** 1.3.1  
+**Last Updated:** January 2, 2026  
 **Purpose:** Complete technical reference for the IGNY8 AI content platform
 
 ---
@@ -11,13 +11,16 @@
 | I want to... | Go to |
 |--------------|-------|
 | Understand system architecture | [00-SYSTEM/ARCHITECTURE.md](00-SYSTEM/ARCHITECTURE.md) |
+| Read executive summary | [00-SYSTEM/IGNY8-APP.md](00-SYSTEM/IGNY8-APP.md) |
 | Work with a specific module | [10-MODULES/](#modules) |
 | Find an API endpoint | [20-API/ENDPOINTS.md](20-API/ENDPOINTS.md) |
+| **Use UI components** | [30-FRONTEND/COMPONENT-SYSTEM.md](30-FRONTEND/COMPONENT-SYSTEM.md) |
+| **Check design tokens** | [30-FRONTEND/DESIGN-TOKENS.md](30-FRONTEND/DESIGN-TOKENS.md) |
+| **Read design guide** | [30-FRONTEND/DESIGN-GUIDE.md](30-FRONTEND/DESIGN-GUIDE.md) |
 | Understand frontend structure | [30-FRONTEND/PAGES.md](30-FRONTEND/PAGES.md) |
 | Trace a workflow end-to-end | [40-WORKFLOWS/](#workflows) |
 | Look up model fields | [90-REFERENCE/MODELS.md](90-REFERENCE/MODELS.md) |
-| Troubleshoot issues | [90-REFERENCE/TROUBLESHOOTING.md](90-REFERENCE/TROUBLESHOOTING.md) |
-| See known issues | [/PRE-LAUNCH-AUDIT.md](/PRE-LAUNCH-AUDIT.md) |
+| See prelaunch checklist | [plans/FINAL-PRELAUNCH.md](plans/FINAL-PRELAUNCH.md) |
 
 ---
 
@@ -28,6 +31,7 @@
 | [ARCHITECTURE.md](00-SYSTEM/ARCHITECTURE.md) | Tech stack, deployment, system design |
 | [AUTH-FLOWS.md](00-SYSTEM/AUTH-FLOWS.md) | Authentication, JWT, sessions, roles |
 | [TENANCY.md](00-SYSTEM/TENANCY.md) | Multi-tenant architecture, Account/Site/Sector |
+| [IGNY8-APP.md](00-SYSTEM/IGNY8-APP.md) | Executive summary (non-technical) |
 
 ---
 
@@ -61,8 +65,12 @@
 
 | Document | Purpose |
 |----------|---------|
-| [PAGES.md](30-FRONTEND/PAGES.md) | All pages and routes || [PAGE-REQUIREMENTS.md](30-FRONTEND/PAGE-REQUIREMENTS.md) | Site/sector selector requirements || [STORES.md](30-FRONTEND/STORES.md) | Zustand state management |
-| [COMPONENTS.md](30-FRONTEND/COMPONENTS.md) | Key reusable components |
+| [COMPONENT-SYSTEM.md](30-FRONTEND/COMPONENT-SYSTEM.md) | **UI components reference** (Button, InputField, etc.) |
+| [DESIGN-GUIDE.md](30-FRONTEND/DESIGN-GUIDE.md) | **Design system guide** (colors, rules) |
+| [DESIGN-TOKENS.md](30-FRONTEND/DESIGN-TOKENS.md) | **Design tokens** (CSS variables, color scales) |
+| [PAGES.md](30-FRONTEND/PAGES.md) | All pages and routes |
+| [PAGE-REQUIREMENTS.md](30-FRONTEND/PAGE-REQUIREMENTS.md) | Site/sector selector requirements |
+| [STORES.md](30-FRONTEND/STORES.md) | Zustand state management |
 
 ### Current Page Structure (v1.2.0)
 
diff --git a/docs/plans/FINAL-PRELAUNCH.md b/docs/plans/FINAL-PRELAUNCH.md
new file mode 100644
index 00000000..e2a356e9
--- /dev/null
+++ b/docs/plans/FINAL-PRELAUNCH.md
@@ -0,0 +1,134 @@
+# IGNY8 Launch Preparation - Task Organization
+
+---
+
+## 1. Design System Consolidation
+
+Update the rules files, to follow the rules in all changes for styles, for components, for coding rules, to use consistent design
+
+---
+
+## 2. Visual Verifications
+
+2.1 - All logos and images to update for dark and light color scheme layout, and logo design final as well as favicon, and move images to right folder
+
+2.2 - Sidebar menu rearrange for items that need rearranging, and reduce padding/spacing
+
+2.3 - Fix the sidebar active/selected menu and hover color
+
+2.4 - Assign manually the colors to each module, and verify and fix that in each page and progress bar consistent colors are used, across module pages, automation and dashboard
+
+2.5 - Use colors in setup, sites and account and all its subpages
+
+---
+
+## 3. AI Provider Configuration
+
+3.1 - Add Bria image generation and verify that DALL-E and Bria image generation are working
+
+3.2 - Add and verify Claude API and models
+
+3.3 - Update the 2 image sizes to be landscape and 2 square, and update the template to use full width image on full section, and half width content section
+
+---
+
+## 4. WordPress & Content Templates
+
+4.1 - Make the WordPress post template more optimized
+
+4.2 - Update the header section to show only publicly user and SEO friendly tags and working to show, remove the rest
+
+---
+
+## 5. Credits and Pricing
+
+5.1 - Finalize the credits token costing, limits and per plan structure
+
+5.2 - Finalize what to show in pricing plans on frontend, and also in app
+
+5.3 - Upgrade plans for credits package and plan upgrade
+
+5.4 - Subscription verification correct renewal/reset of credits date
+
+5.5 - Create packages for setup app (one time) & monthly campaign management (include keyword selection)
+
+---
+
+## 6. Fixing All Texts and Highlighting Upcoming Features
+
+In app and in frontend:
+- Fixing texts like articles or content or pages / products / service (coming soon)
+- New site builder (THE SEO HOLY GRAIL)
+- Interlinking
+- Backlinks
+- Optimization
+- Socializer - integration and posting, to social and video channels
+- Videos and reels in article and social
+
+---
+
+## 7. Frontend Marketing Site
+
+7.1 - Complete site content based on final docs, features, and help documentation
+
+7.2 - Simple pricing page with plans (Starter $99, Growth $199, Scale $299) & mentioning credits
+
+---
+
+## 8. Email Setup
+
+| Use Case | Service | Why |
+|----------|---------|-----|
+| **Transactional** (password resets, notifications, alerts) | **Resend** | Better deliverability, faster delivery, cleaner API |
+| **Marketing** (newsletters, campaigns, bulk) | **Brevo** | Higher volume, built-in templates, unsubscribe management, analytics |
+
+Combined Free Limits:
+- Resend: 3,000/mo transactional
+- Brevo: 9,000/mo marketing
+- Total: 12,000 emails/month free
+
+---
+
+## 9. Pipeline Verification
+
+9.1 - Run complete manual and automated pipeline and fix any issue if there is any issue
+
+---
+
+## 10. Data Cleanup & Deployment
+
+10.1 - Clear all IGNY8 data: sites, images, content, all tables, logs
+
+10.2 - V1.0 lock config, Final configuration lock for V1.0 release
+
+10.3 - SIngup 3 new users on each plan and verify, and use one own account deploy perosnal sites
+
+10.4 - Site Deployments:
+- homeg8.com
+- massagersmart.com
+- Alorig.com
+- SalmanSadiq.com
+- AIAI.pk
+
+---
+
+## 11. Final QA & Testing
+
+11.1 - CRUD operations | Collect current implementation from codebase, visually and functionally verify manually
+
+11.2 - Automation pipeline | Full end-to-end test from clustering to publishing
+
+11.3 - Credits accuracy | Verify accurate credits and costs consumption
+
+---
+
+## 12. Documentation & Media
+
+12.1 - Feature screencasts | Create screencast of healthy data from each page
+
+12.2 - Feature explainer videos | Create videos for features explainer
+
+12.3 - Tutorial videos | Create functional screencast for how-to video tutorials
+
+
+----
diff --git a/docs/plans/FRONTEND-AUDIT-PLAN.md b/docs/plans/implemented/FRONTEND-AUDIT-PLAN.md
similarity index 100%
rename from docs/plans/FRONTEND-AUDIT-PLAN.md
rename to docs/plans/implemented/FRONTEND-AUDIT-PLAN.md
diff --git a/docs/plans/PUBLISHING-ONBOARDING-IMPLEMENTATION-PLAN.md b/docs/plans/implemented/PUBLISHING-ONBOARDING-IMPLEMENTATION-PLAN.md
similarity index 100%
rename from docs/plans/PUBLISHING-ONBOARDING-IMPLEMENTATION-PLAN.md
rename to docs/plans/implemented/PUBLISHING-ONBOARDING-IMPLEMENTATION-PLAN.md
diff --git a/docs/plans/TODOS.md b/docs/plans/implemented/TODOS.md
similarity index 100%
rename from docs/plans/TODOS.md
rename to docs/plans/implemented/TODOS.md
diff --git a/frontend/eslint/eslint-plugin-igny8-design-system.cjs b/frontend/eslint/eslint-plugin-igny8-design-system.cjs
index 2d429009..60d7d0c6 100644
--- a/frontend/eslint/eslint-plugin-igny8-design-system.cjs
+++ b/frontend/eslint/eslint-plugin-igny8-design-system.cjs
@@ -7,7 +7,8 @@
  * 
  * DOCUMENTATION:
  * - Full component reference: docs/30-FRONTEND/COMPONENT-SYSTEM.md
- * - Design guide: DESIGN-GUIDE.md (root)
+ * - Design guide: docs/30-FRONTEND/DESIGN-GUIDE.md
+ * - Design tokens: docs/30-FRONTEND/DESIGN-TOKENS.md
  * - Live demo: /ui-elements route
  * 
  * RULES: