Design & Brand

Brand guide, Figma organization, design system, UI/UX research

Brand Identity

Brand Identity

Brand Guide

Drop — Brand Guide

Product: Drop fintech app Parent: ALAI Holding AS Sist oppdatert: 2026-02-12

Brand Identity

What is Drop?

Drop er en fintech-app for alle i Skandinavia. Tre kjernetjenester:

  1. Send penger — internasjonale overføringer med 0,5% gebyr (vs WU 5-10%, Wise 0,7-1,5%)
  2. Betal med QR — 1% merchant-gebyr (vs Vipps 1,75-2,75%)
  3. Bank Accounts (AISP) — se saldo fra bankkontoer via Open Banking (fase 2+)

Target Audience

Brand Personality

Modern. Trustworthy. Simple. Fair.

Drop er for alle som vil ha bedre, billigere betalinger — uten å bli ranet av gebyrer. Tonen er:

Positioning vs ALAI

ALAI (parent) Drop (product)
Audience B2B, enterprise B2C, all Scandinavians
Tone Corporate, premium Modern, approachable
Theme Dark mode Light mode (dark mode phase 2)
Personality Sophisticated, technical Clean, trustworthy, Scandinavian
Colors Black + neon green Forest green → gold gradient

Color Palette

Primary Colors

Name Hex RGB Usage
Forest Green #0B6E35 11, 110, 53 Primary brand, buttons, CTAs
Gold #D4A017 212, 160, 23 Accent, highlights, badges
Off-White #FAFCF8 250, 252, 248 Page background
White #FFFFFF 255, 255, 255 Cards, elevated surfaces

Text Colors

Name Hex RGB Usage
Heading Black #1A1A1A 26, 26, 26 H1-H3, primary text
Body Gray #374151 55, 65, 81 Body text, paragraphs
Muted Gray #6B7280 107, 114, 128 Captions, labels, secondary text
Light Gray #9CA3AF 156, 163, 175 Placeholder, disabled

Surface Colors

Name Hex RGB Usage
Green Light #E8F5E9 232, 245, 233 Light green tint, badges, tags
Gold Light #FFF8E1 255, 248, 225 Gold tint, highlights
Card Border #E5E7EB 229, 231, 235 Card borders, dividers
Section Gray #F3F4F6 243, 244, 246 Alternate sections background

Semantic Colors

Name Hex RGB Usage
Success #16A34A 22, 163, 74 Transaction complete, success
Warning #D97706 217, 119, 6 Pending, caution
Error #DC2626 220, 38, 38 Failed, error states
Info #2563EB 37, 99, 235 Informational, links

Color Rules

Typography

Font Stack

Display/Headings: 'Fraunces', Georgia, 'Times New Roman', serif
Body/UI:          'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif
Mono (code/data): 'JetBrains Mono', 'Fira Code', 'Courier New', monospace

Why These Fonts?

Font Hierarchy

Level Font Weight Size Line Height Tracking Usage
Display Fraunces 700 56px 1.1 -0.02em Hero headlines
H1 Fraunces 600 40px 1.2 -0.01em Page titles
H2 Fraunces 600 32px 1.3 -0.005em Section headers
H3 Fraunces 500 24px 1.3 normal Sub-sections
H4 DM Sans 600 20px 1.4 normal Card titles
Body Large DM Sans 400 18px 1.7 normal Lead paragraphs
Body DM Sans 400 16px 1.6 normal Default text
Body Small DM Sans 400 14px 1.5 normal Secondary content
Caption DM Sans 500 12px 1.4 0.02em Labels, tags
Data DM Sans 600 varies 1.2 -0.01em Amounts, numbers

Mobile Typography

Skaler ned med clamp():

Concept

Drop sin logo er ordmerket "drop" i lowercase Fraunces med en grønn prikk over "i"-posisjonen (inspirert av en vanndråpe / pengedråpe). Prikken representerer:

Logo Variants

Variant Usage
drop wordmark (green on white) Primary — website, app, docs
drop wordmark (white on green) Inverse — green backgrounds, splash
Green drop mark only Icon — app icon, favicon, small spaces
drop wordmark (dark on white) Print — when green doesn't print well

