# Yourmainstays — Design Reference

Schema: Design Details DESIGN.md v3.2
Source: https://yourmainstays.com/
Captured: 2026-10-11
CSS measured: 2026-10-11T21:52:12.501Z at 1440×1000 — https://yourmainstays.com/
Values come from computed CSS; role labels are AI judgments. Live CSS may differ from an older screenshot.
Status: AI analysed; curator review pending
Rubric: 3.2
Observer: google/gemini-3.1-pro-preview
Judge: anthropic/claude-sonnet-5

## Design direction

The Mainstays website presents a vibrant, retro-inspired aesthetic characterized by a warm palette, expressive typography, and playful illustrations. The design uses large, impactful photography alongside bold, illustrative elements, creating an engaging and slightly whimsical tone. Typography pairs a confident, slightly rounded serif with a prominent, structured monospace font, contributing to the distinct, editorial feel. The overall presentation is rich and textural, making strong use of color blocking and fluid, organic shapes to separate content sections.

## Classification

- Industry: other
- Site type: Store
- Business model: Shopping
- Styles: retro, illustrative, bold, playful, photographic, warm-textural
- Platform: WordPress
- Technology: Not identified

## Typography

- Display: Exposure Trial — weight 396; size 76px; line-height 87.4px; tracking normal; Regular (95% role confidence, computed values)
- Heading: Exposure Trial — weight 396; size 48px; line-height 60px; tracking normal; Regular (95% role confidence, computed values)
- Body: Auger Mono — weight 500; size 16px; line-height 22.4px; tracking normal; Regular (85% role confidence, computed values)
- Mono: Auger Mono — weight 700; size 20px; line-height 25px; tracking normal; Regular (90% role confidence, computed values)

## Functional palette

- Canvas — canvas #FFF8E0: color-2: computed rgb(255, 248, 224); AI role: #FFF8E0 (cream) serves as the primary background color for large portions of the page. (95% role confidence, computed values)
- Text — text #FFF8E0: color-2: computed rgb(255, 248, 224); AI role: Cream (#FFF8E0) is used for text when placed over the dark red or brown backgrounds. (90% role confidence, computed values)
- Surface — surface #CB2821: color-1: computed rgb(203, 40, 33); AI role: #CB2821 (red) is used heavily as a background for major sections. (85% role confidence, computed values)
- Primary Action — primary action #CB2821: color-1: computed rgb(203, 40, 33); AI role: Red (#CB2821) is used for buttons like 'All Recipes' when on the cream canvas. (85% role confidence, computed values)
- Text — text #EB5C2E: color-8: computed rgb(235, 92, 46); AI role: An orange/red (#EB5C2E) is used for primary headings on the cream background. (85% role confidence, computed values)
- Surface — surface #FFC000: color-11: computed rgb(255, 192, 0); AI role: #FFC000 (mustard yellow) is used for the marquee strip. (80% role confidence, computed values)
- Surface — surface #682717: color-5: computed rgb(104, 39, 23); AI role: #682717 (dark brown) is used as the background for the map section. (80% role confidence, computed values)

## Exact computed CSS inventory

The browser extracted these declarations from rendered DOM at capture time. They are facts, not visual guesses. Image and video pixels are outside this inventory.

### Font configurations

