UI Redesign Proposal Drop UI/UX Redesign Proposal Note: Originally written as "FontelePay" with Flutter stack. Product has been rebranded to Drop using Next.js 16 + React 19 + Tailwind v4 + shadcn/ui. Design direction chosen: Forest Green (#0B6E35) + Gold (#D4A017) with Fraunces (brand) + DM Sans (body) typography. Retained for historical research reference. Date: 2026-02-05 Status: Superseded — see brand/brand-guide.md for current design system Executive Summary Drop (originally FontelePay) needs a distinctive visual identity to compete with established neobanks (Revolut, N26, Monzo, Wise). This proposal outlines three design directions, recommended component library, color palettes, typography, and implementation roadmap. Core Problem: Generic Tailwind-template aesthetics lack brand differentiation. Solution: Custom design system with distinctive branding, purposeful micro-interactions, and mobile-first components. 1. Competitor Analysis Revolut Colors: Shark (#191C1F), Cornflower Blue (#7F84F6), White (#FFFFFF) Style: Dark, professional, feature-dense Strengths: Multi-currency dashboard, real-time animations, card management Typography: Clean sans-serif, high contrast Micro-interactions: Heavy use of motion for feedback N26 Colors: Cod Gray (#121212), Keppel Teal (#36A18B), White (#FFFFFF) Style: Minimal, card-based layouts, dark mode focused Strengths: Auto-categorized transactions, streamlined UI Typography: Geometric sans-serif, spacious Micro-interactions: Subtle, purposeful transitions Monzo Colors: Hot Coral (#F59AA4), Navy (#14233C), White (#FFFFFF) Style: Warm, approachable, playful Strengths: Savings pots, friendly copy, bold illustrations Typography: Rounded, friendly typefaces Micro-interactions: Celebratory animations for milestones Wise Colors: Neon Green (#9FE870), Deep Navy (#163300), White (#FFFFFF) Style: Fresh, transparent, eco-conscious feel Strengths: Currency conversion animations, clear pricing Typography: Modern grotesque, high legibility Micro-interactions: Progress indicators, conversion animations 2. Three Design Direction Options Option A: "Trust Vault" - Professional & Secure Concept: Establish FontelePay as the secure, trustworthy choice for EU banking. Visual Identity: Deep navy backgrounds with gold/amber accents Solid, stable geometry (squares, strong lines) Subtle gradients for depth Premium feel without being cold Color Palette: Role Name Hex Usage Primary Deep Navy #0A1628 Backgrounds, headers Secondary Royal Blue #1E40AF Interactive elements Accent Amber Gold #F59E0B CTAs, highlights Success Emerald #10B981 Positive states Error Rose #F43F5E Errors, warnings Surface Slate 50 #F8FAFC Cards, surfaces Text Primary Slate 900 #0F172A Main text Text Secondary Slate 500 #64748B Secondary text Dark Mode Palette: Role Hex Background #020617 Surface #0F172A Text Primary #F1F5F9 Text Secondary #94A3B8 Typography: Headings: Inter Display (700, 600) Body: Inter (400, 500) Numbers: Inter with tabular figures Best For: Users who prioritize security and professional appearance. Option B: "Fresh Finance" - Modern & Approachable Concept: Position FontelePay as the friendly, modern European alternative. Visual Identity: Clean whites with vibrant teal/cyan accents Rounded corners, soft shadows Playful illustrations for empty states Gradient CTAs for energy Color Palette: Role Name Hex Usage Primary Teal #0D9488 Brand color, headers Secondary Cyan #06B6D4 Secondary actions Accent Coral #FB7185 Notifications, highlights Success Green #22C55E Positive states Error Red #EF4444 Errors Surface White #FFFFFF Cards, backgrounds Background Gray 50 #F9FAFB Page backgrounds Text Primary Gray 900 #111827 Main text Text Secondary Gray 500 #6B7280 Secondary text Dark Mode Palette: Role Hex Background #0F0F0F Surface #1A1A1A Primary #2DD4BF Text Primary #F3F4F6 Typography: Headings: Plus Jakarta Sans (700, 600) Body: Inter (400, 500) Accent: Plus Jakarta Sans (500) Best For: Younger demographics, first-time banking app users. Option C: "Nordic Minimal" - Clean & Sophisticated Concept: Scandinavian-inspired minimalism with bold accent color. Visual Identity: Stark white backgrounds with single bold accent Maximum negative space Monochromatic with one signature color Typography-focused hierarchy Color Palette: Role Name Hex Usage Primary Electric Violet #7C3AED Brand, CTAs Secondary Violet Light #A78BFA Secondary actions Background Pure White #FFFFFF Main background Surface Gray 100 #F3F4F6 Cards Border Gray 200 #E5E7EB Dividers Text Primary Gray 950 #030712 Main text Text Secondary Gray 400 #9CA3AF Secondary text Success Emerald #059669 Positive Error Rose #E11D48 Negative Dark Mode Palette: Role Hex Background #09090B Surface #18181B Primary #A78BFA Text Primary #FAFAFA Typography: Headings: Satoshi (700, 500) Body: Inter (400, 500) Numbers: SF Mono or JetBrains Mono (for financial data) Best For: Design-conscious users, premium positioning. 3. Component Library Recommendation Primary: Flutter Material 3 + Custom Design System Why Flutter Material 3: Native to Flutter stack (already chosen) Built-in accessibility (WCAG compliant) Dynamic color theming Adaptive components for iOS/Android Active development by Google Implementation Approach: // Theme Configuration Example ThemeData fontelepayTheme = ThemeData( useMaterial3: true, colorScheme: ColorScheme.fromSeed( seedColor: Color(0xFF7C3AED), // Primary brand color brightness: Brightness.light, ), textTheme: GoogleFonts.interTextTheme(), ); Recommended Flutter Packages Package Purpose Version flutter_bloc State management 8.x go_router Navigation, deep linking 14.x dio HTTP client 5.x lottie Micro-interactions 3.x flutter_animate Declarative animations 4.x google_fonts Typography 6.x flutter_svg Vector icons 2.x shimmer Loading states 3.x Component Hierarchy FontelePay Design System ├── Atoms (smallest units) │ ├── Colors │ ├── Typography │ ├── Icons │ └── Spacing ├── Molecules (simple components) │ ├── Button (primary, secondary, ghost) │ ├── Input (text, PIN, amount) │ ├── Card (account, transaction) │ └── Badge (status, notification) ├── Organisms (complex components) │ ├── AccountCard (balance, IBAN, actions) │ ├── TransactionList (with filters) │ ├── PaymentForm (recipient, amount, confirm) │ └── CardWidget (virtual card display) └── Templates (page layouts) ├── DashboardLayout ├── OnboardingLayout └── TransactionDetailLayout 4. Typography Recommendation Primary Font: Inter Why Inter: Optimized for UI at small sizes Tall x-height for screen legibility Tabular figures for financial data Free (Google Fonts) Variable font support Best non-proprietary alternative to SF Pro Type Scale (Material 3): Style Size Weight Line Height Usage Display Large 57px 400 64px Hero numbers Display Medium 45px 400 52px Balance display Headline Large 32px 600 40px Screen titles Headline Medium 28px 600 36px Section headers Title Large 22px 500 28px Card titles Title Medium 16px 500 24px Subtitles Body Large 16px 400 24px Main content Body Medium 14px 400 20px Secondary content Label Large 14px 500 20px Buttons Label Medium 12px 500 16px Captions Alternative Pairing Premium Option: Plus Jakarta Sans (headings) + Inter (body) Plus Jakarta Sans has more personality Creates visual hierarchy naturally Both available on Google Fonts 5. Micro-Interactions & Animation Animation Principles Duration Guidelines: Micro-interactions: 50-200ms Page transitions: 200-400ms Complex animations: 400-600ms Easing: Standard: Curves.easeOutCubic Enter: Curves.decelerate Exit: Curves.accelerate Essential Animations Component Animation Duration Trigger Button Press Scale down 0.95 100ms onTapDown Transaction Success Checkmark Lottie 600ms onComplete Card Flip 3D rotation 400ms onTap Balance Update Number morph 300ms onValueChange Pull to Refresh Custom Lottie 800ms onRefresh Skeleton Loading Shimmer Loop onLoading Tab Switch Fade + slide 200ms onSelect Lottie Animations to Create Success Checkmark - Payment confirmed Loading Spinner - Processing state Card Issuing - Virtual card generation Money Transfer - Send/receive animation Empty State - No transactions illustration Error State - Failed transaction Confetti - First transaction celebration 6. Component Redesign Priority P0 - Critical (Week 1-2) Component Current Issue Redesign Focus Primary Button Generic Tailwind Custom shape, gradient option, haptic feedback Input Field Basic styling Floating labels, validation states, currency formatting Balance Card Flat, boring Glassmorphism, subtle animation, gradient background Transaction Item List-like Card approach, merchant icons, category colors P1 - Important (Week 3-4) Component Current Issue Redesign Focus Navigation Bar Standard tab bar Custom icons, animated indicators Card Widget Static display 3D flip, Apple/Google Pay button integration Amount Input Basic number Custom keypad, currency selector, max button Profile Avatar Circle image Gradient border, online indicator P2 - Enhancement (Week 5-6) Component Current Issue Redesign Focus Charts Basic lines Animated draw, touch interaction, gradients Category Pills Plain buttons Icons, color coding, selection animation Empty States Text only Lottie illustrations, CTAs Notifications System default Custom in-app notifications 7. Dark Mode Implementation Design Principles Not just inverted colors - Redesign each surface layer Reduced contrast - Use off-white (#F1F5F9) instead of pure white Elevated surfaces = lighter - Higher elevation = lighter gray Desaturated accent colors - Reduce saturation 10-20% for dark mode Test contrast ratios - Minimum 4.5:1 for text (WCAG AA) Surface Elevation (Dark Mode) Elevation Background Use Case 0 #09090B Page background 1 #18181B Cards, inputs 2 #27272A Modals, dropdowns 3 #3F3F46 Hover states Implementation ColorScheme darkScheme = ColorScheme.fromSeed( seedColor: Color(0xFF7C3AED), brightness: Brightness.dark, surface: Color(0xFF18181B), onSurface: Color(0xFFF1F5F9), ); 8. Accessibility Requirements WCAG 2.1 AA Compliance Requirement Implementation Color Contrast Minimum 4.5:1 (text), 3:1 (large text) Touch Targets Minimum 48x48dp Focus States Visible ring on all interactive elements Screen Reader Semantic labels on all widgets Dynamic Type Support system font scaling Reduce Motion Respect MediaQuery.disableAnimations Testing Tools Flutter Accessibility Scanner Contrast ratio calculator VoiceOver/TalkBack manual testing 9. Implementation Roadmap Phase 1: Foundation (Week 1-2) Define final color palette (choose Option A/B/C) Configure Flutter Material 3 theme Set up typography system Create color tokens file Implement dark mode toggle Phase 2: Core Components (Week 3-4) Redesign Button component (all variants) Redesign Input component (text, PIN, amount) Redesign Card components (balance, transaction) Implement loading states (shimmer, skeleton) Add Lottie animation package Phase 3: Feature Components (Week 5-6) Build AccountCard with animations Build TransactionList with pull-to-refresh Build PaymentForm with amount keyboard Build CardWidget with 3D flip Phase 4: Polish (Week 7-8) Create Lottie animations Implement micro-interactions Accessibility audit Dark mode testing Performance optimization 10. My Recommendation Go with Option C: "Nordic Minimal" Reasons: Differentiation - Most neobanks use dark (Revolut, N26) or warm (Monzo) palettes. Electric violet is distinctive. Scalability - Minimal design ages better and accommodates new features easily. Trust - Clean design signals competence and transparency. Dark Mode - Minimal palettes translate better to dark mode. EU Market - Scandinavian design resonates well with European users. Typography: Inter + Satoshi pairing for personality without sacrificing legibility. Implementation: Flutter Material 3 as foundation, custom component library on top. Sources Competitor Research Revolut Brand Colors - Mobbin N26 Brand Colors - Mobbin N26 Color System Update Monzo Brand Colors Wise Brand Colors - Mobbin Component Libraries Flutter Material 3 Documentation React UI Libraries Comparison 2025 shadcn/ui vs Radix UI Comparison Best Flutter UI Libraries 2026 Typography Best Fonts for UI Design 2026 Typography for Fintech - Medium Typefaces for Fintech - Smashing Magazine Font Strategies for Fintech Animations Lottie in Flutter for Microinteractions Mastering Flutter Animations Payments App Animation Pack - LottieFiles Dark Mode & Accessibility Dark Mode Design Guide 2026 Dark Mode in Banking Apps Banking App Design Trends 2025 Fintech UX Best Practices Design Trends Banking App UI Best Practices 2026 Top 15 Banking Apps UX Design 2026 UXDA Fintech Design Trends Next Steps Review this proposal - Select design direction (A, B, or C) Approve color palette - Or request modifications Create Figma design file - Based on chosen direction Build component library - Flutter implementation Iterate - Refine based on user testing Document prepared for Drop (originally FontelePay) UI/UX upgrade initiative.