# Interactive image editing hero

Schema: Design Details SECTION.md v3.2
Website: Krea
Source: https://www.krea.ai/krea-3
Source section IDs: 9cf46238-b891-4734-bace-23aceea009b8
Status: AI analysed; vocabulary promotion is automated

## Builder's note

What makes it work:
- Tooltips like 'Add a silver fork' sit on the exact regions of the photo they describe, so the image proves the product claim without extra explanation.
- Corner-bracket selection boxes and small numbered pills make the photo read as a live editing tool, while the busy blue-tiled image stays the focal point.
- The bottom-left lockup has a 56px white heading with tight tracking, a muted subline and a button pair, leaving the rest of the frame free for the image.

What a screenshot can't show:
- The recording shows an editing demo running over the first 4 seconds, with parts of the image selected and altered, but not the order or timing of each change.
- Measured type: the heading is 56px, weight 500, line height 53.8px, letter spacing -1.7px; tooltip text is 14px and number badges 11.5px.

Borrow: Lay annotation markers directly on a rich photo so the picture itself demonstrates what the product does.
Leave alone: Don't copy the sardines-and-olives-on-blue-tile photo, the Suisse Intl typeface (use a neutral grotesque like Inter instead) or the exact tooltip copy.

## Classification

- Type: hero
- Layout: Full-bleed background image with absolute-positioned floating UI elements and bottom-left text lockup.
- Styles: photographic, bold, colourful
- Confidence: 100%

## Purpose and structure

A full-bleed hero section showing a dynamic, interactive background image of food on blue tiles, overlaid with UI tooltips demonstrating live editing capabilities.

Visual signature: Large visually rich background of sardines and olives on blue tiles with floating edit tooltips.

## Components

- background image
- heading
- floating UI
- button
- tooltip
- annotation

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

- 0.0–4.0s — An interactive image editing demo runs in the background of the hero section, showing parts of an image being selected and altered. (95% confidence)

## Section quality

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

- Typography: 60 — Large bold white display heading with a de-emphasized gray subline creates clear hierarchy, but the type treatment itself (weight, size jump, letter-spacing) is a standard hero pattern rather than a distinctive typographic idea. Next tier: Needs a more deliberate type-driven hierarchy or scale relationship (e.g. unexpected pairing, rhythm between headline and annotation labels) rather than a conventional big-headline/small-subline stack.
- Composition: 72 — Full-bleed photographic background is layered with bracket-cornered selection markers and numbered pill tooltips that visually read as an active tool overlay, while the text lockup and CTA pair sit cleanly in the lower corners without competing with the image detail. The annotation geometry (selection box plus leader lines) gives the frame a believable 'live editing' structure rather than decorative clutter. Next tier: The underlying layout (bottom-left text block, bottom-right button pair, full-bleed photo) is a common hero template; to reach strong/memorable the spatial arrangement itself would need to feel less interchangeable with any photographic hero.
- Motion: inconclusive — Gemini reports a 0–4s window where parts of the image are 'selected and altered' but gives no specific timestamped descriptions of what changes, in what order, or how elements enter/exit, so the actual choreography cannot be judged. Next tier: Requires granular timestamped motion evidence (e.g. exact sequence of tooltip appearance, selection-box draw-in, image swap) to score motion quality.
- Content: 68 — The tooltip copy ('Add a silver fork', 'Pour rosé instead') is directly tied to the product's editing claim and is overlaid on the exact regions of the image it references, making the demonstration content and visual chrome feel integrated rather than bolted on. Next tier: Content remains a single staged example; richer or more varied content integration (e.g. multiple real edit states, before/after cues) would be needed to go further.
- Originality: 70 — Using corner-bracket selection markers and numbered callouts directly on a photoreal image to dramatize an AI editing capability is a more specific device than a generic photographic hero with headline-over-image, and it ties visual proof to the product claim. Next tier: The annotation style (rounded pill, numbered badge, bracket corners) is a fairly familiar 'UI overlay' visual language seen across many product demo hero sections; a more unusual interaction model or annotation form would be needed for landmark originality.
- Adaptability: 55 — The section cleanly separates into a background image layer, an absolute-positioned annotation/tooltip layer, and a bottom text+button lockup, which is structurally transferable to other photography and copy. Next tier: The annotation positions are hand-placed against specific image content (fork near bread, rosé near glass), so swapping imagery requires re-authoring every selection box and tooltip, limiting how cleanly the skin can be swapped without touching structure.