```json
[
  {
    "id": "font-1",
    "family": "Exposure Trial",
    "fontStack": "\"Exposure Trial\", serif",
    "weight": "396",
    "size": "48px",
    "lineHeight": "60px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 5,
    "contexts": [
      {
        "tag": "h2",
        "text": "Not so average pantry staples and entertaining essentials",
        "top": 1096,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "Meals that’ll make you look good",
        "top": 3424,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "Spread the word",
        "top": 4547,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-2",
    "family": "Auger Mono",
    "fontStack": "\"Auger Mono\", monospace",
    "weight": "700",
    "size": "20px",
    "lineHeight": "25px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 4,
    "contexts": [
      {
        "tag": "h5",
        "text": "Red Relish",
        "top": 1710,
        "property": "font"
      },
      {
        "tag": "textpath",
        "text": "Gooey Grilled Cheese",
        "top": 3564,
        "property": "font"
      },
      {
        "tag": "textpath",
        "text": "Creamy Horseradish Dip",
        "top": 3814,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-3",
    "family": "Exposure Trial",
    "fontStack": "\"Exposure Trial\", serif",
    "weight": "396",
    "size": "76px",
    "lineHeight": "87.4px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "h1",
        "text": "Your pantry’s new main character",
        "top": 429,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "Everyone’s welcome at our table",
        "top": 2127,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-4",
    "family": "Auger Mono",
    "fontStack": "\"Auger Mono\", monospace",
    "weight": "500",
    "size": "20px",
    "lineHeight": "28px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 7,
    "contexts": [
      {
        "tag": "p",
        "text": "We’re here for the moments that bring people together: big feasts, couch snacks, and everything in b",
        "top": 2831,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "“The spicy beans and extra hot horseradish are the perfect combo for elevating your caesars”",
        "top": 4894,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "“My turkey sandwiches aren’t complete without the Mainstays cranberry sauces!”",
        "top": 4858,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-5",
    "family": "Auger Mono",
    "fontStack": "\"Auger Mono\", monospace",
    "weight": "500",
    "size": "16px",
    "lineHeight": "22.4px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "p",
        "text": "Allow us to introduce you to your burger's new best friend.",
        "top": 1743,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "(and maybe some chutney)",
        "top": 4623,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Discover your next favourite jar in-store today",
        "top": 5690,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-6",
    "family": "Auger Mono",
    "fontStack": "\"Auger Mono\", monospace",
    "weight": "700",
    "size": "16px",
    "lineHeight": "22.4px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 24,
    "contexts": [
      {
        "tag": "div",
        "text": "Crafted with care",
        "top": 956,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Jam-packed with flavour",
        "top": 956,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Pantry heroes",
        "top": 956,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-7",
    "family": "Auger Mono",
    "fontStack": "\"Auger Mono\", monospace",
    "weight": "700",
    "size": "16px",
    "lineHeight": "20px",
    "letterSpacing": "normal",
    "traits": "uppercase",
    "count": 15,
    "contexts": [
      {
        "tag": "a",
        "text": "About",
        "top": 38,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Products",
        "top": 38,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Recipes",
        "top": 38,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-8",
    "family": "Auger Mono",
    "fontStack": "\"Auger Mono\", monospace",
    "weight": "500",
    "size": "13px",
    "lineHeight": "18.2px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 6,
    "contexts": [
      {
        "tag": "span",
        "text": "Kyla S.",
        "top": 4864,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Jim D.",
        "top": 4823,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Mike P.",
        "top": 4765,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-9",
    "family": "Auger Mono",
    "fontStack": "\"Auger Mono\", monospace",
    "weight": "700",
    "size": "13px",
    "lineHeight": "10.4px",
    "letterSpacing": "normal",
    "traits": "uppercase",
    "count": 4,
    "contexts": [
      {
        "tag": "a",
        "text": "Wholesale",
        "top": 7283,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Contact",
        "top": 7283,
        "property": "font"
      },
      {
        "tag": "li",
        "text": "©themainstays",
        "top": 7286,
        "property": "font"
      }
    ]
  }
]
```

### Color configurations

