# What people say — Section Design Reference

Schema: Design Details SECTION.md v3.2
Source: https://www.thrad.ai/
Website: Thrad: Paid Ads in AI
Section ID: d0d0c87d-f47b-4790-acaa-ad7d23a2a5a4
Status: deterministic evidence partially captured; editorial AI review pending

## Purpose

This is a testimonials 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

minimal, corporate, typographic, technical-clinical, earthy-modern treatment at 1440×510px. The crop spans 5548–6058px of a 9079px page.

## Components

- Navigation Bar
- Hero
- Logo Strip
- Primary Button
- Outline Button
- Product UI
- Testimonial Card
- Editorial Card
- Footer
- Data Flow Infographic
- Structural Grid Lines

## 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: testimonials
- Source type: testimonials
- Structure: captured layout
- Layout: captured layout
- Styles: minimal, corporate, typographic, technical-clinical, earthy-modern
- Components: Navigation Bar, Hero, Logo Strip, Primary Button, Outline Button, Product UI, Testimonial Card, Editorial Card, Footer, Data Flow Infographic, Structural Grid Lines
- Purpose: testimonials section from the Home page of Thrad: Paid Ads in AI.
- Visual signature: Captured visual surface with captured layout. Inspect the crop for image and content hierarchy.

### Crop and composition

- Crop: 1440×510px; aspect ratio 2.824:1
- Page bounds: 5548–6058px of 9079px
- 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": "Inter Variable",
      "stack": "\"Inter Variable\", Inter, -apple-system, \"system-ui\", \"Segoe UI\", system-ui, sans-serif",
      "size": "40px",
      "weight": "300",
      "lineHeight": "42.8px",
      "letterSpacing": "-2.4px",
      "sample": "One buy acrossevery AI conversation",
      "element": "h2",
      "occurrences": 4,
      "sourceId": "font-2"
    },
    {
      "role": "body/supporting copy",
      "family": "Inter Variable",
      "stack": "\"Inter Variable\", Inter, -apple-system, \"system-ui\", \"Segoe UI\", system-ui, sans-serif",
      "size": "14px",
      "weight": "400",
      "lineHeight": "20px",
      "letterSpacing": "normal",
      "sample": "What we do",
      "element": "p",
      "occurrences": 4,
      "sourceId": "font-13"
    },
    {
      "role": "card/subheading",
      "family": "not captured",
      "stack": "ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, monospace",
      "size": "20px",
      "weight": "400",
      "lineHeight": "30px",
      "letterSpacing": "-0.4px",
      "sample": "“We’re incredibly proud of the synergy between Betadine and Thrad for our digital campaign,”",
      "element": "blockquote",
      "occurrences": 3,
      "sourceId": "font-19"
    },
    {
      "role": "UI/supporting text",
      "family": "not captured",
      "stack": "ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, monospace",
      "size": "16px",
      "weight": "400",
      "lineHeight": "24px",
      "letterSpacing": "-0.4px",
      "sample": "See full announcement",
      "element": "a",
      "occurrences": 3,
      "sourceId": "font-34"
    }
  ],
  "siteRoles": [
    {
      "role": "display",
      "size": "80.6px",
      "family": "Inter Variable",
      "source": "computed",
      "traits": "Regular",
      "weight": "300",
      "evidence": "font-6: computed CSS at 1440×1000; AI role: H1 'Programmatic Ads in AI'. Largest size (80.6px), very tight letter-spacing (-5.2px), thin weight (300).",
      "sampleId": "font-6",
      "confidence": 1,
      "lineHeight": "81.4px",
      "letterSpacing": "-5.2px"
    },
    {
      "role": "heading",
      "size": "54px",
      "family": "Inter Variable",
      "source": "computed",
      "traits": "Regular",
      "weight": "300",
      "evidence": "font-5: computed CSS at 1440×1000; AI role: H2 'Advertise in conversational AI'. Size 54px, weight 300, tight letter-spacing (-2.7px).",
      "sampleId": "font-5",
      "confidence": 1,
      "lineHeight": "56.7px",
      "letterSpacing": "-2.7px"
    },
    {
      "role": "body",
      "size": "18px",
      "family": "Inter Variable",
      "source": "computed",
      "traits": "Regular",
      "weight": "400",
      "evidence": "font-11: computed CSS at 1440×1000; AI role: Primary paragraph text, e.g., 'Thrad connects advertisers...'. Size 18px, weight 400, regular line-height (24px).",
      "sampleId": "font-11",
      "confidence": 0.95,
      "lineHeight": "24px",
      "letterSpacing": "-0.5px"
    },
    {
      "role": "mono",
      "size": "20px",
      "family": null,
      "source": "computed",
      "traits": "Regular",
      "weight": "400",
      "evidence": "font-19: computed CSS at 1440×1000; AI role: Monospace font stack (ui-monospace, SFMono-Regular...) used for quotes in testimonials, 20px size.",
      "sampleId": "font-19",
      "confidence": 1,
      "lineHeight": "30px",
      "letterSpacing": "-0.4px"
    }
  ]
}
```

### 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": "#111112",
      "name": "text",
      "role": "text",
      "source": "computed",
      "evidence": "color-7: computed rgb(17, 17, 18); AI role: Near black (#111112) used for primary text (headings, body copy) across light backgrounds.",
      "sampleId": "color-7",
      "confidence": 1
    },
    {
      "hex": "#EC521B",
      "name": "primary action",
      "role": "primary-action",
      "source": "computed",
      "evidence": "color-15: computed rgb(236, 82, 27); AI role: Burnt orange (#EC521B) used for main CTA buttons ('Book a call') and accents.",
      "sampleId": "color-15",
      "confidence": 1
    },
    {
      "hex": "#F2EDE9",
      "name": "canvas",
      "role": "canvas",
      "source": "computed",
      "evidence": "color-3: computed rgb(242, 237, 233); AI role: Light tan color (#F2EDE9) used as the primary body background.",
      "sampleId": "color-3",
      "confidence": 0.9
    },
    {
      "hex": "#6E6E73",
      "name": "muted text",
      "role": "muted-text",
      "source": "computed",
      "evidence": "color-14: computed rgb(110, 110, 115); AI role: Grey (#6E6E73) used for icons, keyboard shortcut text, and secondary UI details.",
      "sampleId": "color-14",
      "confidence": 0.9
    },
    {
      "hex": "#2A0E07",
      "name": "surface",
      "role": "surface",
      "source": "computed",
      "evidence": "color-4: computed rgb(42, 14, 7); AI role: Deep brown (#2A0E07) used for the large footer background and certain dark UI elements.",
      "sampleId": "color-4",
      "confidence": 0.9
    },
    {
      "hex": "#E8E2DC",
      "name": "surface",
      "role": "surface",
      "source": "computed",
      "evidence": "color-6: computed rgb(232, 226, 220); AI role: Slightly darker tan (#E8E2DC) used for header background and certain UI card backgrounds.",
      "sampleId": "color-6",
      "confidence": 0.85
    }
  ]
}
```

