# Multiple reference image upload UI

Schema: Design Details SECTION.md v3.2
Website: Krea
Source: https://www.krea.ai/krea-3
Source section IDs: bb84fe38-a25c-4abb-8462-e91cdcac638f
Status: AI analysed; vocabulary promotion is automated

## Builder's note

What makes it work:
- The big left-aligned headline and a muted short body line set up a clear hierarchy, and the sparse right stage leaves room for the example to breathe.
- Floating reference chips, a 'Model.jpg' label and a real prompt sit over the warm gradient, so the interface itself explains multi-image compositing without extra copy.
- A dotted human outline gives the dark scene one focal point, and the warm glow keeps the small UI text readable and separate from the background.

What a screenshot can't show:
- The background image fades in over 700ms, and the dotted outline loops a linear stroke-dashoffset animation every 1600ms, so it looks gently hand-drawn. The recording itself showed no other motion.
- Prompt and chip text is small: 16px at weight 500 for the lead line and about 13.7px at weight 400 for the prompt, with normal tracking.

Borrow: Stage the feature as a live-looking example, with labeled chips and a real prompt floating over one atmospheric image, so the visual teaches the idea.
Leave alone: Don't copy Krea's warm gradient, the dotted silhouette, the Model.jpg chips or the Suisse Intl typeface; use your own illustration and a free neo-grotesque like Inter instead.

## Classification

- Type: features
- Layout: Left-aligned text with a large graphical area on the right showing floating UI elements over a gradient.
- Styles: gradient, illustrative, minimal
- Confidence: 100%

## Purpose and structure

A dark-themed section illustrating the use of multiple reference images, featuring a glowing gradient background and a dotted outline silhouette.

Visual signature: Warm glowing background with a dotted human outline and floating prompt boxes.

## Components

- image card
- floating UI
- dotted line
- heading
- badge

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

- Typography: 68 — Large display headline ('Up to eight references / One image') uses the site's tight-tracked 100px heading scale against a muted 20px body line, giving strong size contrast and clean hierarchy; however the type itself is reused from the site system with no section-specific treatment. Next tier: No distinctive typographic behavior unique to this section beyond the global display/body pairing.
- Composition: 74 — Asymmetric layout places dense left-aligned copy against a sparse right-side illustrative scene; the dotted silhouette, floating reference chips, and prompt box are staged with deliberate negative space and a clear reading path from headline to example to tabs. Next tier: The right-side composition, while elegant, follows a fairly conventional 'product screenshot floating over gradient' pattern seen across many AI tool sites, limiting it from feeling singular.
- Motion: 58 — Deterministic animation data shows a simple opacity fade-in on the background image (700ms) and a looping dashoffset stroke animation on the dotted outline (1600ms linear loop), indicating a subtle ambient sketch-drawing effect rather than a complex sequence. Next tier: Only two simple animations are evidenced (fade-in, looping stroke); no choreographed entrance of the floating chips/cards or prompt text is confirmed, capping motion sophistication.
- Content: 65 — The reference image chips, 'Model.jpg' label, and annotated prompt text directly demonstrate the feature (multi-reference compositing) in a self-explanatory way, tightly integrating UI chrome with the narrative copy. Next tier: Content demonstration is literal and screenshot-like rather than an invented interaction model, keeping it short of a truly memorable integration.
- Originality: 62 — The dotted-outline silhouette device paired with glowing gradient and floating labeled chips is a distinctive illustrative touch not commonly seen, giving the section a recognizable visual signature. Next tier: The underlying pattern (floating cards + annotated prompt over gradient hero image) is a well-worn SaaS/AI marketing trope; the silhouette is the only truly novel element and isn't enough alone to reach strong/memorable territory.
- Adaptability: 60 — Structure separates cleanly into copy block, tab/pill selector, and a media stage with independently positioned chip/card elements and borders/radii documented, suggesting the skin (gradient, silhouette art) could be swapped while retaining the layout and interaction pattern. Next tier: Heavy reliance on custom illustrated background art (silhouette, gradient) and bespoke positioned chips makes the visual identity hard to fully decouple from specific assets.

