# Pantry Main Character Hero — Section Design Reference

Schema: Design Details SECTION.md v3.2
Source: https://yourmainstays.com/
Website: Yourmainstays
Section ID: 32a6aec7-6c86-4909-81bc-10f9d1907111
Status: deterministic evidence partially captured; editorial AI review pending

## Purpose

This is a hero section on the Home page. Use the attached crop and measured browser facts to reconstruct its composition. Do not infer unmeasured source values.

## Layout

captured layout

## Visual signature

retro, illustrative, bold, playful, photographic, warm-textural treatment at 1440×1002px. The crop spans 0–1002px of a 7994px page.

## 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

## Evidence note

The geometry, typography, colors, media, and animation parameters below come from saved HTML/CSS/browser evidence when present. Website-level roles are supplied separately. Editorial section judgment remains pending unless the MCP resolves this source ID to a promoted canonical record.

## Build blueprint v3.2

### Purpose and classification

- Canonical type: hero
- Source type: hero
- Structure: captured layout
- Layout: captured layout
- Styles: retro, illustrative, bold, playful, photographic, warm-textural
- 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
- Purpose: hero section from the Home page of Yourmainstays.
- Visual signature: Captured visual surface with captured layout. Inspect the crop for image and content hierarchy.

### Crop and composition

- Crop: 1440×1002px; aspect ratio 1.437:1
- Page bounds: 0–1002px of 7994px
- Guidance: Preserve the documented hierarchy and relationships; exact measurements were not deterministically captured.

### Exact typography evidence

The sectionScale values were measured inside this crop. The siteRoles values explain how those faces function across the source website; they must not replace section measurements.

```json
{
  "sectionScale": [
    {
      "role": "section heading",
      "family": "Exposure Trial",
      "stack": "\"Exposure Trial\", serif",
      "size": "76px",
      "weight": "396",
      "lineHeight": "87.4px",
      "letterSpacing": "normal",
      "sample": "Your pantry’s new main character",
      "element": "h1",
      "occurrences": 2,
      "sourceId": "font-3"
    },
    {
      "role": "UI/supporting text",
      "family": "Auger Mono",
      "stack": "\"Auger Mono\", monospace",
      "size": "16px",
      "weight": "700",
      "lineHeight": "22.4px",
      "letterSpacing": "normal",
      "sample": "Crafted with care",
      "element": "div",
      "occurrences": 24,
      "sourceId": "font-6"
    },
    {
      "role": "UI/supporting text",
      "family": "Auger Mono",
      "stack": "\"Auger Mono\", monospace",
      "size": "16px",
      "weight": "700",
      "lineHeight": "20px",
      "letterSpacing": "normal",
      "sample": "About",
      "element": "a",
      "occurrences": 15,
      "sourceId": "font-7"
    }
  ],
  "siteRoles": [
    {
      "role": "display",
      "size": "76px",
      "family": "Exposure Trial",
      "source": "computed",
      "traits": "Regular",
      "weight": "396",
      "evidence": "font-3: computed CSS at 1440×1000; AI role: Exposure Trial serif, 76px size. Used for the largest, most impactful headlines like the hero text.",
      "sampleId": "font-3",
      "confidence": 0.95,
      "lineHeight": "87.4px",
      "letterSpacing": "normal"
    },
    {
      "role": "heading",
      "size": "48px",
      "family": "Exposure Trial",
      "source": "computed",
      "traits": "Regular",
      "weight": "396",
      "evidence": "font-1: computed CSS at 1440×1000; AI role: Exposure Trial serif, 48px size. Used for secondary section titles ('Not so average pantry staples...').",
      "sampleId": "font-1",
      "confidence": 0.95,
      "lineHeight": "60px",
      "letterSpacing": "normal"
    },
    {
      "role": "body",
      "size": "16px",
      "family": "Auger Mono",
      "source": "computed",
      "traits": "Regular",
      "weight": "500",
      "evidence": "font-5: computed CSS at 1440×1000; AI role: Auger Mono, 16px size. Used for paragraph text and smaller descriptive copy.",
      "sampleId": "font-5",
      "confidence": 0.85,
      "lineHeight": "22.4px",
      "letterSpacing": "normal"
    },
    {
      "role": "mono",
      "size": "20px",
      "family": "Auger Mono",
      "source": "computed",
      "traits": "Regular",
      "weight": "700",
      "evidence": "font-2: computed CSS at 1440×1000; AI role: Auger Mono is used throughout in various weights and sizes (e.g., font-2, font-4, font-6) for body copy, labels, and navigation, establishing a strong monospaced presence.",
      "sampleId": "font-2",
      "confidence": 0.9,
      "lineHeight": "25px",
      "letterSpacing": "normal"
    }
  ]
}
```

