# Annotated region editing demo

Schema: Design Details SECTION.md v3.2
Website: Krea
Source: https://www.krea.ai/krea-3
Source section IDs: 5fad1bdb-5a00-42fd-af2e-45fb7692950d
Status: AI analysed; vocabulary promotion is automated

## Builder's note

What makes it work:
- A 100px bold headline sits centered above a single large photo, so the claim and the proof read in one glance.
- Numbered pill badges and glowing boxes sit on distinct objects, and a legend strip below maps each number to its label, which makes the diagram easy to follow.
- Small muted 16px body copy and 15px medium badge labels stay quiet next to the display type, and generous 60px vertical padding keeps the photo as the focus.

What a screenshot can't show:
- The headline is set at 100px with 98px line height and -3px letter spacing, so the lines sit very tight.
- The recording shows only general scrolling past this section (12–19s), and no animation was detected on the boxes or badges.

Borrow: Put the product claim directly on a real photo with numbered labels and a matching legend, so the demo explains itself without extra copy.
Leave alone: Don't copy Krea's balloon-texture inline headline image, its Suisse Intl type, or the exact glowing multicolour box styling; use a clean grotesque like Inter with your own annotation colours.

## Classification

- Type: features
- Layout: Centered large typography above a single large image surrounded by floating badge annotations.
- Styles: photographic, minimal, bold, colourful
- Confidence: 100%

## Purpose and structure

A feature showcase displaying an image heavily annotated with glowing bounding boxes and descriptive pill badges to demonstrate selective regional editing.

Visual signature: A room photograph covered in glowing colorful bounding boxes and pill-shaped labels.

## Components

- image
- annotation
- badge
- heading
- bounding box

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

- 12.0–19.0s — Scrolling through sections demonstrating specific editing capabilities, including editing one region. (93% confidence)

## Section quality

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

- Typography: 68 — Large bold display headline (100px) with inline balloon-texture image replacing 'one region' is a clever typographic/content hybrid; body copy is small, muted, functional. Strong hierarchy but a single swap doesn't carry a full typographic system beyond what's seen elsewhere on the page. Next tier: Would need more varied typographic treatment within the section itself (e.g. the pill labels, captions) to show a richer type system rather than one headline trick plus default small text.
- Composition: 72 — Precise bounding-box annotations with numbered badges, dashed/solid connecting lines, and a consistent legend strip below create a clear diagrammatic hierarchy over a single photograph. Spacing and alignment of badges to the image edges is deliberate, and the legend row cleanly maps numbers to labels, giving the layout an instructional, confident structure. Next tier: Composition leans heavily on conventional callout-UI patterns (numbered pins, pill tooltips) common in product-demo sites; to reach exceptional it would need a more distinctive spatial arrangement or asymmetry beyond the expected annotation grid.
- Motion: inconclusive — Gemini's motion note only describes general scrolling through sections (12-19s) without a specific timestamped visible change within this exact annotated-image crop, so no motion behavior can be scored. Next tier: Need specific timestamped evidence of how the badges, bounding boxes, or 'changed pixels' toggle animate on reveal or interaction.
- Content: 70 — Content and visual device are tightly fused: the headline literally uses a 3D balloon-text image for 'one region,' and the photo is annotated with editable-region metaphors (poster, turntable, jacket, boots, chair, cat) that directly demonstrate the product claim. The changed-pixels percentage and compare toggle ground the claim in a concrete, data-backed proof point. Next tier: The underlying device (bounding boxes + pill labels over a stock-like photo) is a familiar SaaS-demo content pattern; elevating further would require a more novel way of proving the capability beyond labeled regions.
- Originality: 65 — The balloon-letter substitution for 'one region' is a genuinely distinctive touch that ties the headline wordplay to a photographic editing demo, elevating an otherwise standard annotated-screenshot format. Next tier: Beyond the balloon-text flourish, the annotation/legend format itself is a well-worn interface documentation convention; true novelty would need more of the section's elements reimagined, not just the headline.
- Adaptability: 62 — Structure (headline + single hero image + badge/legend overlay) is modular and the badge/box/legend components are clearly separable from the specific photo and copy, per the deterministic card/media evidence (distinct button cards, image elements). Next tier: Dependency on precise pixel-anchored annotation coordinates tied to this specific photograph limits true reusability without reflowing all badge positions.

