Skip to content

Protocol Raw Visual Identity Guide v2.4

Warm Modern Premium — Commercial, Confident, Human

Evolution Summary

v1.0 (Original): Earthy, systematic, data-forward — designed for niche raw feeding enthusiasts
v2.0 (Warm Modern): Confident premium — designed for mainstream premium buyers (Butternut Box crossover)
v2.1 (Strategic Color Depth): AG1-inspired sophistication with systematic warmth
v2.2 (Typography Correction): Espresso for body text (not Warm Gray)
v2.3 (Commercial Warmth): Burnt Sienna as a system, photography direction, warmth targets
v2.4 (Current): Spacing and momentum system — conversion-focused rhythm for different page types

Why v2.4: - v2.3 treated all sections with identical spacing (80px desktop / 48px mobile) - No distinction between editorial pages and conversion pages - Homepage felt like a well-written article, not a decision funnel - Whitespace was decorative rather than purposeful - No guidance on how spacing relates to user decision state

What's new in v2.4: - Spacing by Purpose: Different padding for different section jobs - Momentum System: Guidance on creating "pull" not "pause" - Page Type Defaults: Homepage vs Journal vs Product page rhythm - Section Density Rules: When to compress, when to breathe - The Conversion Spacing Principle: Explicit requirement that conversion pages use tighter rhythm

Brand Positioning

Protocol Raw: The systematic approach to raw feeding
Promise: Verified safe, batch by batch
Target: Raw-curious premium buyers currently feeding Butternut Box or super-premium kibble
Price: £89-129/box (premium mainstream)
Differentiation: Independent batch testing + QR proof system = transparency moat

Aesthetic Strategy: Commercial + Confident + Human

Principle What It Means How You Know You've Got It
Commercial This is a £100 product for mainstream premium buyers, not a manifesto for raw feeding enthusiasts. The visual language should sell, not educate. A Butternut Box customer lands on the page and thinks "this is for me" within 3 seconds
Confident Bold typography, decisive colour choices, no hedging. The design knows what it is. Headlines are large. CTAs are clear. No apologetic copy or timid colours.
Human Warmth is not optional. Dogs and owners appear in imagery. The systematic approach feels caring, not clinical. Every page has at least one image with a dog. Burnt Sienna appears in every viewport.

Visual References

Primary: AG1 (Athletic Greens) — premium health supplement positioning, systematic excellence, rich minimal palette
Secondary: Aesop — warm, editorial, premium without being cold
Avoid: Bella & Duke (too playful, too saturated), Generic pet food (stock photography, discount banners)

The Commercial Warmth Principle

Warmth is mandatory, not decorative.

Protocol Raw's systematic positioning could easily feel cold or clinical. The visual identity must actively counteract this with warmth at every level — colour, imagery, and copy. A page that feels "muted" or "editorial" has failed, regardless of how elegant it looks.

Warmth Targets (Measurable)

These are requirements, not suggestions:

Target Requirement
Burnt Sienna per viewport Every scroll position on any page must contain at least one Burnt Sienna element beyond navigation
Photography per page Every page (except pure utility pages like Terms) must include at least one image featuring a dog
Hero imagery Homepage and key landing pages must have lifestyle photography in the hero, not product-only shots
Price prominence Price callouts use Burnt Sienna for the figure, not muted Taupe or Espresso
Signature lines Key brand phrases ("One food done right beats twenty done halfway") use Burnt Sienna

The Warmth Test

Before launching any page, ask:

  1. Does it feel like a £100 purchase? Premium quality, not discount energy.
  2. Does it feel human? Real dogs, real kitchens, real moments — not stock photography.
  3. Does it feel warm? Burnt Sienna visible throughout, not hiding on one button.
  4. Would a Butternut Box customer feel this is for them? Mainstream premium, not niche enthusiast.

If any answer is "no," the page needs more warmth.