### Exact color evidence

The section samples record where each computed value was used. Functional roles come from the website-level classifier and remain separate.

```json
{
  "sectionUsage": [
    {
      "value": "#CB2821",
      "cssValue": "rgb(203, 40, 33)",
      "alpha": 1,
      "appliedAs": [
        "background",
        "border",
        "text"
      ],
      "occurrences": 103,
      "sourceId": "color-1"
    },
    {
      "value": "#FFF8E0",
      "cssValue": "rgb(255, 248, 224)",
      "alpha": 1,
      "appliedAs": [
        "background",
        "svg-fill",
        "text"
      ],
      "occurrences": 62,
      "sourceId": "color-2"
    },
    {
      "value": "#FFFFFF",
      "cssValue": "rgba(255, 248, 224, 0.004)",
      "alpha": 0.00392156862745098,
      "appliedAs": [
        "background"
      ],
      "occurrences": 1,
      "sourceId": "color-9"
    },
    {
      "value": "#FFC000",
      "cssValue": "rgb(255, 192, 0)",
      "alpha": 1,
      "appliedAs": [
        "background"
      ],
      "occurrences": 1,
      "sourceId": "color-11"
    }
  ],
  "functionalPalette": [
    {
      "hex": "#FFF8E0",
      "name": "canvas",
      "role": "canvas",
      "source": "computed",
      "evidence": "color-2: computed rgb(255, 248, 224); AI role: #FFF8E0 (cream) serves as the primary background color for large portions of the page.",
      "sampleId": "color-2",
      "confidence": 0.95
    },
    {
      "hex": "#FFF8E0",
      "name": "text",
      "role": "text",
      "source": "computed",
      "evidence": "color-2: computed rgb(255, 248, 224); AI role: Cream (#FFF8E0) is used for text when placed over the dark red or brown backgrounds.",
      "sampleId": "color-2",
      "confidence": 0.9
    },
    {
      "hex": "#CB2821",
      "name": "surface",
      "role": "surface",
      "source": "computed",
      "evidence": "color-1: computed rgb(203, 40, 33); AI role: #CB2821 (red) is used heavily as a background for major sections.",
      "sampleId": "color-1",
      "confidence": 0.85
    },
    {
      "hex": "#CB2821",
      "name": "primary action",
      "role": "primary-action",
      "source": "computed",
      "evidence": "color-1: computed rgb(203, 40, 33); AI role: Red (#CB2821) is used for buttons like 'All Recipes' when on the cream canvas.",
      "sampleId": "color-1",
      "confidence": 0.85
    },
    {
      "hex": "#EB5C2E",
      "name": "text",
      "role": "text",
      "source": "computed",
      "evidence": "color-8: computed rgb(235, 92, 46); AI role: An orange/red (#EB5C2E) is used for primary headings on the cream background.",
      "sampleId": "color-8",
      "confidence": 0.85
    },
    {
      "hex": "#FFC000",
      "name": "surface",
      "role": "surface",
      "source": "computed",
      "evidence": "color-11: computed rgb(255, 192, 0); AI role: #FFC000 (mustard yellow) is used for the marquee strip.",
      "sampleId": "color-11",
      "confidence": 0.8
    },
    {
      "hex": "#682717",
      "name": "surface",
      "role": "surface",
      "source": "computed",
      "evidence": "color-5: computed rgb(104, 39, 23); AI role: #682717 (dark brown) is used as the background for the map section.",
      "sampleId": "color-5",
      "confidence": 0.8
    }
  ]
}
```

