# Pricing and speed benchmark tables

Schema: Design Details SECTION.md v3.2
Website: Krea
Source: https://www.krea.ai/krea-3
Source section IDs: 757c9f20-1ad7-420d-9f5f-961dd84a1c1c
Status: AI analysed; vocabulary promotion is automated

## Builder's note

What makes it work:
- Bar length maps directly to the number beside it, so the price and speed gaps read at a glance before any value is read.
- The featured row stands out with a white background and a blue bar against grey competitor bars, and a bold 24px stat callout above ties it to the headline claim.
- Two matching cards with identical row rhythm (6px, 10px and 16px gaps) and right-aligned values make the data easy to scan, and the partner logos sit below with generous space.

What a screenshot can't show:
- The recording showed no motion, so there is no evidence of bars animating in or of hover states.
- Stat callouts are measured at 24px, weight 500–600, with tight tracking of -0.5 to -0.7px; row labels run 16–22px. Section padding is 60px top and bottom, 16px at the sides.

Borrow: Pair every number with a proportional bar and give your own product one highlighted row in the accent colour, so the comparison proves the claim by itself.
Leave alone: Don't copy Krea's exact blue-and-grey bar palette, its Suisse Intl typeface (a neutral free grotesque like Inter would do) or its real competitor names and figures.

## Classification

- Type: comparison
- Layout: Two-column grid containing tabular data with inline horizontal bars, sitting above a row of partner logos.
- Styles: minimal, corporate, geometric
- Confidence: 100%

## Purpose and structure

Side-by-side comparison tables featuring horizontal bar charts to illustrate price and speed metrics against competitors.

Visual signature: Two side-by-side white cards with subtle grey and blue horizontal bar charts.

## Components

- table
- horizontal bar
- list
- icon
- 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

- No section-specific authored motion was established.

## Section quality

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

- Typography: 58 — Clean type hierarchy: bold stat callouts (price, 4x, time) in heavy black weight against muted gray labels, and consistent small-caps-style row labels in the comparison tables. Functional and legible but a fairly standard data-table typographic treatment with no distinctive display type in this crop. Next tier: No expressive or idiosyncratic typographic choice; numerals and labels use conventional sizing/weight contrast seen in countless SaaS comparison tables.
- Composition: 64 — Three-part layout (summary stat card, price table, speed table) nested inside one light-gray container with consistent row rhythm, right-aligned values, and a highlighted first row (white background, blue bar) that clearly signals the featured product. Horizontal bars scale proportionally to data, reinforcing the numeric story visually. Partner logo row below is cleanly separated with generous spacing. Next tier: Grid is a conventional three-column comparison-table pattern; no unusual proportion, layering, or asymmetry that would push it into a more memorable composition tier.
- Motion: not_assessed — No animation data or timestamped motion evidence supplied for this crop; animations array is empty. Next tier: Requires timestamped visible motion evidence to assess.
- Content: 62 — Content is tightly integrated with design: bar lengths map directly to the adjacent numeric values, the highlighted row ties back to the summary stat card, and real competitor names/numbers give the section credibility rather than placeholder content. Next tier: Content integration is functional/expected for a benchmark table; no unexpected annotation, source citation, or interactive affordance elevates it beyond standard data presentation.
- Originality: 55 — Horizontal bar-chart comparison tables with a highlighted brand row is a common competitive-benchmark pattern across SaaS marketing sites; nothing here departs from that convention. Next tier: Would need a distinctive visual device (e.g., unconventional bar shape, interactive toggle, unique data visualization) rather than a standard inline bar table to read as original.
- Adaptability: 60 — Structure is clearly modular: grid rows pairing a fixed-width bar track with a value, repeated identically across two tables, with deterministic spacing (6px/16px gaps) and consistent card background — easy to reskin or re-theme with different metrics. Next tier: Dependent on specific competitor data and brand color accents being swapped in; row/bar pattern itself is simple but not described with enough token-level detail (radius, shadow) to guarantee a fully turnkey port.

