# drop-rebrand-plan

# Plan: Drop Full Rebrand

## Objective
Rebrand all Drop screens (12 app pages + 13 landing pages) to match Alem's approved Stitch design. Plus logo, branding assets, and email templates.

## Source of Truth
- Stitch reference: `/Users/makinja/ALAI/products/Drop/design/stitch-login-reference.png`
- Design system: `/Users/makinja/ALAI/products/Drop/design/design-system-reference.md`
- Login page (already rebranded): `src/drop-app/src/app/login/page.tsx`

## Team Orchestration

### Team Members
| ID | Name | Role | Agent Type |
|----|------|------|------------|
| B1 | logo-builder | Export/create logo, generate all asset sizes | builder |
| V1 | logo-validator | Verify all logo assets exist and are correct | validator |
| B2 | app-auth-builder | Rebrand Login + Onboarding pages | builder |
| B3 | app-core-builder | Rebrand Dashboard + Home + Send + Scan pages | builder |
| B4 | app-util-builder | Rebrand Cards + Accounts + Profile + History + Merchant pages | builder |
| V2 | app-validator | Verify all 12 app pages match design system | validator |
| B5 | landing-main-builder | Rebrand landing index + product pages | builder |
| B6 | landing-info-builder | Rebrand company + legal landing pages | builder |
| V3 | landing-validator | Verify all 13 landing pages match design system | validator |
| B7 | branding-builder | Email templates + OG images + favicon | builder |
| V4 | branding-validator | Verify email templates and brand assets | validator |

### Step-by-Step Tasks

