FocusBuddy/APP_ICON_DESIGN.md

🎨 FocusBuddy App Icon Design

Date: 2025-11-22 Status: Design specification ready

---

🎯 Design Concept

Core Message

The icon should convey:

• Focus: Centered, calm attention
• Gentleness: Soft, non-intimidating
• Support: A friendly companion, not a strict taskmaster

Design Direction

"Gentle Focus Circle" - A minimalist icon featuring concentric circles representing focused attention, with a soft color palette matching the app's Morandi aesthetic.

---

🎨 Visual Design

Primary Design Option: Focused Circle

┌─────────────────────┐
│                     │
│      ╭───────╮      │
│    ╭─────────────╮  │
│   │    ◉ ◉       │  │  <- Friendly "buddy" face
│   │      ⌣        │  │     (subtle, optional)
│    ╰─────────────╯  │
│      ╰───────╯      │
│                     │
└─────────────────────┘

Elements:

1. Outer circle: Soft gradient (#A7C4BC to #88C9A1)
2. Inner circle: Lighter shade (#F8F6F2)
3. Center dot: Primary color (#A7C4BC)
4. Optional: Subtle friendly face (two dots for eyes, gentle curve for smile)

Alternative Design: Timer Symbol

┌─────────────────────┐
│                     │
│        ⏰           │
│      ╱   ╲          │
│     │  12  │        │  <- Minimalist clock
│      ╲___╱          │      showing focus time
│                     │
└─────────────────────┘

---

🎨 Color Specifications

Primary Palette (from app_colors.dart)

Background:  #F8F6F2  // Warm off-white
Primary:     #A7C4BC  // Calm green
Success:     #88C9A1  // Encouraging green
Text:        #5B6D6D  // Soft gray

Icon Color Strategy

Option A - Gradient Background:

• Background: Gradient from #A7C4BC (top) to #88C9A1 (bottom)
• Center: #F8F6F2
• Details: #5B6D6D

Option B - Solid Background:

• Background: #A7C4BC
• Center circle: #F8F6F2
• Accent: #88C9A1

---

📐 Technical Requirements

iOS Requirements

Size	Usage	File Name
1024×1024	App Store	AppIcon-1024.png
180×180	iPhone 3x	AppIcon-180.png
120×120	iPhone 2x	AppIcon-120.png
167×167	iPad Pro	AppIcon-167.png
152×152	iPad 2x	AppIcon-152.png
76×76	iPad 1x	AppIcon-76.png

Android Requirements

Size	Density	Folder
192×192	xxxhdpi	mipmap-xxxhdpi
144×144	xxhdpi	mipmap-xxhdpi
96×96	xhdpi	mipmap-xhdpi
72×72	hdpi	mipmap-hdpi
48×48	mdpi	mipmap-mdpi
512×512	Play Store	playstore-icon.png

Design Guidelines

• iOS: No transparency, no rounded corners (iOS adds them automatically)
• Android: Can have transparency, adaptive icons recommended
• Safe area: Keep important elements within 80% of canvas (avoid edges)
• Contrast: Ensure icon is visible on both light and dark backgrounds

---

🛠️ Design Tools & Resources

Option 1: Figma (Recommended)

Steps:

1. Go to Figma (free account)
2. Create new file (1024×1024 canvas)
3. Use the design specifications above
4. Export all required sizes

Figma Template (you can recreate):

Frame: 1024×1024
├─ Background Rectangle (fill: linear gradient #A7C4BC → #88C9A1)
├─ Outer Circle (800×800, center aligned)
│  ├─ Fill: #A7C4BC
│  └─ Opacity: 90%
├─ Inner Circle (600×600, center aligned)
│  ├─ Fill: #F8F6F2
│  └─ Shadow: 0 4 20 rgba(0,0,0,0.1)
└─ Center Dot (200×200, center aligned)
   ├─ Fill: #A7C4BC
   └─ Optional: Friendly face elements

Option 2: Canva

Steps:

1. Go to Canva
2. Create custom size: 1024×1024
3. Search templates: "app icon minimal"
4. Customize with FocusBuddy colors
5. Download as PNG

Option 3: Icon Generator Tools

Online Tools:

• App Icon Generator - Upload 1024×1024, generates all sizes
• IconKitchen - Android adaptive icons
• MakeAppIcon - Generates iOS and Android sets

---

🎨 Detailed Design Specs

Design 1: Minimalist Focus Circle

SVG-like Description:

<svg viewBox="0 0 1024 1024">
  <!-- Background gradient -->
  <defs>
    <linearGradient id="bg" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" style="stop-color:#A7C4BC"/>
      <stop offset="100%" style="stop-color:#88C9A1"/>
    </linearGradient>
  </defs>

  <!-- Background -->
  <rect width="1024" height="1024" fill="url(#bg)"/>

  <!-- Outer circle (focus ring) -->
  <circle cx="512" cy="512" r="400"
          fill="none" stroke="#F8F6F2" stroke-width="60"/>

  <!-- Inner circle -->
  <circle cx="512" cy="512" r="280" fill="#F8F6F2" opacity="0.95"/>

  <!-- Center dot (the "focus point") -->
  <circle cx="512" cy="512" r="80" fill="#A7C4BC"/>

  <!-- Optional: Friendly face -->
  <!-- Left eye -->
  <circle cx="452" cy="480" r="20" fill="#5B6D6D" opacity="0.7"/>
  <!-- Right eye -->
  <circle cx="572" cy="480" r="20" fill="#5B6D6D" opacity="0.7"/>
  <!-- Gentle smile (arc) -->
  <path d="M 452 540 Q 512 570 572 540"
        stroke="#5B6D6D" stroke-width="12"
        fill="none" opacity="0.7" stroke-linecap="round"/>
</svg>

Design 2: Timer with Focus

Description:

- Background: Solid #A7C4BC
- Clock circle: #F8F6F2, 700×700
- Clock hands: #5B6D6D
  - Hour hand pointing at 12 (straight up)
  - Minute hand at 25 (Pomodoro reference)
- Center dot: Small circle #A7C4BC
- Shadow: Subtle drop shadow for depth

---

📝 Design Checklist

Before Creating

• Review app's color scheme (app_colors.dart)
• Decide on primary design concept
• Sketch rough ideas on paper (optional)

During Design

• Create 1024×1024 master file
• Use exact color codes from app
• Ensure visibility at small sizes (test at 48×48)
• Keep design simple and recognizable
• Test on light and dark backgrounds

After Design

• Export 1024×1024 PNG (for iOS App Store)
• Generate all required iOS sizes
• Generate all required Android sizes
• Test icon appearance on real devices (if possible)
• Update Xcode assets (ios/Runner/Assets.xcassets)
• Update Android resources (android/app/src/main/res)

---

🚀 Quick Start Guide

Fastest Method: Use Figma

1. Create Master Icon (15 minutes)

   1. Go to figma.com → New file
   2. Press 'F' for frame tool
   3. Enter dimensions: 1024×1024
   4. Create the design using shapes (circles, rectangles)
   5. Apply colors from the spec above
   

2. Export Master (2 minutes)

   1. Select the frame
   2. Right panel → Export
   3. Format: PNG, 1x
   4. Click Export
   5. Save as: icon-1024.png
   

3. Generate All Sizes (5 minutes)

   1. Go to appicon.co
   2. Upload icon-1024.png
   3. Select iOS and Android
   4. Download generated assets
   5. Unzip the files
   

4. Install Icons (10 minutes)

   • See installation instructions below

---

📦 Installation Instructions

iOS Installation

1. Locate Assets Folder:

   ios/Runner/Assets.xcassets/AppIcon.appiconset/
   

2. Replace Files:

   • Copy all generated iOS icons to this folder
   • Ensure file names match Contents.json

3. Update Contents.json (if needed):

   {
     "images": [
       {
         "size": "20x20",
         "idiom": "iphone",
         "filename": "Icon-20@2x.png",
         "scale": "2x"
       },
       // ... more entries
     ]
   }
   

4. Build and Test:

   flutter clean
   flutter build ios
   

Android Installation

1. Locate Resource Folders:

   android/app/src/main/res/
   ├── mipmap-mdpi/
   ├── mipmap-hdpi/
   ├── mipmap-xhdpi/
   ├── mipmap-xxhdpi/
   └── mipmap-xxxhdpi/
   

2. Replace ic_launcher.png:

   • Copy the corresponding size to each folder
   • Name all files: ic_launcher.png

3. Update for Adaptive Icons (Optional):

   • Create mipmap-anydpi-v26/ic_launcher.xml
   • Reference foreground and background layers

4. Build and Test:

   flutter clean
   flutter build apk
   

---

🎨 Design Recommendations

Do's ✅

• Keep it simple and recognizable
• Use the app's color palette
• Test visibility at small sizes
• Ensure contrast with backgrounds
• Make it friendly and approachable

Don'ts ❌

• Don't use text (hard to read at small sizes)
• Don't use complex gradients (may not scale well)
• Don't use thin lines (invisible at 48×48)
• Don't copy other apps' icons
• Don't use photos or realistic images

---

🔍 Testing Your Icon

Visual Tests

1. Size Test: View at 48×48 - is it still recognizable?
2. Background Test: Place on white, black, and colored backgrounds
3. Neighboring Test: View alongside other popular apps
4. Quick Glance Test: Can you identify it in 1 second?

Technical Tests

# iOS: Check in simulator
flutter run -d "iPhone 15 Pro"

# Android: Check on device
flutter install

---

💡 Design Philosophy

FocusBuddy Icon Should Feel:

• 🧘 Calm: Soft colors, rounded shapes
• 🤝 Supportive: Friendly, non-threatening
• 🎯 Focused: Clear center point, minimal distractions
• 💚 Gentle: Morandi palette, no harsh contrasts

Avoid:

• ⚠️ Aggressive colors (bright red, harsh orange)
• ⚠️ Sharp angles (intimidating)
• ⚠️ Complicated details (confusing)
• ⚠️ Dark/depressing tones (discouraging)

---

📚 Resources

Color Inspiration

• Current app palette: Morandi tones, calm greens
• Reference: Calm app, Headspace (but make it unique!)

Design Inspiration

• Search "minimalist app icon" on Dribbble
• Look at productivity app icons on App Store
• Browse "focus timer" apps for ideas

Tools

• Figma: https://www.figma.com (free)
• Canva: https://www.canva.com (free)
• AppIcon.co: https://appicon.co (free generator)
• IconKitchen: https://icon.kitchen (Android adaptive)

---

🎯 Next Steps

1. Design the Icon (20-30 minutes)

   • Use Figma or Canva
   • Follow the specifications above
   • Export 1024×1024 PNG

2. Generate All Sizes (5 minutes)

   • Use AppIcon.co to generate all required sizes
   • Download the zip file

3. Install in Project (10 minutes)

   • Replace iOS assets
   • Replace Android resources
   • Test on simulators/devices

4. Document (5 minutes)

   • Save master file for future updates
   • Note any design decisions
   • Take screenshots for app store

---

📝 Final Checklist

• Master icon created (1024×1024)
• All iOS sizes generated
• All Android sizes generated
• iOS assets installed
• Android resources installed
• Tested on iOS simulator
• Tested on Android emulator/device
• Icon looks good at small size (48×48)
• Icon matches app's design language
• Master file saved for future updates

---

Time Estimate: 30-60 minutes total Difficulty: Beginner-friendly Tools Needed: Browser (Figma/Canva), no design experience required

Ready to design? Follow the "Quick Start Guide" section above!