Strengths:
- Selection-box and numbered-pill overlays make the AI-editing claim visually concrete rather than just stated in copy
- Clean three-tier text hierarchy (product name, headline, comparison claim) anchored to one corner keeps the photographic focal point unobstructed
- Button pair (solid white primary / translucent dark secondary) is legible against a busy photographic background

Weaknesses:
- Overall hero layout (full-bleed photo + bottom-left text + bottom-right CTAs) is a widely used template
- Typography treatment is a standard large-headline/small-subline hero stack without a distinctive scale or pairing idea
- Motion cannot be verified beyond a vague description of 'selection and alteration' happening somewhere in a 4-second window
- Annotation placements are tightly coupled to this specific photograph, making content swaps labor-intensive

Why it does not reach the next tier: The section demonstrates its product claim well through overlay annotations, but the surrounding typographic and layout choices are conventional hero-template moves, and the motion/choreography that would prove the 'live editing' idea is not evidenced with specifics, keeping it from strong/memorable territory.

## Adaptation guidance

- Effort: Medium
- Guidance: Reuse the layered structure (bg image, overlay annotation layer, text+CTA lockup) but re-author annotation coordinates per new photo; the annotation visual style (pill badge, bracket corners, leader line) can be lifted as a reusable component independent of the specific food photography.

What transfers:
- Full-bleed photographic background with bottom-corner text lockup and dual CTA pattern
- Numbered pill + bracket-corner annotation system for demonstrating localized edits
- Faded secondary claim line beneath a bold primary headline

Dependencies:
- Specific photograph with clearly separable editable regions for annotation placement
- Exact coordinates of selection boxes and tooltip anchor points tied to this image
- Underlying interactive/video demo asset driving the 0–4s change sequence

## 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 scoring was withheld due to lack of specific timestamped visual changes
- Exact colors, radii, and animation timing were not independently verified beyond supplied tokens
- Judgment is based on a single static crop plus limited motion description, not full interaction behavior

## 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: hero
- Source type: hero
- Structure: full-bleed
- Layout: Full-bleed background image with absolute-positioned floating UI elements and bottom-left text lockup.
- Styles: photographic, bold, colourful
- Components: background image, heading, floating UI, button, tooltip, annotation
- Purpose: A full-bleed hero section showing a dynamic, interactive background image of food on blue tiles, overlaid with UI tooltips demonstrating live editing capabilities.
- Visual signature: Large visually rich background of sardines and olives on blue tiles with floating edit tooltips.
- Place on the page: 2 of 22, after Navigation (`krea-ai:C01`), before Stats (`krea-ai:C03`)

### Crop and composition

