# Character consistency portrait trio

Schema: Design Details SECTION.md v3.2
Website: Krea
Source: https://www.krea.ai/krea-3
Source section IDs: b7edb3d2-e6bb-49f1-9a01-8967c7409d7b
Status: AI analysed; vocabulary promotion is automated

## Builder's note

What makes it work:
- A two-line headline on the left and a short grey caption on the right give a clear big-then-small hierarchy before the images start.
- Three equal 4:5 portraits with rounded corners and a tight 20px gap read as one set, so the same-character claim is proven by the images themselves.
- Black text on a white canvas with muted grey for supporting copy keeps the faces as the only colour, and 60px of vertical padding gives the row room.

What a screenshot can't show:
- The recording showed no motion, though the cards may be looping videos, so any timing is unknown.
- Measured type: the heading is 72px at weight 500 with -2.2px tracking and 69px line height, and the caption is 20px with -0.5px tracking.

Borrow: Let a row of equal, fixed-ratio images carry the proof, and keep the headline and caption minimal so they don't compete with it.
Leave alone: Don't copy Krea's Suisse Intl typeface or its exact portraits and copy; a neutral grotesque like Inter with similarly tight tracking gives the same feel.

## Classification

- Type: gallery
- Layout: Header spanning the top with a three-column equal-width image grid below.
- Styles: photographic, minimal
- Confidence: 100%

## Purpose and structure

A gallery section showcasing character consistency across different scenes using three side-by-side portrait images.

Visual signature: Three tightly packed vertical portraits of distinct individuals.

## Components

- heading
- image grid
- portrait

## Typography

- Display: Krea 3 Suisse Intl — 132px 500
- Heading: Krea 3 Suisse Intl — 100px 500
- Body: Suisse Intl — 20px 500

## Functional palette

- Canvas: canvas #FFFFFF
- Text: text #000000
- Primary-Action: primary action #2E6CF6
- Surface: surface #111111
- Muted-Text: muted text #737373
- Border: border #E5E5E5

## Motion evidence

- No section-specific authored motion was established.

## Section quality

Overall: 61.71/100 (Good)
Scored coverage: 85%

- Typography: 62 — Large 100px display heading with tight -3px tracking pairs cleanly against a smaller gray body paragraph, giving clear two-tier hierarchy consistent with site tokens, but the pairing itself is a standard big-headline/small-caption formula without distinctive typographic craft within this crop. Next tier: Needs a more considered typographic detail (e.g. unusual scale relationship, mixed weights, or kinetic type) beyond a stock large-headline-plus-caption layout to move past polished-but-familiar.
- Composition: 66 — Three equal 4:5 rounded-corner media cards sit in a tight 20px-gap row beneath a left-aligned two-line headline and right-aligned caption, producing a clean grid with good alignment and breathing room per site density rules. Next tier: The three-up equal grid with a header above is a conventional gallery pattern; nothing in the crop (asymmetry, overlap, varied scale) elevates it beyond a well-executed standard layout.
- Motion: not_assessed — Cards are actually videos (face-lock-clean loops) but no timestamped visible motion evidence was supplied, so motion cannot be scored. Next tier: Needs Gemini-supplied timestamped description of what changes across the video loop to assess motion quality.
- Content: 64 — Headline, supporting copy, and three portrait videos work together coherently to demonstrate the specific claim of character consistency across scene changes; content directly supports the message with a believable proof-style gallery. Next tier: Content integration is clear but purely illustrative; it lacks an interactive or comparative mechanism (e.g. before/after toggle) that would make the proof feel more rigorous or distinctive.
- Originality: 55 — A three-portrait row to demonstrate consistency is a sensible but common proof pattern seen across many AI-generation product pages; execution is clean but the idea itself is not distinctive. Next tier: Would need a structural or interactive twist (e.g., slider, morph transition, or non-grid arrangement) to differentiate from similar competitor galleries.
- Adaptability: 60 — Structure (header + 3-column equal media grid, fixed aspect ratio, consistent radius) is clearly separable from the specific portrait content and could be re-skinned with different imagery or copy with moderate effort given the deterministic card/media specs. Next tier: Reliance on specific aspect-ratio videos and exact pixel widths (480px columns, min() sizing) ties presentation closely to this viewport, limiting plug-and-play reuse without adjustment.

