# Swizzle Digital - Color Palette Documentation

## Brand Colors (From Logo)

The Swizzle Digital brand uses a sophisticated gradient from deep purple to burgundy red, creating a modern and professional appearance.

### Primary Gradient Colors

```css
/* Deep Purple - Left side of logo gradient */
#2B1B3D
RGB: 43, 27, 61
HSL: 264°, 39%, 17%

/* Purple-Burgundy - Middle of logo gradient */
#5B2847
RGB: 91, 40, 71
HSL: 323°, 39%, 26%

/* Burgundy - Right side of logo gradient */
#8B3653
RGB: 139, 54, 83
HSL: 340°, 44%, 38%

/* Burgundy-Red - Current primary brand color */
#8B3653
RGB: 163, 38, 56
HSL: 349°, 62%, 39%
```

### CSS Variable Usage

```css
:root {
    --primary: #8B3653;              /* Main burgundy red */
    --primary-dark: #8B3653;         /* Darker burgundy */
    --purple: #5B2847;               /* Purple-burgundy middle */
    --purple-dark: #2B1B3D;          /* Deep purple */
}
```

### Tailwind Configuration

```javascript
colors: {
    'swizzle': {
        'purple-dark': '#2B1B3D',
        'purple': '#5B2847',
        'burgundy': '#8B3653',
        'red': '#8B3653',
        'pink-light': '#FFEEF2',
        'pink-soft': '#FFF6F8',
    },
}
```

---

## Secondary Colors

```css
/* Orange - Accent color */
#FEC122
RGB: 254, 193, 34

/* Secondary Gray */
#8B929F
RGB: 139, 146, 159

/* Alert Red */
#e83d51
RGB: 232, 61, 81
```

---

## Neutral Colors

```css
/* White */
#FFFFFF
RGB: 255, 255, 255

/* Light Pink - Background */
#FFEEF2
RGB: 255, 238, 242

/* Soft Pink - Background */
#FFF6F8
RGB: 255, 246, 248

/* Dark Text */
#2B3342
RGB: 43, 51, 66

/* Whitesmoke - Background */
#F7F7F7
RGB: 247, 247, 247

/* Light Gray */
#8494AF
RGB: 132, 148, 175
```

---

## Gradient Combinations

### Main Brand Gradient (Horizontal)
```css
background: linear-gradient(135deg, #2B1B3D 0%, #5B2847 50%, #8B3653 100%);
```

### Reverse Gradient
```css
background: linear-gradient(135deg, #8B3653 0%, #5B2847 50%, #2B1B3D 100%);
```

### Light Background Gradient
```css
background: linear-gradient(135deg, #fff6f8 0%, #ffeef2 100%);
```

### Vertical Gradient (for mobile)
```css
background: linear-gradient(180deg, #2B1B3D 0%, #5B2847 50%, #8B3653 100%);
```

---

## Usage Guidelines

### Headers & Navigation
- **Background**: Use main brand gradient
- **Text**: White (#FFFFFF)
- **Hover States**: Lighten background by adding white overlay (rgba(255,255,255,0.1))

### Buttons

#### Primary Button
```css
/* Default */
background: #8B3653;
color: #FFFFFF;
border: 1px solid #8B3653;

/* Hover */
background: #FFFFFF;
color: #8B3653;
border: 1px solid #8B3653;
```

#### Secondary Button
```css
/* Default */
background: #FFFFFF;
color: #8B3653;
border: 1px solid #8B3653;

/* Hover */
background: #8B3653;
color: #FFFFFF;
```

#### Gradient Button
```css
background: linear-gradient(135deg, #8B3653 0%, #8B3653 100%);
color: #FFFFFF;
```

### Cards
- **Background**: White (#FFFFFF)
- **Border**: Light pink (#FFEEF2)
- **Header**: Use gradient or solid #8B3653
- **Hover**: Add subtle shadow with brand color

### Forms
- **Input Border**: #EBEAED
- **Focus State**: #8B3653 with rgba(163, 38, 56, 0.15) shadow
- **Error State**: #e83d51
- **Success State**: #07A88B

### Tables
- **Header**: Gradient background with white text
- **Striped Rows**: Alternate with #fff6f8
- **Hover**: Light pink (#ffeef2)

### Sidebar
- **Background**: White (#FFFFFF)
- **Active Item**: Light pink background (#ffeef2) with left border (#8B3653)
- **Hover**: Light pink background (#ffeef2)
- **Icons**: Burgundy (#8B3653)

---

## Accessibility Considerations

### Contrast Ratios

All color combinations meet WCAG 2.1 AA standards:

- **White text on #2B1B3D**: 12.5:1 ✓
- **White text on #5B2847**: 8.2:1 ✓
- **White text on #8B3653**: 5.8:1 ✓
- **White text on #8B3653**: 4.8:1 ✓
- **Dark text (#2B3342) on White**: 13.1:1 ✓
- **Primary (#8B3653) on Light Pink (#FFEEF2)**: 5.2:1 ✓

---

## File Locations

### CSS Files
- **Main Styles**: `/public/css/main.css`
- **Custom Styles**: `/public/css/style.css`
- **Branding Styles**: `/public/css/swizzle-branding.css`

### Configuration
- **Tailwind Config**: `/tailwind.config.js`
- **Layout Template**: `/resources/views/layouts/app.blade.php`
- **Login Page**: `/resources/views/auth/login.blade.php`

---

## Implementation Examples

### Adding Gradient to Card Header
```html
<div class="card swizzle-card">
    <div class="card-header">
        <h5>Card Title</h5>
    </div>
    <div class="card-body">
        <!-- Content -->
    </div>
</div>
```

### Using Utility Classes
```html
<!-- Text colors -->
<p class="text-swizzle-purple">Deep Purple Text</p>
<p class="text-swizzle-burgundy">Burgundy Text</p>
<p class="text-swizzle-red">Red Text</p>

<!-- Background colors -->
<div class="bg-swizzle-light">Light Pink Background</div>
<div class="bg-swizzle-purple">Deep Purple Background</div>

<!-- Gradient backgrounds -->
<div class="swizzle-gradient">Main Gradient</div>
<div class="swizzle-gradient-reverse">Reverse Gradient</div>
```

### Animated Gradient
```html
<div class="gradient-animated">
    Animated gradient background
</div>
```

---

## Print & Export

For printed materials and exports, use:
- **Primary**: #2B1B3D (deep purple)
- **Secondary**: #8B3653 (burgundy-red)
- **Background**: #FFFFFF (white)

Ensure all gradients are set to use `-webkit-print-color-adjust: exact` and `print-color-adjust: exact` for accurate printing.

---

## Version History

- **v1.0** (January 2026) - Initial brand color palette based on Swizzle Digital logo
- Colors extracted from gradient logo design
- Full gradient support across all components

---

## Contact

For questions about brand colors or usage guidelines, contact the development team.