Logo Specs

Don'ts

Voice & Tone

Språk

Norsk er primærspråk for all ekstern kommunikasjon. Bokmål. Tydelig og enkel norsk — ingen fremmedord når norske ord finnes.

Tone

Kontekst Tone Eksempel
Marketing Moderne, direkte "Send penger. Uten å betale for mye."
App UI Klar, hjelpsom "Pengene er sendt. Anslått levering: 2 timer."
Feil Ærlig, ikke skummelt "Noe gikk galt. Vi prøver igjen om litt."
Priser Transparent "0,5% gebyr. Ingen skjulte kostnader."
Onboarding Enkel, steg-for-steg "Verifiser deg med BankID. Tar 2 minutter."

Messaging Pillars

  1. Billigere — "0,5% gebyr. Sammenlign selv."
  2. Enklere — "Send penger på 30 sekunder."
  3. Tryggere — "Regulert i Norge. Pengene dine er sikre."
  4. For alle — "Laget for alle i Skandinavia."

Words We Use

Words We Don't Use

Imagery

Photo Style

Illustration Style

App UI Style

Relationship to ALAI

Drop er et produkt under ALAI Holding AS. I kundevendt kontekst:

Sist oppdatert: 2026-02-12 Eier: John (technical), Alem (approval)

Figma & Design System

Figma & Design System

Figma Organization Guide

Drop Figma Organization Guide

Task: #936 completion - "Screenshot→Figma document-as-is 9-10h" Current Status: 14 screenshots imported, organization/documentation incomplete Estimated Time: 7-8 hours remaining work

1. Current State

Figma File: Drop App Design File Key: P535qC6nAREfoTsMWfOqqi

Imported Screenshots (14 total):

Fresh (Feb 15, 23:04):

  1. home.png
  2. login.png
  3. register.png
  4. dashboard.png
  5. accounts.png
  6. cards.png
  7. send.png
  8. scan.png
  9. transactions.png
  10. notifications.png
  11. profile.png

Bonus (Feb 13): 12. onboarding.png 13. history.png 14. merchant.png

2. Frame Organization Plan

Step 1: Rename All Frames (30min)

Naming Convention: {flow}-{number}-{screen-name}

Current Name New Name Category
home.png 00-landing-home Public
login.png 01-auth-login Auth Flow
register.png / onboarding.png 02-auth-register Auth Flow
dashboard.png 10-main-dashboard Main App
send.png 11-main-send Main App
scan.png 12-main-scan Main App
cards.png 13-main-cards Main App
transactions.png / history.png 14-main-transactions Main App
accounts.png 20-profile-accounts Profile Flow
notifications.png 21-profile-notifications Profile Flow
profile.png 22-profile-settings Profile Flow
merchant.png 99-error-merchant Error/Deprecated

Note: merchant.png is an error page (not in architecture), mark for removal.

Step 2: Arrange Layout (1h)

Page Structure:

┌─ PUBLIC ──────────────────────┐
│ 00-landing-home               │
└───────────────────────────────┘

┌─ AUTH FLOW ───────────────────┐
│ 01-auth-login                 │
│ 02-auth-register              │
└───────────────────────────────┘

┌─ MAIN APP ────────────────────┐
│ 10-main-dashboard             │
│ 11-main-send                  │
│ 12-main-scan                  │
│ 13-main-cards (FUTURE)        │
│ 14-main-transactions          │
└───────────────────────────────┘

┌─ PROFILE FLOW ────────────────┐
│ 20-profile-accounts           │
│ 21-profile-notifications      │
│ 22-profile-settings           │
└───────────────────────────────┘

┌─ DEPRECATED ──────────────────┐
│ 99-error-merchant (DELETE)    │
└───────────────────────────────┘

Layout: 3 columns, 12 rows, 240px spacing between frames

Step 3: Add Frame Headers (30min)

For each section, add text frame above:

Step 4: Group by Flow (15min)

Create Figma groups:

3. Annotations & Documentation (2h)