Strengths:
- Clear visual mapping between bar length and numeric value across two side-by-side metrics
- Highlighted first row with white background and blue bar effectively spotlights the featured product
- Consistent grid rhythm and alignment across both tables aids fast scanning

Weaknesses:
- Conventional bar-chart-in-table pattern common to competitor comparison sections
- No motion evidence provided to assess any reveal or interaction behavior
- Typography is purely functional with no distinctive display treatment in this crop

Why it does not reach the next tier: The section executes a familiar benchmark-table pattern cleanly and legibly, but lacks any structural or visual idea that would make it feel hard to substitute; it reads as a well-built but conventional data-comparison module.

## Adaptation guidance

- Effort: Low
- Guidance: Reuse the grid row pattern (label, proportional bar, value) and the featured-row highlight treatment; swap in new metric data and accent color to retheme for a different product comparison.

What transfers:
- Row-based grid pairing inline bar track with label and value
- Highlighted/featured row convention (background + accent color)
- Three-part stat-card plus two-table grouping inside one container

Dependencies:
- Competitor/benchmark data set
- Brand accent color for highlighted bars and featured row
- Partner logo set for the footer row

## 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 evidence available for this crop
- No font-family or color detail specific to this section beyond inherited page-level tokens
- Cannot confirm responsive/mobile behavior of the table grid

## 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: comparison
- Source type: comparison
- Structure: two-column
- Layout: Two-column grid containing tabular data with inline horizontal bars, sitting above a row of partner logos.
- Styles: minimal, corporate, geometric
- Components: table, horizontal bar, list, icon, logo
- Purpose: Side-by-side comparison tables featuring horizontal bar charts to illustrate price and speed metrics against competitors.
- Visual signature: Two side-by-side white cards with subtle grey and blue horizontal bar charts.
- Place on the page: 4 of 22, after Stats (`krea-ai:C03`), before Stats (`krea-ai:C05`)

### Crop and composition

- Crop: 1440×812px; aspect ratio 1.773:1
- Page bounds: 2227–3039px 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": "card/subheading",
      "family": "Krea 3 Suisse Intl",
      "stack": "\"Krea 3 Suisse Intl\", sans-serif",
      "size": "24px",
      "weight": "500",
      "lineHeight": "21.1px",
      "letterSpacing": "-0.7px",
      "sample": "Price per image",
      "element": "h3",
      "occurrences": 2,
      "sourceId": "font-5"
    },
    {
      "role": "UI/supporting text",
      "family": "Suisse Intl",
      "stack": "\"Suisse Intl\", ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"",
      "size": "16px",
      "weight": "500",
      "lineHeight": "21.1px",
      "letterSpacing": "normal",
      "sample": "Price per image",
      "element": "span",
      "occurrences": 4,
      "sourceId": "font-22"
    },
    {
      "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": "22px",
      "weight": "500",
      "lineHeight": "22px",
      "letterSpacing": "normal",
      "sample": "fal",
      "element": "span",
      "occurrences": 26,
      "sourceId": "font-32"
    },
    {
      "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": "24px",
      "weight": "600",
      "lineHeight": "21.1px",
      "letterSpacing": "-0.5px",
      "sample": "$0.06",
      "element": "span",
      "occurrences": 14,
      "sourceId": "font-38"
    }
  ],
  "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": "#737373",
      "cssValue": "rgb(115, 115, 115)",
      "alpha": 1,
      "appliedAs": [
        "text"
      ],
      "occurrences": 136,
      "sourceId": "color-17"
    },
    {
      "value": "#000000",
      "cssValue": "rgba(0, 0, 0, 0.62)",
      "alpha": 0.6196078431372549,
      "appliedAs": [
        "text"
      ],
      "occurrences": 12,
      "sourceId": "color-27"
    },
    {
      "value": "#2E6CF6",
      "cssValue": "rgb(46, 108, 246)",
      "alpha": 1,
      "appliedAs": [
        "text",
        "svg-fill"
      ],
      "occurrences": 30,
      "sourceId": "color-31"
    },
    {
      "value": "#000000",
      "cssValue": "rgba(0, 0, 0, 0.32)",
      "alpha": 0.3215686274509804,
      "appliedAs": [
        "background"
      ],
      "occurrences": 12,
      "sourceId": "color-44"
    }
  ],
  "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×812px; block; padding {"top":"60px","left":"16px","right":"16px","bottom":"60px"}; gap normal; background rgb(255, 255, 255); radius 0px.
