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 displayButtonvariant="default" — Send Money (bg: #3498db)Buttonvariant="outline" — Scan QR (border: #2ecc71)ScrollArea— transaction listBadge— 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)
// 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
No comments to display
No comments to display