Good Deeds

Appearance

Good Deeds Visual Assets ​

This document describes the visual brand assets for Good Deeds. Actual graphic files should be created by a professional designer using tools like Adobe Illustrator, Figma, or similar.

Logo Design ​

Logo Concept ​

The Good Deeds logo combines two key elements:

  1. Helping Hands Symbol - Two hands reaching toward each other, creating a subtle heart shape in the negative space between them
  2. Wordmark - "Good Deeds" in Poppins Bold font

Symbol Design Specifications ​

The Helping Hands Symbol:

  • Two stylized hands in a minimalist, geometric form
  • Left hand reaching from the bottom-left
  • Right hand reaching from the top-right
  • Hands meet in the center, fingers slightly overlapping
  • Negative space between hands forms a heart shape
  • Rounded, friendly edges (2px corner radius on geometric forms)
  • Can be used independently as app icon

Dimensions:

  • Symbol: Square format (1:1 ratio)
  • Recommended: 512x512px minimum for source file
  • Clear space: 0.5x the height of the symbol on all sides

Construction Grid:

┌─────────────────────┐
│                     │
│    ┌─┐             │  ← Top hand (right)
│   ┌┘ └┐            │
│  ┌┘ ♥ └┐           │  ← Heart shape in negative space
│ ┌┘     └┐          │
│└┘       └┘         │  ← Bottom hand (left)
│                     │
└─────────────────────┘

