# Tabbed use-case image carousel

Schema: Design Details SECTION.md v3.2
Website: Krea
Source: https://www.krea.ai/krea-3
Source section IDs: 17b72666-7133-4f26-a4a0-a85f2bb4ccb7
Status: AI analysed; vocabulary promotion is automated

## Builder's note

What makes it work:
- A huge 100px headline with tight tracking sits above tiny pill tabs, so the hierarchy reads at a glance.
- The large central image with partly visible neighbours on each side hints at more content and adds depth.
- A floating panel that overlaps the image shows the real prompt and three reference thumbnails, tying the interface to what the product does.

What a screenshot can't show:
- The recording showed no carousel transition, so slide timing and tab behaviour are unknown.
- Measured: headline 100px/96px with -3px tracking, panel text 14px/20px, 6–8px gaps, 60px vertical section padding and 24px radii.

Borrow: Pair a showcase image with a small overlay that reveals how it was made, so the proof sits right on the visual.
Leave alone: Don't copy Krea's Suisse Intl typeface, its blue action colour or its exact prompt-card layout; use a free neo-grotesque like Inter instead.

## Classification

- Type: gallery
- Layout: Centered header, horizontal scrollable tab list, and a large central image card flanked by partially visible adjacent cards.
- Styles: minimal, photographic
- Confidence: 100%

## Purpose and structure

An image carousel featuring distinct use cases, navigable via pill-shaped tabs, with a floating UI panel demonstrating the prompt used.

Visual signature: Large central image with partially visible images on the left and right, topped with category pill tabs.

## Components

- tab
- carousel
- image card
- floating UI
- button

## 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: 65.71/100 (Good)
Scored coverage: 85%

- Typography: 65 — Massive tracked display headline (100px, -3px letter-spacing) establishes clear hierarchy against small pill tab labels and compact floating-panel body text, consistent with the site's type scale, but the carousel itself contributes little beyond reusing the established type system. Next tier: Needs a more distinctive type treatment specific to this carousel (e.g. custom caption typography) rather than inherited section headline styling.
- Composition: 68 — Strong layered composition: oversized central image with partially visible flanking cards creates depth, pill tabs anchor the top, and the floating prompt card overlaps the image bottom edge for a convincing layered UI effect, with large consistent radii (24px) tying elements together. Next tier: Reliance on a fairly conventional centered-carousel-with-side-peek layout keeps it short of a truly inventive spatial arrangement that would be hard to substitute.
- Motion: inconclusive — No timestamped visible motion changes were supplied for this crop; only a generic small SVG rotation animation is present in the data, which is not evidence of a meaningful carousel transition or reveal. Next tier: Specific timestamped evidence of tab-switch transitions, carousel sliding behavior, or panel entrance motion is required to score this axis.
- Content: 72 — The floating panel directly surfaces the actual generation prompt text and the three reference thumbnails used to create the image, tightly binding the UI chrome to the demonstrated product capability rather than acting as decorative overlay. Next tier: To reach the next tier the content integration would need additional specificity, such as visibly linking each reference thumbnail to a highlighted region of the output image.
- Originality: 63 — Pairing a standard pill-tab image carousel with a floating 'prompt recipe' card that exposes inputs and outputs is a distinctive, product-specific idea beyond a generic gallery, though the carousel/tab scaffold itself is a common pattern. Next tier: The underlying carousel-with-tabs structure is widely used elsewhere; a more unconventional framing device would be needed to feel truly singular.
- Adaptability: 60 — The tab list, large image card, and floating UI panel are structurally distinct components with clear deterministic bounds and consistent radius/shadow tokens, making it feasible to reskin while keeping the hierarchy and behavior. Next tier: Floating panel content (specific reference thumbnails, exact prompt copy) is tightly coupled to proprietary imagery, limiting how cleanly the pattern separates from this particular content set.

Strengths:
- Floating prompt panel concretely demonstrates the product's input/output relationship rather than using a purely decorative overlay
- Layered depth from the oversized central image with partially visible side cards creates a strong focal composition
- Consistent rounded-corner and pill-shaped token system (24px cards, pill tabs) ties the carousel into the site's visual language
- Clear typographic hierarchy between the oversized headline, tab labels, and functional panel copy

Weaknesses:
- Core carousel-with-pill-tabs structure is a common web pattern not unique to this product
- No timestamped motion evidence supplied, so transition quality between tabs/slides cannot be verified
- Floating panel content is tightly bound to specific proprietary imagery and prompt text, limiting template reuse
- Side-peek images are only partially informative and rely on a conventional slider convention

Why it does not reach the next tier: The section layers a well-executed but still largely conventional carousel pattern with one genuinely clever content device (the floating prompt panel); without visible motion detail or a more unconventional structural idea, it lands as polished and purposeful rather than memorable or singular.

## Adaptation guidance

- Effort: Medium
- Guidance: Keep the tab-plus-large-image-with-peek layout and the floating overlay card concept, but replace the prompt/reference content with whatever contextual metadata applies to the new domain; rebuild the overlay as a generic 'detail card' component rather than hardcoding to prompt-and-thumbnail content.

What transfers:
- Pill-tab category switcher pattern
- Large central image card flanked by partial side cards
- Floating overlay card pattern for surfacing metadata/prompt over an image
- Rounded-corner and shadow token system applied to cards and buttons