- Observed gaps: 6, 10, 16, 21px.
- Representative content widths: 413, 412, 400, 315, 314, 263px.
- Layout containers: 8; cards/surfaces: 0; media elements: 8; browser animations: 0.

#### Container, grid, and spacing

```json
{
  "viewport": {
    "width": 1440,
    "captureBounds": {
      "top": 2227,
      "bottom": 3039,
      "pageHeight": 21224
    }
  },
  "container": {
    "size": "1440×812px",
    "position": "x 0px, y 2227px",
    "display": "block",
    "positionMode": "static",
    "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": [
      6,
      10,
      16,
      21
    ],
    "representativeContentWidthsPx": [
      413,
      412,
      400,
      315,
      314,
      263
    ]
  },
  "columns": [
    {
      "element": "li · Krea 3 $0.06",
      "size": "413×32px",
      "position": "x 439px, y 2378px",
      "display": "grid",
      "template": "314.906px 81.5938px",
      "direction": "row",
      "gap": "6px 16px"
    },
    {
      "element": "li · Grok Imagine 2.0 $0.06",
      "size": "413×32px",
      "position": "x 439px, y 2431px",
      "display": "grid",
      "template": "314.906px 81.5938px",
      "direction": "row",
      "gap": "6px 16px"
    },
    {
      "element": "li · Nano Banana 2 $0.067",
      "size": "413×32px",
      "position": "x 439px, y 2484px",
      "display": "grid",
      "template": "314.906px 81.5938px",
      "direction": "row",
      "gap": "6px 16px"
    },
    {
      "element": "li · Seedream 5.0 Pro $0.09",
      "size": "413×32px",
      "position": "x 439px, y 2537px",
      "display": "grid",
      "template": "314.906px 81.5938px",
      "direction": "row",
      "gap": "6px 16px"
    },
    {
      "element": "li · Nano Banana Pro $0.135",
      "size": "413×32px",
      "position": "x 439px, y 2590px",
      "display": "grid",
      "template": "314.906px 81.5938px",
      "direction": "row",
      "gap": "6px 16px"
    },
    {
      "element": "li · GPT Image 2 $0.22",
      "size": "413×32px",
      "position": "x 439px, y 2643px",
      "display": "grid",
      "template": "314.906px 81.5938px",
      "direction": "row",
      "gap": "6px 16px"
    },
    {
      "element": "li · Ideogram 4.5 $0.22",
      "size": "413×32px",
      "position": "x 439px, y 2696px",
      "display": "grid",
      "template": "314.906px 81.5938px",
      "direction": "row",
      "gap": "6px 16px"
    },
    {
      "element": "li · Krea 3 <8s",
      "size": "412×32px",
      "position": "x 925px, y 2378px",
      "display": "grid",
      "template": "313.906px 81.5938px",
      "direction": "row",
      "gap": "6px 16px"
    }
  ]
}
```

#### Cards and surfaces

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

#### Media treatment