### Design tokens

```json
{
  "radius": "Buttons appear to use fully rounded pill shapes. Testimonial cards and some images use moderate border radii (e.g., ~12-16px).",
  "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.",
  "borderStyle": "Outlines are heavily featured in the red illustrations. Otherwise, borders are minimal, relying on color blocking for separation.",
  "buttonStyle": "Pill-shaped, solid fill colors that contrast with their backgrounds (e.g., cream on red, red on cream), uppercase mono typography.",
  "cornerStyle": "Mix of sharp corners (marquee strip), fully rounded pills (buttons), and moderately rounded rectangles (testimonial cards, social imagery).",
  "contentWidth": "Content generally spans the full width of the viewport (1440px), with elements stretching to the edges, though text blocks are constrained for readability.",
  "spacingRhythm": "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."
}
```

### Reconstruction specification

This is the implementation contract for the captured desktop viewport. Prefer section-specific facts here over general website descriptions.

- Root container was not deterministically isolated.
- Layout containers: 0; cards/surfaces: 0; media elements: 0; browser animations: 0.

#### Container, grid, and spacing

```json
{
  "viewport": {
    "width": null,
    "captureBounds": null
  },
  "container": null,
  "spacing": {
    "observedGapsPx": [],
    "representativeContentWidthsPx": []
  },
  "columns": []
}
```

#### Cards and surfaces

```json
{
  "cards": [],
  "surfaces": null
}
```

#### Media treatment

```json
[]
```

#### Browser-exposed animation parameters

```json
[]
```

### Measured geometry, surfaces, media, and animation

These raw values come from the saved element map and computed styles. Empty arrays mean the fact was not captured; they are not permission to invent source values.

```json
null
```

### Observed motion

No timestamped authored motion is attached. Use only restrained baseline transitions.

The browser animation records above are deterministic parameters captured from active browser animations. The timestamped observations describe what Gemini saw in the video. Treat them as complementary evidence. When either source is empty or they conflict, state the uncertainty instead of inventing timing or easing.

### Responsive contract

- Measured viewport: unknownpx wide.
- Mobile/tablet values: not measured by this section evidence unless a separate capture is explicitly listed.
- Preserve hierarchy and sequence; collapse simultaneous columns only where needed, maintain media aspect ratios, and verify touch targets and text wrapping at target breakpoints.

### Structure versus visual skin

- Preserve: content hierarchy, layout relationships, section rhythm, interaction purpose.
- Adapt: brand colors, font family, copy, imagery, icons, decorative details.
- Rule: Preserve the observed design logic while creating original branding, copy, assets, and implementation details.

### Adaptation and dependencies

- Effort: Not assessed
- What transfers: Documented hierarchy and composition
- Dependencies: None recorded
- Guidance: Adapt the pattern to the new product and content.

### Evidence readiness

- Coverage: 6/7
- Can build: Yes
- Missing facts: section-level geometry, surfaces, media treatment, and animation parameters; timestamped authored motion
- Warning: Buildable with adaptations for these unsupported facts: section-level geometry, surfaces, media treatment, and animation parameters; timestamped authored motion.

### Agent implementation prompt

Create an original hero section inspired by the design evidence titled “Pantry Main Character Hero”.

Purpose: hero section from the Home page of Yourmainstays.

Structure: captured layout. Source layout label: captured layout. Preserve the documented hierarchy and relationships; exact measurements were not deterministically captured.

Visual signature to preserve at the pattern level: Captured visual surface with captured layout. Inspect the crop for image and content hierarchy.

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.

Style direction: retro, illustrative, bold, playful, photographic, warm-textural.