Strengths:
- Clean three-column 4:5 video grid with consistent 24px radius and uniform spacing gives strong visual order
- Headline and caption pairing clearly states the feature's value before the proof imagery
- Generous whitespace and low density let the portraits read without clutter

Weaknesses:
- Three-up portrait grid is a common proof pattern without a distinctive structural or interactive idea
- Motion cannot be verified from supplied evidence despite videos being the actual media type
- Typography relationship between headline and caption is a standard scale pairing rather than a crafted hierarchy

Why it does not reach the next tier: The section executes a familiar gallery proof pattern cleanly but without a specific structural, typographic, or interactive detail that would make it feel singular or hard to substitute; it reads as well-built rather than memorable.

## Adaptation guidance

- Effort: Low
- Guidance: Reuse the 3-column equal-card grid with header above; swap videos/images for other proof-of-consistency use cases while keeping the fixed aspect ratio and radius; text scale could be dialed down without losing the hierarchy.

What transfers:
- Header-above-three-column-grid layout
- Equal-width card structure with fixed aspect ratio and consistent radius
- Left-aligned headline, right-aligned caption composition pattern

Dependencies:
- Specific aspect-ratio (4:5) video assets per card
- Exact column widths (min(48svh,496px,82vw)) tuned to this viewport
- Font tokens (Krea 3 Suisse Intl at 100px) for visual parity

## 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%)
- Motion/video behavior not assessable without timestamped visible change evidence
- No interaction or responsive breakpoint data supplied beyond the captured desktop viewport
- Cannot confirm exact video content differences driving the 'consistency' claim

## 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: gallery
- Source type: gallery
- Structure: grid
- Layout: Header spanning the top with a three-column equal-width image grid below.
- Styles: photographic, minimal
- Components: heading, image grid, portrait
- Purpose: A gallery section showcasing character consistency across different scenes using three side-by-side portrait images.
- Visual signature: Three tightly packed vertical portraits of distinct individuals.
- Place on the page: 10 of 22, after Feature collection (`krea-ai:C09`), before Feature collection (`krea-ai:C11`)

### Crop and composition

- Crop: 1440×966px; aspect ratio 1.491:1
- Page bounds: 8266–9232px of 21224px
- Guidance: Keep a clear anchor card and consistent internal card rules so the grid reads as one system.