Strengths:
- Clever balloon-letter image substitution inside the headline ties wordplay directly to the editing concept
- Clear numbered badge-to-legend mapping gives an instructional, easy-to-scan proof of the regional-editing claim
- Concrete 'changed pixels 11.1%' metric with compare toggle grounds the feature in verifiable data rather than just marketing copy

Weaknesses:
- Annotation/callout pattern (numbered pins + pill tooltips) is a common SaaS demo convention, limiting standout originality
- Motion behavior cannot be verified from the supplied evidence
- Body copy and legend text sizing are quite small and generic relative to the bold headline, creating an uneven typographic rhythm

Why it does not reach the next tier: The section's core device—a photo with labeled bounding boxes and a legend—is competent, well-executed instructional design, but sits within a familiar product-demo visual language. Beyond the balloon-text headline trick, no further novel or risk-taking design moves push it into 'wow' territory.

## Adaptation guidance

- Effort: Medium
- Guidance: Reimplement the annotation system as reusable positioned-badge components driven by coordinate data, replacing the photo and balloon-text asset per use case while preserving the legend and shadow/pill styling.

What transfers:
- Headline + hero image + annotation badge layout structure
- Numbered badge-to-legend pairing pattern
- Pill-shaped badge/button and card styling with glow-style shadows

Dependencies:
- Specific photograph with pre-planned region coordinates for the bounding boxes
- Custom balloon-letter text image for the headline wordplay
- Exact badge/box coordinates tied to this image's dimensions

## 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/interaction behavior for the badges and compare toggle is not confirmed by timestamped evidence
- Exact font files, colors, and shadow values beyond the supplied samples are not verifiable from this evidence alone

## Usage guidance

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

## Build blueprint v3.2

### Purpose and classification

- Canonical type: features
- Source type: features
- Structure: centered single-column
- Layout: Centered large typography above a single large image surrounded by floating badge annotations.
- Styles: photographic, minimal, bold, colourful
- Components: image, annotation, badge, heading, bounding box
- Purpose: A feature showcase displaying an image heavily annotated with glowing bounding boxes and descriptive pill badges to demonstrate selective regional editing.
- Visual signature: A room photograph covered in glowing colorful bounding boxes and pill-shaped labels.
- Place on the page: 7 of 22, after Gallery (`krea-ai:C06`), before Feature collection (`krea-ai:C08`)

### Crop and composition