- Crop: 1440×912px; aspect ratio 1.579:1
- Page bounds: 88–1000px of 21224px
- 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": [
    {
      "role": "section heading",
      "family": "Krea 3 Suisse Intl",
      "stack": "\"Krea 3 Suisse Intl\", sans-serif",
      "size": "56px",
      "weight": "500",
      "lineHeight": "53.8px",
      "letterSpacing": "-1.7px",
      "sample": "Krea 3:Frontier Image Editing Model4× faster than Nano Banana Pro",
      "element": "h1",
      "occurrences": 3,
      "sourceId": "font-3"
    },
    {
      "role": "UI/supporting text",
      "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": "16px",
      "weight": "500",
      "lineHeight": "24px",
      "letterSpacing": "normal",
      "sample": "Contact sales",
      "element": "a",
      "occurrences": 53,
      "sourceId": "font-28"
    },
    {
      "role": "UI/supporting text",
      "family": "not captured",
      "stack": "system-ui, sans-serif",
      "size": "11.5px",
      "weight": "500",
      "lineHeight": "11.5px",
      "letterSpacing": "normal",
      "sample": "1",
      "element": "span",
      "occurrences": 40,
      "sourceId": "font-29"
    },
    {
      "role": "UI/supporting text",
      "family": "not captured",
      "stack": "system-ui, sans-serif",
      "size": "14px",
      "weight": "500",
      "lineHeight": "14px",
      "letterSpacing": "normal",
      "sample": "Make the lenses icy blue",
      "element": "span",
      "occurrences": 20,
      "sourceId": "font-36"
    }
  ],
  "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": "rgb(0, 0, 0)",
      "alpha": 1,
      "appliedAs": [
        "svg-fill",
        "text"
      ],
      "occurrences": 335,
      "sourceId": "color-4"
    },
    {
      "value": "#111111",
      "cssValue": "rgb(17, 17, 17)",
      "alpha": 1,
      "appliedAs": [
        "background",
        "text"
      ],
      "occurrences": 36,
      "sourceId": "color-5"
    },
    {
      "value": "#FFFFFF",
      "cssValue": "rgba(255, 255, 255, 0.04)",
      "alpha": 0.0392156862745098,
      "appliedAs": [
        "background",
        "control-background",
        "svg-fill"
      ],
      "occurrences": 11,
      "sourceId": "color-7"
    },
    {
      "value": "#F4F4F2",
      "cssValue": "rgba(244, 244, 242, 0.85)",
      "alpha": 0.8509803921568627,
      "appliedAs": [
        "background"
      ],
      "occurrences": 20,
      "sourceId": "color-18"
    },
    {
      "value": "#000000",
      "cssValue": "rgba(0, 0, 0, 0.75)",
      "alpha": 0.7490196078431373,
      "appliedAs": [
        "::after-background"
      ],
      "occurrences": 60,
      "sourceId": "color-25"
    },
    {
      "value": "#FFFFFF",
      "cssValue": "rgba(255, 255, 255, 0.62)",
      "alpha": 0.6196078431372549,
      "appliedAs": [
        "text"
      ],
      "occurrences": 1,
      "sourceId": "color-30"
    },
    {
      "value": "#000000",
      "cssValue": "rgba(0, 0, 0, 0.08)",
      "alpha": 0.0784313725490196,
      "appliedAs": [
        "border"
      ],
      "occurrences": 80,
      "sourceId": "color-46"
    },
    {
      "value": "#2B7FFF",
      "cssValue": "oklch(0.623 0.214 259.815)",
      "alpha": 1,
      "appliedAs": [
        "background"
      ],
      "occurrences": 12,
      "sourceId": "color-47"
    }
  ],
  "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×1000px; block; padding {"top":"0px","left":"0px","right":"0px","bottom":"0px"}; gap normal; background rgb(17, 17, 17); radius 0px.
- Observed gaps: 3, 16px.
- Representative content widths: 956, 787, 781, 762, 350px.
- Layout containers: 7; cards/surfaces: 0; media elements: 7; browser animations: 0.

#### Container, grid, and spacing