### Design tokens

```json
{
  "radius": "Small to medium border-radius on buttons and UI mockups, but precise values require specific element inspection.",
  "density": "Low density in primary hero and transition sections; medium to high density within specific explanatory UI panels and feature grids.",
  "evidence": "Visual observation of the desktop layout crops, noting the prominent use of thin dividing lines, wide margins, and the specific styling of buttons and UI cards.",
  "borderStyle": "Extensive use of thin, 1px semi-transparent borders (e.g., color-1, color-21) to divide header, sections, and create background grid patterns.",
  "buttonStyle": "Solid fill with sharp or slightly rounded corners for primary actions; transparent with solid borders for secondary actions.",
  "cornerStyle": "Slightly rounded corners on UI cards and input fields, though overall layout relies on sharp, orthogonal grid lines.",
  "contentWidth": "Content appears constrained within a responsive max-width container, likely around 1200px-1440px given the layout proportions.",
  "spacingRhythm": "Generous vertical spacing between major sections, often delineated by full-width thin borders. Internally, components use tighter spacing (e.g., within UI cards)."
}
```

### 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 testimonials section inspired by the design evidence titled “What people say”.

Purpose: testimonials section from the Home page of Thrad: Paid Ads in AI.

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, Logo Strip, Primary Button, Outline Button, Product UI, Testimonial Card, Editorial Card, Footer, Data Flow Infographic, Structural Grid Lines.

Style direction: minimal, corporate, typographic, technical-clinical, earthy-modern.

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