```json
[
  {
    "id": "color-1",
    "hex": "#CB2821",
    "alpha": 1,
    "cssValue": "rgb(203, 40, 33)",
    "count": 103,
    "contexts": [
      {
        "tag": "header",
        "text": "Your pantry’s new main character Crafted with care Jam-packed with flavour Pantry heroes Thoughtfull",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "div",
        "text": "Crafted with care Jam-packed with flavour Pantry heroes Thoughtfully-sourced ingredients Bold, moder",
        "top": 936,
        "property": "border"
      },
      {
        "tag": "div",
        "text": "Crafted with care",
        "top": 956,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-2",
    "hex": "#FFF8E0",
    "alpha": 1,
    "cssValue": "rgb(255, 248, 224)",
    "count": 62,
    "contexts": [
      {
        "tag": "body",
        "text": "The Mainstays About Products Recipes Find us Your pantry’s new main character Crafted with care Jam-",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "path",
        "text": "",
        "top": 52,
        "property": "svg-fill"
      },
      {
        "tag": "a",
        "text": "About",
        "top": 38,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-3",
    "hex": "#FFECC9",
    "alpha": 1,
    "cssValue": "rgb(255, 236, 201)",
    "count": 9,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 4400,
        "property": "svg-fill"
      },
      {
        "tag": "section",
        "text": "Spread the word (and maybe some chutney) Kyla S. “The spicy beans and extra hot horseradish are the ",
        "top": 4451,
        "property": "background"
      },
      {
        "tag": "path",
        "text": "",
        "top": 4893,
        "property": "svg-stroke"
      }
    ]
  },
  {
    "id": "color-4",
    "hex": "#000000",
    "alpha": 1,
    "cssValue": "rgb(0, 0, 0)",
    "count": 18,
    "contexts": [
      {
        "tag": "svg",
        "text": "",
        "top": 1812,
        "property": "svg-fill"
      },
      {
        "tag": "text",
        "text": "Gooey Grilled Cheese",
        "top": 3564,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-5",
    "hex": "#682717",
    "alpha": 1,
    "cssValue": "rgb(104, 39, 23)",
    "count": 1,
    "contexts": [
      {
        "tag": "section",
        "text": "Find the Mainstays near you Discover your next favourite jar in-store today Find a Store",
        "top": 5301,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-6",
    "hex": "#3B8A32",
    "alpha": 1,
    "cssValue": "rgb(59, 138, 50)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "Mike P. “Caesars, salads or subs — this bean is giving main character energy.” View the product",
        "top": 4717,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-7",
    "hex": "#EE7700",
    "alpha": 1,
    "cssValue": "rgb(238, 119, 0)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "Lainie S. “I use the Mainstays peach and apricot chutney to make a quick, low-stress meal that taste",
        "top": 4783,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-8",
    "hex": "#EB5C2E",
    "alpha": 1,
    "cssValue": "rgb(235, 92, 46)",
    "count": 9,
    "contexts": [
      {
        "tag": "h2",
        "text": "Not so average pantry staples and entertaining essentials",
        "top": 1096,
        "property": "text"
      },
      {
        "tag": "h5",
        "text": "Red Relish",
        "top": 1710,
        "property": "text"
      },
      {
        "tag": "p",
        "text": "Allow us to introduce you to your burger's new best friend.",
        "top": 1743,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-9",
    "hex": "#FFFFFF",
    "alpha": 0.00392156862745098,
    "cssValue": "rgba(255, 248, 224, 0.004)",
    "count": 1,
    "contexts": [
      {
        "tag": "header",
        "text": "The Mainstays About Products Recipes Find us",
        "top": 0,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-10",
    "hex": "#4E65C3",
    "alpha": 1,
    "cssValue": "rgb(78, 101, 195)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "Kyla S. “The spicy beans and extra hot horseradish are the perfect combo for elevating your caesars”",
        "top": 4830,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-11",
    "hex": "#FFC000",
    "alpha": 1,
    "cssValue": "rgb(255, 192, 0)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "Crafted with care Jam-packed with flavour Pantry heroes Thoughtfully-sourced ingredients Bold, moder",
        "top": 936,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-12",
    "hex": "#3F3226",
    "alpha": 1,
    "cssValue": "rgb(63, 50, 38)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "Sarah R. “The sweet heat chutney is exactly that - the perfect combo of sweet and spicy.” View the p",
        "top": 4979,
        "property": "background"
      }
    ]
  }
]
```

### Extraction limits

- Font families are computed CSS declarations, not optical font identification.
- Colors are computed CSS converted by the browser to sRGB; image/video pixels and gradient stops are not sampled.
- Transparent colors are recorded with alpha but excluded from opaque palette role assignments.
- Only currently rendered DOM elements are sampled; closed shadow roots and iframe contents are excluded.

## Type, spacing, and shape language

- Spacing rhythm: Generous vertical spacing between sections, allowing the large illustrative and photographic elements to breathe. Content within sections is often clustered or arranged playfully rather than on a strict grid.
- Corner style: Mix of sharp corners (marquee strip), fully rounded pills (buttons), and moderately rounded rectangles (testimonial cards, social imagery).
- Radius: Buttons appear to use fully rounded pill shapes. Testimonial cards and some images use moderate border radii (e.g., ~12-16px).
- Borders: Outlines are heavily featured in the red illustrations. Otherwise, borders are minimal, relying on color blocking for separation.
- Buttons: Pill-shaped, solid fill colors that contrast with their backgrounds (e.g., cream on red, red on cream), uppercase mono typography.
- Content width: Content generally spans the full width of the viewport (1440px), with elements stretching to the edges, though text blocks are constrained for readability.
- Density: The design feels rich and visually dense due to the large typography, overlapping elements, and scattered illustrations, but it maintains readability through distinct color blocking.
- Evidence: Observed via the layout of sections, button shapes, and illustration styles across the page.