```json
{
  "viewport": {
    "width": 1440,
    "captureBounds": {
      "top": 88,
      "bottom": 1000,
      "pageHeight": 21224
    }
  },
  "container": {
    "size": "1440×1000px",
    "position": "x 0px, y 0px",
    "display": "block",
    "positionMode": "relative",
    "padding": {
      "top": "0px",
      "left": "0px",
      "right": "0px",
      "bottom": "0px"
    },
    "margin": {
      "top": "0px",
      "left": "0px",
      "right": "0px",
      "bottom": "0px"
    },
    "gap": "normal",
    "columns": "not captured",
    "background": "rgb(17, 17, 17)",
    "radius": "0px",
    "border": "0px solid rgb(229, 229, 229)",
    "shadow": "none",
    "overflow": "hidden"
  },
  "spacing": {
    "observedGapsPx": [
      3,
      16
    ],
    "representativeContentWidthsPx": [
      956,
      787,
      781,
      762,
      350
    ]
  },
  "columns": [
    {
      "element": "span · 4",
      "size": "22×22px",
      "position": "x 691px, y 439px",
      "display": "grid",
      "template": "10px",
      "direction": "row",
      "gap": "normal"
    },
    {
      "element": "span · 4",
      "size": "22×22px",
      "position": "x 711px, y 401px",
      "display": "grid",
      "template": "10px",
      "direction": "row",
      "gap": "normal"
    },
    {
      "element": "span · 5",
      "size": "22×22px",
      "position": "x -21px, y 314px",
      "display": "grid",
      "template": "10px",
      "direction": "row",
      "gap": "normal"
    },
    {
      "element": "span · 5",
      "size": "22×22px",
      "position": "x -1px, y 276px",
      "display": "grid",
      "template": "10px",
      "direction": "row",
      "gap": "normal"
    },
    {
      "element": "span · 6",
      "size": "22×22px",
      "position": "x 613px, y 392px",
      "display": "grid",
      "template": "10px",
      "direction": "row",
      "gap": "normal"
    },
    {
      "element": "div · K r e a 3",
      "size": "781×41px",
      "position": "x 56px, y 786px",
      "display": "flex",
      "template": "not captured",
      "direction": "row",
      "gap": "normal"
    },
    {
      "element": "nav · CapabilitiesUse CasesPerformanceBenchmarks Try Krea 3",
      "size": "762×60px",
      "position": "x 339px, y 940px",
      "display": "flex",
      "template": "not captured",
      "direction": "row",
      "gap": "16px"
    }
  ]
}
```

#### Cards and surfaces

```json
{
  "cards": [],
  "surfaces": {
    "radii": [
      "14px 14px 14px 4px",
      "999px",
      "3.35544e+07px"
    ],
    "borders": [],
    "shadows": [
      "rgb(255, 255, 255) 0px 0px 0px 1.5px, rgba(0, 0, 0, 0.55) 0px 3px 10px -2px",
      "rgba(255, 255, 255, 0.3) 0px 0px 0px 0.5px inset",
      "rgba(46, 108, 246, 0.35) 0px 12px 40px -8px"
    ]
  }
}
```

#### Media treatment

```json
[
  {
    "element": "img · base svelte-11j40lu loaded",
    "size": "1781×1000px",
    "position": "x -260px, y 0px",
    "aspectRatio": 1.8,
    "objectFit": "cover",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "clip",
    "source": "https://s.krea.ai/k3-landing-final/hero-windcoat-base.webp"
  },
  {
    "element": "svg · svg",
    "size": "1781×1000px",
    "position": "x -260px, y 0px",
    "aspectRatio": 1.8,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "hidden",
    "source": "source not captured"
  },
  {
    "element": "svg · svg",
    "size": "956×678px",
    "position": "x -12px, y 324px",
    "aspectRatio": 1.4,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "visible",
    "source": "source not captured"
  },
  {
    "element": "svg · svg",
    "size": "787×553px",
    "position": "x 701px, y 449px",
    "aspectRatio": 1.4,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "visible",
    "source": "source not captured"
  },
  {
    "element": "svg · svg",
    "size": "350×338px",
    "position": "x 603px, y 29px",
    "aspectRatio": 1,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "visible",
    "source": "source not captured"
  },
  {
    "element": "svg · svg",
    "size": "12×12px",
    "position": "x 907px, y 405px",
    "aspectRatio": 1,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "hidden",
    "source": "source not captured"
  },
  {
    "element": "svg · svg",
    "size": "12×12px",
    "position": "x 202px, y 280px",
    "aspectRatio": 1,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "hidden",
    "source": "source not captured"
  }
]
```

