# Large animated stat highlight

Schema: Design Details SECTION.md v3.2
Website: Krea
Source: https://www.krea.ai/krea-3
Source section IDs: 4522239b-fa19-4413-ae50-3a82bb66d6c9
Status: AI analysed; vocabulary promotion is automated

## Builder's note

What makes it work:
- A 132px headline with tight tracking and a 116px line height dominates the white space, so the claim reads before anything else does.
- The scale jump from 132px display type to 32px and 20px supporting copy gives a clear reading order: claim, comparison pills, then the detail sentence.
- Black text on pure white, with a struck-through old price and an inline icon in the body line, turns the numbers into proof rather than decoration.

What a screenshot can't show:
- The recording shows the headline numbers changing on scroll between about 4 and 9 seconds, but not the easing or how values transition.
- The 132px headline uses -2.6px letter spacing, and the 32px text uses -0.6px with a 42px line height.

Borrow: Let one oversized claim carry the section, and put small, specific proof directly beneath it so the big number feels earned.
Leave alone: Don't copy Krea's Suisse Intl-style typeface, its scattered line and dot marks, or the exact '10x Faster, 3x Cheaper' wording; use a free neutral grotesque like Inter instead.

## Classification

- Type: stats
- Layout: Centered prominent typography with smaller supporting text and badges below.
- Styles: minimal, typographic, bold
- Confidence: 100%

## Purpose and structure

A large typography-focused section presenting a bold claim with dynamic numbers, set against a minimal white background.

Visual signature: Giant black text '10x Faster, 3x Cheaper' in the center of empty white space.

## Components

- large heading
- subheading
- badge
- icon

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

- 4.0–9.0s — Large typography '10x Faster, 3x Cheaper' changes values dynamically on scroll. (92% confidence)

## Section quality

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

- Typography: 68 — Giant 132px tightly-tracked display type carries the whole section with confident scale contrast against small 20px body copy and pill labels; the strikethrough price treatment and inline icon substitution in the body line show real typographic craft, though the headline itself is a fairly standard oversized-numeral pattern. Next tier: Needs a more distinctive type treatment (custom ligatures, variable weight animation, or unconventional composition) beyond scale alone to reach strong/memorable.
- Composition: 65 — Centered, generously spaced layout with clear reading order (claim, comparison pill row, supporting sentence) and decorative scattered line/dot marks framing the empty space; hierarchy is clean but the arrangement is a conventional centered-stack pattern seen widely in SaaS hero/stat sections. Next tier: Would need an asymmetric or more structurally inventive arrangement, or tighter integration between decorative marks and content, to move past polished-conventional.
- Motion: inconclusive — Gemini notes the big numbers 'change dynamically on scroll' between 4-9s but gives no specifics on easing, stagger, or how values transition; deterministic animation data only covers an unrelated image-swap hover animation elsewhere in the section, not the headline itself. Next tier: Need timestamped detail on how the stat values animate (character flip, counter roll, crossfade) to score motion.
- Content: 62 — The headline, comparison toggle pills, and the detailed cost/speed sentence with struck-through old price work together as one coherent proof statement rather than decorative stats, giving real content purpose. Next tier: Content is informative but the format (bold claim + small print) is a common pattern; richer data visualization or interactivity tied to the comparison pills would elevate it.
- Originality: 55 — Huge centered numeral claim on white with faint scattered line marks is a recognizable genre convention for AI/SaaS speed claims; the strikethrough price detail is a nice touch but not enough to make the overall idea feel distinct. Next tier: Section needs a structural or conceptual hook that isn't reducible to 'big number + small context line' to be considered original.
- Adaptability: 60 — Deterministic tokens (type roles, pill radius, color roles, spacing) are cleanly separable from the structural skeleton (headline, toggle pills, supporting text), making restyling straightforward; decorative SVG line marks are a dependency. Next tier: Full separation is capped by reliance on bespoke decorative SVG elements and specific comparison-pill content that isn't generically interchangeable.

Strengths:
- Confident scale contrast between 132px display numerals and small supporting text creates immediate hierarchy
- Inline interactive details (strikethrough pricing, icon-in-text, comparison pill toggle) add credibility and texture to a simple claim
- Generous whitespace and restrained palette (black text on white) keep the stat legible and uncluttered

