Skip to main content

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

# 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
Back to top