# Professional Admin Portal - Design System

## 🎨 Corporate Color Palette

### Primary Colors:
- **Navy Blue**: #1e3a8a (Headers, Primary Actions)
- **Light Blue**: #3b82f6 (Accents, Links)
- **Soft Blue**: #eff6ff (Backgrounds, Highlights)

### Neutral Colors:
- **White**: #ffffff (Cards, Backgrounds)
- **Light Gray**: #f8f9fa (Table Headers, Borders)
- **Medium Gray**: #6b7280 (Text Secondary)
- **Dark Gray**: #1f2937 (Text Primary)

### Status Colors:
- **Success**: #10b981 (Delivered, Active)
- **Warning**: #f59e0b (Pending, In Progress)
- **Danger**: #ef4444 (Cancelled, Error)
- **Info**: #3b82f6 (Dispatched, Info)

---

## 📐 Design Principles

1. **Consistency** - Same navy blue throughout
2. **Professional** - Clean, corporate look
3. **Responsive** - Works on all screen sizes
4. **Accessible** - High contrast, readable

---

## 🎯 Component Styles

### Page Header:
```css
background: #1e3a8a; /* Navy Blue */
color: white;
padding: 24px;
border-radius: 8px;
```

### Cards:
```css
background: white;
border: 1px solid #e5e7eb;
border-radius: 8px;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
```

### Buttons:
```css
Primary: #1e3a8a (Navy)
Secondary: #6b7280 (Gray)
Success: #10b981 (Green)
Danger: #ef4444 (Red)
```

### Tables:
```css
Header: #f8f9fa
Hover: #f3f4f6
Border: #e5e7eb
```

---

## 📱 Responsive Breakpoints

- **Mobile**: < 768px
- **Tablet**: 768px - 1024px
- **Desktop**: > 1024px

All layouts use Bootstrap 5 grid system for automatic responsiveness.

---

**This ensures a professional, corporate look that works everywhere!**