### 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": "Krea 3 Suisse Intl",
      "stack": "\"Krea 3 Suisse Intl\", sans-serif",
      "size": "72px",
      "weight": "500",
      "lineHeight": "69.1px",
      "letterSpacing": "-2.2px",
      "sample": "A new sceneThe same character",
      "element": "h2",
      "occurrences": 2,
      "sourceId": "font-4"
    },
    {
      "role": "card/subheading",
      "family": "Suisse Intl",
      "stack": "\"Suisse Intl\", ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"",
      "size": "20px",
      "weight": "500",
      "lineHeight": "24px",
      "letterSpacing": "-0.5px",
      "sample": "Change the styling, setting, and mood while keeping the face familiar. Explore character consistency",
      "element": "p",
      "occurrences": 4,
      "sourceId": "font-21"
    }
  ],
  "siteRoles": [
    {
      "role": "display",
      "size": "132px",
      "family": "Krea 3 Suisse Intl",
      "source": "computed",
      "traits": "Regular",
      "weight": "500",
      "evidence": "font-34: computed CSS at 1440×1000; AI role: 132px Krea 3 Suisse Intl, tightly tracked (-2.6px), used for massive impact numbers like '10x Faster'.",
      "sampleId": "font-34",
      "confidence": 1,
      "lineHeight": "116.2px",
      "letterSpacing": "-2.6px"
    },
    {
      "role": "heading",
      "size": "100px",
      "family": "Krea 3 Suisse Intl",
      "source": "computed",
      "traits": "Regular",
      "weight": "500",
      "evidence": "font-8: computed CSS at 1440×1000; AI role: 100px Krea 3 Suisse Intl (-3px letter spacing) used for major section headlines like 'One model Every brief'.",
      "sampleId": "font-8",
      "confidence": 1,
      "lineHeight": "96px",
      "letterSpacing": "-3px"
    },
    {
      "role": "body",
      "size": "20px",
      "family": "Suisse Intl",
      "source": "computed",
      "traits": "Regular",
      "weight": "500",
      "evidence": "font-19: computed CSS at 1440×1000; AI role: 20px Suisse Intl used for standard descriptive paragraph text throughout the page.",
      "sampleId": "font-19",
      "confidence": 0.95,
      "lineHeight": "28px",
      "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": "#000000",
      "cssValue": "rgba(0, 0, 0, 0.05)",
      "alpha": 0.050980392156862744,
      "appliedAs": [
        "control-background",
        "background"
      ],
      "occurrences": 15,
      "sourceId": "color-3"
    },
    {
      "value": "#000000",
      "cssValue": "rgba(0, 0, 0, 0.5)",
      "alpha": 0.5019607843137255,
      "appliedAs": [
        "text",
        "background"
      ],
      "occurrences": 16,
      "sourceId": "color-24"
    }
  ],
  "functionalPalette": [
    {
      "hex": "#FFFFFF",
      "name": "canvas",
      "role": "canvas",
      "source": "computed",
      "evidence": "color-1: computed rgb(255, 255, 255); AI role: Pure white (#FFFFFF) used extensively as the primary background for light sections.",
      "sampleId": "color-1",
      "confidence": 1
    },
    {
      "hex": "#000000",
      "name": "text",
      "role": "text",
      "source": "computed",
      "evidence": "color-4: computed rgb(0, 0, 0); AI role: Pure black (#000000) used for high-contrast primary text on light backgrounds.",
      "sampleId": "color-4",
      "confidence": 1
    },
    {
      "hex": "#2E6CF6",
      "name": "primary action",
      "role": "primary-action",
      "source": "computed",
      "evidence": "color-31: computed rgb(46, 108, 246); AI role: Vibrant blue (#2E6CF6) used for the primary 'Try Krea 3' CTA button and interactive accent highlights.",
      "sampleId": "color-31",
      "confidence": 1
    },
    {
      "hex": "#111111",
      "name": "surface",
      "role": "surface",
      "source": "computed",
      "evidence": "color-5: computed rgb(17, 17, 17); AI role: Dark gray/black (#111111) used as the background for contrasting dark sections (like the hero).",
      "sampleId": "color-5",
      "confidence": 0.9
    },
    {
      "hex": "#737373",
      "name": "muted text",
      "role": "muted-text",
      "source": "computed",
      "evidence": "color-17: computed rgb(115, 115, 115); AI role: Gray (#737373) used for secondary text, metadata, and inactive button states.",
      "sampleId": "color-17",
      "confidence": 0.9
    },
    {
      "hex": "#E5E5E5",
      "name": "border",
      "role": "border",
      "source": "computed",
      "evidence": "color-32: computed oklch(0.922 0 0); AI role: Light gray (#E5E5E5) used for subtle borders around cards and form elements.",
      "sampleId": "color-32",
      "confidence": 0.8
    }
  ]
}
```

### Design tokens

```json
{
  "radius": "Large radii (e.g., 20px-30px) for main content blocks/images, and full-round (50% or 999px) for buttons, tabs, and tags.",
  "density": "Low density. The layout prioritizes large imagery and massive text over packing in information, allowing each feature to breathe.",
  "evidence": "Observed via pill buttons, massive display fonts (font-34, font-6), large rounded media frames, and stark black/white section transitions.",
  "borderStyle": "Mostly borderless, relying on background contrast (dark/light) or subtle, thin light-gray borders (e.g., color-32) for delineating form fields or specific card boundaries.",
  "buttonStyle": "Pill-shaped. Primary actions use solid vibrant blue (color-31) or stark contrasting black/white depending on the section's canvas. Secondary actions use subtle grays or frosted glass effects (color-18, color-38).",
  "cornerStyle": "Consistent use of fully rounded (pill-shaped) elements for buttons and tags, combined with distinct rounded corners on large media cards and form containers.",
  "contentWidth": "Responsive, centering content in a wide max-width container but allowing large media elements and bold typography to bleed towards the edges.",
  "spacingRhythm": "Generous vertical spacing between major sections, utilizing massive typographic scaling to define rhythm. Elements within cards have tighter, functional padding."
}
```

### Reconstruction specification

This is the implementation contract for the captured desktop viewport. Prefer section-specific facts here over general website descriptions.

- Root: 1440×906px; block; padding {"top":"60px","left":"0px","right":"0px","bottom":"60px"}; gap normal; background rgb(255, 255, 255); radius 0px.
- Observed gaps: 20px.
- Representative content widths: 797, 480, 451px.
- Layout containers: 1; cards/surfaces: 3; media elements: 3; browser animations: 0.

#### Container, grid, and spacing

```json
{
  "viewport": {
    "width": 1440,
    "captureBounds": {
      "top": 8266,
      "bottom": 9232,
      "pageHeight": 21224
    }
  },
  "container": {
    "size": "1440×906px",
    "position": "x 0px, y 8326px",
    "display": "block",
    "positionMode": "static",
    "padding": {
      "top": "60px",
      "left": "0px",
      "right": "0px",
      "bottom": "60px"
    },
    "margin": {
      "top": "0px",
      "left": "0px",
      "right": "0px",
      "bottom": "0px"
    },
    "gap": "normal",
    "columns": "not captured",
    "background": "rgb(255, 255, 255)",
    "radius": "0px",
    "border": "0px solid rgb(229, 229, 229)",
    "shadow": "none",
    "overflow": "visible"
  },
  "spacing": {
    "observedGapsPx": [
      20
    ],
    "representativeContentWidthsPx": [
      797,
      480,
      451
    ]
  },
  "columns": [
    {
      "element": "div · row svelte-17bhfuz",
      "size": "1440×600px",
      "position": "x 0px, y 8572px",
      "display": "flex",
      "template": "not captured",
      "direction": "row",
      "gap": "20px"
    }
  ]
}
```

#### Cards and surfaces

```json
{
  "cards": [
    {
      "element": "video · aspect-[4/5] h-auto w-[min(48svh,496px,82vw)] rounded-3xl bg-black/5 object-cover",
      "size": "480×600px",
      "position": "x 64px, y 8572px",
      "padding": [
        "0px",
        "0px",
        "0px",
        "0px"
      ],
      "radius": "24px",
      "border": "0px solid rgb(229, 229, 229)",
      "shadow": "none",
      "background": "oklab(0 0 0 / 0.05)"
    },
    {
      "element": "video · aspect-[4/5] h-auto w-[min(48svh,496px,82vw)] rounded-3xl bg-black/5 object-cover",
      "size": "480×600px",
      "position": "x 564px, y 8572px",
      "padding": [
        "0px",
        "0px",
        "0px",
        "0px"
      ],
      "radius": "24px",
      "border": "0px solid rgb(229, 229, 229)",
      "shadow": "none",
      "background": "oklab(0 0 0 / 0.05)"
    },
    {
      "element": "video · aspect-[4/5] h-auto w-[min(48svh,496px,82vw)] rounded-3xl bg-black/5 object-cover",
      "size": "480×600px",
      "position": "x 1064px, y 8572px",
      "padding": [
        "0px",
        "0px",
        "0px",
        "0px"
      ],
      "radius": "24px",
      "border": "0px solid rgb(229, 229, 229)",
      "shadow": "none",
      "background": "oklab(0 0 0 / 0.05)"
    }
  ],
  "surfaces": {
    "radii": [
      "24px"
    ],
    "borders": [],
    "shadows": []
  }
}
```

#### Media treatment

```json
[
  {
    "element": "video · aspect-[4/5] h-auto w-[min(48svh,496px,82vw)] rounded-3xl bg-black/5 object-cover",
    "size": "480×600px",
    "position": "x 64px, y 8572px",
    "aspectRatio": 0.8,
    "objectFit": "cover",
    "objectPosition": "50% 50%",
    "radius": "24px",
    "overflow": "clip",
    "source": "https://s.krea.ai/k3-landing-v2/face-lock-clean-B-compressed.mp4#t=0.001"
  },
  {
    "element": "video · aspect-[4/5] h-auto w-[min(48svh,496px,82vw)] rounded-3xl bg-black/5 object-cover",
    "size": "480×600px",
    "position": "x 564px, y 8572px",
    "aspectRatio": 0.8,
    "objectFit": "cover",
    "objectPosition": "50% 50%",
    "radius": "24px",
    "overflow": "clip",
    "source": "https://s.krea.ai/k3-landing-v2/face-lock-clean-A-compressed.mp4#t=0.001"
  },
  {
    "element": "video · aspect-[4/5] h-auto w-[min(48svh,496px,82vw)] rounded-3xl bg-black/5 object-cover",
    "size": "480×600px",
    "position": "x 1064px, y 8572px",
    "aspectRatio": 0.8,
    "objectFit": "cover",
    "objectPosition": "50% 50%",
    "radius": "24px",
    "overflow": "clip",
    "source": "https://s.krea.ai/k3-landing-v2/face-lock-clean-C-compressed.mp4#t=0.001"
  }
]
```

#### 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
{
  "root": {
    "id": "ld-1380",
    "gap": "normal",
    "tag": "section",
    "rect": {
      "x": 0,
      "y": 8326,
      "width": 1440,
      "height": 906
    },
    "role": null,
    "label": "A new sceneThe same character Change the styling, setting, and mood while keeping the face familiar.",
    "border": "0px solid rgb(229, 229, 229)",
    "margin": {
      "top": "0px",
      "left": "0px",
      "right": "0px",
      "bottom": "0px"
    },
    "radius": "0px",
    "shadow": "none",
    "columns": null,
    "display": "block",
    "padding": {
      "top": "60px",
      "left": "0px",
      "right": "0px",
      "bottom": "60px"
    },
    "overflow": "visible",
    "position": "static",
    "background": "rgb(255, 255, 255)"
  },
  "cards": [
    {
      "id": "ld-1389",
      "tag": "video",
      "rect": {
        "x": 64,
        "y": 8572,
        "width": 480,
        "height": 600
      },
      "role": null,
      "label": "aspect-[4/5] h-auto w-[min(48svh,496px,82vw)] rounded-3xl bg-black/5 object-cover",
      "border": "0px solid rgb(229, 229, 229)",
      "radius": "24px",
      "shadow": "none",
      "padding": [
        "0px",
        "0px",
        "0px",
        "0px"
      ],
      "background": "oklab(0 0 0 / 0.05)"
    },
    {
      "id": "ld-1391",
      "tag": "video",
      "rect": {
        "x": 564,
        "y": 8572,
        "width": 480,
        "height": 600
      },
      "role": null,
      "label": "aspect-[4/5] h-auto w-[min(48svh,496px,82vw)] rounded-3xl bg-black/5 object-cover",
      "border": "0px solid rgb(229, 229, 229)",
      "radius": "24px",
      "shadow": "none",
      "padding": [
        "0px",
        "0px",
        "0px",
        "0px"
      ],
      "background": "oklab(0 0 0 / 0.05)"
    },
    {
      "id": "ld-1393",
      "tag": "video",
      "rect": {
        "x": 1064,
        "y": 8572,
        "width": 480,
        "height": 600
      },
      "role": null,
      "label": "aspect-[4/5] h-auto w-[min(48svh,496px,82vw)] rounded-3xl bg-black/5 object-cover",
      "border": "0px solid rgb(229, 229, 229)",
      "radius": "24px",
      "shadow": "none",
      "padding": [
        "0px",
        "0px",
        "0px",
        "0px"
      ],
      "background": "oklab(0 0 0 / 0.05)"
    }
  ],
  "media": [
    {
      "id": "ld-1389",
      "tag": "video",
      "rect": {
        "x": 64,
        "y": 8572,
        "width": 480,
        "height": 600
      },
      "role": null,
      "label": "aspect-[4/5] h-auto w-[min(48svh,496px,82vw)] rounded-3xl bg-black/5 object-cover",
      "media": {
        "src": "https://s.krea.ai/k3-landing-v2/face-lock-clean-B-compressed.mp4#t=0.001",
        "poster": "",
        "duration": 6.233333
      },
      "radius": "24px",
      "overflow": "clip",
      "objectFit": "cover",
      "aspectRatio": 0.8,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-1391",
      "tag": "video",
      "rect": {
        "x": 564,
        "y": 8572,
        "width": 480,
        "height": 600
      },
      "role": null,
      "label": "aspect-[4/5] h-auto w-[min(48svh,496px,82vw)] rounded-3xl bg-black/5 object-cover",
      "media": {
        "src": "https://s.krea.ai/k3-landing-v2/face-lock-clean-A-compressed.mp4#t=0.001",
        "poster": "",
        "duration": 6.233333
      },
      "radius": "24px",
      "overflow": "clip",
      "objectFit": "cover",
      "aspectRatio": 0.8,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-1393",
      "tag": "video",
      "rect": {
        "x": 1064,
        "y": 8572,
        "width": 480,
        "height": 600
      },
      "role": null,
      "label": "aspect-[4/5] h-auto w-[min(48svh,496px,82vw)] rounded-3xl bg-black/5 object-cover",
      "media": {
        "src": "https://s.krea.ai/k3-landing-v2/face-lock-clean-C-compressed.mp4#t=0.001",
        "poster": "",
        "duration": 6.233333
      },
      "radius": "24px",
      "overflow": "clip",
      "objectFit": "cover",
      "aspectRatio": 0.8,
      "objectPosition": "50% 50%"
    }
  ],
  "bounds": {
    "top": 8266,
    "bottom": 9232,
    "pageHeight": 21224
  },
  "schema": "little-details-section-measurements-v1",
  "source": "saved DOM/CSS element and animation maps",
  "columns": [
    {
      "id": "ld-1387",
      "gap": "20px",
      "tag": "div",
      "rect": {
        "x": 0,
        "y": 8572,
        "width": 1440,
        "height": 600
      },
      "role": "region",
      "label": "row svelte-17bhfuz",
      "columns": null,
      "display": "flex",
      "direction": "row"
    }
  ],
  "spacing": {
    "gapsPx": [
      20
    ],
    "representativeContentWidthsPx": [
      797,
      480,
      451
    ]
  },
  "coverage": {
    "cards": 3,
    "media": 3,
    "animations": 0,
    "elementsInSection": 11
  },
  "surfaces": {
    "radii": [
      "24px"
    ],
    "borders": [],
    "shadows": []
  },
  "animations": [],
  "capturedAt": "2026-10-31T06:25:43.715Z",
  "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."
  ],
  "viewportWidth": 1440
}
```