#### 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-17",
    "gap": "normal",
    "tag": "section",
    "rect": {
      "x": 0,
      "y": 0,
      "width": 1440,
      "height": 1000
    },
    "role": null,
    "label": "4 4 Add blowing rose petals Under 8s5 5 Make the coat cherry red Under 8s6 6 Dye her hair pastel pin",
    "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": "0px",
      "left": "0px",
      "right": "0px",
      "bottom": "0px"
    },
    "overflow": "hidden",
    "position": "relative",
    "background": "rgb(17, 17, 17)"
  },
  "cards": [],
  "media": [
    {
      "id": "ld-23",
      "tag": "img",
      "rect": {
        "x": -260,
        "y": 0,
        "width": 1781,
        "height": 1000
      },
      "role": null,
      "label": "base svelte-11j40lu loaded",
      "media": {
        "alt": "A fashion portrait: a platinum-haired woman in amber shield sunglasses and an oversized black wool coat leans into the wind against a blue-to-pink studio gradient.",
        "src": "https://s.krea.ai/k3-landing-final/hero-windcoat-base.webp",
        "naturalWidth": 2736,
        "naturalHeight": 1536
      },
      "radius": "0px",
      "overflow": "clip",
      "objectFit": "cover",
      "aspectRatio": 1.8,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-34",
      "tag": "svg",
      "rect": {
        "x": -260,
        "y": 0,
        "width": 1781,
        "height": 1000
      },
      "role": null,
      "label": "svg",
      "media": null,
      "radius": "0px",
      "overflow": "hidden",
      "objectFit": "fill",
      "aspectRatio": 1.8,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-61",
      "tag": "svg",
      "rect": {
        "x": -12,
        "y": 324,
        "width": 956,
        "height": 678
      },
      "role": null,
      "label": "svg",
      "media": null,
      "radius": "0px",
      "overflow": "visible",
      "objectFit": "fill",
      "aspectRatio": 1.4,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-47",
      "tag": "svg",
      "rect": {
        "x": 701,
        "y": 449,
        "width": 787,
        "height": 553
      },
      "role": null,
      "label": "svg",
      "media": null,
      "radius": "0px",
      "overflow": "visible",
      "objectFit": "fill",
      "aspectRatio": 1.4,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-75",
      "tag": "svg",
      "rect": {
        "x": 603,
        "y": 29,
        "width": 350,
        "height": 338
      },
      "role": null,
      "label": "svg",
      "media": null,
      "radius": "0px",
      "overflow": "visible",
      "objectFit": "fill",
      "aspectRatio": 1,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-54",
      "tag": "svg",
      "rect": {
        "x": 907,
        "y": 405,
        "width": 12,
        "height": 12
      },
      "role": null,
      "label": "svg",
      "media": null,
      "radius": "0px",
      "overflow": "hidden",
      "objectFit": "fill",
      "aspectRatio": 1,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-68",
      "tag": "svg",
      "rect": {
        "x": 202,
        "y": 280,
        "width": 12,
        "height": 12
      },
      "role": null,
      "label": "svg",
      "media": null,
      "radius": "0px",
      "overflow": "hidden",
      "objectFit": "fill",
      "aspectRatio": 1,
      "objectPosition": "50% 50%"
    }
  ],
  "bounds": {
    "top": 88,
    "bottom": 1000,
    "pageHeight": 21224
  },
  "schema": "little-details-section-measurements-v1",
  "source": "saved DOM/CSS element and animation maps",
  "columns": [
    {
      "id": "ld-43",
      "gap": "normal",
      "tag": "span",
      "rect": {
        "x": 691,
        "y": 439,
        "width": 22,
        "height": 22
      },
      "role": null,
      "label": "4",
      "columns": "10px",
      "display": "grid",
      "direction": "row"
    },
    {
      "id": "ld-50",
      "gap": "normal",
      "tag": "span",
      "rect": {
        "x": 711,
        "y": 401,
        "width": 22,
        "height": 22
      },
      "role": null,
      "label": "4",
      "columns": "10px",
      "display": "grid",
      "direction": "row"
    },
    {
      "id": "ld-57",
      "gap": "normal",
      "tag": "span",
      "rect": {
        "x": -21,
        "y": 314,
        "width": 22,
        "height": 22
      },
      "role": null,
      "label": "5",
      "columns": "10px",
      "display": "grid",
      "direction": "row"
    },
    {
      "id": "ld-64",
      "gap": "normal",
      "tag": "span",
      "rect": {
        "x": -1,
        "y": 276,
        "width": 22,
        "height": 22
      },
      "role": null,
      "label": "5",
      "columns": "10px",
      "display": "grid",
      "direction": "row"
    },
    {
      "id": "ld-79",
      "gap": "normal",
      "tag": "span",
      "rect": {
        "x": 613,
        "y": 392,
        "width": 22,
        "height": 22
      },
      "role": null,
      "label": "6",
      "columns": "10px",
      "display": "grid",
      "direction": "row"
    },
    {
      "id": "ld-85",
      "gap": "normal",
      "tag": "div",
      "rect": {
        "x": 56,
        "y": 786,
        "width": 781,
        "height": 41
      },
      "role": "group",
      "label": "K r e a 3",
      "columns": null,
      "display": "flex",
      "direction": "row"
    },
    {
      "id": "ld-3297",
      "gap": "16px",
      "tag": "nav",
      "rect": {
        "x": 339,
        "y": 940,
        "width": 762,
        "height": 60
      },
      "role": null,
      "label": "CapabilitiesUse CasesPerformanceBenchmarks Try Krea 3",
      "columns": null,
      "display": "flex",
      "direction": "row"
    }
  ],
  "spacing": {
    "gapsPx": [
      3,
      16
    ],
    "representativeContentWidthsPx": [
      956,
      787,
      781,
      762,
      350
    ]
  },
  "coverage": {
    "cards": 0,
    "media": 7,
    "animations": 0,
    "elementsInSection": 43
  },
  "surfaces": {
    "radii": [
      "14px 14px 14px 4px",
      "999px",
      "3.35544e+07px"
    ],
    "borders": [],
    "shadows": [
      "rgb(255, 255, 255) 0px 0px 0px 1.5px, rgba(0, 0, 0, 0.55) 0px 3px 10px -2px",
      "rgba(255, 255, 255, 0.3) 0px 0px 0px 0.5px inset",
      "rgba(46, 108, 246, 0.35) 0px 12px 40px -8px"
    ]
  },
  "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