Dependencies:
- Specific reference thumbnail and prompt copy content tied to this product's AI generation feature
- Exact imagery aspect ratios and curated use-case categories
- Underlying carousel/tab state logic for switching categories

## 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 could not be scored due to lack of timestamped visible transition evidence
- Judgment based on a single desktop crop; responsive/mobile behavior unknown
- Exact interaction behavior of tabs and carousel navigation not confirmed beyond static DOM bounds

## 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: centered single-column
- Layout: Centered header, horizontal scrollable tab list, and a large central image card flanked by partially visible adjacent cards.
- Styles: minimal, photographic
- Components: tab, carousel, image card, floating UI, button
- Purpose: An image carousel featuring distinct use cases, navigable via pill-shaped tabs, with a floating UI panel demonstrating the prompt used.
- Visual signature: Large central image with partially visible images on the left and right, topped with category pill tabs.
- Place on the page: 6 of 22, after Stats (`krea-ai:C05`), before Feature collection (`krea-ai:C07`)

### Crop and composition

- Crop: 1440×1285px; aspect ratio 1.121:1
- Page bounds: 3944–5229px 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": "96px",
      "letterSpacing": "-3px",
      "sample": "One modelEvery brief",
      "element": "h2",
      "occurrences": 1,
      "sourceId": "font-8"
    },
    {
      "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": "14px",
      "weight": "400",
      "lineHeight": "20px",
      "letterSpacing": "normal",
      "sample": "Krea 3",
      "element": "span",
      "occurrences": 69,
      "sourceId": "font-27"
    }
  ],
  "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": "#F4F4F2",
      "cssValue": "rgba(244, 244, 242, 0.85)",
      "alpha": 0.8509803921568627,
      "appliedAs": [
        "background"
      ],
      "occurrences": 20,
      "sourceId": "color-18"
    },
    {
      "value": "#F4F4F4",
      "cssValue": "oklab(0.970145 0.0000441968 0.0000194311 / 0.85)",
      "alpha": 0.8509803921568627,
      "appliedAs": [
        "background"
      ],
      "occurrences": 2,
      "sourceId": "color-19"
    },
    {
      "value": "#000000",
      "cssValue": "oklab(0 0 0 / 0.55)",
      "alpha": 0.5490196078431373,
      "appliedAs": [
        "text",
        "background"
      ],
      "occurrences": 92,
      "sourceId": "color-20"
    },
    {
      "value": "#E5E5E5",
      "cssValue": "oklch(0.922 0 0)",
      "alpha": 1,
      "appliedAs": [
        "border",
        "background"
      ],
      "occurrences": 43,
      "sourceId": "color-32"
    },
    {
      "value": "#FFFFFF",
      "cssValue": "oklab(0.999994 0.0000455677 0.0000200868 / 0.8)",
      "alpha": 0.8,
      "appliedAs": [
        "control-background",
        "text",
        "svg-fill"
      ],
      "occurrences": 14,
      "sourceId": "color-38"
    },
    {
      "value": "#000000",
      "cssValue": "rgba(0, 0, 0, 0.08)",
      "alpha": 0.0784313725490196,
      "appliedAs": [
        "border"
      ],
      "occurrences": 80,
      "sourceId": "color-46"
    }
  ],
  "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×1285px; flex; padding {"top":"60px","left":"0px","right":"0px","bottom":"60px"}; gap normal; background rgb(255, 255, 255); radius 0px.
- Observed gaps: 6, 8px.
- Representative content widths: 1128, 1091, 900, 600, 534, 262, 250px.
- Layout containers: 8; cards/surfaces: 12; media elements: 12; browser animations: 1.

#### Container, grid, and spacing

```json
{
  "viewport": {
    "width": 1440,
    "captureBounds": {
      "top": 3944,
      "bottom": 5229,
      "pageHeight": 21224
    }
  },
  "container": {
    "size": "1440×1285px",
    "position": "x 0px, y 3944px",
    "display": "flex",
    "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": [
      6,
      8
    ],
    "representativeContentWidthsPx": [
      1128,
      1091,
      900,
      600,
      534,
      262,
      250
    ]
  },
  "columns": [
    {
      "element": "span · 1",
      "size": "22×22px",
      "position": "x 270px, y 4562px",
      "display": "grid",
      "template": "10px",
      "direction": "row",
      "gap": "normal"
    },
    {
      "element": "span · 1",
      "size": "22×22px",
      "position": "x 291px, y 4526px",
      "display": "grid",
      "template": "10px",
      "direction": "row",
      "gap": "normal"
    },
    {
      "element": "span · 2",
      "size": "22×22px",
      "position": "x 334px, y 4701px",
      "display": "grid",
      "template": "10px",
      "direction": "row",
      "gap": "normal"
    },
    {
      "element": "span · 2",
      "size": "22×22px",
      "position": "x 355px, y 4665px",
      "display": "grid",
      "template": "10px",
      "direction": "row",
      "gap": "normal"
    },
    {
      "element": "span · 3",
      "size": "22×22px",
      "position": "x 554px, y 4413px",
      "display": "grid",
      "template": "10px",
      "direction": "row",
      "gap": "normal"
    },
    {
      "element": "span · 3",
      "size": "22×22px",
      "position": "x 575px, y 4377px",
      "display": "grid",
      "template": "10px",
      "direction": "row",
      "gap": "normal"
    },
    {
      "element": "span · 4",
      "size": "22×22px",
      "position": "x 685px, y 4445px",
      "display": "grid",
      "template": "10px",
      "direction": "row",
      "gap": "normal"
    },
    {
      "element": "span · 4",
      "size": "22×22px",
      "position": "x 706px, y 4409px",
      "display": "grid",
      "template": "10px",
      "direction": "row",
      "gap": "normal"
    }
  ]
}
```

