# Integration tool icon row

Schema: Design Details SECTION.md v3.2
Website: Krea
Source: https://www.krea.ai/krea-3
Source section IDs: 8ef259bd-5c63-4579-89f4-b4e6d8bb2374
Status: AI analysed; vocabulary promotion is automated

## Builder's note

What makes it work:
- A centered heading sits above a single pill tray, so the integration message reads in one glance with generous whitespace around it.
- Square, recognizable app icons (Photoshop, Blender, Premiere) prove the claim without extra copy, and a tight 12px gap keeps them reading as one set.
- Black type on a white canvas with a soft grey pill border keeps the section quiet, so the logos' own colours do the work.

What a screenshot can't show:
- The heading measures 76px at weight 500, with 74.5px line height and -2.3px letter spacing, which is tighter than it looks in a still.
- Section padding is 60px top and bottom and 16px at the sides, with content widths of about 786px and 604px. The recording showed no motion.

Borrow: Let real, familiar logos in a simple rounded tray carry the message, with one tightly set headline as the only text.
Leave alone: Don't copy Krea's Suisse-style display face, its exact tight tracking, or its specific app icon lineup; use a free neutral grotesque like Inter instead.

## Classification

- Type: logo-cloud
- Layout: Centered heading followed by a centered, single-row pill container housing multiple square icons.
- Styles: minimal, corporate
- Confidence: 100%

## Purpose and structure

A simple minimal section displaying a row of recognizable creative software icons inside a pill-shaped container to indicate integrations.

Visual signature: Centered text above a white pill shape containing small software logos like Photoshop and Premiere.

## Components

- heading
- logo
- icon
- pill container

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

- Typography: 58 — Large, tightly-tracked heading (100px, -3px letter spacing) in the site's consistent display font creates clean hierarchy, but it's a single plain centered headline with no secondary text, pairing, or typographic nuance beyond scale. Next tier: Add a supporting subline or weight/size contrast to show typographic range beyond one oversized heading.
- Composition: 56 — Simple centered stack of heading over a pill-shaped icon tray is tidy and balanced, with generous whitespace, but the layout is a stock logo-cloud pattern with minimal spatial invention or asymmetry. Next tier: Introduce a more distinctive spatial arrangement or layering so it reads as more than a centered headline plus a row of icons.
- Motion: not_assessed — No motion data, animation evidence, or timestamped behavior was supplied for this section. Next tier: Provide timestamped visible motion evidence (e.g., hover states, entrance animation) to assess this axis.
- Content: 55 — Icons are real recognizable software logos (Photoshop, Illustrator, Blender, ChatGPT) tied directly to the section's integration message, giving clear purpose, but content is just a generic logo list with no differentiating copy or context. Next tier: Add contextual detail per tool (e.g., short label of integration type) to make content feel curated rather than a generic logo strip.
- Originality: 42 — Pill-shaped tray holding square icon tiles is a common, easily-replicated integration-row pattern seen across many SaaS sites; nothing here departs from that convention. Next tier: Would need a distinctive interaction, grouping logic, or visual treatment unique to the brand to move past a generic pattern.
- Adaptability: 62 — Structure is simple and modular: heading + pill container + repeating icon tiles with explicit rect/radius/padding values, making it straightforward to reskin or swap icon sets while preserving layout logic. Next tier: Lacks any state variation (hover/active) data to confirm how interactive behavior would be separated from the visual skin.

Strengths:
- Clear, legible hierarchy with a bold centered headline establishing section purpose at a glance
- Clean execution of a pill-shaped tray with consistent icon sizing, spacing, and corner radius
- Recognizable third-party logos directly reinforce the integration message

Weaknesses:
- Highly generic logo-cloud pattern with no distinguishing visual idea
- No secondary copy or detail to add depth beyond a headline and icon row
- No motion or interactive evidence supplied, limiting assessment of dynamism
- Composition is a very standard centered-stack layout seen across countless SaaS pages

