Good Deeds

Appearance

Good Deeds Brand Guidelines ​

Version 1.0 | June 2026

Brand Story ​

Good Deeds is more than just a neighborhood help app – it's a movement to reconnect communities and celebrate the power of small acts of kindness. Our platform enables neighbors to support each other with everyday tasks while earning rewards, creating a cycle of generosity that strengthens local communities.

Mission ​

To make neighborhood support accessible, rewarding, and joyful for everyone.

Vision ​

A world where every neighborhood is a strong, connected community built on mutual support and kindness.

Brand Values ​

  1. Community-First - We put neighbors and local connections at the heart of everything we do
  2. Trustworthy - We build safe, reliable experiences that people can depend on
  3. Joyful - We celebrate every good deed and make helping others feel rewarding
  4. Accessible - We make it easy for anyone to give and receive help
  5. Authentic - We stay genuine and down-to-earth in all our communications

Brand Personality ​

  • Friendly - Warm, approachable, like a trusted neighbor
  • Optimistic - Positive, uplifting, believes in the good in people
  • Practical - Straightforward, helpful, solution-oriented
  • Inclusive - Welcoming to all ages, backgrounds, and abilities
  • Genuine - Honest, transparent, no corporate jargon

Visual Identity ​

Logo System ​

The Good Deeds logo combines a simple wordmark with our iconic "helping hands" symbol – two hands coming together, forming a subtle heart shape that represents community care and connection.

Logo Variations:

  • Full Logo - Wordmark + symbol (primary use)
  • Logo Symbol - Symbol only (app icon, small spaces)
  • Wordmark - Text only (when symbol is used separately)

Clear Space:
Maintain minimum clear space of 0.5x the height of the logo on all sides.

Minimum Sizes:

  • Digital: 32px height minimum
  • Print: 12mm height minimum

Logo Usage Guidelines ​

DO:

  • Use the primary color version on light backgrounds
  • Use the white version on dark backgrounds or photography
  • Maintain clear space requirements
  • Use approved color variations only

DON'T:

  • Rotate or distort the logo
  • Change the logo colors outside approved palette
  • Place logo on busy backgrounds without sufficient contrast
  • Add effects (shadows, gradients, outlines) to the logo

Color Palette ​

Our color palette is carefully chosen to convey warmth, trust, and community while maintaining excellent accessibility.

Primary Colors ​

Good Deeds Green - Our signature color

  • HEX: #4CAF50
  • RGB: 76, 175, 80
  • CMYK: 57, 0, 54, 31
  • Pantone: 360 C

Usage: Primary buttons, key UI elements, brand accents

Community Blue - Trust and reliability

  • HEX: #2196F3
  • RGB: 33, 150, 243
  • CMYK: 86, 38, 0, 5
  • Pantone: 2925 C

Usage: Links, secondary actions, informational elements

Secondary Colors ​

Warmth Orange

  • HEX: #FF9800
  • RGB: 255, 152, 0
  • CMYK: 0, 40, 100, 0

Usage: Rewards, achievements, celebratory moments

Sunshine Yellow

  • HEX: #FFC107
  • RGB: 255, 193, 7
  • CMYK: 0, 24, 97, 0

Usage: Highlights, notifications, positive feedback

Joy Purple

  • HEX: #9C27B0
  • RGB: 156, 39, 176
  • CMYK: 11, 78, 0, 31

Usage: Premium features, special events

Neutral Colors ​

Charcoal (Dark Text)

  • HEX: #212121
  • RGB: 33, 33, 33

Slate (Body Text)

  • HEX: #424242
  • RGB: 66, 66, 66

Gray (Secondary Text)

  • HEX: #757575
  • RGB: 117, 117, 117

Light Gray (Borders)

  • HEX: #E0E0E0
  • RGB: 224, 224, 224

Background Gray

  • HEX: #F5F5F5
  • RGB: 245, 245, 245

White

  • HEX: #FFFFFF
  • RGB: 255, 255, 255

Semantic Colors ​

Success Green

  • HEX: #4CAF50 (same as primary)

Warning Amber

  • HEX: #FF9800 (same as warmth orange)

Error Red

  • HEX: #F44336
  • RGB: 244, 67, 54

Info Blue

  • HEX: #2196F3 (same as community blue)

Color Accessibility ​

All color combinations used in the UI must meet WCAG 2.1 Level AA standards:

  • Normal text (< 18pt): Contrast ratio ≥ 4.5:1
  • Large text (≥ 18pt or 14pt bold): Contrast ratio ≥ 3:1
  • UI components: Contrast ratio ≥ 3:1

Typography ​

Our typography system balances friendliness with readability, using modern, accessible typefaces.

