# Olevia Visual Identity Guidelines

*Comprehensive visual standards for dairy-identical plant butter*

---

## 01. Brand Foundation

### Brand Essence
**Positioning:** Dairy-identical plant butter  
**Promise:** The richness of dairy, the conscience of plants  
**Personality:** Premium, approachable, transparent, earth-conscious  
**Category:** Premium plant-based dairy alternatives

### Visual Strategy
Create a visual language that bridges the familiar comfort of traditional dairy with the progressive values of plant-based innovation. The identity should feel both premium and accessible—luxurious without being intimidating, natural without being rustic.

---

## 02. Logo System

### Primary Logo Construction

**Wordmark Structure:**
- **Typeface:** Custom lettering based on Larken (display)
- **Character spacing:** -0.02em for optical balance
- **Proportions:** Cap height = 100 units, baseline = 0
- **Construction:** Mathematical curves with 8° italic slant for forward motion

**Logo Variations:**

1. **Primary Wordmark**
   - Full "Olevia" in custom lettering
   - Use for all primary applications
   - Minimum size: 24px digital, 12mm print

2. **Horizontal Layout**
   - Logo + tagline "Dairy-Identical Plant Butter"
   - Tagline: Inter 400, 0.3x of logo cap height
   - Spacing: 0.5x cap height between elements

3. **Stacked Layout**
   - Centered alignment
   - For square formats and small applications
   - Minimum size: 32px digital, 16mm print

4. **Symbol Mark**
   - Stylized "O" for favicon and app icons
   - Geometric interpretation of butter's molecular structure
   - Works at 16px and above

### Clear Space & Protection
- **Minimum clear space:** 0.5x cap height on all sides
- **Background contrast:** Minimum 4.5:1 contrast ratio
- **Placement:** Avoid corners; prefer generous margins

### Logo Usage Guidelines

**DO:**
- Use approved file formats (.svg preferred, .png for web)
- Maintain proportions and clear space
- Ensure sufficient contrast with background
- Use monotone versions on photography

**DON'T:**
- Stretch, skew, or rotate the logo
- Change colors outside approved palette
- Add effects, shadows, or outlines
- Place over busy backgrounds without monotone version

---

## 03. Color System

### Primary Palette

**Cream** `#FAF7F2`
- Primary background color
- Warm, buttery base that suggests richness
- 60% of all layouts

**Rich Gold** `#E8B931`
- Primary accent color
- Suggests premium quality and butter-like richness
- 20% of layouts, calls-to-action

**Forest Green** `#2D5A27`
- Secondary accent, represents plant-based origin
- Used for sustainable messaging and natural positioning
- 15% of layouts, supporting elements

**Charcoal** `#2A2A2A`
- Text and UI elements
- Replaces standard black for warmer feel
- Headers, body text, icons

### Supporting Colors

**Sage Green** `#9CAF88`
- Tertiary accent for plant-forward messaging
- Used in illustrations and icons
- Bridges primary green and cream

**Warm White** `#FEFEFE`
- Pure white for contrast and breathing room
- Card backgrounds, clean separations

**Butter Gold** `#F4D03F`
- Highlighting and premium moments
- Limited use for special callouts

### Color Usage Guidelines

**Ratios (60-30-10 Rule):**
- Cream (60%): Primary backgrounds, large areas
- Rich Gold + Forest Green (30%): Accents, CTAs, highlights  
- Charcoal (10%): Text, icons, details

**Accessibility:**
- All text/background combinations meet WCAG AA standards
- Color never carries meaning alone (paired with icons/type)
- Alternative color combinations for accessibility needs

---

## 04. Typography System

### Typeface Selection

**Primary: Larken** (CE Standard)
- **Usage:** Headlines, brand moments, premium contexts
- **Weights:** 400 Regular, 500 Medium only
- **Sizes:** 48px (hero), 28px (section headers), 20px (card titles)
- **Character:** Elegant, slightly contemporary, premium feel

**Secondary: Inter** (CE Standard)  
- **Usage:** Body text, UI elements, functional copy
- **Weights:** 400 Regular, 500 Medium only
- **Sizes:** 14px (body), 12px (labels), 10px (fine print)
- **Character:** Highly legible, neutral, modern

**Monospace: JetBrains Mono** (CE Standard)
- **Usage:** Technical specs, ingredient lists, nutritional info
- **Weight:** 400 Regular only
- **Size:** 12px standard
- **Character:** Clear, technical accuracy

