lionsdev/unionflow-mobile-apps
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
main
unionflow-mobile-apps/docs/UNIONFLOW_DESIGN_V2.md
dahoud d094d6db9c Initial commit: unionflow-mobile-apps 
Application Flutter complète (sans build artifacts).

Signed-off-by: lions dev Team
2026-03-15 16:30:08 +00:00

5.8 KiB
Raw Permalink Blame History

🎨 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