# 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:**

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

1. **Duration Guidelines:**
   - Micro-interactions: 50-200ms
   - Page transitions: 200-400ms
   - Complex animations: 400-600ms

2. **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

1. **Success Checkmark** - Payment confirmed
2. **Loading Spinner** - Processing state
3. **Card Issuing** - Virtual card generation
4. **Money Transfer** - Send/receive animation
5. **Empty State** - No transactions illustration
6. **Error State** - Failed transaction
7. **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

1. **Not just inverted colors** - Redesign each surface layer
2. **Reduced contrast** - Use off-white (#F1F5F9) instead of pure white
3. **Elevated surfaces = lighter** - Higher elevation = lighter gray
4. **Desaturated accent colors** - Reduce saturation 10-20% for dark mode
5. **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

```dart
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:**
1. **Differentiation** - Most neobanks use dark (Revolut, N26) or warm (Monzo) palettes. Electric violet is distinctive.
2. **Scalability** - Minimal design ages better and accommodates new features easily.
3. **Trust** - Clean design signals competence and transparency.
4. **Dark Mode** - Minimal palettes translate better to dark mode.
5. **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](https://mobbin.com/colors/brand/revolut)
- [N26 Brand Colors - Mobbin](https://mobbin.com/colors/brand/n26)
- [N26 Color System Update](https://n26.com/en-eu/blog/updating-our-color-system)
- [Monzo Brand Colors](https://www.brandcolorcode.com/monzo)
- [Wise Brand Colors - Mobbin](https://mobbin.com/colors/brand/wise)

### Component Libraries
- [Flutter Material 3 Documentation](https://m3.material.io/develop/flutter)
- [React UI Libraries Comparison 2025](https://makersden.io/blog/react-ui-libs-2025-comparing-shadcn-radix-mantine-mui-chakra)
- [shadcn/ui vs Radix UI Comparison](https://scratchdb.com/compare/radix-ui-vs-shadcn-ui/)
- [Best Flutter UI Libraries 2026](https://www.f22labs.com/blogs/top-8-flutter-ui-libraries-for-2025-you-must-explore/)

### Typography
- [Best Fonts for UI Design 2026](https://www.designmonks.co/blog/best-fonts-for-ui-design)
- [Typography for Fintech - Medium](https://medium.com/@tamannasamantaray00/typography-selection-for-fintech-product-design-system-series-62ba0ba7c4bf)
- [Typefaces for Fintech - Smashing Magazine](https://www.smashingmagazine.com/2023/10/choose-typefaces-fintech-products-guide-part1/)
- [Font Strategies for Fintech](https://www.telerik.com/blogs/font-strategies-fintech-websites-apps)

### Animations
- [Lottie in Flutter for Microinteractions](https://vibe-studio.ai/insights/using-lottie-animations-in-flutter-for-microinteractions)
- [Mastering Flutter Animations](https://medium.com/@tiger.chirag/hidden-choreography-in-flutter-f49c5298d914)
- [Payments App Animation Pack - LottieFiles](https://lottiefiles.com/marketplace/payments-app-micro-interactions)

### Dark Mode & Accessibility
- [Dark Mode Design Guide 2026](https://appinventiv.com/blog/guide-on-designing-dark-mode-for-mobile-app/)
- [Dark Mode in Banking Apps](https://eximee.com/blog/implementing-dark-mode-in-banking-apps-how-to-do-it-properly/)
- [Banking App Design Trends 2025](https://inkbotdesign.com/banking-app-design/)
- [Fintech UX Best Practices](https://procreator.design/blog/best-fintech-ux-practices-for-mobile-apps/)

### Design Trends
- [Banking App UI Best Practices 2026](https://procreator.design/blog/banking-app-ui-top-best-practices/)
- [Top 15 Banking Apps UX Design 2026](https://www.wavespace.agency/blog/banking-app-ux)
- [UXDA Fintech Design Trends](https://theuxda.com/blog/ux-case-study-mobile-banking-app-design-neobank)

---

## Next Steps

1. **Review this proposal** - Select design direction (A, B, or C)
2. **Approve color palette** - Or request modifications
3. **Create Figma design file** - Based on chosen direction
4. **Build component library** - Flutter implementation
5. **Iterate** - Refine based on user testing

---

*Document prepared for Drop (originally FontelePay) UI/UX upgrade initiative.*