- Crop: 1440×1227px; aspect ratio 1.174:1
- Page bounds: 5229–6456px of 21224px
- 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": [
    {
      "role": "section heading",
      "family": "Krea 3 Suisse Intl",
      "stack": "\"Krea 3 Suisse Intl\", sans-serif",
      "size": "100px",
      "weight": "500",
      "lineHeight": "98px",
      "letterSpacing": "-3px",
      "sample": "Edit 1Keep everything else",
      "element": "h2",
      "occurrences": 1,
      "sourceId": "font-9"
    },
    {
      "role": "body/supporting copy",
      "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": "400",
      "lineHeight": "19.2px",
      "letterSpacing": "normal",
      "sample": "Draw a box and say what changes. Krea 3 redraws inside it and leaves the rest of the image as it was",
      "element": "p",
      "occurrences": 1,
      "sourceId": "font-24"
    },
    {
      "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": "15px",
      "weight": "500",
      "lineHeight": "22.5px",
      "letterSpacing": "normal",
      "sample": "Poster",
      "element": "span",
      "occurrences": 20,
      "sourceId": "font-35"
    }
  ],
  "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": "#FFFFFF",
      "cssValue": "rgba(255, 255, 255, 0.04)",
      "alpha": 0.0392156862745098,
      "appliedAs": [
        "background",
        "control-background",
        "svg-fill"
      ],
      "occurrences": 11,
      "sourceId": "color-7"
    },
    {
      "value": "#EEEEEE",
      "cssValue": "rgb(238, 238, 238)",
      "alpha": 1,
      "appliedAs": [
        "background"
      ],
      "occurrences": 2,
      "sourceId": "color-11"
    },
    {
      "value": "#000000",
      "cssValue": "rgba(0, 0, 0, 0.5)",
      "alpha": 0.5019607843137255,
      "appliedAs": [
        "text",
        "background"
      ],
      "occurrences": 16,
      "sourceId": "color-24"
    },
    {
      "value": "#EBEBE7",
      "cssValue": "rgb(235, 235, 231)",
      "alpha": 1,
      "appliedAs": [
        "control-background"
      ],
      "occurrences": 6,
      "sourceId": "color-26"
    },
    {
      "value": "#FAFAF9",
      "cssValue": "rgb(250, 250, 249)",
      "alpha": 1,
      "appliedAs": [
        "control-background"
      ],
      "occurrences": 2,
      "sourceId": "color-45"
    }
  ],
  "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×1227px; block; padding {"top":"60px","left":"32px","right":"32px","bottom":"60px"}; gap normal; background rgb(255, 255, 255); radius 0px.
- Observed gaps: 9px.
- Representative content widths: 1100, 526, 420, 273, 272, 250, 246px.
- Layout containers: 8; cards/surfaces: 3; media elements: 2; browser animations: 0.

#### Container, grid, and spacing

```json
{
  "viewport": {
    "width": 1440,
    "captureBounds": {
      "top": 5229,
      "bottom": 6456,
      "pageHeight": 21224
    }
  },
  "container": {
    "size": "1440×1227px",
    "position": "x 0px, y 5229px",
    "display": "block",
    "positionMode": "static",
    "padding": {
      "top": "60px",
      "left": "32px",
      "right": "32px",
      "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": [
      9
    ],
    "representativeContentWidthsPx": [
      1100,
      526,
      420,
      273,
      272,
      250,
      246
    ]
  },
  "columns": [
    {
      "element": "span · 1",
      "size": "22×22px",
      "position": "x 264px, y 5690px",
      "display": "grid",
      "template": "10px",
      "direction": "row",
      "gap": "normal"
    },
    {
      "element": "span · 1",
      "size": "22×22px",
      "position": "x 284px, y 5652px",
      "display": "grid",
      "template": "10px",
      "direction": "row",
      "gap": "normal"
    },
    {
      "element": "span · 2",
      "size": "22×22px",
      "position": "x 363px, y 5749px",
      "display": "grid",
      "template": "10px",
      "direction": "row",
      "gap": "normal"
    },
    {
      "element": "span · 2",
      "size": "22×22px",
      "position": "x 383px, y 5711px",
      "display": "grid",
      "template": "10px",
      "direction": "row",
      "gap": "normal"
    },
    {
      "element": "span · 3",
      "size": "22×22px",
      "position": "x 660px, y 5712px",
      "display": "grid",
      "template": "10px",
      "direction": "row",
      "gap": "normal"
    },
    {
      "element": "span · 3",
      "size": "22×22px",
      "position": "x 680px, y 6012px",
      "display": "grid",
      "template": "10px",
      "direction": "row",
      "gap": "normal"
    },
    {
      "element": "span · 4",
      "size": "22×22px",
      "position": "x 715px, y 6153px",
      "display": "grid",
      "template": "10px",
      "direction": "row",
      "gap": "normal"
    },
    {
      "element": "span · 4",
      "size": "22×22px",
      "position": "x 735px, y 6115px",
      "display": "grid",
      "template": "10px",
      "direction": "row",
      "gap": "normal"
    }
  ]
}
```

