# Lemon Grooves Brand Color Palette

## Brand Color Philosophy

The Lemon Grooves color palette reflects the brand's core values: fresh, sunny, energetic, warm, premium, and community-driven. The palette combines bold primary colors with warm earth tones to create a vibrant yet sophisticated visual identity that evokes healthy food, cultural experiences, and regenerative living.

---

## Core Brand Colors

### Primary: Lemon Yellow
**Hex:** `#FFEB3B`  
**RGB:** `255, 235, 59`  
**OKLCH:** `oklch(0.96 0.04 74)`  
**Usage:** Buttons, CTAs, highlights, badges, key visual accents, energy indicators  
**Mood:** Fresh, energetic, optimistic, summery, approachable

### Secondary: Black
**Hex:** `#1A1A1A`  
**RGB:** `26, 26, 26`  
**OKLCH:** `oklch(0.15 0.01 0)`  
**Usage:** Headlines, primary text, strong visual structure, premium contrast, rhythm  
**Mood:** Bold, premium, sophisticated, grounded, authoritative

### Tertiary: White
**Hex:** `#FFFFFF`  
**RGB:** `255, 255, 255`  
**OKLCH:** `oklch(1 0 0)`  
**Usage:** Backgrounds, clean spaces, text on dark backgrounds, clarity  
**Mood:** Clean, modern, open, minimal, fresh

---

## Accent Colors

### Terracotta
**Hex:** `#C87137`  
**RGB:** `200, 113, 55`  
**Usage:** Overlays, warm accents, hospitality elements, earth-toned highlights, section backgrounds  
**Mood:** Warm, earthy, organic, welcoming, natural

### Mission Red-Orange
**Hex:** `#E35336`  
**RGB:** `227, 83, 54`  
**Usage:** Alternative highlights, ceremonial moments, passion indicators, warmth accents  
**Mood:** Warm, passionate, energetic, fire-like, alive

---

## Neutral Palette

### Light Gray (Background)
**Hex:** `#FAFAFA`  
**OKLCH:** `oklch(0.98 0.002 0)`  
**Usage:** Subtle backgrounds, input fields, card backgrounds  
**Mood:** Clean, minimal, accessible

### Medium Gray (Borders)
**Hex:** `#E5E5E5`  
**OKLCH:** `oklch(0.9 0.005 0)`  
**Usage:** Borders, dividers, subtle separators  
**Mood:** Refined, structured

### Dark Gray (Secondary Text)
**Hex:** `#666666`  
**OKLCH:** `oklch(0.45 0.01 0)`  
**Usage:** Secondary text, muted information, disabled states  
**Mood:** Subtle, supportive

### Light Lemon (Backgrounds & Patterns)
**Hex:** `#F5F0DB` (approx.)  
**OKLCH:** `oklch(0.96 0.04 74)` (light lemon tint)  
**Usage:** Striped patterns, light backgrounds, subtle accents  
**Mood:** Soft, warm, inviting

---

## Extended Palette

### Supporting Warm Tones
- **Warm Gold:** `#FFD700` - Premium warmth, celebration
- **Soft Peach:** `#FFDAB9` - Gentle warmth, hospitality
- **Deep Olive:** `#556B2F` - Natural, grounded, regenerative

### Supporting Cool Tones (Minimal Use)
- **Soft Blue:** `#87CEEB` - Calm, trust (use sparingly)
- **Fresh Mint:** `#98FF98` - Freshness, health (use sparingly)

---

## Color Usage Guidelines

### Headers & Typography
- **Headline on White:** Black (`#1A1A1A`) text for maximum readability
- **Headline on Dark:** White (`#FFFFFF`) or Lemon Yellow (`#FFEB3B`) for contrast
- **Accent Words:** Lemon Yellow highlights within black text for emphasis

### Interactive Elements
- **Primary Buttons:** Lemon Yellow background with black text
- **Secondary Buttons:** Black background with white/yellow text
- **Hover States:** Reduce opacity or slightly darken colors

### Backgrounds
- **Premium/Hero Sections:** Black or dark overlays with white/yellow text
- **Striped Patterns:** Alternating white and light lemon
- **Card Backgrounds:** White or light gray with subtle borders
- **Accent Sections:** Terracotta or mission red-orange for warm emphasis

### Overlays & Effects
- **Dark Overlay (Homepage):** `bg-foreground/60` (60% opacity black)
- **Medium Overlay:** `bg-foreground/40` (40% opacity)
- **Light Overlay:** `bg-primary/5` (5% opacity yellow) for subtle warmth

### Form Elements
- **Input Fields:** White background with light gray borders
- **Focus States:** Lemon yellow ring or border
- **Success Indicators:** Terracotta or warm gold
- **Error States:** Warm red-orange tones

---

## Accessibility Considerations

### Contrast Ratios
- **Yellow on White:** Use only for decorative elements; ensure text contrast meets WCAG standards
- **Black on White:** Excellent contrast (21:1) - use for primary content
- **Yellow on Black:** Strong contrast (19.56:1) - use for emphasis
- **Terracotta on White:** Good contrast - suitable for content

### Color Blindness
- Don't rely solely on color to convey information
- Use the high-contrast primary palette (black, white, yellow) for critical UI
- Support with icons, patterns, and text labels

---

## Current Implementation in global.css

```css
--color-primary: #FFEB3B;              /* Lemon Yellow */
--color-secondary: oklch(0.15 0.01 0); /* Black */
--color-terracotta: #C87137;           /* Warm Earth Tone */
--color-mission-bg: #E35336;           /* Red-Orange Accent */
--color-lemon: oklch(0.96 0.04 74);    /* Light Lemon Tint */
```

---

## Brand Color Psychology

| Color | Meaning | Application |
|-------|---------|-------------|
| **Lemon Yellow** | Energy, freshness, optimism, health | CTAs, highlights, movement |
| **Black** | Premium, authority, structure, grounding | Typography, contrast, architecture |
| **White** | Clarity, openness, modern, clean | Backgrounds, breathing room |
| **Terracotta** | Warmth, earth, organic, hospitality | Accents, overlays, community feel |
| **Red-Orange** | Passion, vitality, celebration | Special moments, passion points |

---

## Recommended Color Combinations

### High Energy
- Lemon Yellow + Black (primary CTA pattern)
- Lemon Yellow + Dark Overlay (hero sections)

### Premium Warmth
- Terracotta + White (accent sections)
- Terracotta + Black (premium feel)

### Sophisticated
- Black + White (classic elegance)
- Black + White + Yellow accent (structured energy)

### Approachable
- Light Lemon + White (gentle warmth)
- Terracotta + Light Backgrounds (welcoming)

---

## Future Palette Expansion

If the brand grows to need additional colors, maintain these principles:
1. Stay within warm color temperatures (yellows, oranges, terracottas)
2. Preserve the black/white contrast foundation
3. Add complementary earth tones (greens, golds) rather than cool tones
4. Always test accessibility with contrast checkers