Observed crop: 1440×1002px (1.437:1). Treat this as evidence of composition, not a mandatory output size.

Typography evidence: {"role":"display","size":"76px","family":"Exposure Trial","source":"computed","traits":"Regular","weight":"396","evidence":"font-3: computed CSS at 1440×1000; AI role: Exposure Trial serif, 76px size. Used for the largest, most impactful headlines like the hero text.","sampleId":"font-3","confidence":0.95,"lineHeight":"87.4px","letterSpacing":"normal"} {"role":"heading","size":"48px","family":"Exposure Trial","source":"computed","traits":"Regular","weight":"396","evidence":"font-1: computed CSS at 1440×1000; AI role: Exposure Trial serif, 48px size. Used for secondary section titles ('Not so average pantry staples...').","sampleId":"font-1","confidence":0.95,"lineHeight":"60px","letterSpacing":"normal"} {"role":"body","size":"16px","family":"Auger Mono","source":"computed","traits":"Regular","weight":"500","evidence":"font-5: computed CSS at 1440×1000; AI role: Auger Mono, 16px size. Used for paragraph text and smaller descriptive copy.","sampleId":"font-5","confidence":0.85,"lineHeight":"22.4px","letterSpacing":"normal"} {"role":"mono","size":"20px","family":"Auger Mono","source":"computed","traits":"Regular","weight":"700","evidence":"font-2: computed CSS at 1440×1000; AI role: Auger Mono is used throughout in various weights and sizes (e.g., font-2, font-4, font-6) for body copy, labels, and navigation, establishing a strong monospaced presence.","sampleId":"font-2","confidence":0.9,"lineHeight":"25px","letterSpacing":"normal"}

Color evidence: {"hex":"#FFF8E0","name":"canvas","role":"canvas","source":"computed","evidence":"color-2: computed rgb(255, 248, 224); AI role: #FFF8E0 (cream) serves as the primary background color for large portions of the page.","sampleId":"color-2","confidence":0.95} {"hex":"#FFF8E0","name":"text","role":"text","source":"computed","evidence":"color-2: computed rgb(255, 248, 224); AI role: Cream (#FFF8E0) is used for text when placed over the dark red or brown backgrounds.","sampleId":"color-2","confidence":0.9} {"hex":"#CB2821","name":"surface","role":"surface","source":"computed","evidence":"color-1: computed rgb(203, 40, 33); AI role: #CB2821 (red) is used heavily as a background for major sections.","sampleId":"color-1","confidence":0.85} {"hex":"#CB2821","name":"primary action","role":"primary-action","source":"computed","evidence":"color-1: computed rgb(203, 40, 33); AI role: Red (#CB2821) is used for buttons like 'All Recipes' when on the cream canvas.","sampleId":"color-1","confidence":0.85} {"hex":"#EB5C2E","name":"text","role":"text","source":"computed","evidence":"color-8: computed rgb(235, 92, 46); AI role: An orange/red (#EB5C2E) is used for primary headings on the cream background.","sampleId":"color-8","confidence":0.85} {"hex":"#FFC000","name":"surface","role":"surface","source":"computed","evidence":"color-11: computed rgb(255, 192, 0); AI role: #FFC000 (mustard yellow) is used for the marquee strip.","sampleId":"color-11","confidence":0.8} {"hex":"#682717","name":"surface","role":"surface","source":"computed","evidence":"color-5: computed rgb(104, 39, 23); AI role: #682717 (dark brown) is used as the background for the map section.","sampleId":"color-5","confidence":0.8}

Typography measured inside this section: {"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-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"}]}

Colors measured inside this section: {"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-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-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"}]}

No saved element-map measurements were available; do not invent exact source spacing, card, media, or animation values.

Do not invent signature motion. Use only restrained baseline transitions if the product needs them.

Transfer the documented hierarchy and composition rather than source copy or assets.

No explicit dependencies were recorded.

Adapt the pattern to the new product and content.

Use new copy, imagery, branding, and implementation details. Do not reproduce the source website or its proprietary assets.