# App feature trio gallery

Schema: Design Details SECTION.md v3.2
Website: The Salad Project
Source: https://www.saladproject.co.uk/
Source section IDs: gap-27a6c54c-3080-3994
Status: AI analysed; vocabulary promotion is automated

## Builder's note

What makes it work:
- Three tall vertical photos fill the full width in an even grid with consistent crops and gutters, so the section reads calmly and quickly.
- The header row puts a title on one side and a download button on the other, so the call to action sits next to the message.
- Small numbered captions (01/02/03) under each photo tie image to idea, and the muted green text on a warm cream canvas keeps the look quiet and photo-led.

What a screenshot can't show:
- The recording showed no specific motion, so any hover or scroll behaviour is unknown.
- Only the review's rough sizes are available (about 26px heading, 12px and 10px captions); no measured spacing or line height was captured.

Borrow: Pair a simple header-and-button row with an evenly gridded set of same-ratio photos and numbered captions, so structure carries the story and the images do the persuading.
Leave alone: Don't copy the cream, deep green and pale lime palette, the brand fonts, or the specific phone, shelving and café photography, since these define The Salad Project's identity.

## Classification

- Type: features
- Layout: A top header row with a title and button, followed by a full-width three-column grid of vertical images.
- Styles: minimal, photographic
- Confidence: 90%

## Purpose and structure

A feature highlight section displaying three vertical images side-by-side to promote a digital experience.

Visual signature: Three tall photos arranged side-by-side filling the horizontal space, with small captions underneath.

## Components

- section heading
- download button
- vertical image cards
- numbered captions

## Typography

- Display: brandheading — 36px 400
- Heading: brandheading — 26px 400
- Body: brandbody — 12px 400
- Mono: brandbody — 10px 400

## Functional palette

- Canvas: canvas #F1ECDE
- Text: text #1D433B
- Primary-Action: primary action #DCEEB0
- Surface: surface #FFFFFF

## Motion evidence

- No section-specific authored motion was established.

## Section quality

Overall: 57.35/100 (Competent)
Scored coverage: 85%

- Typography: 58 — Clear two-tier hierarchy (26px heading vs 12px/10px captions) with consistent brand fonts, but minimal differentiation and plain left-aligned, conventional treatment; numbered captions are small and utilitarian rather than designed as a feature. Next tier: Needs more deliberate type scale contrast or distinctive caption treatment to move beyond a generic header+caption pattern.
- Composition: 62 — Clean three-column grid with consistent vertical crop ratios and even gutters creates a calm, legible rhythm; header row balances title and CTA well. However the layout is a very common tripartite feature-image pattern with no tension, overlap, or distinctive framing device. Next tier: Lacks a compositional idea beyond equal thirds; no asymmetry, layering, or scale variation to create memorability.
- Motion: not_assessed — No timestamped motion evidence supplied; motion_moments empty. Next tier: Requires specific timestamped visible motion changes to assess.
- Content: 55 — Images are tied to captions that numerically map to the point above (01/02/03), giving a logical content-image relationship, but the photos themselves (phone screen, shelving, café) are generic lifestyle photography without strong narrative staging. Next tier: Needs tighter visual storytelling or distinctive photographic direction to feel purpose-built rather than stock-adjacent.
- Originality: 50 — Three-column vertical image gallery with numbered captions beneath a header+CTA is a widely used feature-section template; nothing here resists substitution with any other brand's app-promo images. Next tier: Would need an unconventional grid, interactive element, or unique visual device not seen in comparable sections.
- Adaptability: 60 — Structure (header+CTA row, 3-col image grid, numbered captions) is clearly separable from the specific photography and copy, and the grid scales simply to other image sets. Next tier: No stated breakpoint or responsive behavior evidence beyond desktop crop limits confidence in cross-device adaptability claims.

Strengths:
- Even three-column grid with consistent image proportions creates a tidy, legible layout
- Numbered captions directly map value points to corresponding images
- Header row cleanly separates heading and CTA without clutter

Weaknesses:
- Highly generic three-image feature template with no distinguishing visual idea
- Captions and type hierarchy are minimal and utilitarian, not designed as a feature
- Photography is competent but unremarkable lifestyle imagery that could be swapped without changing the section's identity
- No motion evidence provided to assess any dynamic behavior

Why it does not reach the next tier: The section executes a common pattern cleanly but introduces no compositional tension, typographic distinction, or photographic direction that would make it memorable or hard to substitute; it reads as a standard app-promo trio grid.

## Adaptation guidance

- Effort: Low
- Guidance: Swap photography and caption copy while preserving the grid proportions, caption numbering, and header/CTA placement; adjust column count responsively for narrower viewports.

What transfers:
- Header + CTA row above a full-width grid
- Three-column vertical image grid with numbered captions
- Caption-to-image numbering convention

Dependencies:
- Specific lifestyle photography assets
- Brand color/type tokens for heading and caption text

## Living vocabulary

- No reusable vocabulary candidates were supported by this section.

