248 lines
5.8 KiB
Markdown
248 lines
5.8 KiB
Markdown
# 🎨 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**
|