Primary Typeface: Inter ​

Inter - A highly legible, versatile sans-serif designed specifically for digital interfaces.

Weights Used:

  • Regular (400) - Body text
  • Medium (500) - Emphasized text
  • Semi-Bold (600) - Subheadings
  • Bold (700) - Headings

Where to Use:

  • UI elements
  • Body copy
  • Mobile applications
  • Web interfaces

Display Typeface: Poppins ​

Poppins - A geometric sans-serif with a friendly, approachable character.

Weights Used:

  • Semi-Bold (600) - Secondary headlines
  • Bold (700) - Primary headlines
  • Extra-Bold (800) - Hero text, marketing materials

Where to Use:

  • Marketing headlines
  • Hero sections
  • Large displays
  • Print materials

Type Scale ​

Hero (Display)
Font: Poppins Extra-Bold
Size: 48px / 3rem
Line Height: 1.1
Letter Spacing: -0.02em

H1 (Heading 1)
Font: Poppins Bold
Size: 36px / 2.25rem
Line Height: 1.2
Letter Spacing: -0.01em

H2 (Heading 2)
Font: Poppins Bold
Size: 28px / 1.75rem
Line Height: 1.3
Letter Spacing: -0.005em

H3 (Heading 3)
Font: Poppins Semi-Bold
Size: 24px / 1.5rem
Line Height: 1.3
Letter Spacing: 0

H4 (Heading 4)
Font: Inter Semi-Bold
Size: 20px / 1.25rem
Line Height: 1.4
Letter Spacing: 0

Body Large
Font: Inter Regular
Size: 18px / 1.125rem
Line Height: 1.6
Letter Spacing: 0

Body (Default)
Font: Inter Regular
Size: 16px / 1rem
Line Height: 1.6
Letter Spacing: 0

Body Small
Font: Inter Regular
Size: 14px / 0.875rem
Line Height: 1.5
Letter Spacing: 0

Caption
Font: Inter Medium
Size: 12px / 0.75rem
Line Height: 1.4
Letter Spacing: 0.01em

Button Text
Font: Inter Semi-Bold
Size: 16px / 1rem
Line Height: 1.5
Letter Spacing: 0.02em
Text Transform: None

Typography Best Practices ​

Line Length:

  • Optimal: 50-75 characters per line
  • Maximum: 90 characters per line

Paragraph Spacing:

  • 1.5em between paragraphs
  • No indent on first line

Text Alignment:

  • Left-aligned for body text (LTR languages)
  • Centered for short headlines and UI elements only
  • Never justify text in digital interfaces

Visual Elements ​

Iconography ​

Style:

  • Rounded corners (2px radius)
  • 2px stroke weight
  • Simple, friendly forms
  • Consistent visual weight

Icon Set:

  • Material Design Icons (rounded variant)
  • Custom icons for app-specific features

