# Olevia Color System Specification
*Version 1.0 — March 2026*

## Brand Context
Olevia creates dairy-identical plant fat from transgenic microalgae. Our color system reflects our brand pillars: **Precision, Science, No Compromise, Integrity**. Colors feel warm yet scientific, premium yet grown-not-manufactured.

---

## 1. Palette Definition

### Primary: Olevia Cream Family
The warm butter-to-cream spectrum that embodies our dairy-identical innovation.

| Name | HEX | RGB | CMYK | Usage |
|------|-----|-----|------|--------|
| **Butter Rich** | `#D4A574` | 212, 165, 116 | 0, 22, 45, 17 | Headlines, primary CTAs, logo mark |
| **Butter Medium** | `#E0B888` | 224, 184, 136 | 0, 18, 39, 12 | Secondary buttons, key highlights |
| **Butter Soft** | `#EBCA9C` | 235, 202, 156 | 0, 14, 34, 8 | Background accents, subtle borders |
| **Cream Warm** | `#F5DCB0` | 245, 220, 176 | 0, 10, 28, 4 | Light backgrounds, card surfaces |
| **Cream Pure** | `#FBEDC4` | 251, 237, 196 | 0, 6, 22, 2 | Lightest backgrounds, overlays |

### Secondary: Clinical Foundation
Clean, precise backbone for scientific credibility.

| Name | HEX | RGB | CMYK | Usage |
|------|-----|-----|------|--------|
| **Lab White** | `#FAFAFA` | 250, 250, 250 | 0, 0, 0, 2 | Primary background, clean surfaces |
| **Carbon** | `#1A1A1A` | 26, 26, 26 | 0, 0, 0, 90 | Primary text, strong contrast |

### Accent: Microalgae Green
Sophisticated olive-green reflecting our biotechnology source.

| Name | HEX | RGB | CMYK | Usage |
|------|-----|-----|------|--------|
| **Algae Deep** | `#5C6B47` | 92, 107, 71 | 14, 0, 34, 58 | Status indicators, data visualization |
| **Algae Medium** | `#7A8B5E` | 122, 139, 94 | 12, 0, 32, 45 | Secondary highlights, icons |
| **Algae Soft** | `#98AB75` | 152, 171, 117 | 11, 0, 32, 33 | Subtle accents, supporting elements |
| **Algae Whisper** | `#D5E0C3` | 213, 224, 195 | 5, 0, 13, 12 | Light backgrounds, success states |

### Utility: Warm Greys
Temperature-matched neutrals that complement the cream family.

| Name | HEX | RGB | CMYK | Usage |
|------|-----|-----|------|--------|
| **Ash Deep** | `#4A453F` | 74, 69, 63 | 0, 7, 15, 71 | Secondary text, form borders |
| **Ash Medium** | `#6B645C` | 107, 100, 92 | 0, 7, 14, 58 | Subtle text, inactive states |
| **Ash Light** | `#8C847A` | 140, 132, 122 | 0, 6, 13, 45 | Placeholder text, dividers |
| **Ash Soft** | `#ADA399` | 173, 163, 153 | 0, 6, 12, 32 | Light borders, disabled states |
| **Ash Whisper** | `#E8E5E0` | 232, 229, 224 | 0, 1, 3, 9 | Subtle backgrounds, card borders |

---

## 2. Proportion Rules

### Color Distribution (60/30/10 Rule)
- **Cream Family:** 60% — Dominant color presence
- **Lab White + Carbon:** 30% — Clean structural foundation  
- **Microalgae Green:** 10% — Strategic accent placement

### Implementation Guidelines
- **Primary CTA:** Butter Rich with Lab White text
- **Secondary CTA:** Butter Medium with Carbon text
- **Backgrounds:** Cream Pure (60%), Lab White (30%), Algae Whisper (10%)
- **Text hierarchy:** Carbon primary, Ash Deep secondary, Ash Medium tertiary

---

## 3. Combination Matrix

### ✅ APPROVED COMBINATIONS

| Foreground | Background | Context | Contrast Ratio |
|------------|------------|---------|----------------|
| Carbon | Cream Pure | Body text on light | 12.8:1 |
| Carbon | Lab White | Primary text | 15.3:1 |
| Lab White | Butter Rich | Primary CTA | 4.9:1 |
| Lab White | Algae Deep | Success button | 8.1:1 |
| Ash Deep | Cream Warm | Secondary text | 6.2:1 |
| Butter Rich | Lab White | Logo mark | 4.9:1 |
| Algae Medium | Cream Pure | Status indicator | 3.8:1 |

### ❌ FORBIDDEN COMBINATIONS

| Foreground | Background | Why Forbidden |
|------------|------------|---------------|
| Butter Soft | Cream Warm | Insufficient contrast (1.8:1) |
| Algae Soft | Algae Whisper | Too subtle, readability fails |
| Ash Light | Ash Whisper | Below WCAG AA threshold |
| Cream Pure | Lab White | No visual distinction |
| Butter Medium | Butter Soft | Muddy hierarchy |

