# Sales contact form with benefits

Schema: Design Details SECTION.md v3.2
Website: Krea
Source: https://www.krea.ai/krea-3
Source section IDs: 4faad253-15d5-47c7-8582-ad6cdb8ef129
Status: AI analysed; vocabulary promotion is automated

## Builder's note

What makes it work:
- One large rounded card holds both columns, so the pitch and the form read as a single offer, with benefits and trust logos on the left and the form on the right.
- The 56px medium-weight headline with tight tracking sits well above muted subcopy and small labels, which makes the hierarchy clear at a glance.
- Content widths of 598px for the list and 420px for the form, with small 9–10px gaps, keep the columns balanced and the fields tightly grouped.

What a screenshot can't show:
- The recording shows only a scroll past the section from 29 to 33 seconds, with no specific animation or state change.
- The headline is 56px with a 54.9px line height and -1.7px letter spacing, and the small 12px uppercase-style label has 1px tracking.

Borrow: Pair a persuasive column of benefits and proof with the form inside one shared container, so the reason to enter details sits right next to the fields.
Leave alone: Don't copy Krea's grey card with white form panel, black pill button, or Suisse Intl type; use a similar neutral grotesque and your own palette and logo treatment.

## Classification

- Type: forms
- Layout: Two-column layout encased in a large rounded card; text, list, and logos on the left, standard input form on the right.
- Styles: minimal, soft, corporate
- Confidence: 100%

## Purpose and structure

A comprehensive sales inquiry block featuring a multi-field form on the right and value propositions with trusted logos on the left.

Visual signature: Large grey rounded rectangle containing text and logos on the left and a white form block on the right.

## Components

- form
- input field
- dropdown
- button
- list
- logo

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

- 29.0–33.0s — Scrolling past the 'What would Krea 3 change...' contact form. (90% confidence)

## Section quality

Overall: 55.59/100 (Competent)
Scored coverage: 85%

- Typography: 58 — Clean, readable hierarchy between the bold black headline, muted subcopy, and form labels; consistent with the site's type system but functionally standard for a B2B contact form with no distinctive treatment within this crop. Next tier: No typographic moment here is distinctive beyond competent hierarchy; sizes and weights do all the work expected of a generic form.
- Composition: 62 — Two-column split inside one large rounded card is well balanced: value props/logos on the left, form on the right, with clear visual containment and consistent gutters/padding (598px list column, 420px content width). Next tier: Layout is a standard SaaS split-card pattern; no asymmetry, scale contrast, or unexpected grid move that would push it into memorable territory.
- Motion: inconclusive — Gemini only logged a generic scroll-past timestamp (29-33s) with no specific visible animation, transform, or state change described. Next tier: Need timestamped evidence of an actual in-section animation (e.g., field focus states, card entrance, logo reveal) to score motion.
- Content: 55 — Benefit checklist, trust logos, and form fields integrate cleanly into the card with logical grouping and matched spacing, serving a clear lead-gen purpose. Next tier: Content exists purely as expected form fields and generic trust signals; no additional data visualization, personalization, or copy device elevates it past a standard contact block.
- Originality: 40 — This is a very common 'logos+benefits left, form right' SaaS sales pattern seen across countless B2B sites, with placeholder-gray inputs and a pill black button. Next tier: Nothing here is hard to substitute; swapping company name and copy would make this indistinguishable from thousands of other contact sections.
- Adaptability: 60 — Structure (two-column grid, list component, form fields, logo row) is clearly separable from skin (gray canvas, white card, pill button, specific radii/colors) per the deterministic tokens provided. Next tier: Reliance on specific brand logos and copy means some content substitution work is needed before reuse, though layout and component roles transfer easily.

Strengths:
- Clear visual separation between persuasive content and the actionable form within a single contained card
- Consistent generous padding and alignment between list items, logos, and form fields
- Legible hierarchy from headline to microcopy to input labels

Weaknesses:
- Highly generic B2B contact-form layout with no distinguishing visual idea
- Placeholder-style gray inputs and flat dropdowns lack any refined micro-interaction cues in the evidence
- Trust logo row is small and visually an afterthought compared to form prominence
- No motion evidence beyond a scroll pass, suggesting the section may be entirely static