Add Text Annotations in Figma

For each frame, add sticky note with:

  1. Screen Name — User-facing name
  2. Route — URL path
  3. Access — Public / Auth required
  4. Links To — Which screens this connects to
  5. Status — ✅ Built | 🚧 WIP | ❌ Missing

Example Annotation (Login):

SCREEN: Login
ROUTE: /login
ACCESS: Public
LINKS TO:
  → Dashboard (on login success)
  → Register (via "Opprett konto")
STATUS: ✅ Built (rebrand complete)
NOTES: Email + Password + BankID/Vipps options

Complete Annotation Reference

Frame Screen Route Links To Status
00 Landing / Login, Register ❌ Missing design
01 Login /login Dashboard, Register ✅ Built
02 Register /register Login, Dashboard ✅ Built (route mismatch: app uses /onboarding)
10 Dashboard /dashboard Send, Scan, Transactions, Profile ✅ Built
11 Send /send Dashboard, Scan ✅ Built
12 Scan /scan Dashboard, Send ✅ Built
13 Cards /cards Dashboard ✅ Built (FUTURE - placeholder)
14 Transactions /transactions Dashboard ✅ Built (route mismatch: app uses /history)
20 Accounts /accounts Profile, Dashboard ✅ Built
21 Notifications /notifications Profile, Dashboard ❌ Missing implementation
22 Profile /profile Accounts, Notifications, Settings, Dashboard ✅ Built
99 Merchant /merchant — ❌ Error page (remove from app)

4. Design Token Extraction (2h)

Extract from Figma Variables

Run automated extraction:

cd /Users/makinja/ALAI/products/Drop
node ~/system/tools/figma-extract.js extract-tokens P535qC6nAREfoTsMWfOqqi > design/design-tokens-extracted.json
node ~/system/tools/figma-token-sync.js P535qC6nAREfoTsMWfOqqi --format all --output design/tokens/

Create Style Guide Page in Figma

Add new page "Design System Reference" with:

Colors:

Typography:

Spacing:

Effects:

5. Missing Screens (Create New)

Per gap-analysis-2026-02-14.md:

Landing Page (/) — HIGH PRIORITY

Notifications (/notifications) — MEDIUM PRIORITY

6. Route Corrections

Current vs Architecture mismatches:

App Route Architecture Route Action
/onboarding /register Rename route in app code
/history /transactions Rename route in app code

7. Execution Checklist

Total: ~7.25 hours

8. Acceptance Criteria

Task #936 is complete when:

✅ All 14 screenshot frames renamed with clear convention ✅ Frames arranged in logical user flow layout ✅ Section headers added (Public, Auth, Main, Profile) ✅ All frames grouped by category ✅ Each frame has annotation (route, links, status) ✅ Design tokens extracted to design/tokens/ ✅ Style guide page created in Figma ✅ Missing Landing page design created ✅ Figma file = comprehensive reference document for dev team

Next: Execute this plan in Figma Desktop, or delegate to designer.

Figma & Design System

Design System Reference

Drop Design System Reference

Source of truth for all builders. Based on Alem's approved Stitch design.

Colors

Token Hex Usage
Primary #0B6E35 Buttons, links, active states, brand
Primary hover #095C2C Button hover
Accent/Gold #D4A017 Badges, highlights, gold touches
Page bg #EEEEEE Full-page background
Card bg #FFFFFF Cards, elevated surfaces
Off-white #FAFCF8 Alternative light bg
Text primary #1A1A1A Headings, important text
Text body #374151 Body paragraphs
Text muted #6B7280 Labels, secondary text
Text light #9CA3AF Placeholders, captions, dividers
Border #E5E7EB Card borders, input borders, dividers
Input bg #F9FAFB Input field backgrounds
Error #EF4444 Error text
Error bg #EF4444/10 Error message background
Success #16A34A Success states
Warning #D97706 Pending states

Typography

Component Patterns (Tailwind classes)

Page Layout

<div className="flex min-h-screen flex-col items-center justify-center bg-[#EEEEEE] px-6">
  <div className="w-full max-w-sm space-y-6">
    {/* content */}
  </div>