#### Cards and surfaces

```json
{
  "cards": [
    {
      "element": "button · 3",
      "size": "220×262px",
      "position": "x 671px, y 5723px",
      "padding": [
        "0px",
        "0px",
        "0px",
        "0px"
      ],
      "radius": "10px",
      "border": "0px solid rgb(229, 229, 229)",
      "shadow": "rgba(0, 0, 0, 0.2) 0px 0px 0px 2.5px, rgba(0, 0, 0, 0.6) 0px 8px 26px -8px",
      "background": "rgba(255, 255, 255, 0.04)"
    },
    {
      "element": "button · 2",
      "size": "215×148px",
      "position": "x 374px, y 5760px",
      "padding": [
        "0px",
        "0px",
        "0px",
        "0px"
      ],
      "radius": "10px",
      "border": "0px solid rgb(229, 229, 229)",
      "shadow": "rgba(0, 0, 0, 0.2) 0px 0px 0px 2.5px, rgba(0, 0, 0, 0.6) 0px 8px 26px -8px",
      "background": "rgba(255, 255, 255, 0.04)"
    },
    {
      "element": "button · 5",
      "size": "171×139px",
      "position": "x 973px, y 5957px",
      "padding": [
        "0px",
        "0px",
        "0px",
        "0px"
      ],
      "radius": "10px",
      "border": "0px solid rgb(229, 229, 229)",
      "shadow": "rgba(0, 0, 0, 0.2) 0px 0px 0px 2.5px, rgba(0, 0, 0, 0.6) 0px 8px 26px -8px",
      "background": "rgba(255, 255, 255, 0.04)"
    }
  ],
  "surfaces": {
    "radii": [
      "10px",
      "14px 14px 14px 4px",
      "999px"
    ],
    "borders": [],
    "shadows": [
      "rgba(0, 0, 0, 0.2) 0px 0px 0px 2.5px, rgba(0, 0, 0, 0.6) 0px 8px 26px -8px",
      "rgb(255, 255, 255) 0px 0px 0px 1.5px, rgba(0, 0, 0, 0.55) 0px 3px 10px -2px",
      "rgba(255, 255, 255, 0.45) 0px 0px 0px 0.5px inset"
    ]
  }
}
```

#### Media treatment

```json
[
  {
    "element": "img · absolute inset-0 size-full object-cover svelte-hsc5bz",
    "size": "1100×618px",
    "position": "x 170px, y 5612px",
    "aspectRatio": 1.8,
    "objectFit": "cover",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "clip",
    "source": "https://s.krea.ai/k3-landing-final/reg2-2k-v2.webp"
  },
  {
    "element": "img · balloons svelte-hsc5bz",
    "size": "526×145px",
    "position": "x 555px, y 5269px",
    "aspectRatio": 3.6,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "clip",
    "source": "https://s.krea.ai/k3-landing-final/one-region"
  }
]
```