Why it does not reach the next tier: The section executes a widely used SaaS split-card contact pattern cleanly but introduces no unique structural, typographic, or interactive idea; every element (checklist, logos, form) is interchangeable with countless competitor forms, capping it at a competent/good level rather than strong or memorable.

## Adaptation guidance

- Effort: Low
- Guidance: Reskin by swapping logos, copy, and accent color while keeping the grid structure, field grouping, and card containment intact; no complex interaction logic to rebuild.

What transfers:
- Two-column card layout with benefits/logos on one side and form on the other
- Checklist-with-icon pattern for feature bullets
- Rounded card containment separating section from page background
- Form field grouping and label/placeholder structure

Dependencies:
- Specific partner/client logos shown
- Exact copy of headline and benefit bullets
- Brand color for checkmarks and button

## 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 detail beyond a generic scroll timestamp, so animation quality is unknown
- Cannot verify hover/focus states or validation behavior from a static crop
- Exact font rendering and spacing nuances beyond listed tokens are unconfirmed

## 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: forms
- Source type: forms
- Structure: two-column
- Layout: Two-column layout encased in a large rounded card; text, list, and logos on the left, standard input form on the right.
- Styles: minimal, soft, corporate
- Components: form, input field, dropdown, button, list, logo
- Purpose: A comprehensive sales inquiry block featuring a multi-field form on the right and value propositions with trusted logos on the left.
- Visual signature: Large grey rounded rectangle containing text and logos on the left and a white form block on the right.
- Place on the page: 19 of 22, after Logo strip (`krea-ai:C18`), before Call to action (`krea-ai:C20`)

### Crop and composition

- Crop: 1440×857px; aspect ratio 1.68:1
- Page bounds: 17130–17987px of 21224px
- Guidance: Preserve the visual relationship between the two columns; adapt their ratio to the new content instead of copying the source dimensions.