Why it does not reach the next tier: The section executes a familiar logo-cloud/integration-row pattern cleanly and tidily, but it lacks any distinctive compositional, typographic, or interactive idea that would make it memorable or hard to substitute; it reads as competent boilerplate rather than a considered design moment.

## Adaptation guidance

- Effort: Low
- Guidance: Swap icon assets and heading copy while preserving the pill-tray proportions, icon tile size (72px with ~43px logo), and spacing; no complex interaction logic needs to be rebuilt.

What transfers:
- Centered heading over pill-shaped icon tray structure
- Repeating square icon-tile pattern with consistent radius and spacing
- Simple grid/flex layout for logo row

Dependencies:
- Specific third-party software logo assets
- Exact pill container radius and shadow values
- Brand-specific heading copy

## 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 motion/animation data was provided, so dynamic behavior could not be assessed
- No hover/interactive state evidence was available
- Evaluation based on a single desktop viewport crop only

## 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: logo-cloud
- Source type: logo-cloud
- Structure: centered single-column
- Layout: Centered heading followed by a centered, single-row pill container housing multiple square icons.
- Styles: minimal, corporate
- Components: heading, logo, icon, pill container
- Purpose: A simple minimal section displaying a row of recognizable creative software icons inside a pill-shaped container to indicate integrations.
- Visual signature: Centered text above a white pill shape containing small software logos like Photoshop and Premiere.
- Place on the page: 18 of 22, after Comparison (`krea-ai:C17`), before Form (`krea-ai:C19`)

### Crop and composition

- Crop: 1440×453px; aspect ratio 3.179:1
- Page bounds: 16677–17130px 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": "76px",
      "weight": "500",
      "lineHeight": "74.5px",
      "letterSpacing": "-2.3px",
      "sample": "Krea 3, inside your toolsPhotoshop to Blender",
      "element": "h2",
      "occurrences": 1,
      "sourceId": "font-10"
    }
  ],
  "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.3)",
      "alpha": 0.30196078431372547,
      "appliedAs": [
        "control-background"
      ],
      "occurrences": 7,
      "sourceId": "color-34"
    }
  ],
  "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×453px; flex; padding {"top":"60px","left":"16px","right":"16px","bottom":"60px"}; gap normal; background rgb(255, 255, 255); radius 0px.
- Observed gaps: 12px.
- Representative content widths: 786, 604px.
- Layout containers: 8; cards/surfaces: 1; media elements: 7; browser animations: 0.

#### Container, grid, and spacing

```json
{
  "viewport": {
    "width": 1440,
    "captureBounds": {
      "top": 16677,
      "bottom": 17130,
      "pageHeight": 21224
    }
  },
  "container": {
    "size": "1440×453px",
    "position": "x 0px, y 16677px",
    "display": "flex",
    "positionMode": "relative",
    "padding": {
      "top": "60px",
      "left": "16px",
      "right": "16px",
      "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": [
      12
    ],
    "representativeContentWidthsPx": [
      786,
      604
    ]
  },
  "columns": [
    {
      "element": "a · Photoshop",
      "size": "72×72px",
      "position": "x 432px, y 16986px",
      "display": "grid",
      "template": "72px",
      "direction": "row",
      "gap": "normal"
    },
    {
      "element": "a · Illustrator",
      "size": "72×72px",
      "position": "x 516px, y 16986px",
      "display": "grid",
      "template": "72px",
      "direction": "row",
      "gap": "normal"
    },
    {
      "element": "a · After Effects",
      "size": "72×72px",
      "position": "x 600px, y 16986px",
      "display": "grid",
      "template": "72px",
      "direction": "row",
      "gap": "normal"
    },
    {
      "element": "a · Premiere Pro",
      "size": "72×72px",
      "position": "x 684px, y 16986px",
      "display": "grid",
      "template": "72px",
      "direction": "row",
      "gap": "normal"
    },
    {
      "element": "a · DaVinci Resolve",
      "size": "72×72px",
      "position": "x 768px, y 16986px",
      "display": "grid",
      "template": "72px",
      "direction": "row",
      "gap": "normal"
    },
    {
      "element": "a · Blender",
      "size": "72×72px",
      "position": "x 852px, y 16986px",
      "display": "grid",
      "template": "72px",
      "direction": "row",
      "gap": "normal"
    },
    {
      "element": "a · ChatGPT",
      "size": "72×72px",
      "position": "x 936px, y 16986px",
      "display": "grid",
      "template": "72px",
      "direction": "row",
      "gap": "normal"
    },
    {
      "element": "section · Krea 3, inside your toolsPhotoshop to Blender Photoshop Illustrator After Effects Premiere Pro DaVin",
      "size": "1440×453px",
      "position": "x 0px, y 16677px",
      "display": "flex",
      "template": "not captured",
      "direction": "column",
      "gap": "normal"
    }
  ]
}
```