Spacing and Momentum System (NEW in v2.4)

The Conversion Spacing Principle

On conversion pages, spacing creates pull, not pause.

Whitespace is not inherently good. It earns its place by serving the user's decision journey. If a user stops scrolling to admire the whitespace, there's too much. If sections feel cramped, there's too little. The right amount is when scrolling feels inevitable.

The Two Types of Pages

Page Type Primary Job Spacing Philosophy
Conversion Pages Get the user to act (calculate, subscribe, buy) Tight-to-moderate. Every section advances commitment.
Content Pages Help the user understand or explore Moderate-to-generous. Sections can breathe.

Conversion pages: Homepage, Landing pages, Product pages, Calculator
Content pages: Journal articles, About, Ingredients, Nutrition & FEDIAF, FAQ

Spacing by Section Purpose

Different sections have different jobs. Their spacing should reflect this:

Section Type Job Desktop Padding Mobile Padding Notes
Hero First impression, set tone 0 (full bleed) or 80-100px 0 or 48-64px Image-led heroes are full bleed; text-led heroes need padding
Proof/Evidence Resolve safety concern 64-80px 48px Tight enough to feel urgent, enough room for evidence to land
Utility Functional action (price check, forms) 48-64px 40-48px Compressed — these are tools, not moments
Process Orient, build confidence (How It Works) 64-80px 48px Clear separation between steps, compact overall
Re-commitment Reset momentum (Product CTA) 64-80px 48-56px Breathing room before and after
Editorial Explain, educate (use sparingly on homepage) 80-100px 56-64px Generous — these invite contemplation
Footer Closure 64px 48px Consistent across all pages

Page Type Spacing Defaults

Page Type Overall Rhythm Typical Section Padding Feels Like
Homepage Fast 48-64px mobile / 64-80px desktop "This is for me → I'm reassured → Let's go"
Landing pages Fast 48-64px mobile / 64-80px desktop "Problem → Solution → Action"
Product pages Moderate 48-64px mobile / 64-80px desktop "Details → Trust → Action"
Calculator Functional 40-48px mobile / 48-64px desktop "Input → Output → Decision"
Journal/Blog Slow 56-64px mobile / 80-100px desktop "Read → Learn → (Optional action)"
About Moderate-slow 56-64px mobile / 80-100px desktop "Story → Values → Trust"
Ingredients/Nutrition Moderate 48-56px mobile / 64-80px desktop "Facts → Confidence"

The Momentum Rule

Every section on a conversion page must either: 1. Advance commitment — move the user closer to "this is for me" 2. Resolve a concern — remove a blocker to action 3. Direct to action — end with a CTA

If a section does none of these, it's editorial content that belongs on a content page, not the homepage.

Section Density Rules

Rule Explanation
No dead ends Every section on a conversion page ends with a CTA or clear next step
No philosophy sections Explanatory "why we do this" content lives on content pages, not conversion pages
Compress utilities Forms, calculators, price checks are tools — give them functional spacing, not dramatic spacing
Let evidence breathe Proof sections (batch results) need enough room for the evidence to land, but not so much it feels decorative
Stack information Related facts can be tighter together; conceptual shifts need more space

Before/After: Homepage Spacing

❌ v2.3 Approach (Too Editorial): 

Hero                    80px padding
The Promise             80px padding  ← Same as hero, creates pause
The Proof               80px padding  ← Same again, momentum stalls
How It Works            80px padding  ← Reader is in "reading mode" not "deciding mode"
Calculator              80px padding

✅ v2.4 Approach (Conversion-Focused): 

Hero                    Full bleed (image) / 0px
Quick Price Check       48px padding  ← Tight utility section
The Proof               64px padding  ← Evidence needs room but not drama
How It Works            64px padding  ← Process, clear but compact
Product CTA             64px padding  ← Re-commitment moment
Calculator              48px padding  ← Functional tool

Spacing Quick Reference

