Good Deeds

Appearance

Good Deeds Brand & Design System ​

Welcome to the Good Deeds brand and design system documentation. This directory contains all the resources needed to maintain consistent, high-quality branding across all Good Deeds touchpoints.

📁 Directory Structure ​

brand/
├── README.md                          # This file
├── guidelines/
│   └── BRAND_GUIDELINES.md           # Complete brand guidelines
├── design-system/
│   ├── DESIGN_SYSTEM.md              # Technical design system documentation
│   ├── tokens.ts                     # Core design tokens (spacing, shadows, etc.)
│   ├── colors/
│   │   └── tokens.ts                 # Color tokens
│   ├── typography/
│   │   └── tokens.ts                 # Typography tokens
│   └── components/                   # Component specifications (to be added)
└── assets/
    ├── VISUAL_ASSETS.md              # Visual asset specifications
    ├── logos/                         # Logo files (to be created)
    ├── icons/                         # Icon library (to be created)
    └── illustrations/                 # Illustration files (to be created)

🎨 Quick Start ​

For Designers ​

  1. Read the Brand Guidelines - Start with ./guidelines.md for comprehensive brand information including:

    • Brand story, mission, and values
    • Logo usage and specifications
    • Color palette
    • Typography
    • Visual elements and photography style
    • Voice and tone

  2. Review Visual Asset Specs - Check ./assets.md for detailed specifications on:

    • Logo design and variations
    • Icon style guide
    • Illustration guidelines
    • Photography standards

  3. Create New Assets - Follow the guidelines and specifications when creating new brand assets

For Developers ​

  1. Import Design Tokens - Use the design system tokens in your code:
typescript
import { colors, typography, spacing } from '@/brand/design-system/tokens';

// Use in your components
const styles = {
  backgroundColor: colors.primary.main,
  fontSize: typography.fontSize.base,
  padding: spacing[4],
};

  1. Read the Design System - Check ./design-system.md for:

    • Complete token reference
    • Component specifications
    • Implementation guidelines
    • Platform-specific considerations
    • Accessibility requirements

  2. Follow Implementation Checklist - Ensure all new components meet design, accessibility, and platform requirements

For Product Managers & Stakeholders ​

  1. Understand the Brand - Read the brand story, mission, values, and personality in the Brand Guidelines

  2. Review Voice & Tone - Check the communication guidelines to maintain consistent messaging

  3. Reference Quick Guide - Use the quick reference sections for at-a-glance brand information

📚 Key Documents ​

Brand Guidelines ​

Complete brand identity documentation including:

  • Brand story, mission, vision, and values
  • Visual identity (logo, colors, typography)
  • Design principles
  • Voice and tone
  • Application guidelines
  • Accessibility standards

Best for: Designers, marketers, content creators, external partners

Design System ​

Technical implementation guide including:

  • Design tokens (colors, typography, spacing, etc.)
  • Component library specifications
  • Layout patterns
  • Platform-specific considerations
  • Accessibility implementation
  • Code examples

Best for: Developers, designers, engineers

Visual Assets ​

Specifications for brand visual elements:

  • Logo design and usage
  • Icon style guide
  • Illustration guidelines
  • Photography standards
  • Marketing templates

Best for: Designers, creative teams, marketing

🎯 Brand Overview ​

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 - Neighbors and local connections at the heart
  2. Trustworthy - Safe, reliable experiences people can depend on
  3. Joyful - Celebrating every good deed
  4. Accessible - Easy for anyone to give and receive help
  5. Authentic - Genuine and down-to-earth

Brand Personality ​

Friendly · Optimistic · Practical · Inclusive · Genuine

🎨 Design Quick Reference ​

Colors ​

Primary Colors:

  • Good Deeds Green: #4CAF50
  • Community Blue: #2196F3

Accent Colors:

  • Warmth Orange: #FF9800
  • Sunshine Yellow: #FFC107
  • Joy Purple: #9C27B0

Text Colors:

  • Primary Text: #212121
  • Secondary Text: #757575

Typography ​

Fonts:

  • Display/Headlines: Poppins (Bold, Semi-Bold)
  • Body/UI: Inter (Regular, Medium, Semi-Bold)