Weaknesses:
- Overall pattern (giant centered stat + small context line) is a common SaaS/AI landing convention
- Decorative scattered line/dot marks feel like generic background filler rather than integrated to the message
- Motion behavior of the changing numbers is not specified enough to assess craft
- Comparison pill row concept is undersold visually compared to the type above it

Why it does not reach the next tier: The section executes a familiar big-number pattern cleanly with nice supporting details, but lacks a structurally distinctive idea, confirmed motion craft, or visual invention that would push it into strong/memorable territory.

## Adaptation guidance

- Effort: Low
- Guidance: Swap display numerals, comparison labels, and decorative marks per brand while keeping the centered hierarchy and pill-toggle structure; verify the number-change motion is implemented with equivalent craft since it's currently unverified.

What transfers:
- Centered stack layout: giant claim, context line, supporting pill row, detail sentence
- Hierarchy contrast between oversized display type and small body/label text
- Pill-shaped comparison toggle component pattern

Dependencies:
- Bespoke scattered SVG line/dot decorative marks
- Specific numeric claim content tied to product pricing/speed metrics
- Inline product icon and comparison brand logos used within text

## Living vocabulary

- No reusable vocabulary candidates were supported by this section.

Only terms with status `active` enter the public taxonomy. Deferred and proposed terms remain available to later AI passes; rejected terms remain as provenance so they are not repeatedly reinvented.

## Provenance and limitations

- Section boundaries and naming: Gemini Pro visual observation
- Motion observations: Gemini Pro direct-video analysis
- Quality judgment: Claude
- Exact design facts: browser/CSS extraction at website scope
- Rubric: Design Details section rubric 3.2 (Typography 20%, Composition 20%, Motion 15%, Content 15%, Originality 15%, Adaptability 15%)
- Motion score withheld due to lack of specific timestamped visual detail on the number-change animation
- Cannot verify exact animation easing/timing for the headline value changes from supplied evidence
- Decorative SVG line marks' role/purpose not fully clear from static crop

## Usage guidance

Use this section as design evidence. Create an original implementation; do not reproduce the source copy, assets, or proprietary composition exactly.

## Build blueprint v3.2

### Purpose and classification

- Canonical type: stats
- Source type: stats
- Structure: centered single-column
- Layout: Centered prominent typography with smaller supporting text and badges below.
- Styles: minimal, typographic, bold
- Components: large heading, subheading, badge, icon
- Purpose: A large typography-focused section presenting a bold claim with dynamic numbers, set against a minimal white background.
- Visual signature: Giant black text '10x Faster, 3x Cheaper' in the center of empty white space.
- Place on the page: 3 of 22, after Hero (`krea-ai:C02`), before Comparison (`krea-ai:C04`)

### Crop and composition

- Crop: 1440×1227px; aspect ratio 1.174:1
- Page bounds: 1000–2227px 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": "32px",
      "weight": "500",
      "lineHeight": "42.2px",
      "letterSpacing": "-0.6px",
      "sample": "Krea 3 is an image editing model built for production. It changes only what you ask, finishes an edi",
      "element": "p",
      "occurrences": 5,
      "sourceId": "font-18"
    },
    {
      "role": "section heading",
      "family": "Krea 3 Suisse Intl",
      "stack": "\"Krea 3 Suisse Intl\", sans-serif",
      "size": "132px",
      "weight": "500",
      "lineHeight": "116.2px",
      "letterSpacing": "-2.6px",
      "sample": "Krea 3:",
      "element": "span",
      "occurrences": 21,
      "sourceId": "font-34"
    }
  ],
  "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": "#000000",
      "cssValue": "rgba(0, 0, 0, 0.05)",
      "alpha": 0.050980392156862744,
      "appliedAs": [
        "control-background",
        "background"
      ],
      "occurrences": 15,
      "sourceId": "color-3"
    },
    {
      "value": "#000000",
      "cssValue": "rgb(0, 0, 0)",
      "alpha": 1,
      "appliedAs": [
        "svg-fill",
        "text"
      ],
      "occurrences": 335,
      "sourceId": "color-4"
    },
    {
      "value": "#F5F5F5",
      "cssValue": "rgb(245, 245, 245)",
      "alpha": 1,
      "appliedAs": [
        "background",
        "control-background"
      ],
      "occurrences": 21,
      "sourceId": "color-13"
    },
    {
      "value": "#737373",
      "cssValue": "rgb(115, 115, 115)",
      "alpha": 1,
      "appliedAs": [
        "text"
      ],
      "occurrences": 136,
      "sourceId": "color-17"
    },
    {
      "value": "#000000",
      "cssValue": "rgba(0, 0, 0, 0.4)",
      "alpha": 0.4,
      "appliedAs": [
        "text"
      ],
      "occurrences": 11,
      "sourceId": "color-22"
    },
    {
      "value": "#000000",
      "cssValue": "rgba(0, 0, 0, 0.35)",
      "alpha": 0.34901960784313724,
      "appliedAs": [
        "svg-fill",
        "text",
        "background"
      ],
      "occurrences": 4,
      "sourceId": "color-36"
    }
  ],
  "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 container was not deterministically isolated.
