# Editorial Testimonial (Steve Scolnick)

Schema: Design Details SECTION.md v3.2
Website: Hebbia
Source: https://www.hebbia.com/
Source section IDs: 7e649c2b-5292-4b3f-894e-70e4fb16606b
Status: AI analysed; vocabulary promotion is automated

## Classification

- Type: testimonials
- Layout: Centered layout with portrait above a large typography quote.
- Styles: editorial
- Confidence: 95%

## Purpose and structure

A large, centered testimonial quote accompanied by a portrait photograph, using the same pattern as the other testimonial.

Visual signature: Dark background with a portrait of Steve Scolnick and a large serif quote.

## Components

- portrait-image
- blockquote
- attribution

## Typography

- Display: Edict Display — 73.2px 390
- Heading: Edict Display Variable Roman — 45.4px 400
- Body: Selecta Upright — 14px 90

## Functional palette

- Canvas: canvas #0E0B0B
- Text: text #FFFFFF
- Primary-Action: primary action #465BFF
- Muted-Text: muted text #868686
- Border: border #E5E5E5
- Surface: surface #262626

## Motion evidence

- No section-specific authored motion was established.

## Section quality

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

- Typography: 63 — The large serif display quote with generous line-height and centered attribution shows clear editorial hierarchy and confident scale contrast against the small-caps attribution line, but it is a familiar testimonial convention with no distinctive type behavior beyond size and weight contrast. Next tier: Needs a more distinctive typographic treatment (e.g. unusual scale jumps, custom ligatures, kinetic emphasis) rather than a standard large-serif-quote pattern to move past polished-familiar.
- Composition: 62 — Clean centered composition with portrait stacked above quote, ample negative space on a dark canvas, and a restrained three-tier vertical rhythm (image, quote, attribution) gives calm, legible balance. Next tier: The composition is a straightforward centered stack with no asymmetry, layering, or spatial tension that would elevate it beyond a competent centered-quote template.
- Motion: not_assessed — No motion_moments or timestamped animation evidence was supplied for this section. Next tier: Requires Gemini-supplied timestamped visible motion changes to assess.
- Content: 58 — Portrait, quote, and attribution are integrated into one coherent testimonial unit with a real named individual and title, giving legitimacy, but the pairing is generic and the quote's placement/scale doesn't create a distinct visual idea beyond content presence. Next tier: Content integration would need a more purposeful relationship between image and text (e.g. quote overlapping or interacting with the portrait) to be seen as memorable rather than merely present.
- Originality: 45 — This is an extremely common testimonial layout pattern (centered portrait above large serif pull-quote) repeated identically from another section in this same site, indicating no unique conceptual contribution. Next tier: Requires a differentiated structural or visual idea unique to this section rather than reuse of an interchangeable testimonial template.
- Adaptability: 55 — The structure (portrait, blockquote, attribution) is clearly separable into swappable content slots, and colors/typography are deterministically known, making a skin-and-content swap straightforward. Next tier: Higher adaptability scores require documented interaction/motion behavior and responsive rules that would clarify how the section adapts beyond a simple swap of image and text.

Strengths:
- Clear three-part vertical hierarchy (portrait, quote, attribution) with generous negative space
- Large serif typography establishes an editorial, confident tone appropriate to testimonial content
- Consistent dark palette and centered alignment produce a calm, legible reading experience

Weaknesses:
- Layout is a direct repeat of another testimonial section on the same site, undermining any claim to originality
- No distinguishing structural or interactive idea beyond the standard portrait-above-quote testimonial convention
- No motion evidence provided, so any temporal or interactive nuance cannot be credited
- Content pairing between portrait and quote is purely juxtapositional with no deeper visual or narrative integration

Why it does not reach the next tier: The section executes a well-worn centered testimonial format competently but does not introduce any structural, typographic, or interactive idea that would distinguish it from countless similar patterns; its identical reuse elsewhere on the site further caps originality below the strong/memorable threshold.

## Adaptation guidance

- Effort: Low
- Guidance: Swap portrait image, quote text, and attribution while preserving the centered stack proportions and generous vertical spacing; ensure quote length stays similar to avoid line-wrap changes that disrupt the balanced three-line block.

