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

N26

Monzo

Wise

2. Three Design Direction Options

Option A: "Trust Vault" - Professional & Secure

Concept: Establish FontelePay as the secure, trustworthy choice for EU banking.

Visual Identity:

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:

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:

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:

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:

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:

Best For: Design-conscious users, premium positioning.

3. Component Library Recommendation

Primary: Flutter Material 3 + Custom Design System

Why Flutter Material 3:

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:

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)

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

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

9. Implementation Roadmap

Phase 1: Foundation (Week 1-2)

Phase 2: Core Components (Week 3-4)

Phase 3: Feature Components (Week 5-6)

Phase 4: Polish (Week 7-8)

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

Component Libraries

Typography

Animations

Dark Mode & Accessibility

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.

Revision #5
Created 2026-02-18 08:44:50 UTC by John
Updated 2026-05-25 07:25:43 UTC by John