---

## 4. Contrast Guidelines

### WCAG Compliance Standards
- **AA Level:** 4.5:1 minimum for normal text
- **AAA Level:** 7:1 minimum for enhanced accessibility
- **Large text:** 3:1 minimum (18pt+ or 14pt+ bold)

### Text Readability Rules

#### ✅ DO
- Use Carbon on Cream Pure for maximum readability (12.8:1)
- Use Lab White on Butter Rich for primary CTAs (4.9:1)
- Use Ash Deep on Cream Warm for secondary information (6.2:1)
- Test all text combinations with accessibility tools

#### ❌ DON'T
- Place Algae Soft on light backgrounds (fails contrast)
- Use warm greys lighter than Ash Medium for body text
- Combine adjacent cream tones for text/background
- Ignore contrast ratios for decorative elements with text

---

## 5. Logo on Color Rules

### Logo Mark Specifications
The Olevia logo adapts based on background contrast and color temperature.

#### **On Light Backgrounds**
- **Lab White, Cream Pure, Cream Warm:** Butter Rich logo
- **Ash Whisper, Algae Whisper:** Butter Rich logo with subtle drop shadow

#### **On Medium Backgrounds** 
- **Butter Soft, Butter Medium:** Carbon logo
- **Algae Soft, Algae Medium:** Lab White logo with 20% Carbon shadow

#### **On Dark Backgrounds**
- **Carbon, Ash Deep, Algae Deep:** Lab White logo
- **Butter Rich:** Lab White logo

### Clearspace Requirements
Minimum clearspace = height of lowercase 'o' in logotype

---

## 6. Type on Color Specifications

### Text Hierarchy by Background

#### **On Cream Backgrounds (Pure, Warm, Soft)**
- **H1-H2:** Carbon (primary headlines)
- **Body text:** Carbon or Ash Deep
- **Small text:** Ash Deep minimum
- **Captions:** Ash Medium on Cream Pure only

#### **On Lab White**
- **H1-H2:** Carbon or Butter Rich (for emphasis)
- **Body text:** Carbon primary, Ash Deep secondary
- **Small text:** Ash Deep minimum
- **Links:** Butter Rich with Algae Deep hover

#### **On Algae Backgrounds**
- **Algae Whisper:** Carbon for all text
- **Algae Soft:** Carbon for headers, Ash Deep for body
- **Algae Medium/Deep:** Lab White for all text

#### **On Dark Backgrounds (Carbon, Ash Deep)**
- **All text:** Lab White
- **Emphasis:** Cream Pure
- **De-emphasis:** Ash Light minimum

### Font Weight Adjustments
- **On dark backgrounds:** Increase weight by one step (400→500)
- **On light cream tones:** Standard weights work optimally
- **Small text (≤12px):** Use medium weight on any colored background

---

## 7. Usage Guidelines

### Digital Applications
- **Websites:** Cream Pure backgrounds with Carbon text
- **Apps:** Lab White primary, Cream Warm cards, Butter Rich CTAs
- **Data visualization:** Algae family for progressive scales

### Print Applications
- **Business cards:** Lab White with Butter Rich accents
- **Brochures:** Cream backgrounds dominant, strategic green highlights
- **Packaging:** Full cream spectrum with Carbon text

### Brand Expression
- **Scientific reports:** Minimal color, Carbon text, Ash borders
- **Marketing materials:** Bold cream presence, green accents
- **Digital products:** Clean whites, warm cream interaction states

---

## 8. Technical Implementation

### CSS Custom Properties
```css
:root {
  /* Primary: Olevia Cream */
  --olevia-butter-rich: #D4A574;
  --olevia-butter-medium: #E0B888;
  --olevia-butter-soft: #EBCA9C;
  --olevia-cream-warm: #F5DCB0;
  --olevia-cream-pure: #FBEDC4;
  
  /* Secondary: Clinical */
  --olevia-lab-white: #FAFAFA;
  --olevia-carbon: #1A1A1A;
  
  /* Accent: Microalgae */
  --olevia-algae-deep: #5C6B47;
  --olevia-algae-medium: #7A8B5E;
  --olevia-algae-soft: #98AB75;
  --olevia-algae-whisper: #D5E0C3;
  
  /* Utility: Warm Greys */
  --olevia-ash-deep: #4A453F;
  --olevia-ash-medium: #6B645C;
  --olevia-ash-light: #8C847A;
  --olevia-ash-soft: #ADA399;
  --olevia-ash-whisper: #E8E5E0;
}
```

### Quality Assurance Checklist
- [ ] All combinations tested for WCAG AA compliance
- [ ] CMYK values verified for print accuracy
- [ ] Color names approved for brand voice
- [ ] Proportion rules documented for each application
- [ ] Logo contrast ratios calculated and verified

---

**Color System Owner:** Jessica, Art Director  
**Next Review:** Q1 2027  
**Version Control:** Track changes in brand book repository