CONVERSION PAGES (Homepage, Landing, Product)
─────────────────────────────────────────────
Hero:           0 / 80px (depending on type)
Utility:        48-64px desktop / 40-48px mobile
Proof:          64-80px desktop / 48px mobile
Process:        64-80px desktop / 48px mobile
CTA blocks:     64-80px desktop / 48-56px mobile

CONTENT PAGES (Journal, About, Ingredients)
─────────────────────────────────────────────
Major sections: 80-100px desktop / 56-64px mobile
Subsections:    48-64px desktop / 40-48px mobile

Color Palette v2.4

Core Brand Colors

ESPRESSO #2B2523
Role: Authority, confidence, primary voice, body text
Usage: Headlines (H1, H2, H3), body text, navigation, borders, UI elements
Why: Warm dark (not cold black) — sophisticated and approachable
RGB: 43, 37, 35
Contrast on Cream: 11.2:1 (excellent)
Never use: Pure black #000000 (too cold, not Protocol Raw)

FOREST GREEN #2D5144 ⭐ Verification Color
Role: Proof system, verification, nature, trust
Usage:
- "Verified Safe" badges (primary verification indicator) - Proof portal test results (PASS states only) - QR code verification elements - Batch confirmation states - Callout box borders (verification context only)

Why: Deep, trustworthy premium green. Raw = nature. Testing = trust.
RGB: 45, 81, 68
Personality: Systematic trust, premium natural
Never use: Marketing CTAs, general links, decorative elements, benefit strips

CRITICAL: Forest Green lives ONLY in proof/verification contexts. It never competes with Burnt Sienna.

BURNT SIENNA #B85C3A ⭐ Warmth + Action Color
Role: Primary warmth signal, action, energy, commercial moments

This is your most important colour for commercial warmth. Use it generously.

Primary Usage (100% opacity): - Primary CTAs ("Calculate Your Plan", "Start Subscription") - All text links (in body copy, navigation, etc.) - Section labels - Price figures (the number itself: "£24/week") - Signature brand lines - Key statistics and data callouts

Extended Usage (with tints — see Tint System below): - Benefit pill backgrounds (15% opacity) - Card hover states (8% opacity background, 100% border) - Pull quote left borders - Icon colours in benefit strips - Highlight backgrounds for key information

