# UI/UX

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

# UI/UX Reference

# Drop UI/UX Reference

> **Note:** Originally written as "Drop" with Flutter stack. Product has been rebranded to **Drop** using Next.js 16 + React 19 + Tailwind v4. See brand/brand-guide.md for current design system.

**Datum:** 2026-02-04

---

## 1. Konkurencija za Inspiraciju

| App | Strengths | Šta kopirati |
|-----|-----------|--------------|
| **Revolut** | Quick onboarding, heavy icons, real-time responses | Multi-currency prikaz, card management |
| **N26** | Minimal aesthetics, auto-categorized transactions | MoneyBeam stil transfera |
| **Monzo** | Human tone, savings pots, push notifications | Savings pots, friendly copy |

---

## 2. Key UI Komponente

Bazirano na [UXDA Fintech Case Study](https://theuxda.com/blog/ux-case-study-mobile-banking-app-design-neobank):

1. **Biometric Auth** — Instant pristup, FaceID/TouchID first
2. **Balance Dashboard** — Swipeable account cards, trend chart
3. **Activity Feed** — Timeline stil (kao social media)
4. **Spending Insights** — Donut chart sa kategorijama
5. **Payment Interface** — Jednostavno kao SMS slanje
6. **AI Assistant** — Voice-activated (future phase)

---

## 3. Onboarding Flow

Best practices za 3-minute onboarding:

1. Phone number → SMS verification
2. Email (optional)
3. Personal info (name, DOB)
4. ID verification (Sumsub integration)
5. Selfie liveness check
6. IBAN generated → Ready!

**Target:** < 3 minute, 74% users abandon if > 5 min

---

## 4. Dashboard Layout

```
┌─────────────────────────────┐
│  [Profile]     Drop   │
├─────────────────────────────┤
│                             │
│      € 1,234.56             │
│      Main Account           │
│   ← [Card 1] [Card 2] →     │
│                             │
├─────────────────────────────┤
│  [Send] [Request] [Top-up]  │
├─────────────────────────────┤
│  Recent Activity            │
│  ─────────────────────────  │
│  ☕ Starbucks      -€4.50   │
│  🛒 Grocery        -€32.10  │
│  💰 Salary      +€2,500.00  │
│                             │
└─────────────────────────────┘
```

---

## 5. Figma Templates (FREE)

| Template | Screens | Link |
|----------|---------|------|
| Banking App (Light/Dark) | 43+ | [Figma](https://www.figma.com/community/file/1320093355098935734) |
| Digital Banking Fintech | Full | [Figma](https://www.figma.com/community/file/1221934215660892715) |
| Free Finance Banking Kit | 15+ | [Figma](https://www.figma.com/community/file/1036356407585866248) |
| Bank App iOS Kit | iOS | [Figma](https://www.figma.com/community/file/974284148399607335) |

**Preporuka:** Počni sa "Banking App (Light/Dark)" — 43 screena, light/dark mode.

---

## 6. 2025 Design Trends

- **Personalizacija** — AI-based spending insights
- **Embedded finance** — Sve na jednom mjestu (payments, savings, cards)
- **Conversational UI** — Chatbot za support
- **Biometric-first** — Password kao fallback, ne primary

---

## 7. Tech Stack za UI (VERIFIED)

| Komponenta | Tehnologija | Napomena |
|------------|-------------|----------|
| Mobile | **Flutter 3.x** | Single codebase iOS/Android |
| State | **Bloc** | Recommended by research |
| Navigation | **GoRouter** | Deep linking support |
| HTTP | **Dio** | API calls |
| Local storage | **Hive** | Encrypted local data |
| Biometrics | **local_auth** | FaceID/TouchID |

---

## 8. Backend Integration (VERIFIED)

| Service | Provider | Napomena |
|---------|----------|----------|
| BaaS | **Swan** | EU licensed, IBAN generation |
| Cards | **Stripe Issuing** | Virtual/physical cards |
| KYC | **Sumsub** | ID verification, liveness |
| Payments | **Stripe** | Payment processing |

**NAPOMENA:** NE Firebase — Swan/Stripe ekosistem per research.

---

## 9. Next Steps

1. [ ] Download Figma template (43+ screens)
2. [ ] Customize branding (Drop colors, logo)
3. [ ] Design onboarding flow (6 screens)
4. [ ] Design main dashboard
5. [ ] Design send money flow
6. [ ] Design card management screens
7. [ ] Handoff to Flutter dev

---

## Sources

- [UXDA Fintech Design Trends](https://theuxda.com/blog/ux-case-study-mobile-banking-app-design-neobank)
- [Banking App UX 2025](https://adria-bt.com/en/9-ux-ui-design-trends-in-digital-banking-what-users-expect-in-2025/)
- [Figma Banking UI Kits](https://www.figma.com/community/mobile-apps/finance)
- [Drop Tech Stack Research](./mobilebank-research/TECH-STACK.md)
- [Drop Providers Research](./mobilebank-research/PROVIDERS.md)

# UI Design Spec

# Drop — UI/UX Design Specification

**Date:** 2026-02-09
**Phase:** SDLC 3 — Design
**Sources:** Designer agent + Product agent + Edita's AI-first workflow
**Stack:** Next.js 16 + React 19 + Tailwind v4 + shadcn/ui
**Approach:** Code-first (no Figma) — v0.dev + shadcn/ui

---

## Brand

| Element | Value |
|---------|-------|
| Name | Drop |
| Tagline | "Enklere betalinger. Lavere gebyrer." |
| Primary | `#3498db` (blue — trust, finance) |
| Secondary | `#f1c40f` (yellow — warmth, home) |
| Accent | `#2ecc71` (green — success, money) |
| Headings | Montserrat Bold |
| Body | Lato Regular |
| Style | Mobile-first, clean, minimal |
| Accessibility | WCAG AA minimum |

---

## Screen Map

```
┌─────────────┐
│   Splash     │ → auto-redirect
└──────┬──────┘
       ▼
┌─────────────┐     ┌─────────────┐
│   Login      │────▶│  Register   │
└──────┬──────┘     └──────┬──────┘
       │                    ▼
       │            ┌─────────────┐
       │            │    KYC      │
       │            │ ID + Selfie │
       │            └──────┬──────┘
       │                    ▼
       │            ┌─────────────┐
       │            │ Add Payment │
       │            │   Method    │
       │            └──────┬──────┘
       ▼                    │
┌─────────────┐◀────────────┘
│    HOME      │
│  (Tab Bar)   │
├──────────────┤
│ [Send] [Scan]│
│ Balance Card │
│ Transactions │
└──┬───┬───┬──┘
   │   │   │
   ▼   ▼   ▼
 Send  QR  Profile
 Flow  Flow Settings
```

---

## Screen 1: HomeScreen

**Route:** `/dashboard`

### Layout
```
┌──────────────────────────────┐
│ [Drop logo]    [🔔] [Avatar] │  ← Header
├──────────────────────────────┤
│                              │
│  ┌────────────────────────┐  │
│  │   Your Balance         │  │  ← Card (shadcn)
│  │   12,450.00 NOK        │  │     text-3xl font-bold
│  └────────────────────────┘  │
│                              │
│  ┌──────────┐ ┌──────────┐  │
│  │ Send     │ │ Scan QR  │  │  ← Button x2 (shadcn)
│  │ Money 💸 │ │ 📱       │  │     primary / accent
│  └──────────┘ └──────────┘  │
│                              │
│  Recent Transactions         │  ← ScrollArea (shadcn)
│  ┌────────────────────────┐  │
│  │ Mama Jasmina  -2,000   │  │  ← Each: Avatar + name + amount
│  │ 🇷🇸 RSD    ✅ Completed │  │     + country flag + Badge status
│  ├────────────────────────┤  │
│  │ Ahmetov Kebab  -129    │  │
│  │ 🏪 QR     ✅ Completed │  │
│  └────────────────────────┘  │
│                              │
├──────────────────────────────┤
│  [Home]  [Activity]  [More]  │  ← Bottom nav (3 tabs)
└──────────────────────────────┘
```

### Components
- `Card` — balance display
- `Button` variant="default" — Send Money (bg: #3498db)
- `Button` variant="outline" — Scan QR (border: #2ecc71)
- `ScrollArea` — transaction list
- `Badge` — transaction status (completed/pending/failed)
- `Avatar` — user + recipient avatars

### States
- **Loading:** Skeleton components for balance + transactions
- **Empty:** "No transactions yet. Send your first remittance!" + illustration
- **Error:** Toast notification with retry

---

## Screen 2: SendMoneyFlow (4-step wizard)

**Route:** `/send`

### Step Indicator
`Tabs` or custom stepper: Select → Amount → Review → Done

### Step 1: Select Recipient (`/send/recipient`)
```
┌──────────────────────────────┐
│ ← Back     Send Money   1/4  │
├──────────────────────────────┤
│                              │
│  🔍 Search recipients...     │  ← Input (shadcn)
│                              │
│  Recent                      │
│  ┌────────────────────────┐  │
│  │ 👤 Mama Jasmina        │  │  ← List items, clickable
│  │    Serbia • *****1234  │  │
│  ├────────────────────────┤  │
│  │ 👤 Brat Edin           │  │
│  │    Bosnia • *****5678  │  │
│  └────────────────────────┘  │
│                              │
│  ┌────────────────────────┐  │
│  │  + New Recipient       │  │  ← Button variant="outline"
│  └────────────────────────┘  │
└──────────────────────────────┘
```

### Step 2: Amount (`/send/amount`)
```
┌──────────────────────────────┐
│ ← Back     Send Money   2/4  │
├──────────────────────────────┤
│                              │
│  To: Mama Jasmina 🇷🇸         │
│                              │
│  You send:                   │
│  ┌──────────────────┬─────┐  │
│  │         2,000    │ NOK │  │  ← Input + Select (currency)
│  └──────────────────┴─────┘  │
│                              │
│  They receive:               │
│  ┌────────────────────────┐  │
│  │    23,400 RSD           │  │  ← Computed, read-only
│  └────────────────────────┘  │
│                              │
│  ┌────────────────────────┐  │
│  │ Rate: 1 NOK = 11.70 RSD│  │  ← Exchange rate info
│  │ Fee: 10.00 NOK (0.5%)  │  │
│  │ Total: 2,010.00 NOK    │  │
│  └────────────────────────┘  │
│                              │
│  ┌────────────────────────┐  │
│  │      Continue →         │  │  ← Button primary
│  └────────────────────────┘  │
└──────────────────────────────┘
```

### Step 3: Review (`/send/review`)
```
┌──────────────────────────────┐
│ ← Back     Send Money   3/4  │
├──────────────────────────────┤
│                              │
│  Review Transfer             │
│  ┌────────────────────────┐  │
│  │ To:     Mama Jasmina   │  │  ← Card with all details
│  │ Country: Serbia 🇷🇸     │  │
│  │ Send:   2,000.00 NOK   │  │
│  │ Receive: 23,400 RSD    │  │
│  │ Fee:    10.00 NOK      │  │
│  │ Total:  2,010.00 NOK   │  │
│  │ ETA:    1-2 business d. │  │
│  └────────────────────────┘  │
│                              │
│  ┌────────────────────────┐  │
│  │   Confirm & Send ✓     │  │  ← Button primary, large
│  └────────────────────────┘  │
└──────────────────────────────┘
```

### Step 4: Success (`/send/success`)
```
┌──────────────────────────────┐
│                         4/4  │
├──────────────────────────────┤
│                              │
│           ✅                  │  ← CheckCircle icon, green
│                              │
│     Money on the way!        │  ← Montserrat Bold 20px
│                              │
│   2,000 NOK → 23,400 RSD    │
│   To: Mama Jasmina           │
│   ETA: 1-2 business days     │
│                              │
│  ┌────────────────────────┐  │
│  │       Done              │  │  ← Button, back to home
│  └────────────────────────┘  │
│  ┌────────────────────────┐  │
│  │    Send Another         │  │  ← Button variant="ghost"
│  └────────────────────────┘  │
└──────────────────────────────┘
```

### Error States
- **Insufficient funds:** Alert dialog — "Not enough balance. Top up?"
- **KYC incomplete:** Alert — "Complete verification first" + link to KYC
- **Country not supported:** Alert — "This corridor coming soon!"
- **Network error:** Toast — "Connection lost. Tap to retry."

---

## Screen 3: ScanQRFlow

**Route:** `/scan`

### Camera View
```
┌──────────────────────────────┐
│ ← Back        Scan QR        │
├──────────────────────────────┤
│                              │
│  ┌────────────────────────┐  │
│  │                        │  │
│  │    ┌──────────────┐    │  │  ← Camera viewfinder
│  │    │              │    │  │     with QR frame overlay
│  │    │   QR FRAME   │    │  │
│  │    │              │    │  │
│  │    └──────────────┘    │  │
│  │                        │  │
│  └────────────────────────┘  │
│                              │
│  Point camera at merchant QR │  ← Helper text
└──────────────────────────────┘
```

### After Scan — Bottom Sheet
```
┌──────────────────────────────┐
│        (camera dimmed)       │
├──────────────────────────────┤
│ ══════════════════════════   │  ← Sheet (shadcn) slides up
│                              │
│  🏪 Ahmetov Kebab            │  ← Merchant name
│     Grønland 12, Oslo        │  ← Address
│                              │
│  Amount:                     │
│  ┌──────────────────┬─────┐  │
│  │         129      │ NOK │  │  ← Input
│  └──────────────────┴─────┘  │
│                              │
│  Fee: 1.29 NOK (1%)         │
│                              │
│  ┌────────────────────────┐  │
│  │     Pay 130.29 NOK ✓   │  │  ← Button accent (#2ecc71)
│  └────────────────────────┘  │
└──────────────────────────────┘
```

### Success
```
┌──────────────────────────────┐
│                              │
│          🎉                   │  ← Confetti / success animation
│                              │
│      Payment Complete!       │
│                              │
│   129.00 NOK                 │
│   Ahmetov Kebab              │
│                              │
│  ┌────────────────────────┐  │
│  │        Done             │  │
│  └────────────────────────┘  │
└──────────────────────────────┘
```

### Error States
- **Invalid QR:** Alert — "This QR code is not a Drop merchant"
- **Camera denied:** Alert — "Camera access needed to scan QR" + settings link
- **Payment failed:** Alert — "Payment failed. Try again?" + retry button

---

## Screen 4: MerchantDashboard

**Route:** `/merchant`

```
┌──────────────────────────────┐
│ Ahmetov Kebab         [⚙️]   │  ← Header + settings
├──────────────────────────────┤
│                              │
│  Revenue                     │
│  [Today] [Week] [Month]      │  ← Tabs (shadcn)
│  ┌────────────────────────┐  │
│  │   12,300 NOK            │  │  ← Card, large text
│  │   47 transactions       │  │
│  │   Fee paid: 123 NOK     │  │
│  └────────────────────────┘  │
│                              │
│  ┌────────────────────────┐  │
│  │  📱 Show My QR Code    │  │  ← Button, opens dialog
│  └────────────────────────┘  │
│                              │
│  Today's Transactions        │
│  ┌────────────────────────┐  │
│  │ Amir K.    129 NOK  ✅  │  │  ← Transaction list
│  │ Sara M.     89 NOK  ✅  │  │
│  │ Edin B.    245 NOK  ⏳  │  │
│  └────────────────────────┘  │
│                              │
│  Settlement: Daily 17:00     │  ← Info text
│  Next payout: 12,177 NOK    │
└──────────────────────────────┘
```

---

## User Flows

### Flow 1: Remittance (New User)
```
Download → Register (email + phone + password)
  → KYC (upload ID + selfie)
    → Add Payment Method (Norwegian bank/card)
      → Home → "Send Money"
        → Select Recipient (or add new: name + country + bank account)
          → Enter Amount (see live conversion + fee)
            → Review Details
              → Confirm & Send
                → Success (ETA 1-2 days)

ERROR PATHS:
  KYC incomplete → redirect to /kyc
  Insufficient funds → "Top up" dialog
  Country not supported → "Coming soon" message
  Network error → retry toast
```

### Flow 2: QR Payment (Customer)
```
Home → "Scan QR"
  → Camera opens (request permission if needed)
    → Scan merchant QR
      → Bottom sheet: merchant info + amount input
        → Confirm payment
          → Success + confetti

ERROR PATHS:
  Camera denied → settings redirect
  Invalid QR → "Not a Drop merchant" alert
  Payment failed → retry option
```

### Flow 3: Merchant Onboarding
```
Download → "Register as Merchant"
  → Business info (name + org.nummer + address)
    → Bank account for settlement
      → KYC (owner ID + selfie)
        → QR Code generated!
          → Print QR or display on screen
            → Start receiving payments

ERROR PATHS:
  Invalid org.nummer → "Check your business number"
  KYC failed → "Contact support"
```

---

## Design Tokens (Tailwind config)

```js
// tailwind.config.js extension
colors: {
  drop: {
    primary: '#3498db',    // blue - trust
    secondary: '#f1c40f',  // yellow - warmth
    accent: '#2ecc71',     // green - success
    dark: '#2c3e50',       // text
    light: '#ecf0f1',      // backgrounds
    error: '#e74c3c',      // errors
    warning: '#f39c12',    // warnings
  }
}
fontFamily: {
  heading: ['Montserrat', 'sans-serif'],
  body: ['Lato', 'sans-serif'],
}
```

---

## Responsive Breakpoints

| Breakpoint | Width | Target |
|-----------|-------|--------|
| default | 0-639px | Mobile (primary) |
| sm | 640px+ | Large phones |
| md | 768px+ | Tablets |
| lg | 1024px+ | Desktop |

Mobile-first: all layouts designed for 375px width, scale up.

---

*Generated: 2026-02-09 by Designer + Product agents (Ollama) + John (orchestration)*
*Next: Builder agent implements in Next.js 16 + shadcn/ui*