# Everyone’s welcome at our table — Section Design Reference

Schema: Design Details SECTION.md v3.2
Source: https://yourmainstays.com/
Website: Yourmainstays
Section ID: 5c49e362-f60f-4a4a-bb43-958cf560c6ce
Status: deterministic evidence captured; editorial AI review pending

## Purpose

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

## Layout

1440×1132px root; flex

## Visual signature

retro, illustrative, bold, playful, photographic, warm-textural treatment at 1440×1132px. The crop spans 2031–3163px 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: features
- Source type: features
- Structure: 1440×1132px root; flex
- Layout: 1440×1132px root; flex
- 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: features section from the Home page of Yourmainstays.
- Visual signature: rgb(203, 40, 33) with 1440×1132px root; flex. Inspect the crop for image and content hierarchy.

### Crop and composition

- Crop: 1440×1132px; aspect ratio 1.272:1
- Page bounds: 2031–3163px 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": "card/subheading",
      "family": "Auger Mono",
      "stack": "\"Auger Mono\", monospace",
      "size": "20px",
      "weight": "500",
      "lineHeight": "28px",
      "letterSpacing": "normal",
      "sample": "We’re here for the moments that bring people together: big feasts, couch snacks, and everything in b",
      "element": "p",
      "occurrences": 7,
      "sourceId": "font-4"
    }
  ],
  "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": [],
  "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: 1440×1132px; flex; padding {"top":"96px","right":"48px","bottom":"96px","left":"48px"}; gap normal; background rgb(203, 40, 33); radius 0px.
- Representative content widths: 580, 540, 510, 318, 272px.
- Layout containers: 1; cards/surfaces: 0; media elements: 4; browser animations: 0.

#### Container, grid, and spacing

```json
{
  "viewport": {
    "width": 1440,
    "captureBounds": {
      "top": 2031,
      "bottom": 3163,
      "pageHeight": 7994
    }
  },
  "container": {
    "size": "1440×1132px",
    "position": "x 0px, y 2031px",
    "display": "flex",
    "positionMode": "static",
    "padding": {
      "top": "96px",
      "right": "48px",
      "bottom": "96px",
      "left": "48px"
    },
    "margin": {
      "top": "0px",
      "right": "0px",
      "bottom": "0px",
      "left": "0px"
    },
    "gap": "normal",
    "columns": "not captured",
    "background": "rgb(203, 40, 33)",
    "radius": "0px",
    "border": "0px none rgb(255, 248, 224)",
    "shadow": "none",
    "overflow": "visible"
  },
  "spacing": {
    "observedGapsPx": [],
    "representativeContentWidthsPx": [
      580,
      540,
      510,
      318,
      272
    ]
  },
  "columns": [
    {
      "element": "section · Everyone’s welcome at our table We’re here for the moments that bring people together: big feasts, c",
      "size": "1440×1132px",
      "position": "x 0px, y 2031px",
      "display": "flex",
      "template": "not captured",
      "direction": "column",
      "gap": "normal"
    }
  ]
}
```

#### Cards and surfaces

```json
{
  "cards": [],
  "surfaces": {
    "radii": [
      "24px"
    ],
    "borders": [],
    "shadows": []
  }
}
```

#### Media treatment

```json
[
  {
    "element": "img · img",
    "size": "510×638px",
    "position": "x 589px, y 2128px",
    "aspectRatio": 0.8,
    "objectFit": "cover",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "clip",
    "source": "https://yourmainstays.com/wp-content/uploads/2025/12/Home-About-1-min-560x702.jpg"
  },
  {
    "element": "img · img",
    "size": "318×398px",
    "position": "x 105px, y 2528px",
    "aspectRatio": 0.8,
    "objectFit": "cover",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "clip",
    "source": "https://yourmainstays.com/wp-content/uploads/2025/12/home-about-left_v2-320x400.jpg"
  },
  {
    "element": "img · img",
    "size": "272×335px",
    "position": "x 1084px, y 2332px",
    "aspectRatio": 0.8,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "clip",
    "source": "https://yourmainstays.com/wp-content/uploads/2025/12/home-about-illustration.svg"
  },
  {
    "element": "svg · svg",
    "size": "230×96px",
    "position": "x 564px, y 2995px",
    "aspectRatio": 2.4,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "hidden",
    "source": "source not captured"
  }
]
```