Strengths:
- Clear narrative hierarchy from bold headline to concrete example to selectable preset tabs
- Distinctive dotted-silhouette illustration gives the gradient background a recognizable identity
- Reference chips and annotated prompt text make an abstract multi-image feature concrete and legible

Weaknesses:
- Floating card + gradient + annotated prompt layout is a common AI-product marketing pattern
- Motion evidence only shows a basic fade-in and a looping stroke animation, no richer choreography confirmed
- Typography reuses the sitewide display/body scale without a section-specific twist

Why it does not reach the next tier: The section is well-composed and has one genuinely original illustrative device (the dotted silhouette), but its overall structure and motion are conventional and modestly evidenced, keeping it at a good/polished level rather than strong or memorable.

## Adaptation guidance

- Effort: Medium
- Guidance: Keep the copy/media split, tab selector, and annotated-prompt chip pattern; the gradient backdrop and silhouette art must be redrawn or replaced with new custom illustration to preserve the section's distinct identity rather than defaulting to a plain photo.

What transfers:
- Left-copy / right-media asymmetric layout
- Pill-shaped tab selector for switching examples
- Chip-labeled reference images annotated onto a prompt string

Dependencies:
- Custom dotted silhouette illustration asset
- Specific gradient background artwork
- Bespoke photo assets for reference chips and backdrop image

## 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 data limited to two simple animations (fade-in, looping stroke); richer choreography of chips/cards not confirmed
- No deterministic color/shadow detail for the gradient backdrop itself, only for cards
- Assessment based on a single desktop crop; responsive behavior unknown

## 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: Left-aligned text with a large graphical area on the right showing floating UI elements over a gradient.
- Layout: Left-aligned text with a large graphical area on the right showing floating UI elements over a gradient.
- Styles: gradient, illustrative, minimal
- Components: image card, floating UI, dotted line, heading, badge
- Purpose: A dark-themed section illustrating the use of multiple reference images, featuring a glowing gradient background and a dotted outline silhouette.
- Visual signature: Warm glowing background with a dotted human outline and floating prompt boxes.
- Place on the page: 9 of 22, after Feature collection (`krea-ai:C08`), before Gallery (`krea-ai:C10`)

### Crop and composition

- Crop: 1440×870px; aspect ratio 1.655:1
- Page bounds: 7396–8266px of 21224px
- Guidance: Preserve the documented hierarchy and relationships; exact measurements were not deterministically captured.

### 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": "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": "500",
      "lineHeight": "22.4px",
      "letterSpacing": "normal",
      "sample": "Point at people, products, places and styles by number. Krea 3 puts them in one picture.",
      "element": "p",
      "occurrences": 2,
      "sourceId": "font-23"
    },
    {
      "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": "13.7px",
      "weight": "400",
      "lineHeight": "21.2px",
      "letterSpacing": "normal",
      "sample": "Seat the woman from at a candlelit Art Deco bar in the knit sweater from , with the silver bag from",
      "element": "p",
      "occurrences": 1,
      "sourceId": "font-25"
    }
  ],
  "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": "#FFFFFF",
      "cssValue": "rgba(255, 255, 255, 0.85)",
      "alpha": 0.8509803921568627,
      "appliedAs": [
        "svg-stroke",
        "text"
      ],
      "occurrences": 5,
      "sourceId": "color-10"
    },
    {
      "value": "#0B0B0B",
      "cssValue": "rgb(11, 11, 11)",
      "alpha": 1,
      "appliedAs": [
        "background"
      ],
      "occurrences": 1,
      "sourceId": "color-12"
    },
    {
      "value": "#131613",
      "cssValue": "rgba(20, 22, 20, 0.72)",
      "alpha": 0.7215686274509804,
      "appliedAs": [
        "background"
      ],
      "occurrences": 1,
      "sourceId": "color-35"
    },
    {
      "value": "#FFFFFF",
      "cssValue": "rgba(255, 255, 255, 0.08)",
      "alpha": 0.0784313725490196,
      "appliedAs": [
        "background"
      ],
      "occurrences": 1,
      "sourceId": "color-39"
    },
    {
      "value": "#FFFFFF",
      "cssValue": "rgba(255, 255, 255, 0.55)",
      "alpha": 0.5490196078431373,
      "appliedAs": [
        "text"
      ],
      "occurrences": 2,
      "sourceId": "color-42"
    },
    {
      "value": "#FFFFFF",
      "cssValue": "rgba(255, 255, 255, 0.6)",
      "alpha": 0.6,
      "appliedAs": [
        "text"
      ],
      "occurrences": 4,
      "sourceId": "color-43"
    }
  ],
  "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×810px; block; padding {"top":"0px","left":"0px","right":"0px","bottom":"0px"}; gap normal; background rgb(11, 11, 11); radius 0px.