- Observed gaps: 5, 7.7, 9.6px.
- Representative content widths: 1378, 880, 750, 743, 705, 418px.
- Layout containers: 1; cards/surfaces: 0; media elements: 9; browser animations: 2.

#### Container, grid, and spacing

```json
{
  "viewport": {
    "width": 1440,
    "captureBounds": {
      "top": 1000,
      "bottom": 2227,
      "pageHeight": 21224
    }
  },
  "container": null,
  "spacing": {
    "observedGapsPx": [
      5,
      7.7,
      9.6
    ],
    "representativeContentWidthsPx": [
      1378,
      880,
      750,
      743,
      705,
      418
    ]
  },
  "columns": [
    {
      "element": "div · GPT Image 2🍌 Nano Banana Pro",
      "size": "418×60px",
      "position": "x 511px, y 1779px",
      "display": "grid",
      "template": "204.219px 204.219px",
      "direction": "row",
      "gap": "normal"
    }
  ]
}
```

#### Cards and surfaces

```json
{
  "cards": [],
  "surfaces": {
    "radii": [
      "3.35544e+07px",
      "999px"
    ],
    "borders": [],
    "shadows": []
  }
}
```

#### Media treatment

```json
[
  {
    "element": "svg · svg",
    "size": "1378×690px",
    "position": "x 31px, y 1120px",
    "aspectRatio": 2,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "visible",
    "source": "source not captured"
  },
  {
    "element": "img · svelte-1cp4dhi",
    "size": "60×43px",
    "position": "x 763px, y 2041px",
    "aspectRatio": 1.4,
    "objectFit": "cover",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "clip",
    "source": "https://optim-images.krea.ai/https---s-krea-ai-k3-stuff-landing-hero-rebuild-porsche-0-webp-256.webp"
  },
  {
    "element": "img · svelte-1cp4dhi",
    "size": "60×43px",
    "position": "x 763px, y 2041px",
    "aspectRatio": 1.4,
    "objectFit": "cover",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "clip",
    "source": "https://optim-images.krea.ai/https---s-krea-ai-k3-stuff-landing-hero-rebuild-porsche-1-webp-256.webp"
  },
  {
    "element": "img · svelte-1cp4dhi",
    "size": "60×43px",
    "position": "x 763px, y 2041px",
    "aspectRatio": 1.4,
    "objectFit": "cover",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "clip",
    "source": "https://optim-images.krea.ai/https---s-krea-ai-k3-stuff-landing-hero-rebuild-porsche-2-webp-256.webp"
  },
  {
    "element": "img · svelte-1cp4dhi",
    "size": "60×43px",
    "position": "x 763px, y 2041px",
    "aspectRatio": 1.4,
    "objectFit": "cover",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "clip",
    "source": "https://optim-images.krea.ai/https---s-krea-ai-k3-stuff-landing-hero-rebuild-porsche-4-webp-256.webp"
  },
  {
    "element": "img · svelte-1cp4dhi on",
    "size": "56×40px",
    "position": "x 766px, y 2042px",
    "aspectRatio": 1.4,
    "objectFit": "cover",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "clip",
    "source": "https://optim-images.krea.ai/https---s-krea-ai-k3-stuff-landing-hero-rebuild-porsche-3-webp-256.webp"
  },
  {
    "element": "svg · svg",
    "size": "28×28px",
    "position": "x 449px, y 2089px",
    "aspectRatio": 1,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "hidden",
    "source": "source not captured"
  },
  {
    "element": "svg · svg",
    "size": "20×20px",
    "position": "x 558px, y 1799px",
    "aspectRatio": 1,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "hidden",
    "source": "source not captured"
  },
  {
    "element": "svg · svg",
    "size": "17×17px",
    "position": "x 455px, y 2094px",
    "aspectRatio": 1,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "hidden",
    "source": "source not captured"
  }
]
```