#### Cards and surfaces

```json
{
  "cards": [
    {
      "element": "nav · Photoshop Illustrator After Effects Premiere Pro DaVinci Resolve Blender ChatGPT",
      "size": "604×96px",
      "position": "x 418px, y 16974px",
      "padding": [
        "12px",
        "14px",
        "12px",
        "14px"
      ],
      "radius": "30px",
      "border": "0px solid rgb(229, 229, 229)",
      "shadow": "none",
      "background": "rgba(0, 0, 0, 0)"
    }
  ],
  "surfaces": {
    "radii": [
      "30px",
      "22%",
      "18%",
      "999px"
    ],
    "borders": [],
    "shadows": [
      "rgba(255, 255, 255, 0.85) 0px 1px 0px 0px inset, rgba(255, 255, 255, 0.35) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px"
    ]
  }
}
```

#### Media treatment

```json
[
  {
    "element": "img · size-10 svelte-tixg1t",
    "size": "43×43px",
    "position": "x 446px, y 17000px",
    "aspectRatio": 1,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "18%",
    "overflow": "clip",
    "source": "https://s.krea.ai/plugins/logos/photoshop.svg"
  },
  {
    "element": "img · size-10 svelte-tixg1t",
    "size": "43×43px",
    "position": "x 530px, y 17000px",
    "aspectRatio": 1,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "18%",
    "overflow": "clip",
    "source": "https://www.krea.ai/plugins/logos/illustrator.svg"
  },
  {
    "element": "img · size-10 svelte-tixg1t",
    "size": "43×43px",
    "position": "x 614px, y 17000px",
    "aspectRatio": 1,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "18%",
    "overflow": "clip",
    "source": "https://s.krea.ai/plugins/logos/after-effects.svg"
  },
  {
    "element": "img · size-10 svelte-tixg1t",
    "size": "43×43px",
    "position": "x 698px, y 17000px",
    "aspectRatio": 1,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "18%",
    "overflow": "clip",
    "source": "https://s.krea.ai/plugins/logos/premiere-pro-20260917.svg"
  },
  {
    "element": "img · size-10 svelte-tixg1t",
    "size": "43×43px",
    "position": "x 782px, y 17000px",
    "aspectRatio": 1,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "18%",
    "overflow": "clip",
    "source": "https://s.krea.ai/plugins/logos/davinci-resolve.svg"
  },
  {
    "element": "img · size-10 svelte-tixg1t",
    "size": "43×43px",
    "position": "x 866px, y 17000px",
    "aspectRatio": 1,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "18%",
    "overflow": "clip",
    "source": "https://s.krea.ai/plugins/logos/blender.svg"
  },
  {
    "element": "img · size-10 svelte-tixg1t",
    "size": "43×43px",
    "position": "x 950px, y 17000px",
    "aspectRatio": 1,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "18%",
    "overflow": "clip",
    "source": "https://optim-images.krea.ai/https---s-krea-ai-ChatGPT-OpenAI-Chrome-Icon-png-256.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-2709",
    "gap": "normal",
    "tag": "section",
    "rect": {
      "x": 0,
      "y": 16677,
      "width": 1440,
      "height": 453
    },
    "role": null,
    "label": "Krea 3, inside your toolsPhotoshop to Blender Photoshop Illustrator After Effects Premiere Pro DaVin",
    "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": "16px",
      "right": "16px",
      "bottom": "60px"
    },
    "overflow": "visible",
    "position": "relative",
    "background": "rgb(255, 255, 255)"
  },
  "cards": [
    {
      "id": "ld-2717",
      "tag": "nav",
      "rect": {
        "x": 418,
        "y": 16974,
        "width": 604,
        "height": 96
      },
      "role": null,
      "label": "Photoshop Illustrator After Effects Premiere Pro DaVinci Resolve Blender ChatGPT",
      "border": "0px solid rgb(229, 229, 229)",
      "radius": "30px",
      "shadow": "none",
      "padding": [
        "12px",
        "14px",
        "12px",
        "14px"
      ],
      "background": "rgba(0, 0, 0, 0)"
    }
  ],
  "media": [
    {
      "id": "ld-2719",
      "tag": "img",
      "rect": {
        "x": 446,
        "y": 17000,
        "width": 43,
        "height": 43
      },
      "role": null,
      "label": "size-10 svelte-tixg1t",
      "media": {
        "alt": "",
        "src": "https://s.krea.ai/plugins/logos/photoshop.svg",
        "naturalWidth": 154,
        "naturalHeight": 150
      },
      "radius": "18%",
      "overflow": "clip",
      "objectFit": "fill",
      "aspectRatio": 1,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-2722",
      "tag": "img",
      "rect": {
        "x": 530,
        "y": 17000,
        "width": 43,
        "height": 43
      },
      "role": null,
      "label": "size-10 svelte-tixg1t",
      "media": {
        "alt": "",
        "src": "https://www.krea.ai/plugins/logos/illustrator.svg",
        "naturalWidth": 154,
        "naturalHeight": 150
      },
      "radius": "18%",
      "overflow": "clip",
      "objectFit": "fill",
      "aspectRatio": 1,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-2725",
      "tag": "img",
      "rect": {
        "x": 614,
        "y": 17000,
        "width": 43,
        "height": 43
      },
      "role": null,
      "label": "size-10 svelte-tixg1t",
      "media": {
        "alt": "",
        "src": "https://s.krea.ai/plugins/logos/after-effects.svg",
        "naturalWidth": 154,
        "naturalHeight": 150
      },
      "radius": "18%",
      "overflow": "clip",
      "objectFit": "fill",
      "aspectRatio": 1,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-2728",
      "tag": "img",
      "rect": {
        "x": 698,
        "y": 17000,
        "width": 43,
        "height": 43
      },
      "role": null,
      "label": "size-10 svelte-tixg1t",
      "media": {
        "alt": "",
        "src": "https://s.krea.ai/plugins/logos/premiere-pro-20260917.svg",
        "naturalWidth": 154,
        "naturalHeight": 150
      },
      "radius": "18%",
      "overflow": "clip",
      "objectFit": "fill",
      "aspectRatio": 1,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-2731",
      "tag": "img",
      "rect": {
        "x": 782,
        "y": 17000,
        "width": 43,
        "height": 43
      },
      "role": null,
      "label": "size-10 svelte-tixg1t",
      "media": {
        "alt": "",
        "src": "https://s.krea.ai/plugins/logos/davinci-resolve.svg",
        "naturalWidth": 65,
        "naturalHeight": 65
      },
      "radius": "18%",
      "overflow": "clip",
      "objectFit": "fill",
      "aspectRatio": 1,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-2734",
      "tag": "img",
      "rect": {
        "x": 866,
        "y": 17000,
        "width": 43,
        "height": 43
      },
      "role": null,
      "label": "size-10 svelte-tixg1t",
      "media": {
        "alt": "",
        "src": "https://s.krea.ai/plugins/logos/blender.svg",
        "naturalWidth": 183,
        "naturalHeight": 150
      },
      "radius": "18%",
      "overflow": "clip",
      "objectFit": "fill",
      "aspectRatio": 1,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-2737",
      "tag": "img",
      "rect": {
        "x": 950,
        "y": 17000,
        "width": 43,
        "height": 43
      },
      "role": null,
      "label": "size-10 svelte-tixg1t",
      "media": {
        "alt": "",
        "src": "https://optim-images.krea.ai/https---s-krea-ai-ChatGPT-OpenAI-Chrome-Icon-png-256.webp",
        "naturalWidth": 256,
        "naturalHeight": 256
      },
      "radius": "18%",
      "overflow": "clip",
      "objectFit": "fill",
      "aspectRatio": 1,
      "objectPosition": "50% 50%"
    }
  ],
  "bounds": {
    "top": 16677,
    "bottom": 17130,
    "pageHeight": 21224
  },
  "schema": "little-details-section-measurements-v1",
  "source": "saved DOM/CSS element and animation maps",
  "columns": [
    {
      "id": "ld-2718",
      "gap": "normal",
      "tag": "a",
      "rect": {
        "x": 432,
        "y": 16986,
        "width": 72,
        "height": 72
      },
      "role": null,
      "label": "Photoshop",
      "columns": "72px",
      "display": "grid",
      "direction": "row"
    },
    {
      "id": "ld-2721",
      "gap": "normal",
      "tag": "a",
      "rect": {
        "x": 516,
        "y": 16986,
        "width": 72,
        "height": 72
      },
      "role": null,
      "label": "Illustrator",
      "columns": "72px",
      "display": "grid",
      "direction": "row"
    },
    {
      "id": "ld-2724",
      "gap": "normal",
      "tag": "a",
      "rect": {
        "x": 600,
        "y": 16986,
        "width": 72,
        "height": 72
      },
      "role": null,
      "label": "After Effects",
      "columns": "72px",
      "display": "grid",
      "direction": "row"
    },
    {
      "id": "ld-2727",
      "gap": "normal",
      "tag": "a",
      "rect": {
        "x": 684,
        "y": 16986,
        "width": 72,
        "height": 72
      },
      "role": null,
      "label": "Premiere Pro",
      "columns": "72px",
      "display": "grid",
      "direction": "row"
    },
    {
      "id": "ld-2730",
      "gap": "normal",
      "tag": "a",
      "rect": {
        "x": 768,
        "y": 16986,
        "width": 72,
        "height": 72
      },
      "role": null,
      "label": "DaVinci Resolve",
      "columns": "72px",
      "display": "grid",
      "direction": "row"
    },
    {
      "id": "ld-2733",
      "gap": "normal",
      "tag": "a",
      "rect": {
        "x": 852,
        "y": 16986,
        "width": 72,
        "height": 72
      },
      "role": null,
      "label": "Blender",
      "columns": "72px",
      "display": "grid",
      "direction": "row"
    },
    {
      "id": "ld-2736",
      "gap": "normal",
      "tag": "a",
      "rect": {
        "x": 936,
        "y": 16986,
        "width": 72,
        "height": 72
      },
      "role": null,
      "label": "ChatGPT",
      "columns": "72px",
      "display": "grid",
      "direction": "row"
    },
    {
      "id": "ld-2709",
      "gap": "normal",
      "tag": "section",
      "rect": {
        "x": 0,
        "y": 16677,
        "width": 1440,
        "height": 453
      },
      "role": null,
      "label": "Krea 3, inside your toolsPhotoshop to Blender Photoshop Illustrator After Effects Premiere Pro DaVin",
      "columns": null,
      "display": "flex",
      "direction": "column"
    }
  ],
  "spacing": {
    "gapsPx": [
      12
    ],
    "representativeContentWidthsPx": [
      786,
      604
    ]
  },
  "coverage": {
    "cards": 1,
    "media": 7,
    "animations": 0,
    "elementsInSection": 24
  },
  "surfaces": {
    "radii": [
      "30px",
      "22%",
      "18%",
      "999px"
    ],
    "borders": [],
    "shadows": [
      "rgba(255, 255, 255, 0.85) 0px 1px 0px 0px inset, rgba(255, 255, 255, 0.35) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px"
    ]
  },
  "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: low
- What transfers: Centered heading over pill-shaped icon tray structure; Repeating square icon-tile pattern with consistent radius and spacing; Simple grid/flex layout for logo row
- Dependencies: Specific third-party software logo assets; Exact pill container radius and shadow values; Brand-specific heading copy
- Guidance: Swap icon assets and heading copy while preserving the pill-tray proportions, icon tile size (72px with ~43px logo), and spacing; no complex interaction logic needs to be rebuilt.

### 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 logo-cloud section inspired by the design evidence titled “Integration tool icon row”.

Purpose: A simple minimal section displaying a row of recognizable creative software icons inside a pill-shaped container to indicate integrations.

Structure: centered single-column. Source layout label: Centered heading followed by a centered, single-row pill container housing multiple square icons.. Use a narrow central reading axis and deliberate scale contrast rather than adding unnecessary side content.

Visual signature to preserve at the pattern level: Centered text above a white pill shape containing small software logos like Photoshop and Premiere.

Components: heading, logo, icon, pill container.

Style direction: minimal, corporate.

Observed crop: 1440×453px (3.179: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-10","size":"76px","count":1,"family":"Krea 3 Suisse Intl","traits":"Regular","weight":"500","contexts":[{"tag":"h2","top":16737,"text":"Krea 3, inside your toolsPhotoshop to Blender","property":"font"}],"fontStack":"\"Krea 3 Suisse Intl\", sans-serif","lineHeight":"74.5px","letterSpacing":"-2.3px"}

Colors measured inside this section: {"id":"color-34","hex":"#FFFFFF","alpha":0.30196078431372547,"count":7,"contexts":[{"tag":"a","top":16986,"text":"Photoshop","property":"control-background"}],"cssValue":"rgba(255, 255, 255, 0.3)"}

Exact section measurements from the saved element map: root {"rect":{"x":0,"y":16677,"width":1440,"height":453},"padding":{"top":"60px","left":"16px","right":"16px","bottom":"60px"},"gap":"normal","columns":null,"overflow":"visible"}; spacing {"gapsPx":[12],"representativeContentWidthsPx":[786,604]}; surfaces {"radii":["30px","22%","18%","999px"],"borders":[],"shadows":["rgba(255, 255, 255, 0.85) 0px 1px 0px 0px inset, rgba(255, 255, 255, 0.35) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px"]}; media [{"tag":"img","rect":{"x":446,"y":17000,"width":43,"height":43},"aspectRatio":1,"objectFit":"fill","objectPosition":"50% 50%","radius":"18%"},{"tag":"img","rect":{"x":530,"y":17000,"width":43,"height":43},"aspectRatio":1,"objectFit":"fill","objectPosition":"50% 50%","radius":"18%"},{"tag":"img","rect":{"x":614,"y":17000,"width":43,"height":43},"aspectRatio":1,"objectFit":"fill","objectPosition":"50% 50%","radius":"18%"},{"tag":"img","rect":{"x":698,"y":17000,"width":43,"height":43},"aspectRatio":1,"objectFit":"fill","objectPosition":"50% 50%","radius":"18%"}]

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

Transfer these principles: Centered heading over pill-shaped icon tray structure; Repeating square icon-tile pattern with consistent radius and spacing; Simple grid/flex layout for logo row.

Dependencies: Specific third-party software logo assets; Exact pill container radius and shadow values; Brand-specific heading copy.

Adaptation guidance: Swap icon assets and heading copy while preserving the pill-tray proportions, icon tile size (72px with ~43px logo), and spacing; no complex interaction logic needs to be rebuilt.

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