- Representative content widths: 1312, 403, 400, 251px.
- Layout containers: 1; cards/surfaces: 2; media elements: 8; browser animations: 2.

#### Container, grid, and spacing

```json
{
  "viewport": {
    "width": 1440,
    "captureBounds": {
      "top": 7396,
      "bottom": 8266,
      "pageHeight": 21224
    }
  },
  "container": {
    "size": "1440×810px",
    "position": "x 0px, y 7456px",
    "display": "block",
    "positionMode": "relative",
    "padding": {
      "top": "0px",
      "left": "0px",
      "right": "0px",
      "bottom": "0px"
    },
    "margin": {
      "top": "60px",
      "left": "0px",
      "right": "0px",
      "bottom": "60px"
    },
    "gap": "normal",
    "columns": "not captured",
    "background": "rgb(11, 11, 11)",
    "radius": "0px",
    "border": "0px solid rgb(229, 229, 229)",
    "shadow": "none",
    "overflow": "hidden"
  },
  "spacing": {
    "observedGapsPx": [],
    "representativeContentWidthsPx": [
      1312,
      403,
      400,
      251
    ]
  },
  "columns": [
    {
      "element": "div · Art Deco barGallery giantCouture",
      "size": "403×60px",
      "position": "x 64px, y 8102px",
      "display": "inline-flex",
      "template": "not captured",
      "direction": "row",
      "gap": "normal"
    }
  ]
}
```

#### Cards and surfaces

```json
{
  "cards": [
    {
      "element": "img · svelte-1da07up",
      "size": "124×147px",
      "position": "x 1293px, y 7629px",
      "padding": [
        "0px",
        "0px",
        "0px",
        "0px"
      ],
      "radius": "8.64009px",
      "border": "4px solid rgba(255, 255, 255, 0.9)",
      "shadow": "rgba(0, 0, 0, 0.7) 0px 17.2802px 34.5604px -14.4002px",
      "background": "rgba(0, 0, 0, 0)"
    },
    {
      "element": "img · svelte-1da07up",
      "size": "122×146px",
      "position": "x 845px, y 7565px",
      "padding": [
        "0px",
        "0px",
        "0px",
        "0px"
      ],
      "radius": "8.64009px",
      "border": "4px solid rgba(255, 255, 255, 0.9)",
      "shadow": "rgba(0, 0, 0, 0.7) 0px 17.2802px 34.5604px -14.4002px",
      "background": "rgba(0, 0, 0, 0)"
    }
  ],
  "surfaces": {
    "radii": [
      "4.32005px",
      "8.64009px",
      "999px"
    ],
    "borders": [
      "4px solid rgba(255, 255, 255, 0.9)"
    ],
    "shadows": [
      "rgba(0, 0, 0, 0.7) 0px 17.2802px 34.5604px -14.4002px"
    ]
  }
}
```

#### Media treatment

