unionflow-mobile-apps/docs/UNIONFLOW_DESIGN_V2.md

🎨 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

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

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

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

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

// 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

// 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

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