#### Cards and surfaces

```json
{
  "cards": [
    {
      "element": "section · 1 1 Brand 2 2 Change the pasta to a banana 3 3 Logo",
      "size": "900×2698px",
      "position": "x 1304px, y 3267px",
      "padding": [
        "0px",
        "0px",
        "0px",
        "0px"
      ],
      "radius": "0px",
      "border": "0px solid rgb(229, 229, 229)",
      "shadow": "none",
      "background": "rgb(255, 255, 255)"
    },
    {
      "element": "img · absolute inset-0 size-full rounded-[inherit] object-cover",
      "size": "900×2698px",
      "position": "x 1304px, y 3267px",
      "padding": [
        "0px",
        "0px",
        "0px",
        "0px"
      ],
      "radius": "24px",
      "border": "0px solid rgb(229, 229, 229)",
      "shadow": "none",
      "background": "rgba(0, 0, 0, 0)"
    },
    {
      "element": "section · 1 1 Sunglasses 2 2 Dachshund 3 3 Add a strawberry scoop",
      "size": "600×1543px",
      "position": "x -464px, y 3845px",
      "padding": [
        "0px",
        "0px",
        "0px",
        "0px"
      ],
      "radius": "0px",
      "border": "0px solid rgb(229, 229, 229)",
      "shadow": "none",
      "background": "rgb(255, 255, 255)"
    },
    {
      "element": "img · absolute inset-0 size-full rounded-[inherit] object-cover",
      "size": "600×1543px",
      "position": "x -464px, y 3845px",
      "padding": [
        "0px",
        "0px",
        "0px",
        "0px"
      ],
      "radius": "24px",
      "border": "0px solid rgb(229, 229, 229)",
      "shadow": "none",
      "background": "rgba(0, 0, 0, 0)"
    },
    {
      "element": "section · 1 1 Glass mug 2 2 Ceramic mug 3 3 Tin 01 4 4 Tin 02 5 5 Change to a copper dripper",
      "size": "1128×600px",
      "position": "x 156px, y 4316px",
      "padding": [
        "0px",
        "0px",
        "0px",
        "0px"
      ],
      "radius": "0px",
      "border": "0px solid rgb(229, 229, 229)",
      "shadow": "none",
      "background": "rgb(255, 255, 255)"
    },
    {
      "element": "img · absolute inset-0 size-full rounded-[inherit] object-cover",
      "size": "1128×600px",
      "position": "x 156px, y 4316px",
      "padding": [
        "0px",
        "0px",
        "0px",
        "0px"
      ],
      "radius": "24px",
      "border": "0px solid rgb(229, 229, 229)",
      "shadow": "none",
      "background": "rgba(0, 0, 0, 0)"
    },
    {
      "element": "button · absolute inset-0 z-10 cursor-pointer rounded-3xl",
      "size": "900×600px",
      "position": "x 1304px, y 4316px",
      "padding": [
        "0px",
        "0px",
        "0px",
        "0px"
      ],
      "radius": "24px",
      "border": "0px solid rgb(229, 229, 229)",
      "shadow": "none",
      "background": "rgba(0, 0, 0, 0)"
    },
    {
      "element": "button · absolute inset-0 z-10 cursor-pointer rounded-3xl",
      "size": "600×600px",
      "position": "x -464px, y 4316px",
      "padding": [
        "0px",
        "0px",
        "0px",
        "0px"
      ],
      "radius": "24px",
      "border": "0px solid rgb(229, 229, 229)",
      "shadow": "none",
      "background": "rgba(0, 0, 0, 0)"
    },
    {
      "element": "button · 5 5 Change to a copper dripper",
      "size": "250×409px",
      "position": "x 921px, y 4471px",
      "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 · 1 1 Glass mug",
      "size": "262×158px",
      "position": "x 281px, y 4573px",
      "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 · 3 3 Tin 01",
      "size": "173×204px",
      "position": "x 565px, y 4424px",
      "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 · 4 4 Tin 02",
      "size": "173×204px",
      "position": "x 696px, y 4456px",
      "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": [
      "3.35544e+07px",
      "24px",
      "10px",
      "14px 14px 14px 4px",
      "14px",
      "8px"
    ],
    "borders": [
      "1px dashed rgb(212, 212, 213)"
    ],
    "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(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklab(0 0 0 / 0.1) 0px 0px 0px 0.5px inset, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px"
    ]
  }
}
```

#### Media treatment

