Initial commit: unionflow-mobile-apps
Application Flutter complète (sans build artifacts). Signed-off-by: lions dev Team
This commit is contained in:
dahoud
247
docs/UNIONFLOW_DESIGN_V2.md
Normal file
247
docs/UNIONFLOW_DESIGN_V2.md
Normal file
@@ -0,0 +1,247 @@
|
||||
# 🎨 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**
|
||||
Reference in New Issue
Block a user