Good Deeds Brand - Quick Reference

One-page reference for the most commonly needed brand information.

🎨 Colors

Primary

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

Accent

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

Text

Primary Text:      #212121
Secondary Text:    #757575
Disabled:          #9E9E9E

Semantic

Success:           #4CAF50
Warning:           #FF9800
Error:             #F44336
Info:              #2196F3

Neutrals

White:             #FFFFFF
Light Gray:        #F5F5F5
Border Gray:       #E0E0E0

✍️ Typography

Fonts

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

Sizes (rem / px)

Hero:       3rem     / 48px
H1:         2.25rem  / 36px
H2:         1.75rem  / 28px
H3:         1.5rem   / 24px
H4:         1.25rem  / 20px
Body:       1rem     / 16px
Small:      0.875rem / 14px
Caption:    0.75rem  / 12px

Weights

Regular:    400
Medium:     500
Semi-Bold:  600
Bold:       700
Extra-Bold: 800

📏 Spacing

Based on 4px grid:

xs:     4px    (0.25rem)
sm:     8px    (0.5rem)
md:     16px   (1rem)
lg:     24px   (1.5rem)
xl:     32px   (2rem)
2xl:    48px   (3rem)

🔲 Border Radius

Small:      4px
Medium:     8px
Large:      16px
Extra:      24px
Full:       9999px (pill shape)

🎯 Logo Usage

Variations

• Full Logo: Symbol + wordmark (primary)
• Symbol Only: App icon, small spaces
• Wordmark Only: When symbol shown separately

Colors

• Primary: Green on light backgrounds
• Inverse: White on dark/green backgrounds
• Monochrome: Black or single brand color

Clear Space

Maintain 0.5x logo height on all sides

Minimum Sizes

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

📱 Component Quick Specs

Buttons

Height:         48px (44px minimum touch target)
Padding:        12px 24px
Border Radius:  4px
Font:           Inter Semi-Bold, 16px

Inputs

Height:         48px
Padding:        12px 16px
Border:         1px solid #E0E0E0
Focus Border:   2px solid #4CAF50
Border Radius:  4px

Cards

Background:     #FFFFFF
Border Radius:  8px
Padding:        16px
Shadow:         0 1px 3px rgba(0,0,0,0.12)

Chips/Badges

Padding:        4px 12px
Border Radius:  16px (fully rounded)
Font Size:      12px

🌈 Shadows (Elevation)

Small:   0 1px 3px rgba(0,0,0,0.12)
Medium:  0 3px 6px rgba(0,0,0,0.16)
Large:   0 10px 20px rgba(0,0,0,0.19)

⚡ Animations

Durations

Fast:    200ms
Normal:  300ms
Slow:    500ms

Easing

Ease Out:  cubic-bezier(0, 0, 0.2, 1)
Ease In:   cubic-bezier(0.4, 0, 1, 1)
Bounce:    cubic-bezier(0.68, -0.55, 0.265, 1.55)

📱 Breakpoints

Mobile:     0px
Tablet:     640px
Desktop:    1024px
Wide:       1440px

♿ Accessibility

Contrast Ratios (WCAG AA)

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

Touch Targets

Minimum:        44x44px
Comfortable:    48x48px

🎤 Voice & Tone

Characteristics

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

❌ Corporate or formal
❌ Pushy or aggressive
❌ Cutesy or childish
❌ Technical or complex

Examples

Good:

• "Help Now"
• "Find Helpers"
• "Your Good Deeds"
• "Welcome to Good Deeds!"

Avoid:

• "Submit Request"
• "Search"
• "Task History"
• "Please complete the onboarding process"

📋 Brand Checklist

• [ ] Approved logo file used
• [ ] Colors from brand palette
• [ ] Correct fonts (Poppins/Inter)
• [ ] WCAG AA accessible
• [ ] Friendly, clear copy
• [ ] Proper spacing maintained
• [ ] Responsive design
• [ ] Touch targets ≥ 44px

🔗 Full Documentation

• Complete Guidelines: ./guidelines.md
• Design System: ./design-system.md
• Visual Assets: ./assets.md
• Design Tokens: /brand/design-system/tokens.ts

---

For complete brand information, see the full Brand Guidelines and Design System documentation.