```json
[
  {
    "element": "img · size-5 shrink-0 object-contain brightness-0 md:size-6 svelte-12db4sl",
    "size": "24×24px",
    "position": "x -13px, y 2947px",
    "aspectRatio": 1,
    "objectFit": "contain",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "clip",
    "source": "https://cdn.jsdelivr.net/npm/@lobehub/icons-static-svg@1.95.1/icons/fal.svg"
  },
  {
    "element": "img · size-5 shrink-0 object-contain brightness-0 md:size-6 svelte-12db4sl",
    "size": "24×24px",
    "position": "x 117px, y 2947px",
    "aspectRatio": 1,
    "objectFit": "contain",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "clip",
    "source": "https://cdn.jsdelivr.net/npm/@lobehub/icons-static-svg@1.95.1/icons/baseten.svg"
  },
  {
    "element": "img · size-5 shrink-0 object-contain brightness-0 md:size-6 svelte-12db4sl",
    "size": "24×24px",
    "position": "x 308px, y 2947px",
    "aspectRatio": 1,
    "objectFit": "contain",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "clip",
    "source": "https://cdn.jsdelivr.net/npm/@lobehub/icons-static-svg@1.95.1/icons/comfyui.svg"
  },
  {
    "element": "img · size-5 shrink-0 object-contain brightness-0 md:size-6 svelte-12db4sl",
    "size": "24×24px",
    "position": "x 482px, y 2947px",
    "aspectRatio": 1,
    "objectFit": "contain",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "clip",
    "source": "https://s.krea.ai/k3-landing-final/k3partner-luminal.svg"
  },
  {
    "element": "img · size-5 shrink-0 object-contain brightness-0 md:size-6 svelte-12db4sl",
    "size": "24×24px",
    "position": "x 670px, y 2947px",
    "aspectRatio": 1,
    "objectFit": "contain",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "clip",
    "source": "https://cdn.jsdelivr.net/npm/@lobehub/icons-static-svg@1.95.1/icons/together.svg"
  },
  {
    "element": "svg · svg",
    "size": "24×24px",
    "position": "x 893px, y 2947px",
    "aspectRatio": 1,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "hidden",
    "source": "source not captured"
  },
  {
    "element": "img · size-5 shrink-0 object-contain brightness-0 md:size-6 svelte-12db4sl",
    "size": "24×24px",
    "position": "x 1069px, y 2947px",
    "aspectRatio": 1,
    "objectFit": "contain",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "clip",
    "source": "https://s.krea.ai/k3-landing-final/k3partner-creativefabrica.png"
  },
  {
    "element": "img · size-5 shrink-0 object-contain brightness-0 md:size-6 svelte-12db4sl",
    "size": "24×24px",
    "position": "x 1343px, y 2947px",
    "aspectRatio": 1,
    "objectFit": "contain",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "clip",
    "source": "https://s.krea.ai/k3-landing-final/k3partner-oxen.svg"
  }
]
```

