# Haznox Design System v1.0

## 🎨 Color Palette

### Primary Colors
- **Primary 50:** #f0f4ff (Light backgrounds)
- **Primary 500:** #6366f1 (Main brand color - CTAs, highlights)
- **Primary 600:** #4f46e5 (Hover state)
- **Primary 700:** #4338ca (Active state)
- **Primary 900:** #1e1b4b (Dark backgrounds)

### Semantic Colors
- **Success:** #10b981 (Green - confirmations, success states)
- **Warning:** #f59e0b (Amber - warnings, caution)
- **Error:** #ef4444 (Red - errors, destructive actions)
- **Info:** #3b82f6 (Blue - informational)

### Neutrals
- **Dark 900:** #13141f (Main dark background)
- **Dark 800:** #1e2030 (Secondary dark)
- **Gray 400:** #9ca3af (Secondary text)
- **Gray 500:** #6b7280 (Tertiary text)
- **Gray 600:** #4b5563 (Border color)
- **White/Light:** #ffffff (Text on dark)

---

## 📝 Typography

### Font Family
- **Primary:** Inter (system-ui fallback)
- **Monospace:** Courier New (for code)

### Scale
```
Display:      text-4xl (36px) - Page titles
Heading 1:    text-3xl (30px) - Section headers
Heading 2:    text-2xl (24px) - Subsections
Heading 3:    text-xl  (20px) - Card titles
Body Large:   text-base (16px) - Main content
Body Regular: text-sm (14px) - Secondary text
Body Small:   text-xs (12px) - Captions, labels
```

### Font Weights
- **Bold:** 700 (Headers, CTAs)
- **Semibold:** 600 (Subheaders)
- **Regular:** 400 (Body)

### Line Heights
- **Tight:** 1.2 (Headers)
- **Normal:** 1.5 (Body)
- **Relaxed:** 1.8 (Long-form content)

---

## 🎯 Components

### Buttons
```
Primary Button
- Background: primary-500
- Hover: primary-600
- Active: primary-700
- Text: White, bold
- Padding: px-6 py-2
- Border-radius: rounded-lg
- Disabled: opacity-50, cursor-not-allowed

Secondary Button
- Background: transparent
- Border: 1px border-gray-600
- Text: gray-200
- Hover: bg-gray-800

Destructive Button
- Background: error (red)
- Same styling as primary
```

### Cards
- **Background:** dark-800 or dark-900
- **Border:** 1px border-gray-700
- **Border-radius:** rounded-lg
- **Padding:** p-6
- **Shadow:** None (flat design)
- **Hover:** Subtle bg shift or border highlight

### Input Fields
- **Background:** dark-900
- **Border:** 1px border-gray-600
- **Border-radius:** rounded-lg
- **Padding:** px-4 py-2
- **Focus:** border-primary-500, ring-2 ring-primary-500/20
- **Text:** gray-200
- **Label:** text-xs, text-gray-400

### Tables
- **Header Background:** dark-800
- **Row Hover:** bg-dark-800/50
- **Borders:** border-gray-700
- **Padding:** p-4

### Modals/Dialogs
- **Background:** dark-900
- **Border:** 1px border-gray-700
- **Border-radius:** rounded-xl
- **Padding:** p-6
- **Overlay:** bg-black/50

---

## 📐 Spacing Scale
```
0:    0
1:    4px
2:    8px
3:    12px
4:    16px
6:    24px
8:    32px
12:   48px
16:   64px
```

Use consistent spacing for:
- Component padding
- Gap between elements
- Margins
- Line spacing

---

## 🎨 Layout Patterns

### Page Structure
```
Header/Navigation
├── Title + breadcrumb
├── Filters/Controls (optional)
└── Content Area
    ├── Main content (70%)
    └── Sidebar (30%) - optional
```

### Grid System
- **2-column:** For narrow layouts
- **3-column:** For dashboards
- **4-column:** For grids
- **Responsive:** Stack to 1-column on mobile

---

## ✨ States & Interactions

### Hover States
- Buttons: Darken by 1 level (500→600)
- Cards: Border highlight or bg shift
- Links: Underline or color change

### Focus States
- Ring: 2px ring-primary-500/20
- Outline: None (use ring instead)

### Loading States
- Spinner: Indigo circular spinner
- Skeleton: Gray placeholder
- Message: "Loading..." with spinner

### Error States
- Border: 1px border-error
- Icon: ⚠️ or ❌
- Message: text-error, text-xs
- Background: error/10 optional

### Success States
- Border: 1px border-success
- Icon: ✓
- Message: text-success
- Toast: Green notification

---

## 🌙 Dark Mode (Default)
- Primary dark backgrounds
- Light text (#ffffff, #e5e7eb)
- Muted secondary text (#9ca3af)
- Colored accents for CTAs

---

## 🎯 UX Principles

1. **Clarity:** Clear labels, obvious CTAs
2. **Consistency:** Same patterns across pages
3. **Feedback:** Toast, spinner, state changes
4. **Accessibility:** Proper contrast, focus states
5. **Performance:** Fast interactions, no jank
6. **Mobile-first:** Responsive on all sizes

---

## 📊 UX Audit Results

### ✅ Strengths
- Dark theme reduces eye strain
- Clear color hierarchy
- Good spacing and readability
- Responsive design foundation

### ⚠️ Issues Found

#### Critical (Must Fix)
1. **Login/Register** - Form validation unclear, no error messages
2. **Create Post** - Too many template options, overwhelming
3. **Dashboard** - Empty state not friendly, no guidance
4. **Settings** - Form layout inconsistent

#### High Priority
1. **Buttons** - Inconsistent sizing and styles
2. **Cards** - Inconsistent shadows/borders
3. **Forms** - Missing labels, placeholder text unclear
4. **Loading states** - No spinner on some async actions
5. **Error handling** - Generic "failed" messages

#### Medium Priority
1. **Typography** - Inconsistent font sizes
2. **Spacing** - Uneven gaps between elements
3. **Icons** - Missing icons in many places
4. **Breadcrumbs** - Not present on nested pages
5. **Search** - No filters on lists

#### Low Priority
1. **Colors** - Slight inconsistencies in shade usage
2. **Animations** - Add micro-interactions
3. **Help text** - Add tooltips in complex areas

---

## 🚀 Implementation Priority

**Week 1:**
- [ ] Fix critical form issues
- [ ] Standardize buttons and cards
- [ ] Improve loading states
- [ ] Better error messages

**Week 2:**
- [ ] Add proper labels and help text
- [ ] Improve empty states
- [ ] Responsive fixes
- [ ] Add breadcrumbs

**Week 3:**
- [ ] Micro-interactions
- [ ] Tooltips
- [ ] Advanced filters
- [ ] Performance polish