# 🎨 UnionFlow Design System V2 - Design Signature Original

## 📋 Vue d'ensemble

Un design system **unique et original** créé spécifiquement pour UnionFlow, inspiré par:
- ✅ Les valeurs de **solidarité** et **communauté** africaine
- ✅ L'élégance des applications **fintech modernes**
- ✅ Les motifs et couleurs des **tissus traditionnels** africains
- ✅ Une approche **sobre et professionnelle**

---

## 🎨 Palette de Couleurs Signature

### Couleurs Primaires (Identité UnionFlow)

| Couleur | Hex | Usage | Symbolisme |
|---------|-----|-------|------------|
| **Union Green** | `#0F6B4F` | Primaire, CTAs | Croissance, Prospérité |
| **Union Green Light** | `#1F8A67` | Accents, Hover | Vitalité |
| **Union Green Pale** | `#EEF5F2` | Backgrounds | Calme |
| **Gold** | `#D4A017` | Accents premium | Richesse, Communauté |
| **Gold Light** | `#E8C568` | Highlights | Optimisme |
| **Gold Pale** | `#FFF9E6` | Backgrounds | Chaleur |
| **Indigo** | `#1E2A44` | Texte principal | Modernité, Confiance |
| **Indigo Light** | `#3A4A6B` | Texte secondaire | Profondeur |

### Couleurs Secondaires (Accents Culturels)

| Couleur | Hex | Usage |
|---------|-----|-------|
| **Terracotta** | `#E07A5F` | Accents chaleureux |
| **Amber** | `#F4A261` | Énergie positive |
| **Sand** | `#E9DCC9` | Neutralité élégante |

### Couleurs Sémantiques

| Couleur | Hex | Usage |
|---------|-----|-------|
| **Success** | `#22C55E` | Validation, confirmations |
| **Warning** | `#F59E0B` | Avertissements |
| **Error** | `#EF4444` | Erreurs, rejets |
| **Info** | `#3B82F6` | Informations neutres |

---

## 🧩 Composants Signature

### 1. **UnionBalanceCard** - Card de Balance Élégante

```dart
UnionBalanceCard(
  label: 'Caisse Totale',
  amount: '2,450,000 FCFA',
  trend: '+12% ce mois',
  isTrendPositive: true,
  onTap: () {},
)
```

**Caractéristiques:**
- ✨ Bordure dorée en haut (3px)
- 📊 Affichage du montant en vert UnionFlow (32px bold)
- 📈 Indicateur de tendance avec icône et couleur
- 🎯 Box shadow douce et professionnelle

---

### 2. **UnionProgressCard** - Card de Progression

```dart
UnionProgressCard(
  title: 'Progression des Cotisations',
  progress: 0.7, // 70%
  subtitle: '70% des membres ont cotisé',
  progressColor: UnionFlowColors.gold,
)
```

**Caractéristiques:**
- 📊 Barre de progression avec **gradient**
- ✨ Glow effect sur la barre (shadow colorée)
- 🎨 Coins arrondis (20px)
- 📏 Hauteur optimisée (14px)

---

### 3. **UnionActionButton** - Boutons d'Action Rapide

```dart
UnionActionGrid(
  actions: [
    UnionActionButton(
      icon: Icons.payment,
      label: 'Cotiser',
      onTap: () {},
      backgroundColor: UnionFlowColors.unionGreenPale,
      iconColor: UnionFlowColors.unionGreen,
    ),
    // ... autres actions
  ],
)
```

**Caractéristiques:**
- 🎯 Grid responsive (auto-expand)
- 🎨 Backgrounds colorés sémantiques
- 📱 Icône + Label centré
- ✨ Border subtile (1px)

---

### 4. **UnionTransactionTile** - Tuiles de Transaction

```dart
UnionTransactionCard(
  title: 'Activité Récente',
  onSeeAll: () {},
  transactions: [
    UnionTransactionTile(
      name: 'Awa Traoré',
      amount: '50 000 FCFA',
      status: 'Confirmé',
      date: 'Il y a 2h',
    ),
  ],
)
```

**Caractéristiques:**
- 👤 Avatar circulaire avec gradient
- 💰 Montant en vert bold
- 🏷️ Badge de status coloré
- 📅 Date optionnelle
- 🔗 Border bottom subtile

---

## 🎭 Ombres Signature

```dart
// Ombre douce (cards, buttons)
UnionFlowColors.softShadow

// Ombre moyenne (modals)
UnionFlowColors.mediumShadow

// Ombre forte (dialogs)
UnionFlowColors.strongShadow

// Ombre verte (CTAs)
UnionFlowColors.greenGlowShadow

// Ombre dorée (premium)
UnionFlowColors.goldGlowShadow
```

---

## 🌈 Gradients Signature

```dart
// Gradient principal (Vert → Vert Light)
UnionFlowColors.primaryGradient

// Gradient chaleureux (Terracotta → Ambre)
UnionFlowColors.warmGradient

// Gradient or
UnionFlowColors.goldGradient

// Gradient subtil (backgrounds)
UnionFlowColors.subtleGradient
```

---

## 📐 Spacing & Layout

### Principes
- **Cards**: `padding: 20px`, `borderRadius: 16px`
- **Espacement vertical**: `24px` entre sections
- **Gap dans grids**: `12px`
- **Padding global**: `24px` (mobile)

---

## 🚀 Usage

### Import

```dart
import 'package:unionflow/shared/design_system/unionflow_design_v2.dart';
```

### Exemple complet (Dashboard)

Voir: `lib/features/dashboard/presentation/pages/connected_dashboard_v2.dart`

---

## 🎯 Différenciation par rapport aux autres apps

| Aspect | Apps Classiques | UnionFlow V2 |
|--------|----------------|--------------|
| **Couleurs** | Bleu/Vert standard | Vert profond + Or + Terracotta |
| **Cards** | Blanches plates | Bordure dorée signature + shadows |
| **Progress** | Barre simple | Barre avec gradient + glow |
| **Actions** | Boutons rectangulaires | Grid colorée avec icônes |
| **Transactions** | Liste basique | Avatar gradient + badge status |
| **Identité** | Générique | **Inspiration africaine moderne** |

---

## 📱 Screenshots (À venir)

- [ ] Dashboard V2 complet
- [ ] Composants isolés
- [ ] Palette de couleurs

---

## 🎨 Prochaines Étapes

1. ✅ ~~Créer palette de couleurs~~
2. ✅ ~~Créer composants signature~~
3. ✅ ~~Créer Dashboard V2~~
4. ⏳ Redesigner écran Membres
5. ⏳ Redesigner écran Événements
6. ⏳ Créer motifs géométriques africains (patterns)
7. ⏳ Ajouter animations fluides
8. ⏳ Créer iconographie custom

---

## 💡 Philosophie de Design

**"Moderne, Chaleureux, Africain"**

- 🌍 **Racines africaines** - Couleurs et motifs inspirés des tissus traditionnels
- 💼 **Professionnalisme** - Design sobre et confiance
- 🚀 **Modernité** - UX fluide et intuitive
- 🤝 **Communauté** - Chaleur et accessibilité

---

**Créé avec ❤️ pour UnionFlow**