# 🎨 CargoFlow Design System

## Color Palette

### Primary Colors
```
Purple:  #667eea (rgb(102, 126, 234))
Indigo:  #764ba2 (rgb(118, 75, 162))
```

### Status Colors
```
Success (Green):  #10b981 (Delivered, Active)
Warning (Yellow): #f59e0b (Loaded, Pending)
Info (Blue):      #3b82f6 (In Transit)
Danger (Red):     #ef4444 (Inactive, Errors)
Gray:             #6b7280 (Arrived, Neutral)
```

### Background Colors
```
Page Background:  #f9fafb (gray-50)
Card Background:  #ffffff (white)
Sidebar:          Linear gradient (Purple to Indigo)
```

### Text Colors
```
Primary Text:   #1f2937 (gray-800)
Secondary Text: #6b7280 (gray-600)
Light Text:     #9ca3af (gray-500)
White Text:     #ffffff (on colored backgrounds)
```

## Typography

### Font Family
```css
font-family: Arial, sans-serif;
```

### Font Sizes
```
Headings:
- h1: 2xl (24px) - Page titles
- h2: xl (20px) - Section titles
- h3: lg (18px) - Card titles
- h4: base (16px) - Subsections

Body:
- Normal: base (16px)
- Small: sm (14px)
- Extra Small: xs (12px)
```

### Font Weights
```
- Regular: 400 (body text)
- Medium: 500 (labels, emphasis)
- Semibold: 600 (headings)
- Bold: 700 (important numbers)
```

## Spacing System

### Padding/Margin Scale
```
- xs: 0.5rem (8px)
- sm: 0.75rem (12px)
- base: 1rem (16px)
- md: 1.5rem (24px)
- lg: 2rem (32px)
- xl: 3rem (48px)
```

### Component Spacing
```
Cards: p-6 (24px padding)
Forms: gap-6 (24px between fields)
Buttons: px-6 py-3 (24px horizontal, 12px vertical)
Tables: px-6 py-4 (24px horizontal, 16px vertical)
```

## Border Radius

```
- Small: 0.375rem (6px) - Badges, small buttons
- Medium: 0.5rem (8px) - Inputs, cards
- Large: 0.75rem (12px) - Large buttons
- Full: 9999px - Pills, avatars
```

## Shadows

```
- Small: shadow-sm - Subtle elevation
- Medium: shadow-md - Cards, dropdowns
- Large: shadow-lg - Modals, hover states
- Extra Large: shadow-xl - Popovers
```

## Components

### Buttons

#### Primary Button
```html
<button class="px-6 py-3 bg-gradient-to-r from-purple-600 to-indigo-600 text-white rounded-lg hover:shadow-lg transition">
    Button Text
</button>
```

#### Secondary Button
```html
<button class="px-6 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50">
    Button Text
</button>
```

### Cards

#### Standard Card
```html
<div class="bg-white rounded-lg shadow-md p-6">
    Card Content
</div>
```

#### Hover Card
```html
<div class="bg-white rounded-lg shadow-md p-6 card-hover">
    Card Content
</div>
```

### Status Badges

#### Success Badge
```html
<span class="px-3 py-1 rounded-full text-xs font-semibold bg-green-100 text-green-800">
    Delivered
</span>
```

#### Warning Badge
```html
<span class="px-3 py-1 rounded-full text-xs font-semibold bg-yellow-100 text-yellow-800">
    Pending
</span>
```

#### Info Badge
```html
<span class="px-3 py-1 rounded-full text-xs font-semibold bg-blue-100 text-blue-800">
    In Transit
</span>
```

### Form Inputs

#### Text Input
```html
<input type="text" 
    class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-600 focus:border-transparent">
```

#### Select Dropdown
```html
<select class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-600 focus:border-transparent">
    <option>Option</option>
</select>
```

#### Textarea
```html
<textarea rows="3" 
    class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-600 focus:border-transparent">
</textarea>
```

### Tables

```html
<table class="min-w-full divide-y divide-gray-200">
    <thead class="bg-gray-50">
        <tr>
            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
                Header
            </th>
        </tr>
    </thead>
    <tbody class="bg-white divide-y divide-gray-200">
        <tr class="hover:bg-gray-50">
            <td class="px-6 py-4 whitespace-nowrap text-gray-700">
                Cell
            </td>
        </tr>
    </tbody>
</table>
```

## Icons

### Font Awesome Icons Used

```
Navigation:
- fa-chart-line (Dashboard)
- fa-box (Bookings)
- fa-users (Customers)
- fa-dollar-sign (Rates)
- fa-map-marker-alt (Tracking)

Actions:
- fa-plus (Add new)
- fa-edit (Edit)
- fa-eye (View)
- fa-trash (Delete)
- fa-file-pdf (PDF download)
- fa-search (Search)

Status:
- fa-check-circle (Success)
- fa-exclamation-circle (Warning)
- fa-truck (Shipping)
- fa-shipping-fast (Logo)
- fa-bell (Notifications)
```

## Layout Structure

### Sidebar
```
Width: 16rem (256px)
Background: Gradient (Purple to Indigo)
Text: White
Active State: White background with 20% opacity
Border: 4px left border on active
```

### Main Content
```
Padding: 2rem (32px)
Background: Gray-50
Max Width: Full width minus sidebar
```

### Header Bar
```
Height: Auto
Background: White
Shadow: Small shadow
Padding: 1rem 2rem (16px 32px)
```

## Responsive Breakpoints

```css
/* Mobile First */
Default: < 768px (Mobile)

/* Tablet */
md: 768px

/* Desktop */
lg: 1024px

/* Large Desktop */
xl: 1280px
```

## Animations & Transitions

### Hover Effects
```css
transition: all 0.3s ease;
```

### Card Hover
```css
transform: translateY(-5px);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
```

### Button Hover
```css
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
```

## Grid System

### Dashboard Stats (4 columns)
```html
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
    <!-- Cards -->
</div>
```

### Two Column Layout
```html
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
    <!-- Content -->
</div>
```

### Form Layout
```html
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
    <!-- Form fields -->
</div>
```

## Accessibility

### Color Contrast
- All text meets WCAG AA standards
- Minimum contrast ratio: 4.5:1 for normal text
- Minimum contrast ratio: 3:1 for large text

### Focus States
- All interactive elements have visible focus states
- Focus ring: 2px purple ring

### Semantic HTML
- Proper heading hierarchy
- Semantic tags (nav, main, section, article)
- ARIA labels where needed

## Best Practices

### Do's ✅
- Use consistent spacing (multiples of 4px)
- Maintain color consistency
- Use hover states on interactive elements
- Keep text readable (good contrast)
- Use icons to enhance understanding
- Provide visual feedback for actions

### Don'ts ❌
- Don't use too many colors
- Don't make text too small (< 14px)
- Don't forget hover states
- Don't use low contrast colors
- Don't overcrowd the interface
- Don't forget mobile responsiveness

## Custom CSS Classes

### Gradient Background
```css
.gradient-bg {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
```

### Card Hover Effect
```css
.card-hover {
    transition: all 0.3s ease;
}
.card-hover:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}
```

## Usage Examples

### Creating a New Page
1. Extend the layout: `@extends('layouts.app')`
2. Set page title: `@section('title', 'Page Title')`
3. Set header: `@section('page-title', 'Header')`
4. Add content: `@section('content')`

### Adding a New Feature
1. Use existing color scheme
2. Follow spacing system
3. Use consistent components
4. Add hover effects
5. Ensure responsiveness

---

**Design System Version: 1.0**
**Last Updated: 2024**

This design system ensures consistency across the entire application!