#### 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-291",
    "gap": "normal",
    "tag": "section",
    "rect": {
      "x": 0,
      "y": 2227,
      "width": 1440,
      "height": 812
    },
    "role": null,
    "label": "$0.06 Price per image4x Faster than Nano Banana ProUnder 8s Time per edit Krea 3 Price per image Kre",
    "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": "60px"
    },
    "overflow": "visible",
    "position": "static",
    "background": "rgb(255, 255, 255)"
  },
  "cards": [],
  "media": [
    {
      "id": "ld-428",
      "tag": "img",
      "rect": {
        "x": -13,
        "y": 2947,
        "width": 24,
        "height": 24
      },
      "role": null,
      "label": "size-5 shrink-0 object-contain brightness-0 md:size-6 svelte-12db4sl",
      "media": {
        "alt": "",
        "src": "https://cdn.jsdelivr.net/npm/@lobehub/icons-static-svg@1.95.1/icons/fal.svg",
        "naturalWidth": 16,
        "naturalHeight": 16
      },
      "radius": "0px",
      "overflow": "clip",
      "objectFit": "contain",
      "aspectRatio": 1,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-431",
      "tag": "img",
      "rect": {
        "x": 117,
        "y": 2947,
        "width": 24,
        "height": 24
      },
      "role": null,
      "label": "size-5 shrink-0 object-contain brightness-0 md:size-6 svelte-12db4sl",
      "media": {
        "alt": "",
        "src": "https://cdn.jsdelivr.net/npm/@lobehub/icons-static-svg@1.95.1/icons/baseten.svg",
        "naturalWidth": 16,
        "naturalHeight": 16
      },
      "radius": "0px",
      "overflow": "clip",
      "objectFit": "contain",
      "aspectRatio": 1,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-434",
      "tag": "img",
      "rect": {
        "x": 308,
        "y": 2947,
        "width": 24,
        "height": 24
      },
      "role": null,
      "label": "size-5 shrink-0 object-contain brightness-0 md:size-6 svelte-12db4sl",
      "media": {
        "alt": "",
        "src": "https://cdn.jsdelivr.net/npm/@lobehub/icons-static-svg@1.95.1/icons/comfyui.svg",
        "naturalWidth": 16,
        "naturalHeight": 16
      },
      "radius": "0px",
      "overflow": "clip",
      "objectFit": "contain",
      "aspectRatio": 1,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-437",
      "tag": "img",
      "rect": {
        "x": 482,
        "y": 2947,
        "width": 24,
        "height": 24
      },
      "role": null,
      "label": "size-5 shrink-0 object-contain brightness-0 md:size-6 svelte-12db4sl",
      "media": {
        "alt": "",
        "src": "https://s.krea.ai/k3-landing-final/k3partner-luminal.svg",
        "naturalWidth": 256,
        "naturalHeight": 256
      },
      "radius": "0px",
      "overflow": "clip",
      "objectFit": "contain",
      "aspectRatio": 1,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-440",
      "tag": "img",
      "rect": {
        "x": 670,
        "y": 2947,
        "width": 24,
        "height": 24
      },
      "role": null,
      "label": "size-5 shrink-0 object-contain brightness-0 md:size-6 svelte-12db4sl",
      "media": {
        "alt": "",
        "src": "https://cdn.jsdelivr.net/npm/@lobehub/icons-static-svg@1.95.1/icons/together.svg",
        "naturalWidth": 16,
        "naturalHeight": 16
      },
      "radius": "0px",
      "overflow": "clip",
      "objectFit": "contain",
      "aspectRatio": 1,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-443",
      "tag": "svg",
      "rect": {
        "x": 893,
        "y": 2947,
        "width": 24,
        "height": 24
      },
      "role": "img",
      "label": "svg",
      "media": null,
      "radius": "0px",
      "overflow": "hidden",
      "objectFit": "fill",
      "aspectRatio": 1,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-447",
      "tag": "img",
      "rect": {
        "x": 1069,
        "y": 2947,
        "width": 24,
        "height": 24
      },
      "role": null,
      "label": "size-5 shrink-0 object-contain brightness-0 md:size-6 svelte-12db4sl",
      "media": {
        "alt": "",
        "src": "https://s.krea.ai/k3-landing-final/k3partner-creativefabrica.png",
        "naturalWidth": 330,
        "naturalHeight": 330
      },
      "radius": "0px",
      "overflow": "clip",
      "objectFit": "contain",
      "aspectRatio": 1,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-450",
      "tag": "img",
      "rect": {
        "x": 1343,
        "y": 2947,
        "width": 24,
        "height": 24
      },
      "role": null,
      "label": "size-5 shrink-0 object-contain brightness-0 md:size-6 svelte-12db4sl",
      "media": {
        "alt": "",
        "src": "https://s.krea.ai/k3-landing-final/k3partner-oxen.svg",
        "naturalWidth": 256,
        "naturalHeight": 256
      },
      "radius": "0px",
      "overflow": "clip",
      "objectFit": "contain",
      "aspectRatio": 1,
      "objectPosition": "50% 50%"
    }
  ],
  "bounds": {
    "top": 2227,
    "bottom": 3039,
    "pageHeight": 21224
  },
  "schema": "little-details-section-measurements-v1",
  "source": "saved DOM/CSS element and animation maps",
  "columns": [
    {
      "id": "ld-313",
      "gap": "6px 16px",
      "tag": "li",
      "rect": {
        "x": 439,
        "y": 2378,
        "width": 413,
        "height": 32
      },
      "role": null,
      "label": "Krea 3 $0.06",
      "columns": "314.906px 81.5938px",
      "display": "grid",
      "direction": "row"
    },
    {
      "id": "ld-321",
      "gap": "6px 16px",
      "tag": "li",
      "rect": {
        "x": 439,
        "y": 2431,
        "width": 413,
        "height": 32
      },
      "role": null,
      "label": "Grok Imagine 2.0 $0.06",
      "columns": "314.906px 81.5938px",
      "display": "grid",
      "direction": "row"
    },
    {
      "id": "ld-329",
      "gap": "6px 16px",
      "tag": "li",
      "rect": {
        "x": 439,
        "y": 2484,
        "width": 413,
        "height": 32
      },
      "role": null,
      "label": "Nano Banana 2 $0.067",
      "columns": "314.906px 81.5938px",
      "display": "grid",
      "direction": "row"
    },
    {
      "id": "ld-337",
      "gap": "6px 16px",
      "tag": "li",
      "rect": {
        "x": 439,
        "y": 2537,
        "width": 413,
        "height": 32
      },
      "role": null,
      "label": "Seedream 5.0 Pro $0.09",
      "columns": "314.906px 81.5938px",
      "display": "grid",
      "direction": "row"
    },
    {
      "id": "ld-345",
      "gap": "6px 16px",
      "tag": "li",
      "rect": {
        "x": 439,
        "y": 2590,
        "width": 413,
        "height": 32
      },
      "role": null,
      "label": "Nano Banana Pro $0.135",
      "columns": "314.906px 81.5938px",
      "display": "grid",
      "direction": "row"
    },
    {
      "id": "ld-353",
      "gap": "6px 16px",
      "tag": "li",
      "rect": {
        "x": 439,
        "y": 2643,
        "width": 413,
        "height": 32
      },
      "role": null,
      "label": "GPT Image 2 $0.22",
      "columns": "314.906px 81.5938px",
      "display": "grid",
      "direction": "row"
    },
    {
      "id": "ld-361",
      "gap": "6px 16px",
      "tag": "li",
      "rect": {
        "x": 439,
        "y": 2696,
        "width": 413,
        "height": 32
      },
      "role": null,
      "label": "Ideogram 4.5 $0.22",
      "columns": "314.906px 81.5938px",
      "display": "grid",
      "direction": "row"
    },
    {
      "id": "ld-372",
      "gap": "6px 16px",
      "tag": "li",
      "rect": {
        "x": 925,
        "y": 2378,
        "width": 412,
        "height": 32
      },
      "role": null,
      "label": "Krea 3 <8s",
      "columns": "313.906px 81.5938px",
      "display": "grid",
      "direction": "row"
    }
  ],
  "spacing": {
    "gapsPx": [
      6,
      10,
      16,
      21
    ],
    "representativeContentWidthsPx": [
      413,
      412,
      400,
      315,
      314,
      263
    ]
  },
  "coverage": {
    "cards": 0,
    "media": 8,
    "animations": 0,
    "elementsInSection": 79
  },
  "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

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: Row-based grid pairing inline bar track with label and value; Highlighted/featured row convention (background + accent color); Three-part stat-card plus two-table grouping inside one container
- Dependencies: Competitor/benchmark data set; Brand accent color for highlighted bars and featured row; Partner logo set for the footer row
- Guidance: Reuse the grid row pattern (label, proportional bar, value) and the featured-row highlight treatment; swap in new metric data and accent color to retheme for a different product comparison.