Why: Rich warmth without being childish — ownable accent that differentiates from competitors and drives the eye to key moments
RGB: 184, 92, 58
Hover state: #9F4D2F (Burnt Sienna Dark, 10% darker)
Personality: Warm confidence, premium invitation, commercial energy
Never use: Proof system, verification states, test results (that's Forest Green)

The Burnt Sienna Tint System

Burnt Sienna should appear at different intensities depending on context:

Opacity Hex/RGBA Use Case Example
100% #B85C3A CTAs, links, labels, prices, signature lines Primary button, "£24/week", section labels
40% rgba(184, 92, 58, 0.4) Strong accents, borders on hover Card border on hover, active states
15% rgba(184, 92, 58, 0.15) Subtle backgrounds, benefit pills Benefit strip pill backgrounds, highlight boxes
8% rgba(184, 92, 58, 0.08) Very subtle hover states, tints Card hover background, input focus background

CSS Variables: 

:root {
  --burnt-sienna-100: #B85C3A;
  --burnt-sienna-40: rgba(184, 92, 58, 0.4);
  --burnt-sienna-15: rgba(184, 92, 58, 0.15);
  --burnt-sienna-08: rgba(184, 92, 58, 0.08);
}

Background Colors

CREAM #F9F7F4 ⭐ Primary Background
Role: Primary background — light, airy, premium
Usage: Hero sections, primary content, cards, most page real estate
Why: 97% lightness = warm off-white without being stark
RGB: 249, 247, 244

WARM LINEN #EBE8E3
Role: Subtle alternate background for rhythm
Usage: Alternating sections, secondary cards, creates depth
Why: Just slightly darker than Cream (92% lightness)
RGB: 235, 232, 227

STONE #C4BCB0 ⭐ Rich Contrast
Role: Rich accent background for premium depth
Usage: ONE major section per page maximum — Ingredients OR key feature section
Why: 74% lightness = substantial without being heavy
RGB: 196, 188, 176
Never use: More than once per page

DEEP CHARCOAL #1A1816 ⭐ Dark Drama
Role: Maximum contrast — footer and rare dark sections
Usage: Footer (primary), potential hero variants (rare)
Text on this: Cream or Warm Linen
RGB: 26, 24, 22

Supporting Colors

WARM GRAY #918A85
Role: Secondary text, meta elements ⚠️ NOT body text
Usage: Meta info (dates, read time), captions, helper text, footer text
Contrast on Cream: 3.5:1 (fails WCAG AA for body — use only for secondary elements)
RGB: 145, 138, 133

TAUPE #6B6360
Role: Tertiary text, subtle borders, subtext
Usage: Form labels, dividers, supporting copy under headlines
Contrast on Cream: 5.2:1 (passes WCAG AA)
RGB: 107, 99, 96

AMBER #D4A574 ⭐ Functional/Premium
Role: Pending states, premium highlights
Usage: "Testing in Progress" states, premium ingredient callouts
Never use: CTAs, verification (those have their own colours)
RGB: 212, 165, 116

Color Usage Matrix v2.4

Context Primary Color Tint Level Never Use
Primary CTAs Burnt Sienna 100% Forest Green
Text links Burnt Sienna 100% Forest Green, Taupe
Section labels Burnt Sienna 100% Espresso, Taupe
Price figures Burnt Sienna 100% Taupe (too muted)
Signature lines Burnt Sienna 100% Espresso (too quiet)
Benefit pill backgrounds Burnt Sienna 15% Espresso tint
Benefit pill icons Burnt Sienna 100% Forest Green
Card hover states Burnt Sienna 8% bg, 40% border —
Pull quote borders Burnt Sienna or Forest Green 100% Depends on context
Headlines Espresso — Burnt Sienna (too loud)
Body text Espresso — Warm Gray, Taupe
Verification badges Forest Green 100% Burnt Sienna
Test results Forest Green 100% Burnt Sienna
Secondary/meta text Warm Gray — Espresso (too heavy)

Photography Direction

Photography is Protocol Raw's primary warmth lever.

Photography Principles

Principle Description
Ritual, not action Show calm feeding moments, not dogs mid-leap or playing. The focus is the daily routine.
Kitchen context Premium domestic settings — London apartments, modern kitchens, natural light. Not gardens, not parks.
Dog + owner together The human is present but understated. They're part of the ritual, not the hero.
The food is visible Raw food should appear in frame — in a bowl, being prepared. Show what we're selling.
Warm, muted tones Natural light, warm colour temperature. Not saturated, not heavily edited.

Hero Image Requirements

For homepage and key landing pages:

  • Subject: Owner preparing/serving food, dog waiting or watching
  • Setting: Kitchen with natural light, premium but lived-in
  • Composition: Wide enough for text overlay with gradient (see Hero section)
  • Tone: Calm anticipation, quiet moment, morning ritual energy
  • Dog posture: Attentive, patient — not hyperactive or begging
  • Human posture: Focused on the task, not looking at camera

What to Avoid

Avoid Why
Stock photography energy Generic "happy dog" shots feel cheap and undermine premium positioning
Dogs mid-leap or running Too energetic — Protocol Raw is calm and systematic
Direct eye contact with camera Feels posed and marketing-y
Saturated colours Bella & Duke territory — not our aesthetic
Pure white backgrounds Clinical, not warm
Gardens/outdoor settings We're about the kitchen ritual, not lifestyle aspiration
Multiple dogs in frame Cluttered — one dog, one moment
Treats, toys, accessories Focus on the food and the ritual

Image Treatment

  • Overlays: When text sits over images, use a gradient overlay that fades from Cream (solid) to transparent
  • Colour grading: Warm, slightly desaturated. Never cold or blue-toned.
  • Cropping: Allow breathing room. Don't crop too tight on the dog.

Photography Style Reference

Think: Kinfolk magazine meets premium food brand
Not: Pet food advertising, lifestyle influencer content, stock libraries

Typography System

Font Families

Montserrat — Headlines, display text
- Weights: 700 (Bold only) - Usage: All headlines (H1, H2, H3), brand name, emphasis moments - Character: Confident, premium, modern

Inter — Body text, UI
- Weights: 400 (Regular), 500 (Medium), 600 (Semibold) - Usage: All body text, captions, labels, buttons, UI elements - Character: Clean, readable, systematic

Type Scale

Element Size (Desktop) Size (Mobile) Weight Color Line Height
Display 64px 40px 700 Espresso 1.05
H1 48-56px 32-36px 700 Espresso 1.08
H2 32-40px 24-28px 700 Espresso 1.1
H3 24px 20px 700 Espresso 1.2
Body Large 18-20px 16-18px 400 Espresso 1.75
Body 16-17px 15-16px 400 Espresso 1.7
Meta 13-14px 12-13px 400 Warm Gray 1.5
Label 11-12px 11px 600 Burnt Sienna 1.2
Button 14-16px 14px 600 varies 1.2

Section Labels

The signature Protocol Raw typography element:

.section-label {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--burnt-sienna-100); /* #B85C3A */
  margin-bottom: 16px;
}

