imp part 3

frontend/DESIGN_SYSTEM.md

@@ -146,5 +146,70 @@ Before implementing any UI element:
 
 ---
 
-**Last Updated**: Current Session
+## 📝 Typography Scale
+
+Typography tokens are defined in `index.css` and should be used consistently:
+
+### Title Sizes (for page/section headings)
+| Token | Size | Line Height | Use Case |
+|-------|------|-------------|----------|
+| `--text-title-2xl` | 72px | 90px | Hero sections only |
+| `--text-title-xl` | 60px | 72px | Landing page headings |
+| `--text-title-lg` | 48px | 60px | Major section headers |
+| `--text-title-md` | 36px | 44px | Page titles |
+| `--text-title-sm` | 30px | 38px | Section subtitles |
+
+### Theme Sizes (for body text)
+| Token | Size | Line Height | Use Case |
+|-------|------|-------------|----------|
+| `--text-theme-xl` | 20px | 30px | Large body text, intro paragraphs |
+| `--text-theme-sm` | 14px | 20px | Standard body text, menu items |
+| `--text-theme-xs` | 12px | 18px | Small text, labels, captions |
+
+### Usage in Tailwind
+```tsx
+// Use Tailwind utilities mapped to tokens
+<h1 className="text-title-md">Page Title</h1>
+<p className="text-theme-sm">Body text</p>
+<span className="text-theme-xs">Caption</span>
+
+// Or use the custom utility classes
+<h2 className="text-2xl font-semibold">Section Title</h2>
+<p className="text-base">Body text</p>
+```
+
+### Font Weights
+- `font-normal` (400) - Body text
+- `font-medium` (500) - Labels, menu items
+- `font-semibold` (600) - Headings, emphasis
+- `font-bold` (700) - Strong emphasis
+
+---
+
+## 🎨 Module Colors
+
+Module-specific colors are defined in `src/config/colors.config.ts`:
+
+| Module | Primary Color | Usage |
+|--------|---------------|-------|
+| Keywords | `brand-500` (blue) | Icons, progress bars, badges |
+| Clusters | `purple-500` | Icons, progress bars, badges |
+| Ideas | `purple-600` | Icons, progress bars, badges |
+| Tasks | `success-600` (green) | Icons, progress bars, badges |
+| Content | `success-500` | Icons, progress bars, badges |
+| Images | `purple-500` | Icons, progress bars, badges |
+| Automation | `brand-500` | Pipeline cards |
+| Billing | `warning-500` (amber) | Credit displays |
+
+```tsx
+import { MODULE_COLORS } from '@/config/colors.config';
+
+// Use in components
+<div className={MODULE_COLORS.keywords.bg}>Keywords Section</div>
+<span className={MODULE_COLORS.clusters.text}>Cluster Label</span>
+```
+
+---
+
+**Last Updated**: December 30, 2025
 **Status**: Active Design System Rules

frontend/src/index.css

@@ -175,7 +175,7 @@
 }
 
 @utility menu-item {
-  @apply relative flex items-center w-full gap-3 px-3.5 py-2.5 font-medium rounded-lg text-theme-sm;
+  @apply relative flex items-center w-full gap-3.5 px-4 py-3 font-medium rounded-lg text-theme-sm;
 }
 
 @utility menu-item-active {
@@ -188,7 +188,7 @@
 
 /* Menu icon sizing - consistent across sidebar */
 @utility menu-item-icon-size {
-  @apply w-5 h-5 flex-shrink-0;
+  @apply w-6 h-6 flex-shrink-0;
   
   /* Force SVG icons to inherit parent size */
   & svg {
@@ -207,7 +207,7 @@
 
 /* Dropdown menu items - increased spacing */
 @utility menu-dropdown-item {
-  @apply block px-3 py-2 text-theme-sm font-medium rounded-md transition-colors;
+  @apply block px-3.5 py-2.5 text-theme-sm font-medium rounded-md transition-colors;
 }
 
 @utility menu-dropdown-item-active {