Typography evidence: {"role":"display","size":"80.6px","family":"Inter Variable","source":"computed","traits":"Regular","weight":"300","evidence":"font-6: computed CSS at 1440×1000; AI role: H1 'Programmatic Ads in AI'. Largest size (80.6px), very tight letter-spacing (-5.2px), thin weight (300).","sampleId":"font-6","confidence":1,"lineHeight":"81.4px","letterSpacing":"-5.2px"} {"role":"heading","size":"54px","family":"Inter Variable","source":"computed","traits":"Regular","weight":"300","evidence":"font-5: computed CSS at 1440×1000; AI role: H2 'Advertise in conversational AI'. Size 54px, weight 300, tight letter-spacing (-2.7px).","sampleId":"font-5","confidence":1,"lineHeight":"56.7px","letterSpacing":"-2.7px"} {"role":"body","size":"18px","family":"Inter Variable","source":"computed","traits":"Regular","weight":"400","evidence":"font-11: computed CSS at 1440×1000; AI role: Primary paragraph text, e.g., 'Thrad connects advertisers...'. Size 18px, weight 400, regular line-height (24px).","sampleId":"font-11","confidence":0.95,"lineHeight":"24px","letterSpacing":"-0.5px"} {"role":"mono","size":"20px","family":null,"source":"computed","traits":"Regular","weight":"400","evidence":"font-19: computed CSS at 1440×1000; AI role: Monospace font stack (ui-monospace, SFMono-Regular...) used for quotes in testimonials, 20px size.","sampleId":"font-19","confidence":1,"lineHeight":"30px","letterSpacing":"-0.4px"}

Color evidence: {"hex":"#111112","name":"text","role":"text","source":"computed","evidence":"color-7: computed rgb(17, 17, 18); AI role: Near black (#111112) used for primary text (headings, body copy) across light backgrounds.","sampleId":"color-7","confidence":1} {"hex":"#EC521B","name":"primary action","role":"primary-action","source":"computed","evidence":"color-15: computed rgb(236, 82, 27); AI role: Burnt orange (#EC521B) used for main CTA buttons ('Book a call') and accents.","sampleId":"color-15","confidence":1} {"hex":"#F2EDE9","name":"canvas","role":"canvas","source":"computed","evidence":"color-3: computed rgb(242, 237, 233); AI role: Light tan color (#F2EDE9) used as the primary body background.","sampleId":"color-3","confidence":0.9} {"hex":"#6E6E73","name":"muted text","role":"muted-text","source":"computed","evidence":"color-14: computed rgb(110, 110, 115); AI role: Grey (#6E6E73) used for icons, keyboard shortcut text, and secondary UI details.","sampleId":"color-14","confidence":0.9} {"hex":"#2A0E07","name":"surface","role":"surface","source":"computed","evidence":"color-4: computed rgb(42, 14, 7); AI role: Deep brown (#2A0E07) used for the large footer background and certain dark UI elements.","sampleId":"color-4","confidence":0.9} {"hex":"#E8E2DC","name":"surface","role":"surface","source":"computed","evidence":"color-6: computed rgb(232, 226, 220); AI role: Slightly darker tan (#E8E2DC) used for header background and certain UI card backgrounds.","sampleId":"color-6","confidence":0.85}

Typography measured inside this section: {"id":"font-2","family":"Inter Variable","fontStack":"\"Inter Variable\", Inter, -apple-system, \"system-ui\", \"Segoe UI\", system-ui, sans-serif","weight":"300","size":"40px","lineHeight":"42.8px","letterSpacing":"-2.4px","traits":"Regular","count":4,"contexts":[{"tag":"h2","text":"One buy acrossevery AI conversation","top":4540,"property":"font"},{"tag":"h2","text":"What people say","top":5600,"property":"font"},{"tag":"h2","text":"See the latest from Thrad","top":6825,"property":"font"}]} {"id":"font-13","family":"Inter Variable","fontStack":"\"Inter Variable\", Inter, -apple-system, \"system-ui\", \"Segoe UI\", system-ui, sans-serif","weight":"400","size":"14px","lineHeight":"20px","letterSpacing":"normal","traits":"Regular","count":4,"contexts":[{"tag":"p","text":"What we do","top":2121,"property":"font"},{"tag":"p","text":"Platform","top":4508,"property":"font"},{"tag":"p","text":"Testimonials","top":5564,"property":"font"}]} {"id":"font-19","family":null,"fontStack":"ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, monospace","weight":"400","size":"20px","lineHeight":"30px","letterSpacing":"-0.4px","traits":"Regular","count":3,"contexts":[{"tag":"blockquote","text":"“We’re incredibly proud of the synergy between Betadine and Thrad for our digital campaign,”","top":5757,"property":"font"},{"tag":"blockquote","text":"“Some organisations observe the wave. Others choose to ride it early... Exploring the next frontier ","top":5742,"property":"font"},{"tag":"blockquote","text":"“Try Thrad, the results will speak for themselves!”","top":5772,"property":"font"}]} {"id":"font-34","family":null,"fontStack":"ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, monospace","weight":"400","size":"16px","lineHeight":"24px","letterSpacing":"-0.4px","traits":"Regular","count":3,"contexts":[{"tag":"a","text":"See full announcement","top":5871,"property":"font"},{"tag":"a","text":"See full post","top":5886,"property":"font"},{"tag":"a","text":"See full post","top":5856,"property":"font"}]}

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