1. **interaction** — An interactive image editing demo runs in the background of the hero section, showing parts of an image being selected and altered. (0s–4s; 95% confidence). Recreate the interaction principle with project-appropriate timing and easing; the evidence does not guarantee source easing values.

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: medium
- What transfers: Full-bleed photographic background with bottom-corner text lockup and dual CTA pattern; Numbered pill + bracket-corner annotation system for demonstrating localized edits; Faded secondary claim line beneath a bold primary headline
- Dependencies: Specific photograph with clearly separable editable regions for annotation placement; Exact coordinates of selection boxes and tooltip anchor points tied to this image; Underlying interactive/video demo asset driving the 0–4s change sequence
- Guidance: Reuse the layered structure (bg image, overlay annotation layer, text+CTA lockup) but re-author annotation coordinates per new photo; the annotation visual style (pill badge, bracket corners, leader line) can be lifted as a reusable component independent of the specific food photography.

### Evidence readiness

- Coverage: 7/7
- Can build: Yes
- Missing facts: None


### Agent implementation prompt

Create an original hero section inspired by the design evidence titled “Interactive image editing hero”.

Purpose: A full-bleed hero section showing a dynamic, interactive background image of food on blue tiles, overlaid with UI tooltips demonstrating live editing capabilities.

Structure: full-bleed. Source layout label: Full-bleed background image with absolute-positioned floating UI elements and bottom-left text lockup.. Let the primary media establish the section boundary and protect legibility with controlled overlays.