### Typography Hierarchy

**H1 - Hero Headings**
- Larken 500, 48px, -0.02em letter-spacing
- Color: Rich Gold or Forest Green
- Use: Hero sections, main page headers

**H2 - Section Headers**  
- Larken 400, 28px, -0.01em letter-spacing
- Color: Charcoal or Forest Green
- Use: Content section breaks

**H3 - Card Titles**
- Larken 400, 20px, normal letter-spacing
- Color: Charcoal
- Use: Product cards, feature callouts

**Body Text**
- Inter 400, 14px, 1.5 line-height
- Color: Charcoal
- Max width: 680px (CE standard)

**Label Text**
- Inter 500, 12px, 0.05em letter-spacing
- Color: Sage Green or Forest Green
- Use: Categories, tags, small descriptors

**Fine Print**
- Inter 400, 10px, 1.4 line-height
- Color: #666 (CE grey)
- Use: Legal, disclaimers, secondary info

### Typography Guidelines

**Line Length:** 45-75 characters optimal  
**Paragraph Spacing:** 16px between paragraphs  
**Section Spacing:** 40px (CE standard)  
**Widow/Orphan Control:** Avoid single words on last line

---

## 05. Spacing & Layout

### Grid System

**Container:** 1100px max-width (CE standard)  
**Content:** 680px max-width for text (CE standard)  
**Margins:** 20px mobile, 40px desktop  
**Gutters:** 20px standard, 40px between major sections

### Spacing Scale

Based on 8px base unit:

- **xs:** 4px - Icon spacing, fine adjustments
- **sm:** 8px - Element spacing, padding  
- **md:** 16px - Card padding, content spacing
- **lg:** 24px - Section breaks, layout spacing
- **xl:** 40px - Major sections, hero spacing (CE standard)
- **xxl:** 64px - Page sections, dramatic separation

### Layout Principles

**Visual Hierarchy:** Use size, color, and spacing to guide attention  
**Whitespace:** Generous breathing room suggests premium quality  
**Balance:** Asymmetric layouts with intentional weight distribution  
**Alignment:** Consistent left-alignment for readability  
**Grouping:** Related elements closer together than unrelated ones

### Component Spacing Standards

**Cards:**
- Internal padding: 24px all sides
- Border radius: 4px (subtle, not rounded)
- Border: 1px solid #eee (CE standard)
- Margin between cards: 16px

**Buttons:**
- Padding: 12px 24px
- Border radius: 4px
- Margin from text: 16px minimum

**Form Elements:**
- Field spacing: 16px vertical
- Label to field: 4px
- Field padding: 12px horizontal, 8px vertical

---

## 06. Iconography

### Icon Style

**Design Approach:**
- **Style:** Minimal line icons with selective filled states
- **Weight:** 2px stroke weight standard
- **Corner radius:** 2px for rounded elements
- **Grid:** 24px base grid for consistency

### Icon Categories

**Product Icons:**
- Butter knife, mixing bowl, kitchen tools
- Plant elements (leaf, sprout, grain)
- Quality indicators (certification badges, awards)

**Category Icons:**
- Baking, cooking, spreading applications
- Nutritional benefits (protein, vitamins, healthy fats)
- Sustainability (recycling, renewable, plant-based)

**UI Icons:**
- Navigation (arrows, menu, close)
- Actions (download, share, favorite)
- Status (success, error, warning)

### Icon Usage Guidelines

**Color Applications:**
- Default: Forest Green `#2D5A27`
- Active states: Rich Gold `#E8B931`  
- Disabled: Sage Green `#9CAF88`
- On dark: Cream `#FAF7F2`

**Sizing:**
- Small: 16px (inline with text)
- Standard: 24px (standalone icons)
- Large: 32px (feature callouts)
- Hero: 48px (main illustrations)

---

## 07. Photography Style

### Visual Approach

**Aesthetic:** Clean, warm, authentic moments of food preparation and enjoyment
**Mood:** Approachable luxury—premium but not intimidating  
**Color Palette:** Warm, natural tones that complement brand colors
**Composition:** Generous negative space, intentional props

### Photography Guidelines

**Color Treatment:**
- **Temperature:** Slightly warm (3000-3500K)
- **Saturation:** Natural, not oversaturated
- **Highlights:** Soft, not blown out
- **Shadows:** Rich but not crushed
- **Brand color presence:** Subtle integration of cream and gold tones

