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

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

# 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