Always Burnt Sienna. This is one of the key warmth signals.

Price Typography

Prices are commercial moments — they should feel confident, not apologetic:

.price-callout {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  color: var(--taupe); /* #6B6360 */
}

.price-callout strong {
  color: var(--burnt-sienna-100); /* #B85C3A */
  font-weight: 600;
}

Example: "From £24/week for a 15kg moderately active dog."

The price figure is Burnt Sienna. The context is Taupe.

Signature Lines

Key brand phrases get Burnt Sienna treatment:

.signature-line {
  font-family: 'Montserrat', sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: var(--burnt-sienna-100); /* #B85C3A */
  line-height: 1.2;
}

Examples: - "One food done right beats twenty done halfway." - "Proof, not promises." - "So we put the variety inside."

Component Specifications

Primary Button

.btn-primary {
  background: var(--burnt-sienna-100);
  color: var(--cream);
  padding: 16px 32px;
  border-radius: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 600;
  box-shadow: 0 4px 16px rgba(184, 92, 58, 0.25);
  transition: all 0.2s ease;
}

.btn-primary:hover {
  background: var(--burnt-sienna-dark); /* #9F4D2F */
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(184, 92, 58, 0.3);
}

Secondary Button

.btn-secondary {
  background: transparent;
  color: var(--espresso);
  padding: 16px 32px;
  border: 1.5px solid var(--espresso);
  border-radius: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 500;
  transition: all 0.2s ease;
}

.btn-secondary:hover {
  background: var(--espresso);
  color: var(--cream);
}

Text Link Button

.btn-text {
  color: var(--burnt-sienna-100);
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  transition: color 0.2s ease;
}

.btn-text:hover {
  color: var(--burnt-sienna-dark);
}

.btn-text svg {
  width: 18px;
  height: 18px;
  transition: transform 0.2s ease;
}

.btn-text:hover svg {
  transform: translateX(4px);
}

Benefit Pills

New component for hero sections and feature strips:

.benefit-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--burnt-sienna-15); /* rgba(184, 92, 58, 0.15) */
  border-radius: 100px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--espresso);
  letter-spacing: 0.02em;
}

.benefit-pill svg {
  width: 14px;
  height: 14px;
  color: var(--burnt-sienna-100);
}

