# Color swatch selection demo

Schema: Design Details SECTION.md v3.2
Website: Krea
Source: https://www.krea.ai/krea-3
Source section IDs: dc8836ee-7261-408a-9a7c-866d50bea912
Status: AI analysed; vocabulary promotion is automated

## Builder's note

What makes it work:
- The top-down order is easy to follow: a large two-line heading, a short muted paragraph, then the swatch row, then the image row. Each step sits close to the one before it.
- The 72px heading with tight tracking and a gray tone on the hex code stands out against the 20px muted paragraph. The size jump alone sets the hierarchy.
- Small pill swatches sit directly above images that show each colour on a plush character. This makes the claim concrete, and the row running off the right edge invites scrolling.

What a screenshot can't show:
- The recording showed no motion, so any swatch-to-image change on selection is unconfirmed.
- Measured type: heading 72px, weight 500, line height 70.6px, letter spacing -2.2px; body 20px on 28px line height. Gaps are tight, 6–8px, with 60px section padding top and bottom.

Borrow: Put the control directly above the results it changes, and let a row of examples run past the edge to suggest more.
Leave alone: Do not copy the plush characters, the white-room imagery or the Suisse Intl typeface; a neutral free grotesque such as Inter would work instead.

## Classification

- Type: features
- Layout: Heading and text on top, followed by color swatch selectors and a horizontal row of variant images.
- Styles: minimal, colourful, playful
- Confidence: 100%

## Purpose and structure

A feature block showing how hex codes translate to precise colors on 3D characters, using a multi-column image layout.

Visual signature: Four furry 3D characters in a white room with color selection swatches above them.

## Components

- heading
- color swatch
- radio button
- image card
- grid

## Typography

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

## Functional palette

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

## Motion evidence

- No section-specific authored motion was established.

## Section quality

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

- Typography: 62 — Large, confident two-line display heading with a tonal gray treatment on the hex code creates a clean hierarchy against a smaller muted-gray supporting paragraph; consistent with the site's type scale but not unusual in execution. Next tier: No typographic device beyond size/weight/color contrast distinguishes this from countless similar feature headers; nothing structural is unique to this section.
- Composition: 64 — Clear top-down reading order: heading, description, swatch selector row, then a horizontal filmstrip of images that bleeds off the right edge, implying continued scroll/browse. Swatch pills align tightly under the heading, and image captions ('Plush', '911') sit cleanly below each frame. Next tier: The layout is a standard pattern (heading+copy+tabs+image row) seen across many AI/product demo pages; no unexpected spatial relationship or tension elevates it past familiar competence.
- Motion: not_assessed — No motion_moments or animation data were supplied, and Gemini did not provide timestamped visible changes for this crop. Next tier: Cannot assess without concrete timestamped evidence of swatch-triggered image transitions or hover/active states.
- Content: 66 — The content (hex-driven color swatches recoloring distinct 3D plush characters alongside unrelated photographic comparisons like a car and fan) is well-matched to the feature's claim and demonstrates the capability concretely rather than abstractly. Next tier: The link between the swatch row and the specific plush image is somewhat implicit from a static crop; the mixed photo set (car, fan) breaks thematic cohesion with the plush characters, diluting focus needed for a stronger content integration score.
- Originality: 55 — Pill-shaped color-swatch selectors with radio semantics are a well-worn pattern from product configurators and design tools; the plush character imagery is distinctive, but the underlying UI convention is largely unoriginal. Next tier: No novel interaction, framing device, or compositional twist elevates this beyond a familiar swatch-selector feature block.
- Adaptability: 58 — Structure (heading, description, radiogroup of swatches, horizontal image row) is clearly separable from the specific plush/car/fan imagery and brand colors, per the deterministic DOM evidence (radiogroup, flex row, image cards). Next tier: Reliance on custom photographic/3D assets per swatch state and pill shadow styling ties visual polish closely to bespoke content, limiting plug-and-play reuse without new imagery.

Strengths:
- Strong, legible heading hierarchy immediately communicates the feature's purpose
- Swatch selector row with distinct pill colors gives an intuitive visual preview of choices
- Horizontal image filmstrip implies more content exists beyond the viewport, encouraging exploration

Weaknesses:
- Swatch-and-tab UI pattern is generic and commonly seen in product configurators
- Mixed subject matter (plush toys, car, fan) in the image row slightly undercuts thematic focus
- No visible motion evidence provided, so the core interactive promise (hex-to-color matching) can't be verified as compelling in motion
- Composition follows a very standard feature-section template without a distinguishing spatial idea