### 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: Header-above-three-column-grid layout; Equal-width card structure with fixed aspect ratio and consistent radius; Left-aligned headline, right-aligned caption composition pattern
- Dependencies: Specific aspect-ratio (4:5) video assets per card; Exact column widths (min(48svh,496px,82vw)) tuned to this viewport; Font tokens (Krea 3 Suisse Intl at 100px) for visual parity
- Guidance: Reuse the 3-column equal-card grid with header above; swap videos/images for other proof-of-consistency use cases while keeping the fixed aspect ratio and radius; text scale could be dialed down without losing the hierarchy.

### 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 gallery section inspired by the design evidence titled “Character consistency portrait trio”.

Purpose: A gallery section showcasing character consistency across different scenes using three side-by-side portrait images.

Structure: grid. Source layout label: Header spanning the top with a three-column equal-width image grid below.. Keep a clear anchor card and consistent internal card rules so the grid reads as one system.

Visual signature to preserve at the pattern level: Three tightly packed vertical portraits of distinct individuals.

Components: heading, image grid, portrait.

Style direction: photographic, minimal.

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

Typography evidence: {"role":"display","size":"132px","family":"Krea 3 Suisse Intl","source":"computed","traits":"Regular","weight":"500","evidence":"font-34: computed CSS at 1440×1000; AI role: 132px Krea 3 Suisse Intl, tightly tracked (-2.6px), used for massive impact numbers like '10x Faster'.","sampleId":"font-34","confidence":1,"lineHeight":"116.2px","letterSpacing":"-2.6px"} {"role":"heading","size":"100px","family":"Krea 3 Suisse Intl","source":"computed","traits":"Regular","weight":"500","evidence":"font-8: computed CSS at 1440×1000; AI role: 100px Krea 3 Suisse Intl (-3px letter spacing) used for major section headlines like 'One model Every brief'.","sampleId":"font-8","confidence":1,"lineHeight":"96px","letterSpacing":"-3px"} {"role":"body","size":"20px","family":"Suisse Intl","source":"computed","traits":"Regular","weight":"500","evidence":"font-19: computed CSS at 1440×1000; AI role: 20px Suisse Intl used for standard descriptive paragraph text throughout the page.","sampleId":"font-19","confidence":0.95,"lineHeight":"28px","letterSpacing":"normal"}