```json
[
  {
    "element": "img · empty svelte-1da07up",
    "size": "1440×810px",
    "position": "x 0px, y 7456px",
    "aspectRatio": 1.8,
    "objectFit": "cover",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "clip",
    "source": "https://s.krea.ai/k3-landing-final/k3refs-deco-empty.webp"
  },
  {
    "element": "svg · svg",
    "size": "1440×810px",
    "position": "x 0px, y 7456px",
    "aspectRatio": 1.8,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "hidden",
    "source": "source not captured"
  },
  {
    "element": "img · svelte-1da07up",
    "size": "124×147px",
    "position": "x 1293px, y 7629px",
    "aspectRatio": 0.8,
    "objectFit": "cover",
    "objectPosition": "50% 50%",
    "radius": "8.64009px",
    "overflow": "clip",
    "source": "https://optim-images.krea.ai/https---s-krea-ai-k3-landing-final-refs-numan-deco-ref-3-webp-512.webp"
  },
  {
    "element": "img · svelte-1da07up",
    "size": "122×146px",
    "position": "x 845px, y 7565px",
    "aspectRatio": 0.8,
    "objectFit": "cover",
    "objectPosition": "50% 50%",
    "radius": "8.64009px",
    "overflow": "clip",
    "source": "https://optim-images.krea.ai/https---s-krea-ai-k3-landing-final-refs-numan-deco-ref-1-webp-512.webp"
  },
  {
    "element": "img · svelte-1da07up",
    "size": "119×144px",
    "position": "x 748px, y 7744px",
    "aspectRatio": 0.8,
    "objectFit": "cover",
    "objectPosition": "50% 50%",
    "radius": "8.64009px",
    "overflow": "clip",
    "source": "https://optim-images.krea.ai/https---s-krea-ai-k3-landing-final-refs-numan-deco-ref-2-webp-512.webp"
  },
  {
    "element": "img · chip svelte-1da07up",
    "size": "22×22px",
    "position": "x 937px, y 7979px",
    "aspectRatio": 1,
    "objectFit": "cover",
    "objectPosition": "50% 50%",
    "radius": "4.32005px",
    "overflow": "clip",
    "source": "https://optim-images.krea.ai/https---s-krea-ai-k3-landing-final-refs-numan-deco-ref-1-webp-512.webp"
  },
  {
    "element": "img · chip svelte-1da07up",
    "size": "22×22px",
    "position": "x 800px, y 8023px",
    "aspectRatio": 1,
    "objectFit": "cover",
    "objectPosition": "50% 50%",
    "radius": "4.32005px",
    "overflow": "clip",
    "source": "https://optim-images.krea.ai/https---s-krea-ai-k3-landing-final-refs-numan-deco-ref-2-webp-512.webp"
  },
  {
    "element": "img · chip svelte-1da07up",
    "size": "22×22px",
    "position": "x 984px, y 8023px",
    "aspectRatio": 1,
    "objectFit": "cover",
    "objectPosition": "50% 50%",
    "radius": "4.32005px",
    "overflow": "clip",
    "source": "https://optim-images.krea.ai/https---s-krea-ai-k3-landing-final-refs-numan-deco-ref-3-webp-512.webp"
  }
]
```

#### Browser-exposed animation parameters

```json
[
  {
    "target": "empty svelte-1da07up",
    "delayMs": 0,
    "durationMs": 700,
    "easing": "linear",
    "iterations": 1,
    "direction": "normal",
    "fill": "both",
    "keyframes": [
      {
        "easing": "ease",
        "offset": 0,
        "opacity": "0",
        "composite": "auto",
        "computedOffset": 0
      },
      {
        "easing": "ease",
        "offset": 1,
        "opacity": "1",
        "composite": "replace",
        "computedOffset": 1
      }
    ]
  },
  {
    "target": "svg",
    "delayMs": 0,
    "durationMs": 1600,
    "easing": "linear",
    "iterations": null,
    "direction": "normal",
    "fill": "none",
    "keyframes": [
      {
        "easing": "linear",
        "offset": 0,
        "composite": "replace",
        "computedOffset": 0,
        "strokeDashoffset": "0px"
      },
      {
        "easing": "linear",
        "offset": 1,
        "composite": "auto",
        "computedOffset": 1,
        "strokeDashoffset": "-36px"
      }
    ]
  }
]
```