#### 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-1107",
    "gap": "normal",
    "tag": "section",
    "rect": {
      "x": 0,
      "y": 5229,
      "width": 1440,
      "height": 1227
    },
    "role": null,
    "label": "Edit 1Keep everything else Draw a box and say what changes. Krea 3 redraws inside it and leaves the ",
    "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": "32px",
      "right": "32px",
      "bottom": "60px"
    },
    "overflow": "visible",
    "position": "static",
    "background": "rgb(255, 255, 255)"
  },
  "cards": [
    {
      "id": "ld-1158",
      "tag": "button",
      "rect": {
        "x": 671,
        "y": 5723,
        "width": 220,
        "height": 262
      },
      "role": null,
      "label": "3",
      "border": "0px solid rgb(229, 229, 229)",
      "radius": "10px",
      "shadow": "rgba(0, 0, 0, 0.2) 0px 0px 0px 2.5px, rgba(0, 0, 0, 0.6) 0px 8px 26px -8px",
      "padding": [
        "0px",
        "0px",
        "0px",
        "0px"
      ],
      "background": "rgba(255, 255, 255, 0.04)"
    },
    {
      "id": "ld-1150",
      "tag": "button",
      "rect": {
        "x": 374,
        "y": 5760,
        "width": 215,
        "height": 148
      },
      "role": null,
      "label": "2",
      "border": "0px solid rgb(229, 229, 229)",
      "radius": "10px",
      "shadow": "rgba(0, 0, 0, 0.2) 0px 0px 0px 2.5px, rgba(0, 0, 0, 0.6) 0px 8px 26px -8px",
      "padding": [
        "0px",
        "0px",
        "0px",
        "0px"
      ],
      "background": "rgba(255, 255, 255, 0.04)"
    },
    {
      "id": "ld-1174",
      "tag": "button",
      "rect": {
        "x": 973,
        "y": 5957,
        "width": 171,
        "height": 139
      },
      "role": null,
      "label": "5",
      "border": "0px solid rgb(229, 229, 229)",
      "radius": "10px",
      "shadow": "rgba(0, 0, 0, 0.2) 0px 0px 0px 2.5px, rgba(0, 0, 0, 0.6) 0px 8px 26px -8px",
      "padding": [
        "0px",
        "0px",
        "0px",
        "0px"
      ],
      "background": "rgba(255, 255, 255, 0.04)"
    }
  ],
  "media": [
    {
      "id": "ld-1121",
      "tag": "img",
      "rect": {
        "x": 170,
        "y": 5612,
        "width": 1100,
        "height": 618
      },
      "role": null,
      "label": "absolute inset-0 size-full object-cover svelte-hsc5bz",
      "media": {
        "alt": "A young woman with wavy dark brown hair looks through vinyl records in a 1970s record store. She wears a camel suede jacket, a cream turtleneck, rust corduroy flares, and brown heeled boots. Around her are wooden record crates, a turntable on a walnut counter, a rubber plant in a terracotta pot, an orange shell chair, and framed abstract posters on wood panelling.",
        "src": "https://s.krea.ai/k3-landing-final/reg2-2k-v2.webp",
        "naturalWidth": 2736,
        "naturalHeight": 1536
      },
      "radius": "0px",
      "overflow": "clip",
      "objectFit": "cover",
      "aspectRatio": 1.8,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-1112",
      "tag": "img",
      "rect": {
        "x": 555,
        "y": 5269,
        "width": 526,
        "height": 145
      },
      "role": null,
      "label": "balloons svelte-hsc5bz",
      "media": {
        "alt": "one region",
        "src": "https://s.krea.ai/k3-landing-final/one-region",
        "naturalWidth": 533,
        "naturalHeight": 147
      },
      "radius": "0px",
      "overflow": "clip",
      "objectFit": "fill",
      "aspectRatio": 3.6,
      "objectPosition": "50% 50%"
    }
  ],
  "bounds": {
    "top": 5229,
    "bottom": 6456,
    "pageHeight": 21224
  },
  "schema": "little-details-section-measurements-v1",
  "source": "saved DOM/CSS element and animation maps",
  "columns": [
    {
      "id": "ld-1143",
      "gap": "normal",
      "tag": "span",
      "rect": {
        "x": 264,
        "y": 5690,
        "width": 22,
        "height": 22
      },
      "role": null,
      "label": "1",
      "columns": "10px",
      "display": "grid",
      "direction": "row"
    },
    {
      "id": "ld-1148",
      "gap": "normal",
      "tag": "span",
      "rect": {
        "x": 284,
        "y": 5652,
        "width": 22,
        "height": 22
      },
      "role": null,
      "label": "1",
      "columns": "10px",
      "display": "grid",
      "direction": "row"
    },
    {
      "id": "ld-1151",
      "gap": "normal",
      "tag": "span",
      "rect": {
        "x": 363,
        "y": 5749,
        "width": 22,
        "height": 22
      },
      "role": null,
      "label": "2",
      "columns": "10px",
      "display": "grid",
      "direction": "row"
    },
    {
      "id": "ld-1156",
      "gap": "normal",
      "tag": "span",
      "rect": {
        "x": 383,
        "y": 5711,
        "width": 22,
        "height": 22
      },
      "role": null,
      "label": "2",
      "columns": "10px",
      "display": "grid",
      "direction": "row"
    },
    {
      "id": "ld-1159",
      "gap": "normal",
      "tag": "span",
      "rect": {
        "x": 660,
        "y": 5712,
        "width": 22,
        "height": 22
      },
      "role": null,
      "label": "3",
      "columns": "10px",
      "display": "grid",
      "direction": "row"
    },
    {
      "id": "ld-1164",
      "gap": "normal",
      "tag": "span",
      "rect": {
        "x": 680,
        "y": 6012,
        "width": 22,
        "height": 22
      },
      "role": null,
      "label": "3",
      "columns": "10px",
      "display": "grid",
      "direction": "row"
    },
    {
      "id": "ld-1167",
      "gap": "normal",
      "tag": "span",
      "rect": {
        "x": 715,
        "y": 6153,
        "width": 22,
        "height": 22
      },
      "role": null,
      "label": "4",
      "columns": "10px",
      "display": "grid",
      "direction": "row"
    },
    {
      "id": "ld-1172",
      "gap": "normal",
      "tag": "span",
      "rect": {
        "x": 735,
        "y": 6115,
        "width": 22,
        "height": 22
      },
      "role": null,
      "label": "4",
      "columns": "10px",
      "display": "grid",
      "direction": "row"
    }
  ],
  "spacing": {
    "gapsPx": [
      9
    ],
    "representativeContentWidthsPx": [
      1100,
      526,
      420,
      273,
      272,
      250,
      246
    ]
  },
  "coverage": {
    "cards": 3,
    "media": 2,
    "animations": 0,
    "elementsInSection": 59
  },
  "surfaces": {
    "radii": [
      "10px",
      "14px 14px 14px 4px",
      "999px"
    ],
    "borders": [],
    "shadows": [
      "rgba(0, 0, 0, 0.2) 0px 0px 0px 2.5px, rgba(0, 0, 0, 0.6) 0px 8px 26px -8px",
      "rgb(255, 255, 255) 0px 0px 0px 1.5px, rgba(0, 0, 0, 0.55) 0px 3px 10px -2px",
      "rgba(255, 255, 255, 0.45) 0px 0px 0px 0.5px inset"
    ]
  },
  "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. **scroll** — Scrolling through sections demonstrating specific editing capabilities, including editing one region. (12s–19s; 93% 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: Headline + hero image + annotation badge layout structure; Numbered badge-to-legend pairing pattern; Pill-shaped badge/button and card styling with glow-style shadows