Color evidence: {"hex":"#FFFFFF","name":"canvas","role":"canvas","source":"computed","evidence":"color-1: computed rgb(255, 255, 255); AI role: Pure white (#FFFFFF) used extensively as the primary background for light sections.","sampleId":"color-1","confidence":1} {"hex":"#000000","name":"text","role":"text","source":"computed","evidence":"color-4: computed rgb(0, 0, 0); AI role: Pure black (#000000) used for high-contrast primary text on light backgrounds.","sampleId":"color-4","confidence":1} {"hex":"#2E6CF6","name":"primary action","role":"primary-action","source":"computed","evidence":"color-31: computed rgb(46, 108, 246); AI role: Vibrant blue (#2E6CF6) used for the primary 'Try Krea 3' CTA button and interactive accent highlights.","sampleId":"color-31","confidence":1} {"hex":"#111111","name":"surface","role":"surface","source":"computed","evidence":"color-5: computed rgb(17, 17, 17); AI role: Dark gray/black (#111111) used as the background for contrasting dark sections (like the hero).","sampleId":"color-5","confidence":0.9} {"hex":"#737373","name":"muted text","role":"muted-text","source":"computed","evidence":"color-17: computed rgb(115, 115, 115); AI role: Gray (#737373) used for secondary text, metadata, and inactive button states.","sampleId":"color-17","confidence":0.9} {"hex":"#E5E5E5","name":"border","role":"border","source":"computed","evidence":"color-32: computed oklch(0.922 0 0); AI role: Light gray (#E5E5E5) used for subtle borders around cards and form elements.","sampleId":"color-32","confidence":0.8}