```json
[
  {
    "element": "img · absolute inset-0 size-full rounded-[inherit] object-cover",
    "size": "900×2698px",
    "position": "x 1304px, y 3267px",
    "aspectRatio": 0.3,
    "objectFit": "cover",
    "objectPosition": "50% 50%",
    "radius": "24px",
    "overflow": "clip",
    "source": "https://s.krea.ai/k3-stuff-again/use-cases-marketing-output.webp"
  },
  {
    "element": "img · absolute inset-0 size-full rounded-[inherit] object-cover",
    "size": "600×1543px",
    "position": "x -464px, y 3845px",
    "aspectRatio": 0.4,
    "objectFit": "cover",
    "objectPosition": "50% 50%",
    "radius": "24px",
    "overflow": "clip",
    "source": "https://s.krea.ai/k3-stuff-landing/use-cases-consumer-output.webp"
  },
  {
    "element": "img · absolute inset-0 size-full rounded-[inherit] object-cover",
    "size": "1128×600px",
    "position": "x 156px, y 4316px",
    "aspectRatio": 1.9,
    "objectFit": "cover",
    "objectPosition": "50% 50%",
    "radius": "24px",
    "overflow": "clip",
    "source": "https://s.krea.ai/k3-stuff-landing/product-edit-output.webp"
  },
  {
    "element": "img · bg-primary-200 size-full rounded-xl object-cover svelte-1ptpzbh",
    "size": "64×64px",
    "position": "x 457px, y 4856px",
    "aspectRatio": 1,
    "objectFit": "cover",
    "objectPosition": "50% 50%",
    "radius": "14px",
    "overflow": "clip",
    "source": "https://optim-images.krea.ai/https---s-krea-ai-k3-stuff-landing-product-edit-reference-set-webp-256.webp"
  },
  {
    "element": "img · bg-primary-200 size-full rounded-xl object-cover svelte-1ptpzbh",
    "size": "64×64px",
    "position": "x 529px, y 4856px",
    "aspectRatio": 1,
    "objectFit": "cover",
    "objectPosition": "50% 50%",
    "radius": "14px",
    "overflow": "clip",
    "source": "https://optim-images.krea.ai/https---s-krea-ai-k3-stuff-landing-product-edit-reference-box-webp-256.webp"
  },
  {
    "element": "img · bg-primary-200 size-full rounded-xl object-cover svelte-1ptpzbh",
    "size": "64×64px",
    "position": "x 601px, y 4856px",
    "aspectRatio": 1,
    "objectFit": "cover",
    "objectPosition": "50% 50%",
    "radius": "14px",
    "overflow": "clip",
    "source": "https://optim-images.krea.ai/https---s-krea-ai-k3-stuff-landing-product-edit-reference-tins-webp-256.webp"
  },
  {
    "element": "svg · svg",
    "size": "20×20px",
    "position": "x 38px, y 4579px",
    "aspectRatio": 1,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "hidden",
    "source": "source not captured"
  },
  {
    "element": "svg · svg",
    "size": "20×20px",
    "position": "x 1382px, y 4579px",
    "aspectRatio": 1,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "hidden",
    "source": "source not captured"
  },
  {
    "element": "svg · svg",
    "size": "20×20px",
    "position": "x 695px, y 4878px",
    "aspectRatio": 1,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "hidden",
    "source": "source not captured"
  },
  {
    "element": "svg · svg",
    "size": "20×20px",
    "position": "x 959px, y 5032px",
    "aspectRatio": 1,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "hidden",
    "source": "source not captured"
  },
  {
    "element": "svg · svg",
    "size": "14×14px",
    "position": "x 465px, y 5035px",
    "aspectRatio": 1,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "hidden",
    "source": "source not captured"
  },
  {
    "element": "svg · svg",
    "size": "14×14px",
    "position": "x 555px, y 5035px",
    "aspectRatio": 1,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "hidden",
    "source": "source not captured"
  }
]
```

#### Browser-exposed animation parameters

```json
[
  {
    "target": "svg",
    "delayMs": 0,
    "durationMs": 1000,
    "easing": "linear",
    "iterations": null,
    "direction": "normal",
    "fill": "none",
    "keyframes": [
      {
        "easing": "linear",
        "offset": 0,
        "composite": "replace",
        "transform": "none",
        "computedOffset": 0
      },
      {
        "easing": "linear",
        "offset": 1,
        "composite": "auto",
        "transform": "rotate(360deg)",
        "computedOffset": 1
      }
    ]
  }
]
```