Cards with Hover State

.card {
  background: var(--cream);
  border-radius: 12px;
  padding: 32px;
  box-shadow: 0 4px 24px rgba(43, 37, 35, 0.06);
  border: 1px solid transparent;
  transition: all 0.25s ease;
}

.card:hover {
  background: var(--burnt-sienna-08); /* rgba(184, 92, 58, 0.08) */
  border-color: var(--burnt-sienna-40); /* rgba(184, 92, 58, 0.4) */
  box-shadow: 0 8px 32px rgba(43, 37, 35, 0.1);
  transform: translateY(-4px);
}

Pull Quotes

.pullquote {
  border-left: 4px solid var(--burnt-sienna-100);
  padding: 24px 32px;
  margin: 32px 0;
  background: var(--warm-linen);
  border-radius: 0 8px 8px 0;
}

.pullquote p {
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  font-style: italic;
  color: var(--espresso);
  line-height: 1.7;
  margin: 0;
}

For verification context, use Forest Green border instead.

Hero Section Pattern

The hero is the most important commercial moment. It must: 1. Include lifestyle photography with a dog 2. Use split layout or gradient overlay technique for text readability 3. Show Burnt Sienna in benefit pills, price, and CTA

┌─────────────────────────────────────────────────────────────────┐
│ NAV                                                             │
├─────────────────────────────────────────────────────────────────┤
│                                                                 │
│  ┌──────────────────────┐   ┌────────────────────────────────┐  │
│  │                      │   │                                │  │
│  │   SECTION LABEL      │   │                                │  │
│  │                      │   │                                │  │
│  │   HEADLINE           │   │      LIFESTYLE IMAGE           │  │
│  │                      │   │      (right column, 55%)       │  │
│  │   Subtext copy       │   │                                │  │
│  │                      │   │                                │  │
│  │   [Benefit Pills]    │   │                                │  │
│  │                      │   │                                │  │
│  │   Price callout      │   │                                │  │
│  │                      │   │                                │  │
│  │   [CTA] [Secondary]  │   │                                │  │
│  │                      │   │                                │  │
│  │   (left column, 45%) │   │                                │  │
│  └──────────────────────┘   └────────────────────────────────┘  │
│                                                                 │
└─────────────────────────────────────────────────────────────────┘

Mobile Hero Structure

Image-first on mobile, with content below:

┌─────────────────────────┐
│ NAV                     │
├─────────────────────────┤
│                         │
│   LIFESTYLE IMAGE       │
│   (full width, ~320px)  │
│                         │
├─────────────────────────┤
│                         │
│   SECTION LABEL         │
│                         │
│   HEADLINE              │
│                         │
│   Subtext               │
│                         │
│   [Pills] [Pills]       │
│   [Pills]               │
│                         │
│   Price                 │
│                         │
│   [Primary CTA]         │
│   [Secondary CTA]       │
│                         │
└─────────────────────────┘

Background Strategy

Section Rhythm

Section Type Background Notes
Hero Cream + image (split layout) Lifestyle photography visible
Primary content Cream Calculator, main features
Alternate sections Warm Linen Creates rhythm
Rich contrast (1x per page) Stone Ingredients OR key feature
Footer Deep Charcoal Always

Rules

  1. Never stack same background — alternate Cream → Warm Linen → Cream
  2. Stone once per page — it's your impact moment, don't dilute
  3. Light sections dominate — 70%+ of page should be Cream or Warm Linen
  4. Burnt Sienna in every section — at minimum in section label

Before/After Examples

Example 1: Price Callout

❌ Too Muted (v2.2 interpretation):

From £24/week for a 15kg moderately active dog.

All Taupe text. The price doesn't stand out. Apologetic.

✅ Correct (v2.3+):

From £24/week for a 15kg moderately active dog.