Only terms with status `active` enter the public taxonomy. Deferred and proposed terms remain available to later AI passes; rejected terms remain as provenance so they are not repeatedly reinvented.

## Provenance and limitations

- Section boundaries and naming: Gemini Pro visual observation
- Motion observations: Gemini Pro direct-video analysis
- Quality judgment: Claude
- Exact design facts: browser/CSS extraction at website scope
- Rubric: Design Details section rubric 3.2 (Typography 20%, Composition 20%, Motion 15%, Content 15%, Originality 15%, Adaptability 15%)
- No motion timestamps provided, so dynamic behavior is unassessed
- Single desktop crop limits confidence in responsive adaptability
- No deterministic sizing/spacing data specific to this section beyond global tokens

## Usage guidance

Use this section as design evidence. Create an original implementation; do not reproduce the source copy, assets, or proprietary composition exactly.

## Build blueprint v3.2

### Purpose and classification

- Canonical type: features
- Source type: features
- Structure: full-bleed
- Layout: A top header row with a title and button, followed by a full-width three-column grid of vertical images.
- Styles: minimal, photographic
- Components: section heading, download button, vertical image cards, numbered captions
- Purpose: A feature highlight section displaying three vertical images side-by-side to promote a digital experience.
- Visual signature: Three tall photos arranged side-by-side filling the horizontal space, with small captions underneath.
- Place on the page: 4 of 6, after Feature collection (`saladproject-co-uk:interactive_menu_preview_grid`), before Editorial (`saladproject-co-uk:editorial_article_preview`)

### Crop and composition

- Deterministic crop dimensions are unavailable.
- Guidance: Let the primary media establish the section boundary and protect legibility with controlled overlays.