What transfers:
- Portrait-above-quote centered structure
- Large serif pull-quote typographic treatment
- Dark canvas with light text contrast pattern

Dependencies:
- Specific portrait photography and its framing/crop
- Custom serif display font (Edict Display) for quote emphasis
- Exact quote length fitting the three-line centered layout

## 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 or interaction evidence was supplied, so temporal behavior of this section could not be assessed.
- Exact font rendering, image treatment, and precise spacing values are inferred from partial computed CSS and may not reflect full visual nuance.

## 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: testimonials
- Source type: testimonials
- Structure: centered single-column
- Layout: Centered layout with portrait above a large typography quote.
- Styles: editorial
- Components: portrait-image, blockquote, attribution
- Purpose: A large, centered testimonial quote accompanied by a portrait photograph, using the same pattern as the other testimonial.
- Visual signature: Dark background with a portrait of Steve Scolnick and a large serif quote.

### Crop and composition

- Crop: 1440×900px; aspect ratio 1.6:1
- Page bounds: 4390–5290px of 8961px
- Guidance: Use a narrow central reading axis and deliberate scale contrast rather than adding unnecessary side content.

### 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": "73.2px",
      "family": "Edict Display",
      "source": "computed",
      "traits": "uppercase",
      "weight": "390",
      "evidence": "font-1: computed CSS at 1440×1000; AI role: Edict Display, 73.2px, used for massive hero headers.",
      "sampleId": "font-1",
      "confidence": 0.95,
      "lineHeight": "65.9px",
      "letterSpacing": "1.8px"
    },
    {
      "role": "heading",
      "size": "45.4px",
      "family": "Edict Display Variable Roman",
      "source": "computed",
      "traits": "Regular",
      "weight": "400",
      "evidence": "font-2: computed CSS at 1440×1000; AI role: Edict Display Variable Roman, 45.4px, used for secondary section headers.",
      "sampleId": "font-2",
      "confidence": 0.9,
      "lineHeight": "50px",
      "letterSpacing": "0.5px"
    },
    {
      "role": "body",
      "size": "14px",
      "family": "Selecta Upright",
      "source": "computed",
      "traits": "Regular",
      "weight": "90",
      "evidence": "font-9: computed CSS at 1440×1000; AI role: Selecta Upright, 14px, widely used (count 301) for UI text and smaller body copy.",
      "sampleId": "font-9",
      "confidence": 0.9,
      "lineHeight": "20px",
      "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": "#0E0B0B",
      "name": "canvas",
      "role": "canvas",
      "source": "computed",
      "evidence": "color-1: computed rgb(14, 11, 11); AI role: #0E0B0B used extensively as the dark background.",
      "sampleId": "color-1",
      "confidence": 0.95
    },
    {
      "hex": "#FFFFFF",
      "name": "text",
      "role": "text",
      "source": "computed",
      "evidence": "color-3: computed rgb(255, 255, 255); AI role: #FFFFFF used for primary reading text on dark backgrounds.",
      "sampleId": "color-3",
      "confidence": 0.95
    },
    {
      "hex": "#465BFF",
      "name": "primary action",
      "role": "primary-action",
      "source": "computed",
      "evidence": "color-22: computed rgb(70, 91, 255); AI role: #465BFF used for primary CTA buttons.",
      "sampleId": "color-22",
      "confidence": 0.9
    },
    {
      "hex": "#868686",
      "name": "muted text",
      "role": "muted-text",
      "source": "computed",
      "evidence": "color-18: computed rgb(134, 134, 134); AI role: #868686 used for secondary, less prominent text.",
      "sampleId": "color-18",
      "confidence": 0.85
    },
    {
      "hex": "#E5E5E5",
      "name": "border",
      "role": "border",
      "source": "computed",
      "evidence": "color-10: computed rgb(229, 229, 229); AI role: #E5E5E5 used for fine 1px borders in the UI tables.",
      "sampleId": "color-10",
      "confidence": 0.85
    },
    {
      "hex": "#262626",
      "name": "surface",
      "role": "surface",
      "source": "computed",
      "evidence": "color-4: computed rgb(38, 38, 38); AI role: #262626 used for backgrounds of UI cards and table elements.",
      "sampleId": "color-4",
      "confidence": 0.8
    }
  ]
}
```

### Design tokens

```json
{
  "radius": "Small border radii (approx 4-8px) applied to buttons, input fields, and embedded UI mockups.",
  "density": "Low density in marketing copy areas to emphasize typography, contrasting with high density in the product UI data tables.",
  "evidence": "DOM/CSS confirms font-1 (Edict Display, 73.2px) and color-1 (#0E0B0B). Visuals show #465BFF buttons and tight table layouts within the product screenshots.",
  "borderStyle": "Subtle, solid 1px borders (#E5E5E5) used primarily within the light-themed product UI mockups to separate table rows and columns.",
  "buttonStyle": "Solid fill with contrasting text (blue with white text, or white with dark text), featuring slight corner rounding.",
  "cornerStyle": "Mix of sharp edges for full-width sections and subtly rounded corners for floating UI cards and buttons.",
  "contentWidth": "Main content is centrally constrained with a standard max-width, while background elements and certain UI grids bleed near the edges.",
  "spacingRhythm": "Generous vertical macro-spacing separates main narrative sections, while micro-spacing within UI mockups is tight and structured to mimic complex software."
}
```

### 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: 4; browser animations: 0.

#### Container, grid, and spacing

```json
{
  "viewport": {
    "width": 1440,
    "captureBounds": {
      "top": 4390,
      "bottom": 5290,
      "pageHeight": 8961
    }
  },
  "container": null,
  "spacing": {
    "observedGapsPx": [],
    "representativeContentWidthsPx": []
  },
  "columns": []
}
```

#### Cards and surfaces

```json
{
  "cards": [],
  "surfaces": {
    "radii": [
      "999px",
      "6px",
      "1px",
      "50%",
      "4px"
    ],
    "borders": [
      "1px solid rgb(229, 229, 229)"
    ],
    "shadows": [
      "rgba(0, 0, 0, 0.08) 0px 0px 0px 0.5px inset"
    ]
  }
}
```

#### Media treatment

```json
[
  {
    "element": "img · matrix-mock__companyLogo",
    "size": "24×24px",
    "position": "x 533px, y 4407px",
    "aspectRatio": 1,
    "objectFit": "contain",
    "objectPosition": "50% 50%",
    "radius": "50%",
    "overflow": "clip",
    "source": "https://www.hebbia.com/static/img/company/frontier-remit.png"
  },
  {
    "element": "img · matrix-mock__companyLogo",
    "size": "24×24px",
    "position": "x 533px, y 4518px",
    "aspectRatio": 1,
    "objectFit": "contain",
    "objectPosition": "50% 50%",
    "radius": "50%",
    "overflow": "clip",
    "source": "https://www.hebbia.com/static/img/company/trident-payments.png"
  },
  {
    "element": "img · matrix-mock__companyLogo",
    "size": "24×24px",
    "position": "x 533px, y 4629px",
    "aspectRatio": 1,
    "objectFit": "contain",
    "objectPosition": "50% 50%",
    "radius": "50%",
    "overflow": "clip",
    "source": "https://www.hebbia.com/static/img/company/swiftsend.png"
  },
  {
    "element": "img · matrix-mock__companyLogo",
    "size": "24×24px",
    "position": "x 533px, y 4740px",
    "aspectRatio": 1,
    "objectFit": "contain",
    "objectPosition": "50% 50%",
    "radius": "50%",
    "overflow": "clip",
    "source": "https://www.hebbia.com/static/img/company/conduit-payments.png"
  }
]
```

#### 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-09-21T04:23:48.957Z",
  "viewportWidth": 1440,
  "bounds": {
    "top": 4390,
    "bottom": 5290,
    "pageHeight": 8961
  },
  "root": null,
  "spacing": {
    "gapsPx": [],
    "representativeContentWidthsPx": []
  },
  "columns": [],
  "cards": [],
  "surfaces": {
    "radii": [
      "999px",
      "6px",
      "1px",
      "50%",
      "4px"
    ],
    "borders": [
      "1px solid rgb(229, 229, 229)"
    ],
    "shadows": [
      "rgba(0, 0, 0, 0.08) 0px 0px 0px 0.5px inset"
    ]
  },
  "media": [
    {
      "id": "ld-8908",
      "tag": "img",
      "role": null,
      "label": "matrix-mock__companyLogo",
      "rect": {
        "x": 533,
        "y": 4407,
        "width": 24,
        "height": 24
      },
      "aspectRatio": 1,
      "objectFit": "contain",
      "objectPosition": "50% 50%",
      "radius": "50%",
      "overflow": "clip",
      "media": {
        "src": "https://www.hebbia.com/static/img/company/frontier-remit.png",
        "naturalWidth": 64,
        "naturalHeight": 64,
        "alt": ""
      }
    },
    {
      "id": "ld-9501",
      "tag": "img",
      "role": null,
      "label": "matrix-mock__companyLogo",
      "rect": {
        "x": 533,
        "y": 4518,
        "width": 24,
        "height": 24
      },
      "aspectRatio": 1,
      "objectFit": "contain",
      "objectPosition": "50% 50%",
      "radius": "50%",
      "overflow": "clip",
      "media": {
        "src": "https://www.hebbia.com/static/img/company/trident-payments.png",
        "naturalWidth": 64,
        "naturalHeight": 64,
        "alt": ""
      }
    },
    {
      "id": "ld-10150",
      "tag": "img",
      "role": null,
      "label": "matrix-mock__companyLogo",
      "rect": {
        "x": 533,
        "y": 4629,
        "width": 24,
        "height": 24
      },
      "aspectRatio": 1,
      "objectFit": "contain",
      "objectPosition": "50% 50%",
      "radius": "50%",
      "overflow": "clip",
      "media": {
        "src": "https://www.hebbia.com/static/img/company/swiftsend.png",
        "naturalWidth": 64,
        "naturalHeight": 64,
        "alt": ""
      }
    },
    {
      "id": "ld-10777",
      "tag": "img",
      "role": null,
      "label": "matrix-mock__companyLogo",
      "rect": {
        "x": 533,
        "y": 4740,
        "width": 24,
        "height": 24
      },
      "aspectRatio": 1,
      "objectFit": "contain",
      "objectPosition": "50% 50%",
      "radius": "50%",
      "overflow": "clip",
      "media": {
        "src": "https://www.hebbia.com/static/img/company/conduit-payments.png",
        "naturalWidth": 64,
        "naturalHeight": 64,
        "alt": ""
      }
    }
  ],
  "animations": [],
  "coverage": {
    "elementsInSection": 1849,
    "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: low
- What transfers: Portrait-above-quote centered structure; Large serif pull-quote typographic treatment; Dark canvas with light text contrast pattern
- Dependencies: Specific portrait photography and its framing/crop; Custom serif display font (Edict Display) for quote emphasis; Exact quote length fitting the three-line centered layout
- Guidance: Swap portrait image, quote text, and attribution while preserving the centered stack proportions and generous vertical spacing; ensure quote length stays similar to avoid line-wrap changes that disrupt the balanced three-line block.

### Evidence readiness

- Coverage: 6/7
- Can build: Yes
- Missing facts: section-specific computed typography and color samples; timestamped authored motion
- Warning: Buildable with adaptations for these unsupported facts: section-specific computed typography and color samples; timestamped authored motion.

### Agent implementation prompt

Create an original testimonials section inspired by the design evidence titled “Editorial Testimonial (Steve Scolnick)”.

Purpose: A large, centered testimonial quote accompanied by a portrait photograph, using the same pattern as the other testimonial.

Structure: centered single-column. Source layout label: Centered layout with portrait above a large typography quote.. Use a narrow central reading axis and deliberate scale contrast rather than adding unnecessary side content.

Visual signature to preserve at the pattern level: Dark background with a portrait of Steve Scolnick and a large serif quote.

Components: portrait-image, blockquote, attribution.

Style direction: editorial.

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

Typography evidence: {"role":"display","size":"73.2px","family":"Edict Display","source":"computed","traits":"uppercase","weight":"390","evidence":"font-1: computed CSS at 1440×1000; AI role: Edict Display, 73.2px, used for massive hero headers.","sampleId":"font-1","confidence":0.95,"lineHeight":"65.9px","letterSpacing":"1.8px"} {"role":"heading","size":"45.4px","family":"Edict Display Variable Roman","source":"computed","traits":"Regular","weight":"400","evidence":"font-2: computed CSS at 1440×1000; AI role: Edict Display Variable Roman, 45.4px, used for secondary section headers.","sampleId":"font-2","confidence":0.9,"lineHeight":"50px","letterSpacing":"0.5px"} {"role":"body","size":"14px","family":"Selecta Upright","source":"computed","traits":"Regular","weight":"90","evidence":"font-9: computed CSS at 1440×1000; AI role: Selecta Upright, 14px, widely used (count 301) for UI text and smaller body copy.","sampleId":"font-9","confidence":0.9,"lineHeight":"20px","letterSpacing":"normal"}

Color evidence: {"hex":"#0E0B0B","name":"canvas","role":"canvas","source":"computed","evidence":"color-1: computed rgb(14, 11, 11); AI role: #0E0B0B used extensively as the dark background.","sampleId":"color-1","confidence":0.95} {"hex":"#FFFFFF","name":"text","role":"text","source":"computed","evidence":"color-3: computed rgb(255, 255, 255); AI role: #FFFFFF used for primary reading text on dark backgrounds.","sampleId":"color-3","confidence":0.95} {"hex":"#465BFF","name":"primary action","role":"primary-action","source":"computed","evidence":"color-22: computed rgb(70, 91, 255); AI role: #465BFF used for primary CTA buttons.","sampleId":"color-22","confidence":0.9} {"hex":"#868686","name":"muted text","role":"muted-text","source":"computed","evidence":"color-18: computed rgb(134, 134, 134); AI role: #868686 used for secondary, less prominent text.","sampleId":"color-18","confidence":0.85} {"hex":"#E5E5E5","name":"border","role":"border","source":"computed","evidence":"color-10: computed rgb(229, 229, 229); AI role: #E5E5E5 used for fine 1px borders in the UI tables.","sampleId":"color-10","confidence":0.85} {"hex":"#262626","name":"surface","role":"surface","source":"computed","evidence":"color-4: computed rgb(38, 38, 38); AI role: #262626 used for backgrounds of UI cards and table elements.","sampleId":"color-4","confidence":0.8}

No section-bounded typography samples were measured.

No section-bounded color samples were measured.

Exact section measurements from the saved element map: spacing {"gapsPx":[],"representativeContentWidthsPx":[]}; surfaces {"radii":["999px","6px","1px","50%","4px"],"borders":["1px solid rgb(229, 229, 229)"],"shadows":["rgba(0, 0, 0, 0.08) 0px 0px 0px 0.5px inset"]}; media [{"tag":"img","rect":{"x":533,"y":4407,"width":24,"height":24},"aspectRatio":1,"objectFit":"contain","objectPosition":"50% 50%","radius":"50%"},{"tag":"img","rect":{"x":533,"y":4518,"width":24,"height":24},"aspectRatio":1,"objectFit":"contain","objectPosition":"50% 50%","radius":"50%"},{"tag":"img","rect":{"x":533,"y":4629,"width":24,"height":24},"aspectRatio":1,"objectFit":"contain","objectPosition":"50% 50%","radius":"50%"},{"tag":"img","rect":{"x":533,"y":4740,"width":24,"height":24},"aspectRatio":1,"objectFit":"contain","objectPosition":"50% 50%","radius":"50%"}]

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

Transfer these principles: Portrait-above-quote centered structure; Large serif pull-quote typographic treatment; Dark canvas with light text contrast pattern.

Dependencies: Specific portrait photography and its framing/crop; Custom serif display font (Edict Display) for quote emphasis; Exact quote length fitting the three-line centered layout.

Adaptation guidance: Swap portrait image, quote text, and attribution while preserving the centered stack proportions and generous vertical spacing; ensure quote length stays similar to avoid line-wrap changes that disrupt the balanced three-line block.

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