Price figure in Burnt Sienna. Context in Taupe. Commercial and confident.

Example 2: Benefit Strip

❌ Too Muted: Three grey icons with Espresso text on transparent background. Barely visible.

✅ Correct: Three Burnt Sienna icons in pills with rgba(184, 92, 58, 0.15) background. Scannable and warm.

Example 3: Hero Section

❌ Too Muted: Text-only hero on Cream background. No image. Burnt Sienna only on CTA button.

✅ Correct: Split layout with lifestyle image on right. Benefit pills in Burnt Sienna tint. Price in Burnt Sienna. CTA in Burnt Sienna. The page feels commercial and human.

Example 4: Homepage Spacing (NEW in v2.4)

❌ Too Editorial (v2.3): Every section has 80px padding. Feels like reading a magazine. User is in "browse mode."

✅ Correct (v2.4): Hero (full bleed) → Quick Price Check (48px) → Proof (64px) → How It Works (64px) → Calculator (48px). Faster rhythm. User feels momentum toward action.

Implementation Checklist v2.4

Spacing & Momentum (NEW)

  • [ ] Homepage uses conversion spacing (tighter rhythm)
  • [ ] Every section on homepage ends with a CTA or clear next step
  • [ ] No editorial/philosophy sections on homepage
  • [ ] Utility sections (forms, calculators) have functional spacing (48-64px)
  • [ ] Proof sections have moderate spacing (64-80px)
  • [ ] Content pages (Journal, About) use generous spacing (80-100px)

Warmth Targets

  • [ ] Every scroll viewport contains Burnt Sienna beyond navigation
  • [ ] Homepage hero includes lifestyle photography with a dog
  • [ ] Price callouts use Burnt Sienna for the figure
  • [ ] Benefit strips use Burnt Sienna icons and tinted backgrounds
  • [ ] At least one signature line per page uses Burnt Sienna
  • [ ] Section labels are Burnt Sienna (not Espresso or Taupe)

Colors

  • [ ] Espresso #2B2523 for headlines and body text
  • [ ] Burnt Sienna #B85C3A for CTAs, links, labels, prices, signature lines
  • [ ] Burnt Sienna tints for benefit pills, hover states
  • [ ] Forest Green #2D5144 ONLY in proof/verification contexts
  • [ ] Warm Gray #918A85 ONLY for secondary/meta text
  • [ ] Cream #F9F7F4 for primary backgrounds
  • [ ] No pure white except forms and proof portal

Photography

  • [ ] Hero includes lifestyle image (dog + owner, kitchen setting)
  • [ ] Images have warm colour temperature (not cold/blue)
  • [ ] Dog is calm/attentive (not hyperactive)
  • [ ] Food is visible in frame
  • [ ] No stock photography energy

Typography

  • [ ] Montserrat Bold 700 for headlines
  • [ ] Inter for body and UI
  • [ ] Section labels: 11px, uppercase, 0.15em tracking, Burnt Sienna
  • [ ] Price figures: Burnt Sienna
  • [ ] Signature lines: Burnt Sienna

Components

  • [ ] Benefit pills have Burnt Sienna 15% background
  • [ ] Cards have Burnt Sienna hover state
  • [ ] Pull quotes have Burnt Sienna or Forest Green border
  • [ ] CTAs have proper shadow and hover states

Brand Feel

  • [ ] Feels commercial (not editorial)
  • [ ] Feels human (dogs, warmth, ritual)
  • [ ] Feels premium (justifies £89-129)
  • [ ] Butternut Box customer would feel "this is for me"
  • [ ] Scrolling feels inevitable (not contemplative)

Quick Reference Card

Core Colors