### 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": [],
  "siteRoles": [
    {
      "role": "display",
      "size": "36px",
      "family": "brandheading",
      "source": "computed",
      "traits": "Regular",
      "weight": "400",
      "evidence": "font-3: computed CSS at 1440×1000; AI role: Used for large, impactful statements like 'London and Paris' new favourite salad bar.' at 36px.",
      "sampleId": "font-3",
      "confidence": 0.9,
      "lineHeight": "36px",
      "letterSpacing": "normal"
    },
    {
      "role": "heading",
      "size": "26px",
      "family": "brandheading",
      "source": "computed",
      "traits": "Regular",
      "weight": "400",
      "evidence": "font-1: computed CSS at 1440×1000; AI role: Used for primary section headings like 'Get more from your lunch...' at 26px.",
      "sampleId": "font-1",
      "confidence": 0.9,
      "lineHeight": "26px",
      "letterSpacing": "normal"
    },
    {
      "role": "body",
      "size": "12px",
      "family": "brandbody",
      "source": "computed",
      "traits": "Regular",
      "weight": "400",
      "evidence": "font-6: computed CSS at 1440×1000; AI role: Used extensively for general descriptive text and details at 12px.",
      "sampleId": "font-6",
      "confidence": 0.95,
      "lineHeight": "12px",
      "letterSpacing": "normal"
    },
    {
      "role": "mono",
      "size": "10px",
      "family": "brandbody",
      "source": "computed",
      "traits": "uppercase",
      "weight": "400",
      "evidence": "font-9: computed CSS at 1440×1000; AI role: 10px uppercase styling used for structural or technical text like '[ BASE ]', acting similarly to a mono or utilitarian accent.",
      "sampleId": "font-9",
      "confidence": 0.8,
      "lineHeight": "18px",
      "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": "#F1ECDE",
      "name": "canvas",
      "role": "canvas",
      "source": "computed",
      "evidence": "color-2: computed rgb(241, 236, 222); AI role: The primary light cream (#F1ECDE) background color used across most of the page.",
      "sampleId": "color-2",
      "confidence": 0.95
    },
    {
      "hex": "#1D433B",
      "name": "text",
      "role": "text",
      "source": "computed",
      "evidence": "color-3: computed rgb(29, 67, 59); AI role: Deep green (#1D433B) used for the vast majority of typography, providing strong contrast against the cream.",
      "sampleId": "color-3",
      "confidence": 0.95
    },
    {
      "hex": "#DCEEB0",
      "name": "primary action",
      "role": "primary-action",
      "source": "computed",
      "evidence": "color-6: computed rgb(220, 238, 176); AI role: Bright light green (#DCEEB0) used for key call-to-action buttons like 'ORDER NOW'.",
      "sampleId": "color-6",
      "confidence": 0.9
    },
    {
      "hex": "#FFFFFF",
      "name": "surface",
      "role": "surface",
      "source": "computed",
      "evidence": "color-9: computed rgb(255, 255, 255); AI role: White (#FFFFFF) used sparingly, notable on the floating navigation pills to separate them from the canvas.",
      "sampleId": "color-9",
      "confidence": 0.85
    }
  ]
}
```

### Design tokens

```json
{
  "radius": "Maximum border-radius used extensively on UI controls to create pill shapes.",
  "density": "Spacious and open. The design breathes well, emphasizing imagery and clear typography over dense information packing.",
  "evidence": "Observed from the continuous scroll, the heavy reliance on full-bleed images transitioning into structured grids, and the consistent use of pill-shaped UI components.",
  "borderStyle": "Borders are largely absent on primary layout elements, relying instead on color contrast. Subtle, thin borders are used for structure (e.g., lines above footer).",
  "buttonStyle": "Solid fill pill shapes, occasionally using uppercase text, contrasting sharply with the background.",
  "cornerStyle": "Fully rounded (pill shape) for navigation elements and buttons. Product images are generally circular or softly rounded.",
  "contentWidth": "Fluid full-width for media backgrounds, with text and grid content constrained to a wide, centered column layout.",
  "spacingRhythm": "Generous vertical spacing between major sections. Structured, even gaps in product grids."
}
```

### 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: low
- What transfers: Header + CTA row above a full-width grid; Three-column vertical image grid with numbered captions; Caption-to-image numbering convention
- Dependencies: Specific lifestyle photography assets; Brand color/type tokens for heading and caption text
- Guidance: Swap photography and caption copy while preserving the grid proportions, caption numbering, and header/CTA placement; adjust column count responsively for narrower viewports.

### Evidence readiness

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

### Agent implementation prompt

Create an original features section inspired by the design evidence titled “App feature trio gallery”.

Purpose: A feature highlight section displaying three vertical images side-by-side to promote a digital experience.

Structure: full-bleed. Source layout label: A top header row with a title and button, followed by a full-width three-column grid of vertical images.. Let the primary media establish the section boundary and protect legibility with controlled overlays.

Visual signature to preserve at the pattern level: Three tall photos arranged side-by-side filling the horizontal space, with small captions underneath.

Components: section heading, download button, vertical image cards, numbered captions.

Style direction: minimal, photographic.

No deterministic crop dimensions were attached.

Typography evidence: {"role":"display","size":"36px","family":"brandheading","source":"computed","traits":"Regular","weight":"400","evidence":"font-3: computed CSS at 1440×1000; AI role: Used for large, impactful statements like 'London and Paris' new favourite salad bar.' at 36px.","sampleId":"font-3","confidence":0.9,"lineHeight":"36px","letterSpacing":"normal"} {"role":"heading","size":"26px","family":"brandheading","source":"computed","traits":"Regular","weight":"400","evidence":"font-1: computed CSS at 1440×1000; AI role: Used for primary section headings like 'Get more from your lunch...' at 26px.","sampleId":"font-1","confidence":0.9,"lineHeight":"26px","letterSpacing":"normal"} {"role":"body","size":"12px","family":"brandbody","source":"computed","traits":"Regular","weight":"400","evidence":"font-6: computed CSS at 1440×1000; AI role: Used extensively for general descriptive text and details at 12px.","sampleId":"font-6","confidence":0.95,"lineHeight":"12px","letterSpacing":"normal"} {"role":"mono","size":"10px","family":"brandbody","source":"computed","traits":"uppercase","weight":"400","evidence":"font-9: computed CSS at 1440×1000; AI role: 10px uppercase styling used for structural or technical text like '[ BASE ]', acting similarly to a mono or utilitarian accent.","sampleId":"font-9","confidence":0.8,"lineHeight":"18px","letterSpacing":"normal"}

Color evidence: {"hex":"#F1ECDE","name":"canvas","role":"canvas","source":"computed","evidence":"color-2: computed rgb(241, 236, 222); AI role: The primary light cream (#F1ECDE) background color used across most of the page.","sampleId":"color-2","confidence":0.95} {"hex":"#1D433B","name":"text","role":"text","source":"computed","evidence":"color-3: computed rgb(29, 67, 59); AI role: Deep green (#1D433B) used for the vast majority of typography, providing strong contrast against the cream.","sampleId":"color-3","confidence":0.95} {"hex":"#DCEEB0","name":"primary action","role":"primary-action","source":"computed","evidence":"color-6: computed rgb(220, 238, 176); AI role: Bright light green (#DCEEB0) used for key call-to-action buttons like 'ORDER NOW'.","sampleId":"color-6","confidence":0.9} {"hex":"#FFFFFF","name":"surface","role":"surface","source":"computed","evidence":"color-9: computed rgb(255, 255, 255); AI role: White (#FFFFFF) used sparingly, notable on the floating navigation pills to separate them from the canvas.","sampleId":"color-9","confidence":0.85}

No section-bounded typography samples were measured.

No section-bounded color samples were measured.

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 these principles: Header + CTA row above a full-width grid; Three-column vertical image grid with numbered captions; Caption-to-image numbering convention.

Dependencies: Specific lifestyle photography assets; Brand color/type tokens for heading and caption text.

Adaptation guidance: Swap photography and caption copy while preserving the grid proportions, caption numbering, and header/CTA placement; adjust column count responsively for narrower viewports.

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