# Prantor Pay - Design Guide v1.1.0

## 🎨 Design System Overview

The Prantor Pay plugin now features a modern, professional design system with a cohesive color scheme, typography, and component library.

---

## 🎯 Color Palette

### Primary Colors
- **Primary Purple:** `#6f42c1` - Main brand color
- **Secondary Purple:** `#764ba2` - Accent and gradients
- **Gradient:** `linear-gradient(135deg, #667eea 0%, #764ba2 100%)`

### Semantic Colors
- **Success Green:** `#28a745` - Positive actions
- **Danger Red:** `#dc3545` - Errors and warnings
- **Warning Amber:** `#ff9800` - Alerts
- **Info Blue:** `#2196F3` - Information

### Neutral Colors
- **Light:** `#f8f9fa` - Backgrounds
- **Dark:** `#212529` - Text
- **Border:** `#dee2e6` - Lines and separators

---

## 📐 Typography

### Font Stack
```css
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
```

### Hierarchy
- **H1:** 28px, 600 weight - Main titles
- **H2:** 22px, 600 weight - Section titles
- **H3:** 18px, 600 weight - Subsections
- **H4:** 14px, 600 weight - Labels
- **Body:** 14px, 400 weight - Regular text
- **Small:** 12px, 400 weight - Captions

---

## 🎨 Component Library

### 1. Payment Container
```html
<div class="prantorpay-payment-container">
  <!-- Modern payment form -->
</div>
```
**Features:**
- Gradient background (purple)
- Rounded corners (12px)
- Box shadow for depth
- Smooth animation (slideInUp)

### 2. Payment Header
```html
<div class="prantorpay-header">
  <div class="prantorpay-header-icon">🏦</div>
  <div class="prantorpay-header-text">
    <h3>Fast & Secure Payment</h3>
    <p>Multiple payment methods available</p>
  </div>
</div>
```
**Features:**
- Icon + text layout
- Clear information hierarchy
- Responsive alignment

### 3. Payment Methods Grid
```html
<div class="prantorpay-methods">
  <span class="prantorpay-methods-label">Choose Your Payment Method</span>
  <div class="prantorpay-methods-grid">
    <div class="prantorpay-method-badge">
      <span class="prantorpay-method-icon">📱</span>
      <span>Bkash</span>
    </div>
    <!-- More methods -->
  </div>
</div>
```
**Features:**
- Auto-responsive grid
- Hover effects
- Interactive selection
- Clear labeling

### 4. Security Badge
```html
<div class="prantorpay-security">
  <span class="prantorpay-security-icon">🔒</span>
  <span>SSL Secured | 100% Safe Transaction</span>
</div>
```
**Features:**
- Icon-based communication
- Clear security message
- Visual confidence builder

### 5. Trust Badges
```html
<div class="prantorpay-trust-badges">
  <div class="prantorpay-badge">
    <span class="prantorpay-badge-icon">✓</span>
    <span>Verified</span>
  </div>
  <!-- More badges -->
</div>
```
**Features:**
- Multiple trust indicators
- Horizontal layout
- Subtle styling

---

## 📱 Responsive Design

### Breakpoints
- **Desktop:** 1024px+ (full layout)
- **Tablet:** 768px - 1023px (adjusted grid)
- **Mobile:** 480px - 767px (stacked layout)
- **Small Mobile:** < 480px (optimized for tiny screens)

### Responsive Adjustments
```css
/* Tablet (768px) */
.prantorpay-methods-grid {
  grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
}

/* Mobile (480px) */
.prantorpay-methods-grid {
  grid-template-columns: repeat(3, 1fr);
}
```

---

## ✨ Animations

### Slide In Up
Used for page entrance
```css
@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
```

### Hover Effects
- **Badge Hover:** 
  - Border color change
  - Background color shift
  - 2px upward movement
  - Subtle shadow

### Loading Spinner
```css
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
```

---

## 🎯 Admin Panel Design

### Settings Header
- Gradient background
- Large typography
- Clear branding
- Informational subtext

### Form Sections
- White background with border
- Organized field groups
- Clear labels and descriptions
- Consistent spacing

### Info Boxes
```html
<div class="prantorpay-info-box">
  Important information with icon
</div>
```

Types:
- **Info** (blue) - General information
- **Warning** (amber) - Important notices
- **Success** (green) - Confirmation messages

### Form Fields
- Consistent padding (10px 12px)
- Focus states with border and shadow
- Full width by default
- Readable font size (14px)

---

## 🌙 Dark Mode Support

Automatic detection via CSS media query:
```css
@media (prefers-color-scheme: dark) {
  .prantorpay-form-section {
    background: #2a2a2a;
    color: #f0f0f0;
  }
}
```

---

## ♿ Accessibility Features

- Semantic HTML structure
- Proper contrast ratios
- Keyboard navigation support
- ARIA labels where needed
- Focus indicators
- Screen reader friendly

---

## 📊 Design Metrics

### Spacing System
```
xs: 4px
sm: 8px
md: 12px
lg: 16px
xl: 20px
xxl: 24px
xxxl: 32px
```

### Border Radius
- Small: 4px (inputs, small elements)
- Medium: 6px (buttons, badges)
- Large: 8px (cards, containers)
- XL: 12px (payment container)

### Shadows
- **Light:** `0 2px 8px rgba(0, 0, 0, 0.1)`
- **Medium:** `0 4px 12px rgba(0, 0, 0, 0.15)`
- **Strong:** `0 4px 16px rgba(0, 0, 0, 0.15)`

### Transitions
- Duration: 0.3s
- Timing: ease or ease-out
- Properties: color, background, transform, box-shadow

---

## 🎓 Design Philosophy

1. **Modern & Clean:** Minimalist aesthetic with purposeful design
2. **User-Friendly:** Intuitive navigation and clear information hierarchy
3. **Trust & Security:** Visual indicators of safety and verification
4. **Performance:** Optimized animations and smooth interactions
5. **Accessibility:** Inclusive design for all users
6. **Responsive:** Perfect on any device size
7. **Professional:** Corporate appearance with modern touches

---

## 🔄 Component Usage Examples

### Basic Payment Container
```php
<div class="prantorpay-payment-container">
  <!-- Payment form content -->
</div>
```

### Status Badge
```php
<span class="prantorpay-status-badge active">Active</span>
<span class="prantorpay-status-badge inactive">Inactive</span>
```

### Alert Box
```php
<div class="prantorpay-info-box">
  <strong>Info:</strong> Important message here
</div>
```

### Button
```php
<button class="prantorpay-checkout-btn">Proceed to Payment</button>
```

---

## 📚 CSS Files

### Frontend (`prantorpay-frontend.css`)
- Payment container styling
- Method selection display
- Security badges
- Responsive layouts
- Animations
- Mobile optimization

### Admin (`prantorpay-admin.css`)
- Settings header
- Form sections
- Info boxes
- Buttons
- Dark mode support
- Responsive tables

---

## 🚀 Performance Optimization

- Minimal CSS file size (~8KB)
- Efficient selectors
- Debounced animations
- No external dependencies
- Fast loading animations
- Optimized images (SVG icons)

---

## 🔧 Customization Guide

### Change Primary Color
```css
:root {
  --pp-primary: #your-color;
}
```

### Modify Font
```css
:root {
  --pp-font: 'Your Font', sans-serif;
}
```

### Adjust Border Radius
```css
.prantorpay-payment-container {
  border-radius: 8px; /* Change from 12px */
}
```

---

**Design System Version:** 1.1.0  
**Last Updated:** May 2024