igny8/docs/plans/FRONTEND-AUDIT-PLAN.md

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)

: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

/* ✅ 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:

// 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

# 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:

.menu-item           /* Base menu item */
.menu-item-active    /* Active state */
.menu-item-inactive  /* Inactive state */
.menu-item-icon-size /* Icon sizing */

Form Elements:

.igny8-select-styled  /* Styled select dropdown */
.tableCheckbox        /* Table checkbox */

Tables:

.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:

.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:

# 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)

// ✅ 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

// ✅ 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

/* ✅ 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:

/* 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