Protocol Raw Website Documentation: Ingredients Page¶
Version: 1.4 Last Updated: 18 April 2026 Owner: Protocol Raw Operations Classification: Internal Reference URL: https://www.protocolraw.co.uk/pages/ingredients
1. Document Overview¶
This document provides a complete reference for the Protocol Raw Ingredients page as currently live on Shopify. It captures the structure, copy, design decisions, and strategic intent behind every section, serving as the single source of truth for the page as built.
The Ingredients page is a formulation story page. Its job is to build confidence in the product's nutritional integrity by demonstrating that Protocol Raw achieves complete nutrition through whole-food ingredients alone, without synthetic supplements. The page is designed for the raw-curious premium buyer (particularly the Butternut Box customer) who needs to see that the formulation is rigorous, not just "natural."
| Attribute | Detail |
|---|---|
| Page type | Formulation story / transparency page |
| Primary CTA | See nutrition standards (links to /pages/nutrition) |
| Secondary CTA | Calculate your plan (links to /calculator) |
| Platform | Shopify |
| Section file | sections/ingredients-page.liquid |
| Design system | Visual Identity Guide v2.4, Web Design System v1.3 |
| Voice | Brand Voice & Copy Guidelines v1.3 |
| Template version | v2.1 |
| Last captured | 18 April 2026 |
2. Visual Rhythm¶
The page follows a deliberate alternating rhythm of backgrounds, image breaks, and section weight:
| # | Section | Background | Role |
|---|---|---|---|
| 1 | Hero | Full-bleed image with gradient overlay | Hook |
| 2 | Composition | Warm Linen | Ingredient transparency |
| 3 | "None." Signature | Dark Espresso | SIGNATURE MOMENT |
| — | Inline Help (Kai) | Inherits from surrounding context | Question prompt |
| 4 | The Formulation | Cream | Nutrient mapping (mechanism) |
| 5 | Image Break | Full-bleed lifestyle image | Breathing moment |
| 6 | CTA | Dark Espresso | Convert |
Pattern: IMAGE → card → DARK SIGNATURE → table → IMAGE → DARK CTA
The page has two dark Espresso sections: the "None." signature and the closing CTA. The signature is the emotional peak. The CTA is the action close. Everything between them is supporting evidence on light backgrounds.
Changes from earlier versions: The Sustainability section and Verification section were removed in v2.0. The CTA now chains directly to the Nutrition page. The page is tighter at 6 sections.
3. Hero Section¶
The hero uses a full-bleed image with a dark gradient overlay and left-aligned text.
Photography¶
Ingredient flat-lay or food preparation image. Warm-toned, natural lighting. The image should communicate "real food, considered preparation" rather than clinical or sterile presentation. Image is set via the hero_image schema setting in the Shopify customizer.
Copy (exact)¶
Label: INGREDIENTS
Headline: Real food. Every ingredient named.
Subtitle: Nineteen whole-food ingredients. Every nutrient accounted for. No synthetic supplements required.
Design Notes¶
Full-bleed hero with 70vh height (min 480px, max 760px). Dark gradient overlay from left (70% opacity) to right (30% opacity). Headline in Montserrat Bold 52px white. Subtitle in Inter 19px at 85% white opacity. Content constrained to max-width 680px (headline) and 520px (subtitle). At 600px, headline drops to 32px and subtitle to 16px. Under 750px, hero caps at 60vh / max 420px.
Strategic Intent¶
The headline leads with transparency and specificity. "Every ingredient named" is a claim most competitors cannot make (premixes are often listed as compound categories, not individual ingredients). The subtitle quantifies ("nineteen") and states the differentiator ("no synthetic supplements required").
Copy Decision Log¶
- "Complete nutrition. No synthetic shortcuts." was the v7.0 headline. Replaced in v2.0 with "Real food. Every ingredient named." to lead with the transparency angle rather than the completeness claim.
- Subtitle changed from a general positioning statement to a specific, quantified claim.
4. Composition Section¶
The full ingredient list presented in a card format, establishing transparency.
Copy (exact)¶
Label: WHAT'S IN IT
Title: Full ingredient list
Subtitle: Exactly as it appears on the label.
Ingredient Card¶
Card header (Espresso background): PROTOCOL RAW COMPLETE
| Group | Ingredients |
|---|---|
| Beef | Beef Heart, Beef Lean Meat, Beef Kidney, Beef Spleen, Beef Green Tripe, Beef Liver |
| Chicken | Chicken with Bone, Chicken Gizzards |
| Other | Whole Egg, Fish Oil, Cod Liver Oil, Flaxseed Oil, Pumpkin Fibre, Nutritional Yeast, Sunflower Seed Meal, Dehydrated Oyster, Dehydrated Mussel, Kelp Meal, Psyllium Husk |
| Additives | None. |
Contextual Line (below the card)¶
Organ meats, bone, and shellfish aren't unusual. They're where the nutrients are. Each ingredient replaces a synthetic supplement that other foods add separately.
Sits immediately below the ingredient card, still inside the Composition section, before the "None." Signature section begins. Inter 400, 16px, Taupe (#6B6360), max-width 640px, centred to align with the card above. 24px top margin from the card. Reads as a quiet contextual line, not a new section heading. Mirrors the same line on the homepage the-food section so visitors entering from either page see the same explanation (the homepage version is styled smaller and more footnote-like; the Ingredients version sits at body-text size because it carries more interpretive weight on this page).
Design Notes¶
Card on Warm Linen background with Cream card body and Espresso card header. Inner content max-width 640px, centred. The "Additives / None." row sits at the bottom of the card, separated by a 2px Warm Linen border. "None." is displayed in Montserrat Bold 28px Forest Green, creating a mini-signature moment that foreshadows the full signature section below.
Strategic Intent¶
The card format makes the ingredient list feel like a label, reinforcing the "exactly as it appears" promise. Grouping by protein source (Beef, Chicken, Other) makes the formulation scannable. The "Additives: None." line at the bottom of the card is the first encounter with the page's central claim. It appears casually, as part of the label, rather than as a marketing headline. This understatement makes it more credible.
5. "None." Signature Section¶
The page's signature moment. A dark Espresso section with two contrast cards comparing typical dog food supplements against Protocol Raw's approach.
Copy (exact)¶
Label: THE PART MOST BRANDS SKIP
Title: What most labels look like.
Subtitle: Most dog foods add synthetic vitamins and minerals because the recipe alone doesn't provide enough. Even the fresh ones. We took a different approach. More ingredients, each chosen for a specific nutritional role. The result: complete nutrition from the food itself.
Contrast Cards¶
Left card (muted):
| Field | Value |
|---|---|
| Label | STANDARD APPROACH |
| Items | Vitamin A Supplement, Vitamin D3 Supplement, Vitamin E Supplement, Zinc Sulphate, Ferrous Sulphate, Copper Sulphate, Manganous Oxide, Calcium Iodate, Sodium Selenite |
| Footnote | Added because the base recipe doesn't provide enough. |
Right card (highlighted, Mint Green border):
| Field | Value |
|---|---|
| Label | PROTOCOL RAW COMPLETE |
| Statement | None. (64px, Mint Green #7BC4A0) |
Bridge Text (below cards)¶
Every nutrient your dog needs comes from the ingredients themselves.
Design Notes¶
Dark Espresso background with dot texture overlay (3% white opacity, 24px grid). Two-column grid at desktop (gap 24px), stacking to single column at 900px (max-width 400px, centred). On mobile (<=900px), the gap between cards tightens to 12px so the "None." payoff lands faster after the supplement list. The "theirs" card has 4% white background with 8% white border. The "ours" card has 4% white background with a 2px Mint Green border. "None." is displayed in Montserrat Bold 64px Mint Green (48px at <=900px).
Strategic Intent¶
This is the page's signature moment and the most important section for conversion. The visual contrast between a wall of supplement names and a single word ("None.") creates an immediate, visceral reaction. The supplement list in the "Standard approach" card uses realistic, recognisable additive names. The visual density of that list IS the persuasive mechanism — do not simplify or reduce it.
Copy Decision Log¶
- v2.0 changed the label from "WHAT ISN'T IN IT" to "THE PART MOST BRANDS SKIP" — more conversational, positions it as industry omission rather than Protocol Raw bragging.
- v2.0 changed the left card label from "TYPICAL DOG FOOD" to "STANDARD APPROACH" — less confrontational, frames it as method rather than identity.
- v2.0 changed the bridge text from a two-sentence explanation to a single direct statement: "Every nutrient your dog needs comes from the ingredients themselves."
- The supplement list was simplified from detailed chelate/hydrolysate names to common supplement names (Zinc Sulphate, Ferrous Sulphate, etc.) for faster scanning.
5a. Inline Help Prompt (Kai)¶
Between the "None." Signature section and the Formulation section, the page renders the Kai inline help prompt via {% render 'inline-help-kai' %}.
What It Renders¶
A centred inline prompt: "Have a question? Ask Kai." with a small avatar image. Clicking "Ask Kai" opens the chat panel via window.prChat.open().
Design Notes¶
This is not a fixed-position widget. It's an inline element that sits in the content flow between sections. The floating chat launcher button (.pr-chat-launcher) is injected by the external chat service. On mobile (<=900px), the ingredients page applies a page-scoped offset (bottom: 80px) to the launcher to prevent it overlapping the nutrient mapping table and right-edge content.
Strategic Intent¶
Placed after the signature moment — the point where visitors are most likely to have questions ("how is that possible?", "is this really complete?"). The inline prompt catches that moment of curiosity.
6. The Formulation Section (Statement-Style Module)¶
A nutrient-to-source-plus-rationale module that explains how the formulation achieves completeness without synthetic supplements. Redesigned in v1.4 from a 2-column Nutrient → Source table to a statement-style module (documented as a reusable system pattern at Web Design System v1.3 Section 3.11).
Copy (exact)¶
Label: THE FORMULATION
Title: Where every nutrient comes from.
Intro: If there are no supplements, where do the nutrients come from? From the ingredients themselves. Each one is in the recipe for a reason.
Statement Module Rows (live, 10 rows)¶
Each row renders as two stacked lines — small uppercase label above, a full-sentence statement below. All 10 rows below are the current live content:
| Label | Statement |
|---|---|
| ZINC | From dehydrated oyster. The way dogs absorb it best. |
| MANGANESE | From dehydrated mussel. A natural source of this essential mineral. |
| IODINE | From kelp meal. Tested every batch for consistent levels. |
| EPA + DHA | From fish oil, cod liver oil, and green-lipped mussel. Three marine sources for broader omega-3 coverage. |
| TAURINE | From beef heart. Naturally taurine-rich muscle meat, not a synthetic add-in. |
| CALCIUM : PHOSPHORUS | From chicken with bone. Naturally balanced at 1.2-1.4:1, the ratio growing dogs need. |
| B-VITAMINS + IRON | From liver, kidney, and spleen. Nature's multivitamin, in three forms. |
| DIGESTIVE SUPPORT | From raw tripe. With naturally occurring digestive enzymes. |
| LINOLEIC ACID | From sunflower seed meal. A plant-based essential fatty acid. |
| FIBRE | From pumpkin fibre and psyllium husk. Two kinds of fibre working together for firm, steady stools. |
Mobile Expand/Collapse Behaviour¶
Unchanged from v1.2 (module redesign is typographic, not behavioural). On mobile (<=900px), only the first 4 rows (Zinc, Manganese, Iodine, EPA + DHA) are visible on load. These four carry the explanatory burden — they demonstrate that specific micronutrients come from specific whole-food sources. Once a visitor sees zinc from oysters and iodine from kelp, they understand the formulation logic.
Rows 5-10 are hidden behind a "Show all nutrients" toggle button:
- Toggle appears below row 4, styled in Burnt Sienna with a chevron icon
- Click expands remaining 6 rows with a smooth animation (max-height + opacity transition, 0.3-0.4s)
- Toggle text changes to "Show fewer", chevron rotates 180deg
- Click again collapses rows and reverts text
aria-expandedattribute toggles for accessibility- On desktop (>900px): all 10 rows visible, toggle hidden. No change to desktop experience.
Design Notes¶
Cream background. Centred header with max-width 640px. The module is presented in the same white card container as before (16px border-radius, subtle shadow), but rows now render as two stacked lines rather than a three-column nutrient → arrow → source layout.
Typography (locked in Web Design System v1.3 Section 3.11):
| Element | Desktop | 900px | 600px |
|---|---|---|---|
| Label | Inter Semibold 600, 12px uppercase, Taupe, letter-spacing 0.08em | 12px | 11px |
| Statement | Inter Medium 500, 18px Espresso, line-height 1.5 | 17px | 16px |
Montserrat is deliberately not used in this module (the brand guide reserves Montserrat Bold 700 for display emphasis; the statement module is extended body copy and sits in Inter).
Spacing:
- Row padding inside the card: 24px left/right, 20px top/bottom desktop; 16px at <=600px
- 1px Warm Linen divider between rows, no divider after the last row
- 6px gap between label and statement within a row
Strategic Intent¶
This section is the mechanism that supports the "None." claim. After the signature moment, the visitor's immediate question is "if there are no supplements, where do the nutrients come from?" The module answers it nutrient by nutrient. The mobile collapse keeps the page scannable without hiding the proof — visitors who want to verify every nutrient can expand.
Why the v1.4 redesign from table to statement module: the previous design mapped nutrient → source with an arrow icon between. That layout communicated provenance but not rationale — it told the visitor where the nutrient came from but not why that source was chosen. For the Butternut Box audience (analytically minded, already literate in ingredient-list reading), provenance without context was incomplete. The table pattern also read as spec-sheet voice, a data layout that invited scanning rather than reading. The statement module gives each nutrient a complete thought (source plus rationale in one or two sentences) and reads as prose, which better matches the page's overall voice and rewards close reading.
Copy Decision Log¶
- v2.0 changed the title from "Every nutrient from a real source" to "Where every nutrient comes from." — more direct, framed as a question answer.
- v2.0 changed the intro from a FEDIAF-referencing paragraph to a conversational Q&A format: "If there are no supplements, where do the nutrients come from?"
- v2.0 updated nutrient names: "Digestive Enzymes" → "Digestive Support", "Stool Stability" → "Fibre"
- v2.0 updated source names to match formulation spec: "Oysters" → "Dehydrated Oyster", "Blue Mussels" → "Dehydrated Mussel", "Kelp" → "Kelp Meal", "Sunflower Seed" → "Sunflower Seed Meal", "Pumpkin + Psyllium" → "Pumpkin Fibre + Psyllium Husk"
- Mobile expand/collapse added March 2026 to improve mobile pacing — 10 rows created excessive scroll depth before reaching the image break.
- v1.4: all 10 rows rewritten from bare source names to source + rationale statements. Jargon removed from across the set: "COA-verified," "trace mineral," "synthetic oxide," "marine lipid profile," "enzyme-retaining," and other formulator vocabulary were stripped during the rewrite. The "not synthetic X" construction was deliberately minimised — it appears only on Taurine ("not a synthetic add-in"), where the reader has prior context from the signature section directly above. Specific numbers were retained where they earn their claim (the 1.2-1.4:1 Ca:P ratio on the Calcium : Phosphorus row) and removed where they would have added noise without earning anything. Intro paragraph, section label, and title are unchanged from v2.0.
Implementation Notes¶
The module rows are generated from a pipe-delimited string in a {% for %} loop, extended in v1.4 from the previous single-value Nutrient|Source format to Label|Statement. The schema contains nutrient_source block types (for future use) but the current HTML hardcodes the data. Do not refactor to use blocks — that is a separate ticket.
7. Image Break¶
A full-width lifestyle photograph providing a breathing moment between the formulation detail and the CTA.
Photography¶
Warm lifestyle image of a dog enjoying Protocol Raw Complete. Natural setting, warm lighting. The image communicates "healthy, happy, real life" rather than product photography. Image is set via the break_image schema setting in the Shopify customizer.
Design Notes¶
Full-bleed image at 50vh height (min 360px, max 560px). Object-fit cover. Lazy-loaded. No text overlay. At 600px, min-height drops to 280px.
Strategic Intent¶
A visual breathing moment. The page has delivered dense information (ingredient list, additive comparison, nutrient mapping) and needs a pause before the closing CTA. The image reinforces warmth and the dog-in-real-life aesthetic.
8. CTA Section¶
The closing call to action on a dark Espresso background. Three conditional states based on store settings.
Pre-Launch Mode (settings.prelaunch_mode = true)¶
When pre-launch mode is enabled, the closing CTA section replaces the standard CTA with a waitlist email capture form.
- Title: "Launching soon in London."
- Text: "We'll let you know when it's ready."
- Primary: Waitlist form (source:
ingredients) - Secondary: "Or explore your dog's feeding plan" text link to calculator
- Dark-background form styling via
.wl-darkwrapper class (snippets/waitlist-dark-styles.liquid)
Throttle Mode (settings.throttle_enabled = true, prelaunch_mode = false)¶
- Title: "That's the formulation. Here's how we verify it."
- Text: "Independent lab analysis confirms this recipe meets FEDIAF All Life Stages standards. See the data."
- Single CTA button using
settings.throttle_cta_textlinking tosettings.throttle_waitlist_url
Standard Mode (both flags false)¶
Title: That's the formulation. Here's how we verify it.
Text: Independent lab analysis confirms this recipe meets FEDIAF All Life Stages standards. See the data.
Primary Button: See nutrition standards (links to /pages/nutrition)
Secondary Button: Calculate your plan (links to /calculator)
Design Notes¶
Dark Espresso background with dot texture overlay (matching the signature section). Centred content constrained to 600px. Title in Montserrat Bold 40px white (32px at <=900px, 28px at <=600px). Text in Inter 17px at 65% white opacity. Primary button uses Burnt Sienna background with white text, 16px 32px padding, 12px border radius. Secondary button is transparent with 25% white border. Arrow icons animate on hover (translateX 3px). At 600px, buttons stack full width.
Strategic Intent¶
The CTA section is functional and direct. Its job is to convert visitors who have scrolled through the entire page and are ready to act. The dark Espresso background creates visual closure, matching the signature section's weight and signalling "this is the end of the page, time to decide." The CTA chain links to the Nutrition page as the natural next step in the content journey.
9. Page-Level Design Summary¶
Colour Usage¶
| Colour | Usage on Ingredients Page |
|---|---|
| Espresso (#2B2523) | Headlines, body text, card headers, signature + CTA backgrounds |
| Burnt Sienna (#B85C3A) | Section labels, CTA button, link text, nutrient toggle |
| Forest Green (#2D5144) | "None." in composition card |
| Mint Green (#7BC4A0) | "None." in signature section, "ours" card label + border |
| Cream (#F9F7F4) | Primary background, card bodies |
| Warm Linen (#EBE8E3) | Composition section background, dividers, borders, arrow icons |
| Taupe (#6B6360) | Subtitle text, nutrient names |
| Warm Gray (#918A85) | Contrast card labels (theirs) |
Typography¶
| Element | Specification |
|---|---|
| Hero headline | Montserrat Bold 700, 52px desktop / 40px tablet / 32px mobile, white |
| Section titles | Montserrat Bold 700, 36-40px desktop / 28-32px mobile, Espresso or white |
| Section labels | Inter Semibold 600, 12px, Burnt Sienna, uppercase, 0.15em spacing |
| Body text | Inter Regular 400, 16-19px, Taupe or Espresso depending on section |
| "None." signature | Montserrat Bold 700, 64px desktop / 48px mobile, Mint Green |
| "None." composition | Montserrat Bold 700, 28px, Forest Green |
| Statement module label | Inter Semibold 600, 12px desktop / 11px mobile, Taupe, uppercase, 0.08em spacing |
| Statement module statement | Inter Medium 500, 18px desktop / 17px at 900px / 16px at 600px, Espresso, line-height 1.5 |
| Toggle button | Inter Semibold 600, 14px, Burnt Sienna |
Spacing¶
| Section | Desktop Padding | Tablet (<=900px) | Mobile (<=600px) |
|---|---|---|---|
| Hero | Full bleed (70vh) | min 400px | min 360px |
| Composition | 80px | 64px | 48px |
| "None." Signature | 80px | 64px | 48px |
| The Formulation | 80px | 64px | 48px |
| Image Break | Full bleed (50vh) | — | min 280px |
| CTA | 80px | 64px | 56px |
Responsive Breakpoints¶
| Breakpoint | Key Changes |
|---|---|
| <=990px | Hero tightens to 55vh, composition padding reduces |
| <=900px | Grid layouts go single-column, nutrient toggle visible, contrast card gap 12px, chat launcher offset 80px |
| <=750px | Hero caps at 60vh / max 420px |
| <=600px | All padding tightens, buttons full-width, nutrient text sizes reduce |
10. Section Flow Summary¶
The complete scroll order of the Ingredients page, with each section's conversion job:
| # | Section | Conversion Job |
|---|---|---|
| 1 | Hero | Hook with transparency claim (real food, every ingredient named) |
| 2 | Composition | Establish transparency (full ingredient list, "Additives: None.") |
| 3 | "None." Signature | Create the visceral contrast moment (standard supplements vs "None.") |
| — | Inline Help (Kai) | Catch the "how is that possible?" question |
| 4 | The Formulation | Prove the claim (nutrient-by-nutrient sourcing) |
| 5 | Image Break | Breathing moment, reinforce warmth |
| 6 | CTA | Convert interest to next step (Nutrition page or calculator) |
11. Key Audience Considerations¶
The Butternut Box Customer¶
The primary audience for this page is the raw-curious premium buyer currently feeding Butternut Box or similar fresh cooked food. Key considerations:
- They already read ingredient lists. The page can't differentiate on "readable ingredients" alone, because they already have that. The differentiator is achieving completeness without synthetic shortcuts.
- They self-identify with "fresh." The signature section subtitle mentions "Even the fresh ones" because without it, this customer might mentally exclude their food from the comparison. They don't think of Butternut as "typical dog food." They think of kibble as typical.
- They need the comparison to include them without attacking them. "We took a different approach" validates their current choice before presenting the alternative. This is non-defensive positioning per brand voice guidelines.
- They're analytically minded. The nutrient mapping table satisfies their need for evidence. They don't just want to know the food is "natural." They want to see exactly where each nutrient comes from.
The Psychological Ladder¶
| Level | Feeling | Who Occupies It |
|---|---|---|
| Kibble | Convenient | Mass market |
| Fresh cooked | Loving | Butternut Box |
| Verified raw | Loving and correct | Protocol Raw |
This page's job is to move the visitor from "loving" to "loving and correct" by showing that whole-food formulation is the next step up from cooked food with synthetic additives.
12. Technical Notes¶
Schema¶
The section schema defines two settings (hero_image, break_image) and two block types (additive, nutrient_source). The block types are defined but not wired up — both the supplement list and the nutrient rows are hardcoded in the HTML. Do not refactor to use blocks; that is a separate ticket.
JavaScript¶
A single self-executing function scoped to .ing handles the nutrient table toggle. No global selectors, no external dependencies. The script is placed before the closing </div> of the .ing wrapper.
Chat Widget¶
The floating chat launcher (.pr-chat-launcher) is injected by an external chat service, not by the theme. The inline-help-kai snippet renders an inline prompt only. The ingredients page applies a mobile-only CSS offset to .pr-chat-launcher to prevent overlap with right-edge content.
13. Related Documents¶
| Document | Relationship |
|---|---|
| Visual Identity Guide v2.4 | Design system, colour palette, spacing and momentum system |
| Web Design System v1.3 | Component patterns, interaction standards, signature moment guidance. Section 3.11 defines the Statement List Module used by the Formulation section. |
| Brand Voice & Copy Guidelines v1.3 | Copy principles, terminology standards, tone guidance, Identity Principle |
| Website Documentation: Homepage v1.0 | Sister page documentation, shared design patterns |
| Website Structure (Final) | Full page architecture across all site pages |
| Calculator Documentation v7.0 | CTA destination specification |
| SOP-PROOF-01 v1.0 | Proof Portal system |
| Production Master Spec v2.7 | Ingredient specifications and formulation detail |
| Lab Validation Panel v1.1 | Testing protocols |
Version History¶
| Version | Date | Changes |
|---|---|---|
| 1.4 | 18 April 2026 | Headroom reframe. The Formulation section redesigned from a 2-column Nutrient → Source table to a statement-style module (documented as a reusable system pattern at Web Design System v1.3 Section 3.11). All 10 rows rewritten with source + rationale; jargon removed across the set ("COA-verified," "trace mineral," "synthetic oxide," "marine lipid profile," "enzyme-retaining"); "not synthetic X" construction minimised (retained only on Taurine, where the reader has prior context from the adjacent signature section); specific numbers retained where they earn the claim (1.2-1.4:1 Ca:P ratio). Typography table updated — retired rows "Nutrient sources" (Montserrat Bold 17px) and "Nutrient names" (Inter Semibold 13px); added rows "Statement module label" (Inter Semibold 12px desktop / 11px mobile, Taupe, uppercase, 0.08em) and "Statement module statement" (Inter Medium 500, 18px desktop / 17px at 900px / 16px at 600px, Espresso, line-height 1.5). Montserrat removed from this module — reserved per brand guide for display emphasis. Pipe-delimited string format in the {% for %} loop extended from Nutrient|Source to Label|Statement. Mobile expand/collapse behaviour preserved exactly (rows 5-10 behind "Show all nutrients" toggle with aria-expanded). Intro paragraph ("If there are no supplements, where do the nutrients come from?...") and section title ("Where every nutrient comes from.") unchanged. Strategic Intent subsection on The Psychological Ladder updated — "cooked food with synthetic premixes" replaced with "cooked food with synthetic additives" to match the consumer vocabulary now used sitewide. No changes to hero, composition card, "None." signature, inline Kai help, image break, or CTA section. Template version bumped to v2.1. Related Documents updated to Web Design System v1.3. |
| 1.3 | 10 April 2026 | Composition section: contextual line added below the ingredient card. "Organ meats, bone, and shellfish aren't unusual. They're where the nutrients are. Each ingredient replaces a synthetic supplement that other foods add separately." Inter 400, 16px, Taupe, max-width 640px centred, 24px above. Sits between the card and the "None." Signature section, framing the ingredients as deliberate (each replacing a synthetic supplement) rather than unusual. Mirrors the same line added to the homepage the-food section in Homepage v4.3, so visitors entering from either page see the same explanation. |
| 1.2 | 18 March 2026 | Full rewrite to match v2.0 template as live. Updated all copy (hero, signature, formulation). Removed Sustainability and Verification sections (cut in v2.0). Updated ingredient card to match exact live content. Updated nutrient mapping table (source names, row labels). Documented mobile expand/collapse for nutrient table (rows 5-10 behind toggle). Documented mobile contrast card gap tightening (24px → 12px). Documented chat launcher mobile offset. Added inline help (Kai) prompt documentation. Added responsive breakpoint summary. Added technical notes section. |
| 1.1 | March 2026 | Added pre-launch waitlist override to CTA section (source: ingredients). Updated CTA copy to match live chain pattern (Ingredients to Nutrition). |
| 1.0 | March 2026 | Initial release. Documents Ingredients page as at v7.0 template on 1 March 2026. Captures all copy decisions, strategic intent, and the Butternut Box customer framing rationale. |
Document Owner: Protocol Raw Operations