### 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-728",
    "gap": "normal",
    "tag": "section",
    "rect": {
      "x": 0,
      "y": 3944,
      "width": 1440,
      "height": 1285
    },
    "role": null,
    "label": "One modelEvery brief E-commerceMarketingArchitectureProductFashionGamingFilmPhotographyConsumer 1 1 ",
    "border": "0px solid rgb(229, 229, 229)",
    "margin": {
      "top": "0px",
      "left": "0px",
      "right": "0px",
      "bottom": "0px"
    },
    "radius": "0px",
    "shadow": "none",
    "columns": null,
    "display": "flex",
    "padding": {
      "top": "60px",
      "left": "0px",
      "right": "0px",
      "bottom": "60px"
    },
    "overflow": "visible",
    "position": "static",
    "background": "rgb(255, 255, 255)"
  },
  "cards": [
    {
      "id": "ld-793",
      "tag": "section",
      "rect": {
        "x": 1304,
        "y": 3267,
        "width": 900,
        "height": 2698
      },
      "role": null,
      "label": "1 1 Brand 2 2 Change the pasta to a banana 3 3 Logo",
      "border": "0px solid rgb(229, 229, 229)",
      "radius": "0px",
      "shadow": "none",
      "padding": [
        "0px",
        "0px",
        "0px",
        "0px"
      ],
      "background": "rgb(255, 255, 255)"
    },
    {
      "id": "ld-796",
      "tag": "img",
      "rect": {
        "x": 1304,
        "y": 3267,
        "width": 900,
        "height": 2698
      },
      "role": null,
      "label": "absolute inset-0 size-full rounded-[inherit] object-cover",
      "border": "0px solid rgb(229, 229, 229)",
      "radius": "24px",
      "shadow": "none",
      "padding": [
        "0px",
        "0px",
        "0px",
        "0px"
      ],
      "background": "rgba(0, 0, 0, 0)"
    },
    {
      "id": "ld-1002",
      "tag": "section",
      "rect": {
        "x": -464,
        "y": 3845,
        "width": 600,
        "height": 1543
      },
      "role": null,
      "label": "1 1 Sunglasses 2 2 Dachshund 3 3 Add a strawberry scoop",
      "border": "0px solid rgb(229, 229, 229)",
      "radius": "0px",
      "shadow": "none",
      "padding": [
        "0px",
        "0px",
        "0px",
        "0px"
      ],
      "background": "rgb(255, 255, 255)"
    },
    {
      "id": "ld-1005",
      "tag": "img",
      "rect": {
        "x": -464,
        "y": 3845,
        "width": 600,
        "height": 1543
      },
      "role": null,
      "label": "absolute inset-0 size-full rounded-[inherit] object-cover",
      "border": "0px solid rgb(229, 229, 229)",
      "radius": "24px",
      "shadow": "none",
      "padding": [
        "0px",
        "0px",
        "0px",
        "0px"
      ],
      "background": "rgba(0, 0, 0, 0)"
    },
    {
      "id": "ld-747",
      "tag": "section",
      "rect": {
        "x": 156,
        "y": 4316,
        "width": 1128,
        "height": 600
      },
      "role": null,
      "label": "1 1 Glass mug 2 2 Ceramic mug 3 3 Tin 01 4 4 Tin 02 5 5 Change to a copper dripper",
      "border": "0px solid rgb(229, 229, 229)",
      "radius": "0px",
      "shadow": "none",
      "padding": [
        "0px",
        "0px",
        "0px",
        "0px"
      ],
      "background": "rgb(255, 255, 255)"
    },
    {
      "id": "ld-750",
      "tag": "img",
      "rect": {
        "x": 156,
        "y": 4316,
        "width": 1128,
        "height": 600
      },
      "role": null,
      "label": "absolute inset-0 size-full rounded-[inherit] object-cover",
      "border": "0px solid rgb(229, 229, 229)",
      "radius": "24px",
      "shadow": "none",
      "padding": [
        "0px",
        "0px",
        "0px",
        "0px"
      ],
      "background": "rgba(0, 0, 0, 0)"
    },
    {
      "id": "ld-821",
      "tag": "button",
      "rect": {
        "x": 1304,
        "y": 4316,
        "width": 900,
        "height": 600
      },
      "role": null,
      "label": "absolute inset-0 z-10 cursor-pointer rounded-3xl",
      "border": "0px solid rgb(229, 229, 229)",
      "radius": "24px",
      "shadow": "none",
      "padding": [
        "0px",
        "0px",
        "0px",
        "0px"
      ],
      "background": "rgba(0, 0, 0, 0)"
    },
    {
      "id": "ld-1030",
      "tag": "button",
      "rect": {
        "x": -464,
        "y": 4316,
        "width": 600,
        "height": 600
      },
      "role": null,
      "label": "absolute inset-0 z-10 cursor-pointer rounded-3xl",
      "border": "0px solid rgb(229, 229, 229)",
      "radius": "24px",
      "shadow": "none",
      "padding": [
        "0px",
        "0px",
        "0px",
        "0px"
      ],
      "background": "rgba(0, 0, 0, 0)"
    },
    {
      "id": "ld-783",
      "tag": "button",
      "rect": {
        "x": 921,
        "y": 4471,
        "width": 250,
        "height": 409
      },
      "role": null,
      "label": "5 5 Change to a copper dripper",
      "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-751",
      "tag": "button",
      "rect": {
        "x": 281,
        "y": 4573,
        "width": 262,
        "height": 158
      },
      "role": null,
      "label": "1 1 Glass mug",
      "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-767",
      "tag": "button",
      "rect": {
        "x": 565,
        "y": 4424,
        "width": 173,
        "height": 204
      },
      "role": null,
      "label": "3 3 Tin 01",
      "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-775",
      "tag": "button",
      "rect": {
        "x": 696,
        "y": 4456,
        "width": 173,
        "height": 204
      },
      "role": null,
      "label": "4 4 Tin 02",
      "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-796",
      "tag": "img",
      "rect": {
        "x": 1304,
        "y": 3267,
        "width": 900,
        "height": 2698
      },
      "role": null,
      "label": "absolute inset-0 size-full rounded-[inherit] object-cover",
      "media": {
        "alt": "Billboard re-skin with a new product and brand",
        "src": "https://s.krea.ai/k3-stuff-again/use-cases-marketing-output.webp",
        "naturalWidth": 1248,
        "naturalHeight": 832
      },
      "radius": "24px",
      "overflow": "clip",
      "objectFit": "cover",
      "aspectRatio": 0.3,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-1005",
      "tag": "img",
      "rect": {
        "x": -464,
        "y": 3845,
        "width": 600,
        "height": 1543
      },
      "role": null,
      "label": "absolute inset-0 size-full rounded-[inherit] object-cover",
      "media": {
        "alt": "Matching summer look with my dog",
        "src": "https://s.krea.ai/k3-stuff-landing/use-cases-consumer-output.webp",
        "naturalWidth": 1024,
        "naturalHeight": 1024
      },
      "radius": "24px",
      "overflow": "clip",
      "objectFit": "cover",
      "aspectRatio": 0.4,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-750",
      "tag": "img",
      "rect": {
        "x": 156,
        "y": 4316,
        "width": 1128,
        "height": 600
      },
      "role": null,
      "label": "absolute inset-0 size-full rounded-[inherit] object-cover",
      "media": {
        "alt": "A starter-kit coffee bundle on a blue set: mugs, a dripper, and a gift box containing two Hot Hollow tins",
        "src": "https://s.krea.ai/k3-stuff-landing/product-edit-output.webp",
        "naturalWidth": 1152,
        "naturalHeight": 912
      },
      "radius": "24px",
      "overflow": "clip",
      "objectFit": "cover",
      "aspectRatio": 1.9,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-1042",
      "tag": "img",
      "rect": {
        "x": 457,
        "y": 4856,
        "width": 64,
        "height": 64
      },
      "role": null,
      "label": "bg-primary-200 size-full rounded-xl object-cover svelte-1ptpzbh",
      "media": {
        "alt": "Blue studio set with a coffee dripper and mugs",
        "src": "https://optim-images.krea.ai/https---s-krea-ai-k3-stuff-landing-product-edit-reference-set-webp-256.webp",
        "naturalWidth": 203,
        "naturalHeight": 256
      },
      "radius": "14px",
      "overflow": "clip",
      "objectFit": "cover",
      "aspectRatio": 1,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-1049",
      "tag": "img",
      "rect": {
        "x": 529,
        "y": 4856,
        "width": 64,
        "height": 64
      },
      "role": null,
      "label": "bg-primary-200 size-full rounded-xl object-cover svelte-1ptpzbh",
      "media": {
        "alt": "Gift boxes in assorted colors",
        "src": "https://optim-images.krea.ai/https---s-krea-ai-k3-stuff-landing-product-edit-reference-box-webp-256.webp",
        "naturalWidth": 256,
        "naturalHeight": 256
      },
      "radius": "14px",
      "overflow": "clip",
      "objectFit": "cover",
      "aspectRatio": 1,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-1056",
      "tag": "img",
      "rect": {
        "x": 601,
        "y": 4856,
        "width": 64,
        "height": 64
      },
      "role": null,
      "label": "bg-primary-200 size-full rounded-xl object-cover svelte-1ptpzbh",
      "media": {
        "alt": "Stack of Hot Hollow coffee tins",
        "src": "https://optim-images.krea.ai/https---s-krea-ai-k3-stuff-landing-product-edit-reference-tins-webp-256.webp",
        "naturalWidth": 145,
        "naturalHeight": 256
      },
      "radius": "14px",
      "overflow": "clip",
      "objectFit": "cover",
      "aspectRatio": 1,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-1033",
      "tag": "svg",
      "rect": {
        "x": 38,
        "y": 4579,
        "width": 20,
        "height": 20
      },
      "role": null,
      "label": "svg",
      "media": null,
      "radius": "0px",
      "overflow": "hidden",
      "objectFit": "fill",
      "aspectRatio": 1,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-1036",
      "tag": "svg",
      "rect": {
        "x": 1382,
        "y": 4579,
        "width": 20,
        "height": 20
      },
      "role": null,
      "label": "svg",
      "media": null,
      "radius": "0px",
      "overflow": "hidden",
      "objectFit": "fill",
      "aspectRatio": 1,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-1063",
      "tag": "svg",
      "rect": {
        "x": 695,
        "y": 4878,
        "width": 20,
        "height": 20
      },
      "role": null,
      "label": "svg",
      "media": null,
      "radius": "0px",
      "overflow": "hidden",
      "objectFit": "fill",
      "aspectRatio": 1,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-1096",
      "tag": "svg",
      "rect": {
        "x": 959,
        "y": 5032,
        "width": 20,
        "height": 20
      },
      "role": null,
      "label": "svg",
      "media": null,
      "radius": "0px",
      "overflow": "hidden",
      "objectFit": "fill",
      "aspectRatio": 1,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-1084",
      "tag": "svg",
      "rect": {
        "x": 465,
        "y": 5035,
        "width": 14,
        "height": 14
      },
      "role": "img",
      "label": "svg",
      "media": null,
      "radius": "0px",
      "overflow": "hidden",
      "objectFit": "fill",
      "aspectRatio": 1,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-1090",
      "tag": "svg",
      "rect": {
        "x": 555,
        "y": 5035,
        "width": 14,
        "height": 14
      },
      "role": null,
      "label": "svg",
      "media": null,
      "radius": "0px",
      "overflow": "hidden",
      "objectFit": "fill",
      "aspectRatio": 1,
      "objectPosition": "50% 50%"
    }
  ],
  "bounds": {
    "top": 3944,
    "bottom": 5229,
    "pageHeight": 21224
  },
  "schema": "little-details-section-measurements-v1",
  "source": "saved DOM/CSS element and animation maps",
  "columns": [
    {
      "id": "ld-752",
      "gap": "normal",
      "tag": "span",
      "rect": {
        "x": 270,
        "y": 4562,
        "width": 22,
        "height": 22
      },
      "role": null,
      "label": "1",
      "columns": "10px",
      "display": "grid",
      "direction": "row"
    },
    {
      "id": "ld-757",
      "gap": "normal",
      "tag": "span",
      "rect": {
        "x": 291,
        "y": 4526,
        "width": 22,
        "height": 22
      },
      "role": null,
      "label": "1",
      "columns": "10px",
      "display": "grid",
      "direction": "row"
    },
    {
      "id": "ld-760",
      "gap": "normal",
      "tag": "span",
      "rect": {
        "x": 334,
        "y": 4701,
        "width": 22,
        "height": 22
      },
      "role": null,
      "label": "2",
      "columns": "10px",
      "display": "grid",
      "direction": "row"
    },
    {
      "id": "ld-765",
      "gap": "normal",
      "tag": "span",
      "rect": {
        "x": 355,
        "y": 4665,
        "width": 22,
        "height": 22
      },
      "role": null,
      "label": "2",
      "columns": "10px",
      "display": "grid",
      "direction": "row"
    },
    {
      "id": "ld-768",
      "gap": "normal",
      "tag": "span",
      "rect": {
        "x": 554,
        "y": 4413,
        "width": 22,
        "height": 22
      },
      "role": null,
      "label": "3",
      "columns": "10px",
      "display": "grid",
      "direction": "row"
    },
    {
      "id": "ld-773",
      "gap": "normal",
      "tag": "span",
      "rect": {
        "x": 575,
        "y": 4377,
        "width": 22,
        "height": 22
      },
      "role": null,
      "label": "3",
      "columns": "10px",
      "display": "grid",
      "direction": "row"
    },
    {
      "id": "ld-776",
      "gap": "normal",
      "tag": "span",
      "rect": {
        "x": 685,
        "y": 4445,
        "width": 22,
        "height": 22
      },
      "role": null,
      "label": "4",
      "columns": "10px",
      "display": "grid",
      "direction": "row"
    },
    {
      "id": "ld-781",
      "gap": "normal",
      "tag": "span",
      "rect": {
        "x": 706,
        "y": 4409,
        "width": 22,
        "height": 22
      },
      "role": null,
      "label": "4",
      "columns": "10px",
      "display": "grid",
      "direction": "row"
    }
  ],
  "spacing": {
    "gapsPx": [
      6,
      8
    ],
    "representativeContentWidthsPx": [
      1128,
      1091,
      900,
      600,
      534,
      262,
      250
    ]
  },
  "coverage": {
    "cards": 12,
    "media": 12,
    "animations": 1,
    "elementsInSection": 74
  },
  "surfaces": {
    "radii": [
      "3.35544e+07px",
      "24px",
      "10px",
      "14px 14px 14px 4px",
      "14px",
      "8px"
    ],
    "borders": [
      "1px dashed rgb(212, 212, 213)"
    ],
    "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(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklab(0 0 0 / 0.1) 0px 0px 0px 0.5px inset, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px"
    ]
  },
  "animations": [
    {
      "id": "animation-18",
      "fill": "none",
      "easing": "linear",
      "target": {
        "id": "ld-1102",
        "tag": "svg",
        "rect": {
          "x": 963,
          "y": 5037,
          "width": 11,
          "height": 11
        },
        "role": null,
        "label": "svg"
      },
      "delayMs": 0,
      "direction": "normal",
      "keyframes": [
        {
          "easing": "linear",
          "offset": 0,
          "composite": "replace",
          "transform": "none",
          "computedOffset": 0
        },
        {
          "easing": "linear",
          "offset": 1,
          "composite": "auto",
          "transform": "rotate(360deg)",
          "computedOffset": 1
        }
      ],
      "playState": "running",
      "durationMs": 1000,
      "iterations": null,
      "playbackRate": 1
    }
  ],
  "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: medium