ESPRESSO       #2B2523   headlines, body text, UI
FOREST GREEN   #2D5144   verification/proof ONLY
BURNT SIENNA   #B85C3A   CTAs, links, labels, prices, warmth
CREAM          #F9F7F4   primary background
WARM LINEN     #EBE8E3   alternate background
STONE          #C4BCB0   rich contrast (1x per page)
DEEP CHARCOAL  #1A1816   footer, dark sections
WARM GRAY      #918A85   secondary/meta text ONLY
TAUPE          #6B6360   tertiary text, subtext
AMBER          #D4A574   pending states, premium accents

Burnt Sienna Tint System

100%  #B85C3A                    CTAs, links, labels, prices
40%   rgba(184, 92, 58, 0.40)    hover borders, strong accents
15%   rgba(184, 92, 58, 0.15)    benefit pill backgrounds
8%    rgba(184, 92, 58, 0.08)    hover backgrounds, subtle tints

Typography Quick Pick

Display:      56-64px Montserrat Bold, Espresso
H1:           48-56px Montserrat Bold, Espresso
H2:           32-40px Montserrat Bold, Espresso
Body:         16-18px Inter Regular, Espresso, 1.7 line height
Label:        11px Inter Semibold, Burnt Sienna, uppercase, 0.15em
Price:        15px Inter, figure in Burnt Sienna
Signature:    24px Montserrat Bold, Burnt Sienna

Spacing Quick Pick (NEW in v2.4)

CONVERSION PAGES (Homepage, Landing, Product)
Hero:         0 (full bleed) or 80px
Utility:      48-64px desktop / 40-48px mobile
Proof:        64-80px desktop / 48px mobile
Process:      64-80px desktop / 48px mobile
CTA blocks:   64-80px desktop / 48-56px mobile

CONTENT PAGES (Journal, About)
Major:        80-100px desktop / 56-64px mobile
Sub:          48-64px desktop / 40-48px mobile

UNIVERSAL
Card padding: 32px desktop / 24px mobile
Element gap:  16-24px

Version History

v2.4 (Current) — January 2026 - NEW: Spacing and Momentum System — different padding for different section jobs - NEW: Conversion Spacing Principle — conversion pages use tighter rhythm - NEW: Page Type Defaults — homepage vs journal vs product page spacing - NEW: Section Density Rules — when to compress, when to breathe - NEW: Momentum Rule — every section must advance commitment or resolve concern - UPDATED: Implementation checklist with spacing-specific items - UPDATED: Before/After examples for spacing - UPDATED: Quick Reference Card with spacing section - UPDATED: Hero section pattern to recommend split layout

v2.3 — January 2026 - Commercial Warmth Principle — warmth is mandatory, not decorative - Warmth Targets — measurable requirements for Burnt Sienna presence - Burnt Sienna Tint System — 100%, 40%, 15%, 8% opacity levels - Photography Direction — full section on imagery style and requirements - Before/After Examples — show muted vs correct applications

v2.2 — January 2026 - Changed body text color from Warm Gray to Espresso - Clarified links should use Burnt Sienna - Warm Gray reserved for secondary/meta elements only

v2.1 — November 2025 - Added Forest Green, Stone, Deep Charcoal, Amber - Refined background strategy - AG1-inspired sophistication

v2.0 — October 2025 - Evolved from earthy to warm modern premium - Shifted from niche to mainstream premium positioning

v1.0 — Launch - Original earthy systematic identity

Summary: The v2.4 Shift

Dimension v2.3 v2.4
Spacing approach Same for all sections (80px/48px) Different by section purpose
Page type guidance None Conversion vs Content page defaults
Momentum concept Not defined Explicit: "pull, not pause"
Section requirements Warmth only Warmth + must end in motion
Homepage feel Editorial, contemplative Commercial, inevitable
Whitespace philosophy "Premium = generous" "Whitespace must earn its place"

Protocol Raw Visual Identity v2.4
Commercial. Confident. Human.

Use warmth generously. Use spacing purposefully. Every page should feel like a £100 purchase made by someone who cares about their dog — and every conversion page should feel like the decision is already made.

Last updated: January 2026