**Composition Rules:**
- **Rule of thirds:** Strong but not rigid
- **Negative space:** 40-60% of frame for breathing room
- **Depth of field:** Shallow focus for hero products, medium for lifestyle
- **Angles:** 45° and overhead shots preferred over straight-on

**Content Themes:**
1. **Product in Context:** Olevia being used in real cooking scenarios
2. **Ingredient Stories:** Close-ups showing texture, quality, craftsmanship  
3. **Lifestyle Moments:** Natural, unposed interactions with food
4. **Process & Craft:** Behind-the-scenes of quality and care

### Subject Guidelines

**Food Styling:**
- Natural imperfection over artificial perfection
- Show texture and richness of Olevia
- Props in cream, natural wood, sage green
- Minimal, purposeful styling

**Lifestyle Elements:**
- Authentic moments, not staged poses
- Diverse representation across age, ethnicity, lifestyle
- Real kitchens and dining spaces
- Natural lighting preferred

**Product Shots:**
- Clean, minimal backgrounds
- Dramatic but soft lighting
- Show product in use, not just package
- Focus on quality and texture

### Photography Don'ts

- Overly saturated colors that clash with brand palette
- Busy backgrounds that compete with subject
- Artificial studio lighting that feels sterile  
- Posed lifestyle shots that feel inauthentic
- Generic stock photography aesthetics

---

## 08. Application Examples

### Digital Applications

**Website Headers:**
- Hero image: Overhead shot of fresh toast with Olevia, warm natural lighting
- Typography overlay: Larken 48px in Rich Gold
- Clear space maintained around logo and text

**Product Cards:**
- Clean white background with subtle cream undertones
- Product photography showing texture and application
- Typography: Larken 20px for product names, Inter 14px for descriptions
- CTA buttons in Rich Gold with 4px radius

**Social Media:**
- Square formats with generous whitespace
- Brand colors as backgrounds or accent elements
- Typography hierarchy maintained at all sizes
- Consistent filter/treatment for brand recognition

### Print Applications

**Packaging:**
- Primary brand colors with cream as base
- Logo prominently placed with proper clear space
- Typography hierarchy for product information
- Photography showing product quality and application

**Marketing Materials:**
- Recipe cards with branded layout and photography style
- Brochures following CE spacing standards
- Point-of-sale materials with strong color contrast

---

## 09. Quality Standards

### Visual Quality Gates

Before publishing any branded material:

1. **Brand Compliance Check:**
   - Logo usage follows protection guidelines
   - Colors match specifications exactly
   - Typography uses only approved fonts and sizes
   - Spacing follows CE standards (40px sections, 680px max text width)

2. **Accessibility Validation:**
   - Color contrast meets WCAG AA standards (4.5:1 minimum)
   - Typography is readable at all specified sizes
   - Alt text provided for all imagery
   - Interactive elements meet minimum touch target sizes

3. **Cultural Sensitivity Review:**
   - Photography represents diverse audiences appropriately
   - Language is inclusive and accessible
   - Cultural contexts are respected and authentic

4. **Technical Quality:**
   - High resolution imagery (300dpi print, 2x web)
   - Proper file formats (.svg for logos, .jpg for photography)
   - Optimized file sizes for digital applications
   - Consistent naming conventions for asset management

### Approval Process

**Level 1:** Internal design review for brand compliance  
**Level 2:** Stakeholder review for strategic alignment  
**Level 3:** Final approval for public use

---

## 10. Implementation Timeline

### Phase 1: Foundation (Week 1-2)
- Logo finalization and file preparation
- Color palette specification and documentation
- Typography system setup and testing
- Core asset creation (icons, basic photography)

### Phase 2: Application (Week 3-4)
- Website design system implementation
- Packaging design and prototyping  
- Marketing material templates
- Social media template library

### Phase 3: Rollout (Week 5-6)
- Staff training and guideline distribution
- Asset library setup and access management
- Initial market testing and feedback collection
- Refinement based on real-world usage

### Phase 4: Evolution (Ongoing)
- Monthly review and updates
- Seasonal color and photography updates
- Expansion guidelines for new product lines
- Brand guideline versioning and change management

---

*These visual identity guidelines ensure Olevia maintains premium brand consistency while communicating the revolutionary "dairy-identical plant butter" positioning. Every visual decision reinforces the brand promise: the richness of dairy, the conscience of plants.*