Why it does not reach the next tier: The section executes a familiar heading-plus-swatch-plus-image-row pattern cleanly and with good production value, but it lacks a distinctive structural, typographic, or interactive idea that would make it memorable or hard to substitute; it reads as competent demonstration of a feature rather than a crafted moment.

## Adaptation guidance

- Effort: Medium
- Guidance: Reuse the heading/description/swatch-row skeleton and radiogroup semantics directly; swap in new color options and photographic/render assets matched to the new brand's product, keeping the pill button and image-row structure intact.

What transfers:
- Heading + supporting paragraph layout
- Pill-shaped radio swatch selector pattern
- Horizontal scrolling image row with captions

Dependencies:
- Custom 3D plush character renders per color variant
- Photographic comparison assets (car, fan, etc.)
- Exact pill shadow/border styling tokens

## 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%)
- No animation or interaction timestamps were provided, so motion quality is unverifiable
- Full image row extends beyond the crop, so total composition breadth is uncertain
- Exact color/typography values beyond listed tokens are not confirmed for this crop

## 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: horizontal sequence
- Layout: Heading and text on top, followed by color swatch selectors and a horizontal row of variant images.
- Styles: minimal, colourful, playful
- Components: heading, color swatch, radio button, image card, grid
- Purpose: A feature block showing how hex codes translate to precise colors on 3D characters, using a multi-column image layout.
- Visual signature: Four furry 3D characters in a white room with color selection swatches above them.
- Place on the page: 8 of 22, after Feature collection (`krea-ai:C07`), before Feature collection (`krea-ai:C09`)

### Crop and composition

- Crop: 1440×940px; aspect ratio 1.532:1
- Page bounds: 6456–7396px of 21224px
- Guidance: Preserve the sense of continuation with a visible next item, progress cue, or directional control.

### Exact typography evidence

The sectionScale values were measured inside this crop. The siteRoles values explain how those faces function across the source website; they must not replace section measurements.