#### Browser-exposed animation parameters

```json
[
  {
    "target": "svelte-1cp4dhi",
    "delayMs": 0,
    "durationMs": 900,
    "easing": "cubic-bezier(0.22, 1, 0.36, 1)",
    "iterations": 1,
    "direction": "normal",
    "fill": "backwards",
    "keyframes": [
      {
        "scale": "1",
        "easing": "linear",
        "offset": 0,
        "composite": "auto",
        "computedOffset": 0
      },
      {
        "scale": "1.08",
        "easing": "linear",
        "offset": 1,
        "composite": "auto",
        "computedOffset": 1
      }
    ]
  },
  {
    "target": "svelte-1cp4dhi on",
    "delayMs": 0,
    "durationMs": 900,
    "easing": "cubic-bezier(0.22, 1, 0.36, 1)",
    "iterations": 1,
    "direction": "normal",
    "fill": "backwards",
    "keyframes": [
      {
        "scale": "1.08",
        "easing": "linear",
        "offset": 0,
        "composite": "auto",
        "computedOffset": 0
      },
      {
        "scale": "1",
        "easing": "linear",
        "offset": 1,
        "composite": "auto",
        "computedOffset": 1
      }
    ]
  }
]
```

### 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": null,
  "cards": [],
  "media": [
    {
      "id": "ld-107",
      "tag": "svg",
      "rect": {
        "x": 31,
        "y": 1120,
        "width": 1378,
        "height": 690
      },
      "role": null,
      "label": "svg",
      "media": null,
      "radius": "0px",
      "overflow": "visible",
      "objectFit": "fill",
      "aspectRatio": 2,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-243",
      "tag": "img",
      "rect": {
        "x": 763,
        "y": 2041,
        "width": 60,
        "height": 43
      },
      "role": null,
      "label": "svelte-1cp4dhi",
      "media": {
        "alt": "",
        "src": "https://optim-images.krea.ai/https---s-krea-ai-k3-stuff-landing-hero-rebuild-porsche-0-webp-256.webp",
        "naturalWidth": 256,
        "naturalHeight": 144
      },
      "radius": "0px",
      "overflow": "clip",
      "objectFit": "cover",
      "aspectRatio": 1.4,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-244",
      "tag": "img",
      "rect": {
        "x": 763,
        "y": 2041,
        "width": 60,
        "height": 43
      },
      "role": null,
      "label": "svelte-1cp4dhi",
      "media": {
        "alt": "",
        "src": "https://optim-images.krea.ai/https---s-krea-ai-k3-stuff-landing-hero-rebuild-porsche-1-webp-256.webp",
        "naturalWidth": 256,
        "naturalHeight": 144
      },
      "radius": "0px",
      "overflow": "clip",
      "objectFit": "cover",
      "aspectRatio": 1.4,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-245",
      "tag": "img",
      "rect": {
        "x": 763,
        "y": 2041,
        "width": 60,
        "height": 43
      },
      "role": null,
      "label": "svelte-1cp4dhi",
      "media": {
        "alt": "",
        "src": "https://optim-images.krea.ai/https---s-krea-ai-k3-stuff-landing-hero-rebuild-porsche-2-webp-256.webp",
        "naturalWidth": 256,
        "naturalHeight": 144
      },
      "radius": "0px",
      "overflow": "clip",
      "objectFit": "cover",
      "aspectRatio": 1.4,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-247",
      "tag": "img",
      "rect": {
        "x": 763,
        "y": 2041,
        "width": 60,
        "height": 43
      },
      "role": null,
      "label": "svelte-1cp4dhi",
      "media": {
        "alt": "",
        "src": "https://optim-images.krea.ai/https---s-krea-ai-k3-stuff-landing-hero-rebuild-porsche-4-webp-256.webp",
        "naturalWidth": 256,
        "naturalHeight": 144
      },
      "radius": "0px",
      "overflow": "clip",
      "objectFit": "cover",
      "aspectRatio": 1.4,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-246",
      "tag": "img",
      "rect": {
        "x": 766,
        "y": 2042,
        "width": 56,
        "height": 40
      },
      "role": null,
      "label": "svelte-1cp4dhi on",
      "media": {
        "alt": "",
        "src": "https://optim-images.krea.ai/https---s-krea-ai-k3-stuff-landing-hero-rebuild-porsche-3-webp-256.webp",
        "naturalWidth": 256,
        "naturalHeight": 144
      },
      "radius": "0px",
      "overflow": "clip",
      "objectFit": "cover",
      "aspectRatio": 1.4,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-254",
      "tag": "svg",
      "rect": {
        "x": 449,
        "y": 2089,
        "width": 28,
        "height": 28
      },
      "role": null,
      "label": "svg",
      "media": null,
      "radius": "0px",
      "overflow": "hidden",
      "objectFit": "fill",
      "aspectRatio": 1,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-235",
      "tag": "svg",
      "rect": {
        "x": 558,
        "y": 1799,
        "width": 20,
        "height": 20
      },
      "role": null,
      "label": "svg",
      "media": null,
      "radius": "0px",
      "overflow": "hidden",
      "objectFit": "fill",
      "aspectRatio": 1,
      "objectPosition": "50% 50%"
    },
    {
      "id": "ld-251",
      "tag": "svg",
      "rect": {
        "x": 455,
        "y": 2094,
        "width": 17,
        "height": 17
      },
      "role": null,
      "label": "svg",
      "media": null,
      "radius": "0px",
      "overflow": "hidden",
      "objectFit": "fill",
      "aspectRatio": 1,
      "objectPosition": "50% 50%"
    }
  ],
  "bounds": {
    "top": 1000,
    "bottom": 2227,
    "pageHeight": 21224
  },
  "schema": "little-details-section-measurements-v1",
  "source": "saved DOM/CSS element and animation maps",
  "columns": [
    {
      "id": "ld-232",
      "gap": "normal",
      "tag": "div",
      "rect": {
        "x": 511,
        "y": 1779,
        "width": 418,
        "height": 60
      },
      "role": "radiogroup",
      "label": "GPT Image 2🍌 Nano Banana Pro",
      "columns": "204.219px 204.219px",
      "display": "grid",
      "direction": "row"
    }
  ],
  "spacing": {
    "gapsPx": [
      5,
      7.7,
      9.6
    ],
    "representativeContentWidthsPx": [
      1378,
      880,
      750,
      743,
      705,
      418
    ]
  },
  "coverage": {
    "cards": 0,
    "media": 9,
    "animations": 2,
    "elementsInSection": 45
  },
  "surfaces": {
    "radii": [
      "3.35544e+07px",
      "999px"
    ],
    "borders": [],
    "shadows": []
  },
  "animations": [
    {
      "id": "animation-3",
      "fill": "backwards",
      "easing": "cubic-bezier(0.22, 1, 0.36, 1)",
      "target": {
        "id": "ld-245",
        "tag": "img",
        "rect": {
          "x": 763,
          "y": 2041,
          "width": 60,
          "height": 43
        },
        "role": null,
        "label": "svelte-1cp4dhi"
      },
      "delayMs": 0,
      "direction": "normal",
      "keyframes": [
        {
          "scale": "1",
          "easing": "linear",
          "offset": 0,
          "composite": "auto",
          "computedOffset": 0
        },
        {
          "scale": "1.08",
          "easing": "linear",
          "offset": 1,
          "composite": "auto",
          "computedOffset": 1
        }
      ],
      "playState": "running",
      "durationMs": 900,
      "iterations": 1,
      "playbackRate": 1
    },
    {
      "id": "animation-4",
      "fill": "backwards",
      "easing": "cubic-bezier(0.22, 1, 0.36, 1)",
      "target": {
        "id": "ld-246",
        "tag": "img",
        "rect": {
          "x": 766,
          "y": 2042,
          "width": 56,
          "height": 40
        },
        "role": null,
        "label": "svelte-1cp4dhi on"
      },
      "delayMs": 0,
      "direction": "normal",
      "keyframes": [
        {
          "scale": "1.08",
          "easing": "linear",
          "offset": 0,
          "composite": "auto",
          "computedOffset": 0
        },
        {
          "scale": "1",
          "easing": "linear",
          "offset": 1,
          "composite": "auto",
          "computedOffset": 1
        }
      ],
      "playState": "running",
      "durationMs": 900,
      "iterations": 1,
      "playbackRate": 1
    }
  ],
  "capturedAt": "2026-10-31T06:25:43.715Z",
  "limitations": [
    "Values describe the captured desktop viewport and may change at other breakpoints.",
    "Transforms, sticky layers, and virtualized content can make the inferred section root approximate.",
    "Animations include browser-exposed Web Animations API state; CSS or script motion that was inactive at capture time may be absent."
  ],
  "viewportWidth": 1440
}
```

### Observed motion

1. **scroll** — Large typography '10x Faster, 3x Cheaper' changes values dynamically on scroll. (4s–9s; 92% 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: Centered stack layout: giant claim, context line, supporting pill row, detail sentence; Hierarchy contrast between oversized display type and small body/label text; Pill-shaped comparison toggle component pattern
- Dependencies: Bespoke scattered SVG line/dot decorative marks; Specific numeric claim content tied to product pricing/speed metrics; Inline product icon and comparison brand logos used within text
- Guidance: Swap display numerals, comparison labels, and decorative marks per brand while keeping the centered hierarchy and pill-toggle structure; verify the number-change motion is implemented with equivalent craft since it's currently unverified.

### Evidence readiness

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


### Agent implementation prompt

Create an original stats section inspired by the design evidence titled “Large animated stat highlight”.

Purpose: A large typography-focused section presenting a bold claim with dynamic numbers, set against a minimal white background.

Structure: centered single-column. Source layout label: Centered prominent typography with smaller supporting text and badges below.. Use a narrow central reading axis and deliberate scale contrast rather than adding unnecessary side content.

Visual signature to preserve at the pattern level: Giant black text '10x Faster, 3x Cheaper' in the center of empty white space.

Components: large heading, subheading, badge, icon.

Style direction: minimal, typographic, bold.

Observed crop: 1440×1227px (1.174: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-18","size":"32px","count":5,"family":"Krea 3 Suisse Intl","traits":"Regular","weight":"500","contexts":[{"tag":"p","top":1999,"text":"Krea 3 is an image editing model built for production. It changes only what you ask, finishes an edi","property":"font"},{"tag":"span","top":1999,"text":"Krea 3 is an image editing model built for production. It","property":"font"},{"tag":"span","top":2041,"text":", finishes an edit in under","property":"font"}],"fontStack":"\"Krea 3 Suisse Intl\", sans-serif","lineHeight":"42.2px","letterSpacing":"-0.6px"} {"id":"font-34","size":"132px","count":21,"family":"Krea 3 Suisse Intl","traits":"Regular","weight":"500","contexts":[{"tag":"span","top":1486,"text":"Krea 3:","property":"font"},{"tag":"span","top":1487,"text":"10× 10× 10× Faster,","property":"font"},{"tag":"span","top":1480,"text":"10×","property":"font"}],"fontStack":"\"Krea 3 Suisse Intl\", sans-serif","lineHeight":"116.2px","letterSpacing":"-2.6px"}

Colors measured inside this section: {"id":"color-3","hex":"#000000","alpha":0.050980392156862744,"count":15,"contexts":[{"tag":"button","top":2087,"text":"$0.06","property":"control-background"},{"tag":"video","top":8572,"text":"","property":"background"},{"tag":"div","top":10651,"text":"","property":"background"}],"cssValue":"rgba(0, 0, 0, 0.05)"} {"id":"color-4","hex":"#000000","alpha":1,"count":335,"contexts":[{"tag":"svg","top":319,"text":"","property":"svg-fill"},{"tag":"a","top":900,"text":"Try Krea 3","property":"text"},{"tag":"line","top":1545,"text":"","property":"svg-fill"}],"cssValue":"rgb(0, 0, 0)"} {"id":"color-13","hex":"#F5F5F5","alpha":1,"count":21,"contexts":[{"tag":"div","top":1779,"text":"GPT Image 2🍌 Nano Banana Pro","property":"background"},{"tag":"a","top":19480,"text":"Krea 3 pricing","property":"control-background"}],"cssValue":"rgb(245, 245, 245)"} {"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-22","hex":"#000000","alpha":0.4,"count":11,"contexts":[{"tag":"span","top":1999,"text":"Krea 3 is an image editing model built for production. It","property":"text"},{"tag":"figcaption","top":12745,"text":"Krea 3","property":"text"}],"cssValue":"rgba(0, 0, 0, 0.4)"} {"id":"color-36","hex":"#000000","alpha":0.34901960784313724,"count":4,"contexts":[{"tag":"circle","top":1807,"text":"","property":"svg-fill"},{"tag":"button","top":13226,"text":"“Make it golden hour.”","property":"text"},{"tag":"span","top":13244,"text":"","property":"background"}],"cssValue":"rgba(0, 0, 0, 0.35)"}

Exact section measurements from the saved element map: spacing {"gapsPx":[5,7.7,9.6],"representativeContentWidthsPx":[1378,880,750,743,705,418]}; surfaces {"radii":["3.35544e+07px","999px"],"borders":[],"shadows":[]}; media [{"tag":"svg","rect":{"x":31,"y":1120,"width":1378,"height":690},"aspectRatio":2,"objectFit":"fill","objectPosition":"50% 50%","radius":"0px"},{"tag":"img","rect":{"x":763,"y":2041,"width":60,"height":43},"aspectRatio":1.4,"objectFit":"cover","objectPosition":"50% 50%","radius":"0px"},{"tag":"img","rect":{"x":763,"y":2041,"width":60,"height":43},"aspectRatio":1.4,"objectFit":"cover","objectPosition":"50% 50%","radius":"0px"},{"tag":"img","rect":{"x":763,"y":2041,"width":60,"height":43},"aspectRatio":1.4,"objectFit":"cover","objectPosition":"50% 50%","radius":"0px"}]; animations [{"target":{"id":"ld-245","tag":"img","rect":{"x":763,"y":2041,"width":60,"height":43},"role":null,"label":"svelte-1cp4dhi"},"delayMs":0,"durationMs":900,"easing":"cubic-bezier(0.22, 1, 0.36, 1)","keyframes":[{"scale":"1","easing":"linear","offset":0,"composite":"auto","computedOffset":0},{"scale":"1.08","easing":"linear","offset":1,"composite":"auto","computedOffset":1}]},{"target":{"id":"ld-246","tag":"img","rect":{"x":766,"y":2042,"width":56,"height":40},"role":null,"label":"svelte-1cp4dhi on"},"delayMs":0,"durationMs":900,"easing":"cubic-bezier(0.22, 1, 0.36, 1)","keyframes":[{"scale":"1.08","easing":"linear","offset":0,"composite":"auto","computedOffset":0},{"scale":"1","easing":"linear","offset":1,"composite":"auto","computedOffset":1}]}]

Motion evidence: scroll: Large typography '10x Faster, 3x Cheaper' changes values dynamically on scroll. (92% confidence)

Transfer these principles: Centered stack layout: giant claim, context line, supporting pill row, detail sentence; Hierarchy contrast between oversized display type and small body/label text; Pill-shaped comparison toggle component pattern.

Dependencies: Bespoke scattered SVG line/dot decorative marks; Specific numeric claim content tied to product pricing/speed metrics; Inline product icon and comparison brand logos used within text.

Adaptation guidance: Swap display numerals, comparison labels, and decorative marks per brand while keeping the centered hierarchy and pill-toggle structure; verify the number-change motion is implemented with equivalent craft since it's currently unverified.

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