- Dependencies: Specific photograph with pre-planned region coordinates for the bounding boxes; Custom balloon-letter text image for the headline wordplay; Exact badge/box coordinates tied to this image's dimensions
- Guidance: Reimplement the annotation system as reusable positioned-badge components driven by coordinate data, replacing the photo and balloon-text asset per use case while preserving the legend and shadow/pill styling.

### Evidence readiness

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


### Agent implementation prompt

Create an original features section inspired by the design evidence titled “Annotated region editing demo”.

Purpose: A feature showcase displaying an image heavily annotated with glowing bounding boxes and descriptive pill badges to demonstrate selective regional editing.

Structure: centered single-column. Source layout label: Centered large typography above a single large image surrounded by floating badge annotations.. Use a narrow central reading axis and deliberate scale contrast rather than adding unnecessary side content.

Visual signature to preserve at the pattern level: A room photograph covered in glowing colorful bounding boxes and pill-shaped labels.

Components: image, annotation, badge, heading, bounding box.

Style direction: photographic, minimal, bold, colourful.

Observed crop: 1440×1227px (1.174: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-9","size":"100px","count":1,"family":"Krea 3 Suisse Intl","traits":"Regular","weight":"500","contexts":[{"tag":"h2","top":5289,"text":"Edit 1Keep everything else","property":"font"}],"fontStack":"\"Krea 3 Suisse Intl\", sans-serif","lineHeight":"98px","letterSpacing":"-3px"} {"id":"font-24","size":"16px","count":1,"family":"Suisse Intl","traits":"Regular","weight":"400","contexts":[{"tag":"p","top":5517,"text":"Draw a box and say what changes. Krea 3 redraws inside it and leaves the rest of the image as it was","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":"19.2px","letterSpacing":"normal"} {"id":"font-35","size":"15px","count":20,"family":"Suisse Intl","traits":"Regular","weight":"500","contexts":[{"tag":"span","top":6279,"text":"Poster","property":"font"},{"tag":"span","top":6279,"text":"Three-circle print","property":"font"},{"tag":"span","top":6279,"text":"Turntable","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":"22.5px","letterSpacing":"normal"}

Colors measured inside this section: {"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-11","hex":"#EEEEEE","alpha":1,"count":2,"contexts":[{"tag":"div","top":5612,"text":"1 1 Three-circle print2 2 Brushed silver deck3 3 Cherry red suede4 4 Black patent leather5 5 Mustard","property":"background"}],"cssValue":"rgb(238, 238, 238)"} {"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)"} {"id":"color-26","hex":"#EBEBE7","alpha":1,"count":6,"contexts":[{"tag":"button","top":6269,"text":"1 Poster Three-circle print","property":"control-background"}],"cssValue":"rgb(235, 235, 231)"} {"id":"color-45","hex":"#FAFAF9","alpha":1,"count":2,"contexts":[{"tag":"button","top":6319,"text":"Changed pixels 11.1%","property":"control-background"}],"cssValue":"rgb(250, 250, 249)"}

Exact section measurements from the saved element map: root {"rect":{"x":0,"y":5229,"width":1440,"height":1227},"padding":{"top":"60px","left":"32px","right":"32px","bottom":"60px"},"gap":"normal","columns":null,"overflow":"visible"}; spacing {"gapsPx":[9],"representativeContentWidthsPx":[1100,526,420,273,272,250,246]}; surfaces {"radii":["10px","14px 14px 14px 4px","999px"],"borders":[],"shadows":["rgba(0, 0, 0, 0.2) 0px 0px 0px 2.5px, rgba(0, 0, 0, 0.6) 0px 8px 26px -8px","rgb(255, 255, 255) 0px 0px 0px 1.5px, rgba(0, 0, 0, 0.55) 0px 3px 10px -2px","rgba(255, 255, 255, 0.45) 0px 0px 0px 0.5px inset"]}; media [{"tag":"img","rect":{"x":170,"y":5612,"width":1100,"height":618},"aspectRatio":1.8,"objectFit":"cover","objectPosition":"50% 50%","radius":"0px"},{"tag":"img","rect":{"x":555,"y":5269,"width":526,"height":145},"aspectRatio":3.6,"objectFit":"fill","objectPosition":"50% 50%","radius":"0px"}]

Motion evidence: scroll: Scrolling through sections demonstrating specific editing capabilities, including editing one region. (93% confidence)

Transfer these principles: Headline + hero image + annotation badge layout structure; Numbered badge-to-legend pairing pattern; Pill-shaped badge/button and card styling with glow-style shadows.

Dependencies: Specific photograph with pre-planned region coordinates for the bounding boxes; Custom balloon-letter text image for the headline wordplay; Exact badge/box coordinates tied to this image's dimensions.

Adaptation guidance: Reimplement the annotation system as reusable positioned-badge components driven by coordinate data, replacing the photo and balloon-text asset per use case while preserving the legend and shadow/pill styling.

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