```json
{
  "sectionScale": [
    {
      "role": "section heading",
      "family": "Krea 3 Suisse Intl",
      "stack": "\"Krea 3 Suisse Intl\", sans-serif",
      "size": "72px",
      "weight": "500",
      "lineHeight": "70.6px",
      "letterSpacing": "-2.2px",
      "sample": "Ranked #4 on Arena.",
      "element": "h2",
      "occurrences": 12,
      "sourceId": "font-1"
    },
    {
      "role": "card/subheading",
      "family": "Suisse Intl",
      "stack": "\"Suisse Intl\", ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"",
      "size": "20px",
      "weight": "500",
      "lineHeight": "28px",
      "letterSpacing": "normal",
      "sample": "Krea 3 Ultra is #4 on Arena's Multi-Image Edit leaderboard, with an Arena score of 1,435. Bars use t",
      "element": "p",
      "occurrences": 5,
      "sourceId": "font-19"
    }
  ],
  "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": "#F2F2F0",
      "cssValue": "rgb(242, 242, 240)",
      "alpha": 1,
      "appliedAs": [
        "background",
        "control-background"
      ],
      "occurrences": 39,
      "sourceId": "color-2"
    },
    {
      "value": "#000000",
      "cssValue": "rgba(0, 0, 0, 0.38)",
      "alpha": 0.3803921568627451,
      "appliedAs": [
        "text"
      ],
      "occurrences": 3,
      "sourceId": "color-21"
    },
    {
      "value": "#000000",
      "cssValue": "rgba(0, 0, 0, 0.04)",
      "alpha": 0.0392156862745098,
      "appliedAs": [
        "control-background"
      ],
      "occurrences": 5,
      "sourceId": "color-41"
    }
  ],
  "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×939px; block; 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: 923, 797, 621, 451, 413, 347, 283px.
- Layout containers: 1; cards/surfaces: 0; media elements: 6; browser animations: 0.

#### Container, grid, and spacing

```json
{
  "viewport": {
    "width": 1440,
    "captureBounds": {
      "top": 6456,
      "bottom": 7396,
      "pageHeight": 21224
    }
  },
  "container": {
    "size": "1440×939px",
    "position": "x 0px, y 6457px",
    "display": "block",
    "positionMode": "static",
    "padding": {
      "top": "60px",
      "left": "0px",
      "right": "0px",
      "bottom": "60px"
    },
    "margin": {
      "top": "0px",
      "left": "0px",
      "right": "0px",
      "bottom": "0px"
    },
    "gap": "normal",
    "columns": "not captured",
    "background": "rgb(255, 255, 255)",
    "radius": "0px",
    "border": "0px solid rgb(229, 229, 229)",
    "shadow": "none",
    "overflow": "visible"
  },
  "spacing": {
    "observedGapsPx": [
      6,
      8
    ],
    "representativeContentWidthsPx": [
      923,
      797,
      621,
      451,
      413,
      347,
      283
    ]
  },
  "columns": [
    {
      "element": "div · Original Sky blue Sunflower Sand Forest Lilac",
      "size": "621×40px",
      "position": "x 257px, y 6706px",
      "display": "flex",
      "template": "not captured",
      "direction": "row",
      "gap": "6px"
    }
  ]
}
```

#### Cards and surfaces

```json
{
  "cards": [],
  "surfaces": {
    "radii": [
      "999px"
    ],
    "borders": [],
    "shadows": [
      "rgba(0, 0, 0, 0.12) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.25) 0px 6px 18px -8px",
      "rgba(0, 0, 0, 0.08) 0px 0px 0px 0.5px inset"
    ]
  }
}
```

#### Media treatment

```json
[
  {
    "element": "img · svelte-15qgv2t",
    "size": "923×518px",
    "position": "x 64px, y 6774px",
    "aspectRatio": 1.8,
    "objectFit": "cover",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "clip",
    "source": "https://s.krea.ai/k3-landing-final/hexf-5-original.webp"
  },
  {
    "element": "img · svelte-15qgv2t",
    "size": "923×518px",
    "position": "x 64px, y 6774px",
    "aspectRatio": 1.8,
    "objectFit": "cover",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "clip",
    "source": "https://s.krea.ai/k3-landing-final/hexf-5-original.webp"
  },
  {
    "element": "img · svelte-15qgv2t",
    "size": "413×518px",
    "position": "x 1003px, y 6774px",
    "aspectRatio": 0.8,
    "objectFit": "cover",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "clip",
    "source": "https://s.krea.ai/k3-landing-final/hexf-6-original.webp"
  },
  {
    "element": "img · svelte-15qgv2t",
    "size": "413×518px",
    "position": "x 1003px, y 6774px",
    "aspectRatio": 0.8,
    "objectFit": "cover",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "clip",
    "source": "https://s.krea.ai/k3-landing-final/hexf-6-original.webp"
  },
  {
    "element": "img · svelte-15qgv2t",
    "size": "413×518px",
    "position": "x 1433px, y 6774px",
    "aspectRatio": 0.8,
    "objectFit": "cover",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "clip",
    "source": "https://s.krea.ai/k3-landing-final/hexf-7-original.webp"
  },
  {
    "element": "img · svelte-15qgv2t",
    "size": "413×518px",
    "position": "x 1433px, y 6774px",
    "aspectRatio": 0.8,
    "objectFit": "cover",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "clip",
    "source": "https://s.krea.ai/k3-landing-final/hexf-7-original.webp"
  }
]
```

#### Browser-exposed animation parameters

```json
[]
```

### Measured geometry, surfaces, media, and animation

These raw values come from the saved element map and computed styles. Empty arrays mean the fact was not captured; they are not permission to invent source values.

```json
{
  "root": {
    "id": "ld-1236",
    "gap": "normal",
    "tag": "section",
    "rect": {
      "x": 0,
      "y": 6457,
      "width": 1440,
      "height": 939
    },
    "role": null,
    "label": "Prompt in #FFC12EGet that exact color Name a hex code and Krea 3 matches it on the product, and only",
    "border": "0px solid rgb(229, 229, 229)",
    "margin": {
      "top": "0px",
      "left": "0px",
      "right": "0px",
      "bottom": "0px"
    },
    "radius": "0px",
    "shadow": "none",
    "columns": null,
    "display": "block",
    "padding": {
      "top": "60px",
      "left": "0px",
      "right": "0px",
      "bottom": "60px"
    },
    "overflow": "visible",
    "position": "static",
    "background": "rgb(255, 255, 255)"
  },
  "cards": [],
  "media": [
    {
      "id": "ld-1278",
      "tag": "img",
      "rect": {
        "x": 64,
        "y": 6774,
        "width": 923,
        "height": 518
      },
      "role": null,
      "label": "svelte-15qgv2t",
      "media": {
        "alt": "",
        "src": "https://s.krea.ai/k3-landing-final/hexf-5-original.webp",
        "naturalWidth": 1400,
        "naturalHeight": 786
      },
      "radius": "0px",
      "overflow": "clip",
      "objectFit": "cover",
      "aspectRatio": 1.8,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-1279",
      "tag": "img",
      "rect": {
        "x": 64,
        "y": 6774,
        "width": 923,
        "height": 518
      },
      "role": null,
      "label": "svelte-15qgv2t",
      "media": {
        "alt": "Plush",
        "src": "https://s.krea.ai/k3-landing-final/hexf-5-original.webp",
        "naturalWidth": 1400,
        "naturalHeight": 786
      },
      "radius": "0px",
      "overflow": "clip",
      "objectFit": "cover",
      "aspectRatio": 1.8,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-1285",
      "tag": "img",
      "rect": {
        "x": 1003,
        "y": 6774,
        "width": 413,
        "height": 518
      },
      "role": null,
      "label": "svelte-15qgv2t",
      "media": {
        "alt": "",
        "src": "https://s.krea.ai/k3-landing-final/hexf-6-original.webp",
        "naturalWidth": 1116,
        "naturalHeight": 1400
      },
      "radius": "0px",
      "overflow": "clip",
      "objectFit": "cover",
      "aspectRatio": 0.8,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-1286",
      "tag": "img",
      "rect": {
        "x": 1003,
        "y": 6774,
        "width": 413,
        "height": 518
      },
      "role": null,
      "label": "svelte-15qgv2t",
      "media": {
        "alt": "911",
        "src": "https://s.krea.ai/k3-landing-final/hexf-6-original.webp",
        "naturalWidth": 1116,
        "naturalHeight": 1400
      },
      "radius": "0px",
      "overflow": "clip",
      "objectFit": "cover",
      "aspectRatio": 0.8,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-1292",
      "tag": "img",
      "rect": {
        "x": 1433,
        "y": 6774,
        "width": 413,
        "height": 518
      },
      "role": null,
      "label": "svelte-15qgv2t",
      "media": {
        "alt": "",
        "src": "https://s.krea.ai/k3-landing-final/hexf-7-original.webp",
        "naturalWidth": 1116,
        "naturalHeight": 1400
      },
      "radius": "0px",
      "overflow": "clip",
      "objectFit": "cover",
      "aspectRatio": 0.8,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-1293",
      "tag": "img",
      "rect": {
        "x": 1433,
        "y": 6774,
        "width": 413,
        "height": 518
      },
      "role": null,
      "label": "svelte-15qgv2t",
      "media": {
        "alt": "Desk fan",
        "src": "https://s.krea.ai/k3-landing-final/hexf-7-original.webp",
        "naturalWidth": 1116,
        "naturalHeight": 1400
      },
      "radius": "0px",
      "overflow": "clip",
      "objectFit": "cover",
      "aspectRatio": 0.8,
      "objectPosition": "50% 50%"
    }
  ],
  "bounds": {
    "top": 6456,
    "bottom": 7396,
    "pageHeight": 21224
  },
  "schema": "little-details-section-measurements-v1",
  "source": "saved DOM/CSS element and animation maps",
  "columns": [
    {
      "id": "ld-1256",
      "gap": "6px",
      "tag": "div",
      "rect": {
        "x": 257,
        "y": 6706,
        "width": 621,
        "height": 40
      },
      "role": "radiogroup",
      "label": "Original Sky blue Sunflower Sand Forest Lilac",
      "columns": null,
      "display": "flex",
      "direction": "row"
    }
  ],
  "spacing": {
    "gapsPx": [
      6,
      8
    ],
    "representativeContentWidthsPx": [
      923,
      797,
      621,
      451,
      413,
      347,
      283
    ]
  },
  "coverage": {
    "cards": 0,
    "media": 6,
    "animations": 0,
    "elementsInSection": 28
  },
  "surfaces": {
    "radii": [
      "999px"
    ],
    "borders": [],
    "shadows": [
      "rgba(0, 0, 0, 0.12) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.25) 0px 6px 18px -8px",
      "rgba(0, 0, 0, 0.08) 0px 0px 0px 0.5px inset"
    ]
  },
  "animations": [],
  "capturedAt": "2026-10-31T06:25:43.715Z",
  "limitations": [
    "Values describe the captured desktop viewport and may change at other breakpoints.",
    "Transforms, sticky layers, and virtualized content can make the inferred section root approximate.",
    "Animations include browser-exposed Web Animations API state; CSS or script motion that was inactive at capture time may be absent."
  ],
  "viewportWidth": 1440
}
```

### Observed motion

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: Heading + supporting paragraph layout; Pill-shaped radio swatch selector pattern; Horizontal scrolling image row with captions
- Dependencies: Custom 3D plush character renders per color variant; Photographic comparison assets (car, fan, etc.); Exact pill shadow/border styling tokens
- Guidance: Reuse the heading/description/swatch-row skeleton and radiogroup semantics directly; swap in new color options and photographic/render assets matched to the new brand's product, keeping the pill button and image-row structure intact.

### 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 “Color swatch selection demo”.

Purpose: A feature block showing how hex codes translate to precise colors on 3D characters, using a multi-column image layout.

Structure: horizontal sequence. Source layout label: Heading and text on top, followed by color swatch selectors and a horizontal row of variant images.. Preserve the sense of continuation with a visible next item, progress cue, or directional control.

Visual signature to preserve at the pattern level: Four furry 3D characters in a white room with color selection swatches above them.

Components: heading, color swatch, radio button, image card, grid.

Style direction: minimal, colourful, playful.

Observed crop: 1440×940px (1.532: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-1","size":"72px","count":12,"family":"Krea 3 Suisse Intl","traits":"Regular","weight":"500","contexts":[{"tag":"h2","top":3099,"text":"Ranked #4 on Arena.","property":"font"},{"tag":"h2","top":6517,"text":"Prompt in #FFC12EGet that exact color","property":"font"},{"tag":"span","top":6505,"text":"#FFC12E","property":"font"}],"fontStack":"\"Krea 3 Suisse Intl\", sans-serif","lineHeight":"70.6px","letterSpacing":"-2.2px"} {"id":"font-19","size":"20px","count":5,"family":"Suisse Intl","traits":"Regular","weight":"500","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":"font"},{"tag":"p","top":6597,"text":"Name a hex code and Krea 3 matches it on the product, and only on the product. Pick a swatch.","property":"font"},{"tag":"p","top":11669,"text":"Swap the product, the photo or the brand and keep the layout and type. Hold any piece to see what it","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":"28px","letterSpacing":"normal"}

Colors measured inside this section: {"id":"color-2","hex":"#F2F2F0","alpha":1,"count":39,"contexts":[{"tag":"div","top":6706,"text":"Original photo Make it #7EC8F2#FFC12E#D9C3A3#2F5D46#B9A3E8 Original photo","property":"background"},{"tag":"button","top":11815,"text":"","property":"control-background"}],"cssValue":"rgb(242, 242, 240)"} {"id":"color-21","hex":"#000000","alpha":0.3803921568627451,"count":3,"contexts":[{"tag":"span","top":6505,"text":"#FFC12E","property":"text"}],"cssValue":"rgba(0, 0, 0, 0.38)"} {"id":"color-41","hex":"#000000","alpha":0.0392156862745098,"count":5,"contexts":[{"tag":"button","top":6706,"text":"Sky blue","property":"control-background"}],"cssValue":"rgba(0, 0, 0, 0.04)"}

Exact section measurements from the saved element map: root {"rect":{"x":0,"y":6457,"width":1440,"height":939},"padding":{"top":"60px","left":"0px","right":"0px","bottom":"60px"},"gap":"normal","columns":null,"overflow":"visible"}; spacing {"gapsPx":[6,8],"representativeContentWidthsPx":[923,797,621,451,413,347,283]}; surfaces {"radii":["999px"],"borders":[],"shadows":["rgba(0, 0, 0, 0.12) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.25) 0px 6px 18px -8px","rgba(0, 0, 0, 0.08) 0px 0px 0px 0.5px inset"]}; media [{"tag":"img","rect":{"x":64,"y":6774,"width":923,"height":518},"aspectRatio":1.8,"objectFit":"cover","objectPosition":"50% 50%","radius":"0px"},{"tag":"img","rect":{"x":64,"y":6774,"width":923,"height":518},"aspectRatio":1.8,"objectFit":"cover","objectPosition":"50% 50%","radius":"0px"},{"tag":"img","rect":{"x":1003,"y":6774,"width":413,"height":518},"aspectRatio":0.8,"objectFit":"cover","objectPosition":"50% 50%","radius":"0px"},{"tag":"img","rect":{"x":1003,"y":6774,"width":413,"height":518},"aspectRatio":0.8,"objectFit":"cover","objectPosition":"50% 50%","radius":"0px"}]

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

Transfer these principles: Heading + supporting paragraph layout; Pill-shaped radio swatch selector pattern; Horizontal scrolling image row with captions.

Dependencies: Custom 3D plush character renders per color variant; Photographic comparison assets (car, fan, etc.); Exact pill shadow/border styling tokens.

Adaptation guidance: Reuse the heading/description/swatch-row skeleton and radiogroup semantics directly; swap in new color options and photographic/render assets matched to the new brand's product, keeping the pill button and image-row structure intact.

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