# Design System & Component Guidelines

> 🔒 **STYLE SYSTEM LOCKED** - This design system is **LOCKED** as of 2025-01-XX. Read this entire document before making any styling changes.

## 🔒 Style System Lock Status

**DO NOT:**
- ❌ Create new CSS classes without documenting in this file
- ❌ Duplicate existing styling patterns
- ❌ Create custom colors/utilities that already exist
- ❌ Modify core classes (`.igny8-table-compact`, etc.) without updating documentation
- ❌ Add inline styles for colors/spacing/typography

**DO:**
- ✅ Check this document before creating any styles
- ✅ Use existing classes from `igny8-colors.css`
- ✅ Use Tailwind defaults where possible
- ✅ Follow component patterns from this guide
- ✅ Update this document if you MUST add something new

Any new styling that duplicates existing functionality or creates new classes without documentation will be considered technical debt.

---

## Core Principles

### 1. **Reuse Existing Components Only**
- ✅ **DO**: Use existing components from `/src/components/ui/` and `/src/components/common/`
- ❌ **DON'T**: Create new components unless explicitly required and approved
- ❌ **DON'T**: Duplicate existing component functionality

### 2. **No Inline Styles**
- ✅ **DO**: Use Tailwind CSS utility classes
- ✅ **DO**: Use existing CSS classes from the design system
- ✅ **DO**: Use existing component props for styling
- ❌ **DON'T**: Use inline `style` attributes
- ❌ **DON'T**: Use inline `style={{}}` in JSX

### 3. **Component Consistency**
- All UI Elements pages should follow the same structure:
  - Use `PageMeta` for SEO
  - Use `PageBreadcrumb` for navigation
  - Use `ComponentCard` for consistent card styling
  - Import and use existing reusable components

### 4. **Available Component Libraries**

#### UI Components (`/src/components/ui/`)
- `alert/` - Alert components
- `avatar/` - Avatar components
- `badge/` - Badge components
- `breadcrumb/` - Breadcrumb navigation
- `button/` - Button components
- `button-group/` - Button group components
- `card/` - Card components
- `dropdown/` - Dropdown menu components
- `images/` - Image components
- `list/` - List components
- `modal/` - Modal components
- `pagination/` - Pagination components
- `progress/` - Progress bar components
- `ribbon/` - Ribbon components
- `spinner/` - Spinner/loading components
- `tabs/` - Tab components
- `table/` - Table components
- `toast/` - Toast notification components
- `tooltip/` - Tooltip components
- `videos/` - Video components

#### Common Components (`/src/components/common/`)
- `ComponentCard` - Consistent card wrapper for component showcases
- `PageBreadcrumb` - Breadcrumb navigation
- `PageMeta` - SEO meta tags
- `ConfirmDialog` - Confirmation dialogs
- `FormModal` - Form modals (when available)

### 5. **Styling Guidelines**
- Use Tailwind CSS classes exclusively
- Follow the existing color scheme from `igny8-colors.css`
- Use dark mode variants: `dark:bg-gray-900`, `dark:text-white`, etc.
- Maintain consistent spacing using Tailwind spacing scale
- Use existing utility classes: `shadow-theme-xs`, `text-theme-sm`, etc.

### 6. **When Creating New Components is Acceptable**
Only create new components if:
1. Explicitly requested by the user
2. Documented in an approved feature request
3. No existing component can be adapted or extended

### 7. **Checking for Existing Components**
Before implementing any UI element:
1. Search existing components in `/src/components/ui/`
2. Check common components in `/src/components/common/`
3. Review existing UI Elements pages for patterns
4. Check if similar functionality exists in other modules

---

**Last Updated**: Current Session
**Status**: Active Design System Rules