### 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 comparison section inspired by the design evidence titled “Pricing and speed benchmark tables”.

Purpose: Side-by-side comparison tables featuring horizontal bar charts to illustrate price and speed metrics against competitors.

Structure: two-column. Source layout label: Two-column grid containing tabular data with inline horizontal bars, sitting above a row of partner logos.. 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: Two side-by-side white cards with subtle grey and blue horizontal bar charts.

Components: table, horizontal bar, list, icon, logo.

Style direction: minimal, corporate, geometric.

Observed crop: 1440×812px (1.773: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-5","size":"24px","count":2,"family":"Krea 3 Suisse Intl","traits":"Regular","weight":"500","contexts":[{"tag":"h3","top":2327,"text":"Price per image","property":"font"},{"tag":"h3","top":2327,"text":"Seconds per edit","property":"font"}],"fontStack":"\"Krea 3 Suisse Intl\", sans-serif","lineHeight":"21.1px","letterSpacing":"-0.7px"} {"id":"font-22","size":"16px","count":4,"family":"Suisse Intl","traits":"Regular","weight":"500","contexts":[{"tag":"span","top":2366,"text":"Price per image","property":"font"},{"tag":"span","top":2454,"text":"Faster than Nano Banana Pro","property":"font"},{"tag":"span","top":2543,"text":"Time per edit","property":"font"}],"fontStack":"\"Suisse Intl\", ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"","lineHeight":"21.1px","letterSpacing":"normal"} {"id":"font-32","size":"22px","count":26,"family":"Suisse Intl","traits":"Regular","weight":"500","contexts":[{"tag":"span","top":2948,"text":"fal","property":"font"},{"tag":"span","top":2948,"text":"Baseten","property":"font"},{"tag":"span","top":2948,"text":"Comfy","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":"22px","letterSpacing":"normal"} {"id":"font-38","size":"24px","count":14,"family":"Suisse Intl","traits":"Regular","weight":"600","contexts":[{"tag":"span","top":2383,"text":"$0.06","property":"font"},{"tag":"span","top":2436,"text":"$0.06","property":"font"},{"tag":"span","top":2489,"text":"$0.067","property":"font"}],"fontStack":"\"Suisse Intl\", ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"","lineHeight":"21.1px","letterSpacing":"-0.5px"}

Colors measured inside this section: {"id":"color-17","hex":"#737373","alpha":1,"count":136,"contexts":[{"tag":"span","top":1739,"text":"Compared to","property":"text"},{"tag":"button","top":1785,"text":"🍌 Nano Banana Pro","property":"text"},{"tag":"p","top":2869,"text":"We distribute through the world’s leading organizations, helping them advance their industries:","property":"text"}],"cssValue":"rgb(115, 115, 115)"} {"id":"color-27","hex":"#000000","alpha":0.6196078431372549,"count":12,"contexts":[{"tag":"span","top":2447,"text":"Grok Imagine 2.0","property":"text"}],"cssValue":"rgba(0, 0, 0, 0.62)"} {"id":"color-31","hex":"#2E6CF6","alpha":1,"count":30,"contexts":[{"tag":"span","top":2383,"text":"$0.06","property":"text"},{"tag":"svg","top":3387,"text":"","property":"svg-fill"},{"tag":"path","top":3388,"text":"","property":"svg-fill"}],"cssValue":"rgb(46, 108, 246)"} {"id":"color-44","hex":"#000000","alpha":0.3215686274509804,"count":12,"contexts":[{"tag":"span","top":2431,"text":"","property":"background"}],"cssValue":"rgba(0, 0, 0, 0.32)"}

Exact section measurements from the saved element map: root {"rect":{"x":0,"y":2227,"width":1440,"height":812},"padding":{"top":"60px","left":"16px","right":"16px","bottom":"60px"},"gap":"normal","columns":null,"overflow":"visible"}; spacing {"gapsPx":[6,10,16,21],"representativeContentWidthsPx":[413,412,400,315,314,263]}; surfaces {"radii":[],"borders":[],"shadows":[]}; media [{"tag":"img","rect":{"x":-13,"y":2947,"width":24,"height":24},"aspectRatio":1,"objectFit":"contain","objectPosition":"50% 50%","radius":"0px"},{"tag":"img","rect":{"x":117,"y":2947,"width":24,"height":24},"aspectRatio":1,"objectFit":"contain","objectPosition":"50% 50%","radius":"0px"},{"tag":"img","rect":{"x":308,"y":2947,"width":24,"height":24},"aspectRatio":1,"objectFit":"contain","objectPosition":"50% 50%","radius":"0px"},{"tag":"img","rect":{"x":482,"y":2947,"width":24,"height":24},"aspectRatio":1,"objectFit":"contain","objectPosition":"50% 50%","radius":"0px"}]

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

Transfer these principles: Row-based grid pairing inline bar track with label and value; Highlighted/featured row convention (background + accent color); Three-part stat-card plus two-table grouping inside one container.

Dependencies: Competitor/benchmark data set; Brand accent color for highlighted bars and featured row; Partner logo set for the footer row.

Adaptation guidance: Reuse the grid row pattern (label, proportional bar, value) and the featured-row highlight treatment; swap in new metric data and accent color to retheme for a different product comparison.

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