Color Variations:

  1. Primary - Good Deeds Green (#4CAF50) on white/light backgrounds
  2. Inverse - White on Good Deeds Green or dark backgrounds
  3. Monochrome - Single color (black or primary brand color)
  4. Gradient (optional, for special applications) - Green (#4CAF50) to Blue (#2196F3)

Wordmark Specifications ​

Typography:

  • Font: Poppins Bold (700 weight)
  • "Good Deeds" with capital G and D
  • Kerning: Optically adjusted for visual balance
  • Color: Charcoal (#212121) or white depending on background

Lockup Variations:

  1. Horizontal Lockup (Primary)

    [Symbol] Good Deeds
    • Symbol on left, wordmark on right
    • Vertical alignment: centered
    • Spacing between symbol and text: 0.5x symbol width

  2. Vertical Lockup (Secondary)

        [Symbol]
   Good Deeds
    • Symbol on top, wordmark below
    • Horizontal alignment: centered
    • Spacing between symbol and text: 0.3x symbol height

  3. Symbol Only

    • Use for: App icon, favicon, social media profile images
    • Minimum size: 32x32px

  4. Wordmark Only

    • Use when symbol is displayed separately in layout
    • Minimum size: 100px width

Logo Usage Rules ​

DO:

  • ✅ Use approved logo files only
  • ✅ Maintain minimum clear space
  • ✅ Scale proportionally
  • ✅ Use on backgrounds with sufficient contrast
  • ✅ Use approved color variations

DON'T:

  • ❌ Rotate the logo
  • ❌ Distort or stretch the logo
  • ❌ Change the logo colors outside approved palette
  • ❌ Add effects (drop shadows, glows, bevels)
  • ❌ Outline the logo
  • ❌ Place on busy backgrounds without adequate contrast
  • ❌ Recreate or modify the symbol

File Formats & Organization ​

brand/assets/logos/
├── primary/
│   ├── logo-horizontal.svg
│   ├── logo-horizontal.png (2000px width)
│   ├── logo-horizontal@2x.png
│   └── logo-horizontal@3x.png
├── vertical/
│   ├── logo-vertical.svg
│   ├── logo-vertical.png (1000px height)
│   ├── logo-vertical@2x.png
│   └── logo-vertical@3x.png
├── symbol/
│   ├── symbol-only.svg
│   ├── symbol-only.png (512x512px)
│   ├── symbol-only@2x.png (1024x1024px)
│   └── symbol-only@3x.png (1536x1536px)
├── wordmark/
│   ├── wordmark-only.svg
│   └── wordmark-only.png
├── inverse/
│   ├── logo-horizontal-inverse.svg
│   ├── logo-vertical-inverse.svg
│   └── symbol-only-inverse.svg
└── favicon/
    ├── favicon.ico
    ├── favicon-16x16.png
    ├── favicon-32x32.png
    └── favicon-64x64.png

App Icon ​

Platform-Specific Requirements:

iOS App Icon ​

  • Symbol only on Good Deeds Green background
  • White symbol color
  • No transparency
  • Sizes needed:
    • 1024x1024px (App Store)
    • 180x180px (iPhone @3x)
    • 120x120px (iPhone @2x)
    • 167x167px (iPad Pro @2x)
    • 152x152px (iPad @2x)
    • 76x76px (iPad @1x)

Android App Icon ​

  • Adaptive icon with separate foreground and background layers
  • Foreground: Symbol in white
  • Background: Good Deeds Green solid color
  • Safe zone: Keep symbol within 66dp x 66dp center area
  • Sizes needed:
    • 512x512px (Play Store)
    • xxxhdpi: 192x192px
    • xxhdpi: 144x144px
    • xhdpi: 96x96px
    • hdpi: 72x72px
    • mdpi: 48x48px

Web App Icon ​

  • Symbol only on Good Deeds Green background
  • Sizes needed:
    • 512x512px (PWA splash screen)
    • 192x192px (PWA home screen)
    • 180x180px (iOS Safari)
    • 32x32px (browser tab)
    • 16x16px (browser tab)

Icons ​

Icon Style Guide ​

Style Characteristics:

  • Rounded style (2px corner radius)
  • 2px stroke weight
  • Consistent visual weight
  • Simplified, geometric forms
  • Friendly, approachable appearance

Icon Set:

  • Use Material Design Icons (Rounded variant) as base
  • Custom icons for app-specific features should match this style

Custom Icon Requirements:

  1. Task/Request Icon

    • Checklist or clipboard with checkmarks
    • Rounded corners
    • Good Deeds Green color

  2. Points/Rewards Icon

    • Coin or star shape
    • Warmth Orange color
    • Sparkle effect optional

  3. Neighbor/Community Icon

    • Multiple people silhouettes
    • Arranged in circular or connected formation
    • Primary Green color

  4. Help Icon

    • Helping hand reaching out
    • Simplified version of logo hand
    • Primary Green color

Icon Sizes:

  • Source: 24x24dp (Material Design standard)
  • Provide @1x, @2x, @3x variants for mobile
  • SVG format preferred for web

Illustrations ​

Illustration Style ​

Characteristics:

  • Flat design with subtle depth
  • Rounded, friendly shapes
  • Limited color palette from brand colors
  • Diverse, inclusive character representation
  • Simple geometric forms
  • Warm, approachable tone

Color Usage:

  • Primary: Good Deeds Green and Community Blue
  • Accents: Warmth Orange, Sunshine Yellow
  • Skin tones: Diverse range of natural tones
  • Backgrounds: White or Light Gray

Subject Matter:

  1. Onboarding Illustrations

    • Welcome: Diverse neighbors waving
    • Community: People helping each other
    • Rewards: Person celebrating with points/coins

  2. Empty States

    • No tasks: Person relaxing with cup of tea
    • No requests: Empty clipboard with friendly note
    • No neighbors: Person looking at phone with search icon

  3. Feature Explanations

    • How it works: Step-by-step visual flow
    • Safety: Shield with checkmark, trusted neighbor
    • Rewards: Points collecting, redemption

Illustration Files ​

brand/assets/illustrations/
├── onboarding/
│   ├── welcome.svg
│   ├── how-it-works.svg
│   └── get-started.svg
├── empty-states/
│   ├── no-tasks.svg
│   ├── no-requests.svg
│   └── search-neighbors.svg
├── features/
│   ├── request-help.svg
│   ├── offer-help.svg
│   ├── earn-points.svg
│   └── redeem-rewards.svg
└── general/
    ├── success.svg
    ├── error.svg
    └── loading.svg

Photography ​

Photography Style Guide ​

Subject Matter:

  • Real people in authentic situations
  • Diverse age groups, ethnicities, abilities
  • Community and neighborly interactions
  • Everyday tasks and helpfulness
  • Warm, genuine moments

Technical Specifications:

  • Natural lighting preferred
  • Warm color temperature
  • Slight saturation boost (+5-10%)
  • Focus on subjects, subtle background blur acceptable
  • High resolution: Minimum 2000px on longest edge

Post-Processing:

  • Subtle warm filter
  • Increased brightness (5-10%)
  • Slight contrast increase
  • Maintain natural skin tones
  • No heavy filters or effects

Don't Use:

  • Overly staged or posed shots
  • Generic stock photo "feel"
  • Corporate or formal settings
  • Dark or moody lighting
  • Heavy editing or filters

Photography Collection ​

brand/assets/photography/
├── hero-images/
│   └── community-helping.jpg
├── features/
│   ├── task-completion.jpg
│   ├── neighbor-conversation.jpg
│   └── mobile-app-usage.jpg
└── people/
    ├── diverse-neighbors-01.jpg
    ├── diverse-neighbors-02.jpg
    └── diverse-neighbors-03.jpg

Marketing Templates ​

Social Media Templates ​

Profile Images:

  • Logo symbol on Good Deeds Green background
  • Square format: 1024x1024px
  • Use for: Facebook, Twitter, Instagram, LinkedIn profile images

Cover/Banner Images:

  • Dimensions vary by platform:
    • Facebook: 820x312px
    • Twitter: 1500x500px
    • LinkedIn: 1584x396px
  • Full horizontal logo on photography or solid color
  • Maintain logo clear space

Post Templates:

  • Instagram Post: 1080x1080px (square)
  • Instagram Story: 1080x1920px (9:16)
  • Facebook Post: 1200x630px
  • Twitter Post: 1200x675px

Design Guidelines:

  • Use brand colors
  • Include logo (not required in every post)
  • Use brand fonts (Poppins for headlines, Inter for body)
  • Maintain consistent visual style

Business Cards:

  • Standard: 3.5" x 2" (89mm x 51mm)
  • Logo on front
  • Contact info with brand colors
  • 300 DPI, CMYK color mode

Letterhead:

  • Letter size: 8.5" x 11" (US) or A4 (210mm x 297mm)
  • Logo in header
  • Brand colors for accents
  • 300 DPI, CMYK color mode

Flyers/Posters:

  • Various sizes available
  • Use brand guidelines for layout
  • Include logo and brand colors
  • High-quality imagery or illustrations

Design Asset Creation Guidelines ​

When creating new brand assets:

  1. Start with brand guidelines - Review color, typography, and design principles
  2. Use design tokens - Reference the design system for exact values
  3. Maintain consistency - Match existing visual style
  4. Test accessibility - Ensure proper contrast and readability
  5. Export multiple formats - Provide SVG, PNG, and source files
  6. Document usage - Add notes about when/how to use the asset
  7. Version control - Keep track of asset versions and updates

Asset Request Process ​

To request new brand assets or modifications:

  1. Check existing assets first
  2. Submit request to Design Team
  3. Provide context and usage requirements
  4. Review initial concepts
  5. Approve final assets
  6. Receive files in appropriate formats

Support ​

For questions about visual assets:

  • Design Team: design@gooddeeds.example
  • Brand Guidelines: ./guidelines.md
  • Design System: ./design-system.md

Note: This document describes the specifications for visual assets. Actual graphic files should be created by professional designers using industry-standard tools.

Good Deeds - Nachbarschaftshilfe-App

Copyright © 2026