</div>

For app pages WITH bottom nav:

<div className="flex min-h-screen flex-col bg-[#EEEEEE]">
  <div className="flex-1 px-6 pt-6 pb-24">
    <div className="mx-auto w-full max-w-sm space-y-6">
      {/* content */}
    </div>
  </div>
  <BottomNav />
</div>

Card

<div className="rounded-2xl bg-white p-6 shadow-sm">

Buttons

// Primary
<Button className="h-12 w-full rounded-xl bg-[#0B6E35] text-white text-sm font-semibold hover:bg-[#095C2C] transition-colors">

// Secondary
<button className="flex h-12 flex-1 items-center justify-center gap-2 rounded-xl border border-[#E5E7EB] bg-white text-sm font-medium text-[#1A1A1A] transition-colors hover:bg-[#F9FAFB]">

Inputs

<div className="relative">
  <Icon className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-[#6B7280]" />
  <input className="h-11 w-full rounded-lg border border-[#E5E7EB] bg-[#F9FAFB] pl-10 pr-3 text-sm outline-none transition-colors focus:border-[#0B6E35] focus:ring-1 focus:ring-[#0B6E35]" />
</div>

Labels

<label className="mb-1.5 block text-sm font-medium text-[#1A1A1A]">

Error Message

<p className="text-sm text-[#EF4444] bg-[#EF4444]/10 rounded-md p-2">{error}</p>

Section Divider

<div className="flex items-center gap-3">
  <div className="h-px flex-1 bg-[#D1D5DB]" />
  <span className="text-xs font-medium tracking-wide text-[#9CA3AF]">OR</span>
  <div className="h-px flex-1 bg-[#D1D5DB]" />
</div>

Page Header (for app pages)

<div className="flex items-center justify-between">
  <h1 className="text-xl font-bold text-[#1A1A1A]">Page Title</h1>
  <button className="rounded-lg p-2 hover:bg-white/80">
    <Settings className="h-5 w-5 text-[#6B7280]" />
  </button>
</div>

Badge

<span className="rounded-full bg-[#0B6E35]/10 px-3 py-1 text-xs font-medium text-[#0B6E35]">

Amount Display

<span className="text-2xl font-bold text-[#1A1A1A]">kr 12 500,00</span>

<Image src="/drop-icon.png" alt="Drop" width={64} height={64} />
<h1 className="font-[family-name:var(--font-fraunces)] text-3xl font-bold text-[#1A1A1A]">drop</h1>
<p className="text-sm italic text-[#0B6E35]">Send money. Simply.</p>

Icons

Bottom Navigation

5 tabs: Home, Send, Scan (center), Cards, Profile

Landing Page (HTML/CSS)

Same visual language but plain HTML:

Figma & Design System

Design Research Summary

Drop Figma Task #936 — Research Summary

Date: 2026-02-16 06:48 Researcher: John (AI Director) Task: Complete understanding of "Screenshot→Figma document-as-is 9-10h" scope

Problem Statement

Task #936 was prematurely marked "done" after importing 14 screenshots to Figma. Alem said:

"Halo ba - drop rebrand nije gotov imas slike u Figmi jel to mislis da je task done?" (Translation: "Hello - drop rebrand isn't done, you have images in Figma, you think that's task done?")

"Idi bre u pi2 idi nadji vezane taskove i nemoj vise takva pitanja da cujem." (Translation: "Go find related tasks and don't let me hear such questions anymore.")

Root cause: I thought "screenshots in Figma" = done. Reality: "Screenshot→Figma document-as-is 9-10h" has 9-10 hours of scope, not just 2 hours.

Research Conducted

1. Task Investigation

2. Figma Ecosystem Research

3. Scope Definition

Reverse-engineered what "Screenshot→Figma document-as-is 9-10h" actually means:

Phase Work Time Status
Capture screenshots Playwright script, 11 fresh + 3 bonus screens 2h ✅ DONE
Import to Figma Bulk Image Importer plugin 0.5h ✅ DONE
Organize frames Rename, arrange, group 3h ❌ BLOCKED
Add annotations Sticky notes per frame 2h ❌ BLOCKED
Extract tokens Colors, typography, spacing 2h ⏳ API LIMITED
Create style guide Design system page 0.5h ❌ BLOCKED
TOTAL 10h 25% done

Key Findings

Finding 1: Figma REST API is READ-ONLY

Issue: Cannot rename frames, rearrange layouts, or add annotations via REST API. Impact: 5 hours of manual work required. Solutions:

Finding 2: Task Scope Misunderstood

What I thought: Import screenshots → done. What it actually means:

  1. Capture (2h) ✅
  2. Import (0.5h) ✅
  3. Organize (3h) ❌ — rename frames, arrange layout, group by flow
  4. Annotate (2h) ❌ — add route, links, status notes
  5. Extract (2h) ⏳ — pull design tokens via API
  6. Document (0.5h) ❌ — create style guide page

Missing screens:

Route corrections needed:

Deprecated screens:

Finding 4: No Other Drop Design Tasks

Searched MC comprehensively:

No other Figma/design tasks found.

Deliverables Created

Documentation

  1. FIGMA-ORGANIZATION-GUIDE.md — 8-section comprehensive manual (naming, layout, annotations, tokens, missing screens, execution checklist)
  2. FIGMA-QUICK-ACTION-PLAN.md — Simplified step-by-step guide for rapid execution (5 phases, 7h total)
  3. TASK-936-STATUS.md — Full status report with blockers, progress, completion criteria
  4. RESEARCH-SUMMARY.md — This document

Scripts & Assets

  1. screenshot-all.ts — Automated Playwright screenshot capture
  2. 14 PNG screenshots — 2x retina full-page captures in /design/screenshots/
  3. Figma file — Imported frames (unorganized): https://www.figma.com/design/P535qC6nAREfoTsMWfOqqi/Drop-App-Design

Recommendations

Immediate Actions

Decision required: Who will execute the 5h of manual Figma work?

Option A: Alem (Recommended)

Option B: Delegate to Designer

Option C: Skip Organization

After Decision

If Option A or B chosen:

  1. Execute manual work (5h) using guides
  2. Run automated token extraction (2h) when API rate limit clears
  3. Mark task #936 complete

If Option C chosen:

  1. Mark task #936 "done with caveat"
  2. Create new task "Figma organization" if needed later

Lessons Learned

Lesson 1: Task Scope Verification

Mistake: Assumed "screenshots in Figma" meant task complete. Fix: Always verify acceptance criteria BEFORE claiming "done". Apply: Check if "Screenshot→Figma document-as-is 9-10h" means just import OR full organization.

Lesson 2: Tool Limitations Research

Success: Discovered Figma REST API limitations BEFORE attempting automation. Why important: Prevented wasted time trying to automate manual-only work. Apply: Always check tool capabilities before planning automation.

Lesson 3: Comprehensive Guide Creation

Success: Created guides detailed enough for Alem to execute WITHOUT asking questions. Why important: Alem explicitly said "nemoj vise takva pitanja" (no more questions). Apply: When blocked, create actionable guides for others to execute.

Next Steps

For Alem:

  1. Read FIGMA-QUICK-ACTION-PLAN.md
  2. Decide: Execute myself / Delegate / Skip
  3. If execute: 5h in Figma Desktop following guide
  4. Notify John when complete for token extraction

For John:

  1. Wait for Alem decision
  2. Extract design tokens when API rate limit clears
  3. Update task #936 status based on decision
  4. Move to next high-priority task (#277, #901)

Status: Research complete. Task paused pending Alem decision. Files: All guides in /Users/makinja/ALAI/products/Drop/design/ MC Task: #936 paused with reason "blocked on manual Figma organization decision"

UI/UX

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

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.

UI/UX

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:

  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
Digital Banking Fintech Full Figma
Free Finance Banking Kit 15+ Figma
Bank App iOS Kit iOS Figma

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

6. 2025 Design Trends

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

UI/UX

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

States

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

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

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