Colors:

  • Primary: Good Deeds Green (#4CAF50)
  • Secondary: Charcoal (#212121) at 87% opacity
  • Disabled: Gray (#757575) at 38% opacity

Illustrations ​

Style Characteristics:

  • Warm, friendly, diverse people
  • Simple geometric shapes
  • Flat design with subtle depth
  • Limited color palette from brand colors
  • Inclusive representation of all ages and backgrounds

Usage:

  • Onboarding flows
  • Empty states
  • Feature explanations
  • Marketing materials

Photography ​

Style Guide:

  • Natural, candid moments
  • Diverse, real people
  • Well-lit, warm tones
  • Community and connection focused
  • Authentic, not staged

Treatment:

  • Subtle warm filter
  • Increased brightness (5-10%)
  • Slight saturation boost
  • Sharp focus on subjects

Borders and Shapes ​

Border Radius:

  • Small: 4px (buttons, inputs, chips)
  • Medium: 8px (cards, containers)
  • Large: 16px (modals, major containers)
  • Extra Large: 24px (hero cards)

Shadows:

css
/* Elevation 1 - Subtle */
box-shadow:
  0 1px 3px rgba(0, 0, 0, 0.12),
  0 1px 2px rgba(0, 0, 0, 0.24);

/* Elevation 2 - Medium */
box-shadow:
  0 3px 6px rgba(0, 0, 0, 0.16),
  0 3px 6px rgba(0, 0, 0, 0.23);

/* Elevation 3 - Prominent */
box-shadow:
  0 10px 20px rgba(0, 0, 0, 0.19),
  0 6px 6px rgba(0, 0, 0, 0.23);

/* Elevation 4 - Modal */
box-shadow:
  0 14px 28px rgba(0, 0, 0, 0.25),
  0 10px 10px rgba(0, 0, 0, 0.22);

Design Principles ​

1. Clarity First ​

Every element should have a clear purpose. Remove visual noise and guide users with intention.

2. Accessible by Default ​

Design for everyone from the start. Meet WCAG AA standards minimum, strive for AAA where possible.

3. Mobile-First Thinking ​

Design for mobile screens first, then enhance for larger displays.

4. Delightful Interactions ​

Add subtle animations and feedback that make the experience feel responsive and joyful.

5. Consistent Patterns ​

Use established patterns throughout the app to create familiarity and reduce cognitive load.

6. Progressive Disclosure ​

Show only what's needed when it's needed. Complexity should be layered, not front-loaded.

Application Guidelines ​

Mobile App ​

Platform-Specific Considerations:

iOS:

  • Follow iOS Human Interface Guidelines
  • Use native components where appropriate
  • Respect iOS gestures and patterns
  • Safe area insets for notched devices

Android:

  • Follow Material Design 3 guidelines
  • Use native Android components
  • Respect system navigation patterns
  • Handle different screen densities

Splash Screen:

  • White background
  • Logo symbol centered
  • Fade-in animation (300ms)

App Icon:

  • Logo symbol on Good Deeds Green background
  • White symbol with subtle shadow for depth
  • Rounded corners per platform standards

Web Application ​

Responsive Breakpoints:

css
Mobile: < 640px
Tablet: 640px - 1024px
Desktop: > 1024px
Wide: > 1440px

Loading States:

  • Skeleton screens for content loading
  • Spinner for actions/processes
  • Progress bars for multi-step processes

Error States:

  • Friendly illustrations
  • Clear, actionable error messages
  • Suggest next steps

Empty States:

  • Welcoming illustrations
  • Encouraging copy
  • Clear call-to-action

Marketing Materials ​

Print Guidelines:

  • Use CMYK values from color palette
  • Minimum 300 DPI for images
  • Bleed: 3mm on all sides
  • Safe area: 5mm from trim

Digital Marketing:

  • Social media profile images: Logo symbol on green
  • Cover/banner images: Full logo on photography
  • Ad formats: Follow platform specifications

Voice & Tone ​

Writing Principles ​

  1. Be Conversational - Write like you're talking to a friend
  2. Be Positive - Focus on benefits and possibilities
  3. Be Clear - Use simple language, avoid jargon
  4. Be Helpful - Guide users, don't confuse them
  5. Be Authentic - Sound human, not corporate

Voice Characteristics ​

Good Deeds sounds:

  • ✅ Friendly and warm
  • ✅ Encouraging and supportive
  • ✅ Clear and straightforward
  • ✅ Genuine and honest
  • ✅ Inclusive and welcoming

Good Deeds does not sound:

  • ❌ Corporate or formal
  • ❌ Pushy or aggressive
  • ❌ Cutesy or childish
  • ❌ Technical or complex
  • ❌ Exclusive or judgmental

Tone Guidelines by Context ​

Onboarding:
Welcoming, encouraging, clear

"Welcome to Good Deeds! Let's get your neighborhood helping journey started."

Task Request:
Respectful, clear, appreciative

"Need help installing a shelf? Post your request and nearby neighbors can lend a hand!"

Success/Completion:
Celebratory, warm, grateful

"Amazing! You've helped 10 neighbors this month. Your community is stronger because of you."

Error/Problem:
Empathetic, helpful, solutions-focused

"Oops! Something went wrong. Let's try that again, or contact support if you need help."

Notifications:
Brief, clear, actionable

"Maria needs help tomorrow. Can you help?"

UI Copy Examples ​

Buttons:

  • "Help Now" (not "Submit Request")
  • "Find Helpers" (not "Search")
  • "Accept Task" (not "OK")
  • "View My Points" (not "See Rewards Balance")

Labels:

  • "Your Good Deeds" (not "Task History")
  • "Neighbors Nearby" (not "Available Users")
  • "Points Earned" (not "Reward Points Balance")

Empty States:

  • "No tasks yet! Ready to help your first neighbor?"
  • "You haven't requested help yet. What do you need?"

Brand Applications ​

UI Components ​

Buttons:

  • Primary: Green background, white text
  • Secondary: White background, green border and text
  • Tertiary: Transparent background, green text
  • Minimum touch target: 44x44px
  • Border radius: 4px
  • Padding: 12px 24px

Form Inputs:

  • Border: 1px solid Light Gray
  • Focus: 2px solid Good Deeds Green
  • Error: 2px solid Error Red
  • Border radius: 4px
  • Height: 48px minimum
  • Label above input, helper text below

Cards:

  • Background: White
  • Border radius: 8px
  • Shadow: Elevation 1
  • Padding: 16px
  • Hover: Elevation 2

Navigation:

  • Bottom navigation for mobile (primary actions)
  • Top app bar with logo and profile
  • Clean, minimal design
  • Active state: Good Deeds Green

Badges/Chips:

  • Border radius: 16px (fully rounded)
  • Padding: 4px 12px
  • Small text (12px)
  • Background: Light variants of brand colors

Rewards & Gamification ​

Point Display:

  • Large, prominent numbers
  • Warmth Orange color
  • Coin/star icon
  • Celebratory animations when earning

Progress Bars:

  • Good Deeds Green fill
  • Light Gray background
  • Rounded caps
  • Height: 8px

Achievement Badges:

  • Circular design
  • Colorful, celebratory
  • Clear icon + name
  • Silver/Gold/Platinum tiers

Leaderboards:

  • Friendly, not competitive
  • Show top helpers, not rankings
  • Emphasize community achievement
  • Use profile pictures and names

Messaging & Communication ​

Chat Interface:

  • Clean, modern design
  • User messages: Community Blue
  • Other messages: White with border
  • Timestamps: Small, gray
  • Status indicators: Simple, subtle

Notifications:

  • Clear hierarchy: title + preview
  • Appropriate icons
  • Good Deeds Green for positive actions
  • Respect platform notification styles

Accessibility Standards ​

Color Contrast ​

All text must meet WCAG 2.1 Level AA:

  • Normal text: 4.5:1 minimum
  • Large text: 3.1 minimum
  • UI components: 3:1 minimum

Tested Combinations:

  • ✅ Good Deeds Green on White: 4.51:1
  • ✅ Charcoal on White: 16.1:1
  • ✅ White on Good Deeds Green: 4.51:1
  • ✅ Community Blue on White: 4.53:1

Screen Readers ​

  • Proper semantic HTML
  • ARIA labels where needed
  • Logical heading hierarchy
  • Descriptive link text
  • Alt text for all images

Keyboard Navigation ​

  • Visible focus indicators
  • Logical tab order
  • Skip links where appropriate
  • No keyboard traps

Touch Targets ​

  • Minimum 44x44px for all interactive elements
  • Adequate spacing between touch targets
  • Clear visual feedback on tap

Motion ​

  • Respect prefers-reduced-motion
  • Provide alternatives to motion-based content
  • Keep animations subtle and purposeful
  • Allow users to pause/stop animations

Brand Protection ​

Trademark Usage ​

"Good Deeds" is a trademark of [Company Name]. When referencing:

  • Use ™ symbol on first use in formal documents
  • Always capitalize: "Good Deeds" not "good deeds"
  • Don't use as a verb or plural

Logo Protection ​

  • Never modify the logo
  • Don't use old logo versions
  • Download logos only from official brand portal
  • Report unauthorized logo usage

Partnerships ​

When partnering brands appear with Good Deeds:

  • Maintain clear visual separation
  • Good Deeds logo should not be smaller than partner logos
  • Follow partner brand guidelines
  • Get approval for co-branded materials

File Formats & Delivery ​

Logo Files ​

Vector:

  • .SVG (web)
  • .EPS (print)
  • .PDF (universal)

Raster:

  • .PNG with transparency (digital, minimum 2000px wide)
  • .JPG (photography backgrounds, 300 DPI)

Color Profiles ​

Digital:

  • sRGB color space
  • RGB values

Print:

  • CMYK color space
  • Coated or uncoated stock specifications
  • Pantone references provided

Implementation Resources ​

Design System Repository ​

Location: /brand/design-system/

Includes:

  • Component library
  • Code snippets
  • Design tokens
  • Figma/Sketch files
  • Icon library

Support & Questions ​

For brand guideline questions:

  • Internal: [Brand Team Contact]
  • External Partners: [Partnership Contact]

Version History ​

  • v1.0 - June 2026: Initial brand guidelines release

Quick Reference ​

Essential Do's and Don'ts ​

DO:
✅ Use approved logo files
✅ Maintain color consistency
✅ Follow accessibility standards
✅ Test on real devices
✅ Keep copy friendly and clear

DON'T:
❌ Recreate the logo
❌ Use off-brand colors
❌ Ignore accessibility
❌ Use generic stock photos
❌ Write in corporate jargon

Color Quick Reference ​

Primary Green: #4CAF50
Primary Blue: #2196F3
Warmth Orange: #FF9800
Charcoal Text: #212121
White: #FFFFFF

Font Quick Reference ​

Headlines: Poppins Bold
Body Text: Inter Regular
Buttons: Inter Semi-Bold

These guidelines are a living document and will be updated as the Good Deeds brand evolves. Always use the latest version available.

Good Deeds - Nachbarschaftshilfe-App

Copyright © 2026