Typography measured inside this section: {"id":"font-4","size":"72px","count":2,"family":"Krea 3 Suisse Intl","traits":"Regular","weight":"500","contexts":[{"tag":"h2","top":8386,"text":"A new sceneThe same character","property":"font"},{"tag":"h2","top":10428,"text":"Same editsLess waiting","property":"font"}],"fontStack":"\"Krea 3 Suisse Intl\", sans-serif","lineHeight":"69.1px","letterSpacing":"-2.2px"} {"id":"font-21","size":"20px","count":4,"family":"Suisse Intl","traits":"Regular","weight":"500","contexts":[{"tag":"p","top":8447,"text":"Change the styling, setting, and mood while keeping the face familiar. Explore character consistency","property":"font"},{"tag":"span","top":8470,"text":"keeping the face familiar.","property":"font"},{"tag":"p","top":10466,"text":"One image. Twelve identical prompts. Watch Krea 3, Nano Banana Pro, and GPT Image 2.5 work through t","property":"font"}],"fontStack":"\"Suisse Intl\", ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"","lineHeight":"24px","letterSpacing":"-0.5px"}

Colors measured inside this section: {"id":"color-3","hex":"#000000","alpha":0.050980392156862744,"count":15,"contexts":[{"tag":"button","top":2087,"text":"$0.06","property":"control-background"},{"tag":"video","top":8572,"text":"","property":"background"},{"tag":"div","top":10651,"text":"","property":"background"}],"cssValue":"rgba(0, 0, 0, 0.05)"} {"id":"color-24","hex":"#000000","alpha":0.5019607843137255,"count":16,"contexts":[{"tag":"span","top":6279,"text":"Three-circle print","property":"text"},{"tag":"p","top":8447,"text":"Change the styling, setting, and mood while keeping the face familiar. Explore character consistency","property":"text"},{"tag":"span","top":9969,"text":"1:1","property":"background"}],"cssValue":"rgba(0, 0, 0, 0.5)"}

Exact section measurements from the saved element map: root {"rect":{"x":0,"y":8326,"width":1440,"height":906},"padding":{"top":"60px","left":"0px","right":"0px","bottom":"60px"},"gap":"normal","columns":null,"overflow":"visible"}; spacing {"gapsPx":[20],"representativeContentWidthsPx":[797,480,451]}; surfaces {"radii":["24px"],"borders":[],"shadows":[]}; media [{"tag":"video","rect":{"x":64,"y":8572,"width":480,"height":600},"aspectRatio":0.8,"objectFit":"cover","objectPosition":"50% 50%","radius":"24px"},{"tag":"video","rect":{"x":564,"y":8572,"width":480,"height":600},"aspectRatio":0.8,"objectFit":"cover","objectPosition":"50% 50%","radius":"24px"},{"tag":"video","rect":{"x":1064,"y":8572,"width":480,"height":600},"aspectRatio":0.8,"objectFit":"cover","objectPosition":"50% 50%","radius":"24px"}]

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

Transfer these principles: Header-above-three-column-grid layout; Equal-width card structure with fixed aspect ratio and consistent radius; Left-aligned headline, right-aligned caption composition pattern.

Dependencies: Specific aspect-ratio (4:5) video assets per card; Exact column widths (min(48svh,496px,82vw)) tuned to this viewport; Font tokens (Krea 3 Suisse Intl at 100px) for visual parity.

Adaptation guidance: Reuse the 3-column equal-card grid with header above; swap videos/images for other proof-of-consistency use cases while keeping the fixed aspect ratio and radius; text scale could be dialed down without losing the hierarchy.

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