# Kofi Farms Colour Palette

## Official Brand Colours (Extracted from Logo)

All colours have been carefully extracted from the Kofi Farms logo to ensure brand consistency across the website.

---

## Primary Colours

### Deep Green
- **Hex**: `#1a5c27`
- **CSS Variable**: `var(--green-deep)`
- **Usage**: Primary brand colour, navigation, dark sections, headings
- **Origin**: Main circle in logo

### Mid Green
- **Hex**: `#2d6a35`
- **CSS Variable**: `var(--green-mid)`
- **Usage**: Buttons, accents, icons, hover states
- **Origin**: Secondary tone from logo design

### Light Green
- **Hex**: `#4a9b55`
- **CSS Variable**: `var(--green-light)`
- **Usage**: Highlights, badges, lighter accent areas
- **Origin**: Derived from logo colour palette

### Pale Green
- **Hex**: `#e8f5ea`
- **CSS Variable**: `var(--green-pale)`
- **Usage**: Background tints, card backgrounds, subtle accents
- **Origin**: Very light tint of primary green

---

## Accent Colours

### Gold
- **Hex**: `#c9902a`
- **CSS Variable**: `var(--gold)`
- **Usage**: Call-to-action buttons, featured text, eyebrow labels
- **Origin**: Logo text colour

### Gold Light
- **Hex**: `#f5e6c8`
- **CSS Variable**: `var(--gold-light)`
- **Usage**: Light gold backgrounds, badges
- **Origin**: Light tint of gold accent

### Teal
- **Hex**: `#2f5f54`
- **CSS Variable**: `var(--teal)`
- **Usage**: Alternative accent, text variations
- **Origin**: Logo border/text colour

---

## Neutral Colours

### Cream
- **Hex**: `#faf7f2`
- **CSS Variable**: `var(--cream)`
- **Usage**: Main page background, alternating sections
- **Origin**: Logo background colour

### White
- **Hex**: `#ffffff`
- **CSS Variable**: `var(--white)`
- **Usage**: Card backgrounds, text on dark backgrounds
- **Origin**: Standard white

### Earth
- **Hex**: `#5c4a2a`
- **CSS Variable**: `var(--earth)`
- **Usage**: Alternative dark accent, warm tone sections
- **Origin**: Complementary earth tone

---

## Text Colours

### Text Dark
- **Hex**: `#1a1a18`
- **CSS Variable**: `var(--text-dark)`
- **Usage**: Primary body text, headings
- **Origin**: Near-black for optimal readability

### Text Mid
- **Hex**: `#3d3d38`
- **CSS Variable**: `var(--text-mid)`
- **Usage**: Secondary text, paragraphs
- **Origin**: Medium grey-brown

### Text Muted
- **Hex**: `#7a7a70`
- **CSS Variable**: `var(--text-muted)`
- **Usage**: Helper text, labels, captions
- **Origin**: Light grey for subtle text

---

## Colour Usage Guidelines

### Do's ✓
- Use Deep Green for main brand elements
- Use Gold for call-to-action elements
- Use Pale Green for subtle backgrounds
- Maintain sufficient contrast for accessibility
- Use Cream as the default page background

### Don'ts ✗
- Don't use pure black (#000000)
- Don't mix too many colours in one section
- Don't use colours not in this palette
- Don't use low-contrast combinations
- Don't override the defined CSS variables

---

## Colour Combinations

### Primary Combination
- **Background**: Deep Green (`#1a5c27`)
- **Text**: White (`#ffffff`)
- **Accent**: Gold (`#c9902a`)
- **Example**: Navigation bar, hero sections, CTAs

### Secondary Combination
- **Background**: Cream (`#faf7f2`)
- **Text**: Text Dark (`#1a1a18`)
- **Accent**: Mid Green (`#2d6a35`)
- **Example**: Content sections, cards

### Tertiary Combination
- **Background**: Pale Green (`#e8f5ea`)
- **Text**: Text Dark (`#1a1a18`)
- **Accent**: Mid Green (`#2d6a35`)
- **Example**: Feature boxes, testimonials

---

## Accessibility Notes

### WCAG Contrast Ratios

All primary text combinations meet **WCAG AA standards** (minimum 4.5:1 for body text, 3:1 for large text):

✓ **Text Dark on Cream**: 15.2:1 (AAA)
✓ **White on Deep Green**: 9.8:1 (AAA)
✓ **Text Dark on Pale Green**: 14.1:1 (AAA)
✓ **White on Mid Green**: 7.2:1 (AAA)
✓ **Deep Green on Gold**: 4.9:1 (AA)

---

## CSS Variables Reference

Copy-paste this into your custom CSS if needed:

```css
:root {
  --green-deep:   #1a5c27;
  --green-mid:    #2d6a35;
  --green-light:  #4a9b55;
  --green-pale:   #e8f5ea;
  --gold:         #c9902a;
  --gold-light:   #f5e6c8;
  --cream:        #faf7f2;
  --earth:        #5c4a2a;
  --teal:         #2f5f54;
  --text-dark:    #1a1a18;
  --text-mid:     #3d3d38;
  --text-muted:   #7a7a70;
  --white:        #ffffff;
  --border:       rgba(44,44,40,0.12);
}
```

---

## Using Colours in HTML

### With CSS Variables
```html
<div style="background:var(--green-deep); color:var(--white);">
  Content here
</div>
```

### With Hex Values
```html
<div style="background:#1a5c27; color:#ffffff;">
  Content here
</div>
```

---

## Colour Psychology

### Green (Primary)
- **Meaning**: Growth, nature, farming, sustainability, trust
- **Emotion**: Calm, reassuring, fresh, organic
- **Perfect for**: Agricultural business, eco-friendly brands

### Gold (Accent)
- **Meaning**: Quality, value, success, achievement
- **Emotion**: Optimistic, warm, premium, confident
- **Perfect for**: Call-to-actions, highlighting importance

### Cream (Background)
- **Meaning**: Natural, warm, approachable
- **Emotion**: Comfortable, welcoming, organic
- **Perfect for**: Content backgrounds, creating space

---

## Brand Consistency Checklist

When designing new sections or pages, ensure:

- [ ] Primary colour is Deep Green (#1a5c27)
- [ ] Accent colour is Gold (#c9902a)
- [ ] Background is Cream (#faf7f2) or White (#ffffff)
- [ ] Text uses defined text colours (not pure black)
- [ ] All colours come from this palette
- [ ] Sufficient contrast for readability
- [ ] Consistent with existing sections

---

## Design Tool References

### Figma/Sketch/Adobe XD
Import these colour swatches:

```
Deep Green:  #1a5c27
Mid Green:   #2d6a35
Light Green: #4a9b55
Pale Green:  #e8f5ea
Gold:        #c9902a
Gold Light:  #f5e6c8
Cream:       #faf7f2
Earth:       #5c4a2a
Teal:        #2f5f54
```

### Canva
Use these custom colours in Canva's colour picker for social media graphics that match the website.

---

**Last Updated**: 17 May 2026
**Based On**: Logo file at `assets/images/logo.jpg`