## Sections

Gallery section count: 8. Each entry corresponds to one gallery capture.

1. **Hero — Pantry Main Character Hero** (Home)
   AI suggestion (98% confidence): Complete page-opening hero with overlaid navigation, centered brand mark, bold product lifestyle photography, headline, and a closing benefits ribbon.
   Capture: 1440×1002px; page bounds 0–1002px of 7994px; source section ID: `32a6aec7-6c86-4909-81bc-10f9d1907111`; image: https://media.designdetails.io/library/792c0f66e496aae0ddbb2d338d74e5411dc6fc93368aa52fae6d259a9363413e/32a6aec7-6c86-4909-81bc-10f9d1907111.webp
   SECTION.md v3.2: `32a6aec7-6c86-4909-81bc-10f9d1907111` (deterministic evidence; editorial review pending)
2. **Features — Everyone’s welcome at our table** (Home)
   Reusable feature composition from Home, organized around “Everyone’s welcome at our table”.
   Capture: 1440×1132px; page bounds 2031–3163px of 7994px; source section ID: `5c49e362-f60f-4a4a-bb43-958cf560c6ce`; image: https://media.designdetails.io/library/243c44c88c4937a0202c3ad8e8e277e3a9affee2d111366e3acf5134379ab2ee/section_crop-5c49e362-2026-10-11T21-52-24-047Z.webp
   SECTION.md v3.2: `5c49e362-f60f-4a4a-bb43-958cf560c6ce` (deterministic evidence; editorial review pending)
3. **Features — Mainstays in the wild** (Home)
   Reusable feature composition from Home, organized around “Mainstays in the wild”.
   Capture: 1440×1013px; page bounds 6062–7075px of 7994px; source section ID: `efea9c8f-a638-48c2-a516-b02bd774f808`; image: https://media.designdetails.io/library/6f11918cb485d2a57fc94a4ee26aae1c13273e9b9e09ae72e9b6d85c89e3165c/section_crop-efea9c8f-2026-10-11T21-52-30-159Z.webp
   SECTION.md v3.2: `efea9c8f-a638-48c2-a516-b02bd774f808` (deterministic evidence; editorial review pending)
4. **Other — Featured Pantry Product Showcase** (Home)
   AI-proposed category: product-carousel
AI suggestion (96% confidence): Self-contained product carousel-style showcase with a section heading, neighboring product previews, a central featured jar, navigation arrows, description, and product CTA.
   Capture: 1440×993px; page bounds 1005–1998px of 7994px; source section ID: `c39174a1-8f50-4b87-8656-73dc2115e75d`; image: https://media.designdetails.io/library/a5fa353ab55789501865e4a4ba4b1b4532a45d303dbc80fbd491309619b8a62f/c39174a1-8f50-4b87-8656-73dc2115e75d.webp
   SECTION.md v3.2: `c39174a1-8f50-4b87-8656-73dc2115e75d` (deterministic evidence; editorial review pending)
5. **Gallery — Meals That’ll Make You Look Good** (Home)
   AI suggestion (97% confidence): Complete recipe-discovery section with a central headline and CTA, three labeled circular food images, playful illustrations, and clear curved boundaries.
   Capture: 1440×1224px; page bounds 3206–4430px of 7994px; source section ID: `21658bb9-5bba-41ab-931c-8432b98b87f7`; image: https://media.designdetails.io/library/650efc0970bea9088add94307fc5763ab5542c552bd9d2a3c080beacc26f1790/21658bb9-5bba-41ab-931c-8432b98b87f7.webp
   SECTION.md v3.2: `21658bb9-5bba-41ab-931c-8432b98b87f7` (deterministic evidence; editorial review pending)