Font Sizes:

  • Hero: 48px (3rem)
  • H1: 36px (2.25rem)
  • H2: 28px (1.75rem)
  • Body: 16px (1rem)
  • Small: 14px (0.875rem)

Spacing ​

Based on 4px grid:

  • Small: 8px
  • Medium: 16px
  • Large: 24px
  • Extra Large: 32px

✅ Brand Checklist ​

When creating any Good Deeds branded material, ensure:

  • [ ] Uses approved logo files and variations
  • [ ] Follows color palette (no off-brand colors)
  • [ ] Uses correct fonts (Poppins for headlines, Inter for body)
  • [ ] Maintains accessibility standards (WCAG AA minimum)
  • [ ] Follows voice and tone guidelines
  • [ ] Respects minimum spacing and clear space
  • [ ] Has been reviewed by design/brand team (for major materials)

🔧 Implementation ​

Installing Fonts ​

Google Fonts (Web):

html
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@600;700;800&display=swap" rel="stylesheet">

React Native:

bash
npx expo install expo-font @expo-google-fonts/inter @expo-google-fonts/poppins

Using Design Tokens ​

TypeScript/JavaScript:

typescript
import { colors, typography, spacing } from './brand/design-system/tokens';

const styles = {
  color: colors.text.primary,
  fontFamily: typography.fontFamily.primary,
  fontSize: typography.fontSize.base,
  padding: spacing[4],
};

CSS:

css
@import './brand/design-system/colors.css';

.button-primary {
  background-color: var(--color-primary);
  color: var(--color-primary-contrast);
  font-family: var(--font-primary);
  padding: var(--spacing-4);
}

📋 Common Tasks ​

I need to... ​

...use the logo
→ Check Brand Guidelines - Logo System
→ Get files from /brand/assets/logos/ (when created)

...choose a color
→ Reference Design Tokens - Colors
→ Ensure proper contrast (WCAG AA)

...write UI copy
→ Follow Brand Guidelines - Voice & Tone
→ Check UI copy examples

...build a component
→ Reference Design System - Components
→ Use design tokens
→ Follow accessibility checklist

...create a marketing asset
→ Follow Brand Guidelines
→ Check Visual Assets - Marketing Templates

...add an icon
→ Use Material Design Icons (Rounded)
→ Follow Visual Assets - Icon Style

🎓 Learning Resources ​

Internal Resources ​

  • Brand Guidelines (this repo)
  • Design System Documentation (this repo)
  • Figma Design Files (link when available)
  • Component Storybook (link when available)

External References ​

🤝 Contributing ​

Suggesting Changes ​

  1. Review existing guidelines thoroughly
  2. Submit proposal with rationale
  3. Discuss with design/brand team
  4. Update documentation if approved
  5. Communicate changes to all teams

Adding New Components ​

  1. Design component following brand guidelines
  2. Document specifications in design system
  3. Create design tokens if needed
  4. Build and test component
  5. Add to component library
  6. Update documentation

Reporting Issues ​

Found an inconsistency or issue?

  • Check if it's already documented
  • Submit issue with details and screenshots
  • Tag design/brand team

📞 Support ​

Questions? ​

Brand Guidelines: Contact Design Team
Implementation: Contact Engineering Team
Assets: Contact Creative Team

Resources ​

  • Design System: /brand/design-system/
  • Brand Guidelines: /brand/guidelines/
  • Visual Assets: /brand/assets/

📝 Version History ​

Version 1.0 - June 2026

  • Initial brand guidelines release
  • Design system v1.0
  • Core design tokens
  • Visual asset specifications

🚀 Next Steps ​

For New Team Members ​

  1. Read Brand Guidelines cover to cover
  2. Review Design System documentation
  3. Import and explore design tokens
  4. Join design system sync meetings

For Current Team ​

  1. Audit existing materials for brand compliance
  2. Implement design tokens across codebase
  3. Create actual visual assets (logos, icons, illustrations)
  4. Build component library in Storybook
  5. Set up brand asset management system

This brand and design system is a living resource. It will evolve as Good Deeds grows while maintaining the core values and personality that make our brand unique.

Last Updated: June 2026
Maintained By: Good Deeds Design Team
Version: 1.0.0

Good Deeds - Nachbarschaftshilfe-App

Copyright © 2026