#### 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
{
  "schema": "little-details-section-measurements-v1",
  "source": "saved DOM/CSS element and animation maps",
  "capturedAt": "2026-10-11T21:52:15.865Z",
  "viewportWidth": 1440,
  "bounds": {
    "top": 2031,
    "bottom": 3163,
    "pageHeight": 7994
  },
  "root": {
    "id": "ld-264",
    "tag": "section",
    "role": null,
    "label": "Everyone’s welcome at our table We’re here for the moments that bring people together: big feasts, c",
    "rect": {
      "x": 0,
      "y": 2031,
      "width": 1440,
      "height": 1132
    },
    "display": "flex",
    "position": "static",
    "padding": {
      "top": "96px",
      "right": "48px",
      "bottom": "96px",
      "left": "48px"
    },
    "margin": {
      "top": "0px",
      "right": "0px",
      "bottom": "0px",
      "left": "0px"
    },
    "gap": "normal",
    "columns": null,
    "background": "rgb(203, 40, 33)",
    "radius": "0px",
    "border": "0px none rgb(255, 248, 224)",
    "shadow": "none",
    "overflow": "visible"
  },
  "spacing": {
    "gapsPx": [],
    "representativeContentWidthsPx": [
      580,
      540,
      510,
      318,
      272
    ]
  },
  "columns": [
    {
      "id": "ld-264",
      "tag": "section",
      "role": null,
      "label": "Everyone’s welcome at our table We’re here for the moments that bring people together: big feasts, c",
      "rect": {
        "x": 0,
        "y": 2031,
        "width": 1440,
        "height": 1132
      },
      "display": "flex",
      "columns": null,
      "direction": "column",
      "gap": "normal"
    }
  ],
  "cards": [],
  "surfaces": {
    "radii": [
      "24px"
    ],
    "borders": [],
    "shadows": []
  },
  "media": [
    {
      "id": "ld-270",
      "tag": "img",
      "role": null,
      "label": "img",
      "rect": {
        "x": 589,
        "y": 2128,
        "width": 510,
        "height": 638
      },
      "aspectRatio": 0.8,
      "objectFit": "cover",
      "objectPosition": "50% 50%",
      "radius": "0px",
      "overflow": "clip",
      "media": {
        "src": "https://yourmainstays.com/wp-content/uploads/2025/12/Home-About-1-min-560x702.jpg",
        "naturalWidth": 560,
        "naturalHeight": 702,
        "alt": ""
      }
    },
    {
      "id": "ld-285",
      "tag": "img",
      "role": null,
      "label": "img",
      "rect": {
        "x": 105,
        "y": 2528,
        "width": 318,
        "height": 398
      },
      "aspectRatio": 0.8,
      "objectFit": "cover",
      "objectPosition": "50% 50%",
      "radius": "0px",
      "overflow": "clip",
      "media": {
        "src": "https://yourmainstays.com/wp-content/uploads/2025/12/home-about-left_v2-320x400.jpg",
        "naturalWidth": 320,
        "naturalHeight": 400,
        "alt": ""
      }
    },
    {
      "id": "ld-272",
      "tag": "img",
      "role": null,
      "label": "img",
      "rect": {
        "x": 1084,
        "y": 2332,
        "width": 272,
        "height": 335
      },
      "aspectRatio": 0.8,
      "objectFit": "fill",
      "objectPosition": "50% 50%",
      "radius": "0px",
      "overflow": "clip",
      "media": {
        "src": "https://yourmainstays.com/wp-content/uploads/2025/12/home-about-illustration.svg",
        "naturalWidth": 122,
        "naturalHeight": 150,
        "alt": ""
      }
    },
    {
      "id": "ld-279",
      "tag": "svg",
      "role": null,
      "label": "svg",
      "rect": {
        "x": 564,
        "y": 2995,
        "width": 230,
        "height": 96
      },
      "aspectRatio": 2.4,
      "objectFit": "fill",
      "objectPosition": "50% 50%",
      "radius": "0px",
      "overflow": "hidden",
      "media": null
    }
  ],
  "animations": [],
  "coverage": {
    "elementsInSection": 9,
    "cards": 0,
    "media": 4,
    "animations": 0
  },
  "limitations": [
    "Values describe the captured desktop viewport and may change at other breakpoints.",
    "Transforms, sticky layers, and virtualized content can make the inferred section root approximate.",
    "Animations include browser-exposed Web Animations API state; CSS or script motion that was inactive at capture time may be absent."
  ]
}
```

### 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: 1440px 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: 7/7
- Can build: Yes
- Missing facts: timestamped authored motion
- Warning: Buildable with adaptations for these unsupported facts: timestamped authored motion.

### Agent implementation prompt

Create an original features section inspired by the design evidence titled “Everyone’s welcome at our table”.

Purpose: features section from the Home page of Yourmainstays.

Structure: 1440×1132px root; flex. Source layout label: 1440×1132px root; flex. Preserve the documented hierarchy and relationships; exact measurements were not deterministically captured.

Visual signature to preserve at the pattern level: rgb(203, 40, 33) with 1440×1132px root; flex. 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×1132px (1.272: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-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"}]}

No section-bounded color samples were measured.

Exact section measurements from the saved element map: root {"rect":{"x":0,"y":2031,"width":1440,"height":1132},"padding":{"top":"96px","right":"48px","bottom":"96px","left":"48px"},"gap":"normal","columns":null,"overflow":"visible"}; spacing {"gapsPx":[],"representativeContentWidthsPx":[580,540,510,318,272]}; surfaces {"radii":["24px"],"borders":[],"shadows":[]}; media [{"tag":"img","rect":{"x":589,"y":2128,"width":510,"height":638},"aspectRatio":0.8,"objectFit":"cover","objectPosition":"50% 50%","radius":"0px"},{"tag":"img","rect":{"x":105,"y":2528,"width":318,"height":398},"aspectRatio":0.8,"objectFit":"cover","objectPosition":"50% 50%","radius":"0px"},{"tag":"img","rect":{"x":1084,"y":2332,"width":272,"height":335},"aspectRatio":0.8,"objectFit":"fill","objectPosition":"50% 50%","radius":"0px"},{"tag":"svg","rect":{"x":564,"y":2995,"width":230,"height":96},"aspectRatio":2.4,"objectFit":"fill","objectPosition":"50% 50%","radius":"0px"}]

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.