6. **Testimonials — Spread the Word** (Home)
   AI suggestion (95% confidence): Complete testimonial carousel section with its own heading, review cards, product imagery, navigation controls, and a clear ending divider.
   Capture: 1440×780px; page bounds 4430–5210px of 7994px; source section ID: `b43974d5-61c3-47e2-b119-202f54fd4d3a`; image: https://media.designdetails.io/library/162c0f9b9eb4d8a15adc80a0371b33035ba1cf7ce449e43c8b6407bbe22ffbae/b43974d5-61c3-47e2-b119-202f54fd4d3a.webp
   SECTION.md v3.2: `b43974d5-61c3-47e2-b119-202f54fd4d3a` (deterministic evidence; editorial review pending)
7. **Other — Find the Mainstays Near You** (Home)
   AI-proposed category: store-locator
AI suggestion (97% confidence): Complete store-finder section with a clear headline, supporting copy, CTA, and a distinctive illustrated Canada location map.
   Capture: 1440×765px; page bounds 5301–6066px of 7994px; source section ID: `24a91f66-97ea-4450-8fa7-8d3ea819bfba`; image: https://media.designdetails.io/library/0808a473cbebbe320a5ce0e1ca2713b8ae1e564591de2cfecdcc1ab5b445bf6b/24a91f66-97ea-4450-8fa7-8d3ea819bfba.webp
   SECTION.md v3.2: `24a91f66-97ea-4450-8fa7-8d3ea819bfba` (deterministic evidence; editorial review pending)
8. **Footer — Main Course Materials Footer** (Home)
   AI suggestion (96% confidence): Complete, substantial illustrated footer with oversized branding, social/contact links, credits, and cohesive food-and-table artwork.
   Capture: 1440×911px; page bounds 7083–7994px of 7994px; source section ID: `b32e1090-fae3-44c6-a8ec-2b9734e637d2`; image: https://media.designdetails.io/library/e45422955170a3cbee50feb09ba4f8cc9a43b592a90f479b5860b662881ff7f0/b32e1090-fae3-44c6-a8ec-2b9734e637d2.webp
   SECTION.md v3.2: `b32e1090-fae3-44c6-a8ec-2b9734e637d2` (deterministic evidence; editorial review pending)

## Capture and motion evidence

- Desktop screenshot: https://media.designdetails.io/library/33d79d33eb052142a31d7c8f055c3ecf26f51af2ad25bcdee14ed696ffc67ab0/desktop_full-983c2369-2026-10-11T21-52-12-517Z.webp
- Mobile screenshot: https://media.designdetails.io/library/8c56dcef6fc40ac5bc86115e261c6216ddf7a264baa122faadb86378703a0dad/mobile_full-983c2369-2026-10-11T21-53-04-637Z.webp
- Open Graph image: https://media.designdetails.io/library/cef9ece6e272b44efd2b0d17309864c1f8db09a01b8420206c3d1b4fb5d2a255/og_image-983c2369-2026-10-11T21-52-20-205Z.webp
- Full-page video: https://media.designdetails.io/library/4d10380967d9a0865a47adfd9524c2cd70c983bdd4684d47f82e8b6e31c17240/motion-1791756149477.mp4
- Video poster: https://media.designdetails.io/library/ee250bb81c070ee5db5f9836036e3b4f4a669063e322daff3834b5086b13f1d7/motion-poster-1791756149477.webp
- Motion status: Recording attached. Consult the motion score and section motion records; do not infer exact easing from frames alone.

## Implementation contract

- Treat computed CSS values, screenshot dimensions, and section bounds as measured evidence.
- Treat typography roles, palette roles, style labels, quality scores, and prose analysis as model or curator judgments.
- Rebuild the page in the listed section order. Request SECTION.md v3.2 using the listed ID. Promoted IDs include editorial observation and judgment; raw gallery IDs still return deterministic geometry, site design facts, media treatment, and explicit evidence gaps.
- Do not invent exact responsive behavior, motion curves, or hidden interaction states when they were not captured.

## Reusable components

- Navigation Bar
- Hero With Background Imagery
- Carousel
- Testimonial Card
- Primary Button
- Logo Strip
- Footer
- Wavy Section Divider
- Circular Image With Curved Text
- Scrolling Marquee

## Quality rubric