### 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-1340",
    "gap": "normal",
    "tag": "section",
    "rect": {
      "x": 0,
      "y": 7456,
      "width": 1440,
      "height": 810
    },
    "role": null,
    "label": "Prompt Seat the woman from at a candlelit Art Deco bar in the knit sweater from , with the silver ba",
    "border": "0px solid rgb(229, 229, 229)",
    "margin": {
      "top": "60px",
      "left": "0px",
      "right": "0px",
      "bottom": "60px"
    },
    "radius": "0px",
    "shadow": "none",
    "columns": null,
    "display": "block",
    "padding": {
      "top": "0px",
      "left": "0px",
      "right": "0px",
      "bottom": "0px"
    },
    "overflow": "hidden",
    "position": "relative",
    "background": "rgb(11, 11, 11)"
  },
  "cards": [
    {
      "id": "ld-1365",
      "tag": "img",
      "rect": {
        "x": 1293,
        "y": 7629,
        "width": 124,
        "height": 147
      },
      "role": null,
      "label": "svelte-1da07up",
      "border": "4px solid rgba(255, 255, 255, 0.9)",
      "radius": "8.64009px",
      "shadow": "rgba(0, 0, 0, 0.7) 0px 17.2802px 34.5604px -14.4002px",
      "padding": [
        "0px",
        "0px",
        "0px",
        "0px"
      ],
      "background": "rgba(0, 0, 0, 0)"
    },
    {
      "id": "ld-1359",
      "tag": "img",
      "rect": {
        "x": 845,
        "y": 7565,
        "width": 122,
        "height": 146
      },
      "role": null,
      "label": "svelte-1da07up",
      "border": "4px solid rgba(255, 255, 255, 0.9)",
      "radius": "8.64009px",
      "shadow": "rgba(0, 0, 0, 0.7) 0px 17.2802px 34.5604px -14.4002px",
      "padding": [
        "0px",
        "0px",
        "0px",
        "0px"
      ],
      "background": "rgba(0, 0, 0, 0)"
    }
  ],
  "media": [
    {
      "id": "ld-1342",
      "tag": "img",
      "rect": {
        "x": 0,
        "y": 7456,
        "width": 1440,
        "height": 810
      },
      "role": null,
      "label": "empty svelte-1da07up",
      "media": {
        "alt": "A woman in a cream knit sweater seated at a candlelit Art Deco bar, a silver bag on the counter.",
        "src": "https://s.krea.ai/k3-landing-final/k3refs-deco-empty.webp",
        "naturalWidth": 0,
        "naturalHeight": 0
      },
      "radius": "0px",
      "overflow": "clip",
      "objectFit": "cover",
      "aspectRatio": 1.8,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-1343",
      "tag": "svg",
      "rect": {
        "x": 0,
        "y": 7456,
        "width": 1440,
        "height": 810
      },
      "role": null,
      "label": "svg",
      "media": null,
      "radius": "0px",
      "overflow": "hidden",
      "objectFit": "fill",
      "aspectRatio": 1.8,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-1365",
      "tag": "img",
      "rect": {
        "x": 1293,
        "y": 7629,
        "width": 124,
        "height": 147
      },
      "role": null,
      "label": "svelte-1da07up",
      "media": {
        "alt": "Bag",
        "src": "https://optim-images.krea.ai/https---s-krea-ai-k3-landing-final-refs-numan-deco-ref-3-webp-512.webp",
        "naturalWidth": 412,
        "naturalHeight": 512
      },
      "radius": "8.64009px",
      "overflow": "clip",
      "objectFit": "cover",
      "aspectRatio": 0.8,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-1359",
      "tag": "img",
      "rect": {
        "x": 845,
        "y": 7565,
        "width": 122,
        "height": 146
      },
      "role": null,
      "label": "svelte-1da07up",
      "media": {
        "alt": "Portrait",
        "src": "https://optim-images.krea.ai/https---s-krea-ai-k3-landing-final-refs-numan-deco-ref-1-webp-512.webp",
        "naturalWidth": 512,
        "naturalHeight": 512
      },
      "radius": "8.64009px",
      "overflow": "clip",
      "objectFit": "cover",
      "aspectRatio": 0.8,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-1362",
      "tag": "img",
      "rect": {
        "x": 748,
        "y": 7744,
        "width": 119,
        "height": 144
      },
      "role": null,
      "label": "svelte-1da07up",
      "media": {
        "alt": "Sweater",
        "src": "https://optim-images.krea.ai/https---s-krea-ai-k3-landing-final-refs-numan-deco-ref-2-webp-512.webp",
        "naturalWidth": 412,
        "naturalHeight": 512
      },
      "radius": "8.64009px",
      "overflow": "clip",
      "objectFit": "cover",
      "aspectRatio": 0.8,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-1355",
      "tag": "img",
      "rect": {
        "x": 937,
        "y": 7979,
        "width": 22,
        "height": 22
      },
      "role": null,
      "label": "chip svelte-1da07up",
      "media": {
        "alt": "Portrait",
        "src": "https://optim-images.krea.ai/https---s-krea-ai-k3-landing-final-refs-numan-deco-ref-1-webp-512.webp",
        "naturalWidth": 512,
        "naturalHeight": 512
      },
      "radius": "4.32005px",
      "overflow": "clip",
      "objectFit": "cover",
      "aspectRatio": 1,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-1356",
      "tag": "img",
      "rect": {
        "x": 800,
        "y": 8023,
        "width": 22,
        "height": 22
      },
      "role": null,
      "label": "chip svelte-1da07up",
      "media": {
        "alt": "Sweater",
        "src": "https://optim-images.krea.ai/https---s-krea-ai-k3-landing-final-refs-numan-deco-ref-2-webp-512.webp",
        "naturalWidth": 412,
        "naturalHeight": 512
      },
      "radius": "4.32005px",
      "overflow": "clip",
      "objectFit": "cover",
      "aspectRatio": 1,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-1357",
      "tag": "img",
      "rect": {
        "x": 984,
        "y": 8023,
        "width": 22,
        "height": 22
      },
      "role": null,
      "label": "chip svelte-1da07up",
      "media": {
        "alt": "Bag",
        "src": "https://optim-images.krea.ai/https---s-krea-ai-k3-landing-final-refs-numan-deco-ref-3-webp-512.webp",
        "naturalWidth": 412,
        "naturalHeight": 512
      },
      "radius": "4.32005px",
      "overflow": "clip",
      "objectFit": "cover",
      "aspectRatio": 1,
      "objectPosition": "50% 50%"
    }
  ],
  "bounds": {
    "top": 7396,
    "bottom": 8266,
    "pageHeight": 21224
  },
  "schema": "little-details-section-measurements-v1",
  "source": "saved DOM/CSS element and animation maps",
  "columns": [
    {
      "id": "ld-1374",
      "gap": "normal",
      "tag": "div",
      "rect": {
        "x": 64,
        "y": 8102,
        "width": 403,
        "height": 60
      },
      "role": "tablist",
      "label": "Art Deco barGallery giantCouture",
      "columns": null,
      "display": "inline-flex",
      "direction": "row"
    }
  ],
  "spacing": {
    "gapsPx": [],
    "representativeContentWidthsPx": [
      1312,
      403,
      400,
      251
    ]
  },
  "coverage": {
    "cards": 2,
    "media": 8,
    "animations": 2,
    "elementsInSection": 20
  },
  "surfaces": {
    "radii": [
      "4.32005px",
      "8.64009px",
      "999px"
    ],
    "borders": [
      "4px solid rgba(255, 255, 255, 0.9)"
    ],
    "shadows": [
      "rgba(0, 0, 0, 0.7) 0px 17.2802px 34.5604px -14.4002px"
    ]
  },
  "animations": [
    {
      "id": "animation-39",
      "fill": "both",
      "easing": "linear",
      "target": {
        "id": "ld-1342",
        "tag": "img",
        "rect": {
          "x": 0,
          "y": 7456,
          "width": 1440,
          "height": 810
        },
        "role": null,
        "label": "empty svelte-1da07up"
      },
      "delayMs": 0,
      "direction": "normal",
      "keyframes": [
        {
          "easing": "ease",
          "offset": 0,
          "opacity": "0",
          "composite": "auto",
          "computedOffset": 0
        },
        {
          "easing": "ease",
          "offset": 1,
          "opacity": "1",
          "composite": "replace",
          "computedOffset": 1
        }
      ],
      "playState": "finished",
      "durationMs": 700,
      "iterations": 1,
      "playbackRate": 1
    },
    {
      "id": "animation-40",
      "fill": "none",
      "easing": "linear",
      "target": {
        "id": "ld-1343",
        "tag": "svg",
        "rect": {
          "x": 0,
          "y": 7456,
          "width": 1440,
          "height": 810
        },
        "role": null,
        "label": "svg"
      },
      "delayMs": 0,
      "direction": "normal",
      "keyframes": [
        {
          "easing": "linear",
          "offset": 0,
          "composite": "replace",
          "computedOffset": 0,
          "strokeDashoffset": "0px"
        },
        {
          "easing": "linear",
          "offset": 1,
          "composite": "auto",
          "computedOffset": 1,
          "strokeDashoffset": "-36px"
        }
      ],
      "playState": "running",
      "durationMs": 1600,
      "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: Left-copy / right-media asymmetric layout; Pill-shaped tab selector for switching examples; Chip-labeled reference images annotated onto a prompt string
- Dependencies: Custom dotted silhouette illustration asset; Specific gradient background artwork; Bespoke photo assets for reference chips and backdrop image
- Guidance: Keep the copy/media split, tab selector, and annotated-prompt chip pattern; the gradient backdrop and silhouette art must be redrawn or replaced with new custom illustration to preserve the section's distinct identity rather than defaulting to a plain photo.

### 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 features section inspired by the design evidence titled “Multiple reference image upload UI”.

Purpose: A dark-themed section illustrating the use of multiple reference images, featuring a glowing gradient background and a dotted outline silhouette.

Structure: Left-aligned text with a large graphical area on the right showing floating UI elements over a gradient.. Source layout label: Left-aligned text with a large graphical area on the right showing floating UI elements over a gradient.. Preserve the documented hierarchy and relationships; exact measurements were not deterministically captured.

Visual signature to preserve at the pattern level: Warm glowing background with a dotted human outline and floating prompt boxes.

Components: image card, floating UI, dotted line, heading, badge.

Style direction: gradient, illustrative, minimal.

Observed crop: 1440×870px (1.655: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-23","size":"16px","count":2,"family":"Suisse Intl","traits":"Regular","weight":"500","contexts":[{"tag":"p","top":7792,"text":"Point at people, products, places and styles by number. Krea 3 puts them in one picture.","property":"font"},{"tag":"p","top":12671,"text":"Send a photo, then a voice note. Krea 3 answers with the edit before you finish your next thought.","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.4px","letterSpacing":"normal"} {"id":"font-25","size":"13.7px","count":1,"family":"Suisse Intl","traits":"Regular","weight":"400","contexts":[{"tag":"p","top":7979,"text":"Seat the woman from at a candlelit Art Deco bar in the knit sweater from , with the silver bag from ","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":"21.2px","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-10","hex":"#FFFFFF","alpha":0.8509803921568627,"count":5,"contexts":[{"tag":"svg","top":7456,"text":"","property":"svg-stroke"},{"tag":"path","top":7651,"text":"","property":"svg-stroke"},{"tag":"figcaption","top":7706,"text":"IMG_5547.jpg","property":"text"}],"cssValue":"rgba(255, 255, 255, 0.85)"} {"id":"color-12","hex":"#0B0B0B","alpha":1,"count":1,"contexts":[{"tag":"section","top":7456,"text":"Prompt Seat the woman from at a candlelit Art Deco bar in the knit sweater from , with the silver ba","property":"background"}],"cssValue":"rgb(11, 11, 11)"} {"id":"color-35","hex":"#131613","alpha":0.7215686274509804,"count":1,"contexts":[{"tag":"div","top":7963,"text":"Prompt Seat the woman from at a candlelit Art Deco bar in the knit sweater from , with the silver ba","property":"background"}],"cssValue":"rgba(20, 22, 20, 0.72)"} {"id":"color-39","hex":"#FFFFFF","alpha":0.0784313725490196,"count":1,"contexts":[{"tag":"div","top":8102,"text":"Art Deco barGallery giantCouture","property":"background"}],"cssValue":"rgba(255, 255, 255, 0.08)"} {"id":"color-42","hex":"#FFFFFF","alpha":0.5490196078431373,"count":2,"contexts":[{"tag":"span","top":7942,"text":"Prompt","property":"text"},{"tag":"p","top":7792,"text":"Point at people, products, places and styles by number. Krea 3 puts them in one picture.","property":"text"}],"cssValue":"rgba(255, 255, 255, 0.55)"} {"id":"color-43","hex":"#FFFFFF","alpha":0.6,"count":4,"contexts":[{"tag":"button","top":8108,"text":"Gallery giant","property":"text"},{"tag":"span","top":16509,"text":"precision*","property":"text"}],"cssValue":"rgba(255, 255, 255, 0.6)"}

Exact section measurements from the saved element map: root {"rect":{"x":0,"y":7456,"width":1440,"height":810},"padding":{"top":"0px","left":"0px","right":"0px","bottom":"0px"},"gap":"normal","columns":null,"overflow":"hidden"}; spacing {"gapsPx":[],"representativeContentWidthsPx":[1312,403,400,251]}; surfaces {"radii":["4.32005px","8.64009px","999px"],"borders":["4px solid rgba(255, 255, 255, 0.9)"],"shadows":["rgba(0, 0, 0, 0.7) 0px 17.2802px 34.5604px -14.4002px"]}; media [{"tag":"img","rect":{"x":0,"y":7456,"width":1440,"height":810},"aspectRatio":1.8,"objectFit":"cover","objectPosition":"50% 50%","radius":"0px"},{"tag":"svg","rect":{"x":0,"y":7456,"width":1440,"height":810},"aspectRatio":1.8,"objectFit":"fill","objectPosition":"50% 50%","radius":"0px"},{"tag":"img","rect":{"x":1293,"y":7629,"width":124,"height":147},"aspectRatio":0.8,"objectFit":"cover","objectPosition":"50% 50%","radius":"8.64009px"},{"tag":"img","rect":{"x":845,"y":7565,"width":122,"height":146},"aspectRatio":0.8,"objectFit":"cover","objectPosition":"50% 50%","radius":"8.64009px"}]; animations [{"target":{"id":"ld-1342","tag":"img","rect":{"x":0,"y":7456,"width":1440,"height":810},"role":null,"label":"empty svelte-1da07up"},"delayMs":0,"durationMs":700,"easing":"linear","keyframes":[{"easing":"ease","offset":0,"opacity":"0","composite":"auto","computedOffset":0},{"easing":"ease","offset":1,"opacity":"1","composite":"replace","computedOffset":1}]},{"target":{"id":"ld-1343","tag":"svg","rect":{"x":0,"y":7456,"width":1440,"height":810},"role":null,"label":"svg"},"delayMs":0,"durationMs":1600,"easing":"linear","keyframes":[{"easing":"linear","offset":0,"composite":"replace","computedOffset":0,"strokeDashoffset":"0px"},{"easing":"linear","offset":1,"composite":"auto","computedOffset":1,"strokeDashoffset":"-36px"}]}]

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

Transfer these principles: Left-copy / right-media asymmetric layout; Pill-shaped tab selector for switching examples; Chip-labeled reference images annotated onto a prompt string.

Dependencies: Custom dotted silhouette illustration asset; Specific gradient background artwork; Bespoke photo assets for reference chips and backdrop image.

Adaptation guidance: Keep the copy/media split, tab selector, and annotated-prompt chip pattern; the gradient backdrop and silhouette art must be redrawn or replaced with new custom illustration to preserve the section's distinct identity rather than defaulting to a plain photo.

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