# Find the Mainstays Near You — Section Design Reference

Schema: Design Details SECTION.md v3.2
Source: https://yourmainstays.com/
Website: Yourmainstays
Section ID: 24a91f66-97ea-4450-8fa7-8d3ea819bfba
Status: deterministic evidence partially captured; editorial AI review pending

## Purpose

This is a other 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×765px. The crop spans 5301–6066px 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: navigation
- Source type: other
- 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: other 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×765px; aspect ratio 1.882:1
- Page bounds: 5301–6066px 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": "body/supporting copy",
      "family": "Auger Mono",
      "stack": "\"Auger Mono\", monospace",
      "size": "16px",
      "weight": "500",
      "lineHeight": "22.4px",
      "letterSpacing": "normal",
      "sample": "Allow us to introduce you to your burger's new best friend.",
      "element": "p",
      "occurrences": 3,
      "sourceId": "font-5"
    }
  ],
  "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": "#682717",
      "cssValue": "rgb(104, 39, 23)",
      "alpha": 1,
      "appliedAs": [
        "background"
      ],
      "occurrences": 1,
      "sourceId": "color-5"
    }
  ],
  "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 navigation section inspired by the design evidence titled “Find the Mainstays Near You”.

Purpose: other 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×765px (1.882: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-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"}]}

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

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.