Visual signature to preserve at the pattern level: Large visually rich background of sardines and olives on blue tiles with floating edit tooltips.

Components: background image, heading, floating UI, button, tooltip, annotation.

Style direction: photographic, bold, colourful.

Observed crop: 1440×912px (1.579: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-3","size":"56px","count":3,"family":"Krea 3 Suisse Intl","traits":"Regular","weight":"500","contexts":[{"tag":"h1","top":845,"text":"Krea 3:Frontier Image Editing Model4× faster than Nano Banana Pro","property":"font"},{"tag":"span","top":844,"text":"Krea 3:","property":"font"},{"tag":"span","top":888,"text":"4× faster than Nano Banana Pro","property":"font"}],"fontStack":"\"Krea 3 Suisse Intl\", sans-serif","lineHeight":"53.8px","letterSpacing":"-1.7px"} {"id":"font-28","size":"16px","count":53,"family":"Suisse Intl","traits":"Regular","weight":"500","contexts":[{"tag":"a","top":20,"text":"Contact sales","property":"font"},{"tag":"a","top":900,"text":"Try Krea 3","property":"font"},{"tag":"a","top":900,"text":"See what it can do","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":"normal"} {"id":"font-29","size":"11.5px","count":40,"family":null,"traits":"Regular","weight":"500","contexts":[{"tag":"span","top":309,"text":"1","property":"font"},{"tag":"span","top":271,"text":"1","property":"font"},{"tag":"span","top":4,"text":"2","property":"font"}],"fontStack":"system-ui, sans-serif","lineHeight":"11.5px","letterSpacing":"normal"} {"id":"font-36","size":"14px","count":20,"family":null,"traits":"Regular","weight":"500","contexts":[{"tag":"span","top":275,"text":"Make the lenses icy blue","property":"font"},{"tag":"span","top":421,"text":"Add a white dove","property":"font"},{"tag":"span","top":400,"text":"Make the lips cherry red","property":"font"}],"fontStack":"system-ui, sans-serif","lineHeight":"14px","letterSpacing":"normal"}

Colors measured inside this section: {"id":"color-4","hex":"#000000","alpha":1,"count":335,"contexts":[{"tag":"svg","top":319,"text":"","property":"svg-fill"},{"tag":"a","top":900,"text":"Try Krea 3","property":"text"},{"tag":"line","top":1545,"text":"","property":"svg-fill"}],"cssValue":"rgb(0, 0, 0)"} {"id":"color-5","hex":"#111111","alpha":1,"count":36,"contexts":[{"tag":"section","top":0,"text":"1 1 Make the lenses icy blue Under 8s2 2 Add a white dove Under 8s3 3 Make the lips cherry red Under","property":"background"},{"tag":"span","top":275,"text":"Make the lenses icy blue","property":"text"},{"tag":"span","top":3273,"text":"","property":"background"}],"cssValue":"rgb(17, 17, 17)"} {"id":"color-7","hex":"#FFFFFF","alpha":0.0392156862745098,"count":11,"contexts":[{"tag":"div","top":320,"text":"1","property":"background"},{"tag":"button","top":5701,"text":"1","property":"control-background"},{"tag":"svg","top":7456,"text":"","property":"svg-fill"}],"cssValue":"rgba(255, 255, 255, 0.04)"} {"id":"color-18","hex":"#F4F4F2","alpha":0.8509803921568627,"count":20,"contexts":[{"tag":"div","top":262,"text":"1 Make the lenses icy blue Under 8s","property":"background"},{"tag":"span","top":4517,"text":"1 Glass mug","property":"background"}],"cssValue":"rgba(244, 244, 242, 0.85)"} {"id":"color-25","hex":"#000000","alpha":0.7490196078431373,"count":60,"contexts":[{"tag":"span","top":307,"text":"","property":"::after-background"}],"cssValue":"rgba(0, 0, 0, 0.75)"} {"id":"color-30","hex":"#FFFFFF","alpha":0.6196078431372549,"count":1,"contexts":[{"tag":"span","top":888,"text":"4× faster than Nano Banana Pro","property":"text"}],"cssValue":"rgba(255, 255, 255, 0.62)"} {"id":"color-46","hex":"#000000","alpha":0.0784313725490196,"count":80,"contexts":[{"tag":"div","top":262,"text":"1 Make the lenses icy blue Under 8s","property":"border"},{"tag":"span","top":4517,"text":"1 Glass mug","property":"border"}],"cssValue":"rgba(0, 0, 0, 0.08)"} {"id":"color-47","hex":"#2B7FFF","alpha":1,"count":12,"contexts":[{"tag":"span","top":434,"text":"3","property":"background"},{"tag":"div","top":11235,"text":"","property":"background"}],"cssValue":"oklch(0.623 0.214 259.815)"}

Exact section measurements from the saved element map: root {"rect":{"x":0,"y":0,"width":1440,"height":1000},"padding":{"top":"0px","left":"0px","right":"0px","bottom":"0px"},"gap":"normal","columns":null,"overflow":"hidden"}; spacing {"gapsPx":[3,16],"representativeContentWidthsPx":[956,787,781,762,350]}; surfaces {"radii":["14px 14px 14px 4px","999px","3.35544e+07px"],"borders":[],"shadows":["rgb(255, 255, 255) 0px 0px 0px 1.5px, rgba(0, 0, 0, 0.55) 0px 3px 10px -2px","rgba(255, 255, 255, 0.3) 0px 0px 0px 0.5px inset","rgba(46, 108, 246, 0.35) 0px 12px 40px -8px"]}; media [{"tag":"img","rect":{"x":-260,"y":0,"width":1781,"height":1000},"aspectRatio":1.8,"objectFit":"cover","objectPosition":"50% 50%","radius":"0px"},{"tag":"svg","rect":{"x":-260,"y":0,"width":1781,"height":1000},"aspectRatio":1.8,"objectFit":"fill","objectPosition":"50% 50%","radius":"0px"},{"tag":"svg","rect":{"x":-12,"y":324,"width":956,"height":678},"aspectRatio":1.4,"objectFit":"fill","objectPosition":"50% 50%","radius":"0px"},{"tag":"svg","rect":{"x":701,"y":449,"width":787,"height":553},"aspectRatio":1.4,"objectFit":"fill","objectPosition":"50% 50%","radius":"0px"}]

Motion evidence: interaction: An interactive image editing demo runs in the background of the hero section, showing parts of an image being selected and altered. (95% confidence)

Transfer these principles: Full-bleed photographic background with bottom-corner text lockup and dual CTA pattern; Numbered pill + bracket-corner annotation system for demonstrating localized edits; Faded secondary claim line beneath a bold primary headline.

Dependencies: Specific photograph with clearly separable editable regions for annotation placement; Exact coordinates of selection boxes and tooltip anchor points tied to this image; Underlying interactive/video demo asset driving the 0–4s change sequence.

Adaptation guidance: Reuse the layered structure (bg image, overlay annotation layer, text+CTA lockup) but re-author annotation coordinates per new photo; the annotation visual style (pill badge, bracket corners, leader line) can be lifted as a reusable component independent of the specific food photography.

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