#### Phase 1: Logo & Brand Foundation
**Task 1:** Create/export Drop logo and all brand assets
- Owner: B1
- BlockedBy: none
- Files: `src/drop-app/public/drop-icon.png`, `src/drop-app/public/favicon.svg`, `brand/logo-icon.svg`, `brand/app-icon.svg`, `brand/favicon.svg`, `src/drop-app/src/components/drop-logo.tsx`
- Instructions:
  1. Read the Stitch reference image at `design/stitch-login-reference.png`
  2. The logo is: green rounded square (#0B6E35) with white $ symbol and circular transfer arrows, plus gold (#D4A017) accent dot
  3. Create a clean SVG version of this logo
  4. Generate PNG versions: drop-icon.png (128x128, 256x256), icon-200.png, icon-48.png
  5. Create favicon.svg using Drop green (#0B6E35) not ALAI green
  6. Update drop-logo.tsx: DropAppIcon should render the new logo SVG inline
  7. Update brand/ directory SVG files
- Acceptance:
  - [ ] drop-icon.png exists in public/ at 128x128 minimum
  - [ ] favicon.svg uses #0B6E35
  - [ ] drop-logo.tsx DropAppIcon renders new logo
  - [ ] All brand/ SVGs updated

**Task 2:** Validate logo and brand assets
- Owner: V1
- BlockedBy: 1
- Acceptance: All logo files exist, correct colors, no broken references

#### Phase 2: App Pages (parallel)
**Task 3:** Rebrand Login + Onboarding
- Owner: B2
- BlockedBy: none
- Files: `src/drop-app/src/app/login/page.tsx`, `src/drop-app/src/app/onboarding/page.tsx`
- Instructions:
  1. Read design-system-reference.md
  2. Login is already close to target — refine if needed
  3. Onboarding: apply same design language (gray bg, white cards, green buttons, Fraunces headings)
  4. Keep all existing logic (form validation, API calls, state management)
- Acceptance:
  - [ ] Login matches Stitch reference
  - [ ] Onboarding uses same design language
  - [ ] All form logic preserved

**Task 4:** Rebrand Dashboard + Home + Send + Scan
- Owner: B3
- BlockedBy: none
- Files: `src/drop-app/src/app/page.tsx`, `src/drop-app/src/app/dashboard/page.tsx`, `src/drop-app/src/app/send/page.tsx`, `src/drop-app/src/app/scan/page.tsx`
- Instructions:
  1. Read design-system-reference.md AND current login/page.tsx as reference
  2. These pages use BottomNav — use the "app pages WITH bottom nav" layout pattern
  3. Dashboard: main screen after login — balance display, quick actions, recent transactions
  4. Home: app entry point, likely redirect or welcome
  5. Send: 4-step money transfer flow — preserve all step logic
  6. Scan: QR scanner — preserve camera/scan logic
  7. Keep ALL business logic, only change visual styling
- Acceptance:
  - [ ] All 4 pages use consistent design system
  - [ ] BottomNav present on all pages
  - [ ] All existing functionality preserved

**Task 5:** Rebrand Cards + Accounts + Profile + History + Merchant
- Owner: B4
- BlockedBy: none
- Files: `src/drop-app/src/app/cards/page.tsx`, `src/drop-app/src/app/accounts/page.tsx`, `src/drop-app/src/app/profile/page.tsx`, `src/drop-app/src/app/history/page.tsx`, `src/drop-app/src/app/merchant/page.tsx`
- Instructions:
  1. Read design-system-reference.md AND current login/page.tsx as reference
  2. All pages use BottomNav layout pattern
  3. Cards: virtual/physical card management
  4. Accounts: linked bank accounts list
  5. Profile: user settings and preferences
  6. History: transaction list with filters
  7. Merchant: merchant onboarding flow
  8. logo-preview/page.tsx can be deleted or simplified
  9. Keep ALL business logic, only change visual styling
- Acceptance:
  - [ ] All 5 pages use consistent design system
  - [ ] BottomNav on all pages
  - [ ] All existing functionality preserved

**Task 6:** Validate all app pages
- Owner: V2
- BlockedBy: 3, 4, 5
- Acceptance:
  - [ ] All 12 pages load without errors
  - [ ] Consistent color palette (#0B6E35, #D4A017, #EEEEEE, #1A1A1A)
  - [ ] Consistent typography (Fraunces headings, DM Sans body)
  - [ ] BottomNav on all pages except login/onboarding
  - [ ] No hardcoded wrong colors or fonts

#### Phase 3: Landing Pages (parallel)
**Task 7:** Rebrand landing index + product pages
- Owner: B5
- BlockedBy: none
- Files: `landing/index.html`, `landing/pages/send-penger.html`, `landing/pages/qr-betaling.html`, `landing/pages/priser.html`, `landing/pages/sikkerhet.html`
- Instructions:
  1. Read design-system-reference.md (Landing Page section)
  2. These are static HTML — use CSS variables + Google Fonts CDN
  3. Main index: hero section, features, CTA, footer
  4. Product pages: detailed feature descriptions
  5. Consistent navbar and footer across all pages
  6. Colors: same as app (#0B6E35, #D4A017, #EEEEEE, white)
  7. Desktop-responsive (max-width 1200px, mobile-friendly)
  8. Use favicon.svg with Drop green
- Acceptance:
  - [ ] All 5 pages share consistent navbar/footer
  - [ ] Same color palette as app
  - [ ] Responsive (375px to 1440px)
  - [ ] No broken links between pages

**Task 8:** Rebrand landing company + legal pages
- Owner: B6
- BlockedBy: none
- Files: `landing/pages/om-drop.html`, `landing/pages/karriere.html`, `landing/pages/presse.html`, `landing/pages/kontakt.html`, `landing/pages/personvern.html`, `landing/pages/vilkar.html`, `landing/pages/lisenser.html`, `landing/pages/cookies.html`
- Instructions:
  1. Read design-system-reference.md (Landing Page section)
  2. Read landing/index.html for navbar/footer pattern (use same)
  3. Company pages (om-drop, karriere, presse, kontakt): content + design
  4. Legal pages (personvern, vilkar, lisenser, cookies): clean readable text layout
  5. Consistent with the main landing page style
- Acceptance:
  - [ ] All 8 pages share same navbar/footer as index
  - [ ] Consistent colors and typography
  - [ ] Legal pages readable and well-structured
  - [ ] All internal links work

**Task 9:** Validate all landing pages
- Owner: V3
- BlockedBy: 7, 8
- Acceptance:
  - [ ] All 13 pages render correctly
  - [ ] Consistent design across all pages
  - [ ] All links work
  - [ ] Mobile responsive

#### Phase 4: Email & Remaining Branding
**Task 10:** Create email templates + OG images
- Owner: B7
- BlockedBy: 1
- Files: new `src/drop-app/src/email-templates/` directory, `brand/og-image.html`
- Instructions:
  1. Create HTML email templates (inline CSS, 600px max-width):
     - welcome.html — Welcome to Drop
     - transaction-receipt.html — Payment confirmation
     - password-reset.html — Reset password link
  2. Use Drop brand colors, logo, "Send money. Simply." tagline
  3. Update og-image.html in brand/ to match new design
  4. All emails must work in Gmail, Outlook, Apple Mail
- Acceptance:
  - [ ] 3 email templates created
  - [ ] Valid HTML email (inline CSS, table layout)
  - [ ] Drop branding consistent
  - [ ] OG image updated

**Task 11:** Validate email templates and branding
- Owner: V4
- BlockedBy: 10
- Acceptance:
  - [ ] Email templates have inline CSS
  - [ ] No external CSS/JS dependencies
  - [ ] Drop logo and colors present
  - [ ] OG image renders correctly

## Validation Commands
```bash
# App — dev server
cd /Users/makinja/ALAI/products/Drop/src/drop-app && npm run build

# Landing — open in browser
open /Users/makinja/ALAI/products/Drop/landing/index.html

# Check all files exist
ls -la /Users/makinja/ALAI/products/Drop/src/drop-app/public/drop-icon.png
ls -la /Users/makinja/ALAI/products/Drop/src/drop-app/public/favicon.svg
ls -la /Users/makinja/ALAI/products/Drop/brand/logo-icon.svg
```