### 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": "56px",
      "weight": "500",
      "lineHeight": "54.9px",
      "letterSpacing": "-1.7px",
      "sample": "What would Krea 3 change in your image workflow?",
      "element": "h2",
      "occurrences": 1,
      "sourceId": "font-11"
    },
    {
      "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": "12px",
      "weight": "500",
      "lineHeight": "18px",
      "letterSpacing": "1px",
      "sample": "Trusted by ambitious creative teams",
      "element": "p",
      "occurrences": 1,
      "sourceId": "font-26"
    }
  ],
  "siteRoles": [
    {
      "role": "display",
      "size": "132px",
      "family": "Krea 3 Suisse Intl",
      "source": "computed",
      "traits": "Regular",
      "weight": "500",
      "evidence": "font-34: computed CSS at 1440×1000; AI role: 132px Krea 3 Suisse Intl, tightly tracked (-2.6px), used for massive impact numbers like '10x Faster'.",
      "sampleId": "font-34",
      "confidence": 1,
      "lineHeight": "116.2px",
      "letterSpacing": "-2.6px"
    },
    {
      "role": "heading",
      "size": "100px",
      "family": "Krea 3 Suisse Intl",
      "source": "computed",
      "traits": "Regular",
      "weight": "500",
      "evidence": "font-8: computed CSS at 1440×1000; AI role: 100px Krea 3 Suisse Intl (-3px letter spacing) used for major section headlines like 'One model Every brief'.",
      "sampleId": "font-8",
      "confidence": 1,
      "lineHeight": "96px",
      "letterSpacing": "-3px"
    },
    {
      "role": "body",
      "size": "20px",
      "family": "Suisse Intl",
      "source": "computed",
      "traits": "Regular",
      "weight": "500",
      "evidence": "font-19: computed CSS at 1440×1000; AI role: 20px Suisse Intl used for standard descriptive paragraph text throughout the page.",
      "sampleId": "font-19",
      "confidence": 0.95,
      "lineHeight": "28px",
      "letterSpacing": "normal"
    }
  ]
}
```

### Exact color evidence

The section samples record where each computed value was used. Functional roles come from the website-level classifier and remain separate.

```json
{
  "sectionUsage": [
    {
      "value": "#F4F4F2",
      "cssValue": "rgb(244, 244, 242)",
      "alpha": 1,
      "appliedAs": [
        "background",
        "control-background"
      ],
      "occurrences": 2,
      "sourceId": "color-8"
    }
  ],
  "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×857px; block; padding {"top":"60px","left":"16px","right":"16px","bottom":"12px"}; gap normal; background rgba(0, 0, 0, 0); radius 0px.
- Observed gaps: 9, 10px.
- Representative content widths: 614, 598, 420px.
- Layout containers: 5; cards/surfaces: 0; media elements: 11; browser animations: 0.

#### Container, grid, and spacing

```json
{
  "viewport": {
    "width": 1440,
    "captureBounds": {
      "top": 17130,
      "bottom": 17987,
      "pageHeight": 21224
    }
  },
  "container": {
    "size": "1440×857px",
    "position": "x 0px, y 17130px",
    "display": "block",
    "positionMode": "relative",
    "padding": {
      "top": "60px",
      "left": "16px",
      "right": "16px",
      "bottom": "12px"
    },
    "margin": {
      "top": "0px",
      "left": "0px",
      "right": "0px",
      "bottom": "0px"
    },
    "gap": "normal",
    "columns": "not captured",
    "background": "rgba(0, 0, 0, 0)",
    "radius": "0px",
    "border": "0px solid rgb(229, 229, 229)",
    "shadow": "none",
    "overflow": "visible"
  },
  "spacing": {
    "observedGapsPx": [
      9,
      10
    ],
    "representativeContentWidthsPx": [
      614,
      598,
      420
    ]
  },
  "columns": [
    {
      "element": "ul · 50+ image, video and 3D modelsCustom brand modelsSSO and IP indemnificationOne workspace, one bill",
      "size": "598×123px",
      "position": "x 86px, y 17544px",
      "display": "grid",
      "template": "598px",
      "direction": "row",
      "gap": "9px"
    },
    {
      "element": "li · 50+ image, video and 3D models",
      "size": "598×24px",
      "position": "x 86px, y 17544px",
      "display": "flex",
      "template": "not captured",
      "direction": "row",
      "gap": "10px"
    },
    {
      "element": "li · Custom brand models",
      "size": "598×24px",
      "position": "x 86px, y 17577px",
      "display": "flex",
      "template": "not captured",
      "direction": "row",
      "gap": "10px"
    },
    {
      "element": "li · SSO and IP indemnification",
      "size": "598×24px",
      "position": "x 86px, y 17610px",
      "display": "flex",
      "template": "not captured",
      "direction": "row",
      "gap": "10px"
    },
    {
      "element": "li · One workspace, one bill",
      "size": "598×24px",
      "position": "x 86px, y 17643px",
      "display": "flex",
      "template": "not captured",
      "direction": "row",
      "gap": "10px"
    }
  ]
}
```

#### Cards and surfaces

```json
{
  "cards": [],
  "surfaces": {
    "radii": [],
    "borders": [],
    "shadows": []
  }
}
```

#### Media treatment

```json
[
  {
    "element": "svg · svg",
    "size": "128×24px",
    "position": "x 324px, y 17847px",
    "aspectRatio": 5.3,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "hidden",
    "source": "source not captured"
  },
  {
    "element": "svg · svg",
    "size": "128×24px",
    "position": "x 1152px, y 17847px",
    "aspectRatio": 5.3,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "hidden",
    "source": "source not captured"
  },
  {
    "element": "svg · svg",
    "size": "81×24px",
    "position": "x 703px, y 17847px",
    "aspectRatio": 3.4,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "hidden",
    "source": "source not captured"
  },
  {
    "element": "svg · svg",
    "size": "75×24px",
    "position": "x -10px, y 17847px",
    "aspectRatio": 3.1,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "hidden",
    "source": "source not captured"
  },
  {
    "element": "svg · svg",
    "size": "75×24px",
    "position": "x 818px, y 17847px",
    "aspectRatio": 3.1,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "hidden",
    "source": "source not captured"
  },
  {
    "element": "svg · svg",
    "size": "67×24px",
    "position": "x 99px, y 17847px",
    "aspectRatio": 2.8,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "hidden",
    "source": "source not captured"
  },
  {
    "element": "svg · svg",
    "size": "67×24px",
    "position": "x 926px, y 17847px",
    "aspectRatio": 2.8,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "hidden",
    "source": "source not captured"
  },
  {
    "element": "svg · svg",
    "size": "18×18px",
    "position": "x 86px, y 17547px",
    "aspectRatio": 1,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "hidden",
    "source": "source not captured"
  },
  {
    "element": "svg · svg",
    "size": "18×18px",
    "position": "x 86px, y 17580px",
    "aspectRatio": 1,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "hidden",
    "source": "source not captured"
  },
  {
    "element": "svg · svg",
    "size": "18×18px",
    "position": "x 86px, y 17613px",
    "aspectRatio": 1,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "hidden",
    "source": "source not captured"
  },
  {
    "element": "svg · svg",
    "size": "18×18px",
    "position": "x 86px, y 17646px",
    "aspectRatio": 1,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "hidden",
    "source": "source not captured"
  }
]
```

#### 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-2740",
    "gap": "normal",
    "tag": "section",
    "rect": {
      "x": 0,
      "y": 17130,
      "width": 1440,
      "height": 857
    },
    "role": null,
    "label": "What would Krea 3 change in your image workflow? Tell us what you edit and how much. We compare qual",
    "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": "16px",
      "right": "16px",
      "bottom": "12px"
    },
    "overflow": "visible",
    "position": "relative",
    "background": "rgba(0, 0, 0, 0)"
  },
  "cards": [],
  "media": [
    {
      "id": "ld-2796",
      "tag": "svg",
      "rect": {
        "x": 324,
        "y": 17847,
        "width": 128,
        "height": 24
      },
      "role": "img",
      "label": "svg",
      "media": null,
      "radius": "0px",
      "overflow": "hidden",
      "objectFit": "fill",
      "aspectRatio": 5.3,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-2860",
      "tag": "svg",
      "rect": {
        "x": 1152,
        "y": 17847,
        "width": 128,
        "height": 24
      },
      "role": "img",
      "label": "svg",
      "media": null,
      "radius": "0px",
      "overflow": "hidden",
      "objectFit": "fill",
      "aspectRatio": 5.3,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-2818",
      "tag": "svg",
      "rect": {
        "x": 703,
        "y": 17847,
        "width": 81,
        "height": 24
      },
      "role": "img",
      "label": "svg",
      "media": null,
      "radius": "0px",
      "overflow": "hidden",
      "objectFit": "fill",
      "aspectRatio": 3.4,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-2765",
      "tag": "svg",
      "rect": {
        "x": -10,
        "y": 17847,
        "width": 75,
        "height": 24
      },
      "role": "img",
      "label": "svg",
      "media": null,
      "radius": "0px",
      "overflow": "hidden",
      "objectFit": "fill",
      "aspectRatio": 3.1,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-2829",
      "tag": "svg",
      "rect": {
        "x": 818,
        "y": 17847,
        "width": 75,
        "height": 24
      },
      "role": "img",
      "label": "svg",
      "media": null,
      "radius": "0px",
      "overflow": "hidden",
      "objectFit": "fill",
      "aspectRatio": 3.1,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-2784",
      "tag": "svg",
      "rect": {
        "x": 99,
        "y": 17847,
        "width": 67,
        "height": 24
      },
      "role": "img",
      "label": "svg",
      "media": null,
      "radius": "0px",
      "overflow": "hidden",
      "objectFit": "fill",
      "aspectRatio": 2.8,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-2848",
      "tag": "svg",
      "rect": {
        "x": 926,
        "y": 17847,
        "width": 67,
        "height": 24
      },
      "role": "img",
      "label": "svg",
      "media": null,
      "radius": "0px",
      "overflow": "hidden",
      "objectFit": "fill",
      "aspectRatio": 2.8,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-2748",
      "tag": "svg",
      "rect": {
        "x": 86,
        "y": 17547,
        "width": 18,
        "height": 18
      },
      "role": null,
      "label": "svg",
      "media": null,
      "radius": "0px",
      "overflow": "hidden",
      "objectFit": "fill",
      "aspectRatio": 1,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-2751",
      "tag": "svg",
      "rect": {
        "x": 86,
        "y": 17580,
        "width": 18,
        "height": 18
      },
      "role": null,
      "label": "svg",
      "media": null,
      "radius": "0px",
      "overflow": "hidden",
      "objectFit": "fill",
      "aspectRatio": 1,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-2754",
      "tag": "svg",
      "rect": {
        "x": 86,
        "y": 17613,
        "width": 18,
        "height": 18
      },
      "role": null,
      "label": "svg",
      "media": null,
      "radius": "0px",
      "overflow": "hidden",
      "objectFit": "fill",
      "aspectRatio": 1,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-2757",
      "tag": "svg",
      "rect": {
        "x": 86,
        "y": 17646,
        "width": 18,
        "height": 18
      },
      "role": null,
      "label": "svg",
      "media": null,
      "radius": "0px",
      "overflow": "hidden",
      "objectFit": "fill",
      "aspectRatio": 1,
      "objectPosition": "50% 50%"
    }
  ],
  "bounds": {
    "top": 17130,
    "bottom": 17987,
    "pageHeight": 21224
  },
  "schema": "little-details-section-measurements-v1",
  "source": "saved DOM/CSS element and animation maps",
  "columns": [
    {
      "id": "ld-2746",
      "gap": "9px",
      "tag": "ul",
      "rect": {
        "x": 86,
        "y": 17544,
        "width": 598,
        "height": 123
      },
      "role": null,
      "label": "50+ image, video and 3D modelsCustom brand modelsSSO and IP indemnificationOne workspace, one bill",
      "columns": "598px",
      "display": "grid",
      "direction": "row"
    },
    {
      "id": "ld-2747",
      "gap": "10px",
      "tag": "li",
      "rect": {
        "x": 86,
        "y": 17544,
        "width": 598,
        "height": 24
      },
      "role": null,
      "label": "50+ image, video and 3D models",
      "columns": null,
      "display": "flex",
      "direction": "row"
    },
    {
      "id": "ld-2750",
      "gap": "10px",
      "tag": "li",
      "rect": {
        "x": 86,
        "y": 17577,
        "width": 598,
        "height": 24
      },
      "role": null,
      "label": "Custom brand models",
      "columns": null,
      "display": "flex",
      "direction": "row"
    },
    {
      "id": "ld-2753",
      "gap": "10px",
      "tag": "li",
      "rect": {
        "x": 86,
        "y": 17610,
        "width": 598,
        "height": 24
      },
      "role": null,
      "label": "SSO and IP indemnification",
      "columns": null,
      "display": "flex",
      "direction": "row"
    },
    {
      "id": "ld-2756",
      "gap": "10px",
      "tag": "li",
      "rect": {
        "x": 86,
        "y": 17643,
        "width": 598,
        "height": 24
      },
      "role": null,
      "label": "One workspace, one bill",
      "columns": null,
      "display": "flex",
      "direction": "row"
    }
  ],
  "spacing": {
    "gapsPx": [
      9,
      10
    ],
    "representativeContentWidthsPx": [
      614,
      598,
      420
    ]
  },
  "coverage": {
    "cards": 0,
    "media": 11,
    "animations": 0,
    "elementsInSection": 38
  },
  "surfaces": {
    "radii": [],
    "borders": [],
    "shadows": []
  },
  "animations": [],
  "capturedAt": "2026-10-31T06:25:43.715Z",
  "limitations": [
    "Values describe the captured desktop viewport and may change at other breakpoints.",
    "Transforms, sticky layers, and virtualized content can make the inferred section root approximate.",
    "Animations include browser-exposed Web Animations API state; CSS or script motion that was inactive at capture time may be absent."
  ],
  "viewportWidth": 1440
}
```

### Observed motion

1. **scroll** — Scrolling past the 'What would Krea 3 change...' contact form. (29s–33s; 90% confidence). Recreate the interaction principle with project-appropriate timing and easing; the evidence does not guarantee source easing values.

The browser animation records above are deterministic parameters captured from active browser animations. The timestamped observations describe what Gemini saw in the video. Treat them as complementary evidence. When either source is empty or they conflict, state the uncertainty instead of inventing timing or easing.

### Responsive contract

- Measured viewport: 1440px wide.
- Mobile/tablet values: not measured by this section evidence unless a separate capture is explicitly listed.
- Preserve hierarchy and sequence; collapse simultaneous columns only where needed, maintain media aspect ratios, and verify touch targets and text wrapping at target breakpoints.

### Structure versus visual skin

- Preserve: content hierarchy, layout relationships, section rhythm, interaction purpose.
- Adapt: brand colors, font family, copy, imagery, icons, decorative details.
- Rule: Preserve the observed design logic while creating original branding, copy, assets, and implementation details.

### Adaptation and dependencies

- Effort: low
- What transfers: Two-column card layout with benefits/logos on one side and form on the other; Checklist-with-icon pattern for feature bullets; Rounded card containment separating section from page background; Form field grouping and label/placeholder structure
- Dependencies: Specific partner/client logos shown; Exact copy of headline and benefit bullets; Brand color for checkmarks and button
- Guidance: Reskin by swapping logos, copy, and accent color while keeping the grid structure, field grouping, and card containment intact; no complex interaction logic to rebuild.

### Evidence readiness

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


### Agent implementation prompt

Create an original forms section inspired by the design evidence titled “Sales contact form with benefits”.

Purpose: A comprehensive sales inquiry block featuring a multi-field form on the right and value propositions with trusted logos on the left.

Structure: two-column. Source layout label: Two-column layout encased in a large rounded card; text, list, and logos on the left, standard input form on the right.. Preserve the visual relationship between the two columns; adapt their ratio to the new content instead of copying the source dimensions.

Visual signature to preserve at the pattern level: Large grey rounded rectangle containing text and logos on the left and a white form block on the right.

Components: form, input field, dropdown, button, list, logo.

Style direction: minimal, soft, corporate.

Observed crop: 1440×857px (1.68: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-11","size":"56px","count":1,"family":"Krea 3 Suisse Intl","traits":"Regular","weight":"500","contexts":[{"tag":"h2","top":17278,"text":"What would Krea 3 change in your image workflow?","property":"font"}],"fontStack":"\"Krea 3 Suisse Intl\", sans-serif","lineHeight":"54.9px","letterSpacing":"-1.7px"} {"id":"font-26","size":"12px","count":1,"family":"Suisse Intl","traits":"uppercase","weight":"500","contexts":[{"tag":"p","top":17789,"text":"Trusted by ambitious creative teams","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":"18px","letterSpacing":"1px"}

Colors measured inside this section: {"id":"color-8","hex":"#F4F4F2","alpha":1,"count":2,"contexts":[{"tag":"div","top":17190,"text":"What would Krea 3 change in your image workflow? Tell us what you edit and how much. We compare qual","property":"background"},{"tag":"a","top":17987,"text":"Writing about Krea 3? Logos and wordmarkProduct imagesLaunch film Open the press kit","property":"control-background"}],"cssValue":"rgb(244, 244, 242)"}

Exact section measurements from the saved element map: root {"rect":{"x":0,"y":17130,"width":1440,"height":857},"padding":{"top":"60px","left":"16px","right":"16px","bottom":"12px"},"gap":"normal","columns":null,"overflow":"visible"}; spacing {"gapsPx":[9,10],"representativeContentWidthsPx":[614,598,420]}; surfaces {"radii":[],"borders":[],"shadows":[]}; media [{"tag":"svg","rect":{"x":324,"y":17847,"width":128,"height":24},"aspectRatio":5.3,"objectFit":"fill","objectPosition":"50% 50%","radius":"0px"},{"tag":"svg","rect":{"x":1152,"y":17847,"width":128,"height":24},"aspectRatio":5.3,"objectFit":"fill","objectPosition":"50% 50%","radius":"0px"},{"tag":"svg","rect":{"x":703,"y":17847,"width":81,"height":24},"aspectRatio":3.4,"objectFit":"fill","objectPosition":"50% 50%","radius":"0px"},{"tag":"svg","rect":{"x":-10,"y":17847,"width":75,"height":24},"aspectRatio":3.1,"objectFit":"fill","objectPosition":"50% 50%","radius":"0px"}]

Motion evidence: scroll: Scrolling past the 'What would Krea 3 change...' contact form. (90% confidence)

Transfer these principles: Two-column card layout with benefits/logos on one side and form on the other; Checklist-with-icon pattern for feature bullets; Rounded card containment separating section from page background; Form field grouping and label/placeholder structure.

Dependencies: Specific partner/client logos shown; Exact copy of headline and benefit bullets; Brand color for checkmarks and button.

Adaptation guidance: Reskin by swapping logos, copy, and accent color while keeping the grid structure, field grouping, and card containment intact; no complex interaction logic to rebuild.

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