- What transfers: Pill-tab category switcher pattern; Large central image card flanked by partial side cards; Floating overlay card pattern for surfacing metadata/prompt over an image; Rounded-corner and shadow token system applied to cards and buttons
- Dependencies: Specific reference thumbnail and prompt copy content tied to this product's AI generation feature; Exact imagery aspect ratios and curated use-case categories; Underlying carousel/tab state logic for switching categories
- Guidance: Keep the tab-plus-large-image-with-peek layout and the floating overlay card concept, but replace the prompt/reference content with whatever contextual metadata applies to the new domain; rebuild the overlay as a generic 'detail card' component rather than hardcoding to prompt-and-thumbnail content.

### 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 “Tabbed use-case image carousel”.

Purpose: An image carousel featuring distinct use cases, navigable via pill-shaped tabs, with a floating UI panel demonstrating the prompt used.

Structure: centered single-column. Source layout label: Centered header, horizontal scrollable tab list, and a large central image card flanked by partially visible adjacent cards.. Use a narrow central reading axis and deliberate scale contrast rather than adding unnecessary side content.

Visual signature to preserve at the pattern level: Large central image with partially visible images on the left and right, topped with category pill tabs.

Components: tab, carousel, image card, floating UI, button.

Style direction: minimal, photographic.

Observed crop: 1440×1285px (1.121: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-8","size":"100px","count":1,"family":"Krea 3 Suisse Intl","traits":"Regular","weight":"500","contexts":[{"tag":"h2","top":4004,"text":"One modelEvery brief","property":"font"}],"fontStack":"\"Krea 3 Suisse Intl\", sans-serif","lineHeight":"96px","letterSpacing":"-3px"} {"id":"font-27","size":"14px","count":69,"family":"Suisse Intl","traits":"Regular","weight":"400","contexts":[{"tag":"span","top":5024,"text":"Krea 3","property":"font"},{"tag":"span","top":5032,"text":"Change to a copper dripper","property":"font"},{"tag":"span","top":11254,"text":"/ edit","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":"20px","letterSpacing":"normal"}

Colors measured inside this section: {"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-19","hex":"#F4F4F4","alpha":0.8509803921568627,"count":2,"contexts":[{"tag":"div","top":4839,"text":"1 2 3 Create a starter-kit bundle hero on the blue set from image 1, with its dripper and mugs plus ","property":"background"}],"cssValue":"oklab(0.970145 0.0000441968 0.0000194311 / 0.85)"} {"id":"color-20","hex":"#000000","alpha":0.5490196078431373,"count":92,"contexts":[{"tag":"p","top":3182,"text":"Krea 3 Ultra is #4 on Arena's Multi-Image Edit leaderboard, with an Arena score of 1,435. Bars use t","property":"text"},{"tag":"span","top":4900,"text":"1","property":"background"},{"tag":"span","top":15690,"text":"“","property":"text"}],"cssValue":"oklab(0 0 0 / 0.55)"} {"id":"color-32","hex":"#E5E5E5","alpha":1,"count":43,"contexts":[{"tag":"div","top":4839,"text":"1 2 3 Create a starter-kit bundle hero on the blue set from image 1, with its dripper and mugs plus ","property":"border"},{"tag":"img","top":4856,"text":"","property":"background"}],"cssValue":"oklch(0.922 0 0)"} {"id":"color-38","hex":"#FFFFFF","alpha":0.8,"count":14,"contexts":[{"tag":"button","top":4565,"text":"","property":"control-background"},{"tag":"button","top":15868,"text":"GPT Image 2.5","property":"text"},{"tag":"path","top":15884,"text":"","property":"svg-fill"}],"cssValue":"oklab(0.999994 0.0000455677 0.0000200868 / 0.8)"} {"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)"}

Exact section measurements from the saved element map: root {"rect":{"x":0,"y":3944,"width":1440,"height":1285},"padding":{"top":"60px","left":"0px","right":"0px","bottom":"60px"},"gap":"normal","columns":null,"overflow":"visible"}; spacing {"gapsPx":[6,8],"representativeContentWidthsPx":[1128,1091,900,600,534,262,250]}; surfaces {"radii":["3.35544e+07px","24px","10px","14px 14px 14px 4px","14px","8px"],"borders":["1px dashed rgb(212, 212, 213)"],"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(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklab(0 0 0 / 0.1) 0px 0px 0px 0.5px inset, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px"]}; media [{"tag":"img","rect":{"x":1304,"y":3267,"width":900,"height":2698},"aspectRatio":0.3,"objectFit":"cover","objectPosition":"50% 50%","radius":"24px"},{"tag":"img","rect":{"x":-464,"y":3845,"width":600,"height":1543},"aspectRatio":0.4,"objectFit":"cover","objectPosition":"50% 50%","radius":"24px"},{"tag":"img","rect":{"x":156,"y":4316,"width":1128,"height":600},"aspectRatio":1.9,"objectFit":"cover","objectPosition":"50% 50%","radius":"24px"},{"tag":"img","rect":{"x":457,"y":4856,"width":64,"height":64},"aspectRatio":1,"objectFit":"cover","objectPosition":"50% 50%","radius":"14px"}]; animations [{"target":{"id":"ld-1102","tag":"svg","rect":{"x":963,"y":5037,"width":11,"height":11},"role":null,"label":"svg"},"delayMs":0,"durationMs":1000,"easing":"linear","keyframes":[{"easing":"linear","offset":0,"composite":"replace","transform":"none","computedOffset":0},{"easing":"linear","offset":1,"composite":"auto","transform":"rotate(360deg)","computedOffset":1}]}]

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

Transfer these principles: Pill-tab category switcher pattern; Large central image card flanked by partial side cards; Floating overlay card pattern for surfacing metadata/prompt over an image; Rounded-corner and shadow token system applied to cards and buttons.

Dependencies: Specific reference thumbnail and prompt copy content tied to this product's AI generation feature; Exact imagery aspect ratios and curated use-case categories; Underlying carousel/tab state logic for switching categories.

Adaptation guidance: Keep the tab-plus-large-image-with-peek layout and the floating overlay card concept, but replace the prompt/reference content with whatever contextual metadata applies to the new domain; rebuild the overlay as a generic 'detail card' component rather than hardcoding to prompt-and-thumbnail content.

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