Overall: 60.55/100 (Good)
Evidence coverage: 100%
Judge tier: Good
Verdict: Mainstays executes a warm, illustrated retro-food aesthetic with real typographic and motion consistency across hero, product, recipe, testimonial, and footer sections, producing a cohesive good-tier experience. It falls short of 'strong' because its core devices — marquee band, wavy dividers, circular recipe crops, pill buttons, mono+serif pairing — closely track a widely-used contemporary DTC template, and the testimonial card colors break from the otherwise disciplined palette; a next iteration pushing restraint and one or two genuinely signature interactions would be needed to move up a tier.

- Typography (15%): 66 — A two-voice system (a rounded serif 'Exposure Trial' for display headlines and 'Auger Mono' for body, labels, nav, and button text) is applied consistently across hero, section headers, product labels, testimonials, and footer, with a clear size hierarchy (76px hero, 48px section heads, 20/16/13px support text). The pairing gives the page a distinct editorial-retro voice, though it is a now-familiar serif+mono combination rather than a bespoke typographic invention, and the mono is pushed into many small roles (quotes, nav, footer links) somewhat uniformly rather than varied purposefully.
- Color (10%): 62 — A warm retro palette (cream #FFF8E0 canvas, red #CB2821, mustard #FFC000 marquee, dark brown #682717 map) is used for structural color-blocking and reads cohesively with the illustration style. However, the testimonial grid introduces a scattershot set of saturated accent hues (green #3B8A32, orange #EE7700, blue #4E65C3, dark neutral #3F3226) that don't visibly map to a rule (e.g., product-category color-coding isn't evident from the data), diluting the restraint of the core palette.
- Layout (20%): 67 — The page moves through a varied, section-specific layout vocabulary — full-bleed photographic hero, marquee strip, horizontal product carousel, large colored editorial block with overlapping/rotated photo cards, scattered circular recipe crops with curved typography, testimonial card row, logo strip, full-width map, social grid, and an illustration-dense footer — connected by consistent wavy section dividers. This is a genuine multi-section system rather than a single hero trick, with deliberate breathing room and layered illustration motifs recurring through the page.
- Motion (20%): 64 — Multiple sections carry distinct scroll-triggered entrances — carousel slide-in with an accompanying icon, staggered rectangular image reveals, rotated illustration entrance, scaling/translating circular recipe images, sliding testimonial cards, sequential map-pin pops, and a progressively-assembling footer illustration. This is a broad, consistently-applied motion vocabulary (translate, scale, rotate, stagger) spanning most of the page rather than one hero effect, which supports a 'good' rather than merely serviceable motion score.
- Originality (25%): 47 — The retro-illustrated food-brand formula on display here — cream background, red hand-drawn line art, circular photo crops with curved typography, a scrolling marquee band of taglines, and a mono+serif type pairing — is a well-executed instance of a now-common contemporary DTC/editorial template rather than a set of hard-to-substitute original ideas. The curved recipe-title treatment and the sequential map-pin animation are the most specific devices, but the overall system reads as skillful reskinning of familiar patterns (wavy dividers, marquee strips, pill buttons, testimonial card grids) rather than landmark invention.
- Content (10%): 65 — Photography, illustration, and copy are reasonably matched to purpose: product jars appear in lifestyle tablescapes, recipe photos are tied to specific dishes, testimonials cite named customers with a product reference and CTA, and the stockist logo strip and map support a 'where to buy' narrative. Illustrations (wine glass, cheese plate, map pins) are thematically appropriate rather than arbitrary decoration.

Coverage: 100% of the current weighted rubric. Compare overall scores only at similar evidence coverage.

Formula: weighted mean of scored axes — Typography 15%, Color 10%, Layout 20%, Motion 20%, Originality 25%, Content 10%. Inconclusive and not-assessed axes are excluded and coverage is shown explicitly.

## Verification checklist

- [x] Score evidence
- [x] Design tokens
- [x] Functional palette
- [x] Normalized sections
- [x] Reusable components
- [x] Typography roles

## Curator notes

A warm full bleed table photo and bold cream headline open the page, then a scrolling ticker and jar carousel on cream let visitors browse flavours at a glance. Deep red, orange and brown blocks pace each chapter down the page, while loose hand drawn icons of peppers and wine glasses keep the mood playful rather than corporate.

## Usage guidance

Use this record as design evidence. Combine it with other references and create an original implementation; do not reproduce the source website or its proprietary copy and assets.